@material/web 1.0.0-pre.7 → 1.0.0-pre.8

package/chips/lib/_elevated.scss

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../elevation/elevation';
+// go/keep-sorted end
+
+@mixin styles() {
+  .elevated {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-container-elevation),
+        'shadow-color': var(--_elevated-container-shadow-color),
+      )
+    );
+  }
+
+  .elevated::before {
+    background: var(--_elevated-container-color);
+  }
+
+  .elevated:hover {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-hover-container-elevation),
+      )
+    );
+  }
+
+  .elevated:focus-within {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-focus-container-elevation),
+      )
+    );
+  }
+
+  .elevated:active {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-pressed-container-elevation),
+      )
+    );
+  }
+
+  .elevated.disabled {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-disabled-container-elevation),
+      )
+    );
+  }
+
+  .elevated.disabled::before {
+    background: var(--_elevated-disabled-container-color);
+    opacity: var(--_elevated-disabled-container-opacity);
+  }
+}

package/chips/lib/_filter-chip.scss

@@ -3,17 +3,33 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
 // go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../sass/theme';
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-filter-chip-values(), $tokens);
+  $supported-tokens: list.join(
+    tokens.$md-comp-filter-chip-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
 
   @each $token, $value in $tokens {
-    --md-filter-chip-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filter-chip-#{$token}: #{$value};
+    }
   }
 }
 
@@ -22,8 +38,26 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filter-chip-#{$token}, #{$value});
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filter-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filter-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filter-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filter-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 
   .selected {
@@ -39,7 +73,7 @@
     );
   }
 
-  .selected .icon.leading {
+  .selected .icon {
     width: var(--_icon-size);
   }
 
@@ -86,19 +120,19 @@
     color: var(--_selected-pressed-label-text-color);
   }
 
-  .selected .icon.leading {
+  .selected .icon {
     color: var(--_selected-leading-icon-color);
   }
 
-  .selected:hover .icon.leading {
+  .selected:hover .icon {
     color: var(--_selected-hover-leading-icon-color);
   }
 
-  .selected:focus .icon.leading {
+  .selected:focus .icon {
     color: var(--_selected-focus-leading-icon-color);
   }
 
-  .selected:active .icon.leading {
+  .selected:active .icon {
     color: var(--_selected-pressed-leading-icon-color);
   }
 

package/chips/lib/_shared.scss

@@ -4,13 +4,12 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/elevation';
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
-@use '../../sass/shape';
 // go/keep-sorted end
 
 @mixin styles() {
@@ -32,22 +31,23 @@
         'pressed-opacity': var(--_pressed-state-layer-opacity),
       )
     );
+
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
+      )
+    );
   }
 
   .container {
-    align-items: baseline;
-    appearance: none;
-    background: none;
-    border: none;
     border-radius: inherit;
     box-sizing: border-box;
     display: flex;
-    gap: 8px;
     height: 100%;
-    outline: none;
-    padding: 0 8px;
     position: relative;
-    text-decoration: none;
     width: 100%;
 
     // Container color, separate node for disabled opacity changes
@@ -68,6 +68,26 @@
     pointer-events: none;
   }
 
+  .action {
+    align-items: baseline;
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: inherit;
+    display: flex;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
+  }
+
+  .action:first-of-type {
+    padding-inline-start: 8px;
+  }
+
+  .action:last-of-type {
+    padding-inline-end: 8px;
+  }
+
   // Outline, separate node for disabled opacity changes
   .outline {
     border: var(--_outline-width) solid var(--_outline-color);
@@ -86,64 +106,6 @@
     opacity: var(--_disabled-outline-opacity);
   }
 
-  .elevated {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-container-elevation),
-        'shadow-color': var(--_elevated-container-shadow-color),
-      )
-    );
-  }
-
-  .elevated::before {
-    background: var(--_elevated-container-color);
-  }
-
-  .elevated:hover {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-hover-container-elevation),
-      )
-    );
-  }
-
-  .elevated:focus-within {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-focus-container-elevation),
-      )
-    );
-  }
-
-  .elevated:active {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-pressed-container-elevation),
-      )
-    );
-  }
-
-  .elevated.disabled {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-disabled-container-elevation),
-      )
-    );
-  }
-
-  .elevated.disabled::before {
-    background: var(--_elevated-disabled-container-color);
-    opacity: var(--_elevated-disabled-container-opacity);
-  }
-
-  md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'shape': shape.corners-to-shape-token('--_container-shape'),
-      )
-    );
-  }
-
   md-ripple {
     border-radius: inherit;
   }
@@ -160,6 +122,7 @@
     display: flex;
     font: var(--_label-text-type);
     height: 100%;
+    padding: 0 8px;
     text-overflow: ellipsis;
     user-select: none;
     white-space: nowrap;
@@ -184,6 +147,7 @@
 
   .icon {
     align-self: center;
+    color: var(--_leading-icon-color);
     height: var(--_icon-size);
     position: relative;
   }
@@ -194,23 +158,19 @@
     width: var(--_icon-size);
   }
 
-  .icon.leading {
-    color: var(--_leading-icon-color);
-  }
-
-  :hover .icon.leading {
+  :hover .icon {
     color: var(--_hover-leading-icon-color);
   }
 
-  :focus .icon.leading {
+  :focus .icon {
     color: var(--_focus-leading-icon-color);
   }
 
-  :active .icon.leading {
+  :active .icon {
     color: var(--_pressed-leading-icon-color);
   }
 
-  .disabled .icon.leading {
+  .disabled .icon {
     color: var(--_disabled-leading-icon-color);
     opacity: var(--_disabled-leading-icon-opacity);
   }

package/chips/lib/_suggestion-chip.scss

@@ -4,18 +4,31 @@
 //
 
 // go/keep-sorted start
-@use '../../sass/theme';
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-suggestion-chip-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-suggestion-chip-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
 
   @each $token, $value in $tokens {
-    --md-suggestion-chip-#{$token}: #{$value};
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-suggestion-chip-#{$token}: #{$value};
+    }
   }
 }
 
@@ -26,5 +39,23 @@
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-suggestion-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-suggestion-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-suggestion-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-suggestion-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
   }
 }

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

@@ -3,9 +3,21 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import '../../elevation/elevation.js';
 import { Chip } from './chip.js';
 /**
  * An assist chip component.
  */
 export declare class AssistChip extends Chip {
+    elevated: boolean;
+    href: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    protected get primaryFocusFor(): "link" | "button";
+    protected get primaryRippleDisabled(): boolean;
+    protected getContainerClasses(): {
+        disabled: boolean;
+        elevated: boolean;
+    };
+    protected renderPrimaryAction(): import("lit-html").TemplateResult<1>;
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
 }

package/chips/lib/assist-chip.js

@@ -3,10 +3,74 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ripple } from '../../ripple/directive.js';
 import { Chip } from './chip.js';
 /**
  * An assist chip component.
  */
 export class AssistChip extends Chip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.href = '';
+        this.target = '';
+    }
+    get primaryFocusFor() {
+        return this.href ? 'link' : 'button';
+    }
+    get primaryRippleDisabled() {
+        // Link chips cannot be disabled
+        return !this.href && this.disabled;
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            // Link chips cannot be disabled
+            disabled: !this.href && this.disabled,
+            elevated: this.elevated,
+        };
+    }
+    renderPrimaryAction() {
+        const { ariaLabel } = this;
+        if (this.href) {
+            return html `
+        <a class="action"
+          id="link"
+          aria-label=${ariaLabel || nothing}
+          href=${this.href}
+          target=${this.target || nothing}
+          ${ripple(this.getPrimaryRipple)}
+        >${this.renderContent()}</a>
+      `;
+        }
+        return html `
+      <button class="action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        ?disabled=${this.disabled}
+        type="button"
+        ${ripple(this.getPrimaryRipple)}
+      >${this.renderContent()}</button>
+    `;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return html `<md-elevation></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
 }
+__decorate([
+    property({ type: Boolean })
+], AssistChip.prototype, "elevated", void 0);
+__decorate([
+    property()
+], AssistChip.prototype, "href", void 0);
+__decorate([
+    property()
+], AssistChip.prototype, "target", void 0);
 //# sourceMappingURL=assist-chip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {}\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;AAE3C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD,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;IAoDhE,CAAC;IAlDC,IAAc,eAAe;QAC3B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,qBAAqB;QAC1C,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;SACxB,CAAC;IACJ,CAAC;IAEkB,mBAAmB;QACpC,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;YAC7B,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;WAC9B,IAAI,CAAC,aAAa,EAAE;OACxB,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ;;UAEvB,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC;SAC9B,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;AAtD4B;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 {ripple} from '../../ripple/directive.js';\nimport {ARIAMixinStrict} from '../../types/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 primaryFocusFor() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get primaryRippleDisabled() {\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    };\n  }\n\n  protected override renderPrimaryAction() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a class=\"action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          ${ripple(this.getPrimaryRipple)}\n        >${this.renderContent()}</a>\n      `;\n    }\n\n    return html`\n      <button class=\"action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        type=\"button\"\n        ${ripple(this.getPrimaryRipple)}\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"]}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_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));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_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))}/*# sourceMappingURL=assist-styles.css.map */
+export const styles = css `:host{--_container-height: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_focus-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_hover-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_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-sys-color-on-surface, #1d1b20);--_pressed-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_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 */
 `;
 //# sourceMappingURL=assist-styles.css.js.map

package/chips/lib/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-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_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));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_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))}/*# 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: 32px;--_container-shape: 8px;--_disabled-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-label-text-opacity: 0.38;--_elevated-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);--_elevated-container-elevation: 1;--_elevated-container-shadow-color: var(--md-sys-color-shadow, #000);--_elevated-disabled-container-color: var(--md-sys-color-on-surface, #1d1b20);--_elevated-disabled-container-elevation: 0;--_elevated-disabled-container-opacity: 0.12;--_elevated-focus-container-elevation: 1;--_elevated-hover-container-elevation: 2;--_elevated-pressed-container-elevation: 1;--_focus-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_focus-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_focus-state-layer-opacity: 0.12;--_hover-label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_hover-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_hover-state-layer-opacity: 0.08;--_label-text-color: var(--md-sys-color-on-surface, #1d1b20);--_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-sys-color-on-surface, #1d1b20);--_pressed-state-layer-color: var(--md-sys-color-on-surface, #1d1b20);--_pressed-state-layer-opacity: 0.12;--_disabled-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-outline-opacity: 0.12;--_focus-outline-color: var(--md-sys-color-on-surface, #1d1b20);--_outline-color: var(--md-sys-color-outline, #79747e);--_outline-width: 1px;--_disabled-leading-icon-color: var(--md-sys-color-on-surface, #1d1b20);--_disabled-leading-icon-opacity: 0.38;--_focus-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_hover-leading-icon-color: var(--md-sys-color-primary, #6750a4);--_leading-icon-color: var(--md-sys-color-primary, #6750a4);--_icon-size: 18px;--_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 "]}

package/chips/lib/chip.d.ts

@@ -3,32 +3,35 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement, nothing, TemplateResult } from 'lit';
+import { MdRipple } from '../../ripple/ripple.js';
 /**
  * A chip component.
  */
-export declare class Chip extends LitElement {
+export declare abstract class Chip extends LitElement {
     disabled: boolean;
-    elevated: boolean;
-    href: string;
     label: string;
-    target: string;
-    private showFocusRing;
-    private showRipple;
-    private readonly ripple;
-    render(): TemplateResult<2 | 1>;
+    /**
+     * The `id` of the action the primary focus ring is for.
+     */
+    protected abstract readonly primaryFocusFor: string;
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    protected get primaryRippleDisabled(): boolean;
+    private showPrimaryRipple;
+    private readonly primaryRipple;
+    protected render(): TemplateResult<1>;
     protected getContainerClasses(): {
         disabled: boolean;
-        elevated: boolean;
     };
+    protected renderContent(): TemplateResult<1>;
+    protected abstract renderPrimaryAction(): TemplateResult;
+    protected renderTrailingAction(): TemplateResult | typeof nothing;
+    protected renderOutline(): TemplateResult<1>;
     protected renderLeadingIcon(): TemplateResult;
-    protected renderTrailingIcon(): TemplateResult | typeof nothing;
-    private renderRipple;
-    private readonly getRipple;
-    private handleBlur;
-    private handleFocus;
-    private handlePointerDown;
+    protected getPrimaryRipple: () => Promise<MdRipple>;
 }