@material/web 2.5.0 → 2.5.1-nightly.70e259d.0

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClassMapDirective } from '../shared/directives.js';
+/** App Bar size configurations. */
+export const APP_BAR_SIZES = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+};
+/** App Bar variant configurations. */
+export const APP_BAR_VARIANTS = {
+    standard: 'standard',
+    search: 'search',
+};
+/** App Bar classes. */
+export const APP_BAR_CLASSES = {
+    appBar: 'app-bar',
+    appBarSm: 'app-bar-sm',
+    appBarMd: 'app-bar-md',
+    appBarLg: 'app-bar-lg',
+    appBarWithSubtitle: 'app-bar-with-subtitle',
+    appBarSearch: 'app-bar-search',
+    appBarScrolled: 'app-bar-scrolled',
+};
+/**
+ * Returns the app bar classes to apply to an element based on the given state.
+ *
+ * @param state The state of the app bar.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function appBarClasses({ size = 'sm', withSubtitle = false, variant = 'standard', scrolled = false, } = {}) {
+    return {
+        [APP_BAR_CLASSES.appBar]: true,
+        [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,
+        [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,
+        [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,
+        [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,
+        [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,
+        [APP_BAR_CLASSES.appBarScrolled]: scrolled,
+    };
+}
+/**
+ * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.
+ *
+ * @param appBar The element on which to set up app bar functionality.
+ * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.
+ */
+export function setupAppBar(appBar, opts) {
+    if (!opts?.scrollTarget) {
+        return;
+    }
+    const target = opts.scrollTarget;
+    const signal = opts.signal;
+    const onScroll = () => {
+        if (signal?.aborted)
+            return;
+        let scrollTop = 0;
+        if (target instanceof Window) {
+            scrollTop = target.scrollY || target.document.documentElement.scrollTop;
+        }
+        else if (target instanceof HTMLElement) {
+            scrollTop = target.scrollTop;
+        }
+        const isScrolled = scrollTop > 0;
+        const wasScrolled = appBar.classList.contains(APP_BAR_CLASSES.appBarScrolled);
+        if (isScrolled !== wasScrolled) {
+            appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);
+            appBar.dispatchEvent(new CustomEvent('scrollstatechange', {
+                bubbles: true,
+                composed: true,
+                detail: { scrolled: isScrolled },
+            }));
+        }
+    };
+    target.addEventListener('scroll', onScroll, { passive: true, signal });
+    onScroll();
+}
+/**
+ * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${appBar({size: 'md', scrolled: true})}">
+ *   <div class="app-bar-top-row">...</div>
+ *   <div class="app-bar-bottom-row">...</div>
+ * </div>`;
+ * ```
+ */
+export const appBar = createClassMapDirective({
+    getClasses: appBarClasses,
+    setupElement: setupAppBar,
+});
+//# sourceMappingURL=app-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["app-bar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\nimport {createClassMapDirective} from '../shared/directives.js';\n\n/** App Bar size configuration types. */\nexport type AppBarSize = 'sm' | 'md' | 'lg';\n\n/** App Bar size configurations. */\nexport const APP_BAR_SIZES = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\n/** App Bar variant configuration types. */\nexport type AppBarVariant = 'standard' | 'search';\n\n/** App Bar variant configurations. */\nexport const APP_BAR_VARIANTS = {\n  standard: 'standard',\n  search: 'search',\n} as const;\n\n/** App Bar classes. */\nexport const APP_BAR_CLASSES = {\n  appBar: 'app-bar',\n  appBarSm: 'app-bar-sm',\n  appBarMd: 'app-bar-md',\n  appBarLg: 'app-bar-lg',\n  appBarWithSubtitle: 'app-bar-with-subtitle',\n  appBarSearch: 'app-bar-search',\n  appBarScrolled: 'app-bar-scrolled',\n} as const;\n\n/** The state provided to the `appBarClasses()` function. */\nexport interface AppBarClassesState {\n  /** The size of the app bar (`sm`, `md`, `lg`). */\n  size?: AppBarSize;\n  /** Whether the app bar has a subtitle. */\n  withSubtitle?: boolean;\n  /** The behavior variant (`standard` or `search`). */\n  variant?: AppBarVariant;\n  /** Whether the app bar is in a scrolled or docked state (`.app-bar-scrolled`). */\n  scrolled?: boolean;\n}\n\n/**\n * Returns the app bar classes to apply to an element based on the given state.\n *\n * @param state The state of the app bar.\n * @return An object of class names and truthy values if they apply.\n */\nexport function appBarClasses({\n  size = 'sm',\n  withSubtitle = false,\n  variant = 'standard',\n  scrolled = false,\n}: AppBarClassesState = {}): ClassInfo {\n  return {\n    [APP_BAR_CLASSES.appBar]: true,\n    [APP_BAR_CLASSES.appBarSm]: size === APP_BAR_SIZES.sm || !size,\n    [APP_BAR_CLASSES.appBarMd]: size === APP_BAR_SIZES.md,\n    [APP_BAR_CLASSES.appBarLg]: size === APP_BAR_SIZES.lg,\n    [APP_BAR_CLASSES.appBarWithSubtitle]: withSubtitle,\n    [APP_BAR_CLASSES.appBarSearch]: variant === APP_BAR_VARIANTS.search,\n    [APP_BAR_CLASSES.appBarScrolled]: scrolled,\n  };\n}\n\n/**\n * Sets up optional scroll target tracking for the given app bar element when an explicit `scrollTarget` is provided.\n *\n * @param appBar The element on which to set up app bar functionality.\n * @param opts Setup options, containing an explicit `scrollTarget` and optional cleanup `signal`.\n */\nexport function setupAppBar(\n  appBar: HTMLElement,\n  opts?: {signal?: AbortSignal; scrollTarget?: HTMLElement | Window},\n): void {\n  if (!opts?.scrollTarget) {\n    return;\n  }\n  const target = opts.scrollTarget;\n  const signal = opts.signal;\n\n  const onScroll = () => {\n    if (signal?.aborted) return;\n    let scrollTop = 0;\n    if (target instanceof Window) {\n      scrollTop = target.scrollY || target.document.documentElement.scrollTop;\n    } else if (target instanceof HTMLElement) {\n      scrollTop = target.scrollTop;\n    }\n    const isScrolled = scrollTop > 0;\n    const wasScrolled = appBar.classList.contains(\n      APP_BAR_CLASSES.appBarScrolled,\n    );\n    if (isScrolled !== wasScrolled) {\n      appBar.classList.toggle(APP_BAR_CLASSES.appBarScrolled, isScrolled);\n      appBar.dispatchEvent(\n        new CustomEvent('scrollstatechange', {\n          bubbles: true,\n          composed: true,\n          detail: {scrolled: isScrolled},\n        }),\n      );\n    }\n  };\n\n  target.addEventListener('scroll', onScroll, {passive: true, signal});\n  onScroll();\n}\n\n/**\n * A Lit directive that adds app bar styling and optional scroll tracking functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${appBar({size: 'md', scrolled: true})}\">\n *   <div class=\"app-bar-top-row\">...</div>\n *   <div class=\"app-bar-bottom-row\">...</div>\n * </div>`;\n * ```\n */\nexport const appBar = createClassMapDirective({\n  getClasses: appBarClasses,\n  setupElement: setupAppBar,\n});\n"]}

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;
+}