@material/web 1.5.2-nightly.aea7781.0 → 1.5.2-nightly.d72193f.0

package/button/internal/_elevated-button.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-elevated-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-elevated-button-values();
 
   :host {
     // Only use the logical properties.

package/button/internal/_filled-button.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-button-values();
 
   :host {
     // Only use the logical properties.

package/button/internal/_filled-tonal-button.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-tonal-button-values();
 
   :host {
     // Only use the logical properties.

package/button/internal/_outlined-button.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-button-values();
 
   :host {
     // Only use the logical properties.

package/button/internal/_text-button.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-text-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-text-button-values();
 
   :host {
     // Only use the logical properties.

package/button/internal/elevated-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_elevated-button.scss"],"names":[],"mappings":"AA+BE,MAII","file":"elevated-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_elevated-button.scss"],"names":[],"mappings":"AA6BE,MAII","file":"elevated-styles.css"}

package/button/internal/filled-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filled-button.scss"],"names":[],"mappings":"AA+BE,MAII","file":"filled-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filled-button.scss"],"names":[],"mappings":"AA6BE,MAII","file":"filled-styles.css"}

package/button/internal/filled-tonal-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filled-tonal-button.scss"],"names":[],"mappings":"AA+BE,MAII","file":"filled-tonal-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filled-tonal-button.scss"],"names":[],"mappings":"AA6BE,MAII","file":"filled-tonal-styles.css"}

package/button/internal/outlined-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_outlined-button.scss"],"names":[],"mappings":"AA+BE,MAII,+6HAGF,yBACA,kCACA,iCAGF,SACE,QACA,mBACA,kBACA,sBACA,mCACA,8DACA,0DACA,0DACA,sDAGF,wBACE,2CAGF,gDACE,4CACA,yCAGF,8BACE,mDAIE,sBAGF,gDACE,WAIJ,mBAEE,mCAGF,UACE,iDACA,gDACA,mBACA","file":"outlined-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_outlined-button.scss"],"names":[],"mappings":"AA6BE,MAII,+6HAGF,yBACA,kCACA,iCAGF,SACE,QACA,mBACA,kBACA,sBACA,mCACA,8DACA,0DACA,0DACA,sDAGF,wBACE,2CAGF,gDACE,4CACA,yCAGF,8BACE,mDAIE,sBAGF,gDACE,WAIJ,mBAEE,mCAGF,UACE,iDACA,gDACA,mBACA","file":"outlined-styles.css"}

package/button/internal/text-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_text-button.scss"],"names":[],"mappings":"AA+BE,MAII,q0GAGF,yBACA,kCACA","file":"text-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_text-button.scss"],"names":[],"mappings":"AA6BE,MAII,q0GAGF,yBACA,kCACA","file":"text-styles.css"}

package/checkbox/internal/_checkbox.scss

@@ -38,9 +38,7 @@ $_checkmark-bottom-left: 7px, -14px;
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-checkbox-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-checkbox-values();
 
   :host {
     border-start-start-radius: map.get($tokens, 'container-shape-start-start');

package/checkbox/internal/checkbox-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_checkbox.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA4CE,MACE,kHACA,8GACA,0GACA,8GACA,oBACA,+CACA,kBACA,mBACA,8CACA,0CACA,eAGF,kBACE,eAGF,8BACE,mEAGF,cACE,YACA,YACA,WAIF,MACE,gBACA,YACA,SACA,UACA,aACA,kBACA,WACA,UACA,eAGF,iCACE,YACA,WAGF,WACE,sBACA,aACA,YACA,qBACA,mBACA,kBACA,WAGF,2BAGE,QACA,kBAGF,qBAEE,sBAGF,SACE,+FACA,mBACA,mDACA,sBAGF,YACE,mGAIF,kBAEE,UACA,+BACA,sCAEA,kEAKA,qBAGF,yCACE,UAEA,+BAEA,kEAKA,mBAKF,UACE,4FACA,iDACA,YACA,gDCxIE,2XDoJJ,oBCpJI,+ZDkKJ,MAQE,kFACA,0CACA,yCAKF,YACE,OArLW,IAsLX,qCACA,MAvLW,IA2Lb,WACE,OA5LW,IA6LX,oCACA,WAIF,MACE,yBACA,0DAIA,0BACA,2DAOF,gBACE,yBACA,0DAIA,0BACA,2DAUA,8CASE,yDAGF,0DAIE,sBAGF,wDAIE,qBAQF,0DACE,wDAOJ,uBACE,yBAMF,oCACE,0CAEF,sCACE,KACE,SAMJ,wBACE,6FACA,yDAGF,2BACE,mGAGF,qBACE,wFAGF,+BACE,6FACA,yDAGF,kCACE,mGAGF,4BACE,wFAGF,yBACE,+FACA,2DAGF,4BACE,qGAGF,sBACE,0FAMF,8DACE,sBACA,uBAGF,2BACE,gGACA,4DACA,4DAGF,oCAGE,kBAGF,uCAGE,yGACA,qEAGF,wBACE,2FAGF,8BACE,YACE,4BAGF,+BACE,0BACA,UAGF,SACE,wBAGF,mBACE,sBACA,UAGF,MACE","file":"checkbox-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_checkbox.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA0CE,MACE,kHACA,8GACA,0GACA,8GACA,oBACA,+CACA,kBACA,mBACA,8CACA,0CACA,eAGF,kBACE,eAGF,8BACE,mEAGF,cACE,YACA,YACA,WAIF,MACE,gBACA,YACA,SACA,UACA,aACA,kBACA,WACA,UACA,eAGF,iCACE,YACA,WAGF,WACE,sBACA,aACA,YACA,qBACA,mBACA,kBACA,WAGF,2BAGE,QACA,kBAGF,qBAEE,sBAGF,SACE,+FACA,mBACA,mDACA,sBAGF,YACE,mGAIF,kBAEE,UACA,+BACA,sCAEA,kEAKA,qBAGF,yCACE,UAEA,+BAEA,kEAKA,mBAKF,UACE,4FACA,iDACA,YACA,gDCtIE,2XDkJJ,oBClJI,+ZDgKJ,MAQE,kFACA,0CACA,yCAKF,YACE,OAnLW,IAoLX,qCACA,MArLW,IAyLb,WACE,OA1LW,IA2LX,oCACA,WAIF,MACE,yBACA,0DAIA,0BACA,2DAOF,gBACE,yBACA,0DAIA,0BACA,2DAUA,8CASE,yDAGF,0DAIE,sBAGF,wDAIE,qBAQF,0DACE,wDAOJ,uBACE,yBAMF,oCACE,0CAEF,sCACE,KACE,SAMJ,wBACE,6FACA,yDAGF,2BACE,mGAGF,qBACE,wFAGF,+BACE,6FACA,yDAGF,kCACE,mGAGF,4BACE,wFAGF,yBACE,+FACA,2DAGF,4BACE,qGAGF,sBACE,0FAMF,8DACE,sBACA,uBAGF,2BACE,gGACA,4DACA,4DAGF,oCAGE,kBAGF,uCAGE,yGACA,qEAGF,wBACE,2FAGF,8BACE,YACE,4BAGF,+BACE,0BACA,UAGF,SACE,wBAGF,mBACE,sBACA,UAGF,MACE","file":"checkbox-styles.css"}

package/chips/internal/_assist-chip.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-assist-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-assist-chip-values();
 
   :host {
     // Only use the logical properties.

package/chips/internal/_filter-chip.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filter-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filter-chip-values();
 
   :host {
     // Only use the logical properties.

package/chips/internal/_input-chip.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-input-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-input-chip-values();
 
   :host {
     // Only use the logical properties.

package/chips/internal/_shared.scss

@@ -33,7 +33,7 @@
     );
   }
 
-  :host([disabled]) {
+  :host(:is([disabled], [soft-disabled])) {
     pointer-events: none;
   }
 
@@ -242,7 +242,7 @@
   }
 
   a,
-  button:not(:disabled) {
+  button:not(:disabled, [aria-disabled='true']) {
     cursor: inherit;
   }
 }

package/chips/internal/_suggestion-chip.scss

@@ -25,9 +25,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-suggestion-chip-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-suggestion-chip-values();
 
   :host {
     // Only use the logical properties.

package/chips/internal/assist-chip.js

@@ -23,13 +23,13 @@ export class AssistChip extends Chip {
     }
     get rippleDisabled() {
         // Link chips cannot be disabled
-        return !this.href && this.disabled;
+        return !this.href && (this.disabled || this.softDisabled);
     }
     getContainerClasses() {
         return {
             ...super.getContainerClasses(),
             // Link chips cannot be disabled
-            disabled: !this.href && this.disabled,
+            disabled: !this.href && (this.disabled || this.softDisabled),
             elevated: this.elevated,
             link: !!this.href,
         };
@@ -53,6 +53,7 @@ export class AssistChip extends Chip {
         class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
+        aria-disabled=${this.softDisabled || nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
         >${content}</button

package/chips/internal/assist-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAiD,EAAE,CAAC;IAuDxE,CAAC;IArDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrC,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;;uBAIM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;aAC5B,OAAO;;OAEb,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;;WAE/C,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,gDAAgD,CAAC;SAC7D;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AAzD4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAA2D","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected get primaryId() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && this.disabled;\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      // Link chips cannot be disabled\n      disabled: !this.href && this.disabled,\n      elevated: this.elevated,\n      link: !!this.href,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"]}
+{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAiD,EAAE,CAAC;IAwDxE,CAAC;IAtDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC;YAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;;uBAIM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;aAC5B,OAAO;;OAEb,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;wBACjB,IAAI,CAAC,YAAY,IAAI,OAAO;oBAChC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;;WAE/C,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,gDAAgD,CAAC;SAC7D;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AA1D4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAA2D","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected get primaryId() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && (this.disabled || this.softDisabled);\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      // Link chips cannot be disabled\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      elevated: this.elevated,\n      link: !!this.href,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"]}

package/chips/internal/assist-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_assist-chip.scss"],"names":[],"mappings":"AA+BE,MAII,omJAIJ,8BACE,eACE","file":"assist-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_assist-chip.scss"],"names":[],"mappings":"AA6BE,MAII,omJAIJ,8BACE,eACE","file":"assist-styles.css"}

package/chips/internal/chip.d.ts

@@ -26,16 +26,29 @@ export declare abstract class Chip extends chipBaseClass {
      * Disabled chips are not focusable, unless `always-focusable` is set.
      */
     disabled: boolean;
+    /**
+     * Whether or not the chip is "soft-disabled" (disabled but still
+     * focusable).
+     *
+     * 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.
+     */
+    softDisabled: boolean;
     /**
      * When true, allow disabled chips to be focused with arrow keys.
      *
      * 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.
+     *
+     * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`.
      */
     alwaysFocusable: boolean;
     /**
      * The label of the chip.
+     *
+     * @deprecated Set text as content of the chip instead.
      */
     label: string;
     /**
@@ -55,6 +68,7 @@ export declare abstract class Chip extends chipBaseClass {
      * Some chip actions such as links cannot be disabled.
      */
     protected get rippleDisabled(): boolean;
+    constructor();
     focus(options?: FocusOptions): void;
     protected render(): TemplateResult<1>;
     protected updated(changed: PropertyValues<Chip>): void;
@@ -65,5 +79,6 @@ export declare abstract class Chip extends chipBaseClass {
     protected abstract renderPrimaryAction(content: unknown): unknown;
     private renderPrimaryContent;
     private handleIconChange;
+    private handleClick;
 }
 export {};

package/chips/internal/chip.js

@@ -6,7 +6,7 @@
 import { __decorate } from "tslib";
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
-import { html, LitElement } from 'lit';
+import { html, isServer, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { mixinDelegatesAria } from '../../internal/aria/delegate.js';
@@ -18,24 +18,45 @@ const chipBaseClass = mixinDelegatesAria(LitElement);
  * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles
  */
 export class Chip extends chipBaseClass {
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    get rippleDisabled() {
+        return this.disabled || this.softDisabled;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Whether or not the chip is disabled.
          *
          * Disabled chips are not focusable, unless `always-focusable` is set.
          */
         this.disabled = false;
+        /**
+         * Whether or not the chip is "soft-disabled" (disabled but still
+         * focusable).
+         *
+         * 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.
+         */
+        this.softDisabled = false;
         /**
          * When true, allow disabled chips to be focused with arrow keys.
          *
          * 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.
+         *
+         * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`.
          */
         this.alwaysFocusable = false;
+        // TODO(b/350810013): remove the label property.
         /**
          * The label of the chip.
+         *
+         * @deprecated Set text as content of the chip instead.
          */
         this.label = '';
         /**
@@ -45,13 +66,9 @@ export class Chip extends chipBaseClass {
          * Unstyled Content.
          */
         this.hasIcon = false;
-    }
-    /**
-     * Whether or not the primary ripple is disabled (defaults to `disabled`).
-     * Some chip actions such as links cannot be disabled.
-     */
-    get rippleDisabled() {
-        return this.disabled;
+        if (!isServer) {
+            this.addEventListener('click', this.handleClick.bind(this));
+        }
     }
     focus(options) {
         if (this.disabled && !this.alwaysFocusable) {
@@ -73,7 +90,7 @@ export class Chip extends chipBaseClass {
     }
     getContainerClasses() {
         return {
-            'disabled': this.disabled,
+            'disabled': this.disabled || this.softDisabled,
             'has-icon': this.hasIcon,
         };
     }
@@ -99,7 +116,9 @@ export class Chip extends chipBaseClass {
         ${this.renderLeadingIcon()}
       </span>
       <span class="label">
-        <span class="label-text">${this.label}</span>
+        <span class="label-text" id="label">
+          ${this.label ? this.label : html `<slot></slot>`}
+        </span>
       </span>
       <span class="touch"></span>
     `;
@@ -108,6 +127,16 @@ export class Chip extends chipBaseClass {
         const slot = event.target;
         this.hasIcon = slot.assignedElements({ flatten: true }).length > 0;
     }
+    handleClick(event) {
+        // If the chip is soft-disabled or disabled + always-focusable, we need to
+        // explicitly prevent the click from propagating to other event listeners
+        // as well as prevent the default action.
+        if (this.softDisabled || (this.disabled && this.alwaysFocusable)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+    }
 }
 /** @nocollapse */
 Chip.shadowRootOptions = {
@@ -117,6 +146,9 @@ Chip.shadowRootOptions = {
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Chip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], Chip.prototype, "softDisabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'always-focusable' })
 ], Chip.prototype, "alwaysFocusable", void 0);

package/chips/internal/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst chipBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A chip component.\n *\n * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles\n */\nexport abstract class Chip extends chipBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the chip is disabled.\n   *\n   * Disabled chips are not focusable, unless `always-focusable` is set.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * When true, allow disabled chips to be focused with arrow keys.\n   *\n   * Add this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'always-focusable'})\n  alwaysFocusable = false;\n\n  /**\n   * The label of the chip.\n   */\n  @property() label = '';\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of\n   * Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon =\n    false;\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\n   * TODO(b/310046938): use the same id for both elements\n   */\n  protected abstract readonly primaryId: string;\n\n  /**\n   * Whether or not the primary ripple is disabled (defaults to `disabled`).\n   * Some chip actions such as links cannot be disabled.\n   */\n  protected get rippleDisabled() {\n    return this.disabled;\n  }\n\n  override focus(options?: FocusOptions) {\n    if (this.disabled && !this.alwaysFocusable) {\n      return;\n    }\n\n    super.focus(options);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\">\n        ${this.renderContainerContent()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Chip>) {\n    if (changed.has('disabled') && changed.get('disabled') !== undefined) {\n      this.dispatchEvent(new Event('update-focus', {bubbles: true}));\n    }\n  }\n\n  protected getContainerClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n      'has-icon': this.hasIcon,\n    };\n  }\n\n  protected renderContainerContent() {\n    return html`\n      ${this.renderOutline()}\n      <md-focus-ring part=\"focus-ring\" for=${this.primaryId}></md-focus-ring>\n      <md-ripple\n        for=${this.primaryId}\n        ?disabled=${this.rippleDisabled}></md-ripple>\n      ${this.renderPrimaryAction(this.renderPrimaryContent())}\n    `;\n  }\n\n  protected renderOutline() {\n    return html`<span class=\"outline\"></span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>`;\n  }\n\n  protected abstract renderPrimaryAction(content: unknown): unknown;\n\n  private renderPrimaryContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">\n        <span class=\"label-text\">${this.label}</span>\n      </span>\n      <span class=\"touch\"></span>\n    `;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements({flatten: true}).length > 0;\n  }\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n// Separate variable needed for closure.\nconst chipBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A chip component.\n *\n * @fires update-focus {Event} Dispatched when `disabled` is toggled. --bubbles\n */\nexport abstract class Chip extends chipBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the chip is disabled.\n   *\n   * Disabled chips are not focusable, unless `always-focusable` is set.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether or not the chip is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * When true, allow disabled chips to be focused with arrow keys.\n   *\n   * Add this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   *\n   * @deprecated Use `softDisabled` instead of `alwaysFocusable` + `disabled`.\n   */\n  @property({type: Boolean, attribute: 'always-focusable'})\n  alwaysFocusable = false;\n\n  // TODO(b/350810013): remove the label property.\n  /**\n   * The label of the chip.\n   *\n   * @deprecated Set text as content of the chip instead.\n   */\n  @property() label = '';\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a chip has a `slot=\"icon\"` to avoid a Flash Of\n   * Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-icon'}) hasIcon =\n    false;\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\n   * TODO(b/310046938): use the same id for both elements\n   */\n  protected abstract readonly primaryId: string;\n\n  /**\n   * Whether or not the primary ripple is disabled (defaults to `disabled`).\n   * Some chip actions such as links cannot be disabled.\n   */\n  protected get rippleDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleClick.bind(this));\n    }\n  }\n\n  override focus(options?: FocusOptions) {\n    if (this.disabled && !this.alwaysFocusable) {\n      return;\n    }\n\n    super.focus(options);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\">\n        ${this.renderContainerContent()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Chip>) {\n    if (changed.has('disabled') && changed.get('disabled') !== undefined) {\n      this.dispatchEvent(new Event('update-focus', {bubbles: true}));\n    }\n  }\n\n  protected getContainerClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled || this.softDisabled,\n      'has-icon': this.hasIcon,\n    };\n  }\n\n  protected renderContainerContent() {\n    return html`\n      ${this.renderOutline()}\n      <md-focus-ring part=\"focus-ring\" for=${this.primaryId}></md-focus-ring>\n      <md-ripple\n        for=${this.primaryId}\n        ?disabled=${this.rippleDisabled}></md-ripple>\n      ${this.renderPrimaryAction(this.renderPrimaryContent())}\n    `;\n  }\n\n  protected renderOutline() {\n    return html`<span class=\"outline\"></span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>`;\n  }\n\n  protected abstract renderPrimaryAction(content: unknown): unknown;\n\n  private renderPrimaryContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">\n        <span class=\"label-text\" id=\"label\">\n          ${this.label ? this.label : html`<slot></slot>`}\n        </span>\n      </span>\n      <span class=\"touch\"></span>\n    `;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements({flatten: true}).length > 0;\n  }\n\n  private handleClick(event: Event) {\n    // If the chip is soft-disabled or disabled + always-focusable, we need to\n    // explicitly prevent the click from propagating to other event listeners\n    // as well as prevent the default action.\n    if (this.softDisabled || (this.disabled && this.alwaysFocusable)) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n  }\n}\n"]}

package/chips/internal/filter-chip.d.ts

@@ -35,5 +35,5 @@ export declare class FilterChip extends MultiActionChip {
     protected renderLeadingIcon(): import("lit-html").TemplateResult;
     protected renderTrailingAction(focusListener: EventListener): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderOutline(): import("lit-html").TemplateResult<1>;
-    private handleClick;
+    private handleClickOnChild;
 }

package/chips/internal/filter-chip.js

@@ -49,8 +49,9 @@ export class FilterChip extends MultiActionChip {
         id="button"
         aria-label=${ariaLabel || nothing}
         aria-pressed=${this.selected}
+        aria-disabled=${this.softDisabled || nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
-        @click=${this.handleClick}
+        @click=${this.handleClickOnChild}
         >${content}</button
       >
     `;
@@ -73,7 +74,7 @@ export class FilterChip extends MultiActionChip {
             return renderRemoveButton({
                 focusListener,
                 ariaLabel: this.ariaLabelRemove,
-                disabled: this.disabled,
+                disabled: this.disabled || this.softDisabled,
             });
         }
         return nothing;
@@ -84,8 +85,8 @@ export class FilterChip extends MultiActionChip {
         }
         return super.renderOutline();
     }
-    handleClick(event) {
-        if (this.disabled) {
+    handleClickOnChild(event) {
+        if (this.disabled || this.softDisabled) {
             return;
         }
         // Store prevValue to revert in case `chip.selected` is changed during an

package/chips/internal/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Store prevValue to revert in case `chip.selected` is changed during an\n    // event listener.\n    const prevValue = this.selected;\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      // We should not do `this.selected = !this.selected`, since a client\n      // click listener could change its value. Instead, always revert to the\n      // original value.\n      this.selected = prevValue;\n      return;\n    }\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClickOnChild}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled || this.softDisabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClickOnChild(event: MouseEvent) {\n    if (this.disabled || this.softDisabled) {\n      return;\n    }\n\n    // Store prevValue to revert in case `chip.selected` is changed during an\n    // event listener.\n    const prevValue = this.selected;\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      // We should not do `this.selected = !this.selected`, since a client\n      // click listener could change its value. Instead, always revert to the\n      // original value.\n      this.selected = prevValue;\n      return;\n    }\n  }\n}\n"]}

package/chips/internal/filter-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filter-chip.scss"],"names":[],"mappings":"AA+BE,MAII,ktQAIJ,2BACE,qDAGF,WACE,yBACA,wBAGF,qBACE,8CAGF,8BACE,qBACE","file":"filter-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filter-chip.scss"],"names":[],"mappings":"AA6BE,MAII,ktQAIJ,2BACE,qDAGF,WACE,yBACA,wBAGF,qBACE,8CAGF,8BACE,qBACE","file":"filter-styles.css"}

package/chips/internal/input-chip.js

@@ -33,7 +33,7 @@ export class InputChip extends MultiActionChip {
     }
     get rippleDisabled() {
         // Link chips cannot be disabled
-        return !this.href && this.disabled;
+        return !this.href && (this.disabled || this.softDisabled);
     }
     get primaryAction() {
         // Don't use @query() since a remove-only input chip still has a span that
@@ -48,7 +48,7 @@ export class InputChip extends MultiActionChip {
             ...super.getContainerClasses(),
             avatar: this.avatar,
             // Link chips cannot be disabled
-            disabled: !this.href && this.disabled,
+            disabled: !this.href && (this.disabled || this.softDisabled),
             link: !!this.href,
             selected: this.selected,
             'has-trailing': true,
@@ -80,6 +80,7 @@ export class InputChip extends MultiActionChip {
         class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
+        aria-disabled=${this.softDisabled || nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
         >${content}</button
@@ -90,7 +91,7 @@ export class InputChip extends MultiActionChip {
         return renderRemoveButton({
             focusListener,
             ariaLabel: this.ariaLabelRemove,
-            disabled: !this.href && this.disabled,
+            disabled: !this.href && (this.disabled || this.softDisabled),
             tabbable: this.removeOnly,
         });
     }

package/chips/internal/input-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class InputChip extends MultiActionChip {\n  @property({type: Boolean}) avatar = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n  @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    if (this.href) {\n      return 'link';\n    }\n\n    if (this.removeOnly) {\n      return '';\n    }\n\n    return 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && this.disabled;\n  }\n\n  protected get primaryAction() {\n    // Don't use @query() since a remove-only input chip still has a span that\n    // has \"primary action\" classes.\n    if (this.removeOnly) {\n      return null;\n    }\n\n    return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n  }\n\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      avatar: this.avatar,\n      // Link chips cannot be disabled\n      disabled: !this.href && this.disabled,\n      link: !!this.href,\n      selected: this.selected,\n      'has-trailing': true,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    if (this.removeOnly) {\n      return html`\n        <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n          ${content}\n        </span>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    return renderRemoveButton({\n      focusListener,\n      ariaLabel: this.ariaLabelRemove,\n      disabled: !this.href && this.disabled,\n      tabbable: this.removeOnly,\n    });\n  }\n}\n"]}
+{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class InputChip extends MultiActionChip {\n  @property({type: Boolean}) avatar = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n  @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    if (this.href) {\n      return 'link';\n    }\n\n    if (this.removeOnly) {\n      return '';\n    }\n\n    return 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && (this.disabled || this.softDisabled);\n  }\n\n  protected get primaryAction() {\n    // Don't use @query() since a remove-only input chip still has a span that\n    // has \"primary action\" classes.\n    if (this.removeOnly) {\n      return null;\n    }\n\n    return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n  }\n\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      avatar: this.avatar,\n      // Link chips cannot be disabled\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      link: !!this.href,\n      selected: this.selected,\n      'has-trailing': true,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    if (this.removeOnly) {\n      return html`\n        <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n          ${content}\n        </span>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    return renderRemoveButton({\n      focusListener,\n      ariaLabel: this.ariaLabelRemove,\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      tabbable: this.removeOnly,\n    });\n  }\n}\n"]}

package/chips/internal/input-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_input-chip.scss"],"names":[],"mappings":"AA+BE,MAII,8sOAIJ,gBAIE,6JAIA,yJAIA,qJAIA,yJAMF,wBACE,yBAGF,8CACE,mCACA,2BACA,0BAGF,+BACE,wCAGF,8BACE,eACE,wBAGF,+BACE","file":"input-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_input-chip.scss"],"names":[],"mappings":"AA6BE,MAII,8sOAIJ,gBAIE,6JAIA,yJAIA,qJAIA,yJAMF,wBACE,yBAGF,8CACE,mCACA,2BACA,0BAGF,+BACE,wCAGF,8BACE,eACE,wBAGF,+BACE","file":"input-styles.css"}

package/chips/internal/multi-action-chip.d.ts

@@ -8,7 +8,7 @@ import { Chip } from './chip.js';
  * A chip component with multiple actions.
  */
 export declare abstract class MultiActionChip extends Chip {
-    get ariaLabelRemove(): string;
+    get ariaLabelRemove(): string | null;
     set ariaLabelRemove(ariaLabel: string | null);
     protected abstract readonly primaryAction: HTMLElement | null;
     protected abstract readonly trailingAction: HTMLElement | null;

package/chips/internal/multi-action-chip.js

@@ -15,7 +15,11 @@ export class MultiActionChip extends Chip {
             return this.getAttribute(ARIA_LABEL_REMOVE);
         }
         const { ariaLabel } = this;
-        return `Remove ${ariaLabel || this.label}`;
+        // TODO(b/350810013): remove `this.label` when label property is removed.
+        if (ariaLabel || this.label) {
+            return `Remove ${ariaLabel || this.label}`;
+        }
+        return null;
     }
     set ariaLabelRemove(ariaLabel) {
         const prev = this.ariaLabelRemove;