@material/web 2.5.0 → 2.5.1-nightly.efaa189.0

package/labs/gb/components/appbar/app-bar.scss

@@ -0,0 +1,167 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'app-bar-tokens';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.app-bar {
+  // Component tokens
+  .app-bar {
+    @include app-bar-tokens.root;
+  }
+  .app-bar-md {
+    @include app-bar-tokens.medium;
+  }
+  .app-bar-lg {
+    @include app-bar-tokens.large;
+  }
+  .app-bar-with-subtitle {
+    @include app-bar-tokens.with-subtitle;
+  }
+  .app-bar-with-subtitle.app-bar-lg {
+    @include app-bar-tokens.with-subtitle-large;
+  }
+  .app-bar-search {
+    @include app-bar-tokens.search;
+  }
+  .app-bar-scrolled {
+    @include app-bar-tokens.on-scroll;
+  }
+  .app-bar-scrolled.app-bar-search {
+    @include app-bar-tokens.on-scroll-search;
+  }
+
+  // Component styles
+  .app-bar {
+    box-sizing: border-box;
+    display: flex;
+    position: relative;
+    width: 100%;
+    min-height: var(--container-height);
+    background-color: var(--container-color);
+    border-radius: var(--container-shape);
+    box-shadow: var(--container-elevation);
+    color: var(--title-color);
+    transition:
+      background-color 200ms ease,
+      box-shadow 200ms ease,
+      min-height 200ms ease;
+    padding-inline: var(--leading-space) var(--trailing-space);
+  }
+
+  // Small and Search layouts (single row)
+  .app-bar-sm,
+  .app-bar-search {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // Medium and Large layouts (two rows)
+  .app-bar-md,
+  .app-bar-lg {
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
+
+    .app-bar-top-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      min-height: 64px;
+      width: 100%;
+    }
+
+    .app-bar-bottom-row {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding-bottom: 24px;
+      padding-inline: 12px;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  }
+
+  // Slot containers
+  .app-bar-leading,
+  .app-bar-trailing {
+    display: flex;
+    align-items: center;
+    gap: var(--icon-button-space);
+    flex-shrink: 0;
+  }
+
+  .app-bar-leading {
+    color: var(--leading-icon-color);
+  }
+
+  .app-bar-trailing {
+    color: var(--trailing-icon-color);
+  }
+
+  .app-bar-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .app-bar-sm .app-bar-title-wrapper {
+    margin-inline: 4px;
+  }
+
+  .app-bar-title {
+    margin: 0;
+    font: var(--title);
+    font-variation-settings: var(--title-axes);
+    letter-spacing: var(--title-tracking);
+    color: var(--title-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::slotted(*) {
+      margin: 0;
+      font: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+  }
+
+  .app-bar-subtitle {
+    margin: 0;
+    margin-top: 2px;
+    font: var(--subtitle);
+    font-variation-settings: var(--subtitle-axes);
+    letter-spacing: var(--subtitle-tracking);
+    color: var(--subtitle-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::slotted(*) {
+      margin: 0;
+      font: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+  }
+
+  .app-bar-search-container {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-width: 0;
+    margin-inline: 8px;
+  }
+}

package/labs/gb/components/appbar/md-gb-app-bar.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AppBarElement } from './app-bar-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design app bar component. */
+        'md-gb-app-bar': AppBarElement;
+    }
+}

package/labs/gb/components/appbar/md-gb-app-bar.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AppBarElement } from './app-bar-element.js';
+customElements.define('md-gb-app-bar', AppBarElement);
+//# sourceMappingURL=md-gb-app-bar.js.map

package/labs/gb/components/appbar/md-gb-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-app-bar.js","sourceRoot":"","sources":["md-gb-app-bar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAC;AASnD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AppBarElement} from './app-bar-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design app bar component. */\n    'md-gb-app-bar': AppBarElement;\n  }\n}\n\ncustomElements.define('md-gb-app-bar', AppBarElement);\n"]}

package/labs/gb/components/chip/_chip-tokens.scss

@@ -0,0 +1,167 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// Auto-generated by cascade_tokens
+// Add `// EDIT:` comments for manual adjustments.
+//
+// --prefix=md.comp.chip
+// --states="hovered|focused|pressed|dragged,:unselected|selected,:filter|input,with-leading-icon|with-avatar,with-trailing-icon,disabled"
+// --exclude=motion,state-layer,indicator
+
+@mixin root {
+  // LINT.IfChange
+  --avatar-opacity: unset;
+  // md.comp.chip.avatar.shape
+  --avatar-shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.avatar.size
+  --avatar-size: 24px;
+  --container-color: unset;
+  // md.comp.chip.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  // --container-opacity: unset; // EDIT: unused
+  // md.comp.chip.gap.horizontal
+  --gap-horizontal: var(--md-sys-space-50);
+  // md.comp.chip.height
+  --height: 32px;
+  // md.comp.chip.label-text
+  --label-text: var(--md-sys-typescale-label-lg);
+  // ┌┄ md.comp.chip.label-text
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
+  // md.comp.chip.unselected.label-text.color
+  --label-text-color: var(--md-sys-color-on-surface-variant);
+  // --label-text-opacity: unset; // EDIT: unused
+  // ┌┄ md.comp.chip.label-text
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // md.comp.chip.unselected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  // --leading-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.leading-icon.size
+  --leading-icon-size: 18px;
+  // md.comp.chip.unselected.outline.color
+  --outline-color: var(--md-sys-color-outline-variant);
+  // --outline-opacity: unset; // EDIT: unused
+  // md.comp.chip.unselected.outline.width
+  --outline-width: 1px;
+  // md.comp.chip.padding.bottom
+  --padding-bottom: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.leading
+  --padding-leading: var(--md-sys-space-200);
+  // md.comp.chip.padding.top
+  --padding-top: var(--md-sys-space-75);
+  // ┌ md.comp.chip.filter.padding.trailing
+  --padding-trailing: var(--md-sys-space-200);
+  // md.comp.chip.unselected.shape
+  --shape: var(--md-sys-shape-corner-md);
+  // md.comp.chip.unselected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  // --trailing-icon-opacity: unset; // EDIT: unused
+  // md.comp.chip.trailing-icon.size
+  --trailing-icon-size: 18px;
+  // LINT.ThenChange(md-gb-chip.ts) sync with `@cssprop` jsdoc tags
+}
+
+@mixin pressed {
+  // md.comp.chip.pressed.shape
+  --shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin dragged {
+  // md.comp.chip.dragged.container.elevation
+  --container-elevation: var(--md-sys-elevation-shadow-4);
+}
+
+@mixin selected {
+  // md.comp.chip.selected.container.color
+  --container-color: var(--md-sys-color-secondary-container);
+  // md.comp.chip.selected.label-text.color
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.leading-icon.color
+  --leading-icon-color: var(--md-sys-color-on-secondary-container);
+  // md.comp.chip.selected.outline.width
+  --outline-width: 0px;
+  // md.comp.chip.selected.shape
+  --shape: var(--md-sys-shape-corner-full);
+  // md.comp.chip.selected.trailing-icon.color
+  --trailing-icon-color: var(--md-sys-color-on-secondary-container);
+}
+
+@mixin input {
+  // md.comp.chip.input.padding.leading
+  --padding-leading: var(--md-sys-space-150);
+  // md.comp.chip.input.padding.trailing
+  --padding-trailing: var(--md-sys-space-150);
+}
+
+@mixin with-leading-icon {
+  // md.comp.chip.with-leading-icon.padding.leading
+  --padding-leading: var(--md-sys-space-100);
+}
+
+@mixin with-avatar {
+  // md.comp.chip.with-avatar.padding.leading
+  --padding-leading: var(--md-sys-space-50);
+}
+
+@mixin with-trailing-icon {
+  // md.comp.chip.with-trailing-icon.padding.trailing
+  --padding-trailing: var(--md-sys-space-100);
+}
+
+@mixin disabled {
+  // md.comp.chip.disabled.avatar.opacity
+  --avatar-opacity: 0.38;
+  // ┌ md.comp.chip.disabled.label-text.opacity
+  // md.comp.chip.disabled.label-text.color
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.disabled.leading-icon.opacity
+  // md.comp.chip.disabled.leading-icon.color
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+  // ┌ md.comp.chip.unselected.disabled.outline.opacity
+  // md.comp.chip.unselected.disabled.outline.color
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);
+  // ┌ md.comp.chip.disabled.trailing-icon.opacity
+  // md.comp.chip.disabled.trailing-icon.color
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);
+}
+
+@mixin disabled-selected {
+  // ┌ md.comp.chip.selected.disabled.container.opacity
+  // md.comp.chip.selected.disabled.container.color
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.12);
+}
+
+// EDIT: Manual adjustments
+@mixin filter {
+  // Hoisted to root, so empty here to satisfy chip.scss mapping
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-width: 0;
+}
+
+@mixin tonal {
+  --container-color: var(--md-sys-color-secondary-container);
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-secondary-container);
+  --outline-width: 0;
+}
+
+@mixin outlined {
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --label-text-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-outline);
+  --outline-width: 1px;
+}

package/labs/gb/components/chip/chip-element.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type ChipColor, type ChipType } from './chip.js';
+/**
+ * A Material Design Expressive Chip component (`md-gb-chip`).
+ *
+ * @slot - Used to display the chip label text.
+ * @slot icon - Used to display an optional leading icon, checkmark, or avatar.
+ * @slot remove-icon - Used to display the trailing remove button icon when `removable="true"`.
+ * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed
+ * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles
+ * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed
+ * @csspart chip - The root container element.
+ * @cssprop --avatar-opacity
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-opacity
+ * @cssprop --gap-horizontal
+ * @cssprop --height
+ * @cssprop --label-text
+ * @cssprop --label-text-color
+ * @cssprop --label-text-opacity
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-opacity
+ * @cssprop --leading-icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-opacity
+ * @cssprop --outline-width
+ * @cssprop --padding-bottom
+ * @cssprop --padding-leading
+ * @cssprop --padding-top
+ * @cssprop --padding-trailing
+ * @cssprop --shape
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-opacity
+ * @cssprop --trailing-icon-size
+ */
+export declare class ChipElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    /** The color emphasis of the chip. Defaults to `outlined`. */
+    color: ChipColor;
+    /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */
+    type: ChipType;
+    /** Whether the filter or toggle chip is selected. */
+    selected: boolean;
+    /** Whether the chip is removable. */
+    removable: boolean;
+    /** Whether the chip is disabled. */
+    disabled: boolean;
+    /** Whether the chip is soft-disabled (`aria-disabled="true"` while preserving focusability). */
+    softDisabled: boolean;
+    /** The URL destination if `type="link"` or if `href` is set. */
+    href: string;
+    /** Where to display the linked `href` URL for a link chip. */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    private hasLeadingIcon;
+    private hasAvatar;
+    private hasRemoveIcon;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private renderLeadingIcon;
+    private renderRemoveButton;
+    private handleIconSlotChange;
+    private handleRemoveIconSlotChange;
+    private handleChange;
+    private handleRemove;
+}

package/labs/gb/components/chip/chip-element.js

@@ -0,0 +1,233 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
+import focusRingStyles from '../focus/focus-ring.cssresult.js';
+import rippleStyles from '../ripple/ripple.cssresult.js';
+import { chip } from './chip.js';
+import { styles as chipStyles } from './chip.cssresult.js';
+/**
+ * A Material Design Expressive Chip component (`md-gb-chip`).
+ *
+ * @slot - Used to display the chip label text.
+ * @slot icon - Used to display an optional leading icon, checkmark, or avatar.
+ * @slot remove-icon - Used to display the trailing remove button icon when `removable="true"`.
+ * @fires {Event} remove - Fired when the remove action is triggered on a removable chip. --bubbles --composed
+ * @fires {Event} change - Fired when a filter/toggle chip's selection state changes. --bubbles
+ * @fires {InputEvent} input - Fired when a filter/toggle chip's selection state changes. --bubbles --composed
+ * @csspart chip - The root container element.
+ * @cssprop --avatar-opacity
+ * @cssprop --avatar-shape
+ * @cssprop --avatar-size
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-opacity
+ * @cssprop --gap-horizontal
+ * @cssprop --height
+ * @cssprop --label-text
+ * @cssprop --label-text-color
+ * @cssprop --label-text-opacity
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-opacity
+ * @cssprop --leading-icon-size
+ * @cssprop --outline-color
+ * @cssprop --outline-opacity
+ * @cssprop --outline-width
+ * @cssprop --padding-bottom
+ * @cssprop --padding-leading
+ * @cssprop --padding-top
+ * @cssprop --padding-trailing
+ * @cssprop --shape
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-opacity
+ * @cssprop --trailing-icon-size
+ */
+export class ChipElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The color emphasis of the chip. Defaults to `outlined`. */
+        this.color = 'outlined';
+        /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */
+        this.type = 'action';
+        /** Whether the filter or toggle chip is selected. */
+        this.selected = false;
+        /** Whether the chip is removable. */
+        this.removable = false;
+        /** Whether the chip is disabled. */
+        this.disabled = false;
+        /** Whether the chip is soft-disabled (`aria-disabled="true"` while preserving focusability). */
+        this.softDisabled = false;
+        /** The URL destination if `type="link"` or if `href` is set. */
+        this.href = '';
+        /** Where to display the linked `href` URL for a link chip. */
+        this.target = '';
+        this.hasLeadingIcon = false;
+        this.hasAvatar = false;
+        this.hasRemoveIcon = false;
+    }
+    render() {
+        const isFilterSelected = (this.type === 'filter' || this.type === 'toggle') && this.selected;
+        const withLeadingIcon = this.hasLeadingIcon || isFilterSelected;
+        const withAvatar = this.hasAvatar;
+        const chipClasses = chip({
+            color: this.color,
+            type: this.href ? 'link' : this.type,
+            selected: this.selected,
+            removable: this.removable,
+            disabled: this.softDisabled || this.disabled,
+            withLeadingIcon: withLeadingIcon && !withAvatar,
+            withAvatar,
+            withTrailingIcon: this.removable || this.hasRemoveIcon,
+        });
+        if (this.href || this.type === 'link') {
+            return html `<a
+        part="chip"
+        class="${chipClasses}"
+        href=${this.href}
+        target=${this.target ||
+                nothing}
+        aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}
+        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
+        ${this.renderContent(withLeadingIcon, isFilterSelected)}
+      </a>`;
+        }
+        if (this.removable) {
+            return html `<div
+        part="chip"
+        class="${chipClasses}"
+        role="row"
+        aria-pressed=${this.type === 'filter' || this.type === 'toggle'
+                ? (this.selected ? 'true' : 'false')
+                : nothing}
+        @change=${this.handleChange}>
+        <button
+          class="chip-action focus-ring-target"
+          type="button"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.softDisabled ? 'true' : nothing}>
+          ${this.renderContent(withLeadingIcon, isFilterSelected)}
+        </button>
+        ${this.renderRemoveButton()}
+      </div>`;
+        }
+        return html `<button
+      part="chip"
+      class="${chipClasses}"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled ? 'true' : nothing}
+      aria-pressed=${this.type === 'filter' || this.type === 'toggle'
+            ? (this.selected ? 'true' : 'false')
+            : nothing}
+      @change=${this.handleChange}>
+      ${this.renderContent(withLeadingIcon, isFilterSelected)}
+    </button>`;
+    }
+    renderContent(withLeadingIcon, isFilterSelected) {
+        return html `
+      ${this.renderLeadingIcon(withLeadingIcon, isFilterSelected)}
+      <slot></slot>
+    `;
+    }
+    renderLeadingIcon(withLeadingIcon, isFilterSelected) {
+        return html `<span
+      class="chip-icon"
+      style="${withLeadingIcon ? '' : 'display: none;'}">
+      <slot name="icon" @slotchange=${this.handleIconSlotChange}>
+        ${isFilterSelected ? html `✓` : nothing}
+      </slot>
+    </span>`;
+    }
+    renderRemoveButton() {
+        return html `<button
+      class="chip-remove focus-ring-outer"
+      type="button"
+      aria-label="Remove"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled ? 'true' : nothing}
+      @click=${this.handleRemove}>
+      <slot
+        name="remove-icon"
+        @slotchange=${this.handleRemoveIconSlotChange}
+        >✕</slot
+      >
+    </button>`;
+    }
+    handleIconSlotChange(event) {
+        const slot = event.target;
+        const elements = slot.assignedElements({ flatten: true });
+        this.hasLeadingIcon = elements.length > 0;
+        this.hasAvatar = elements.some((el) => el.classList.contains('chip-avatar'));
+    }
+    handleRemoveIconSlotChange(event) {
+        const slot = event.target;
+        this.hasRemoveIcon = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    handleChange(event) {
+        this.selected = event.target.ariaPressed === 'true';
+        redispatchEvent(this, event);
+    }
+    handleRemove(event) {
+        event.stopPropagation();
+        if (this.disabled || this.softDisabled)
+            return;
+        this.dispatchEvent(new Event('remove', { bubbles: true, composed: true }));
+    }
+}
+ChipElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    chipStyles,
+    css `
+      :host {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+      .chip {
+        flex: 1;
+      }
+      .chip-icon {
+        display: inline-flex;
+        align-items: center;
+      }
+    `,
+];
+__decorate([
+    property()
+], ChipElement.prototype, "color", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChipElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], ChipElement.prototype, "softDisabled", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "href", void 0);
+__decorate([
+    property()
+], ChipElement.prototype, "target", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasAvatar", void 0);
+__decorate([
+    state()
+], ChipElement.prototype, "hasRemoveIcon", void 0);
+//# sourceMappingURL=chip-element.js.map