@material/web 1.0.0-pre.15 → 1.0.0-pre.17

package/chips/internal/_filter-chip.scss

@@ -71,4 +71,10 @@
   .disabled .checkmark {
     opacity: var(--_disabled-leading-icon-opacity);
   }
+
+  @media (forced-colors: active) {
+    .disabled .checkmark {
+      opacity: 1;
+    }
+  }
 }

package/chips/internal/_input-chip.scss

@@ -59,6 +59,28 @@
     );
   }
 
+  :host([avatar]) {
+    // Use a rounded border by default for avatar chips. Recreating the
+    // fallbacks allows `--md-input-chip-container-shape` to cascade and
+    // override this without needing to add more specificity for avatar chips.
+    --_container-shape-start-start: var(
+      --md-input-chip-container-shape-start-start,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-start-end: var(
+      --md-input-chip-container-shape-start-end,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-end-end: var(
+      --md-input-chip-container-shape-end-end,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-end-start: var(
+      --md-input-chip-container-shape-end-start,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+  }
+
   .avatar .primary.action {
     padding-inline-start: 4px;
   }
@@ -72,4 +94,14 @@
   .disabled.avatar .leading.icon {
     opacity: var(--_disabled-avatar-opacity);
   }
+
+  @media (forced-colors: active) {
+    .link .outline {
+      border-color: ActiveText;
+    }
+
+    .disabled.avatar .leading.icon {
+      opacity: 1;
+    }
+  }
 }

package/chips/internal/_selectable.scss

@@ -19,56 +19,60 @@
     );
   }
 
-  .selected::before {
+  :where(.selected)::before {
     background: var(--_selected-container-color);
   }
 
-  .selected .outline {
+  :where(.selected) .outline {
     border-width: var(--_selected-outline-width);
   }
 
-  .selected.disabled::before {
+  :where(.selected.disabled)::before {
     background: var(--_disabled-selected-container-color);
     opacity: var(--_disabled-selected-container-opacity);
   }
 
-  .selected .label {
+  :where(.selected) .label {
     color: var(--_selected-label-text-color);
   }
 
-  .selected:hover .label {
+  :where(.selected:hover) .label {
     color: var(--_selected-hover-label-text-color);
   }
 
-  .selected:focus .label {
+  :where(.selected:focus) .label {
     color: var(--_selected-focus-label-text-color);
   }
 
-  .selected:active .label {
+  :where(.selected:active) .label {
     color: var(--_selected-pressed-label-text-color);
   }
 
-  .selected .leading.icon {
+  :where(.selected) .leading.icon {
     color: var(--_selected-leading-icon-color);
   }
 
-  .selected:hover .leading.icon {
+  :where(.selected:hover) .leading.icon {
     color: var(--_selected-hover-leading-icon-color);
   }
 
-  .selected:focus .leading.icon {
+  :where(.selected:focus) .leading.icon {
     color: var(--_selected-focus-leading-icon-color);
   }
 
-  .selected:active .leading.icon {
+  :where(.selected:active) .leading.icon {
     color: var(--_selected-pressed-leading-icon-color);
   }
 
   @media (forced-colors: active) {
-    .selected:not(.elevated)::before {
+    :where(.selected:not(.elevated))::before {
       // for forced-colors. Don't add it to elevated containers since elevation
       // already have a border added.
-      border: 1px solid transparent;
+      border: 1px solid CanvasText;
+    }
+
+    :where(.selected) .outline {
+      border-width: 1px;
     }
   }
 }

package/chips/internal/_shared.scss

@@ -20,6 +20,7 @@
     border-end-end-radius: var(--_container-shape-end-end);
     display: inline-flex;
     height: var(--_container-height);
+    cursor: pointer;
 
     @include ripple.theme(
       (
@@ -116,11 +117,11 @@
     position: absolute;
   }
 
-  :focus .outline {
+  :where(:focus) .outline {
     border-color: var(--_focus-outline-color);
   }
 
-  .disabled .outline {
+  :where(.disabled) .outline {
     border-color: var(--_disabled-outline-color);
     opacity: var(--_disabled-outline-opacity);
   }
@@ -140,26 +141,29 @@
     align-items: center;
     color: var(--_label-text-color);
     display: flex;
-    font: var(--_label-text-type);
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
     height: 100%;
     text-overflow: ellipsis;
     user-select: none;
     white-space: nowrap;
   }
 
-  :hover .label {
+  :where(:hover) .label {
     color: var(--_hover-label-text-color);
   }
 
-  :focus .label {
+  :where(:focus) .label {
     color: var(--_focus-label-text-color);
   }
 
-  :active .label {
+  :where(:active) .label {
     color: var(--_pressed-label-text-color);
   }
 
-  .disabled .label {
+  :where(.disabled) .label {
     color: var(--_disabled-label-text-color);
     opacity: var(--_disabled-label-text-opacity);
   }
@@ -181,20 +185,32 @@
     color: var(--_leading-icon-color);
   }
 
-  :hover .leading.icon {
+  :where(:hover) .leading.icon {
     color: var(--_hover-leading-icon-color);
   }
 
-  :focus .leading.icon {
+  :where(:focus) .leading.icon {
     color: var(--_focus-leading-icon-color);
   }
 
-  :active .leading.icon {
+  :where(:active) .leading.icon {
     color: var(--_pressed-leading-icon-color);
   }
 
-  .disabled .leading.icon {
+  :where(.disabled) .leading.icon {
     color: var(--_disabled-leading-icon-color);
     opacity: var(--_disabled-leading-icon-opacity);
   }
+
+  @media (forced-colors: active) {
+    :where(.disabled) :is(.label, .outline, .leading.icon) {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+
+  a,
+  button:not(:disabled) {
+    cursor: inherit;
+  }
 }

package/chips/internal/_suggestion-chip.scss

@@ -58,4 +58,10 @@
       var(--_container-shape)
     );
   }
+
+  @media (forced-colors: active) {
+    .link .outline {
+      border-color: ActiveText;
+    }
+  }
 }

package/chips/internal/_trailing-icon.scss

@@ -14,27 +14,16 @@
     padding: 0 8px;
   }
 
-  .trailing.action md-focus-ring {
-    // Note: the trailing action's shape only follows the trailing end of the
-    // chip. For example, if the leading end is rounded, but the trailing is end
-    // squared, then the focus ring will be squared (not rounded+squared).
-    @include focus-ring.theme(
-      (
-        'shape-start-start': var(--_container-shape-start-end),
-        'shape-end-start': var(--_container-shape-end-end),
-        'shape-end-end': var(--_container-shape-end-end),
-        'shape-start-end': var(--_container-shape-start-end),
-        'outward-offset': -2px,
-      )
-    );
-  }
-
-  .trailing.action md-ripple {
+  .trailing.action :is(md-ripple, md-focus-ring) {
     border-radius: 50%;
     height: calc(4 / 3 * var(--_icon-size)); // 24px default
     width: calc(4 / 3 * var(--_icon-size)); // 24px default
   }
 
+  .trailing.action md-focus-ring {
+    inset: unset;
+  }
+
   .has-trailing .primary.action {
     padding-inline-end: 0;
   }
@@ -45,36 +34,47 @@
     width: var(--_icon-size);
   }
 
-  :hover .trailing.icon {
+  :where(:hover) .trailing.icon {
     color: var(--_hover-trailing-icon-color);
   }
 
-  :focus .trailing.icon {
+  :where(:focus) .trailing.icon {
     color: var(--_focus-trailing-icon-color);
   }
 
-  :active .trailing.icon {
+  :where(:active) .trailing.icon {
     color: var(--_pressed-trailing-icon-color);
   }
 
-  .disabled .trailing.icon {
+  :where(.disabled) .trailing.icon {
     color: var(--_disabled-trailing-icon-color);
     opacity: var(--_disabled-trailing-icon-opacity);
   }
 
-  .selected .trailing.icon {
+  :where(.selected) .trailing.icon {
     color: var(--_selected-trailing-icon-color);
   }
 
-  .selected:hover .trailing.icon {
+  :where(.selected:hover) .trailing.icon {
     color: var(--_selected-hover-trailing-icon-color);
   }
 
-  .selected:focus .trailing.icon {
+  :where(.selected:focus) .trailing.icon {
     color: var(--_selected-focus-trailing-icon-color);
   }
 
-  .selected:active .trailing.icon {
+  :where(.selected:active) .trailing.icon {
     color: var(--_selected-pressed-trailing-icon-color);
   }
+
+  @media (forced-colors: active) {
+    .trailing.icon {
+      color: ButtonText;
+    }
+
+    :where(.disabled) .trailing.icon {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
 }

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

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../elevation/elevation.js';
+import { nothing } from 'lit';
 import { Chip } from './chip.js';
 /**
  * An assist chip component.
@@ -14,11 +15,12 @@ export declare class AssistChip extends Chip {
     target: '_blank' | '_parent' | '_self' | '_top' | '';
     protected get primaryId(): "link" | "button";
     protected get rippleDisabled(): boolean;
+    protected renderContainer(content: unknown): import("lit-html").TemplateResult<1>;
     protected getContainerClasses(): {
         disabled: boolean;
         elevated: boolean;
         link: boolean;
     };
-    protected renderAction(): import("lit-html").TemplateResult<1>;
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderOutline(): import("lit-html").TemplateResult<1>;
 }

package/chips/internal/assist-chip.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Chip } from './chip.js';
+import { Chip, renderGridAction, renderGridContainer } from './chip.js';
 /**
  * An assist chip component.
  */
@@ -25,6 +25,9 @@ export class AssistChip extends Chip {
         // Link chips cannot be disabled
         return !this.href && this.disabled;
     }
+    renderContainer(content) {
+        return renderGridContainer(content, this.getContainerClasses());
+    }
     getContainerClasses() {
         return {
             ...super.getContainerClasses(),
@@ -34,26 +37,26 @@ export class AssistChip extends Chip {
             link: !!this.href,
         };
     }
-    renderAction() {
+    renderPrimaryAction(content) {
         const { ariaLabel } = this;
         if (this.href) {
-            return html `
+            return renderGridAction(html `
         <a class="primary action"
           id="link"
           aria-label=${ariaLabel || nothing}
           href=${this.href}
           target=${this.target || nothing}
-        >${this.renderContent()}</a>
-      `;
+        >${content}</a>
+      `);
         }
-        return html `
+        return renderGridAction(html `
       <button class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
         ?disabled=${this.disabled}
         type="button"
-      >${this.renderContent()}</button>
-    `;
+      >${content}</button>
+    `);
     }
     renderOutline() {
         if (this.elevated) {

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,GAAyC,EAAE,CAAC;IAmDhE,CAAC;IAjDC,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,YAAY;QAC7B,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;uBAGM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;WAC9B,IAAI,CAAC,aAAa,EAAE;OACxB,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ;;SAExB,IAAI,CAAC,aAAa,EAAE;KACxB,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AArD4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAAmD","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 renderAction() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n        >${this.renderContent()}</a>\n      `;\n    }\n\n    return html`\n      <button class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        type=\"button\"\n      >${this.renderContent()}</button>\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-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,EAAE,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,WAAW,CAAC;AAEtE;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAyC,EAAE,CAAC;IAuDhE,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,eAAe,CAAC,OAAgB;QACjD,OAAO,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAClE,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,gBAAgB,CAAC,IAAI,CAAA;;;uBAGX,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;WAC9B,OAAO;OACX,CAAC,CAAC;SACJ;QAED,OAAO,gBAAgB,CAAC,IAAI,CAAA;;;qBAGX,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ;;SAExB,OAAO;KACX,CAAC,CAAC;IACL,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;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;0CAAmD","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, renderGridAction, renderGridContainer} 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 renderContainer(content: unknown) {\n    return renderGridContainer(content, this.getContainerClasses());\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 renderGridAction(html`\n        <a 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    return renderGridAction(html`\n      <button class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        type=\"button\"\n      >${content}</button>\n    `);\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */
+export const styles = css `:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=assist-styles.css.map */
 `;
 //# sourceMappingURL=assist-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}
+{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}@media(forced-colors: active){.link .outline{border-color:ActiveText}}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}

package/chips/internal/chip.d.ts

@@ -6,6 +6,7 @@
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, nothing, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
 /**
  * A chip component.
  */
@@ -27,19 +28,26 @@ export declare abstract class Chip extends LitElement {
      * Some chip actions such as links cannot be disabled.
      */
     protected get rippleDisabled(): boolean;
-    /**
-     * The aria role of the container. Defaults to `row` for grid chip sets.
-     * Listbox chip sets should remove this since they do not contain cells.
-     */
-    protected containerRole?: 'row';
-    protected render(): TemplateResult<1>;
+    protected render(): unknown;
+    protected abstract renderContainer(content: unknown): unknown;
     protected getContainerClasses(): {
         disabled: boolean;
     };
-    protected renderActions(): typeof nothing | TemplateResult<2 | 1>;
-    protected renderActionCell(content: TemplateResult | typeof nothing): TemplateResult | typeof nothing;
-    protected abstract renderAction(): TemplateResult;
-    protected renderContent(): TemplateResult<1>;
+    protected renderContainerContent(): TemplateResult<1>;
     protected renderOutline(): TemplateResult<1>;
     protected renderLeadingIcon(): TemplateResult;
+    protected abstract renderPrimaryAction(content: unknown): unknown;
+    private renderPrimaryContent;
 }
+/**
+ * Renders a chip container that follows the grid/row/cell a11y pattern.
+ *
+ * This renders the container with `role="row"`.
+ */
+export declare function renderGridContainer(content: unknown, classes: ClassInfo): TemplateResult<1>;
+/**
+ * Renders a chip action that follows the grid/row/cell a11y pattern.
+ *
+ * This wraps actions in a `role="cell"` div.
+ */
+export declare function renderGridAction(content: unknown): TemplateResult<1> | typeof nothing;

package/chips/internal/chip.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
 /**
@@ -18,11 +18,6 @@ export class Chip extends LitElement {
         super(...arguments);
         this.disabled = false;
         this.label = '';
-        /**
-         * The aria role of the container. Defaults to `row` for grid chip sets.
-         * Listbox chip sets should remove this since they do not contain cells.
-         */
-        this.containerRole = 'row';
     }
     /**
      * Whether or not the primary ripple is disabled (defaults to `disabled`).
@@ -32,32 +27,30 @@ export class Chip extends LitElement {
         return this.disabled;
     }
     render() {
-        return html `
-      <div class="container ${classMap(this.getContainerClasses())}"
-          role=${this.containerRole || nothing}>
-        ${this.renderOutline()}
-        <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
-        <md-ripple for=${this.primaryId}
-          ?disabled=${this.rippleDisabled}></md-ripple>
-        ${this.renderActions()}
-      </div>
-    `;
+        return this.renderContainer(this.renderContainerContent());
     }
     getContainerClasses() {
         return {
             disabled: this.disabled,
         };
     }
-    renderActions() {
-        return this.renderActionCell(this.renderAction());
+    renderContainerContent() {
+        return html `
+      ${this.renderOutline()}
+      <md-focus-ring part="focus-ring"
+          for=${this.primaryId}></md-focus-ring>
+      <md-ripple for=${this.primaryId}
+          ?disabled=${this.rippleDisabled}></md-ripple>
+      ${this.renderPrimaryAction(this.renderPrimaryContent())}
+    `;
     }
-    renderActionCell(content) {
-        if (content === nothing) {
-            return content;
-        }
-        return html `<div class="cell" role="cell">${content}</div>`;
+    renderOutline() {
+        return html `<span class="outline"></span>`;
+    }
+    renderLeadingIcon() {
+        return html `<slot name="icon"></slot>`;
     }
-    renderContent() {
+    renderPrimaryContent() {
         return html `
       <span class="leading icon" aria-hidden="true">
         ${this.renderLeadingIcon()}
@@ -66,12 +59,6 @@ export class Chip extends LitElement {
       <span class="touch"></span>
     `;
     }
-    renderOutline() {
-        return html `<span class="outline"></span>`;
-    }
-    renderLeadingIcon() {
-        return html `<slot name="icon"></slot>`;
-    }
 }
 (() => {
     requestUpdateOnAriaChange(Chip);
@@ -87,7 +74,25 @@ __decorate([
 __decorate([
     property()
 ], Chip.prototype, "label", void 0);
-__decorate([
-    state()
-], Chip.prototype, "containerRole", void 0);
+/**
+ * Renders a chip container that follows the grid/row/cell a11y pattern.
+ *
+ * This renders the container with `role="row"`.
+ */
+export function renderGridContainer(content, classes) {
+    return html `
+    <div class="container ${classMap(classes)}" role="row">${content}</div>
+  `;
+}
+/**
+ * Renders a chip action that follows the grid/row/cell a11y pattern.
+ *
+ * This wraps actions in a `role="cell"` div.
+ */
+export function renderGridAction(content) {
+    if (content === nothing) {
+        return content;
+    }
+    return html `<div class="cell" role="cell">${content}</div>`;
+}
 //# sourceMappingURL=chip.js.map

package/chips/internal/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAW6B,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;QAevB;;;WAGG;QACgB,kBAAa,GAAW,KAAK,CAAC;IAqDnD,CAAC;IAjEC;;;OAGG;IACH,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAQkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;iBACjD,IAAI,CAAC,aAAa,IAAI,OAAO;UACpC,IAAI,CAAC,aAAa,EAAE;+CACiB,IAAI,CAAC,SAAS;yBACpC,IAAI,CAAC,SAAS;sBACjB,IAAI,CAAC,cAAc;UAC/B,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACpD,CAAC;IAES,gBAAgB,CAAC,OACc;QACvC,IAAI,OAAO,KAAK,OAAO,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA,iCAAiC,OAAO,QAAQ,CAAC;IAC9D,CAAC;IAIS,aAAa;QACrB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;;AAlFD;IACE,yBAAyB,CAAC,IAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,sBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;mCAAY;AAmBd;IAAR,KAAK,EAAE;2CAAyC","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, nothing, TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Chip);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({type: Boolean}) disabled = false;\n  @property() label = '';\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\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  /**\n   * The aria role of the container. Defaults to `row` for grid chip sets.\n   * Listbox chip sets should remove this since they do not contain cells.\n   */\n  @state() protected containerRole?: 'row' = 'row';\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\"\n          role=${this.containerRole || nothing}>\n        ${this.renderOutline()}\n        <md-focus-ring part=\"focus-ring\" for=${this.primaryId}></md-focus-ring>\n        <md-ripple for=${this.primaryId}\n          ?disabled=${this.rippleDisabled}></md-ripple>\n        ${this.renderActions()}\n      </div>\n    `;\n  }\n\n  protected getContainerClasses() {\n    return {\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderActions() {\n    return this.renderActionCell(this.renderAction());\n  }\n\n  protected renderActionCell(content: TemplateResult|\n                             typeof nothing): TemplateResult|typeof nothing {\n    if (content === nothing) {\n      return content;\n    }\n\n    return html`<div class=\"cell\" role=\"cell\">${content}</div>`;\n  }\n\n  protected abstract renderAction(): TemplateResult;\n\n  protected renderContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">${this.label}</span>\n      <span class=\"touch\"></span>\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\"></slot>`;\n  }\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAW6B,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;IAyDzB,CAAC;IAlDC;;;OAGG;IACH,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;IAC7D,CAAC;IAIS,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,sBAAsB;QAC9B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;;gBAEZ,IAAI,CAAC,SAAS;uBACP,IAAI,CAAC,SAAS;sBACf,IAAI,CAAC,cAAc;QACjC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACxD,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;IAIO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;;AAnED;IACE,yBAAyB,CAAC,IAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,sBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;mCAAY;AA2DzB;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,OAAgB,EAAE,OAAkB;IACtE,OAAO,IAAI,CAAA;4BACe,QAAQ,CAAC,OAAO,CAAC,gBAAgB,OAAO;GACjE,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAgB;IAC/C,IAAI,OAAO,KAAK,OAAO,EAAE;QACvB,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,IAAI,CAAA,iCAAiC,OAAO,QAAQ,CAAC;AAC9D,CAAC","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, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Chip);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({type: Boolean}) disabled = false;\n  @property() label = '';\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\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  protected override render() {\n    return this.renderContainer(this.renderContainerContent());\n  }\n\n  protected abstract renderContainer(content: unknown): unknown;\n\n  protected getContainerClasses() {\n    return {\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContainerContent() {\n    return html`\n      ${this.renderOutline()}\n      <md-focus-ring part=\"focus-ring\"\n          for=${this.primaryId}></md-focus-ring>\n      <md-ripple 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\"></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\">${this.label}</span>\n      <span class=\"touch\"></span>\n    `;\n  }\n}\n\n/**\n * Renders a chip container that follows the grid/row/cell a11y pattern.\n *\n * This renders the container with `role=\"row\"`.\n */\nexport function renderGridContainer(content: unknown, classes: ClassInfo) {\n  return html`\n    <div class=\"container ${classMap(classes)}\" role=\"row\">${content}</div>\n  `;\n}\n\n/**\n * Renders a chip action that follows the grid/row/cell a11y pattern.\n *\n * This wraps actions in a `role=\"cell\"` div.\n */\nexport function renderGridAction(content: unknown) {\n  if (content === nothing) {\n    return content;\n  }\n\n  return html`<div class=\"cell\" role=\"cell\">${content}</div>`;\n}\n"]}