@maicol07/material-web 2.3.0 → 2.5.1

package/labs/gb/components/button/button.js

@@ -0,0 +1,119 @@
+/**
+ * @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';
+/** Button color configurations. */
+export const BUTTON_COLORS = {
+    filled: 'filled',
+    elevated: 'elevated',
+    tonal: 'tonal',
+    outlined: 'outlined',
+    text: 'text',
+};
+/** Button size configurations. */
+export const BUTTON_SIZES = {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+/** Button classes. */
+export const BUTTON_CLASSES = {
+    btn: 'btn',
+    btnFilled: 'btn-filled',
+    btnElevated: 'btn-elevated',
+    btnTonal: 'btn-tonal',
+    btnOutlined: 'btn-outlined',
+    btnText: 'btn-text',
+    btnXs: 'btn-xs',
+    btnSm: 'btn-sm',
+    btnMd: 'btn-md',
+    btnLg: 'btn-lg',
+    btnXl: 'btn-xl',
+    btnSquare: 'btn-square',
+    btnUnselected: 'btn-unselected',
+    btnSelected: 'btn-selected',
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the button classes to apply to an element based on the given state.
+ *
+ * @param state The state of the button.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function buttonClasses({ color, size, square = false, selected, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [BUTTON_CLASSES.btn]: true,
+        [BUTTON_CLASSES.btnFilled]: color === BUTTON_COLORS.filled,
+        [BUTTON_CLASSES.btnElevated]: color === BUTTON_COLORS.elevated,
+        [BUTTON_CLASSES.btnTonal]: color === BUTTON_COLORS.tonal,
+        [BUTTON_CLASSES.btnOutlined]: color === BUTTON_COLORS.outlined,
+        [BUTTON_CLASSES.btnText]: color === BUTTON_COLORS.text || !color,
+        [BUTTON_CLASSES.btnXs]: size === BUTTON_SIZES.xs,
+        [BUTTON_CLASSES.btnSm]: size === BUTTON_SIZES.sm || !size,
+        [BUTTON_CLASSES.btnMd]: size === BUTTON_SIZES.md,
+        [BUTTON_CLASSES.btnLg]: size === BUTTON_SIZES.lg,
+        [BUTTON_CLASSES.btnXl]: size === BUTTON_SIZES.xl,
+        [BUTTON_CLASSES.btnSquare]: square,
+        [BUTTON_CLASSES.btnUnselected]: selected === false,
+        [BUTTON_CLASSES.btnSelected]: selected === true,
+        [BUTTON_CLASSES.active]: active,
+        [BUTTON_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up button functionality for the given element.
+ *
+ * @param button The element on which to set up button functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupButton(button, opts) {
+    setupDispatchHooks(button, 'click');
+    setupRipple(button, opts);
+    button.addEventListener('click', (event) => {
+        // When disabled, explicitly prevent the click from propagating to other
+        // event listeners as well as prevent the default action. This is because
+        // the underlying element may not actually be `:disabled`, such as an
+        // anchor tag or a soft-disabled button.
+        if (isDisabled(button)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            return;
+        }
+        afterDispatch(event, () => {
+            const isToggle = button.hasAttribute('aria-pressed') ||
+                button.matches(`.${BUTTON_CLASSES.btnSelected},.${BUTTON_CLASSES.btnUnselected}`);
+            if (event.defaultPrevented || !isToggle) {
+                return;
+            }
+            const isPressed = button.ariaPressed === 'true';
+            button.ariaPressed = String(!isPressed);
+            // Mimic native browser input and change event behavior.
+            button.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            button.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    }, opts);
+}
+/**
+ * A Lit directive that adds button styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<button class="${button({color: 'filled'})}">Filled</button>`;
+ * ```
+ */
+export const button = createClassMapDirective({
+    getClasses: buttonClasses,
+    setupElement: setupButton,
+});
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.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';\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/** Button color configuration types. */\nexport type ButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n/** Button color configurations. */\nexport const BUTTON_COLORS = {\n  filled: 'filled',\n  elevated: 'elevated',\n  tonal: 'tonal',\n  outlined: 'outlined',\n  text: 'text',\n} as const;\n\n/** Button size configuration types. */\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Button size configurations. */\nexport const BUTTON_SIZES = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'xl',\n} as const;\n\n/** Button classes. */\nexport const BUTTON_CLASSES = {\n  btn: 'btn',\n  btnFilled: 'btn-filled',\n  btnElevated: 'btn-elevated',\n  btnTonal: 'btn-tonal',\n  btnOutlined: 'btn-outlined',\n  btnText: 'btn-text',\n  btnXs: 'btn-xs',\n  btnSm: 'btn-sm',\n  btnMd: 'btn-md',\n  btnLg: 'btn-lg',\n  btnXl: 'btn-xl',\n  btnSquare: 'btn-square',\n  btnUnselected: 'btn-unselected',\n  btnSelected: 'btn-selected',\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `buttonClasses()` function. */\nexport interface ButtonClassesState {\n  /** The color of the button. */\n  color?: ButtonColor;\n  /** The size of the button. */\n  size?: ButtonSize;\n  /** Whether the button is a square shape. */\n  square?: boolean;\n  /** Whether the toggle button is selected, if not undefined. */\n  selected?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the button classes to apply to an element based on the given state.\n *\n * @param state The state of the button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function buttonClasses({\n  color,\n  size,\n  square = false,\n  selected,\n  active = false,\n  disabled = false,\n}: ButtonClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [BUTTON_CLASSES.btn]: true,\n    [BUTTON_CLASSES.btnFilled]: color === BUTTON_COLORS.filled,\n    [BUTTON_CLASSES.btnElevated]: color === BUTTON_COLORS.elevated,\n    [BUTTON_CLASSES.btnTonal]: color === BUTTON_COLORS.tonal,\n    [BUTTON_CLASSES.btnOutlined]: color === BUTTON_COLORS.outlined,\n    [BUTTON_CLASSES.btnText]: color === BUTTON_COLORS.text || !color,\n    [BUTTON_CLASSES.btnXs]: size === BUTTON_SIZES.xs,\n    [BUTTON_CLASSES.btnSm]: size === BUTTON_SIZES.sm || !size,\n    [BUTTON_CLASSES.btnMd]: size === BUTTON_SIZES.md,\n    [BUTTON_CLASSES.btnLg]: size === BUTTON_SIZES.lg,\n    [BUTTON_CLASSES.btnXl]: size === BUTTON_SIZES.xl,\n    [BUTTON_CLASSES.btnSquare]: square,\n    [BUTTON_CLASSES.btnUnselected]: selected === false,\n    [BUTTON_CLASSES.btnSelected]: selected === true,\n    [BUTTON_CLASSES.active]: active,\n    [BUTTON_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up button functionality for the given element.\n *\n * @param button The element on which to set up button functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupButton(\n  button: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupDispatchHooks(button, 'click');\n  setupRipple(button, opts);\n  button.addEventListener(\n    'click',\n    (event) => {\n      // When disabled, explicitly prevent the click from propagating to other\n      // event listeners as well as prevent the default action. This is because\n      // the underlying element may not actually be `:disabled`, such as an\n      // anchor tag or a soft-disabled button.\n      if (isDisabled(button)) {\n        event.stopImmediatePropagation();\n        event.preventDefault();\n        return;\n      }\n\n      afterDispatch(event, () => {\n        const isToggle =\n          button.hasAttribute('aria-pressed') ||\n          button.matches(\n            `.${BUTTON_CLASSES.btnSelected},.${BUTTON_CLASSES.btnUnselected}`,\n          );\n        if (event.defaultPrevented || !isToggle) {\n          return;\n        }\n\n        const isPressed = button.ariaPressed === 'true';\n        button.ariaPressed = String(!isPressed);\n        // Mimic native browser input and change event behavior.\n        button.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        button.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds button styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<button class=\"${button({color: 'filled'})}\">Filled</button>`;\n * ```\n */\nexport const button = createClassMapDirective({\n  getClasses: buttonClasses,\n  setupElement: setupButton,\n});\n"]}

package/labs/gb/components/button/button.scss

@@ -0,0 +1,130 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'button-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.button {
+  .btn {
+    @include button-tokens.root;
+    &:where(.btn-unselected, [aria-pressed='false']) {
+      @include button-tokens.unselected;
+    }
+    &:is(.btn-selected, [aria-pressed='true']) {
+      @include button-tokens.selected;
+    }
+    &.btn-filled {
+      @include button-tokens.filled;
+      &:where(.btn-unselected, [aria-pressed='false']) {
+        @include button-tokens.filled-unselected;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.filled-selected;
+      }
+    }
+    &.btn-elevated {
+      @include button-tokens.elevated;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.elevated-selected;
+      }
+    }
+    &.btn-tonal {
+      @include button-tokens.tonal;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.tonal-selected;
+      }
+    }
+    &.btn-outlined {
+      @include button-tokens.outlined;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.outlined-selected;
+      }
+    }
+    &.btn-text {
+      @include button-tokens.text;
+    }
+    &.btn-xs {
+      @include button-tokens.xs;
+    }
+    &.btn-sm {
+      @include button-tokens.sm;
+    }
+    &.btn-md {
+      @include button-tokens.md;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.md-selected;
+      }
+    }
+    &.btn-lg {
+      @include button-tokens.lg;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.lg-selected;
+      }
+    }
+    &.btn-xl {
+      @include button-tokens.xl;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.xl-selected;
+      }
+    }
+    &.btn-square {
+      @include button-tokens.square;
+      &:where(.btn-md) {
+        @include button-tokens.square-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.square-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.square-xl;
+      }
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.square-selected;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include button-tokens.pressed;
+      &:where(.btn-md) {
+        @include button-tokens.pressed-md;
+      }
+      &:where(.btn-lg) {
+        @include button-tokens.pressed-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.pressed-xl;
+      }
+    }
+    &:is(:disabled, .disabled) {
+      @include button-tokens.disabled;
+    }
+
+    & {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--container-height);
+      gap: var(--icon-label-space);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      border: var(--outline-width) solid var(--outline-color);
+      border-radius: var(--container-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);
+      transition:
+        border-radius 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9),
+        var(--ripple-transition);
+      --md-icon-color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+    }
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+  }
+}

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

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

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

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

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

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

package/labs/gb/components/card/_card-tokens.scss

@@ -0,0 +1,56 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: transparent;
+  --container-elevation: var(--md-sys-elevation-shadow-0);
+  --container-shape: var(--md-sys-shape-corner-md);
+  --outline-color: transparent;
+  --outline-width: 0;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  // LINT.ThenChange(md-card.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hover {
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+}
+
+@mixin filled {
+  --container-color: var(--md-sys-color-surface-container-highest);
+}
+
+@mixin filled-disabled {
+  --container-color: hsl(
+    from var(--md-sys-color-surface-container-highest) h s l / 38%
+  );
+}
+
+@mixin outlined {
+  --container-color: var(--md-sys-color-surface);
+  --outline-color: var(--md-sys-color-outline-variant);
+  --outline-width: 1px;
+}
+
+@mixin outlined-focus {
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin outlined-disabled {
+  --outline-color: hsl(from var(--md-sys-color-outline) h s l / 12%);
+}
+
+@mixin elevated {
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-1);
+}
+
+@mixin elevated-hover {
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+}
+
+@mixin elevated-disabled {
+  --container-color: hsl(from var(--md-sys-color-surface) h s l / 38%);
+}

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
+import { type CardColor } from './card.js';
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
+/**
+ * A Material Design card.
+ *
+ * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
+ * @slot container - Used to set a custom background container for the card.
+ * @csspart card - The card's root element.
+ * @csspart card-btn - The card's main action button, when interactive.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-shape
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --state-layer-color
+ */
+export declare class CardElement extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    private hideOutline;
+    private lastFiredEnabledState?;
+    /** The color of the card. */
+    color: CardColor;
+    /** Whether the card is disabled. */
+    disabled: boolean;
+    /** Whether the card is interactive. */
+    interactive: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleSetShowOutline;
+    protected updated(changedProperties: PropertyValues): void;
+    private dispatchSetEnabledEvent;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleContainerSlotChange;
+}
+export {};

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

@@ -0,0 +1,170 @@
+/**
+ * @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 { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
+import { ripple } from '../ripple/ripple.js';
+import { hasSlotted } from '../shared/has-slotted.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
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import cardStyles from './card.css' with { type: 'css' }; // github-only
+// import cardStyles from './card.cssresult.js'; // google3-only
+import { card } from './card.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(LitElement);
+/**
+ * A Material Design card.
+ *
+ * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.
+ * @slot container - Used to set a custom background container for the card.
+ * @csspart card - The card's root element.
+ * @csspart card-btn - The card's main action button, when interactive.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-shape
+ * @cssprop --outline-color
+ * @cssprop --outline-width
+ * @cssprop --state-layer-color
+ */
+export class CardElement extends baseClass {
+    constructor() {
+        super(...arguments);
+        this.hideOutline = false;
+        /** The color of the card. */
+        this.color = 'outlined';
+        /** Whether the card is disabled. */
+        this.disabled = false;
+        /** Whether the card is interactive. */
+        this.interactive = false;
+        this.handleSetShowOutline = (event) => {
+            const customEvent = event;
+            this.hideOutline = !customEvent.detail.shown;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('md-gb:set-show-outline', this.handleSetShowOutline);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.dispatchSetEnabledEvent();
+        }
+    }
+    dispatchSetEnabledEvent() {
+        const enabled = !this.disabled;
+        if (this.lastFiredEnabledState === enabled)
+            return;
+        const slot = this.shadowRoot?.querySelector('slot[name="container"]');
+        if (slot) {
+            for (const element of slot.assignedElements({ flatten: true })) {
+                element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
+                    detail: { enabled },
+                }));
+            }
+        }
+        this.lastFiredEnabledState = enabled;
+    }
+    render() {
+        const { ariaLabel } = this;
+        return html `<div
+      part="card"
+      class="${card({
+            color: this.color,
+            disabled: this.disabled,
+            interactive: this.interactive,
+            classes: {
+                'card-hide-outline': this.hideOutline,
+            },
+        })}">
+      ${this.interactive
+            ? html `<button
+            part="card-btn"
+            class="card-btn ripple focus-ring-target"
+            ${ripple()}
+            ?disabled="${this.disabled}"
+            aria-label="${ariaLabel || nothing}"></button>`
+            : nothing}
+      <slot></slot>
+      <slot
+        name="container"
+        ${hasSlotted()}
+        @slotchange=${this.handleContainerSlotChange}></slot>
+    </div>`;
+    }
+    handleContainerSlotChange(event) {
+        const slot = event.target;
+        const enabled = !this.disabled;
+        for (const element of slot.assignedElements({ flatten: true })) {
+            element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));
+            element.dispatchEvent(new CustomEvent('md-gb:set-enabled', {
+                detail: { enabled },
+            }));
+        }
+    }
+}
+/** @nocollapse */
+CardElement.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+/** @nocollapse */
+CardElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    cardStyles,
+    css `
+      :host {
+        display: inline-flex;
+        isolation: isolate;
+      }
+      .card {
+        flex: 1;
+        position: relative;
+      }
+      .card:has([name='container'].has-slotted) {
+        background-color: transparent;
+      }
+      .card.card-hide-outline {
+        --outline-color: transparent;
+        --container-elevation: var(--md-sys-elevation-shadow-0);
+      }
+      slot[name='container'] {
+        display: block;
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        --color: var(--container-color);
+        z-index: -1;
+        transition: inherit;
+      }
+      slot[name='container']::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+];
+__decorate([
+    state()
+], CardElement.prototype, "hideOutline", void 0);
+__decorate([
+    property()
+], CardElement.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean })
+], CardElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], CardElement.prototype, "interactive", void 0);
+//# sourceMappingURL=card-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-element.js","sourceRoot":"","sources":["card-element.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 {\n  css,\n  CSSResultOrNative,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {ripple} from '../ripple/ripple.js';\nimport {hasSlotted} from '../shared/has-slotted.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 cardStyles from './card.css' with {type: 'css'}; // github-only\n// import cardStyles from './card.cssresult.js'; // google3-only\n\nimport {type CardColor, card} from './card.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(LitElement);\n\n/**\n * A Material Design card.\n *\n * @slot - Used to display the card's content. Note: add padding to content, not the host <md-gb-card> element.\n * @slot container - Used to set a custom background container for the card.\n * @csspart card - The card's root element.\n * @csspart card-btn - The card's main action button, when interactive.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --outline-color\n * @cssprop --outline-width\n * @cssprop --state-layer-color\n */\nexport class CardElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    cardStyles,\n    css`\n      :host {\n        display: inline-flex;\n        isolation: isolate;\n      }\n      .card {\n        flex: 1;\n        position: relative;\n      }\n      .card:has([name='container'].has-slotted) {\n        background-color: transparent;\n      }\n      .card.card-hide-outline {\n        --outline-color: transparent;\n        --container-elevation: var(--md-sys-elevation-shadow-0);\n      }\n      slot[name='container'] {\n        display: block;\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n        pointer-events: none;\n        --color: var(--container-color);\n        z-index: -1;\n        transition: inherit;\n      }\n      slot[name='container']::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n    `,\n  ];\n\n  @state() private hideOutline = false;\n\n  private lastFiredEnabledState?: boolean;\n\n  /** The color of the card. */\n  @property() color: CardColor = 'outlined';\n\n  /** Whether the card is disabled. */\n  @property({type: Boolean}) disabled = false;\n\n  /** Whether the card is interactive. */\n  @property({type: Boolean}) interactive = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('md-gb:set-show-outline', this.handleSetShowOutline);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'md-gb:set-show-outline',\n      this.handleSetShowOutline,\n    );\n  }\n\n  private readonly handleSetShowOutline = (event: Event) => {\n    const customEvent = event as CustomEvent<{shown: boolean}>;\n    this.hideOutline = !customEvent.detail.shown;\n  };\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.dispatchSetEnabledEvent();\n    }\n  }\n\n  private dispatchSetEnabledEvent() {\n    const enabled = !this.disabled;\n\n    if (this.lastFiredEnabledState === enabled) return;\n\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"container\"]',\n    ) as HTMLSlotElement;\n    if (slot) {\n      for (const element of slot.assignedElements({flatten: true})) {\n        element.dispatchEvent(\n          new CustomEvent('md-gb:set-enabled', {\n            detail: {enabled},\n          }),\n        );\n      }\n    }\n    this.lastFiredEnabledState = enabled;\n  }\n\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      part=\"card\"\n      class=\"${card({\n        color: this.color,\n        disabled: this.disabled,\n        interactive: this.interactive,\n        classes: {\n          'card-hide-outline': this.hideOutline,\n        },\n      })}\">\n      ${this.interactive\n        ? html`<button\n            part=\"card-btn\"\n            class=\"card-btn ripple focus-ring-target\"\n            ${ripple()}\n            ?disabled=\"${this.disabled}\"\n            aria-label=\"${ariaLabel || nothing}\"></button>`\n        : nothing}\n      <slot></slot>\n      <slot\n        name=\"container\"\n        ${hasSlotted()}\n        @slotchange=${this.handleContainerSlotChange}></slot>\n    </div>`;\n  }\n\n  private handleContainerSlotChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n\n    const enabled = !this.disabled;\n\n    for (const element of slot.assignedElements({flatten: true})) {\n      element.dispatchEvent(new CustomEvent('md-gb:change-container-slot'));\n      element.dispatchEvent(\n        new CustomEvent('md-gb:set-enabled', {\n          detail: {enabled},\n        }),\n      );\n    }\n  }\n}\n"]}

package/labs/gb/components/card/card.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.card{.card{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: var(--md-sys-shape-corner-md);--outline-color: transparent;--outline-width: 0;--state-layer-color: var(--md-sys-color-on-surface)}.card:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-filled{--container-color: var(--md-sys-color-surface-container-highest)}.card.card-filled:where(:disabled,.disabled){--container-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 38% )}.card.card-outlined{--container-color: var(--md-sys-color-surface);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.card.card-outlined:where(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.card.card-outlined:where(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-outline) h s l / 12%)}.card.card-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-elevated:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-2)}.card.card-elevated:where(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-surface) h s l / 38%)}.card{display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);border:var(--outline-width) solid var(--outline-color)}.card .card-btn{appearance:none;background-color:rgba(0,0,0,0);border:none;outline:none;position:absolute;inset:0;color:var(--state-layer-color)}}/*# sourceMappingURL=card.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["card.scss","_card-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,oBAEI,MCLF,+BACA,wDACA,iDACA,6BACA,mBACA,oDDIE,wECCF,wDDGE,kBCCF,iEDEI,6CCEJ,yFDGE,oBCGF,+CACA,qDACA,qBDFI,gDCMJ,gDDFI,+CCMJ,mEDDE,oBCKF,6DACA,wDDHI,sFCOJ,wDDHI,+CCOJ,qEDFE,MACE,aACA,sBACA,kBACA,gBACA,wCACA,qCACA,sCACA,uDAGF,gBACE,gBACA,+BACA,YACA,aACA,kBACA,QACA","file":"card.css"}

package/labs/gb/components/card/card.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/card/card.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/card/card.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.card{.card{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: var(--md-sys-shape-corner-md);--outline-color: transparent;--outline-width: 0;--state-layer-color: var(--md-sys-color-on-surface)}.card:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-filled{--container-color: var(--md-sys-color-surface-container-highest)}.card.card-filled:where(:disabled,.disabled){--container-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 38% )}.card.card-outlined{--container-color: var(--md-sys-color-surface);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.card.card-outlined:where(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.card.card-outlined:where(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-outline) h s l / 12%)}.card.card-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-elevated:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-2)}.card.card-elevated:where(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-surface) h s l / 38%)}.card{display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);border:var(--outline-width) solid var(--outline-color)}.card .card-btn{appearance:none;background-color:rgba(0,0,0,0);border:none;outline:none;position:absolute;inset:0;color:var(--state-layer-color)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=card.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.cssresult.js","sourceRoot":"","sources":["card.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/card/card.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.card{.card{--container-color: transparent;--container-elevation: var(--md-sys-elevation-shadow-0);--container-shape: var(--md-sys-shape-corner-md);--outline-color: transparent;--outline-width: 0;--state-layer-color: var(--md-sys-color-on-surface)}.card:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-filled{--container-color: var(--md-sys-color-surface-container-highest)}.card.card-filled:where(:disabled,.disabled){--container-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 38% )}.card.card-outlined{--container-color: var(--md-sys-color-surface);--outline-color: var(--md-sys-color-outline-variant);--outline-width: 1px}.card.card-outlined:where(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.card.card-outlined:where(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-outline) h s l / 12%)}.card.card-elevated{--container-color: var(--md-sys-color-surface-container-low);--container-elevation: var(--md-sys-elevation-shadow-1)}.card.card-elevated:is(:hover,.hover):where(:has(.card-btn:not(:disabled,.disabled))){--container-elevation: var(--md-sys-elevation-shadow-2)}.card.card-elevated:where(:disabled,.disabled){--container-color: hsl(from var(--md-sys-color-surface) h s l / 38%)}.card{display:flex;flex-direction:column;position:relative;overflow:hidden;background-color:var(--container-color);border-radius:var(--container-shape);box-shadow:var(--container-elevation);border:var(--outline-width) solid var(--outline-color)}.card .card-btn{appearance:none;background-color:rgba(0,0,0,0);border:none;outline:none;position:absolute;inset:0;color:var(--state-layer-color)}}\n`;\nexport default styles.styleSheet!;\n"]}