Merge branch 'main' into web-types

material-components · Feb 24, 2025 · 04ca20d · 04ca20d
2 parents c5482b7 + 919fe12
commit 04ca20d
Show file tree

Hide file tree

Showing 52 changed files with 1,109 additions and 728 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -31,7 +31,7 @@ jobs:
       - uses: google/wireit@setup-github-actions-caching/v1
 
       - run: npm ci
-      - run: npx playwright install-deps
+      - run: npx playwright install --with-deps
       - run: npm test
         env:
           WIREIT_FAILURES: continue
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ node_modules
 *.d.ts
 !types/*.d.ts
 .wireit/
+*.tsbuildinfo
 
 !catalog/**/*.css
 catalog/_dev
@@ -23,7 +24,6 @@ catalog/site/theming/*.md
 catalog/site/theming/images
 catalog/site/about/*.md
 catalog/site/about/images
-catalog/*.tsbuildinfo
 catalog/stories/*/
 !catalog/stories/components/
 !catalog/src/types/**/*.d.ts
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,3 +1,3 @@
 {
-  ".": "2.0.0"
+  ".": "2.2.0"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,34 @@
 # Changelog
 
+## [2.2.0](https://github.com/material-components/material-web/compare/v2.1.0...v2.2.0) (2024-09-17)
+
+
+### Features
+
+* **field,textfield:** add `container` slot for custom background content ([44c13cd](https://github.com/material-components/material-web/commit/44c13cdd753108137e9765bf14a6ea3ed46be18e))
+
+
+### Bug Fixes
+
+* **checkbox:** add override to symbol properties ([a9ee4f5](https://github.com/material-components/material-web/commit/a9ee4f5bc1d6702e5dc352eefed13a1d849577e3))
+* remove the input entirely and replace it with a touch target ([cf84a27](https://github.com/material-components/material-web/commit/cf84a271e75b806075427f4d176b38f8884fdd7e))
+* remove unnecessary css variable prefixes ([5044e6e](https://github.com/material-components/material-web/commit/5044e6eb2fe6c6bd3e53b19bef04ba6b6c0b2a2b))
+* Replace aria-hidden attribute with inert attribute in &lt;md-radio&gt; component ([192f17e](https://github.com/material-components/material-web/commit/192f17e8c1ce4a38cf76b5a81cb6c2b1ddcfbe46))
+* Set touch target to `display: none` ([a696121](https://github.com/material-components/material-web/commit/a69612162d79b63f0b82da0468201942dc82ed9e))
+
+## [2.1.0](https://github.com/material-components/material-web/compare/v2.0.0...v2.1.0) (2024-08-20)
+
+
+### Features
+
+* **switch:** add touch target token ([b8f362a](https://github.com/material-components/material-web/commit/b8f362a97d8369e0f6bab834794f99bd50b5ab78))
+* **textfield,field:** add leading/trailing icon spacing tokens ([c1991c4](https://github.com/material-components/material-web/commit/c1991c4c894c48fe77abe09a2791f97dc77d438f))
+
+
+### Bug Fixes
+
+* changed checkmark to check in md-icon selected slot ([2e2817b](https://github.com/material-components/material-web/commit/2e2817bab5fc51bb32363b36471cb01d1f029a46))
+
 ## [2.0.0](https://github.com/material-components/material-web/compare/v1.5.1...v2.0.0) (2024-07-23)
 
 

diff --git a/button/internal/button.ts b/button/internal/button.ts
@@ -67,6 +67,13 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
    */
   @property() href = '';
 
+  /**
+   * The filename to use when downloading the linked resource.
+   * If not specified, the browser will determine a filename.
+   * This is only applicable when the button is used as a link (`href` is set).
+   */
+  @property() download = '';
+
   /**
    * Where to display the linked `href` URL for a link button. Common options
    * include `_blank` to open in a new tab.
@@ -184,6 +191,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
       aria-haspopup="${ariaHasPopup || nothing}"
       aria-expanded="${ariaExpanded || nothing}"
       href=${this.href}
+      download=${this.download || nothing}
       target=${this.target || nothing}
       >${this.renderContent()}
     </a>`;

diff --git a/catalog/package.json b/catalog/package.json
@@ -23,7 +23,11 @@
   },
   "wireit": {
     "build:dev": {
-      "dependencies": ["build:dev:eleventy", "build:dev:ts", "build:type-check"]
+      "dependencies": [
+        "build:dev:eleventy",
+        "build:dev:ts",
+        "build:type-check"
+      ]
     },
     "build:dev:eleventy": {
       "command": "NODE_ENV=DEV eleventy",
@@ -34,21 +38,42 @@
         "eleventy.config.cjs",
         "stories"
       ],
-      "output": ["_dev"],
-      "dependencies": ["build:dev:ts", "build:copy-docs", "build:copy-stories"]
+      "output": [
+        "_dev"
+      ],
+      "dependencies": [
+        "build:dev:ts",
+        "build:copy-docs",
+        "build:copy-stories"
+      ]
     },
     "build:dev:ts": {
       "command": "NODE_ENV=DEV node esbuild.config.mjs",
-      "files": ["src", "tsconfig.json", "esbuild.config.mjs"],
-      "output": ["lib"],
-      "dependencies": ["..:build"]
+      "files": [
+        "src",
+        "tsconfig.json",
+        "esbuild.config.mjs"
+      ],
+      "output": [
+        "lib"
+      ],
+      "dependencies": [
+        "..:build"
+      ]
     },
     "build:type-check": {
       "command": "tsc -p tsconfig.json --pretty --incremental",
-      "files": ["src", "tsconfig.json"],
+      "files": [
+        "src",
+        "tsconfig.json"
+      ],
       "clean": "if-file-deleted",
-      "output": ["tsconfig.tsbuildinfo"],
-      "dependencies": ["..:build"]
+      "output": [
+        "tsconfig.tsbuildinfo"
+      ],
+      "dependencies": [
+        "..:build"
+      ]
     },
     "build:prod": {
       "dependencies": [
@@ -66,14 +91,28 @@
         "eleventy.config.cjs",
         "stories/"
       ],
-      "output": ["_prod/"],
-      "dependencies": ["build:prod:ts", "build:copy-docs", "build:copy-stories"]
+      "output": [
+        "_prod/"
+      ],
+      "dependencies": [
+        "build:prod:ts",
+        "build:copy-docs",
+        "build:copy-stories"
+      ]
     },
     "build:prod:ts": {
       "command": "NODE_ENV=PROD node esbuild.config.mjs",
-      "files": ["src", "tsconfig.json", "esbuild.config.mjs"],
-      "output": ["build"],
-      "dependencies": ["..:build"]
+      "files": [
+        "src",
+        "tsconfig.json",
+        "esbuild.config.mjs"
+      ],
+      "output": [
+        "build"
+      ],
+      "dependencies": [
+        "..:build"
+      ]
     },
     "build:copy-docs": {
       "command": "node scripts/copy-docs.mjs",
@@ -121,7 +160,10 @@
         "!node_modules",
         "!../node_modules"
       ],
-      "output": ["stories/*/**/*", "!stories/components"]
+      "output": [
+        "stories/*/**/*",
+        "!stories/components"
+      ]
     }
   },
   "license": "Apache-2.0",
@@ -132,7 +174,7 @@
     "@material/mwc-drawer": "^0.27.0",
     "@material/web": "*",
     "@preact/signals-core": "^1.3.0",
-    "lit": "^2.7.4",
+    "lit": "^2.8.0",
     "playground-elements": "^0.17.0",
     "postdoc-lib": "^1.0.3"
   },
@@ -155,7 +197,7 @@
     "markdown-it-anchor": "^8.6.7",
     "slugify": "^1.6.6",
     "tiny-glob": "^0.2.9",
-    "typescript": "~5.1.6",
+    "typescript": "5.6.2",
     "wireit": "^0.13.0"
   }
 }
diff --git a/catalog/src/components/copy-code-button.ts b/catalog/src/components/copy-code-button.ts
@@ -80,7 +80,7 @@ export class CopyCodeButton extends LitElement {
         aria-label=${this.label}
         aria-label-selected=${this.successLabel}>
         <md-icon>content_copy</md-icon>
-        <md-icon slot="selected">checkmark</md-icon>
+        <md-icon slot="selected">check</md-icon>
       </md-icon-button>
     `;
   }

diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts
@@ -204,11 +204,11 @@ export class Checkbox extends checkboxBaseClass {
     this.checked = state === 'true';
   }
 
-  [createValidator]() {
+  override [createValidator]() {
     return new CheckboxValidator(() => this);
   }
 
-  [getValidityAnchor]() {
+  override [getValidityAnchor]() {
     return this.input;
   }
 }
diff --git a/chips/internal/assist-chip.ts b/chips/internal/assist-chip.ts
@@ -19,6 +19,12 @@ import {Chip} from './chip.js';
 export class AssistChip extends Chip {
   @property({type: Boolean}) elevated = false;
   @property() href = '';
+  /**
+   * The filename to use when downloading the linked resource.
+   * If not specified, the browser will determine a filename.
+   * This is only applicable when the chip is used as a link (`href` is set).
+   */
+  @property() download = '';
   @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   protected get primaryId() {
@@ -49,6 +55,7 @@ export class AssistChip extends Chip {
           id="link"
           aria-label=${ariaLabel || nothing}
           href=${this.href}
+          download=${this.download || nothing}
           target=${this.target || nothing}
           >${content}</a
         >

diff --git a/docs/components/button.md b/docs/components/button.md
@@ -107,7 +107,7 @@ payment'"
     </style>
     <div class="wrapper">
       <div>
-        <md-elevated-button hasicon>
+        <md-elevated-button has-icon>
           <md-icon slot="icon">add</md-icon>
           Elevated
         </md-elevated-button>
@@ -725,6 +725,7 @@ Token                               | Default value
 
 ## API
 
+
 ### MdElevatedButton <code>&lt;md-elevated-button&gt;</code>
 
 #### Properties
@@ -734,7 +735,7 @@ Token                               | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
-| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether the button is "soft-disabled" (disabled but still focusable). |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `href` | `href` | `string` | `''` | The URL that the link button points to. |
 | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
 | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
@@ -755,6 +756,7 @@ Token                               | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `href` | `href` | `string` | `''` | The URL that the link button points to. |
 | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
 | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
@@ -775,6 +777,7 @@ Token                               | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `href` | `href` | `string` | `''` | The URL that the link button points to. |
 | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
 | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
@@ -795,6 +798,7 @@ Token                               | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `href` | `href` | `string` | `''` | The URL that the link button points to. |
 | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
 | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
@@ -815,6 +819,7 @@ Token                               | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `href` | `href` | `string` | `''` | The URL that the link button points to. |
 | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
 | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |

diff --git a/docs/components/chip.md b/docs/components/chip.md
@@ -510,6 +510,7 @@ Token                                   | Default value
 | `href` | `href` | `string` | `''` |  |
 | `target` | `target` | `string` | `''` |  |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `label` | `label` | `string` | `''` | The label of the chip. |
 | `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
@@ -539,6 +540,7 @@ Token                                   | Default value
 | `selected` | `selected` | `boolean` | `false` |  |
 | `hasSelectedIcon` | `has-selected-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a filter chip has a `slot="selected-icon"` to avoid a Flash Of Unstyled Content. |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `label` | `label` | `string` | `''` | The label of the chip. |
 | `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
@@ -572,6 +574,7 @@ Token                                   | Default value
 | `removeOnly` | `remove-only` | `boolean` | `false` |  |
 | `selected` | `selected` | `boolean` | `false` |  |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `label` | `label` | `string` | `''` | The label of the chip. |
 | `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |
@@ -603,6 +606,7 @@ Token                                   | Default value
 | `href` | `href` | `string` | `''` |  |
 | `target` | `target` | `string` | `''` |  |
 | `disabled` | `disabled` | `boolean` | `false` | Whether or not the chip is disabled.<br>Disabled chips are not focusable, unless `always-focusable` is set. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the chip is "soft-disabled" (disabled but still focusable).<br>Use this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `alwaysFocusable` | `always-focusable` | `boolean` | `false` | When true, allow disabled chips to be focused with arrow keys.<br>Add this when a chip needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
 | `label` | `label` | `string` | `''` | The label of the chip. |
 | `hasIcon` | `has-icon` | `boolean` | `false` | Only needed for SSR.<br>Add this attribute when a chip has a `slot="icon"` to avoid a Flash Of Unstyled Content. |

diff --git a/docs/components/figures/textfield/usage-icons.html b/docs/components/figures/textfield/usage-icons.html
@@ -3,16 +3,16 @@
     aria-label="Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available"
     style="padding-block: 16px; gap: 16px"
   >
-    <md-outlined-text-field placeholder="Search for messages">
+    <md-outlined-text-field placeholder="Search for messages" has-leading-icon>
       <md-icon slot="leading-icon">search</md-icon>
     </md-outlined-text-field>
-    <md-outlined-text-field label="Password" type="password">
+    <md-outlined-text-field label="Password" type="password" has-trailing-icon>
       <md-icon-button toggle slot="trailing-icon">
         <md-icon>visibility</md-icon>
         <md-icon slot="selected">visibility_off</md-icon>
       </md-icon-button>
     </md-outlined-text-field>
-    <md-outlined-text-field label="Username" error error-text="Username not available">
+    <md-outlined-text-field label="Username" error error-text="Username not available" has-trailing-icon>
       <md-icon slot="trailing-icon">error</md-icon>
     </md-outlined-text-field>
   </figure>