@material/web 1.0.0-pre.8 → 1.0.0

package/chips/internal/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} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A chip set component.\n */\nexport class ChipSet extends LitElement {\n  static {\n    setupHostAria(ChipSet, {focusable: false});\n  }\n\n  get chips() {\n    return this.childElements.filter(\n        (child): child is Chip => child instanceof Chip);\n  }\n\n  @queryAssignedElements() private readonly childElements!: HTMLElement[];\n  private readonly internals = polyfillElementInternalsAria(\n      this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('focusin', this.updateTabIndices.bind(this));\n      this.addEventListener('update-focus', this.updateTabIndices.bind(this));\n      this.addEventListener('keydown', this.handleKeyDown.bind(this));\n      this.internals.role = 'toolbar';\n    }\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this.updateTabIndices}></slot>`;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\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 && !isHome && !isEnd) {\n      return;\n    }\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    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\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 : isRight;\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      //\n      // Some toolbar items may be focusable when disabled for increased\n      // visibility.\n      const nextChip = chips[nextIndex];\n      if (nextChip.disabled && !nextChip.alwaysFocusable) {\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    // The chip that should be focusable is either the chip that currently has\n    // focus or the first chip that can be focused.\n    const {chips} = this;\n    let chipToFocus: Chip|undefined;\n    for (const chip of chips) {\n      const isChipFocusable = chip.alwaysFocusable || !chip.disabled;\n      const chipIsFocused = chip.matches(':focus-within');\n      if (chipIsFocused && isChipFocusable) {\n        // Found the first chip that is actively focused. This overrides the\n        // first focusable chip found.\n        chipToFocus = chip;\n        continue;\n      }\n\n      if (isChipFocusable && !chipToFocus) {\n        chipToFocus = chip;\n      }\n\n      // Disable non-focused chips. If we disable all of them, we'll grant focus\n      // to the first focusable child that was found.\n      chip.tabIndex = -1;\n    }\n\n    if (chipToFocus) {\n      chipToFocus.tabIndex = 0;\n    }\n  }\n}\n\ninterface MaybeMultiActionChip extends Chip {\n  focus(options?: FocusOptions&{trailing?: boolean}): void;\n}\n"]}

package/chips/internal/chip.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/**
+ * A chip component.
+ */
+export declare abstract class Chip extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Whether or not the chip is disabled.
+     *
+     * Disabled chips are not focusable, unless `always-focusable` is set.
+     */
+    disabled: boolean;
+    /**
+     * When true, allow disabled chips to be focused with arrow keys.
+     *
+     * Add this when a chip needs increased visibility when disabled. See
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+     * for more guidance on when this is needed.
+     */
+    alwaysFocusable: boolean;
+    /**
+     * The label of the chip.
+     */
+    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;
+    focus(options?: FocusOptions): void;
+    protected render(): TemplateResult<1>;
+    protected updated(changed: PropertyValues<Chip>): void;
+    protected getContainerClasses(): ClassInfo;
+    protected renderContainerContent(): TemplateResult<1>;
+    protected renderOutline(): TemplateResult<1>;
+    protected renderLeadingIcon(): TemplateResult;
+    protected abstract renderPrimaryAction(content: unknown): unknown;
+    private renderPrimaryContent;
+}

package/chips/internal/chip.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, LitElement } from 'lit';
+import { property } 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);
+        /**
+         * Whether or not the chip is disabled.
+         *
+         * Disabled chips are not focusable, unless `always-focusable` is set.
+         */
+        this.disabled = false;
+        /**
+         * When true, allow disabled chips to be focused with arrow keys.
+         *
+         * Add this when a chip needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.alwaysFocusable = false;
+        /**
+         * The label of the chip.
+         */
+        this.label = '';
+    }
+    /**
+     * 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;
+    }
+    focus(options) {
+        if (this.disabled && !this.alwaysFocusable) {
+            return;
+        }
+        super.focus(options);
+    }
+    render() {
+        return html `
+      <div class="container ${classMap(this.getContainerClasses())}">
+        ${this.renderContainerContent()}
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('disabled') && changed.get('disabled') !== undefined) {
+            this.dispatchEvent(new Event('update-focus', { bubbles: true }));
+        }
+    }
+    getContainerClasses() {
+        return {
+            'disabled': this.disabled,
+        };
+    }
+    renderContainerContent() {
+        return html `
+      ${this.renderOutline()}
+      <md-focus-ring part="focus-ring"
+          for=${this.primaryId}></md-focus-ring>
+      <md-ripple for=${this.primaryId}
+          ?disabled=${this.rippleDisabled}></md-ripple>
+      ${this.renderPrimaryAction(this.renderPrimaryContent())}
+    `;
+    }
+    renderOutline() {
+        return html `<span class="outline"></span>`;
+    }
+    renderLeadingIcon() {
+        return html `<slot name="icon"></slot>`;
+    }
+    renderPrimaryContent() {
+        return html `
+      <span class="leading icon" aria-hidden="true">
+        ${this.renderLeadingIcon()}
+      </span>
+      <span class="label">${this.label}</span>
+      <span class="touch"></span>
+    `;
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Chip);
+})();
+/** @nocollapse */
+Chip.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ type: Boolean })
+], Chip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'always-focusable' })
+], Chip.prototype, "alwaysFocusable", void 0);
+__decorate([
+    property()
+], Chip.prototype, "label", void 0);
+//# sourceMappingURL=chip.js.map

package/chips/internal/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,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAE1E;;GAEG;AACH,MAAM,OAAgB,IAAK,SAAQ,UAAU;IAA7C;;QAWE;;;;WAIG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;;;;;WAMG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;IAyEzB,CAAC;IAlEC;;;OAGG;IACH,IAAc,cAAc;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEQ,KAAK,CAAC,OAAsB;QACnC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YAC1C,OAAO;SACR;QAED,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;UACxD,IAAI,CAAC,sBAAsB,EAAE;;KAElC,CAAC;IACJ,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,EAAE;YACpE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,cAAc,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;SAChE;IACH,CAAC;IAES,mBAAmB;QAC3B,OAAO;YACL,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;IACJ,CAAC;IAES,sBAAsB;QAC9B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;;gBAEZ,IAAI,CAAC,SAAS;uBACP,IAAI,CAAC,SAAS;sBACf,IAAI,CAAC,cAAc;QACjC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACxD,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAES,iBAAiB;QACzB,OAAO,IAAI,CAAA,2BAA2B,CAAC;IACzC,CAAC;IAIO,oBAAoB;QAC1B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,iBAAiB,EAAE;;4BAEN,IAAI,CAAC,KAAK;;KAEjC,CAAC;IACJ,CAAC;;AAtGD;IACE,yBAAyB,CAAC,IAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,sBAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAOyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAkB;AAU5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAC,CAAC;6CACjC;AAKZ;IAAX,QAAQ,EAAE;mCAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * A chip component.\n */\nexport abstract class Chip extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Chip);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Whether or not the chip is disabled.\n   *\n   * Disabled chips are not focusable, unless `always-focusable` is set.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * When true, allow disabled chips to be focused with arrow keys.\n   *\n   * Add this when a chip needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'always-focusable'})\n  alwaysFocusable = false;\n\n  /**\n   * The label of the chip.\n   */\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  override focus(options?: FocusOptions) {\n    if (this.disabled && !this.alwaysFocusable) {\n      return;\n    }\n\n    super.focus(options);\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"container ${classMap(this.getContainerClasses())}\">\n        ${this.renderContainerContent()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Chip>) {\n    if (changed.has('disabled') && changed.get('disabled') !== undefined) {\n      this.dispatchEvent(new Event('update-focus', {bubbles: true}));\n    }\n  }\n\n  protected getContainerClasses(): ClassInfo {\n    return {\n      'disabled': this.disabled,\n    };\n  }\n\n  protected renderContainerContent() {\n    return html`\n      ${this.renderOutline()}\n      <md-focus-ring part=\"focus-ring\"\n          for=${this.primaryId}></md-focus-ring>\n      <md-ripple for=${this.primaryId}\n          ?disabled=${this.rippleDisabled}></md-ripple>\n      ${this.renderPrimaryAction(this.renderPrimaryContent())}\n    `;\n  }\n\n  protected renderOutline() {\n    return html`<span class=\"outline\"></span>`;\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"icon\"></slot>`;\n  }\n\n  protected abstract renderPrimaryAction(content: unknown): unknown;\n\n  private renderPrimaryContent() {\n    return html`\n      <span class=\"leading icon\" aria-hidden=\"true\">\n        ${this.renderLeadingIcon()}\n      </span>\n      <span class=\"label\">${this.label}</span>\n      <span class=\"touch\"></span>\n    `;\n  }\n}\n"]}

package/chips/internal/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)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}}/*# sourceMappingURL=elevated-styles.css.map */
+`;
+//# sourceMappingURL=elevated-styles.css.js.map

package/chips/internal/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)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import { nothing } from 'lit';
+import { MultiActionChip } from './multi-action-chip.js';
+/**
+ * A filter chip component.
+ */
+export declare class FilterChip extends MultiActionChip {
+    elevated: boolean;
+    removable: boolean;
+    selected: boolean;
+    protected get primaryId(): string;
+    protected readonly primaryAction: HTMLElement | null;
+    protected readonly trailingAction: HTMLElement | null;
+    protected getContainerClasses(): {
+        elevated: boolean;
+        selected: boolean;
+        'has-trailing': boolean;
+    };
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1>;
+    protected renderLeadingIcon(): import("lit-html").TemplateResult;
+    protected renderTrailingAction(focusListener: EventListener): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
+    private handleClick;
+}

package/chips/internal/filter-chip.js

@@ -0,0 +1,98 @@
+/**
+ * @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, query } from 'lit/decorators.js';
+import { redispatchEvent } from '../../internal/controller/events.js';
+import { MultiActionChip } from './multi-action-chip.js';
+import { renderRemoveButton } from './trailing-icons.js';
+/**
+ * A filter chip component.
+ */
+export class FilterChip extends MultiActionChip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.removable = false;
+        this.selected = false;
+    }
+    get primaryId() {
+        return 'button';
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            elevated: this.elevated,
+            selected: this.selected,
+            'has-trailing': this.removable,
+        };
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        return html `
+      <button class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        aria-pressed=${this.selected}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        @click=${this.handleClick}
+      >${content}</button>
+    `;
+    }
+    renderLeadingIcon() {
+        if (!this.selected) {
+            return super.renderLeadingIcon();
+        }
+        return html `
+      <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+        <path d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+      </svg>
+    `;
+    }
+    renderTrailingAction(focusListener) {
+        if (this.removable) {
+            return renderRemoveButton({
+                focusListener,
+                ariaLabel: this.ariaLabelRemove,
+                disabled: this.disabled
+            });
+        }
+        return nothing;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return html `<md-elevation></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        const preventDefault = !redispatchEvent(this, event);
+        if (preventDefault) {
+            return;
+        }
+        this.selected = !this.selected;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], FilterChip.prototype, "elevated", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterChip.prototype, "selected", void 0);
+__decorate([
+    query('.primary.action')
+], FilterChip.prototype, "primaryAction", void 0);
+__decorate([
+    query('.trailing.action')
+], FilterChip.prototype, "trailingAction", void 0);
+//# sourceMappingURL=filter-chip.js.map

package/chips/internal/filter-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAEpE,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AAEvD;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,eAAe;IAA/C;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QACH,aAAQ,GAAG,KAAK,CAAC;IA4E7D,CAAC;IA1EC,IAAc,SAAS;QACrB,OAAO,QAAQ,CAAC;IAClB,CAAC;IAMkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,IAAI,CAAC,SAAS;SAC/B,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;qBAGM,SAAS,IAAI,OAAO;uBAClB,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;iBACzC,IAAI,CAAC,WAAW;SACxB,OAAO;KACX,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAEkB,oBAAoB,CAAC,aAA4B;QAClE,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,kBAAkB,CAAC;gBACxB,aAAa;gBACb,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;SACJ;QAED,OAAO,OAAO,CAAC;IACjB,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;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,IAAI,cAAc,EAAE;YAClB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;CACF;AA9E4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAmB;AACH;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAMd;IAA5C,KAAK,CAAC,iBAAiB,CAAC;iDAAqD;AAE3D;IADlB,KAAK,CAAC,kBAAkB,CAAC;kDAC2B","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, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action') protected readonly primaryAction!: HTMLElement|null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement|null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n      >${content}</button>\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n        <path d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n      </svg>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled\n      });\n    }\n\n    return nothing;\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  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n}\n"]}

package/chips/internal/filter-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-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}}/*# sourceMappingURL=filter-styles.css.map */
+`;
+//# sourceMappingURL=filter-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-styles.css.js","sourceRoot":"","sources":["filter-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-filter-chip-container-height, 32px);--_container-shape: var(--md-filter-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-filter-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filter-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filter-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filter-chip-container-shape-end-start, var(--_container-shape) )}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}}/*# sourceMappingURL=filter-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MultiActionChip } from './multi-action-chip.js';
+/**
+ * An input chip component.
+ */
+export declare class InputChip extends MultiActionChip {
+    avatar: boolean;
+    href: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    removeOnly: boolean;
+    selected: boolean;
+    protected get primaryId(): "" | "link" | "button";
+    protected get rippleDisabled(): boolean;
+    protected get primaryAction(): HTMLElement;
+    protected readonly trailingAction: HTMLElement | null;
+    protected getContainerClasses(): {
+        avatar: boolean;
+        disabled: boolean;
+        link: boolean;
+        selected: boolean;
+        'has-trailing': boolean;
+    };
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1>;
+    protected renderTrailingAction(focusListener: EventListener): import("lit-html").TemplateResult<1>;
+}

package/chips/internal/input-chip.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { MultiActionChip } from './multi-action-chip.js';
+import { renderRemoveButton } from './trailing-icons.js';
+/**
+ * An input chip component.
+ */
+export class InputChip extends MultiActionChip {
+    constructor() {
+        super(...arguments);
+        this.avatar = false;
+        this.href = '';
+        this.target = '';
+        this.removeOnly = false;
+        this.selected = false;
+    }
+    get primaryId() {
+        if (this.href) {
+            return 'link';
+        }
+        if (this.removeOnly) {
+            return '';
+        }
+        return 'button';
+    }
+    get rippleDisabled() {
+        // Link chips cannot be disabled
+        return !this.href && this.disabled;
+    }
+    get primaryAction() {
+        // Don't use @query() since a remove-only input chip still has a span that
+        // has "primary action" classes.
+        if (this.removeOnly) {
+            return null;
+        }
+        return this.renderRoot.querySelector('.primary.action');
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            avatar: this.avatar,
+            // Link chips cannot be disabled
+            disabled: !this.href && this.disabled,
+            link: !!this.href,
+            selected: this.selected,
+            'has-trailing': true,
+        };
+    }
+    renderPrimaryAction(content) {
+        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}
+        >${content}</a>
+      `;
+        }
+        if (this.removeOnly) {
+            return html `
+        <span class="primary action" aria-label=${ariaLabel || nothing}>
+          ${content}
+        </span>
+      `;
+        }
+        return html `
+      <button class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        type="button"
+      >${content}</button>
+    `;
+    }
+    renderTrailingAction(focusListener) {
+        return renderRemoveButton({
+            focusListener,
+            ariaLabel: this.ariaLabelRemove,
+            disabled: !this.href && this.disabled,
+            tabbable: this.removeOnly,
+        });
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], InputChip.prototype, "avatar", void 0);
+__decorate([
+    property()
+], InputChip.prototype, "href", void 0);
+__decorate([
+    property()
+], InputChip.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'remove-only' })
+], InputChip.prototype, "removeOnly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], InputChip.prototype, "selected", void 0);
+__decorate([
+    query('.trailing.action')
+], InputChip.prototype, "trailingAction", void 0);
+//# sourceMappingURL=input-chip.js.map

package/chips/internal/input-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.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, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * An input chip component.\n */\nexport class InputChip extends MultiActionChip {\n  @property({type: Boolean}) avatar = false;\n  @property() href = '';\n  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n  @property({type: Boolean, attribute: 'remove-only'}) removeOnly = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    if (this.href) {\n      return 'link';\n    }\n\n    if (this.removeOnly) {\n      return '';\n    }\n\n    return 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && this.disabled;\n  }\n\n  protected get primaryAction() {\n    // Don't use @query() since a remove-only input chip still has a span that\n    // has \"primary action\" classes.\n    if (this.removeOnly) {\n      return null;\n    }\n\n    return this.renderRoot.querySelector<HTMLElement>('.primary.action');\n  }\n\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement|null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      avatar: this.avatar,\n      // Link chips cannot be disabled\n      disabled: !this.href && this.disabled,\n      link: !!this.href,\n      selected: this.selected,\n      'has-trailing': true,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\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        >${content}</a>\n      `;\n    }\n\n    if (this.removeOnly) {\n      return html`\n        <span class=\"primary action\" aria-label=${ariaLabel || nothing}>\n          ${content}\n        </span>\n      `;\n    }\n\n    return html`\n      <button class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n      >${content}</button>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    return renderRemoveButton({\n      focusListener,\n      ariaLabel: this.ariaLabelRemove,\n      disabled: !this.href && this.disabled,\n      tabbable: this.removeOnly,\n    });\n  }\n}\n"]}

package/chips/internal/input-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-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */
+`;
+//# sourceMappingURL=input-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-styles.css.js","sourceRoot":"","sources":["input-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-input-chip-container-height, 32px);--_container-shape: var(--md-input-chip-container-shape, 8px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, 9999px);--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--_container-shape) )}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}/*# sourceMappingURL=input-styles.css.map */\n`;\n "]}

package/chips/internal/input-styles.scss

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

package/chips/internal/multi-action-chip.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * A chip component with multiple actions.
+ */
+export declare abstract class MultiActionChip extends Chip {
+    get ariaLabelRemove(): string;
+    set ariaLabelRemove(ariaLabel: string | null);
+    protected abstract readonly primaryAction: HTMLElement | null;
+    protected abstract readonly trailingAction: HTMLElement | null;
+    constructor();
+    focus(options?: FocusOptions & {
+        trailing?: boolean;
+    }): void;
+    protected renderContainerContent(): import("lit-html").TemplateResult<1>;
+    protected abstract renderTrailingAction(focusListener: EventListener): unknown;
+    private handleKeyDown;
+    private handleTrailingActionFocus;
+}