@material/web 2.4.2-nightly.7619df0.0 → 2.4.2-nightly.7d7cbf4.0

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design button. */
+        'md-button': Button;
+    }
+}
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/form-submitter.js").FormSubmitter>>;
+/**
+ * A Material Design button.
+ */
+export declare class Button extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * The color of the button.
+     */
+    color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
+    /**
+     * The size of the button.
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Changes the shape of the button to be square.
+     */
+    square: boolean;
+    /**
+     * A string indicating the behavior of the button.
+     *
+     * - "submit" (default): A button that submits its associated form.
+     * - "reset": A button that resets its associated form.
+     * - "button": A normal button.
+     * - "toggle": A toggle button using the `selected` property.
+     * - "link": An anchor link (`<a>`). Type is always "link" when `href` is set.
+     */
+    get type(): string;
+    set type(type: string);
+    /**
+     * Whether or not the button is "soft-disabled" (disabled but still
+     * focusable).
+     *
+     * Use this when a button needs increased visibility when disabled. See
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+     * for more guidance on when this is needed.
+     */
+    softDisabled: boolean;
+    /**
+     * Whether or not the button is selected, when `type="toggle"`.
+     */
+    selected: boolean;
+    /**
+     * The URL that the link button points to.
+     */
+    href: string;
+    /**
+     * The filename to use when downloading the linked resource.
+     * If not specified, the browser will determine a filename.
+     * This is only applicable when the button is used as a link (`href` is set).
+     */
+    download: string;
+    /**
+     * Where to display the linked `href` URL for a link button. Common options
+     * include `_blank` to open in a new tab.
+     */
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+}
+export {};

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

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
+import { mixinFormSubmitter } from '@material/web/labs/behaviors/form-submitter.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';
+import buttonStyles from './button.cssresult.js';
+import { button } from './button.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))));
+/**
+ * A Material Design button.
+ */
+let Button = class Button extends baseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * The color of the button.
+         */
+        this.color = 'text';
+        /**
+         * The size of the button.
+         */
+        this.size = 'sm';
+        /**
+         * Changes the shape of the button to be square.
+         */
+        this.square = false;
+        /**
+         * Whether or not the button is "soft-disabled" (disabled but still
+         * focusable).
+         *
+         * Use this when a button needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.softDisabled = false;
+        /**
+         * Whether or not the button is selected, when `type="toggle"`.
+         */
+        this.selected = false;
+        /**
+         * The URL that the link button points to.
+         */
+        this.href = '';
+        /**
+         * The filename to use when downloading the linked resource.
+         * If not specified, the browser will determine a filename.
+         * This is only applicable when the button is used as a link (`href` is set).
+         */
+        this.download = '';
+        /**
+         * Where to display the linked `href` URL for a link button. Common options
+         * include `_blank` to open in a new tab.
+         */
+        this.target = '';
+    }
+    /**
+     * A string indicating the behavior of the button.
+     *
+     * - "submit" (default): A button that submits its associated form.
+     * - "reset": A button that resets its associated form.
+     * - "button": A normal button.
+     * - "toggle": A toggle button using the `selected` property.
+     * - "link": An anchor link (`<a>`). Type is always "link" when `href` is set.
+     */
+    get type() {
+        return this.href ? 'link' : super.type;
+    }
+    set type(type) {
+        if (this.href && type !== 'link') {
+            return;
+        }
+        super.type = type;
+    }
+    render() {
+        const classes = button({
+            color: this.color,
+            size: this.size,
+            square: this.square,
+            // Emulate `:disabled` when soft-disabled
+            disabled: this.softDisabled,
+        });
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+        if (this.type === 'link') {
+            return html `<a
+        part="btn"
+        class=${classes}
+        href=${this.href}
+        download=${this.download || nothing}
+        target=${this.target || nothing}
+        aria-label=${ariaLabel || nothing}
+        aria-haspopup=${ariaHasPopup || nothing}
+        aria-expanded=${ariaExpanded || nothing}
+        aria-disabled=${this.disabled || this.softDisabled || nothing}
+        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>
+        <slot></slot>
+      </a>`;
+        }
+        return html `<button
+      part="btn"
+      class=${classes}
+      ?disabled=${this.disabled}
+      aria-disabled=${this.softDisabled || nothing}
+      aria-label=${ariaLabel || nothing}
+      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}
+      aria-haspopup=${ariaHasPopup || nothing}
+      aria-expanded=${ariaExpanded || nothing}
+      @change=${this.handleChange}>
+      <slot></slot>
+    </button>`;
+    }
+    handleChange(event) {
+        this.selected = event.target.ariaPressed === 'true';
+        redispatchEvent(this, event);
+    }
+};
+/** @nocollapse */
+Button.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+Button.styles = [
+    focusRingStyles,
+    rippleStyles,
+    buttonStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .btn {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property()
+], Button.prototype, "color", void 0);
+__decorate([
+    property()
+], Button.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "square", void 0);
+__decorate([
+    property({ noAccessor: true })
+], Button.prototype, "type", null);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true })
+], Button.prototype, "softDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Button.prototype, "selected", void 0);
+__decorate([
+    property()
+], Button.prototype, "href", void 0);
+__decorate([
+    property()
+], Button.prototype, "download", void 0);
+__decorate([
+    property()
+], Button.prototype, "target", void 0);
+Button = __decorate([
+    customElement('md-button')
+], Button);
+export { Button };
+//# sourceMappingURL=md-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-button.js","sourceRoot":"","sources":["md-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 {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {redispatchEvent} from '@material/web/internal/events/redispatch-event.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {mixinFormAssociated} from '@material/web/labs/behaviors/form-associated.js';\nimport {mixinFormSubmitter} from '@material/web/labs/behaviors/form-submitter.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';\nimport buttonStyles from './button.cssresult.js';\n\nimport {button} from './button.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design button. */\n    'md-button': Button;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),\n);\n\n/**\n * A Material Design button.\n */\n@customElement('md-button')\nexport class Button extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * The color of the button.\n   */\n  @property()\n  color: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The size of the button.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Changes the shape of the button to be square.\n   */\n  @property({type: Boolean}) square = false;\n\n  /**\n   * A string indicating the behavior of the button.\n   *\n   * - \"submit\" (default): A button that submits its associated form.\n   * - \"reset\": A button that resets its associated form.\n   * - \"button\": A normal button.\n   * - \"toggle\": A toggle button using the `selected` property.\n   * - \"link\": An anchor link (`<a>`). Type is always \"link\" when `href` is set.\n   */\n  @property({noAccessor: true})\n  override get type(): string {\n    return this.href ? 'link' : super.type;\n  }\n  override set type(type: string) {\n    if (this.href && type !== 'link') {\n      return;\n    }\n    super.type = type;\n  }\n\n  /**\n   * Whether or not the button is \"soft-disabled\" (disabled but still\n   * focusable).\n   *\n   * Use this when a button needs increased visibility when disabled. See\n   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls\n   * for more guidance on when this is needed.\n   */\n  @property({type: Boolean, attribute: 'soft-disabled', reflect: true})\n  softDisabled = false;\n\n  /**\n   * Whether or not the button is selected, when `type=\"toggle\"`.\n   */\n  @property({type: Boolean}) selected = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * The filename to use when downloading the linked resource.\n   * If not specified, the browser will determine a filename.\n   * This is only applicable when the button is used as a link (`href` is set).\n   */\n  @property() download = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected override render() {\n    const classes = button({\n      color: this.color,\n      size: this.size,\n      square: this.square,\n      // Emulate `:disabled` when soft-disabled\n      disabled: this.softDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    if (this.type === 'link') {\n      return html`<a\n        part=\"btn\"\n        class=${classes}\n        href=${this.href}\n        download=${this.download || nothing}\n        target=${this.target || nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-haspopup=${ariaHasPopup || nothing}\n        aria-expanded=${ariaExpanded || nothing}\n        aria-disabled=${this.disabled || this.softDisabled || nothing}\n        tabindex=${this.disabled && !this.softDisabled ? -1 : nothing}>\n        <slot></slot>\n      </a>`;\n    }\n\n    return html`<button\n      part=\"btn\"\n      class=${classes}\n      ?disabled=${this.disabled}\n      aria-disabled=${this.softDisabled || nothing}\n      aria-label=${ariaLabel || nothing}\n      aria-pressed=${this.type === 'toggle' ? this.selected : nothing}\n      aria-haspopup=${ariaHasPopup || nothing}\n      aria-expanded=${ariaExpanded || nothing}\n      @change=${this.handleChange}>\n      <slot></slot>\n    </button>`;\n  }\n\n  private handleChange(event: Event) {\n    this.selected = (event.target as HTMLElement).ariaPressed === 'true';\n    redispatchEvent(this, event);\n  }\n}\n"]}

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

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --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);
+}
+
+@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.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,MCNF,+BACA,wDACA,iDACA,6BACA,mBACA,oDDKE,wECDF,wDDKE,kBCDF,iEDII,sIAKF,oBCCF,+CACA,qDACA,qEAIA,+FAIA,mEDCE,oBCGF,6DACA,wDDDI,sFCKJ,wDDDI,+CCKJ,2EDCI,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"]}

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Card color configuration types. */
+export type CardColor = 'elevated' | 'filled' | 'outlined';
+/** Card color configurations. */
+export declare const CARD_COLORS: {
+    readonly elevated: "elevated";
+    readonly filled: "filled";
+    readonly outlined: "outlined";
+};
+/** Card classes. */
+export declare const CARD_CLASSES: {
+    readonly card: "card";
+    readonly cardElevated: "card-elevated";
+    readonly cardFilled: "card-filled";
+    readonly cardOutlined: "card-outlined";
+    readonly hover: string;
+    readonly focus: string;
+    readonly disabled: string;
+};
+/** The state provided to the `cardClasses()` function. */
+export interface CardClassesState {
+    /** The color of the card. */
+    color?: CardColor;
+    /** Whether the card is interactive. */
+    interactive?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the card classes to apply to an element based on the given state.
+ *
+ * @param state The state of the card.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function cardClasses({ color, interactive, hover, focus, disabled, }?: CardClassesState): ClassInfo;
+/**
+ * A Lit directive that adds card styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="${card({color: 'filled'})} flex flex-row p-4">
+ *     Card content
+ *   </div>
+ * `
+ * ```
+ */
+export declare const card: (state?: CardClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FOCUS_RING_CLASSES } from '@material/web/labs/gb/components/focus/focus-ring.js';
+import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+/** Card color configurations. */
+export const CARD_COLORS = {
+    elevated: 'elevated',
+    filled: 'filled',
+    outlined: 'outlined',
+};
+/** Card classes. */
+export const CARD_CLASSES = {
+    card: 'card',
+    cardElevated: 'card-elevated',
+    cardFilled: 'card-filled',
+    cardOutlined: 'card-outlined',
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the card classes to apply to an element based on the given state.
+ *
+ * @param state The state of the card.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function cardClasses({ color, interactive = false, hover = false, focus = false, disabled = false, } = {}) {
+    return {
+        [FOCUS_RING_CLASSES.focusRingOuter]: interactive,
+        [CARD_CLASSES.card]: true,
+        [CARD_CLASSES.cardElevated]: color === CARD_COLORS.elevated,
+        [CARD_CLASSES.cardFilled]: color === CARD_COLORS.filled,
+        [CARD_CLASSES.cardOutlined]: color === CARD_COLORS.outlined || !color,
+        [CARD_CLASSES.hover]: hover,
+        [CARD_CLASSES.focus]: focus,
+        [CARD_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * A Lit directive that adds card styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <div class="${card({color: 'filled'})} flex flex-row p-4">
+ *     Card content
+ *   </div>
+ * `
+ * ```
+ */
+export const card = createClassMapDirective({
+    getClasses: cardClasses,
+});
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,kBAAkB,EAAC,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAMzF,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,MACI,EAAE;IACtB,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,WAAW;QAChD,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,IAAI,CAAC,KAAK;QACrE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK;QAC3B,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,QAAQ;KAClC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;CACxB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FOCUS_RING_CLASSES} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Card color configuration types. */\nexport type CardColor = 'elevated' | 'filled' | 'outlined';\n\n/** Card color configurations. */\nexport const CARD_COLORS = {\n  elevated: 'elevated',\n  filled: 'filled',\n  outlined: 'outlined',\n} as const;\n\n/** Card classes. */\nexport const CARD_CLASSES = {\n  card: 'card',\n  cardElevated: 'card-elevated',\n  cardFilled: 'card-filled',\n  cardOutlined: 'card-outlined',\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `cardClasses()` function. */\nexport interface CardClassesState {\n  /** The color of the card. */\n  color?: CardColor;\n  /** Whether the card is interactive. */\n  interactive?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the card classes to apply to an element based on the given state.\n *\n * @param state The state of the card.\n * @return An object of class names and truthy values if they apply.\n */\nexport function cardClasses({\n  color,\n  interactive = false,\n  hover = false,\n  focus = false,\n  disabled = false,\n}: CardClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]: interactive,\n    [CARD_CLASSES.card]: true,\n    [CARD_CLASSES.cardElevated]: color === CARD_COLORS.elevated,\n    [CARD_CLASSES.cardFilled]: color === CARD_COLORS.filled,\n    [CARD_CLASSES.cardOutlined]: color === CARD_COLORS.outlined || !color,\n    [CARD_CLASSES.hover]: hover,\n    [CARD_CLASSES.focus]: focus,\n    [CARD_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * A Lit directive that adds card styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${card({color: 'filled'})} flex flex-row p-4\">\n *     Card content\n *   </div>\n * `\n * ```\n */\nexport const card = createClassMapDirective({\n  getClasses: cardClasses,\n});\n"]}

package/labs/gb/components/card/card.scss

@@ -0,0 +1,74 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'card-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.card {
+  .card {
+    & {
+      @include card-tokens.root;
+    }
+
+    &:is(:hover, .hover):where(:has(.card-btn:not(:disabled, .disabled))) {
+      @include card-tokens.hover;
+    }
+
+    &.card-filled {
+      @include card-tokens.filled;
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.filled-disabled;
+      }
+    }
+
+    &.card-outlined {
+      @include card-tokens.outlined;
+
+      &:where(:focus-within, .focus) {
+        @include card-tokens.outlined-focus;
+      }
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.outlined-disabled;
+      }
+    }
+
+    &.card-elevated {
+      @include card-tokens.elevated;
+
+      &:is(:hover, .hover):where(:has(.card-btn:not(:disabled, .disabled))) {
+        @include card-tokens.elevated-hover;
+      }
+
+      &:where(:disabled, .disabled) {
+        @include card-tokens.elevated-disabled;
+      }
+    }
+
+    & {
+      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-btn {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      position: absolute;
+      inset: 0;
+      color: var(--state-layer-color);
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type CardColor } from './card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design card component. */
+        'md-card': Card;
+    }
+}
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
+/**
+ * A Material Design card.
+ */
+export declare class Card extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /** The color of the card. */
+    color: CardColor;
+    /** Whether the card is disabled. */
+    disabled: boolean;
+    /** Whether the card is interactive. */
+    interactive: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};