Merge branch 'main' into fix/field-border-color

.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

.gitignore

@@ -8,6 +8,7 @@ node_modules
 *.d.ts
 !types/*.d.ts
 .wireit/
+*.tsbuildinfo
 
 !catalog/**/*.css
 catalog/_dev
@@ -22,7 +23,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

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>`;

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"
   }
 }

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
         >

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. |

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. |

docs/components/icon-button.md

@@ -456,6 +456,7 @@ Token                                        | Default value
 
 ## API
 
+
 ### MdIconButton <code>&lt;md-icon-button&gt;</code>
 
 #### Properties
@@ -465,6 +466,7 @@ Token                                        | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon 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. |
 | `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
 | `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
 | `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
@@ -499,7 +501,7 @@ Token                                        | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
-| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon 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. |
 | `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
 | `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
 | `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
@@ -534,6 +536,7 @@ Token                                        | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon 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. |
 | `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
 | `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
 | `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |
@@ -568,6 +571,7 @@ Token                                        | Default value
 | Property | Attribute | Type | Default | Description |
 | --- | --- | --- | --- | --- |
 | `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. |
+| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable).<br>Use this when an icon 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. |
 | `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. |
 | `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. |
 | `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |