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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,sDAAsD,CAAC;AACtF,OAAO,EACL,aAAa,EACb,WAAW,GACZ,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAEzF,OAAO,EAAC,SAAS,EAAE,SAAS,EAAsB,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAErE,wBAAwB;AACxB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,aAAa,EAAE,cAAc,CAAC,aAAa;IAC3C,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAoBX;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,IAAI;QACjC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa;QAC/C,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,QAAQ;QACrC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;QACnC,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK;QAC/B,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM;KAClC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAQD,MAAM,iBAAkB,SAAQ,SAAS;IAIvC,MAAM,CAAC,KAA6B;QAClC,OAAO,QAAQ,CAAC;YACd,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YACxB,GAAG,eAAe,CAAC,KAAK,CAAC;SAC1B,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM,CACb,EAAC,OAAO,EAAgB,EACxB,CAAC,KAAK,CAA4B;QAElC,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,OAAsB,CAAC;YACtC,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE,CAAC;YACrC,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAC,CAAC,CAAC;QAC7D,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;CACF;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {focusRingClasses} from '@material/web/labs/gb/components/focus/focus-ring.js';\nimport {\n  rippleClasses,\n  setupRipple,\n} from '@material/web/labs/gb/components/ripple/ripple.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {AttributePart} from 'lit';\nimport {Directive, directive, DirectiveParameters} from 'lit/directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Checkbox classes. */\nexport const CHECKBOX_CLASSES = {\n  checkbox: 'checkbox',\n  invalid: PSEUDO_CLASSES.invalid,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  indeterminate: PSEUDO_CLASSES.indeterminate,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `checkboxClasses()` function. */\nexport interface CheckboxClassesState {\n  /** Emulates `:invalid`. */\n  invalid?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:indeterminate`. */\n  indeterminate?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the checkbox classes to apply to an element based on the given state.\n *\n * @param state The state of the checkbox.\n * @return An object of class names and truthy values if they apply.\n */\nexport function checkboxClasses({\n  invalid = false,\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  indeterminate = false,\n  disabled = false,\n}: CheckboxClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [CHECKBOX_CLASSES.checkbox]: true,\n    [CHECKBOX_CLASSES.checked]: checked,\n    [CHECKBOX_CLASSES.indeterminate]: indeterminate,\n    [CHECKBOX_CLASSES.disabled]: disabled,\n    [CHECKBOX_CLASSES.invalid]: invalid,\n    [CHECKBOX_CLASSES.hover]: hover,\n    [CHECKBOX_CLASSES.focus]: focus,\n    [CHECKBOX_CLASSES.active]: active,\n  };\n}\n\n/**\n * Sets up checkbox functionality for the given element.\n *\n * @param checkbox The element on which to set up checkbox functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupCheckbox(\n  checkbox: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(checkbox, opts);\n}\n\n/** The state provided to the `checkbox()` directive. */\nexport interface CheckboxDirectiveState extends CheckboxClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass CheckboxDirective extends Directive {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  render(state: CheckboxDirectiveState) {\n    return classMap({\n      ...(state.classes || {}),\n      ...checkboxClasses(state),\n    });\n  }\n\n  override update(\n    {element}: AttributePart,\n    [state]: DirectiveParameters<this>,\n  ) {\n    if (element !== this.element) {\n      this.element = element as HTMLElement;\n      this.cleanup?.abort();\n      this.cleanup = new AbortController();\n      setupCheckbox(this.element, {signal: this.cleanup.signal});\n    }\n\n    return this.render(state);\n  }\n}\n\n/**\n * A Lit directive that adds checkbox styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<input type=\"checkbox\" class=\"${checkbox()}\">`;\n * ```\n */\nexport const checkbox = directive(CheckboxDirective);\n"]}

package/labs/gb/components/checkbox/checkbox.scss

@@ -0,0 +1,105 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'checkbox-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.checkbox {
+  .checkbox {
+    & {
+      @include checkbox-tokens.root;
+    }
+
+    &:is(:hover, .hover) {
+      @include checkbox-tokens.hovered;
+    }
+
+    &:is(:focus-within, .focus) {
+      @include checkbox-tokens.focused;
+    }
+
+    &:is(:active, .active) {
+      @include checkbox-tokens.pressed;
+    }
+
+    &:is(:checked, .checked, :indeterminate, .indeterminate) {
+      @include checkbox-tokens.selected;
+
+      &:where(:hover, .hover) {
+        @include checkbox-tokens.selected-hovered;
+      }
+
+      &:where(:active, .active) {
+        @include checkbox-tokens.selected-pressed;
+      }
+    }
+
+    &:is(:invalid, .invalid) {
+      @include checkbox-tokens.error;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.error-selected;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include checkbox-tokens.disabled;
+
+      &:where(:checked, .checked, :indeterminate, .indeterminate) {
+        @include checkbox-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      appearance: none;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background-image: none;
+      outline: none;
+
+      &::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;
+      }
+
+      &::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);
+      }
+
+      &:is(:checked, .checked)::before {
+        content: 'check';
+      }
+
+      &:is(:indeterminate, .indeterminate)::before {
+        content: 'remove';
+      }
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design checkbox component. */
+        'md-checkbox': Checkbox;
+    }
+}
+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/constraint-validation.js").ConstraintValidation>>;
+/**
+ * A Material Design checkbox component.
+ */
+export declare class Checkbox extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the checkbox is invalid.
+     */
+    error: boolean;
+    /**
+     * Whether or not the checkbox is selected.
+     */
+    checked: boolean;
+    /**
+     * The default checked state of the checkbox.
+     */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * Whether or not the checkbox is indeterminate.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+     */
+    indeterminate: boolean;
+    /**
+     * When true, require the checkbox to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    required: boolean;
+    /**
+     * The value of the checkbox that is submitted with a form when selected.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+     */
+    value: string;
+    private readonly input;
+    private dirty;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLInputElement;
+}
+export {};

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

@@ -0,0 +1,167 @@
+/**
+ * @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 { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
+import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } 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 checkboxStyles from './checkbox.css' with { type: 'css' }; // github-only
+// import checkboxStyles from './checkbox.cssresult.js'; // google3-only
+import { checkbox } from './checkbox.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(LitElement))));
+/**
+ * A Material Design checkbox component.
+ */
+let Checkbox = class Checkbox extends baseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not the checkbox is invalid.
+         */
+        this.error = false;
+        /**
+         * Whether or not the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Whether or not the checkbox is indeterminate.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
+         */
+        this.indeterminate = false;
+        /**
+         * When true, require the checkbox to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
+        /**
+         * The value of the checkbox that is submitted with a form when selected.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+         */
+        this.value = 'on';
+        this.dirty = false;
+    }
+    /**
+     * The default checked state of the checkbox.
+     */
+    get defaultChecked() {
+        return this.hasAttribute('checked');
+    }
+    set defaultChecked(value) {
+        this.toggleAttribute('checked', value || false);
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel, ariaInvalid } = this;
+        return html `
+      <input
+        part="checkbox"
+        class="${checkbox({ invalid: this.error })}"
+        type="checkbox"
+        aria-checked=${this.indeterminate ? 'mixed' : nothing}
+        aria-label=${ariaLabel || nothing}
+        aria-invalid=${ariaInvalid || this.error || nothing}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        .indeterminate=${this.indeterminate}
+        .checked=${this.checked}
+        @input=${this.handleInput}
+        @change=${this.handleChange} />
+    `;
+    }
+    handleInput(event) {
+        this.dirty = true;
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = target.indeterminate;
+        // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+    }
+    handleChange(event) {
+        this.dirty = true;
+        // <input> 'change' event is not composed, re-dispatch it.
+        redispatchEvent(this, event);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'checked' && this.dirty) {
+            // The 'checked' attribute does not update checkboxes that have been
+            // interacted with.
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    formResetCallback() {
+        this.dirty = false;
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new CheckboxValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.input;
+    }
+};
+/** @nocollapse */
+Checkbox.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+Checkbox.styles = [
+    focusRingStyles,
+    rippleStyles,
+    checkboxStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .checkbox {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    property()
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    query('input', true)
+], Checkbox.prototype, "input", void 0);
+Checkbox = __decorate([
+    customElement('md-checkbox')
+], Checkbox);
+export { Checkbox };
+//# sourceMappingURL=md-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-checkbox.js","sourceRoot":"","sources":["md-checkbox.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 {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '@material/web/labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '@material/web/labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '@material/web/labs/behaviors/validators/checkbox-validator.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, query} 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 checkboxStyles from './checkbox.css' with {type: 'css'}; // github-only\n// import checkboxStyles from './checkbox.cssresult.js'; // google3-only\n\nimport {checkbox} from './checkbox.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design checkbox component. */\n    'md-checkbox': Checkbox;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A Material Design checkbox component.\n */\n@customElement('md-checkbox')\nexport class Checkbox 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    checkboxStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .checkbox {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the checkbox is invalid.\n   */\n  @property({type: Boolean}) error = false;\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * The default checked state of the checkbox.\n   */\n  get defaultChecked(): boolean {\n    return this.hasAttribute('checked');\n  }\n  set defaultChecked(value: boolean) {\n    this.toggleAttribute('checked', value || false);\n  }\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @query('input', true)\n  private readonly input!: HTMLInputElement | null;\n  private dirty = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    return html`\n      <input\n        part=\"checkbox\"\n        class=\"${checkbox({invalid: this.error})}\"\n        type=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : nothing}\n        aria-label=${ariaLabel || nothing}\n        aria-invalid=${ariaInvalid || this.error || nothing}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        .indeterminate=${this.indeterminate}\n        .checked=${this.checked}\n        @input=${this.handleInput}\n        @change=${this.handleChange} />\n    `;\n  }\n\n  private handleInput(event: Event) {\n    this.dirty = true;\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    this.dirty = true;\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'checked' && this.dirty) {\n      // The 'checked' attribute does not update checkboxes that have been\n      // interacted with.\n      return;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  override [getFormValue]() {\n    return this.checked ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    this.dirty = false;\n    this.checked = this.defaultChecked;\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}

package/labs/gb/components/focus/focus-ring.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}/*# sourceMappingURL=focus-ring.css.map */

package/labs/gb/components/focus/focus-ring.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["focus-ring.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,cACA,0BACE,oCAEE,2BACA,uBACA,6BAEA,kCACA,wCACA,oEAaA,uNAIE,8DACA,yBACA,+IAOF,uNAIE,8DACA,0BACA,+IAMJ,iCACE,KACE,gBAGF,GACE,mBAIJ,mCACE,KACE,mBAIJ,iCACE,KACE,gBACA,iBAEF,GACE,kBACA,qBAIJ,mCACE,KACE,kBACA","file":"focus-ring.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/focus/focus-ring.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=focus-ring.cssresult.js.map

package/labs/gb/components/focus/focus-ring.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.cssresult.js","sourceRoot":"","sources":["focus-ring.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,sEAAsE;AACtE,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/focus/focus-ring.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;@layer md.comp.focus-ring{.focus-ring-outer,.focus-ring-inner{--focus-ring-outline: none;--focus-ring-offset: 0;--focus-ring-animation: none;outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset);animation:var(--focus-ring-animation),var(--ripple-animation, none)}.focus-ring-outer:is(:focus-visible,.focus-visible),.focus-ring-outer:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-outer,:host(:focus-visible) .focus-ring-outer.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: 2px;--focus-ring-animation: focus-ring-outer-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}.focus-ring-inner:is(:focus-visible,.focus-visible),.focus-ring-inner:has(.focus-ring-target:focus-visible),.focus-ring-target:focus-visible .focus-ring-inner,:host(:focus-visible) .focus-ring-inner.focus-ring-host{--focus-ring-outline: 3px solid var(--md-sys-color-secondary);--focus-ring-offset: -3px;--focus-ring-animation: focus-ring-inner-grow 150ms cubic-bezier(0.2, 0, 0, 1), focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1)}@keyframes focus-ring-outer-grow{from{outline-width:0}to{outline-width:8px}}@keyframes focus-ring-outer-shrink{from{outline-width:8px}}@keyframes focus-ring-inner-grow{from{outline-width:0;outline-offset:0}to{outline-width:8px;outline-offset:-8px}}@keyframes focus-ring-inner-shrink{from{outline-width:8px;outline-offset:-8px}}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/focus/focus-ring.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Focus ring type configuration types. */
+export type FocusRingType = 'outer' | 'inner';
+/** Focus ring type configurations. */
+export declare const FOCUS_RING_TYPES: {
+    readonly outer: "outer";
+    readonly inner: "inner";
+};
+/** Focus ring classes. */
+export declare const FOCUS_RING_CLASSES: {
+    focusRingOuter: string;
+    focusRingInner: string;
+    focusRingTarget: string;
+    focusRingHost: string;
+    focusVisible: string;
+};
+/** The state provided to the `focusRingClasses()` function. */
+export interface FocusRingClassesState {
+    /** The type of focus ring. Defaults to outer. */
+    type?: FocusRingType;
+    /** Emulates `:focus-visible`. */
+    focusVisible?: boolean;
+}
+/**
+ * Returns the focus ring classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the focus ring.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function focusRingClasses({ type, focusVisible, }?: FocusRingClassesState): ClassInfo;

package/labs/gb/components/focus/focus-ring.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+/** Focus ring type configurations. */
+export const FOCUS_RING_TYPES = {
+    outer: 'outer',
+    inner: 'inner',
+};
+/** Focus ring classes. */
+export const FOCUS_RING_CLASSES = {
+    focusRingOuter: 'focus-ring-outer',
+    focusRingInner: 'focus-ring-inner',
+    focusRingTarget: 'focus-ring-target',
+    focusRingHost: 'focus-ring-host',
+    focusVisible: PSEUDO_CLASSES.focusVisible,
+};
+/**
+ * Returns the focus ring classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the focus ring.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function focusRingClasses({ type = FOCUS_RING_TYPES.outer, focusVisible = false, } = {}) {
+    return {
+        [FOCUS_RING_CLASSES.focusRingOuter]: type === FOCUS_RING_TYPES.outer || !type,
+        [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,
+        [FOCUS_RING_CLASSES.focusVisible]: focusVisible,
+    };
+}
+//# sourceMappingURL=focus-ring.js.map

package/labs/gb/components/focus/focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAMzF,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX,0BAA0B;AAC1B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,cAAc,EAAE,kBAAkB;IAClC,cAAc,EAAE,kBAAkB;IAClC,eAAe,EAAE,mBAAmB;IACpC,aAAa,EAAE,iBAAiB;IAChC,YAAY,EAAE,cAAc,CAAC,YAAY;CAC1C,CAAC;AAUF;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,IAAI,GAAG,gBAAgB,CAAC,KAAK,EAC7B,YAAY,GAAG,KAAK,MACK,EAAE;IAC3B,OAAO;QACL,CAAC,kBAAkB,CAAC,cAAc,CAAC,EACjC,IAAI,KAAK,gBAAgB,CAAC,KAAK,IAAI,CAAC,IAAI;QAC1C,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,IAAI,KAAK,gBAAgB,CAAC,KAAK;QACpE,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,YAAY;KAChD,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Focus ring type configuration types. */\nexport type FocusRingType = 'outer' | 'inner';\n\n/** Focus ring type configurations. */\nexport const FOCUS_RING_TYPES = {\n  outer: 'outer',\n  inner: 'inner',\n} as const;\n\n/** Focus ring classes. */\nexport const FOCUS_RING_CLASSES = {\n  focusRingOuter: 'focus-ring-outer',\n  focusRingInner: 'focus-ring-inner',\n  focusRingTarget: 'focus-ring-target',\n  focusRingHost: 'focus-ring-host',\n  focusVisible: PSEUDO_CLASSES.focusVisible,\n};\n\n/** The state provided to the `focusRingClasses()` function. */\nexport interface FocusRingClassesState {\n  /** The type of focus ring. Defaults to outer. */\n  type?: FocusRingType;\n  /** Emulates `:focus-visible`. */\n  focusVisible?: boolean;\n}\n\n/**\n * Returns the focus ring classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the focus ring.\n * @return An object of class names and truthy values if they apply.\n */\nexport function focusRingClasses({\n  type = FOCUS_RING_TYPES.outer,\n  focusVisible = false,\n}: FocusRingClassesState = {}): ClassInfo {\n  return {\n    [FOCUS_RING_CLASSES.focusRingOuter]:\n      type === FOCUS_RING_TYPES.outer || !type,\n    [FOCUS_RING_CLASSES.focusRingInner]: type === FOCUS_RING_TYPES.inner,\n    [FOCUS_RING_CLASSES.focusVisible]: focusVisible,\n  };\n}\n"]}

package/labs/gb/components/focus/focus-ring.scss

@@ -0,0 +1,91 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use '../../../../tokens/versions/latest/sass/md-sys-state-focus-indicator';
+// go/keep-sorted end
+
+@layer md.sys;
+@layer md.comp.focus-ring {
+  .focus-ring-outer,
+  .focus-ring-inner {
+    --focus-ring-outline: none;
+    --focus-ring-offset: 0;
+    --focus-ring-animation: none;
+
+    outline: var(--focus-ring-outline);
+    outline-offset: var(--focus-ring-offset);
+    animation: var(--focus-ring-animation), var(--ripple-animation, none);
+  }
+
+  // Focus rings support the following DOM use cases:
+  // 1. Focus ring and interactive element are the same.
+  // 2. Focus ring is a parent of a child interactive `.focus-ring-target`.
+  // 3. Focus ring is a child of a parent interactive `.focus-ring-target`.
+  // 4. Focus ring has `.focus-ring-host` and is a within an interactive shadow DOM host.
+  //
+  // Pseudo class emulation is only needed for the focus ring element, not for
+  // the target or host elements.
+
+  .focus-ring-outer {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$outer-offset};
+      --focus-ring-animation: focus-ring-outer-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-outer-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  .focus-ring-inner {
+    &:is(:focus-visible, .focus-visible),
+    &:has(.focus-ring-target:focus-visible),
+    .focus-ring-target:focus-visible &,
+    :host(:focus-visible) &.focus-ring-host {
+      --focus-ring-outline: #{md-sys-state-focus-indicator.$thickness} solid var(--md-sys-color-secondary);
+      --focus-ring-offset: #{md-sys-state-focus-indicator.$inner-offset};
+      --focus-ring-animation: focus-ring-inner-grow 150ms
+          cubic-bezier(0.2, 0, 0, 1),
+        focus-ring-inner-shrink 450ms 150ms cubic-bezier(0.2, 0, 0, 1);
+    }
+  }
+
+  @keyframes focus-ring-outer-grow {
+    from {
+      outline-width: 0;
+    }
+
+    to {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-outer-shrink {
+    from {
+      outline-width: 8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-grow {
+    from {
+      outline-width: 0;
+      outline-offset: 0;
+    }
+    to {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+
+  @keyframes focus-ring-inner-shrink {
+    from {
+      outline-width: 8px;
+      outline-offset: -8px;
+    }
+  }
+}

package/labs/gb/components/ripple/ripple.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.ripple{@property --ripple-scale{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-hover-opacity{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-press-opacity{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-x{syntax:"<percentage>";inherits:false;initial-value:50%}@property --ripple-y{syntax:"<percentage>";inherits:false;initial-value:50%}.ripple{--ripple-color: currentColor;--ripple-press-transition: --ripple-press-opacity 375ms linear;--ripple-transition: --ripple-hover-opacity 15ms linear, var(--ripple-press-transition);--ripple-animation: ripple-release 375ms linear;--ripple: radial-gradient( hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity)) ), radial-gradient( circle at var(--ripple-x) var(--ripple-y), hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity)) var(--ripple-scale), transparent calc(var(--ripple-scale) * 1.35) );background-image:var(--ripple);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation, none)}.ripple:is(:hover,.hover),.ripple:has(.ripple-target:hover),.ripple-target:hover .ripple,:host(:hover) .ripple.ripple-host{--ripple-hover-opacity: 8%}.ripple:is(:active,.active),.ripple:has(.ripple-target:active),.ripple-target:active .ripple,:host(:active) .ripple.ripple-host{--ripple-press-opacity: 10%;--ripple-press-transition: --ripple-press-opacity 100ms linear;--ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1)}.ripple:is(:disabled,.disabled){--ripple: none}@keyframes ripple-press{from{--ripple-scale: 20%}to{--ripple-scale: 100%;--ripple-x: 50%;--ripple-y: 50%}}@keyframes ripple-release{from{--ripple-scale: 100%}to{--ripple-scale: 100%}}}/*# sourceMappingURL=ripple.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["ripple.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAKA,cACA,sBACE,yBACE,sBACA,eACA,iBAEF,iCACE,sBACA,eACA,iBAEF,iCACE,sBACA,eACA,iBAEF,qBACE,sBACA,eACA,kBAEF,qBACE,sBACA,eACA,kBAGF,QACE,6BACA,+DACA,wFAEA,gDACA,kSAUA,+BACA,oCACA,oEAWA,2HAIE,2BAGF,gIAIE,4BACA,+DACA,2EAGF,gCACE,eAIJ,wBACE,KACE,oBAEF,GACE,qBACA,gBACA,iBAIJ,0BACE,KACE,qBAEF,GACE","file":"ripple.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/ripple/ripple.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys;@layer md.comp.ripple{@property --ripple-scale{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-hover-opacity{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-press-opacity{syntax:"<percentage>";inherits:false;initial-value:0%}@property --ripple-x{syntax:"<percentage>";inherits:false;initial-value:50%}@property --ripple-y{syntax:"<percentage>";inherits:false;initial-value:50%}.ripple{--ripple-color: currentColor;--ripple-press-transition: --ripple-press-opacity 375ms linear;--ripple-transition: --ripple-hover-opacity 15ms linear, var(--ripple-press-transition);--ripple-animation: ripple-release 375ms linear;--ripple: radial-gradient( hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity)) ), radial-gradient( circle at var(--ripple-x) var(--ripple-y), hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity)) var(--ripple-scale), transparent calc(var(--ripple-scale) * 1.35) );background-image:var(--ripple);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation, none)}.ripple:is(:hover,.hover),.ripple:has(.ripple-target:hover),.ripple-target:hover .ripple,:host(:hover) .ripple.ripple-host{--ripple-hover-opacity: 8%}.ripple:is(:active,.active),.ripple:has(.ripple-target:active),.ripple-target:active .ripple,:host(:active) .ripple.ripple-host{--ripple-press-opacity: 10%;--ripple-press-transition: --ripple-press-opacity 100ms linear;--ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1)}.ripple:is(:disabled,.disabled){--ripple: none}@keyframes ripple-press{from{--ripple-scale: 20%}to{--ripple-scale: 100%;--ripple-x: 50%;--ripple-y: 50%}}@keyframes ripple-release{from{--ripple-scale: 100%}to{--ripple-scale: 100%}}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=ripple.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.cssresult.js","sourceRoot":"","sources":["ripple.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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/ripple/ripple.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;@layer md.comp.ripple{@property --ripple-scale{syntax:\"<percentage>\";inherits:false;initial-value:0%}@property --ripple-hover-opacity{syntax:\"<percentage>\";inherits:false;initial-value:0%}@property --ripple-press-opacity{syntax:\"<percentage>\";inherits:false;initial-value:0%}@property --ripple-x{syntax:\"<percentage>\";inherits:false;initial-value:50%}@property --ripple-y{syntax:\"<percentage>\";inherits:false;initial-value:50%}.ripple{--ripple-color: currentColor;--ripple-press-transition: --ripple-press-opacity 375ms linear;--ripple-transition: --ripple-hover-opacity 15ms linear, var(--ripple-press-transition);--ripple-animation: ripple-release 375ms linear;--ripple: radial-gradient( hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity)) ), radial-gradient( circle at var(--ripple-x) var(--ripple-y), hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity)) var(--ripple-scale), transparent calc(var(--ripple-scale) * 1.35) );background-image:var(--ripple);transition:var(--ripple-transition);animation:var(--ripple-animation),var(--focus-ring-animation, none)}.ripple:is(:hover,.hover),.ripple:has(.ripple-target:hover),.ripple-target:hover .ripple,:host(:hover) .ripple.ripple-host{--ripple-hover-opacity: 8%}.ripple:is(:active,.active),.ripple:has(.ripple-target:active),.ripple-target:active .ripple,:host(:active) .ripple.ripple-host{--ripple-press-opacity: 10%;--ripple-press-transition: --ripple-press-opacity 100ms linear;--ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1)}.ripple:is(:disabled,.disabled){--ripple: none}@keyframes ripple-press{from{--ripple-scale: 20%}to{--ripple-scale: 100%;--ripple-x: 50%;--ripple-y: 50%}}@keyframes ripple-release{from{--ripple-scale: 100%}to{--ripple-scale: 100%}}}\n`;\nexport default styles.styleSheet!;\n"]}