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

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

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Menu context provided to menu items. */
+export interface MenuContext {
+    /** The item's parent menu. */
+    readonly menu: HTMLElement;
+    /** Returns the menu's items. */
+    getItems: () => HTMLElement[];
+    /** Callback for menu items to register themselves with the menu. */
+    itemConnected(item: HTMLElement): void;
+    /** Callback for menu items to unregister themselves with the menu. */
+    itemDisconnected(item: HTMLElement): void;
+}
+/** Menu context to provide to menu items. */
+export declare const menuContext: {
+    __context__: MenuContext;
+};
+/** Menu color configuration types. */
+export type MenuColor = 'standard' | 'vibrant';
+/** Menu color configurations. */
+export declare const MENU_COLORS: {
+    readonly standard: "standard";
+    readonly vibrant: "vibrant";
+};
+/** Menu classes. */
+export declare const MENU_CLASSES: {
+    readonly menu: "menu";
+    readonly menuVibrant: "menu-vibrant";
+};
+/** The state provided to the `menuClasses()` function. */
+export interface MenuClassesState {
+    /** The color of the menu. */
+    color?: MenuColor;
+}
+/**
+ * Returns the menu classes to apply to an element based on the given state.
+ *
+ * @param state The state of the menu.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function menuClasses({ color }?: MenuClassesState): ClassInfo;
+/**
+ * Sets up menu functionality for the given element.
+ *
+ * @param menu The element on which to set up menu functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupMenu(menu: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds menu styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menu()}">TODO: add examples</div>`;
+ * ```
+ */
+export declare const menu: (state?: MenuClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+/** Whether a group of menu items are single or multiple selectable. */
+export type MenuItemCheckable = 'single' | 'multiple';
+/** Context provided to menu items for the checkable state of a menu item group. */
+export declare const menuItemCheckable: {
+    __context__: MenuItemCheckable;
+};
+/** Menu item classes. */
+export declare const MENU_ITEM_CLASSES: {
+    readonly menuItem: "menu-item";
+    readonly checked: string;
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly disabled: string;
+};
+/** The state provided to the `menuItemClasses()` function. */
+export interface MenuItemClassesState {
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the menu item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the menu item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function menuItemClasses({ checked, hover, focus, active, disabled, }?: MenuItemClassesState): ClassInfo;
+/**
+ * Sets up menu item functionality for the given element.
+ *
+ * @param menuItem The element on which to set up menu item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupMenuItem(menuItem: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds menu item styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menuItem()}">TODO: add examples</div>`;
+ * ```
+ */
+export declare const menuItem: (state?: MenuItemClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/menu/menu.js

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createContext } from '@lit/context';
+import { FOCUS_RING_TYPES, focusRingClasses, } from '@material/web/labs/gb/components/focus/focus-ring.js';
+import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
+import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+/** Menu context to provide to menu items. */
+export const menuContext = createContext(Symbol('menuContext'));
+/** Menu color configurations. */
+export const MENU_COLORS = {
+    standard: 'standard',
+    vibrant: 'vibrant',
+};
+/** Menu classes. */
+export const MENU_CLASSES = {
+    menu: 'menu',
+    menuVibrant: 'menu-vibrant',
+};
+/**
+ * Returns the menu classes to apply to an element based on the given state.
+ *
+ * @param state The state of the menu.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function menuClasses({ color } = {}) {
+    return {
+        [MENU_CLASSES.menu]: true,
+        [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,
+    };
+}
+/**
+ * Sets up menu functionality for the given element.
+ *
+ * @param menu The element on which to set up menu functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupMenu(menu, opts) {
+    // TODO: add event listeners from <md-menu>
+}
+/**
+ * A Lit directive that adds menu styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menu()}">TODO: add examples</div>`;
+ * ```
+ */
+export const menu = createClassMapDirective({
+    getClasses: menuClasses,
+    setupElement: setupMenu,
+});
+/** Context provided to menu items for the checkable state of a menu item group. */
+export const menuItemCheckable = createContext(Symbol('menuItemCheckable'));
+/** Menu item classes. */
+export const MENU_ITEM_CLASSES = {
+    menuItem: 'menu-item',
+    checked: PSEUDO_CLASSES.checked,
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the menu item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the menu item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function menuItemClasses({ checked = false, hover = false, focus = false, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses({ type: FOCUS_RING_TYPES.inner }),
+        [MENU_ITEM_CLASSES.menuItem]: true,
+        [MENU_ITEM_CLASSES.checked]: checked,
+        [MENU_ITEM_CLASSES.hover]: hover,
+        [MENU_ITEM_CLASSES.focus]: focus,
+        [MENU_ITEM_CLASSES.active]: active,
+        [MENU_ITEM_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up menu item functionality for the given element.
+ *
+ * @param menuItem The element on which to set up menu item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupMenuItem(menuItem, opts) {
+    setupRipple(menuItem, opts);
+}
+/**
+ * A Lit directive that adds menu item styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menuItem()}">TODO: add examples</div>`;
+ * ```
+ */
+export const menuItem = createClassMapDirective({
+    getClasses: menuItemClasses,
+    setupElement: setupMenuItem,
+});
+//# sourceMappingURL=menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,aAAa,EACb,WAAW,GACZ,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EAAC,cAAc,EAAC,MAAM,2DAA2D,CAAC;AAezF,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAK7E,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,cAAc;CACnB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAC,KAAK,KAAsB,EAAE;IACxD,OAAO;QACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,OAAO;KAC1D,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CACvB,IAAiB,EACjB,IAA6B;IAE7B,2CAA2C;AAC7C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAKH,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,MAAM,CAAC,mBAAmB,CAAC,CAC5B,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,WAAW;IACrB,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,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,CAAC,EAAC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAC,CAAC;QACnD,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI;QAClC,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO;QACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM;QAClC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACvC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createContext} from '@lit/context';\nimport {\n  FOCUS_RING_TYPES,\n  focusRingClasses,\n} 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 {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Menu context provided to menu items. */\nexport interface MenuContext {\n  /** The item's parent menu. */\n  readonly menu: HTMLElement;\n  /** Returns the menu's items. */\n  getItems: () => HTMLElement[];\n  /** Callback for menu items to register themselves with the menu. */\n  itemConnected(item: HTMLElement): void;\n  /** Callback for menu items to unregister themselves with the menu. */\n  itemDisconnected(item: HTMLElement): void;\n}\n\n/** Menu context to provide to menu items. */\nexport const menuContext = createContext<MenuContext>(Symbol('menuContext'));\n\n/** Menu color configuration types. */\nexport type MenuColor = 'standard' | 'vibrant';\n\n/** Menu color configurations. */\nexport const MENU_COLORS = {\n  standard: 'standard',\n  vibrant: 'vibrant',\n} as const;\n\n/** Menu classes. */\nexport const MENU_CLASSES = {\n  menu: 'menu',\n  menuVibrant: 'menu-vibrant',\n} as const;\n\n/** The state provided to the `menuClasses()` function. */\nexport interface MenuClassesState {\n  /** The color of the menu. */\n  color?: MenuColor;\n}\n\n/**\n * Returns the menu classes to apply to an element based on the given state.\n *\n * @param state The state of the menu.\n * @return An object of class names and truthy values if they apply.\n */\nexport function menuClasses({color}: MenuClassesState = {}): ClassInfo {\n  return {\n    [MENU_CLASSES.menu]: true,\n    [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,\n  };\n}\n\n/**\n * Sets up menu functionality for the given element.\n *\n * @param menu The element on which to set up menu functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupMenu(\n  menu: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  // TODO: add event listeners from <md-menu>\n}\n\n/**\n * A Lit directive that adds menu styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${menu()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menu = createClassMapDirective({\n  getClasses: menuClasses,\n  setupElement: setupMenu,\n});\n\n/** Whether a group of menu items are single or multiple selectable. */\nexport type MenuItemCheckable = 'single' | 'multiple';\n\n/** Context provided to menu items for the checkable state of a menu item group. */\nexport const menuItemCheckable = createContext<MenuItemCheckable | null>(\n  Symbol('menuItemCheckable'),\n);\n\n/** Menu item classes. */\nexport const MENU_ITEM_CLASSES = {\n  menuItem: 'menu-item',\n  checked: PSEUDO_CLASSES.checked,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `menuItemClasses()` function. */\nexport interface MenuItemClassesState {\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the menu item classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the menu item.\n * @return An object of class names and truthy values if they apply.\n */\nexport function menuItemClasses({\n  checked = false,\n  hover = false,\n  focus = false,\n  active = false,\n  disabled = false,\n}: MenuItemClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses({type: FOCUS_RING_TYPES.inner}),\n    [MENU_ITEM_CLASSES.menuItem]: true,\n    [MENU_ITEM_CLASSES.checked]: checked,\n    [MENU_ITEM_CLASSES.hover]: hover,\n    [MENU_ITEM_CLASSES.focus]: focus,\n    [MENU_ITEM_CLASSES.active]: active,\n    [MENU_ITEM_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up menu item functionality for the given element.\n *\n * @param menuItem The element on which to set up menu item functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupMenuItem(\n  menuItem: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(menuItem, opts);\n}\n\n/**\n * A Lit directive that adds menu item styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${menuItem()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menuItem = createClassMapDirective({\n  getClasses: menuItemClasses,\n  setupElement: setupMenuItem,\n});\n"]}

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

@@ -0,0 +1,171 @@
+/*!
+ * 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);
+    }
+
+    &::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);
+    }
+
+    .menu-item-trailing-text {
+      color: var(--trailing-supporting-text-color);
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+    }
+
+    .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,37 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --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;
+}
+
+@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-radio.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @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 { RadioValidator } from '@material/web/labs/behaviors/validators/radio-validator.js';
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design radio component. */
+        'md-radio': Radio;
+    }
+}
+declare const radioBaseClass: 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) & (abstract new (...args: any[]) => import("@material/web/labs/behaviors/focusable.js").Focusable) & 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 radio component.
+ */
+export declare class Radio extends radioBaseClass {
+    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/md-radio.js

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { afterDispatch, setupDispatchHooks, } from '@material/web/internal/events/dispatch-hooks.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { internals, mixinElementInternals, } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinFocusable } from '@material/web/labs/behaviors/focusable.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
+import { RadioValidator } from '@material/web/labs/behaviors/validators/radio-validator.js';
+import { SingleSelectionController } from '@material/web/radio/internal/single-selection-controller.js';
+import { css, html, isServer, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';
+import radioStyles from './radio.cssresult.js';
+import { radio } from './radio.js';
+// Separate variable needed for closure.
+const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))));
+/**
+ * A Material Design radio component.
+ */
+let Radio = class Radio 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;
+    }
+};
+Radio.styles = [
+    focusRingStyles,
+    rippleStyles,
+    radioStyles,
+    css `
+      :host {
+        display: inline-flex;
+        outline: none;
+      }
+      .radio {
+        flex: 1;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Radio.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], Radio.prototype, "required", void 0);
+__decorate([
+    property()
+], Radio.prototype, "value", void 0);
+__decorate([
+    query('.radio', true)
+], Radio.prototype, "radio", void 0);
+__decorate([
+    state()
+], Radio.prototype, "isFocused", void 0);
+Radio = __decorate([
+    customElement('md-radio')
+], Radio);
+export { Radio };
+//# sourceMappingURL=md-radio.js.map