@material/web 2.4.2-nightly.fd6fe2a.0 → 2.5.1-nightly.12ec888.0

package/labs/gb/components/chip/chip.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/chip/chip.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/chip/chip.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.chip{.chip{--avatar-opacity: unset;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-size: 24px;--container-color: unset;--container-elevation: var(--md-sys-elevation-shadow-0);--gap-horizontal: var(--md-sys-space-50);--height: 32px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: var(--md-sys-color-on-surface-variant);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 18px;--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px;--padding-bottom: var(--md-sys-space-75);--padding-leading: var(--md-sys-space-200);--padding-top: var(--md-sys-space-75);--padding-trailing: var(--md-sys-space-200);--shape: var(--md-sys-shape-corner-md);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 18px}.chip.chip-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}.chip.chip-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}.chip.chip-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}.chip.chip-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}.chip:is(.chip-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--outline-width: 0px;--shape: var(--md-sys-shape-corner-full);--trailing-icon-color: var(--md-sys-color-on-secondary-container)}.chip.chip-input{--padding-leading: var(--md-sys-space-150);--padding-trailing: var(--md-sys-space-150)}.chip.chip-with-leading-icon{--padding-leading: var(--md-sys-space-100)}.chip.chip-with-trailing-icon{--padding-trailing: var(--md-sys-space-100)}.chip.chip-with-avatar{--padding-leading: var(--md-sys-space-50)}.chip:is(:disabled,.disabled,[aria-disabled=true]){--avatar-opacity: 0.38;--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38)}.chip{display:inline-flex;align-items:center;justify-content:center;height:var(--height);gap:var(--gap-horizontal);padding-inline:var(--padding-leading) var(--padding-trailing);padding-block:var(--padding-top) var(--padding-bottom);border:var(--outline-width) solid var(--outline-color);border-radius:var(--shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);box-sizing:border-box;user-select:none;white-space:nowrap;--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.chip:not(:disabled,.disabled,[aria-disabled=true]){cursor:pointer}.chip .chip-action,.chip .chip-remove{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-horizontal);background:rgba(0,0,0,0);border:none;outline:none;color:inherit;font:inherit;padding:0;margin:0;height:100%;cursor:inherit}.chip .chip-remove{border-radius:50%;aspect-ratio:1;margin-inline-start:4px;outline:var(--focus-ring-outline);--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=chip.cssresult.js.map

package/labs/gb/components/chip/chip.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.cssresult.js","sourceRoot":"","sources":["chip.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/chip/chip.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.chip{.chip{--avatar-opacity: unset;--avatar-shape: var(--md-sys-shape-corner-full);--avatar-size: 24px;--container-color: unset;--container-elevation: var(--md-sys-elevation-shadow-0);--gap-horizontal: var(--md-sys-space-50);--height: 32px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: var(--md-sys-color-on-surface-variant);--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-icon-color: var(--md-sys-color-on-surface-variant);--leading-icon-size: 18px;--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px;--padding-bottom: var(--md-sys-space-75);--padding-leading: var(--md-sys-space-200);--padding-top: var(--md-sys-space-75);--padding-trailing: var(--md-sys-space-200);--shape: var(--md-sys-shape-corner-md);--trailing-icon-color: var(--md-sys-color-on-surface-variant);--trailing-icon-size: 18px}.chip.chip-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}.chip.chip-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}.chip.chip-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}.chip.chip-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}.chip:is(.chip-selected,[aria-pressed=true]){--container-color: var(--md-sys-color-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container);--leading-icon-color: var(--md-sys-color-on-secondary-container);--outline-width: 0px;--shape: var(--md-sys-shape-corner-full);--trailing-icon-color: var(--md-sys-color-on-secondary-container)}.chip.chip-input{--padding-leading: var(--md-sys-space-150);--padding-trailing: var(--md-sys-space-150)}.chip.chip-with-leading-icon{--padding-leading: var(--md-sys-space-100)}.chip.chip-with-trailing-icon{--padding-trailing: var(--md-sys-space-100)}.chip.chip-with-avatar{--padding-leading: var(--md-sys-space-50)}.chip:is(:disabled,.disabled,[aria-disabled=true]){--avatar-opacity: 0.38;--label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38);--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.1);--trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 0.38)}.chip{display:inline-flex;align-items:center;justify-content:center;height:var(--height);gap:var(--gap-horizontal);padding-inline:var(--padding-leading) var(--padding-trailing);padding-block:var(--padding-top) var(--padding-bottom);border:var(--outline-width) solid var(--outline-color);border-radius:var(--shape);box-shadow:var(--container-elevation);background-color:var(--container-color);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);box-sizing:border-box;user-select:none;white-space:nowrap;--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.chip:not(:disabled,.disabled,[aria-disabled=true]){cursor:pointer}.chip .chip-action,.chip .chip-remove{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-horizontal);background:rgba(0,0,0,0);border:none;outline:none;color:inherit;font:inherit;padding:0;margin:0;height:100%;cursor:inherit}.chip .chip-remove{border-radius:50%;aspect-ratio:1;margin-inline-start:4px;outline:var(--focus-ring-outline);--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Chip color/emphasis configuration types. */
+export type ChipColor = 'elevated' | 'filled' | 'outlined' | 'tonal';
+/** Chip color configurations. */
+export declare const CHIP_COLORS: {
+    readonly elevated: "elevated";
+    readonly filled: "filled";
+    readonly outlined: "outlined";
+    readonly tonal: "tonal";
+};
+/** Chip functional type. */
+export type ChipType = 'action' | 'filter' | 'toggle' | 'link';
+/** Chip classes. */
+export declare const CHIP_CLASSES: {
+    readonly chip: "chip";
+    readonly chipElevated: "chip-elevated";
+    readonly chipFilled: "chip-filled";
+    readonly chipOutlined: "chip-outlined";
+    readonly chipTonal: "chip-tonal";
+    readonly chipSelected: "chip-selected";
+    readonly chipFilter: "chip-filter";
+    readonly chipInput: "chip-input";
+    readonly chipRemovable: "chip-removable";
+    readonly chipWithLeadingIcon: "chip-with-leading-icon";
+    readonly chipWithTrailingIcon: "chip-with-trailing-icon";
+    readonly chipWithAvatar: "chip-with-avatar";
+    readonly disabled: string;
+};
+/** The state provided to the `chipClasses()` function. */
+export interface ChipClassesState {
+    /** The emphasis color of the chip. */
+    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="true"`). */
+    removable?: boolean;
+    /** Whether the chip has a leading icon. */
+    withLeadingIcon?: boolean;
+    /** Whether the chip has a trailing icon. */
+    withTrailingIcon?: boolean;
+    /** Whether the chip has an avatar. */
+    withAvatar?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the chip classes to apply to an element based on the given state.
+ *
+ * @param state The state of the chip.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function chipClasses({ color, type, selected, removable, withLeadingIcon, withTrailingIcon, withAvatar, disabled, }?: ChipClassesState): ClassInfo;
+/**
+ * Sets up chip functionality for the given element.
+ *
+ * @param chip The element on which to set up chip functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupChip(chip: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds chip styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<button class="${chip({color: 'elevated'})}">Elevated Chip</button>`;
+ * ```
+ */
+export declare const chip: (state?: ChipClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { isDisabled, PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
+/** Chip color configurations. */
+export const CHIP_COLORS = {
+    elevated: 'elevated',
+    filled: 'filled',
+    outlined: 'outlined',
+    tonal: 'tonal',
+};
+/** Chip classes. */
+export const CHIP_CLASSES = {
+    chip: 'chip',
+    chipElevated: 'chip-elevated',
+    chipFilled: 'chip-filled',
+    chipOutlined: 'chip-outlined',
+    chipTonal: 'chip-tonal',
+    chipSelected: 'chip-selected',
+    chipFilter: 'chip-filter',
+    chipInput: 'chip-input',
+    chipRemovable: 'chip-removable',
+    chipWithLeadingIcon: 'chip-with-leading-icon',
+    chipWithTrailingIcon: 'chip-with-trailing-icon',
+    chipWithAvatar: 'chip-with-avatar',
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the chip classes to apply to an element based on the given state.
+ *
+ * @param state The state of the chip.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function chipClasses({ color = 'outlined', type = 'action', selected = false, removable = false, withLeadingIcon = false, withTrailingIcon = false, withAvatar = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [CHIP_CLASSES.chip]: true,
+        [CHIP_CLASSES.chipElevated]: color === CHIP_COLORS.elevated,
+        [CHIP_CLASSES.chipFilled]: color === CHIP_COLORS.filled,
+        [CHIP_CLASSES.chipOutlined]: color === CHIP_COLORS.outlined,
+        [CHIP_CLASSES.chipTonal]: color === CHIP_COLORS.tonal,
+        [CHIP_CLASSES.chipSelected]: selected,
+        [CHIP_CLASSES.chipFilter]: type === 'filter' || type === 'toggle',
+        [CHIP_CLASSES.chipInput]: removable || type === 'action',
+        [CHIP_CLASSES.chipRemovable]: removable,
+        [CHIP_CLASSES.chipWithLeadingIcon]: withLeadingIcon,
+        [CHIP_CLASSES.chipWithTrailingIcon]: withTrailingIcon,
+        [CHIP_CLASSES.chipWithAvatar]: withAvatar,
+        [CHIP_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up chip functionality for the given element.
+ *
+ * @param chip The element on which to set up chip functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupChip(chip, opts) {
+    setupDispatchHooks(chip, 'click');
+    setupRipple(chip, opts);
+    chip.addEventListener('click', (event) => {
+        if (isDisabled(chip)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        afterDispatch(event, () => {
+            const isToggle = chip.hasAttribute('aria-pressed') ||
+                chip.matches(`.${CHIP_CLASSES.chipFilter},.${CHIP_CLASSES.chipSelected}`);
+            if (event.defaultPrevented || !isToggle) {
+                return;
+            }
+            const isPressed = chip.ariaPressed === 'true';
+            chip.ariaPressed = String(!isPressed);
+            chip.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            chip.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    }, opts);
+}
+/**
+ * A Lit directive that adds chip styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<button class="${chip({color: 'elevated'})}">Elevated Chip</button>`;
+ * ```
+ */
+export const chip = createClassMapDirective({
+    getClasses: chipClasses,
+    setupElement: setupChip,
+});
+//# sourceMappingURL=chip.js.map

package/labs/gb/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAKvE,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACN,CAAC;AAKX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,SAAS,EAAE,YAAY;IACvB,aAAa,EAAE,gBAAgB;IAC/B,mBAAmB,EAAE,wBAAwB;IAC7C,oBAAoB,EAAE,yBAAyB;IAC/C,cAAc,EAAE,kBAAkB;IAClC,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAsBX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,KAAK,EACvB,gBAAgB,GAAG,KAAK,EACxB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,MACI,EAAE;IACtB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ;QAC3D,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,MAAM;QACvD,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,QAAQ;QAC3D,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,KAAK;QACrD,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,QAAQ;QACrC,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,QAAQ;QACjE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,SAAS,IAAI,IAAI,KAAK,QAAQ;QACxD,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,SAAS;QACvC,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,eAAe;QACnD,CAAC,YAAY,CAAC,oBAAoB,CAAC,EAAE,gBAAgB;QACrD,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,UAAU;QACzC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CACvB,IAAiB,EACjB,IAA6B;IAE7B,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACxB,IAAI,CAAC,gBAAgB,CACnB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;YACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;gBACjC,IAAI,CAAC,OAAO,CACV,IAAI,YAAY,CAAC,UAAU,KAAK,YAAY,CAAC,YAAY,EAAE,CAC5D,CAAC;YACJ,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACxC,OAAO;YACT,CAAC;YAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC;YAC9C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,CAChB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC,EACD,IAAI,CACL,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC","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';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {isDisabled, PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Chip color/emphasis configuration types. */\nexport type ChipColor = 'elevated' | 'filled' | 'outlined' | 'tonal';\n\n/** Chip color configurations. */\nexport const CHIP_COLORS = {\n  elevated: 'elevated',\n  filled: 'filled',\n  outlined: 'outlined',\n  tonal: 'tonal',\n} as const;\n\n/** Chip functional type. */\nexport type ChipType = 'action' | 'filter' | 'toggle' | 'link';\n\n/** Chip classes. */\nexport const CHIP_CLASSES = {\n  chip: 'chip',\n  chipElevated: 'chip-elevated',\n  chipFilled: 'chip-filled',\n  chipOutlined: 'chip-outlined',\n  chipTonal: 'chip-tonal',\n  chipSelected: 'chip-selected',\n  chipFilter: 'chip-filter',\n  chipInput: 'chip-input',\n  chipRemovable: 'chip-removable',\n  chipWithLeadingIcon: 'chip-with-leading-icon',\n  chipWithTrailingIcon: 'chip-with-trailing-icon',\n  chipWithAvatar: 'chip-with-avatar',\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `chipClasses()` function. */\nexport interface ChipClassesState {\n  /** The emphasis color of the chip. */\n  color?: ChipColor;\n  /** The functional behavior type of the chip (`action`, `filter`, `toggle`, `link`). */\n  type?: ChipType;\n  /** Whether the filter or toggle chip is selected. */\n  selected?: boolean;\n  /** Whether the chip is removable (`removable=\"true\"`). */\n  removable?: boolean;\n  /** Whether the chip has a leading icon. */\n  withLeadingIcon?: boolean;\n  /** Whether the chip has a trailing icon. */\n  withTrailingIcon?: boolean;\n  /** Whether the chip has an avatar. */\n  withAvatar?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the chip classes to apply to an element based on the given state.\n *\n * @param state The state of the chip.\n * @return An object of class names and truthy values if they apply.\n */\nexport function chipClasses({\n  color = 'outlined',\n  type = 'action',\n  selected = false,\n  removable = false,\n  withLeadingIcon = false,\n  withTrailingIcon = false,\n  withAvatar = false,\n  disabled = false,\n}: ChipClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [CHIP_CLASSES.chip]: true,\n    [CHIP_CLASSES.chipElevated]: color === CHIP_COLORS.elevated,\n    [CHIP_CLASSES.chipFilled]: color === CHIP_COLORS.filled,\n    [CHIP_CLASSES.chipOutlined]: color === CHIP_COLORS.outlined,\n    [CHIP_CLASSES.chipTonal]: color === CHIP_COLORS.tonal,\n    [CHIP_CLASSES.chipSelected]: selected,\n    [CHIP_CLASSES.chipFilter]: type === 'filter' || type === 'toggle',\n    [CHIP_CLASSES.chipInput]: removable || type === 'action',\n    [CHIP_CLASSES.chipRemovable]: removable,\n    [CHIP_CLASSES.chipWithLeadingIcon]: withLeadingIcon,\n    [CHIP_CLASSES.chipWithTrailingIcon]: withTrailingIcon,\n    [CHIP_CLASSES.chipWithAvatar]: withAvatar,\n    [CHIP_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up chip functionality for the given element.\n *\n * @param chip The element on which to set up chip functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupChip(\n  chip: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(chip, 'click');\n  setupRipple(chip, opts);\n  chip.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(chip)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle =\n          chip.hasAttribute('aria-pressed') ||\n          chip.matches(\n            `.${CHIP_CLASSES.chipFilter},.${CHIP_CLASSES.chipSelected}`,\n          );\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = chip.ariaPressed === 'true';\n        chip.ariaPressed = String(!isPressed);\n        chip.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        chip.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds chip styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${chip({color: 'elevated'})}\">Elevated Chip</button>`;\n * ```\n */\nexport const chip = createClassMapDirective({\n  getClasses: chipClasses,\n  setupElement: setupChip,\n});\n"]}

package/labs/gb/components/chip/chip.scss

@@ -0,0 +1,99 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'chip-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.chip {
+  .chip {
+    @include chip-tokens.root;
+    &.chip-elevated {
+      @include chip-tokens.elevated;
+    }
+    &.chip-filled {
+      @include chip-tokens.filled;
+    }
+    &.chip-tonal {
+      @include chip-tokens.tonal;
+    }
+    &.chip-outlined {
+      @include chip-tokens.outlined;
+    }
+    &:is(.chip-selected, [aria-pressed='true']) {
+      @include chip-tokens.selected;
+    }
+    &.chip-filter {
+      @include chip-tokens.filter;
+    }
+    &.chip-input {
+      @include chip-tokens.input;
+    }
+    &.chip-with-leading-icon {
+      @include chip-tokens.with-leading-icon;
+    }
+    &.chip-with-trailing-icon {
+      @include chip-tokens.with-trailing-icon;
+    }
+    &.chip-with-avatar {
+      @include chip-tokens.with-avatar;
+    }
+    &:is(:disabled, .disabled, [aria-disabled='true']) {
+      @include chip-tokens.disabled;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--height);
+      gap: var(--gap-horizontal);
+      padding-inline: var(--padding-leading) var(--padding-trailing);
+      padding-block: var(--padding-top) var(--padding-bottom);
+      border: var(--outline-width) solid var(--outline-color);
+      border-radius: var(--shape);
+      box-shadow: var(--container-elevation);
+      background-color: var(--container-color);
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+      box-sizing: border-box;
+      user-select: none;
+      white-space: nowrap;
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+    &:not(:disabled, .disabled, [aria-disabled='true']) {
+      cursor: pointer;
+    }
+
+    .chip-action,
+    .chip-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--gap-horizontal);
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      cursor: inherit;
+    }
+    .chip-remove {
+      border-radius: 50%;
+      aspect-ratio: 1;
+      margin-inline-start: 4px;
+      outline: var(--focus-ring-outline);
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ChipElement } from './chip-element.js';
+export * from './chip-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design Expressive Chip component. */
+        'md-gb-chip': ChipElement;
+    }
+}

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

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

package/labs/gb/components/chip/md-gb-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-chip.js","sourceRoot":"","sources":["md-gb-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C,cAAc,mBAAmB,CAAC;AASlC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ChipElement} from './chip-element.js';\n\nexport * from './chip-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design Expressive Chip component. */\n    'md-gb-chip': ChipElement;\n  }\n}\n\ncustomElements.define('md-gb-chip', ChipElement);\n"]}

package/labs/gb/components/divider/_divider-tokens.scss

@@ -4,6 +4,8 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --color: var(--md-sys-color-outline-variant);
   --thickness: 1px;
+  // LINT.ThenChange(md-divider.ts) keep in sync with `@cssprop` jsdoc tags
 }

package/labs/gb/components/divider/{md-divider.d.ts → divider-element.d.ts}

@@ -4,16 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CSSResultOrNative, LitElement } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        /** A Material Design divider component. */
-        'md-divider': Divider;
-    }
-}
 /**
  * A Material Design divider component.
+ *
+ * @csspart divider - The divider element.
+ * @cssprop --color
+ * @cssprop --thickness
  */
-export declare class Divider extends LitElement {
+export declare class DividerElement extends LitElement {
     static styles: CSSResultOrNative[];
     /**
      * Whether or not the divider is vertical.

package/labs/gb/components/divider/{md-divider.js → divider-element.js}

@@ -5,14 +5,18 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import dividerStyles from './divider.css' with { type: 'css' }; // github-only
 // import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only
 import { divider } from './divider.js';
 /**
  * A Material Design divider component.
+ *
+ * @csspart divider - The divider element.
+ * @cssprop --color
+ * @cssprop --thickness
  */
-let Divider = class Divider extends LitElement {
+export class DividerElement extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -23,8 +27,8 @@ let Divider = class Divider extends LitElement {
     render() {
         return html `<div part="divider" class="${divider(this)}"></div>`;
     }
-};
-Divider.styles = [
+}
+DividerElement.styles = [
     dividerStyles,
     css `
       :host {
@@ -43,9 +47,5 @@ Divider.styles = [
 ];
 __decorate([
     property({ type: Boolean, reflect: true })
-], Divider.prototype, "vertical", void 0);
-Divider = __decorate([
-    customElement('md-divider')
-], Divider);
-export { Divider };
-//# sourceMappingURL=md-divider.js.map
+], DividerElement.prototype, "vertical", void 0);
+//# sourceMappingURL=divider-element.js.map

package/labs/gb/components/divider/divider-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-element.js","sourceRoot":"","sources":["divider-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,aAAa,MAAM,eAAe,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC5E,kFAAkF;AAElF,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAC;AAErC;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAmBE;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;IAK7D,CAAC;IAHoB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACnE,CAAC;;AAzBe,qBAAM,GAAwB;IAC5C,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhBqB,CAgBpB;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAAkB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport dividerStyles from './divider.css' with {type: 'css'}; // github-only\n// import {styles as dividerStyles} from './divider.cssresult.js'; // google3-only\n\nimport {divider} from './divider.js';\n\n/**\n * A Material Design divider component.\n *\n * @csspart divider - The divider element.\n * @cssprop --color\n * @cssprop --thickness\n */\nexport class DividerElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    dividerStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .divider {\n        flex: 1;\n      }\n      :host(:not([vertical])) {\n        width: 100%;\n      }\n      :host([vertical]) {\n        min-height: 100%;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the divider is vertical.\n   */\n  @property({type: Boolean, reflect: true}) vertical = false;\n\n  protected override render() {\n    return html`<div part=\"divider\" class=\"${divider(this)}\"></div>`;\n  }\n}\n"]}

package/labs/gb/components/divider/divider.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCNF,6CACA,iBDQI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}
+{"version":3,"sourceRoot":"","sources":["divider.scss","_divider-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,uBAEI,SCLF,6CACA,iBDOI,sBACA,YACA,aAGF,gCACE,kDACA,WAGF,0BACE,sDACA","file":"divider.css"}

package/labs/gb/components/divider/md-gb-divider.d.ts

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

package/labs/gb/components/divider/md-gb-divider.js

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

package/labs/gb/components/divider/md-gb-divider.js.map

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

package/labs/gb/components/fab/_fab-tokens.scss

@@ -4,6 +4,7 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --container-color: transparent;
   --container-elevation: var(--md-sys-elevation-shadow-3);
   --container-height: 56px;
@@ -12,10 +13,12 @@
   --icon-label-space: 12px;
   --icon-size: 24px;
   --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-axes: var(--md-sys-typescale-label-lg-axes);
   --label-text-color: currentColor;
   --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
   --leading-space: 16px;
   --trailing-space: 16px;
+  // LINT.ThenChange(fab-element.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin hovered {
@@ -67,6 +70,7 @@
   --container-shape: var(--md-sys-shape-corner-lg-increased);
   --icon-size: 28px;
   --label-text: var(--md-sys-typescale-title-lg);
+  --label-text-axes: var(--md-sys-typescale-title-lg-axes);
   --label-text-tracking: var(--md-sys-typescale-title-lg-tracking);
   --leading-space: 26px;
   --trailing-space: 26px;
@@ -78,6 +82,7 @@
   --icon-label-space: 16px;
   --icon-size: 36px;
   --label-text: var(--md-sys-typescale-headline-sm);
+  --label-text-axes: var(--md-sys-typescale-headline-sm-axes);
   --label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);
   --leading-space: 28px;
   --trailing-space: 28px;

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type FabColor, type FabSize } from './fab.js';
+/**
+ * A Material Design fab component.
+ *
+ * @slot - Used to display an icon and optional label.
+ * @csspart fab - The FAB's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-label-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-color
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+export declare class FabElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    color: FabColor;
+    size: FabSize;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/labs/gb/components/fab/{md-fab.js → fab-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
 // import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
 import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
@@ -15,8 +15,24 @@ import fabStyles from './fab.css' with { type: 'css' }; // github-only
 import { fab } from './fab.js';
 /**
  * A Material Design fab component.
+ *
+ * @slot - Used to display an icon and optional label.
+ * @csspart fab - The FAB's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-height
+ * @cssprop --container-shape
+ * @cssprop --icon-color
+ * @cssprop --icon-label-space
+ * @cssprop --icon-size
+ * @cssprop --label-text
+ * @cssprop --label-text-axes
+ * @cssprop --label-text-color
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
-let Fab = class Fab extends LitElement {
+export class FabElement extends LitElement {
     constructor() {
         super(...arguments);
         this.color = 'primary-container';
@@ -29,8 +45,8 @@ let Fab = class Fab extends LitElement {
       <slot></slot>
     </button>`;
     }
-};
-Fab.styles = [
+}
+FabElement.styles = [
     focusRingStyles,
     rippleStyles,
     fabStyles,
@@ -45,12 +61,8 @@ Fab.styles = [
 ];
 __decorate([
     property()
-], Fab.prototype, "color", void 0);
+], FabElement.prototype, "color", void 0);
 __decorate([
     property()
-], Fab.prototype, "size", void 0);
-Fab = __decorate([
-    customElement('md-fab')
-], Fab);
-export { Fab };
-//# sourceMappingURL=md-fab.js.map
+], FabElement.prototype, "size", void 0);
+//# sourceMappingURL=fab-element.js.map

package/labs/gb/components/fab/fab-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-element.js","sourceRoot":"","sources":["fab-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,SAAS,MAAM,WAAW,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACpE,0EAA0E;AAE1E,OAAO,EAAC,GAAG,EAA8B,MAAM,UAAU,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAec,UAAK,GAAa,mBAAmB,CAAC;QACtC,SAAI,GAAY,SAAS,CAAC;IASxC,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;eAEA,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;;cAE1C,CAAC;IACb,CAAC;;AAvBe,iBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,SAAS;IACT,GAAG,CAAA;;;;;;;KAOF;CACF,AAZqB,CAYpB;AAEU;IAAX,QAAQ,EAAE;yCAAuC;AACtC;IAAX,QAAQ,EAAE;wCAA2B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport fabStyles from './fab.css' with {type: 'css'}; // github-only\n// import {styles as fabStyles} from './fab.cssresult.js'; // google3-only\n\nimport {fab, type FabColor, type FabSize} from './fab.js';\n\n/**\n * A Material Design fab component.\n *\n * @slot - Used to display an icon and optional label.\n * @csspart fab - The FAB's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-height\n * @cssprop --container-shape\n * @cssprop --icon-color\n * @cssprop --icon-label-space\n * @cssprop --icon-size\n * @cssprop --label-text\n * @cssprop --label-text-axes\n * @cssprop --label-text-color\n * @cssprop --label-text-tracking\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class FabElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    fabStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .fab {\n        flex: 1;\n      }\n    `,\n  ];\n\n  @property() color: FabColor = 'primary-container';\n  @property() size: FabSize = 'default';\n\n  protected override render() {\n    return html`<button\n      part=\"fab\"\n      class=\"${fab({color: this.color, size: this.size})}\">\n      <slot></slot>\n    </button>`;\n  }\n}\n"]}

package/labs/gb/components/fab/fab.css

@@ -1,4 +1,4 @@
 /*!
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */@layer md.sys, md.comp.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}/*# sourceMappingURL=fab.css.map */
+ */@layer md.sys, md.comp.dependencies;@layer md.comp.fab{.fab{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-3);--container-height: 56px;--container-shape: var(--md-sys-shape-corner-lg);--icon-color: currentColor;--icon-label-space: 12px;--icon-size: 24px;--label-text: var(--md-sys-typescale-label-lg);--label-text-axes: var(--md-sys-typescale-label-lg-axes);--label-text-color: currentColor;--label-text-tracking: var(--md-sys-typescale-label-lg-tracking);--leading-space: 16px;--trailing-space: 16px}.fab:is(:hover,.hover){--container-elevation: var(--md-sys-elevation-shadow-4)}.fab:is(:active,.active){--container-elevation: var(--md-sys-elevation-shadow-3)}.fab.fab-primary-container{--container-color: var(--md-sys-color-primary-container);--icon-color: var(--md-sys-color-on-primary-container);--label-text-color: var(--md-sys-color-on-primary-container)}.fab.fab-primary{--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary);--label-text-color: var(--md-sys-color-on-primary)}.fab.fab-secondary-container{--container-color: var(--md-sys-color-secondary-container);--icon-color: var(--md-sys-color-on-secondary-container);--label-text-color: var(--md-sys-color-on-secondary-container)}.fab.fab-secondary{--container-color: var(--md-sys-color-secondary);--icon-color: var(--md-sys-color-on-secondary);--label-text-color: var(--md-sys-color-on-secondary)}.fab.fab-tertiary-container{--container-color: var(--md-sys-color-tertiary-container);--icon-color: var(--md-sys-color-on-tertiary-container);--label-text-color: var(--md-sys-color-on-tertiary-container)}.fab.fab-tertiary{--container-color: var(--md-sys-color-tertiary);--icon-color: var(--md-sys-color-on-tertiary);--label-text-color: var(--md-sys-color-on-tertiary)}.fab.fab-md{--container-height: 80px;--container-shape: var(--md-sys-shape-corner-lg-increased);--icon-size: 28px;--label-text: var(--md-sys-typescale-title-lg);--label-text-axes: var(--md-sys-typescale-title-lg-axes);--label-text-tracking: var(--md-sys-typescale-title-lg-tracking);--leading-space: 26px;--trailing-space: 26px}.fab.fab-lg{--container-height: 96px;--container-shape: var(--md-sys-shape-corner-xl);--icon-label-space: 16px;--icon-size: 36px;--label-text: var(--md-sys-typescale-headline-sm);--label-text-axes: var(--md-sys-typescale-headline-sm-axes);--label-text-tracking: var(--md-sys-typescale-headline-sm-tracking);--leading-space: 28px;--trailing-space: 28px}.fab{appearance:none;border:none;display:inline-flex;align-items:center;gap:var(--icon-label-space);height:var(--container-height);background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking);font-variation-settings:var(--label-text-axes);padding-inline:var(--leading-space) var(--trailing-space);animation:var(--ripple-animation),var(--focus-ring-animation);--md-icon-color: var(--icon-color);--md-icon-size: var(--icon-size)}}/*# sourceMappingURL=fab.css.map */

package/labs/gb/components/fab/fab.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCPF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,iCACA,iEACA,sBACA,8CAIA,iFAIA,mFAIA,yDACA,uDACA,6DDFE,iBCMF,+CACA,6CACA,mDDJE,6BCQF,2DACA,yDACA,+DDNE,mBCUF,iDACA,+CACA,qDDRE,4BCYF,0DACA,wDACA,8DDVE,kBCcF,gDACA,8CACA,oDDZE,YCgBF,yBACA,2DACA,kBACA,+CACA,iEACA,sBACA,uBDlBE,YCsBF,yBACA,iDACA,yBACA,kBACA,kDACA,oEACA,sBACA,uBDzBE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,0DACA,8DACA,mCACA","file":"fab.css"}
+{"version":3,"sourceRoot":"","sources":["fab.scss","_fab-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAUA,oCACA,mBAEI,KCNF,+BACA,wDACA,yBACA,iDACA,2BACA,yBACA,kBACA,+CACA,yDACA,iCACA,iEACA,sBACA,uBDFE,uBCOF,wDDHE,yBCOF,wDDHE,2BCOF,yDACA,uDACA,6DDLE,iBCSF,+CACA,6CACA,mDDPE,6BCWF,2DACA,yDACA,+DDTE,mBCaF,iDACA,+CACA,qDDXE,4BCeF,0DACA,wDACA,8DDbE,kBCiBF,gDACA,8CACA,oDDfE,YCmBF,yBACA,2DACA,kBACA,+CACA,yDACA,iEACA,sBACA,uBDtBE,YC0BF,yBACA,iDACA,yBACA,kBACA,kDACA,4DACA,oEACA,sBACA,uBD9BE,KACE,gBACA,YACA,oBACA,mBACA,4BACA,+BACA,wCACA,qCACA,sCACA,8BACA,uBACA,0CACA,+CACA,0DACA,8DACA,mCACA","file":"fab.css"}