From 75c40e7ac77c54be83d7553ccbec3a3d3bdbea3b Mon Sep 17 00:00:00 2001 From: Matthieu Riegler Date: Tue, 20 Jan 2026 03:41:37 +0100 Subject: [PATCH 1/8] ci: add template for vscode dedicated issues We didn't have an entry since we migrated the vscode extension repo to the fw repo. --- .github/ISSUE_TEMPLATE/5-vscode.yaml | 48 ++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/5-vscode.yaml diff --git a/.github/ISSUE_TEMPLATE/5-vscode.yaml b/.github/ISSUE_TEMPLATE/5-vscode.yaml new file mode 100644 index 000000000000..9711998d7a57 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/5-vscode.yaml @@ -0,0 +1,48 @@ +name: 'VSCode Angular Language Service extension' +description: Report an issue or suggest a feature for the VSCode Angular Language Service extension + +body: + - type: checkboxes + id: bug-report-or-feature-request + attributes: + label: Is this a bug report or a feature request? + description: Select one. + options: + - label: Bug Report + - label: Feature Request + + - type: textarea + id: reproduction-steps + attributes: + label: Please provide the steps to reproduce the issue [Bug Report only] + + - type: textarea + id: expected-vs-actual-behavior + attributes: + label: Please provide the expected behavior vs the actual behavior you encountered [Bug Report only] + + - type: textarea + id: screenshot + attributes: + label: Please provide a screenshot if possible [Bug Report only] + + - type: textarea + id: exception-or-error + attributes: + label: Please provide the exception or error you saw [Bug Report only] + render: true + + - type: textarea + id: description + attributes: + label: Description [Feature Request only] + + - type: textarea + id: proposed-solution + attributes: + label: Proposed solution [Feature Request only] + + - type: textarea + id: alternatives-considered + attributes: + label: Alternatives considered [Feature Request only] From ed78fa05c710ebafb355ae00a85b190a118b6cc4 Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Fri, 16 Jan 2026 15:07:54 -0800 Subject: [PATCH 2/8] fix(core): Remove note to skip arrow functions in best practices Arrow functions are now supported and this note is no longer needed --- adev/src/context/guidelines.md | 1 - packages/core/resources/best-practices.md | 1 - 2 files changed, 2 deletions(-) diff --git a/adev/src/context/guidelines.md b/adev/src/context/guidelines.md index df8b4ae5c011..ca84199e3d9f 100644 --- a/adev/src/context/guidelines.md +++ b/adev/src/context/guidelines.md @@ -111,7 +111,6 @@ Here is a link to the most recent Angular style guide https://angular.dev/style- - Keep templates simple and avoid complex logic - Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` - Do not assume globals like (`new Date()`) are available. -- Do not write arrow functions in templates (they are not supported). - Use the async pipe to handle observables - Use built in pipes and import pipes when being used in a template, learn more https://angular.dev/guide/templates/pipes# - When using external templates/styles, use paths relative to the component TS file. diff --git a/packages/core/resources/best-practices.md b/packages/core/resources/best-practices.md index 676c86307eab..d918d76fb130 100644 --- a/packages/core/resources/best-practices.md +++ b/packages/core/resources/best-practices.md @@ -46,7 +46,6 @@ You are an expert in TypeScript, Angular, and scalable web application developme - Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` - Use the async pipe to handle observables - Do not assume globals like (`new Date()`) are available. -- Do not write arrow functions in templates (they are not supported). ## Services From 094cdfe0b519a13ff4e5aefc56aadd7507a14f4e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jan 2026 21:16:47 +0100 Subject: [PATCH 3/8] docs: fix serif font Fixes some headers that were using a serif font unintentionally. --- .../drag-drop/src/connected-sorting-group/app/app.css | 4 ++++ .../examples/drag-drop/src/connected-sorting/app/app.css | 4 ++++ adev/src/content/examples/drag-drop/src/copy-list/app/app.css | 4 ++++ .../examples/drag-drop/src/disable-sorting/app/app.css | 4 ++++ .../examples/drag-drop/src/enter-predicate/app/app.css | 4 ++++ 5 files changed, 20 insertions(+) diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css index a8ff3a9827ff..faf2f119e098 100644 --- a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css +++ b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css @@ -16,6 +16,10 @@ font-family: sans-serif; } +h2 { + font-family: sans-serif; +} + .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css index a8ff3a9827ff..faf2f119e098 100644 --- a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css +++ b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css @@ -16,6 +16,10 @@ font-family: sans-serif; } +h2 { + font-family: sans-serif; +} + .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; diff --git a/adev/src/content/examples/drag-drop/src/copy-list/app/app.css b/adev/src/content/examples/drag-drop/src/copy-list/app/app.css index 5c03894300a5..c03fde680b78 100644 --- a/adev/src/content/examples/drag-drop/src/copy-list/app/app.css +++ b/adev/src/content/examples/drag-drop/src/copy-list/app/app.css @@ -16,6 +16,10 @@ display: block; } +h2 { + font-family: sans-serif; +} + .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css index 18452c48f12c..4b5c179e0135 100644 --- a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css +++ b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css @@ -15,6 +15,10 @@ display: block; } +h2 { + font-family: sans-serif; +} + .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css index 18452c48f12c..4b5c179e0135 100644 --- a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css +++ b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css @@ -15,6 +15,10 @@ display: block; } +h2 { + font-family: sans-serif; +} + .example-box { padding: 20px 10px; border-bottom: solid 1px #ccc; From e4c09776b020dd49948f0484f67aaa02416fd2d5 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jan 2026 20:26:04 +0100 Subject: [PATCH 4/8] refactor(compiler): remove unused symbols Removes symbols that aren't used anymore from the identifiers map. --- packages/compiler/src/render3/r3_identifiers.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/compiler/src/render3/r3_identifiers.ts b/packages/compiler/src/render3/r3_identifiers.ts index ea0b0e1f81ed..3243cc4657d2 100644 --- a/packages/compiler/src/render3/r3_identifiers.ts +++ b/packages/compiler/src/render3/r3_identifiers.ts @@ -11,14 +11,8 @@ import * as o from '../output/output_ast'; const CORE = '@angular/core'; export class Identifiers { - /* Methods */ - static NEW_METHOD = 'factory'; - static TRANSFORM_METHOD = 'transform'; - static PATCH_DEPS = 'patchedDeps'; - static core: o.ExternalReference = {name: null, moduleName: CORE}; - /* Instructions */ static namespaceHTML: o.ExternalReference = {name: 'ɵɵnamespaceHTML', moduleName: CORE}; static namespaceMathML: o.ExternalReference = {name: 'ɵɵnamespaceMathML', moduleName: CORE}; From 508d9c34d56c02b09456d0370e512fa9ca4fe326 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jan 2026 21:46:35 +0100 Subject: [PATCH 5/8] fix(docs-infra): use components directly Switches the Material and CDK components to be used directly, instead of using the modules. This allows better diagnostics for unused directives. --- .../navigation-list.component.ts | 4 ++-- .../example-viewer.component.ts | 10 ++++----- .../code-editor/code-editor.component.ts | 13 ++++++++++-- .../app/editor/embedded-editor.component.ts | 4 ++-- .../api-items-section.component.ts | 4 ++-- .../api-reference-list.component.ts | 5 +++-- .../app/features/update/update.component.ts | 21 ++++++++----------- 7 files changed, 34 insertions(+), 27 deletions(-) diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.ts b/adev/shared-docs/components/navigation-list/navigation-list.component.ts index 99968e90a137..a26ce4f9d7e7 100644 --- a/adev/shared-docs/components/navigation-list/navigation-list.component.ts +++ b/adev/shared-docs/components/navigation-list/navigation-list.component.ts @@ -8,7 +8,7 @@ import {NgTemplateOutlet} from '@angular/common'; import {ChangeDetectionStrategy, Component, inject, input, output} from '@angular/core'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatTooltip} from '@angular/material/tooltip'; import {RouterLink, RouterLinkActive} from '@angular/router'; import {NavigationItem} from '../../interfaces/index'; import {IsActiveNavigationItem} from '../../pipes'; @@ -23,7 +23,7 @@ import {IconComponent} from '../icon/icon.component'; IconComponent, IsActiveNavigationItem, NgTemplateOutlet, - MatTooltipModule, + MatTooltip, ], templateUrl: './navigation-list.component.html', styleUrls: ['./navigation-list.component.scss'], diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts index 19d61b946708..edf7be0884bb 100644 --- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts +++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts @@ -9,7 +9,6 @@ import { afterNextRender, ChangeDetectionStrategy, - ChangeDetectorRef, Component, computed, ElementRef, @@ -20,13 +19,13 @@ import { Type, } from '@angular/core'; import {DOCUMENT, NgComponentOutlet, NgTemplateOutlet} from '@angular/common'; -import {MatTabsModule} from '@angular/material/tabs'; +import {MatTab, MatTabGroup} from '@angular/material/tabs'; import {Clipboard} from '@angular/cdk/clipboard'; import {CopySourceCodeButton} from '../../copy-source-code-button/copy-source-code-button.component'; import {IconComponent} from '../../icon/icon.component'; import {ExampleMetadata, Snippet} from '../../../interfaces/index'; import {EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers/index'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatTooltip} from '@angular/material/tooltip'; export const CODE_LINE_NUMBER_CLASS_NAME = 'shiki-ln-number'; export const CODE_LINE_CLASS_NAME = 'line'; @@ -37,8 +36,9 @@ export const HIDDEN_CLASS_NAME = 'hidden'; selector: 'docs-example-viewer', imports: [ CopySourceCodeButton, - MatTabsModule, - MatTooltipModule, + MatTabGroup, + MatTab, + MatTooltip, IconComponent, NgTemplateOutlet, NgComponentOutlet, diff --git a/adev/src/app/editor/code-editor/code-editor.component.ts b/adev/src/app/editor/code-editor/code-editor.component.ts index 0c81ee66ef34..6a1329bd04ea 100644 --- a/adev/src/app/editor/code-editor/code-editor.component.ts +++ b/adev/src/app/editor/code-editor/code-editor.component.ts @@ -22,7 +22,7 @@ import { viewChild, } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; -import {MatTabGroup, MatTabsModule} from '@angular/material/tabs'; +import {MatTabGroup, MatTab, MatTabLabel} from '@angular/material/tabs'; import {Title} from '@angular/platform-browser'; import {debounceTime, from, map, switchMap} from 'rxjs'; @@ -53,7 +53,16 @@ const ANGULAR_DEV = 'https://angular.dev'; templateUrl: './code-editor.component.html', styleUrls: ['./code-editor.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [MatTabsModule, MatTooltip, IconComponent, CdkMenu, CdkMenuItem, CdkMenuTrigger], + imports: [ + MatTabGroup, + MatTab, + MatTabLabel, + MatTooltip, + IconComponent, + CdkMenu, + CdkMenuItem, + CdkMenuTrigger, + ], }) export class CodeEditor { readonly restrictedMode = input(false); diff --git a/adev/src/app/editor/embedded-editor.component.ts b/adev/src/app/editor/embedded-editor.component.ts index c2458b4d4015..e548c82cf50d 100644 --- a/adev/src/app/editor/embedded-editor.component.ts +++ b/adev/src/app/editor/embedded-editor.component.ts @@ -23,7 +23,7 @@ import { } from '@angular/core'; import {toSignal} from '@angular/core/rxjs-interop'; import {IconComponent, TutorialType} from '@angular/docs'; -import {MatTabGroup, MatTabsModule} from '@angular/material/tabs'; +import {MatTabGroup, MatTab} from '@angular/material/tabs'; import {map} from 'rxjs'; import {MAX_RECOMMENDED_WEBCONTAINERS_INSTANCES} from './alert-manager.service'; @@ -46,7 +46,7 @@ export const LARGE_EDITOR_HEIGHT_BREAKPOINT = 550; @Component({ selector: EMBEDDED_EDITOR_SELECTOR, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [AngularSplitModule, CodeEditor, Preview, Terminal, MatTabsModule, IconComponent], + imports: [AngularSplitModule, CodeEditor, Preview, Terminal, MatTab, MatTabGroup, IconComponent], templateUrl: './embedded-editor.component.html', styleUrls: ['./embedded-editor.component.scss'], providers: [EditorUiState], diff --git a/adev/src/app/features/references/api-items-section/api-items-section.component.ts b/adev/src/app/features/references/api-items-section/api-items-section.component.ts index 260dd8b323dc..87f00ac2af54 100644 --- a/adev/src/app/features/references/api-items-section/api-items-section.component.ts +++ b/adev/src/app/features/references/api-items-section/api-items-section.component.ts @@ -10,11 +10,11 @@ import {ChangeDetectionStrategy, Component, input} from '@angular/core'; import {RouterLink} from '@angular/router'; import {ApiItemsGroup} from '../interfaces/api-items-group'; import ApiItemLabel from '../api-item-label/api-item-label.component'; -import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatTooltip} from '@angular/material/tooltip'; @Component({ selector: 'adev-api-items-section', - imports: [ApiItemLabel, RouterLink, MatTooltipModule], + imports: [ApiItemLabel, RouterLink, MatTooltip], templateUrl: './api-items-section.component.html', styleUrls: ['./api-items-section.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts b/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts index 770395add8b4..4df9cc877f59 100644 --- a/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts +++ b/adev/src/app/features/references/api-reference-list/api-reference-list.component.ts @@ -21,7 +21,7 @@ import { } from '@angular/core'; import {Select, SelectOption, TextField} from '@angular/docs'; import {FormField, form} from '@angular/forms/signals'; -import {MatChipsModule} from '@angular/material/chips'; +import {MatChipListbox, MatChipOption} from '@angular/material/chips'; import {Params, Router} from '@angular/router'; import ApiItemLabel from '../api-item-label/api-item-label.component'; import ApiItemsSection from '../api-items-section/api-items-section.component'; @@ -48,7 +48,8 @@ export const DEFAULT_STATUS = STATUSES.stable | STATUSES.developerPreview | STAT TextField, ApiLabel, CdkMenuModule, - MatChipsModule, + MatChipListbox, + MatChipOption, KeyValuePipe, Select, FormField, diff --git a/adev/src/app/features/update/update.component.ts b/adev/src/app/features/update/update.component.ts index 0b3539986f5b..29ddd1423dbe 100644 --- a/adev/src/app/features/update/update.component.ts +++ b/adev/src/app/features/update/update.component.ts @@ -9,12 +9,9 @@ import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations'; import {Clipboard} from '@angular/cdk/clipboard'; -import {CdkMenuModule} from '@angular/cdk/menu'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; -import {MatCardModule} from '@angular/material/card'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; +import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu'; +import {MatCheckbox} from '@angular/material/checkbox'; +import {MatButtonToggleGroup, MatButtonToggle} from '@angular/material/button-toggle'; import {IconComponent} from '@angular/docs'; import {ActivatedRoute, Router} from '@angular/router'; import {marked} from 'marked'; @@ -33,12 +30,12 @@ const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.in templateUrl: './update.component.html', styleUrl: './update.component.scss', imports: [ - MatCheckboxModule, - MatInputModule, - MatCardModule, - MatGridListModule, - MatButtonToggleModule, - CdkMenuModule, + MatCheckbox, + MatButtonToggleGroup, + MatButtonToggle, + CdkMenuTrigger, + CdkMenu, + CdkMenuItem, IconComponent, ], changeDetection: ChangeDetectionStrategy.OnPush, From 94a8f797e5568753243637131b0c05f8ea80628c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jan 2026 20:31:12 +0100 Subject: [PATCH 6/8] fix(docs-infra): don't use private symbol Fixes that the tab group was referring to a private symbol from the CDK. --- .../tab-group/tab-group.component.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/adev/shared-docs/components/tab-group/tab-group.component.ts b/adev/shared-docs/components/tab-group/tab-group.component.ts index 6f97bd315e5a..1c5c8f7e17b3 100644 --- a/adev/shared-docs/components/tab-group/tab-group.component.ts +++ b/adev/shared-docs/components/tab-group/tab-group.component.ts @@ -18,7 +18,8 @@ import { ElementRef, ChangeDetectionStrategy, } from '@angular/core'; -import {_IdGenerator} from '@angular/cdk/a11y'; + +let idCounter = 0; /** * A simple tabs implementation with proper aria roles. @@ -36,20 +37,22 @@ import {_IdGenerator} from '@angular/cdk/a11y'; }) export class TabGroup { private readonly _renderer = inject(Renderer2); - private readonly _idGenerator = inject(_IdGenerator); private readonly _tabpanels = viewChildren>('tabpanel'); readonly tabs = input<{label: string; panel: HTMLElement}[]>(); - readonly computedTabs = computed( - () => + readonly computedTabs = computed(() => { + const id = idCounter++; + + return ( this.tabs()?.map((tab) => ({ - tabId: this._idGenerator.getId('docs-tab-'), - tabPanelId: this._idGenerator.getId('docs-tab-panel-'), + tabId: `docs-tab-${id}`, + tabPanelId: `docs-tab-panel-${id}`, label: tab.label, panel: tab.panel, - })) ?? [], - ); + })) ?? [] + ); + }); readonly selectedTab = linkedSignal(() => this.computedTabs()[0]?.tabId); From 6284126da5d53a279250c06660b7366046e6fcc4 Mon Sep 17 00:00:00 2001 From: Shuaib Hasan Akib Date: Wed, 21 Jan 2026 02:24:45 +0600 Subject: [PATCH 7/8] refactor(common): cleanup unused code in doc regions Cleans unused imports and code that is not referenced within the associated docregion blocks. --- .../examples/core/ts/metadata/metadata.ts | 30 +------------------ .../examples/core/ts/platform/platform.ts | 2 +- 2 files changed, 2 insertions(+), 30 deletions(-) diff --git a/packages/examples/core/ts/metadata/metadata.ts b/packages/examples/core/ts/metadata/metadata.ts index c966b0bd1951..0e81afa3b9a4 100644 --- a/packages/examples/core/ts/metadata/metadata.ts +++ b/packages/examples/core/ts/metadata/metadata.ts @@ -6,17 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Attribute, Component, Directive, Pipe} from '@angular/core'; - -class CustomDirective {} - -@Component({ - selector: 'greet', - template: 'Hello {{name}}!', -}) -class Greet { - name: string = 'World'; -} +import {Attribute, Component, Directive} from '@angular/core'; // #docregion attributeFactory @Component({ @@ -41,21 +31,3 @@ class InputAttrDirective { } } // #enddocregion - -@Directive({ - selector: 'input', -}) -class InputDirective { - constructor() { - // Add some logic. - } -} - -@Pipe({ - name: 'lowercase', -}) -class Lowercase { - transform(v: string, args: any[]) { - return v.toLowerCase(); - } -} diff --git a/packages/examples/core/ts/platform/platform.ts b/packages/examples/core/ts/platform/platform.ts index ba7941451f97..64cfd5e2efbb 100644 --- a/packages/examples/core/ts/platform/platform.ts +++ b/packages/examples/core/ts/platform/platform.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ApplicationRef, Component, DoBootstrap, NgModule, Type} from '@angular/core'; +import {ApplicationRef, Component, DoBootstrap, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; @Component({ From b275206a4944729a7bdec5132fb73d2ce8251cb9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 20 Jan 2026 21:18:54 +0100 Subject: [PATCH 8/8] fix(docs-infra): use focus-visible for focus styling `focus-visible` should lead to a better experience, compared to showing the state on any focus. --- adev/shared-docs/styles/_reference.scss | 2 +- adev/shared-docs/styles/_resets.scss | 2 +- adev/src/app/app.component.scss | 2 +- .../code-editor/code-editor.component.scss | 2 +- .../playground/3-minigame/src/game.css | 39 ++++++++++++------- .../playground/4-signal-forms/src/main.css | 2 +- 6 files changed, 30 insertions(+), 19 deletions(-) diff --git a/adev/shared-docs/styles/_reference.scss b/adev/shared-docs/styles/_reference.scss index 89f7eec4f284..dbd98a8c359f 100644 --- a/adev/shared-docs/styles/_reference.scss +++ b/adev/shared-docs/styles/_reference.scss @@ -260,7 +260,7 @@ background-color: var(--septenary-contrast); } - &:focus { + &:focus-visible { background-color: var(--senary-contrast); span { diff --git a/adev/shared-docs/styles/_resets.scss b/adev/shared-docs/styles/_resets.scss index 1bc8b2f86f2b..ace2e5f85816 100644 --- a/adev/shared-docs/styles/_resets.scss +++ b/adev/shared-docs/styles/_resets.scss @@ -350,7 +350,7 @@ .ͼ1 .cm-button { background-image: linear-gradient(var(--octonary-contrast), var(--page-background)); - &:focus { + &:focus-visible { background-image: linear-gradient(var(--senary-contrast), var(--page-background)); } } diff --git a/adev/src/app/app.component.scss b/adev/src/app/app.component.scss index 4b7a9f556b38..10e0c8232b61 100644 --- a/adev/src/app/app.component.scss +++ b/adev/src/app/app.component.scss @@ -71,7 +71,7 @@ font-size: 0.875rem; transform: translateY(-150%); transition: transform 0.3s ease-out; - &:focus { + &:focus-visible { transform: translateY(0); } } diff --git a/adev/src/app/editor/code-editor/code-editor.component.scss b/adev/src/app/editor/code-editor/code-editor.component.scss index de39760823f6..0b5fe3a8d9fe 100644 --- a/adev/src/app/editor/code-editor/code-editor.component.scss +++ b/adev/src/app/editor/code-editor/code-editor.component.scss @@ -195,7 +195,7 @@ background: transparent; outline: none; transition: color 0.3s ease; - &:focus { + &:focus-visible { background: transparent; border-block-end: 1px solid var(--primary-contrast); } diff --git a/adev/src/content/tutorials/playground/3-minigame/src/game.css b/adev/src/content/tutorials/playground/3-minigame/src/game.css index 756779452a0b..4980150df4cb 100644 --- a/adev/src/content/tutorials/playground/3-minigame/src/game.css +++ b/adev/src/content/tutorials/playground/3-minigame/src/game.css @@ -61,7 +61,12 @@ width: 100%; left: 0; top: 0; - background: linear-gradient(90deg, var(--orange-red) 0%, var(--vivid-pink) 50%, var(--electric-violet) 100%); + background: linear-gradient( + 90deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); } .gradient-button span:nth-of-type(2) { @@ -70,19 +75,19 @@ background: white; margin: 1px; border-radius: 0.2rem; - transition: all .3s ease; + transition: all 0.3s ease; opacity: 1; display: flex; align-items: center; } -.gradient-button:enabled:hover span:nth-of-type(2), -.gradient-button:enabled:focus span:nth-of-type(2) { +.gradient-button:enabled:hover span:nth-of-type(2), +.gradient-button:enabled:focus-visible span:nth-of-type(2) { opacity: 0.9; } -a.gradient-button:hover span:nth-of-type(2), -a.gradient-button:focus span:nth-of-type(2) { +a.gradient-button:hover span:nth-of-type(2), +a.gradient-button:focus-visible span:nth-of-type(2) { opacity: 0.9; } @@ -194,11 +199,14 @@ a.gradient-button:focus span:nth-of-type(2) { stroke-width: 6px; } -.face svg .b, .c { +.face svg .b, +.c { stroke-miterlimit: 10; } -.face svg .b, .c, .d { +.face svg .b, +.c, +.d { fill: none; stroke: #000; stroke-linecap: round; @@ -208,7 +216,8 @@ a.gradient-button:focus span:nth-of-type(2) { fill: #fff; } -.face svg .c, .d { +.face svg .c, +.d { stroke-width: 7px; } @@ -220,7 +229,7 @@ a.gradient-button:focus span:nth-of-type(2) { background-color: white; border-radius: 8px; border: 1px solid #f6f6f6; - box-shadow: 0 3px 14px 0 rgba(0,0,0,.2); + box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.2); position: fixed; top: 50%; left: 50%; @@ -234,7 +243,7 @@ a.gradient-button:focus span:nth-of-type(2) { z-index: 10; } -svg.personified { +svg.personified { height: 125px; } @@ -247,7 +256,8 @@ svg.personified { stroke-width: 4px; } -.personified .h, .personified .i { +.personified .h, +.personified .i { fill: none; stroke: #000; stroke-linecap: round; @@ -256,7 +266,7 @@ svg.personified { .personified .i { stroke-linejoin: round; stroke-width: 3px; -} +} #close { border: none; @@ -320,7 +330,8 @@ svg.personified { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3607843137); } -.accessibility button:focus:enabled, .accessibility button:hover:enabled { +.accessibility button:focus-visible:enabled, +.accessibility button:hover:enabled { background-color: #e8dbf4; } diff --git a/adev/src/content/tutorials/playground/4-signal-forms/src/main.css b/adev/src/content/tutorials/playground/4-signal-forms/src/main.css index 2b9a3100a697..3f5eb396fb7b 100644 --- a/adev/src/content/tutorials/playground/4-signal-forms/src/main.css +++ b/adev/src/content/tutorials/playground/4-signal-forms/src/main.css @@ -32,7 +32,7 @@ input { font-family: inherit; } -input:focus { +input:focus-visible { outline: none; border-color: #4285f4; }