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

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,25 +31,26 @@
         '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 and outline color, separate node for disabled opacity changes
+    // Container color, separate node for disabled opacity changes
     &::before {
       border-radius: inherit;
       content: '';
@@ -68,75 +68,42 @@
     pointer-events: none;
   }
 
-  .flat::before {
-    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
-  }
-
-  .flat:focus::before {
-    border-color: var(--_flat-focus-outline-color);
-  }
-
-  .flat.disabled::before {
-    border-color: var(--_flat-disabled-outline-color);
-    opacity: var(--_flat-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),
-      )
-    );
+  .action {
+    align-items: baseline;
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: inherit;
+    display: flex;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
   }
 
-  .elevated:focus-within {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-focus-container-elevation),
-      )
-    );
+  .action:first-of-type {
+    padding-inline-start: 8px;
   }
 
-  .elevated:active {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-pressed-container-elevation),
-      )
-    );
+  .action:last-of-type {
+    padding-inline-end: 8px;
   }
 
-  .elevated.disabled {
-    @include elevation.theme(
-      (
-        'level': var(--_elevated-disabled-container-elevation),
-      )
-    );
+  // Outline, separate node for disabled opacity changes
+  .outline {
+    border: var(--_outline-width) solid var(--_outline-color);
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
   }
 
-  .elevated.disabled::before {
-    background: var(--_elevated-disabled-container-color);
-    opacity: var(--_elevated-disabled-container-opacity);
+  :focus .outline {
+    border-color: var(--_focus-outline-color);
   }
 
-  md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'shape': shape.corners-to-shape-token('--_container-shape'),
-      )
-    );
+  .disabled .outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
   }
 
   md-ripple {
@@ -155,6 +122,7 @@
     display: flex;
     font: var(--_label-text-type);
     height: 100%;
+    padding: 0 8px;
     text-overflow: ellipsis;
     user-select: none;
     white-space: nowrap;
@@ -179,34 +147,30 @@
 
   .icon {
     align-self: center;
-    font-size: var(--_icon-size);
-    max-height: var(--_icon-size);
-    max-width: var(--_icon-size);
+    color: var(--_leading-icon-color);
+    height: var(--_icon-size);
+    position: relative;
   }
 
   .icon ::slotted(*) {
-    font-size: inherit;
-    height: 100%;
-    width: 100%;
-  }
-
-  .icon.leading {
-    color: var(--_leading-icon-color);
+    font-size: var(--_icon-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
   }
 
-  :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);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-disabled-outline-opacity: var(--md-assist-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-assist-chip-flat-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-outline-color: var(--md-assist-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-assist-chip-flat-outline-width, 1px);--_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-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);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-disabled-outline-opacity: var(--md-assist-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-assist-chip-flat-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-outline-color: var(--md-assist-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-assist-chip-flat-outline-width, 1px);--_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-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,27 +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, TemplateResult } from 'lit';
+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>;
-    protected renderTrailingIcon?: () => TemplateResult;
-    private readonly getRipple;
-    private readonly renderRipple;
-    private handleBlur;
-    private handleFocus;
-    private handlePointerDown;
+    /**
+     * 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;
+    };
+    protected renderContent(): TemplateResult<1>;
+    protected abstract renderPrimaryAction(): TemplateResult;
+    protected renderTrailingAction(): TemplateResult | typeof nothing;
+    protected renderOutline(): TemplateResult<1>;
+    protected renderLeadingIcon(): TemplateResult;
+    protected getPrimaryRipple: () => Promise<MdRipple>;
 }

package/chips/lib/chip.js

@@ -3,17 +3,14 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import '../../elevation/elevation.js';
+var _a;
+import { __decorate } from "tslib";
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
-import { html as staticHtml, literal } from 'lit/static-html.js';
-import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
-import { ripple } from '../../ripple/directive.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 /**
  * A chip component.
  */
@@ -21,90 +18,72 @@ export class Chip extends LitElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
-        this.elevated = false;
-        this.href = '';
         this.label = '';
-        this.target = '';
-        this.showFocusRing = false;
-        this.showRipple = false;
-        this.getRipple = () => {
-            this.showRipple = true;
-            return this.ripple;
-        };
-        this.renderRipple = () => {
-            return html `<md-ripple ?disabled=${this.disabled}></md-ripple>`;
+        this.showPrimaryRipple = false;
+        this.getPrimaryRipple = () => {
+            this.showPrimaryRipple = true;
+            return this.primaryRipple;
         };
     }
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    get primaryRippleDisabled() {
+        return this.disabled;
+    }
     render() {
-        const classes = {
+        const primaryRipple = this.showPrimaryRipple ?
+            html `<md-ripple ?disabled=${this.primaryRippleDisabled}></md-ripple>` :
+            nothing;
+        const primaryFocus = html `<md-focus-ring for=${this.primaryFocusFor}></md-focus-ring>`;
+        return html `
+      <div class="container ${classMap(this.getContainerClasses())}">
+        ${this.renderOutline()}
+        ${primaryFocus}
+        ${primaryRipple}
+        ${this.renderPrimaryAction()}
+        ${this.renderTrailingAction()}
+      </div>
+    `;
+    }
+    getContainerClasses() {
+        return {
             disabled: this.disabled,
-            elevated: this.elevated,
-            flat: !this.elevated,
         };
-        const button = this.href ? literal `a` : literal `button`;
-        return staticHtml `
-      <${button} class="container ${classMap(classes)}"
-          ?disabled=${this.disabled}
-          href=${this.href || nothing}
-          target=${this.href ? this.target : nothing}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @pointerdown=${this.handlePointerDown}
-          ${ripple(this.getRipple)}>
-        ${this.elevated ? html `<md-elevation></md-elevation>` : nothing}
-        ${when(this.showRipple, this.renderRipple)}
-        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
-        <span class="icon leading">
-          <slot name="leading-icon"></slot>
-        </span>
-        <span class="label">${this.label}</span>
-        <span class="icon trailing">
-          ${this.renderTrailingIcon?.() || nothing}
-        </span>
-      </${button}>
+    }
+    renderContent() {
+        return html `
+      <span class="icon">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">${this.label}</span>
     `;
     }
-    handleBlur() {
-        this.showFocusRing = false;
+    renderTrailingAction() {
+        return nothing;
     }
-    handleFocus() {
-        this.showFocusRing = shouldShowStrongFocus();
+    renderOutline() {
+        return html `<span class="outline"></span>`;
     }
-    handlePointerDown() {
-        pointerPress();
-        this.showFocusRing = shouldShowStrongFocus();
+    renderLeadingIcon() {
+        return html `<slot name="icon"></slot>`;
     }
 }
+_a = Chip;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Chip.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Chip.prototype, "elevated", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], Chip.prototype, "href", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Chip.prototype, "label", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], Chip.prototype, "target", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Chip.prototype, "showFocusRing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Chip.prototype, "showRipple", void 0);
+    state()
+], Chip.prototype, "showPrimaryRipple", void 0);
 __decorate([
-    queryAsync('md-ripple'),
-    __metadata("design:type", Promise)
-], Chip.prototype, "ripple", void 0);
+    queryAsync('md-ripple')
+], Chip.prototype, "primaryRipple", void 0);
 //# sourceMappingURL=chip.js.map