@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/chips/lib/_trailing-icon.scss

@@ -0,0 +1,78 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+// go/keep-sorted end
+
+@mixin styles() {
+  .trailing.action {
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+
+    // Note: the trailing action's shape only follows the trailing end of the
+    // chip. For example, if the leading end is rounded, but the trailing is end
+    // squared, then the focus ring will be squared (not rounded+squared).
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_container-shape-start-end),
+        'shape-end-start': var(--_container-shape-end-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-start-end': var(--_container-shape-start-end),
+        'outward-offset': -2px,
+      )
+    );
+  }
+
+  .trailing.action md-ripple {
+    border-radius: 50%;
+    height: calc(4 / 3 * var(--_icon-size)); // 24px default
+    width: calc(4 / 3 * var(--_icon-size)); // 24px default
+  }
+
+  :has(.trailing.action) .primary.action {
+    padding-inline-end: 0;
+  }
+
+  .trailing.icon {
+    color: var(--_trailing-icon-color);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  :hover .trailing.icon {
+    color: var(--_hover-trailing-icon-color);
+  }
+
+  :focus .trailing.icon {
+    color: var(--_focus-trailing-icon-color);
+  }
+
+  :active .trailing.icon {
+    color: var(--_pressed-trailing-icon-color);
+  }
+
+  .disabled .trailing.icon {
+    color: var(--_disabled-trailing-icon-color);
+    opacity: var(--_disabled-trailing-icon-opacity);
+  }
+
+  .selected .trailing.icon {
+    color: var(--_selected-trailing-icon-color);
+  }
+
+  .selected:hover .trailing.icon {
+    color: var(--_selected-hover-trailing-icon-color);
+  }
+
+  .selected:focus .trailing.icon {
+    color: var(--_selected-focus-trailing-icon-color);
+  }
+
+  .selected:active .trailing.icon {
+    color: var(--_selected-pressed-trailing-icon-color);
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * 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 primaryId(): "link" | "button";
+    protected get rippleDisabled(): boolean;
+    protected getContainerClasses(): {
+        disabled: boolean;
+        elevated: boolean;
+    };
+    protected renderAction(): import("lit-html").TemplateResult<1>;
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
+}

package/chips/lib/assist-chip.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * 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 { Chip } from './chip.js';
+/**
+ * An assist chip component.
+ */
+export class AssistChip extends Chip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.href = '';
+        this.target = '';
+    }
+    get primaryId() {
+        return this.href ? 'link' : 'button';
+    }
+    get rippleDisabled() {
+        // 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,
+        };
+    }
+    renderAction() {
+        const { ariaLabel } = this;
+        if (this.href) {
+            return html `
+        <a class="primary action"
+          id="link"
+          aria-label=${ariaLabel || nothing}
+          href=${this.href}
+          target=${this.target || nothing}
+        >${this.renderContent()}</a>
+      `;
+        }
+        return html `
+      <button class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        ?disabled=${this.disabled}
+        type="button"
+      >${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

@@ -0,0 +1 @@
+{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAyC,EAAE,CAAC;IAkDhE,CAAC;IAhDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;IACrC,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,YAAY;QAC7B,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;uBAGM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;WAC9B,IAAI,CAAC,aAAa,EAAE;OACxB,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ;;SAExB,IAAI,CAAC,aAAa,EAAE;KACxB,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AApD4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAAmD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n\n  protected get primaryId() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && this.disabled;\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      // Link chips cannot be disabled\n      disabled: !this.href && this.disabled,\n      elevated: this.elevated,\n    };\n  }\n\n  protected override renderAction() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n        >${this.renderContent()}</a>\n      `;\n    }\n\n    return html`\n      <button class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        type=\"button\"\n      >${this.renderContent()}</button>\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"]}

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-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */
+`;
+//# 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-height: var(--md-assist-chip-container-height, 32px);--_container-shape: var(--md-assist-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-assist-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-assist-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-assist-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-assist-chip-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}

package/chips/lib/assist-styles.scss

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

package/chips/lib/chip-set-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{display:flex;flex-wrap:wrap;gap:8px}.content{display:flex;flex-wrap:inherit;gap:inherit}/*# sourceMappingURL=chip-set-styles.css.map */
+`;
+//# sourceMappingURL=chip-set-styles.css.js.map

package/chips/lib/chip-set-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-set-styles.css.js","sourceRoot":"","sources":["chip-set-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{display:flex;flex-wrap:wrap;gap:8px}.content{display:flex;flex-wrap:inherit;gap:inherit}/*# sourceMappingURL=chip-set-styles.css.map */\n`;\n "]}

package/chips/lib/chip-set-styles.scss

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

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Chip } from './chip.js';
+/**
+ * The type of chip a chip set controls.
+ */
+export type ChipSetType = 'assist' | 'suggestion' | 'filter' | 'input' | '';
+/**
+ * A chip set component.
+ */
+export declare class ChipSet extends LitElement {
+    get chips(): Chip[];
+    type: ChipSetType;
+    singleSelect: boolean;
+    private readonly childElements;
+    constructor();
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleKeyDown;
+    private updateTabIndices;
+    private handleSelected;
+}

package/chips/lib/chip-set.js

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { Chip } from './chip.js';
+/**
+ * A chip set component.
+ */
+export class ChipSet extends LitElement {
+    get chips() {
+        return this.childElements.filter((child) => child instanceof Chip);
+    }
+    constructor() {
+        super();
+        this.type = '';
+        this.singleSelect = false;
+        if (!isServer) {
+            this.addEventListener('focusin', this.updateTabIndices.bind(this));
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.addEventListener('selected', this.handleSelected.bind(this));
+        }
+    }
+    updated(changed) {
+        if (changed.has('singleSelect') && this.singleSelect) {
+            let hasSelectedChip = false;
+            for (const chip of this.chips) {
+                if (chip.selected === true) {
+                    if (!hasSelectedChip) {
+                        hasSelectedChip = true;
+                        continue;
+                    }
+                    chip.selected = false;
+                }
+            }
+        }
+    }
+    render() {
+        const { ariaLabel } = this;
+        const isFilter = this.type === 'filter';
+        const role = isFilter ? 'listbox' : 'grid';
+        const multiselectable = isFilter ? !this.singleSelect : nothing;
+        return html `
+      <div class="content"
+          role=${role}
+          aria-label=${ariaLabel || nothing}
+          aria-multiselectable=${multiselectable}>
+        <slot @slotchange=${this.updateTabIndices}></slot>
+      </div>
+    `;
+    }
+    handleKeyDown(event) {
+        const isDown = event.key === 'ArrowDown';
+        const isUp = event.key === 'ArrowUp';
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        const isHome = event.key === 'Home';
+        const isEnd = event.key === 'End';
+        // Ignore non-navigation keys
+        if (!isLeft && !isRight && !isDown && !isUp && !isHome && !isEnd) {
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        const { chips } = this;
+        // Don't try to select another chip if there aren't any.
+        if (chips.length < 2) {
+            return;
+        }
+        if (isHome || isEnd) {
+            const index = isHome ? 0 : chips.length - 1;
+            chips[index].focus({ trailing: isEnd });
+            this.updateTabIndices();
+            return;
+        }
+        // Check if moving forwards or backwards
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft || isDown : isRight || isDown;
+        const focusedChip = chips.find(chip => chip.matches(':focus-within'));
+        if (!focusedChip) {
+            // If there is not already a chip focused, select the first or last chip
+            // based on the direction we're traveling.
+            const nextChip = forwards ? chips[0] : chips[chips.length - 1];
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            return;
+        }
+        const currentIndex = chips.indexOf(focusedChip);
+        let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;
+        // Search for the next sibling that is not disabled to select.
+        // If we return to the host index, there is nothing to select.
+        while (nextIndex !== currentIndex) {
+            if (nextIndex >= chips.length) {
+                // Return to start if moving past the last item.
+                nextIndex = 0;
+            }
+            else if (nextIndex < 0) {
+                // Go to end if moving before the first item.
+                nextIndex = chips.length - 1;
+            }
+            // Check if the next sibling is disabled. If so,
+            // move the index and continue searching.
+            const nextChip = chips[nextIndex];
+            if (nextChip.disabled) {
+                if (forwards) {
+                    nextIndex++;
+                }
+                else {
+                    nextIndex--;
+                }
+                continue;
+            }
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            break;
+        }
+    }
+    updateTabIndices() {
+        const { chips } = this;
+        let hasFocusedChip = false;
+        for (const chip of chips) {
+            if (chip.matches(':focus-within')) {
+                chip.removeAttribute('tabindex');
+                hasFocusedChip = true;
+            }
+            else {
+                chip.tabIndex = -1;
+            }
+        }
+        if (!hasFocusedChip) {
+            chips[0]?.removeAttribute('tabindex');
+        }
+    }
+    handleSelected(event) {
+        if (!this.singleSelect) {
+            return;
+        }
+        if (event.target.selected === true) {
+            for (const chip of this.chips) {
+                if (chip !== event.target && chip.selected) {
+                    chip.selected = false;
+                }
+            }
+        }
+    }
+}
+_a = ChipSet;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__decorate([
+    property()
+], ChipSet.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'single-select' })
+], ChipSet.prototype, "singleSelect", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], ChipSet.prototype, "childElements", void 0);
+//# sourceMappingURL=chip-set.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-set.js","sourceRoot":"","sources":["chip-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * The type of chip a chip set controls.\n */\nexport type ChipSetType = 'assist'|'suggestion'|'filter'|'input'|'';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  get chips() {\n    return this.childElements.filter(\n        (child): child is Chip => child instanceof Chip);\n  }\n\n  @property() type: ChipSetType = '';\n  @property({type: Boolean, attribute: 'single-select'}) singleSelect = false;\n\n  @queryAssignedElements({flatten: true})\n  private readonly childElements!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('focusin', this.updateTabIndices.bind(this));\n      this.addEventListener('keydown', this.handleKeyDown.bind(this));\n      this.addEventListener('selected', this.handleSelected.bind(this));\n    }\n  }\n\n  protected override updated(changed: PropertyValues<this>) {\n    if (changed.has('singleSelect') && this.singleSelect) {\n      let hasSelectedChip = false;\n      for (const chip of this.chips as MaybeSelectableChip[]) {\n        if (chip.selected === true) {\n          if (!hasSelectedChip) {\n            hasSelectedChip = true;\n            continue;\n          }\n\n          chip.selected = false;\n        }\n      }\n    }\n  }\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    const isFilter = this.type === 'filter';\n    const role = isFilter ? 'listbox' : 'grid';\n    const multiselectable = isFilter ? !this.singleSelect : nothing;\n    return html`\n      <div class=\"content\"\n          role=${role}\n          aria-label=${ariaLabel || nothing}\n          aria-multiselectable=${multiselectable}>\n        <slot @slotchange=${this.updateTabIndices}></slot>\n      </div>\n    `;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    const isDown = event.key === 'ArrowDown';\n    const isUp = event.key === 'ArrowUp';\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    const isHome = event.key === 'Home';\n    const isEnd = event.key === 'End';\n    // Ignore non-navigation keys\n    if (!isLeft && !isRight && !isDown && !isUp && !isHome && !isEnd) {\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n\n    const {chips} = this as {chips: MaybeMultiActionChip[]};\n    // Don't try to select another chip if there aren't any.\n    if (chips.length < 2) {\n      return;\n    }\n\n    if (isHome || isEnd) {\n      const index = isHome ? 0 : chips.length - 1;\n      chips[index].focus({trailing: isEnd});\n      this.updateTabIndices();\n      return;\n    }\n\n    // Check if moving forwards or backwards\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n    const focusedChip = chips.find(chip => chip.matches(':focus-within'));\n    if (!focusedChip) {\n      // If there is not already a chip focused, select the first or last chip\n      // based on the direction we're traveling.\n      const nextChip = forwards ? chips[0] : chips[chips.length - 1];\n      nextChip.focus({trailing: !forwards});\n      this.updateTabIndices();\n      return;\n    }\n\n    const currentIndex = chips.indexOf(focusedChip);\n    let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;\n    // Search for the next sibling that is not disabled to select.\n    // If we return to the host index, there is nothing to select.\n    while (nextIndex !== currentIndex) {\n      if (nextIndex >= chips.length) {\n        // Return to start if moving past the last item.\n        nextIndex = 0;\n      } else if (nextIndex < 0) {\n        // Go to end if moving before the first item.\n        nextIndex = chips.length - 1;\n      }\n\n      // Check if the next sibling is disabled. If so,\n      // move the index and continue searching.\n      const nextChip = chips[nextIndex];\n      if (nextChip.disabled) {\n        if (forwards) {\n          nextIndex++;\n        } else {\n          nextIndex--;\n        }\n\n        continue;\n      }\n\n      nextChip.focus({trailing: !forwards});\n      this.updateTabIndices();\n      break;\n    }\n  }\n\n  private updateTabIndices() {\n    const {chips} = this;\n    let hasFocusedChip = false;\n    for (const chip of chips) {\n      if (chip.matches(':focus-within')) {\n        chip.removeAttribute('tabindex');\n        hasFocusedChip = true;\n      } else {\n        chip.tabIndex = -1;\n      }\n    }\n\n    if (!hasFocusedChip) {\n      chips[0]?.removeAttribute('tabindex');\n    }\n  }\n\n  private handleSelected(event: Event) {\n    if (!this.singleSelect) {\n      return;\n    }\n\n    if ((event.target as MaybeSelectableChip).selected === true) {\n      for (const chip of this.chips as MaybeSelectableChip[]) {\n        if (chip !== event.target && chip.selected) {\n          chip.selected = false;\n        }\n      }\n    }\n  }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n  focus(options?: FocusOptions&{trailing?: boolean}): void;\n}\n\ninterface MaybeSelectableChip extends Chip {\n  selected?: boolean;\n}\n"]}

package/chips/lib/chip.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, nothing, TemplateResult } from 'lit';
+/**
+ * A chip component.
+ */
+export declare abstract class Chip extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    disabled: boolean;
+    label: string;
+    /**
+     * The `id` of the action the primary focus ring and ripple are for.
+     */
+    protected abstract readonly primaryId: string;
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    protected get rippleDisabled(): boolean;
+    /**
+     * The aria role of the container. Defaults to `row` for grid chip sets.
+     * Listbox chip sets should remove this since they do not contain cells.
+     */
+    protected containerRole?: 'row';
+    protected render(): TemplateResult<1>;
+    protected getContainerClasses(): {
+        disabled: boolean;
+    };
+    protected renderActions(): typeof nothing | TemplateResult<2 | 1>;
+    protected renderActionCell(content: TemplateResult | typeof nothing): TemplateResult | typeof nothing;
+    protected abstract renderAction(): TemplateResult;
+    protected renderContent(): TemplateResult<1>;
+    protected renderOutline(): TemplateResult<1>;
+    protected renderLeadingIcon(): TemplateResult;
+}

package/chips/lib/chip.js

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+/**
+ * A chip component.
+ */
+export class Chip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = '';
+        /**
+         * The aria role of the container. Defaults to `row` for grid chip sets.
+         * Listbox chip sets should remove this since they do not contain cells.
+         */
+        this.containerRole = 'row';
+    }
+    /**
+     * Whether or not the primary ripple is disabled (defaults to `disabled`).
+     * Some chip actions such as links cannot be disabled.
+     */
+    get rippleDisabled() {
+        return this.disabled;
+    }
+    render() {
+        return html `
+      <div class="container ${classMap(this.getContainerClasses())}"
+          role=${this.containerRole || nothing}>
+        ${this.renderOutline()}
+        <md-focus-ring for=${this.primaryId}></md-focus-ring>
+        <md-ripple for=${this.primaryId}
+          ?disabled=${this.rippleDisabled}></md-ripple>
+        ${this.renderActions()}
+      </div>
+    `;
+    }
+    getContainerClasses() {
+        return {
+            disabled: this.disabled,
+        };
+    }
+    renderActions() {
+        return this.renderActionCell(this.renderAction());
+    }
+    renderActionCell(content) {
+        if (content === nothing) {
+            return content;
+        }
+        return html `<div class="cell" role="cell">${content}</div>`;
+    }
+    renderContent() {
+        return html `
+      <span class="leading icon" aria-hidden="true">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">${this.label}</span>
+      <span class="touch"></span>
+    `;
+    }
+    renderOutline() {
+        return html `<span class="outline"></span>`;
+    }
+    renderLeadingIcon() {
+        return html `<slot name="icon"></slot>`;
+    }
+}
+_a = Chip;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+/** @nocollapse */
+Chip.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ type: Boolean })
+], Chip.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Chip.prototype, "label", void 0);
+__decorate([
+    state()
+], Chip.prototype, "containerRole", 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,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAW6B,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;QAevB;;;WAGG;QACgB,kBAAa,GAAW,KAAK,CAAC;IAqDnD,CAAC;IAjEC;;;OAGG;IACH,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAQkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;iBACjD,IAAI,CAAC,aAAa,IAAI,OAAO;UACpC,IAAI,CAAC,aAAa,EAAE;6BACD,IAAI,CAAC,SAAS;yBAClB,IAAI,CAAC,SAAS;sBACjB,IAAI,CAAC,cAAc;UAC/B,IAAI,CAAC,aAAa,EAAE;;KAEzB,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACpD,CAAC;IAES,gBAAgB,CAAC,OACc;QACvC,IAAI,OAAO,KAAK,OAAO,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA,iCAAiC,OAAO,QAAQ,CAAC;IAC9D,CAAC;IAIS,aAAa;QACrB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;;;AAlFD;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,sBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAEyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAChC;IAAX,QAAQ,EAAE;mCAAY;AAmBd;IAAR,KAAK,EAAE;2CAAyC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  @property({type: Boolean}) disabled = false;\n  @property() label = '';\n\n  /**\n   * The `id` of the action the primary focus ring and ripple are for.\n   */\n  protected abstract readonly primaryId: string;\n\n  /**\n   * Whether or not the primary ripple is disabled (defaults to `disabled`).\n   * Some chip actions such as links cannot be disabled.\n   */\n  protected get rippleDisabled() {\n    return this.disabled;\n  }\n\n  /**\n   * The aria role of the container. Defaults to `row` for grid chip sets.\n   * Listbox chip sets should remove this since they do not contain cells.\n   */\n  @state() protected containerRole?: 'row' = 'row';\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\"\n          role=${this.containerRole || nothing}>\n        ${this.renderOutline()}\n        <md-focus-ring for=${this.primaryId}></md-focus-ring>\n        <md-ripple for=${this.primaryId}\n          ?disabled=${this.rippleDisabled}></md-ripple>\n        ${this.renderActions()}\n      </div>\n    `;\n  }\n\n  protected getContainerClasses() {\n    return {\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderActions() {\n    return this.renderActionCell(this.renderAction());\n  }\n\n  protected renderActionCell(content: TemplateResult|\n                             typeof nothing): TemplateResult|typeof nothing {\n    if (content === nothing) {\n      return content;\n    }\n\n    return html`<div class=\"cell\" role=\"cell\">${content}</div>`;\n  }\n\n  protected abstract renderAction(): TemplateResult;\n\n  protected renderContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">${this.label}</span>\n      <span class=\"touch\"></span>\n    `;\n  }\n\n  protected renderOutline() {\n    return html`<span class=\"outline\"></span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"icon\"></slot>`;\n  }\n}\n"]}

package/chips/lib/elevated-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 `.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-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)}/*# sourceMappingURL=elevated-styles.css.map */
+`;
+//# sourceMappingURL=elevated-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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`.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-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)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}

package/chips/lib/elevated-styles.scss

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