@material/web 2.4.2-nightly.7619df0.0 → 2.4.2-nightly.81807b2.0

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

@@ -0,0 +1,132 @@
+/*!
+ * 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;
+    &:is(.btn-selected, [aria-pressed='true']) {
+      @include button-tokens.selected;
+    }
+    &.btn-square {
+      @include button-tokens.square;
+    }
+    &:is(.btn-selected, [aria-pressed='true']):where(.btn-square) {
+      @include button-tokens.selected-square;
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include button-tokens.pressed;
+    }
+    &.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-lg) {
+        @include button-tokens.outlined-lg;
+      }
+      &:where(.btn-xl) {
+        @include button-tokens.outlined-xl;
+      }
+      &: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;
+      }
+      &:where(.btn-square) {
+        @include button-tokens.md-square;
+      }
+      &:where(:is(:active, .active):not(:disabled, .disabled)) {
+        @include button-tokens.md-pressed;
+      }
+    }
+    &.btn-lg {
+      @include button-tokens.lg;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.lg-selected;
+      }
+      &:where(.btn-square) {
+        @include button-tokens.lg-square;
+      }
+      &:where(:is(:active, .active):not(:disabled, .disabled)) {
+        @include button-tokens.lg-pressed;
+      }
+    }
+    &.btn-xl {
+      @include button-tokens.xl;
+      &:where(.btn-selected, [aria-pressed='true']) {
+        @include button-tokens.xl-selected;
+      }
+      &:where(.btn-square) {
+        @include button-tokens.xl-square;
+      }
+      &:where(:is(:active, .active):not(:disabled, .disabled)) {
+        @include button-tokens.xl-pressed;
+      }
+    }
+    &: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);
+      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-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,180 @@
+/**
+ * @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.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only
+import buttonStyles from './button.css' with { type: 'css' }; // github-only
+// import buttonStyles from './button.cssresult.js'; // google3-only
+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.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js'; // google3-only\nimport buttonStyles from './button.css' with {type: 'css'}; // github-only\n// import buttonStyles from './button.cssresult.js'; // google3-only\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/checkbox/_checkbox-tokens.scss

@@ -0,0 +1,64 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --container-color: transparent;
+  --container-shape: 2px;
+  --container-size: 18px;
+  --icon-color: transparent;
+  --icon-size: 18px;
+  --outline-color: var(--md-sys-color-on-surface-variant);
+  --outline-width: 2px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+}
+
+@mixin hovered {
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+  --outline-color: var(--md-sys-color-on-surface);
+}
+
+@mixin selected {
+  --outline-width: 0;
+  --container-color: var(--md-sys-color-primary);
+  --icon-color: var(--md-sys-color-on-primary);
+}
+
+@mixin selected-hovered {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin error {
+  --state-layer-color: var(--md-sys-color-error);
+  --outline-color: var(--md-sys-color-error);
+}
+
+@mixin error-selected {
+  --container-color: var(--md-sys-color-error);
+  --icon-color: var(--md-sys-color-on-error);
+}
+
+@mixin disabled {
+  --outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}
+
+@mixin disabled-selected {
+  --container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --icon-color: var(--md-sys-color-surface);
+}

package/labs/gb/components/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:"";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:"check"}.checkbox:is(:indeterminate,.indeterminate)::before{content:"remove"}}/*# sourceMappingURL=checkbox.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["checkbox.scss","_checkbox-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,wBAEI,UCNF,+BACA,uBACA,uBACA,0BACA,kBACA,wDACA,qBACA,oDACA,yBACA,yBDCE,4BCGF,oDACA,mFAIA,8EAIA,iDACA,gDDDE,8DCKF,mBACA,+CACA,6CDJI,mFCQJ,iDDJI,qFCQJ,oDDHE,gCCOF,+CACA,2CDLI,uFCSJ,6CACA,2CDLE,kCCSF,sEDNI,yFCUJ,wEACA,0CDNE,UACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aAEA,kBACE,WACA,sBACA,4BACA,6BACA,kCACA,qCACA,uDACA,wBACA,gCACA,2BACA,cAGF,iBACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA,8DAGF,wCACE,gBAGF,oDACE","file":"checkbox.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:"";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:"";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:"check"}.checkbox:is(:indeterminate,.indeterminate)::before{content:"remove"}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=checkbox.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cssresult.js","sourceRoot":"","sources":["checkbox.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,uEAAuE;AACvE,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/checkbox/checkbox.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.checkbox{.checkbox{--container-color: transparent;--container-shape: 2px;--container-size: 18px;--icon-color: transparent;--icon-size: 18px;--outline-color: var(--md-sys-color-on-surface-variant);--outline-width: 2px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.checkbox:is(:hover,.hover){--state-layer-color: var(--md-sys-color-on-surface);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:focus-within,.focus){--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:active,.active){--state-layer-color: var(--md-sys-color-primary);--outline-color: var(--md-sys-color-on-surface)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate){--outline-width: 0;--container-color: var(--md-sys-color-primary);--icon-color: var(--md-sys-color-on-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:hover,.hover){--state-layer-color: var(--md-sys-color-primary)}.checkbox:is(:checked,.checked,:indeterminate,.indeterminate):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.checkbox:is(:invalid,.invalid){--state-layer-color: var(--md-sys-color-error);--outline-color: var(--md-sys-color-error)}.checkbox:is(:invalid,.invalid):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: var(--md-sys-color-error);--icon-color: var(--md-sys-color-on-error)}.checkbox:is(:disabled,.disabled){--outline-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.checkbox:is(:disabled,.disabled):where(:checked,.checked,:indeterminate,.indeterminate){--container-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--icon-color: var(--md-sys-color-surface)}.checkbox{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none}.checkbox::before{content:\"\";box-sizing:border-box;width:var(--container-size);height:var(--container-size);background:var(--container-color);border-radius:var(--container-shape);border:var(--outline-width) solid var(--outline-color);color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1}.checkbox::after{content:\"\";position:absolute;aspect-ratio:1;background-image:var(--ripple);color:var(--state-layer-color);width:var(--state-layer-size);border-radius:var(--state-layer-shape);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation)}.checkbox:is(:checked,.checked)::before{content:\"check\"}.checkbox:is(:indeterminate,.indeterminate)::before{content:\"remove\"}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AttributePart } from 'lit';
+import { Directive, DirectiveParameters } from 'lit/directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Checkbox classes. */
+export declare const CHECKBOX_CLASSES: {
+    readonly checkbox: "checkbox";
+    readonly invalid: string;
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly checked: string;
+    readonly indeterminate: string;
+    readonly disabled: string;
+};
+/** The state provided to the `checkboxClasses()` function. */
+export interface CheckboxClassesState {
+    /** Emulates `:invalid`. */
+    invalid?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:indeterminate`. */
+    indeterminate?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the checkbox classes to apply to an element based on the given state.
+ *
+ * @param state The state of the checkbox.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function checkboxClasses({ invalid, hover, focus, active, checked, indeterminate, disabled, }?: CheckboxClassesState): ClassInfo;
+/**
+ * Sets up checkbox functionality for the given element.
+ *
+ * @param checkbox The element on which to set up checkbox functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupCheckbox(checkbox: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/** The state provided to the `checkbox()` directive. */
+export interface CheckboxDirectiveState extends CheckboxClassesState {
+    /** Additional classes to apply to the element. */
+    classes?: ClassInfo;
+}
+declare class CheckboxDirective extends Directive {
+    private element?;
+    private cleanup?;
+    render(state: CheckboxDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+    update({ element }: AttributePart, [state]: DirectiveParameters<this>): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
+}
+/**
+ * A Lit directive that adds checkbox styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<input type="checkbox" class="${checkbox()}">`;
+ * ```
+ */
+export declare const checkbox: (state: CheckboxDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof CheckboxDirective>;
+export {};

package/labs/gb/components/checkbox/checkbox.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { focusRingClasses } from '@material/web/labs/gb/components/focus/focus-ring.js';
+import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
+import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+import { Directive, directive } from 'lit/directive.js';
+import { classMap } from 'lit/directives/class-map.js';
+/** Checkbox classes. */
+export const CHECKBOX_CLASSES = {
+    checkbox: 'checkbox',
+    invalid: PSEUDO_CLASSES.invalid,
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    active: PSEUDO_CLASSES.active,
+    checked: PSEUDO_CLASSES.checked,
+    indeterminate: PSEUDO_CLASSES.indeterminate,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the checkbox classes to apply to an element based on the given state.
+ *
+ * @param state The state of the checkbox.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function checkboxClasses({ invalid = false, hover = false, focus = false, active = false, checked = false, indeterminate = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [CHECKBOX_CLASSES.checkbox]: true,
+        [CHECKBOX_CLASSES.checked]: checked,
+        [CHECKBOX_CLASSES.indeterminate]: indeterminate,
+        [CHECKBOX_CLASSES.disabled]: disabled,
+        [CHECKBOX_CLASSES.invalid]: invalid,
+        [CHECKBOX_CLASSES.hover]: hover,
+        [CHECKBOX_CLASSES.focus]: focus,
+        [CHECKBOX_CLASSES.active]: active,
+    };
+}
+/**
+ * Sets up checkbox functionality for the given element.
+ *
+ * @param checkbox The element on which to set up checkbox functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupCheckbox(checkbox, opts) {
+    setupRipple(checkbox, opts);
+}
+class CheckboxDirective extends Directive {
+    render(state) {
+        return classMap({
+            ...(state.classes || {}),
+            ...checkboxClasses(state),
+        });
+    }
+    update({ element }, [state]) {
+        if (element !== this.element) {
+            this.element = element;
+            this.cleanup?.abort();
+            this.cleanup = new AbortController();
+            setupCheckbox(this.element, { signal: this.cleanup.signal });
+        }
+        return this.render(state);
+    }
+}
+/**
+ * A Lit directive that adds checkbox styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<input type="checkbox" class="${checkbox()}">`;
+ * ```
+ */
+export const checkbox = directive(CheckboxDirective);
+//# sourceMappingURL=checkbox.js.map