@material/web 1.0.0-pre.4 → 1.0.0-pre.5

package/chips/lib/_shared.scss

@@ -0,0 +1,183 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@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() {
+  :host {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+    display: inline-flex;
+    height: var(--_container-height);
+
+    @include elevation.theme(
+      (
+        surface-tint: var(--_container-surface-tint-layer-color),
+      )
+    );
+
+    @include ripple.theme(
+      (
+        focus-color: var(--_focus-state-layer-color),
+        focus-opacity: var(--_focus-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .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
+    &::before {
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+
+  .container:not(.disabled) {
+    cursor: pointer;
+  }
+
+  .container.disabled {
+    pointer-events: none;
+  }
+
+  .flat {
+    @include elevation.theme(
+      (
+        level: var(--_flat-container-elevation),
+      )
+    );
+
+    &::before {
+      border: var(--_flat-outline-width) solid var(--_flat-outline-color);
+    }
+  }
+
+  .flat.disabled::before {
+    border-color: var(--_flat-disabled-outline-color);
+    opacity: var(--_flat-disabled-outline-opacity);
+  }
+
+  .elevated {
+    border: none;
+
+    @include elevation.theme(
+      (
+        level: var(--_elevated-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-elevation {
+    inset: 0;
+    position: absolute;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        shape: shape.corners-to-shape-token('--_container-shape'),
+      )
+    );
+  }
+
+  md-ripple {
+    border-radius: inherit;
+  }
+
+  .label {
+    align-items: center;
+    color: var(--_label-text-color);
+    display: flex;
+    font: var(--_label-text-type);
+    height: 100%;
+    text-overflow: ellipsis;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  .icon {
+    align-self: center;
+  }
+
+  .icon ::slotted(*) {
+    font-size: inherit;
+    height: 100%;
+    width: 100%;
+  }
+
+  .icon.leading {
+    color: var(--_leading-icon-color);
+    font-size: var(--_leading-icon-size);
+    max-height: var(--_leading-icon-size);
+    max-width: var(--_leading-icon-size);
+  }
+
+  :hover .icon.leading {
+    color: var(--_hover-leading-icon-color);
+  }
+
+  :focus .icon.leading {
+    color: var(--_focus-leading-icon-color);
+  }
+
+  :active .icon.leading {
+    color: var(--_pressed-leading-icon-color);
+  }
+
+  .disabled .icon.leading {
+    color: var(--_disabled-leading-icon-color);
+    opacity: var(--_disabled-leading-icon-opacity);
+  }
+}

package/chips/lib/_suggestion-chip.scss

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-suggestion-chip-values(),
+    $tokens
+  );
+
+  @each $token, $value in $tokens {
+    --md-suggestion-chip-#{$token}: #{$value};
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-suggestion-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * An assist chip component.
+ */
+export declare class AssistChip extends Chip {
+}

package/chips/lib/assist-chip.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * An assist chip component.
+ */
+export class AssistChip extends Chip {
+}
+//# sourceMappingURL=assist-chip.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * 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);--_container-surface-tint-layer-color: var(--md-assist-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-assist-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-assist-chip-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_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, #1c1b1f));--_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-container-elevation: var(--md-assist-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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, #1c1b1f));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_label-text-type: var(--md-assist-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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));--_leading-icon-size: var(--md-assist-chip-leading-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 */
+`;
+//# sourceMappingURL=assist-styles.css.js.map

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

@@ -0,0 +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);--_container-surface-tint-layer-color: var(--md-assist-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-assist-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-assist-chip-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_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, #1c1b1f));--_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-container-elevation: var(--md-assist-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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, #1c1b1f));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_label-text-type: var(--md-assist-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_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, #1c1b1f));--_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));--_leading-icon-size: var(--md-assist-chip-leading-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 "]}

package/{menusurface/lib/menu-surface-styles.scss → chips/lib/assist-styles.scss}

@@ -1,10 +1,10 @@
 //
-// Copyright 2022 Google LLC
+// Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
 // go/keep-sorted start
-@use './menu-surface';
+@use './assist-chip';
 // go/keep-sorted end
 
-@include menu-surface.styles;
+@include assist-chip.styles;

package/chips/lib/chip.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * 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';
+/**
+ * A chip component.
+ */
+export declare 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;
+}

package/chips/lib/chip.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '../../elevation/elevation.js';
+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';
+/**
+ * A chip component.
+ */
+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>`;
+        };
+    }
+    render() {
+        const classes = {
+            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)}>
+        <md-elevation shadow=${this.elevated} surface></md-elevation>
+        ${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}>
+    `;
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handlePointerDown() {
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], 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)
+], 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);
+__decorate([
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], Chip.prototype, "ripple", void 0);
+//# sourceMappingURL=chip.js.map

package/chips/lib/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAC,IAAI,IAAI,UAAU,EAAE,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,qBAAqB,EAAC,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAGjD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAClB,SAAI,GAAG,EAAE,CAAC;QACV,UAAK,GAAG,EAAE,CAAC;QACX,WAAM,GAAG,EAAE,CAAC;QAErB,kBAAa,GAAG,KAAK,CAAC;QACtB,eAAU,GAAG,KAAK,CAAC;QAuCnB,cAAS,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC,CAAC;QAEe,iBAAY,GAAG,GAAG,EAAE;YACnC,OAAO,IAAI,CAAA,wBAAwB,IAAI,CAAC,QAAQ,eAAe,CAAC;QAClE,CAAC,CAAC;IAcJ,CAAC;IAzDU,MAAM;QACb,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ;SACrB,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAA,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA,QAAQ,CAAC;QACxD,OAAO,UAAU,CAAA;SACZ,MAAM,qBAAqB,QAAQ,CAAC,OAAO,CAAC;sBAC/B,IAAI,CAAC,QAAQ;iBAClB,IAAI,CAAC,IAAI,IAAI,OAAO;mBAClB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;kBAClC,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,WAAW;yBACV,IAAI,CAAC,iBAAiB;YACnC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;+BACH,IAAI,CAAC,QAAQ;UAClC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;kCAChB,IAAI,CAAC,aAAa;;;;8BAItB,IAAI,CAAC,KAAK;;YAE5B,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAAI,OAAO;;UAExC,MAAM;KACX,CAAC;IACJ,CAAC;IAgBO,UAAU;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;IAEO,iBAAiB;QACvB,YAAY,EAAE,CAAC;QACf,IAAI,CAAC,aAAa,GAAG,qBAAqB,EAAE,CAAC;IAC/C,CAAC;CACF;AAnEC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;sCAAkB;AAC5C;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;sCAAkB;AAC5C;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;kCAAW;AACpC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;mCAAY;AACrC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;oCAAa;AAEtC;IAAC,KAAK,EAAE;;2CAA+B;AACvC;IAAC,KAAK,EAAE;;wCAA4B;AACpC;IAAC,UAAU,CAAC,WAAW,CAAC;;oCAAkD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport class Chip extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) elevated = false;\n  @property({type: String}) href = '';\n  @property({type: String}) label = '';\n  @property({type: String}) target = '';\n\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n  override render() {\n    const classes = {\n      disabled: this.disabled,\n      elevated: this.elevated,\n      flat: !this.elevated,\n    };\n\n    const button = this.href ? literal`a` : literal`button`;\n    return staticHtml`\n      <${button} class=\"container ${classMap(classes)}\"\n          ?disabled=${this.disabled}\n          href=${this.href || nothing}\n          target=${this.href ? this.target : nothing}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @pointerdown=${this.handlePointerDown}\n          ${ripple(this.getRipple)}>\n        <md-elevation shadow=${this.elevated} surface></md-elevation>\n        ${when(this.showRipple, this.renderRipple)}\n        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>\n        <span class=\"icon leading\">\n          <slot name=\"leading-icon\"></slot>\n        </span>\n        <span class=\"label\">${this.label}</span>\n        <span class=\"icon trailing\">\n          ${this.renderTrailingIcon?.() || nothing}\n        </span>\n      </${button}>\n    `;\n  }\n\n  // Not all chip variants have a trailing icon. We still render a wrapper\n  // <span class=\"icon trailing\"> to compute the correct padding + gap of the\n  // button.\n  protected renderTrailingIcon?: () => TemplateResult;\n\n  private readonly getRipple = () => {  // bind to this\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {  // bind to this\n    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.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::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.flat{--md-elevation-level:var(--_flat-container-elevation)}.flat::before{border:var(--_flat-outline-width) solid var(--_flat-outline-color)}.flat.disabled::before{border-color:var(--_flat-disabled-outline-color);opacity:var(--_flat-disabled-outline-opacity)}.elevated{border:none;--md-elevation-level:var(--_elevated-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-elevation{inset:0;position:absolute}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center}.icon ::slotted(*){font-size:inherit;height:100%;width:100%}.icon.leading{color:var(--_leading-icon-color);font-size:var(--_leading-icon-size);max-height:var(--_leading-icon-size);max-width:var(--_leading-icon-size)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/chips/lib/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-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{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.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::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.flat{--md-elevation-level:var(--_flat-container-elevation)}.flat::before{border:var(--_flat-outline-width) solid var(--_flat-outline-color)}.flat.disabled::before{border-color:var(--_flat-disabled-outline-color);opacity:var(--_flat-disabled-outline-opacity)}.elevated{border:none;--md-elevation-level:var(--_elevated-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-elevation{inset:0;position:absolute}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label{align-items:center;color:var(--_label-text-color);display:flex;font:var(--_label-text-type);height:100%;text-overflow:ellipsis;user-select:none;white-space:nowrap}.disabled .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center}.icon ::slotted(*){font-size:inherit;height:100%;width:100%}.icon.leading{color:var(--_leading-icon-color);font-size:var(--_leading-icon-size);max-height:var(--_leading-icon-size);max-width:var(--_leading-icon-size)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/{autocomplete → chips}/lib/shared-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2022 Google LLC
+// Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * A suggestion chip component.
+ */
+export declare class SuggestionChip extends Chip {
+}

package/chips/lib/suggestion-chip.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * A suggestion chip component.
+ */
+export class SuggestionChip extends Chip {
+}
+//# sourceMappingURL=suggestion-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,cAAe,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 * A suggestion chip component.\n */\nexport class SuggestionChip extends Chip {}\n"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-shape-start-start: var(--md-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_container-surface-tint-layer-color: var(--md-suggestion-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-suggestion-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-suggestion-chip-dragged-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_flat-container-elevation: var(--md-suggestion-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-suggestion-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-disabled-outline-opacity: var(--md-suggestion-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-suggestion-chip-flat-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_flat-outline-color: var(--md-suggestion-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-suggestion-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-size: var(--md-suggestion-chip-leading-icon-size, 18px);--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=suggestion-styles.css.map */
+`;
+//# sourceMappingURL=suggestion-styles.css.js.map

package/chips/lib/suggestion-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-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-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_container-surface-tint-layer-color: var(--md-suggestion-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-suggestion-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-suggestion-chip-dragged-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_flat-container-elevation: var(--md-suggestion-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-suggestion-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-disabled-outline-opacity: var(--md-suggestion-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-suggestion-chip-flat-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_flat-outline-color: var(--md-suggestion-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-suggestion-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-size: var(--md-suggestion-chip-leading-icon-size, 18px);--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}

package/{autocomplete/lib/autocompletelist/autocomplete-list-styles.scss → chips/lib/suggestion-styles.scss}

@@ -1,10 +1,10 @@
 //
-// Copyright 2022 Google LLC
+// Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
 // go/keep-sorted start
-@use './autocomplete-list';
+@use './suggestion-chip';
 // go/keep-sorted end
 
-@include autocomplete-list.styles;
+@include suggestion-chip.styles;

package/chips/suggestion-chip.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SuggestionChip } from './lib/suggestion-chip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-suggestion-chip': MdSuggestionChip;
+    }
+}
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSuggestionChip extends SuggestionChip {
+    static styles: import("lit").CSSResult[];
+}

package/chips/suggestion-chip.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { SuggestionChip } from './lib/suggestion-chip.js';
+import { styles } from './lib/suggestion-styles.css.js';
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
+};
+MdSuggestionChip.styles = [sharedStyles, styles];
+MdSuggestionChip = __decorate([
+    customElement('md-suggestion-chip')
+], MdSuggestionChip);
+export { MdSuggestionChip };
+//# sourceMappingURL=suggestion-chip.js.map

package/chips/suggestion-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-suggestion-chip': MdSuggestionChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n  static override styles = [sharedStyles, styles];\n}\n"]}

package/dialog/lib/_dialog.scss

@@ -9,8 +9,8 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../elevation/elevation';
 @use '../../sass/color';
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/var';
@@ -118,11 +118,13 @@
   md-elevation {
     position: absolute;
     inset: 0;
-    pointer-events: none;
     border-radius: inherit;
-    --md-elevation-level: var(--_container-elevation);
-    --md-elevation-surface-tine-color: var(
-      --_container-surface-tint-layer-color
+
+    @include elevation.theme(
+      (
+        level: var(--_container-elevation),
+        surface-tint: var(--_container-surface-tint-layer-color),
+      )
     );
   }
 

package/dialog/lib/_tokens.scss

@@ -12,7 +12,6 @@
 @use '../../sass/shape';
 @use '../../sass/string-ext';
 @use '../../sass/theme';
-@use '../../sass/typography';
 @use '../../sass/var';
 @use '../../tokens';
 // go/keep-sorted end
@@ -75,7 +74,7 @@ $_fullscreen-tokens: (
   $remove-prefix: 'action-';
   $tokens: _map-without-keys-with-prefix($tokens, $remove-prefix);
 
-  @return typography.resolve-tokens($tokens, 'headline', 'supporting-text');
+  @return $tokens;
 }
 
 /**