@maicol07/material-web 2.3.0 → 2.5.1

package/labs/gb/components/menu/menu.scss

@@ -0,0 +1,174 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'menu-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;
+@layer md.comp.menu {
+  .menu {
+    & {
+      @include menu-tokens.root;
+    }
+    &.menu-vibrant {
+      @include menu-tokens.vibrant;
+      --menu-vibrant: true;
+    }
+
+    & {
+      flex-direction: column;
+      box-shadow: var(--container-elevation);
+      border-radius: var(--container-shape);
+      background-color: var(--container-color);
+      padding-block: var(--group-padding);
+    }
+
+    &:popover-open,
+    &.menu-host {
+      display: flex;
+    }
+
+    &:popover-open,
+    :host(:popover-open):has(&.menu-host) {
+      position-area: end span-end;
+      border: none;
+    }
+
+    :host(:popover-open):has(&.menu-host) {
+      overflow: visible;
+      background: none;
+      padding: 0;
+    }
+
+    &.menu-host {
+      overflow: auto;
+    }
+
+    .divider,
+    ::slotted(.divider) {
+      margin: 8px 16px;
+    }
+  }
+
+  .menu-item {
+    & {
+      @include menu-tokens.item;
+    }
+    &:first-child {
+      @include menu-tokens.item-first-child;
+    }
+    &:last-child {
+      @include menu-tokens.item-last-child;
+    }
+    @container style(--menu-vibrant: true) {
+      & {
+        @include menu-tokens.item-vibrant;
+      }
+      &:where(:hover, .hover) {
+        @include menu-tokens.item-vibrant-hovered;
+      }
+      &:where(:focus-within, .focus) {
+        @include menu-tokens.item-vibrant-focused;
+      }
+      &:where(:active, .active) {
+        @include menu-tokens.item-vibrant-pressed;
+      }
+    }
+
+    &:is(:checked, .checked) {
+      @include menu-tokens.item-selected;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-selected-vibrant;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include menu-tokens.item-disabled;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-disabled-vibrant;
+      }
+      &:where(:checked, .checked) {
+        @include menu-tokens.item-disabled-selected;
+      }
+    }
+
+    & {
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      box-sizing: border-box;
+      gap: var(--between-space);
+      min-height: calc(var(--height) + 4px);
+      border-radius: var(--shape);
+      padding-block: var(--top-space) var(--bottom-space);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      background-image: none;
+      outline: none;
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+      font-variation-settings: var(--label-text-axes);
+    }
+
+    &::before {
+      display: flex;
+      content: '';
+      position: absolute;
+      inset: 2px 4px;
+      z-index: -1;
+      border-radius: inherit;
+      background-color: var(--container-color);
+      background-image: var(--ripple);
+      animation: var(--ripple-animation), var(--focus-ring-animation);
+      transition: var(--ripple-transition);
+      outline: var(--focus-ring-outline);
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+
+    .menu-item-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .menu-item-supporting-text {
+      color: var(--supporting-text-color);
+      font: var(--supporting-text);
+      letter-spacing: var(--supporting-text-tracking);
+      font-variation-settings: var(--supporting-text-axes);
+    }
+
+    .menu-item-trailing-text {
+      color: var(--trailing-supporting-text-color);
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+      font-variation-settings: var(--trailing-supporting-text-axes);
+    }
+
+    .menu-item-leading,
+    .menu-item-trailing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .menu-item-leading {
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+
+    .menu-item-trailing {
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+  }
+}

package/labs/gb/components/radio/_radio-tokens.scss

@@ -0,0 +1,39 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --icon-color: var(--md-sys-color-on-surface-variant);
+  --icon-size: 20px;
+  --state-layer-color: var(--md-sys-color-on-surface);
+  --state-layer-shape: 50%;
+  --state-layer-size: 40px;
+  // LINT.ThenChange(md-radio.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin hovered {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin focused {
+  --icon-color: var(--md-sys-color-on-surface);
+}
+
+@mixin pressed {
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected {
+  --icon-color: var(--md-sys-color-primary);
+  --state-layer-color: var(--md-sys-color-primary);
+}
+
+@mixin selected-pressed {
+  --state-layer-color: var(--md-sys-color-on-surface);
+}
+
+@mixin disabled {
+  --icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
+import { RadioValidator } from '../../../behaviors/validators/radio-validator.js';
+declare const radioBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("../../../behaviors/focusable.js").Focusable) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>;
+/**
+ * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
+ */
+export declare class RadioElement extends radioBaseClass {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    /**
+     * The default checked state of the radio.
+     */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /**
+     * Whether or not the radio is required. If any radio is required in a group,
+     * all radios are implicitly required.
+     */
+    required: boolean;
+    /**
+     * The element value to use in form submission when checked.
+     */
+    value: string;
+    private readonly radio;
+    private readonly selectionController;
+    /**
+     * Mimics the behavior of <input> dirty checkedness, where the `checked`
+     * attribute only updates the checked state if the radio has not been
+     * interacted with.
+     *
+     * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+     */
+    private dirtyCheckedness;
+    private isFocused;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): RadioValidator;
+    [getValidityAnchor](): HTMLElement;
+}
+export {};

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

@@ -0,0 +1,192 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { css, html, isServer, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { SingleSelectionController } from '../../../../radio/internal/single-selection-controller.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../../behaviors/focusable.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '../../../behaviors/form-associated.js';
+import { RadioValidator } from '../../../behaviors/validators/radio-validator.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import radioStyles from './radio.css' with { type: 'css' }; // github-only
+// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only
+import { radio } from './radio.js';
+// Separate variable needed for closure.
+const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))));
+/**
+ * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
+ */
+export class RadioElement extends radioBaseClass {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[internals].ariaChecked === 'true';
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[internals].ariaChecked = String(checked);
+        this.requestUpdate('checked', wasChecked);
+        this.selectionController.handleCheckedChange();
+    }
+    /**
+     * The default checked state of the radio.
+     */
+    get defaultChecked() {
+        return this.hasAttribute('checked');
+    }
+    set defaultChecked(value) {
+        this.toggleAttribute('checked', value || false);
+    }
+    constructor() {
+        super();
+        /**
+         * Whether or not the radio is required. If any radio is required in a group,
+         * all radios are implicitly required.
+         */
+        this.required = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.selectionController = new SingleSelectionController(this);
+        /**
+         * Mimics the behavior of <input> dirty checkedness, where the `checked`
+         * attribute only updates the checked state if the radio has not been
+         * interacted with.
+         *
+         * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+         */
+        this.dirtyCheckedness = false;
+        this.isFocused = false;
+        if (isServer)
+            return;
+        this[internals].role = 'radio';
+        this.addController(this.selectionController);
+        setupDispatchHooks(this, 'click', 'keydown');
+        this.addEventListener('click', (event) => {
+            // Return if disabled, or already checked since clicking on a checked
+            // radio does not dispatch events.
+            if (this.disabled || this.checked)
+                return;
+            afterDispatch(event, () => {
+                if (event.defaultPrevented)
+                    return;
+                // Per spec, clicking on a radio input always selects it.
+                this.checked = true;
+                this.dirtyCheckedness = true;
+                this.dispatchEvent(new Event('change', { bubbles: true }));
+                this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            });
+        });
+        this.addEventListener('keydown', (event) => {
+            afterDispatch(event, () => {
+                if (event.key !== ' ' || event.defaultPrevented) {
+                    return;
+                }
+                this.click();
+            });
+        });
+        this.addEventListener('focus', () => {
+            this.isFocused = true;
+        });
+        this.addEventListener('blur', () => {
+            this.isFocused = false;
+        });
+    }
+    render() {
+        return html `<div
+      part="radio"
+      class="ripple-host focus-ring-host ${radio({
+            checked: this.checked,
+            disabled: this.disabled,
+            focus: this.isFocused,
+        })}"></div>`;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'checked' && this.dirtyCheckedness) {
+            // The 'checked' attribute does not update radios 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.dirtyCheckedness = false;
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    [createValidator]() {
+        return new RadioValidator(() => {
+            if (!this.selectionController) {
+                // Validation runs on superclass construction, so selection controller
+                // might not actually be ready until this class constructs.
+                return [this];
+            }
+            return this.selectionController.controls;
+        });
+    }
+    [getValidityAnchor]() {
+        return this.radio;
+    }
+}
+/** @nocollapse */
+RadioElement.styles = [
+    focusRingStyles,
+    rippleStyles,
+    radioStyles,
+    css `
+      :host {
+        display: inline-flex;
+        outline: none;
+      }
+      .radio {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], RadioElement.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], RadioElement.prototype, "required", void 0);
+__decorate([
+    property()
+], RadioElement.prototype, "value", void 0);
+__decorate([
+    query('.radio', true)
+], RadioElement.prototype, "radio", void 0);
+__decorate([
+    state()
+], RadioElement.prototype, "isFocused", void 0);
+//# sourceMappingURL=radio-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-element.js","sourceRoot":"","sources":["radio-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {SingleSelectionController} from '../../../../radio/internal/single-selection-controller.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {RadioValidator} from '../../../behaviors/validators/radio-validator.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport radioStyles from './radio.css' with {type: 'css'}; // github-only\n// import {styles as radioStyles} from './radio.cssresult.js'; // google3-only\n\nimport {radio} from './radio.js';\n\n// Separate variable needed for closure.\nconst radioBaseClass = mixinConstraintValidation(\n  mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))),\n);\n\n/**\n * A Material Design radio component.\n *\n * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed\n * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles\n * @csspart radio - The radio's root element.\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-shape\n * @cssprop --state-layer-size\n */\nexport class RadioElement extends radioBaseClass {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    radioStyles,\n    css`\n      :host {\n        display: inline-flex;\n        outline: none;\n      }\n      .radio {\n        flex: 1;\n      }\n    `,\n  ];\n\n  /**\n   * Whether or not the radio is selected.\n   */\n  @property({type: Boolean})\n  get checked() {\n    return this[internals].ariaChecked === 'true';\n  }\n  set checked(checked: boolean) {\n    const wasChecked = this.checked;\n    if (wasChecked === checked) {\n      return;\n    }\n\n    this[internals].ariaChecked = String(checked);\n    this.requestUpdate('checked', wasChecked);\n    this.selectionController.handleCheckedChange();\n  }\n\n  /**\n   * The default checked state of the radio.\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 radio is required. If any radio is required in a group,\n   * all radios are implicitly required.\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @query('.radio', true) private readonly radio!: HTMLElement;\n  private readonly selectionController = new SingleSelectionController(this);\n  /**\n   * Mimics the behavior of <input> dirty checkedness, where the `checked`\n   * attribute only updates the checked state if the radio has not been\n   * interacted with.\n   *\n   * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag\n   */\n  private dirtyCheckedness = false;\n  @state() private isFocused = false;\n\n  constructor() {\n    super();\n    if (isServer) return;\n    this[internals].role = 'radio';\n    this.addController(this.selectionController);\n    setupDispatchHooks(this, 'click', 'keydown');\n    this.addEventListener('click', (event) => {\n      // Return if disabled, or already checked since clicking on a checked\n      // radio does not dispatch events.\n      if (this.disabled || this.checked) return;\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) return;\n        // Per spec, clicking on a radio input always selects it.\n        this.checked = true;\n        this.dirtyCheckedness = true;\n        this.dispatchEvent(new Event('change', {bubbles: true}));\n        this.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n      });\n    });\n\n    this.addEventListener('keydown', (event) => {\n      afterDispatch(event, () => {\n        if (event.key !== ' ' || event.defaultPrevented) {\n          return;\n        }\n\n        this.click();\n      });\n    });\n\n    this.addEventListener('focus', () => {\n      this.isFocused = true;\n    });\n\n    this.addEventListener('blur', () => {\n      this.isFocused = false;\n    });\n  }\n\n  protected override render() {\n    return html`<div\n      part=\"radio\"\n      class=\"ripple-host focus-ring-host ${radio({\n        checked: this.checked,\n        disabled: this.disabled,\n        focus: this.isFocused,\n      })}\"></div>`;\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'checked' && this.dirtyCheckedness) {\n      // The 'checked' attribute does not update radios 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.dirtyCheckedness = 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 RadioValidator(() => {\n      if (!this.selectionController) {\n        // Validation runs on superclass construction, so selection controller\n        // might not actually be ready until this class constructs.\n        return [this];\n      }\n\n      return this.selectionController.controls as [\n        RadioElement,\n        ...RadioElement[],\n      ];\n    });\n  }\n\n  override [getValidityAnchor]() {\n    return this.radio;\n  }\n}\n"]}

package/labs/gb/components/radio/radio.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.radio{.radio{--icon-color: var(--md-sys-color-on-surface-variant);--icon-size: 20px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.radio:where(:hover,.hover){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:focus-within,.focus){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:active,.active){--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked){--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.radio:is(:disabled,.disabled){--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.radio{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;--icon: "radio_button_unchecked"}.radio::before{content:var(--icon);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font);width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{--icon: "radio_button_checked"}.radio::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)}}/*# sourceMappingURL=radio.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["radio.scss","_radio-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,qBAEI,OCLF,qDACA,kBACA,oDACA,yBACA,yBDII,4BCCJ,6CDEI,mCCEJ,6CDCI,8BCGJ,iDDCE,6BCGF,0CACA,iDDDI,oDCKJ,oDDDE,+BCKF,mEDDE,OACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,iCAEA,eACE,oBACA,wBACA,4CACA,uBACA,eAEF,qCACE,+BAEF,cACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"radio.css"}

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/radio/radio.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.radio{.radio{--icon-color: var(--md-sys-color-on-surface-variant);--icon-size: 20px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.radio:where(:hover,.hover){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:focus-within,.focus){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:active,.active){--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked){--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.radio:is(:disabled,.disabled){--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.radio{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;--icon: "radio_button_unchecked"}.radio::before{content:var(--icon);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font);width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{--icon: "radio_button_checked"}.radio::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)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=radio.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.cssresult.js","sourceRoot":"","sources":["radio.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iEAAiE;AACjE,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/radio/radio.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.radio{.radio{--icon-color: var(--md-sys-color-on-surface-variant);--icon-size: 20px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-shape: 50%;--state-layer-size: 40px}.radio:where(:hover,.hover){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:focus-within,.focus){--icon-color: var(--md-sys-color-on-surface)}.radio:where(:active,.active){--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked){--icon-color: var(--md-sys-color-primary);--state-layer-color: var(--md-sys-color-primary)}.radio:is(:checked,.checked):where(:active,.active){--state-layer-color: var(--md-sys-color-on-surface)}.radio:is(:disabled,.disabled){--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%)}.radio{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background-image:none;outline:none;--icon: \"radio_button_unchecked\"}.radio::before{content:var(--icon);color:var(--icon-color);font:var(--icon-size)/1 var(--md-icon-font);width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{--icon: \"radio_button_checked\"}.radio::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)}}\n`;\nexport default styles.styleSheet!;\n"]}

package/labs/gb/components/radio/radio.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';
+/** Radio classes. */
+export declare const RADIO_CLASSES: {
+    readonly radio: "radio";
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly checked: string;
+    readonly disabled: string;
+};
+/** The state provided to the `radioClasses()` function. */
+export interface RadioClassesState {
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the radio classes to apply to an element based on the given state.
+ *
+ * @param state The state of the radio.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function radioClasses({ hover, focus, active, checked, disabled, }?: RadioClassesState): ClassInfo;
+/**
+ * Sets up radio functionality for the given element.
+ *
+ * @param radio The element on which to set up radio functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupRadio(radio: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds radio styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <input type="radio" class="${radio()}" name="radio-group">
+ *   <input type="radio" class="${radio()}" name="radio-group">
+ *   <input type="radio" class="${radio()}" name="radio-group">
+ * `;
+ * ```
+ */
+export declare const radio: (state?: RadioClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;