@material/web 2.4.2-nightly.2fe7e22.0 → 2.4.2-nightly.3758f46.0

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

@@ -3,17 +3,17 @@
  * 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';
+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 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>;
+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.
  */

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

@@ -4,19 +4,19 @@
  * 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.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 { 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';

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

@@ -1 +1 @@
-{"version":3,"file":"md-radio.js","sourceRoot":"","sources":["md-radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,cAAc,EAAC,MAAM,2CAA2C,CAAC;AACzE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAC,cAAc,EAAC,MAAM,4DAA4D,CAAC;AAC1F,OAAO,EAAC,yBAAyB,EAAC,MAAM,6DAA6D,CAAC;AACtG,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExE,OAAO,eAAe,MAAM,uDAAuD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtH,gHAAgH;AAChH,OAAO,YAAY,MAAM,oDAAoD,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAChH,0GAA0G;AAC1G,OAAO,WAAW,MAAM,aAAa,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxE,8EAA8E;AAE9E,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AASjC,wCAAwC;AACxC,MAAM,cAAc,GAAG,yBAAyB,CAC9C,mBAAmB,CAAC,qBAAqB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CACvE,CAAC;AAEF;;GAEG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,cAAc;IAgBvC;;OAEG;IAEH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,KAAK,MAAM,CAAC;IAChD,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,UAAU,KAAK,OAAO,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,CAAC;IACjD,CAAC;IAED;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,cAAc,CAAC,KAAc;QAC/B,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAClD,CAAC;IAyBD;QACE,KAAK,EAAE,CAAC;QAxBV;;;WAGG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAGR,wBAAmB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAC3E;;;;;;WAMG;QACK,qBAAgB,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAIjC,IAAI,QAAQ;YAAE,OAAO;QACrB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC7C,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,qEAAqE;YACrE,kCAAkC;YAClC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC1C,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;gBACxB,IAAI,KAAK,CAAC,gBAAgB;oBAAE,OAAO;gBACnC,yDAAyD;gBACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;gBACzD,IAAI,CAAC,aAAa,CAChB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACzC,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;gBACxB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;oBAChD,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;YACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;2CAE4B,KAAK,CAAC;YACzC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,SAAS;SACtB,CAAC,UAAU,CAAC;IACjB,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,gEAAgE;YAChE,mBAAmB;YACnB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3D,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACrC,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC;IAClC,CAAC;IAEQ,CAAC,eAAe,CAAC;QACxB,OAAO,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC9B,sEAAsE;gBACtE,2DAA2D;gBAC3D,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC;YAED,OAAO,IAAI,CAAC,mBAAmB,CAAC,QAA+B,CAAC;QAClE,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,CAAC,iBAAiB,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;;AAlKe,YAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,WAAW;IACX,GAAG,CAAA;;;;;;;;KAQF;CACF,AAbqB,CAapB;AAMF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;oCAGzB;AA0B0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAkB;AAKhC;IAAX,QAAQ,EAAE;oCAAc;AAEe;IAAvC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;oCAAsC;AAU3C;IAAhB,KAAK,EAAE;wCAA2B;AAjExB,KAAK;IADjB,aAAa,CAAC,UAAU,CAAC;GACb,KAAK,CAoKjB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '@material/web/internal/events/dispatch-hooks.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '@material/web/labs/behaviors/constraint-validation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '@material/web/labs/behaviors/element-internals.js';\nimport {mixinFocusable} from '@material/web/labs/behaviors/focusable.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '@material/web/labs/behaviors/form-associated.js';\nimport {RadioValidator} from '@material/web/labs/behaviors/validators/radio-validator.js';\nimport {SingleSelectionController} from '@material/web/radio/internal/single-selection-controller.js';\nimport {css, CSSResultOrNative, html, isServer, LitElement} from 'lit';\nimport {customElement, property, query, state} 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 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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design radio component. */\n    'md-radio': Radio;\n  }\n}\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@customElement('md-radio')\nexport class Radio extends radioBaseClass {\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 [Radio, ...Radio[]];\n    });\n  }\n\n  override [getValidityAnchor]() {\n    return this.radio;\n  }\n}\n"]}
+{"version":3,"file":"md-radio.js","sourceRoot":"","sources":["md-radio.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 {customElement, 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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design radio component. */\n    'md-radio': Radio;\n  }\n}\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@customElement('md-radio')\nexport class Radio extends radioBaseClass {\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 [Radio, ...Radio[]];\n    });\n  }\n\n  override [getValidityAnchor]() {\n    return this.radio;\n  }\n}\n"]}

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

@@ -1,4 +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}.radio::before{content:"radio_button_unchecked";color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1;width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{content:"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 */
+ */@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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["radio.scss","_radio-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,qBAEI,OCNF,qDACA,kBACA,oDACA,yBACA,yBDKI,4BCDJ,6CDII,gFAGA,8BCCJ,iDDGE,6BCCF,0CACA,iDDCI,oDCGJ,oDDCE,+BCGF,mEDCE,OACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aAEA,eACE,iCACA,wBACA,gCACA,2BACA,cACA,uBACA,eAEF,qCACE,+BAEF,cACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"radio.css"}
+{"version":3,"sourceRoot":"","sources":["radio.scss","_radio-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,qBAEI,OCNF,qDACA,kBACA,oDACA,yBACA,yBDKI,4BCDJ,6CDII,gFAGA,8BCCJ,iDDGE,6BCCF,0CACA,iDDCI,oDCGJ,oDDCE,+BCGF,mEDCE,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.js

@@ -8,7 +8,7 @@ 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}.radio::before{content:"radio_button_unchecked";color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1;width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{content:"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)}}
+ */@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

@@ -1 +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}.radio::before{content:\"radio_button_unchecked\";color:var(--icon-color);font-family:var(--md-icon-font);font-size:var(--icon-size);line-height:1;width:var(--icon-size);aspect-ratio:1}.radio:is(:checked,.checked)::before{content:\"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"]}
+{"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

@@ -3,7 +3,6 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { AttributePart, Directive, DirectiveParameters } from 'lit/async-directive.js';
 import { type ClassInfo } from 'lit/directives/class-map.js';
 /** Radio classes. */
 export declare const RADIO_CLASSES: {
@@ -43,17 +42,6 @@ export declare function radioClasses({ hover, focus, active, checked, disabled,
 export declare function setupRadio(radio: HTMLElement, opts?: {
     signal?: AbortSignal;
 }): void;
-/** The state provided to the `radio()` directive. */
-export interface RadioDirectiveState extends RadioClassesState {
-    /** Additional classes to apply to the element. */
-    classes?: ClassInfo;
-}
-declare class RadioDirective extends Directive {
-    private element?;
-    private cleanup?;
-    render(state?: RadioDirectiveState): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-    update({ element }: AttributePart, [state]: DirectiveParameters<this>): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/class-map.js").ClassMapDirective>;
-}
 /**
  * A Lit directive that adds radio styling and functionality to its element.
  *
@@ -66,5 +54,4 @@ declare class RadioDirective extends Directive {
  * `;
  * ```
  */
-export declare const radio: (state?: RadioDirectiveState) => import("lit-html/directive.js").DirectiveResult<typeof RadioDirective>;
-export {};
+export declare const radio: (state?: RadioClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -3,11 +3,10 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { focusRingClasses } from '@material/web/labs/gb/components/focus/focus-ring.js';
-import { rippleClasses, setupRipple, } from '@material/web/labs/gb/components/ripple/ripple.js';
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import { Directive, directive, } from 'lit/async-directive.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
 /** Radio classes. */
 export const RADIO_CLASSES = {
     radio: 'radio',
@@ -44,23 +43,6 @@ export function radioClasses({ hover = false, focus = false, active = false, che
 export function setupRadio(radio, opts) {
     setupRipple(radio, opts);
 }
-class RadioDirective extends Directive {
-    render(state = {}) {
-        return classMap({
-            ...(state.classes || {}),
-            ...radioClasses(state),
-        });
-    }
-    update({ element }, [state]) {
-        if (element !== this.element) {
-            this.element = element;
-            this.cleanup?.abort();
-            this.cleanup = new AbortController();
-            setupRadio(this.element, { signal: this.cleanup.signal });
-        }
-        return this.render(state);
-    }
-}
 /**
  * A Lit directive that adds radio styling and functionality to its element.
  *
@@ -73,5 +55,8 @@ class RadioDirective extends Directive {
  * `;
  * ```
  */
-export const radio = directive(RadioDirective);
+export const radio = createClassMapDirective({
+    getClasses: radioClasses,
+    setupElement: setupRadio,
+});
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.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;AACzF,OAAO,EAEL,SAAS,EACT,SAAS,GAEV,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAErE,qBAAqB;AACrB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,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,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,MACK,EAAE;IACvB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI;QAC3B,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,KAAK;QAC5B,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,KAAK;QAC5B,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM;QAC9B,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO;QAChC,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACnC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,KAAkB,EAClB,IAA6B;IAE7B,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAC3B,CAAC;AAQD,MAAM,cAAe,SAAQ,SAAS;IAIpC,MAAM,CAAC,QAA6B,EAAE;QACpC,OAAO,QAAQ,CAAC;YACd,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YACxB,GAAG,YAAY,CAAC,KAAK,CAAC;SACvB,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,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAC,CAAC,CAAC;QAC1D,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;CACF;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,cAAc,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 {\n  AttributePart,\n  Directive,\n  directive,\n  DirectiveParameters,\n} from 'lit/async-directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Radio classes. */\nexport const RADIO_CLASSES = {\n  radio: 'radio',\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `radioClasses()` function. */\nexport interface RadioClassesState {\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 `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the radio classes to apply to an element based on the given state.\n *\n * @param state The state of the radio.\n * @return An object of class names and truthy values if they apply.\n */\nexport function radioClasses({\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  disabled = false,\n}: RadioClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [RADIO_CLASSES.radio]: true,\n    [RADIO_CLASSES.hover]: hover,\n    [RADIO_CLASSES.focus]: focus,\n    [RADIO_CLASSES.active]: active,\n    [RADIO_CLASSES.checked]: checked,\n    [RADIO_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up radio functionality for the given element.\n *\n * @param radio The element on which to set up radio functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRadio(\n  radio: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(radio, opts);\n}\n\n/** The state provided to the `radio()` directive. */\nexport interface RadioDirectiveState extends RadioClassesState {\n  /** Additional classes to apply to the element. */\n  classes?: ClassInfo;\n}\n\nclass RadioDirective extends Directive {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  render(state: RadioDirectiveState = {}) {\n    return classMap({\n      ...(state.classes || {}),\n      ...radioClasses(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      setupRadio(this.element, {signal: this.cleanup.signal});\n    }\n\n    return this.render(state);\n  }\n}\n\n/**\n * A Lit directive that adds radio styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n * `;\n * ```\n */\nexport const radio = directive(RadioDirective);\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAE3D,qBAAqB;AACrB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,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,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,MACK,EAAE;IACvB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI;QAC3B,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,KAAK;QAC5B,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,KAAK;QAC5B,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,MAAM;QAC9B,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO;QAChC,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACnC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,KAAkB,EAClB,IAA6B;IAE7B,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAC3B,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,uBAAuB,CAAC;IAC3C,UAAU,EAAE,YAAY;IACxB,YAAY,EAAE,UAAU;CACzB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Radio classes. */\nexport const RADIO_CLASSES = {\n  radio: 'radio',\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  checked: PSEUDO_CLASSES.checked,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `radioClasses()` function. */\nexport interface RadioClassesState {\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 `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the radio classes to apply to an element based on the given state.\n *\n * @param state The state of the radio.\n * @return An object of class names and truthy values if they apply.\n */\nexport function radioClasses({\n  hover = false,\n  focus = false,\n  active = false,\n  checked = false,\n  disabled = false,\n}: RadioClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [RADIO_CLASSES.radio]: true,\n    [RADIO_CLASSES.hover]: hover,\n    [RADIO_CLASSES.focus]: focus,\n    [RADIO_CLASSES.active]: active,\n    [RADIO_CLASSES.checked]: checked,\n    [RADIO_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up radio functionality for the given element.\n *\n * @param radio The element on which to set up radio functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRadio(\n  radio: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(radio, opts);\n}\n\n/**\n * A Lit directive that adds radio styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n *   <input type=\"radio\" class=\"${radio()}\" name=\"radio-group\">\n * `;\n * ```\n */\nexport const radio = createClassMapDirective({\n  getClasses: radioClasses,\n  setupElement: setupRadio,\n});\n"]}

package/labs/gb/components/radio/radio.scss

@@ -44,18 +44,17 @@
       height: 48px;
       background-image: none;
       outline: none;
+      --icon: 'radio_button_unchecked';
 
       &::before {
-        content: 'radio_button_unchecked';
+        content: var(--icon);
         color: var(--icon-color);
-        font-family: var(--md-icon-font);
-        font-size: var(--icon-size);
-        line-height: 1;
+        font: var(--icon-size) / 1 var(--md-icon-font);
         width: var(--icon-size);
         aspect-ratio: 1;
       }
       &:is(:checked, .checked)::before {
-        content: 'radio_button_checked';
+        --icon: 'radio_button_checked';
       }
       &::after {
         content: '';

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

@@ -3,7 +3,6 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Directive, ElementPart, PartInfo } from 'lit/directive.js';
 import { type ClassInfo } from 'lit/directives/class-map.js';
 /** Ripple classes. */
 export declare const RIPPLE_CLASSES: {
@@ -39,13 +38,6 @@ export declare function rippleClasses({ hover, active, disabled, }?: RippleClass
 export declare function setupRipple(ripple: HTMLElement, opts?: {
     signal?: AbortSignal;
 }): void;
-declare class RippleDirective extends Directive {
-    private element?;
-    private cleanup?;
-    constructor(partInfo: PartInfo);
-    render(): void;
-    update({ element }: ElementPart): symbol;
-}
 /**
  * A Lit directive that adds updates the position of a ripple to match pointer
  * interactions. Use with the `.ripple` class.
@@ -82,5 +74,4 @@ declare class RippleDirective extends Directive {
  * `;
  * ```
  */
-export declare const ripple: () => import("lit-html/directive.js").DirectiveResult<typeof RippleDirective>;
-export {};
+export declare const ripple: () => import("lit-html/directive.js").DirectiveResult;

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

@@ -3,9 +3,8 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { PSEUDO_CLASSES } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
-import { noChange } from 'lit';
-import { Directive, directive, PartType, } from 'lit/directive.js';
+import { createElementDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled } from '../shared/pseudo-classes.js';
 /** Ripple classes. */
 export const RIPPLE_CLASSES = {
     ripple: 'ripple',
@@ -56,22 +55,16 @@ export function setupRipple(ripple, opts) {
                 });
             }
         }
+        catch {
+            // Ignore errors if the properties are already registered.
+        }
         finally {
             ripplePropertiesRegistered = true;
         }
     }
     let minimumPressTimeoutId;
-    ripple.addEventListener('pointerdown', (event) => {
-        if (ripple.matches(':disabled,.disabled'))
-            return;
-        // Set ripple position to the pointer position.
-        const rect = ripple.getBoundingClientRect();
-        const x = (event.clientX - rect.x) / rect.width;
-        const y = (event.clientY - rect.y) / rect.height;
-        ripple.style.setProperty('--ripple-x', `${x * 100}%`);
-        ripple.style.setProperty('--ripple-y', `${y * 100}%`);
-        // If another pointerdown is received while the ripple is active, restart
-        // the active press animation.
+    const activateRipple = () => {
+        // If the ripple is already active, restart the current press animation.
         if (ripple.classList.contains(RIPPLE_CLASSES.active)) {
             const pressAnimation = ripple
                 .getAnimations()
@@ -87,30 +80,33 @@ export function setupRipple(ripple, opts) {
         minimumPressTimeoutId = setTimeout(() => {
             ripple.classList.remove(RIPPLE_CLASSES.active);
         }, MINIMUM_PRESS_MS);
+    };
+    // Return true if the ripple is disabled, or if the ripple class has been
+    // removed. This allows components to disable and re-enable ripple behavior.
+    const isRippleDisabled = () => isDisabled(ripple) || !ripple.matches(`.${RIPPLE_CLASSES.ripple}`);
+    ripple.addEventListener('pointerdown', (event) => {
+        if (isRippleDisabled())
+            return;
+        // Set ripple position to the pointer position.
+        const rect = ripple.getBoundingClientRect();
+        const x = (event.clientX - rect.x) / rect.width;
+        const y = (event.clientY - rect.y) / rect.height;
+        ripple.style.setProperty('--ripple-x', `${x * 100}%`);
+        ripple.style.setProperty('--ripple-y', `${y * 100}%`);
+        activateRipple();
     }, opts);
     ripple.addEventListener('keydown', (event) => {
         // Reset ripple pointer position when a key is pressed.
         ripple.style.removeProperty('--ripple-x');
         ripple.style.removeProperty('--ripple-y');
     }, opts);
-}
-class RippleDirective extends Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        if (partInfo.type !== PartType.ELEMENT) {
-            throw new Error('The `ripple` directive must be used on an element');
-        }
-    }
-    render() { }
-    update({ element }) {
-        if (this.element !== element) {
-            this.element = element;
-            this.cleanup?.abort();
-            this.cleanup = new AbortController();
-            setupRipple(this.element, { signal: this.cleanup.signal });
+    ripple.addEventListener('click', (event) => {
+        // A UIEvent.detail click count of 0 indicates the click was not triggered
+        // by a pointer. Show the ripple press effect for these clicks as well.
+        if (event.detail === 0 && !isRippleDisabled()) {
+            activateRipple();
         }
-        return noChange;
-    }
+    }, opts);
 }
 /**
  * A Lit directive that adds updates the position of a ripple to match pointer
@@ -148,5 +144,5 @@ class RippleDirective extends Directive {
  * `;
  * ```
  */
-export const ripple = directive(RippleDirective);
+export const ripple = createElementDirective(setupRipple);
 //# sourceMappingURL=ripple.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.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 {PSEUDO_CLASSES} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {noChange} from 'lit';\nimport {\n  Directive,\n  directive,\n  ElementPart,\n  PartInfo,\n  PartType,\n} from 'lit/directive.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Ripple classes. */\nexport const RIPPLE_CLASSES = {\n  ripple: 'ripple',\n  rippleTarget: 'ripple-target',\n  rippleHost: 'ripple-host',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `rippleClasses()` function. */\nexport interface RippleClassesState {\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the ripple classes to apply to an element based on the given state.\n *\n * @param state The state of the ripple.\n * @return An object of class names and truthy values if they apply.\n */\nexport function rippleClasses({\n  hover = false,\n  active = false,\n  disabled = false,\n}: RippleClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: true,\n    [RIPPLE_CLASSES.hover]: hover,\n    [RIPPLE_CLASSES.active]: active,\n    [RIPPLE_CLASSES.disabled]: disabled,\n  };\n}\n\nconst MINIMUM_PRESS_MS = 225;\nlet ripplePropertiesRegistered = false;\n\n/**\n * Sets up ripple functionality for the given element.\n *\n * @param ripple The element on which to set up ripple functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRipple(\n  ripple: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  if (!ripplePropertiesRegistered) {\n    const properties = [\n      ['--ripple-scale', '0%'],\n      ['--ripple-hover-opacity', '0%'],\n      ['--ripple-press-opacity', '0%'],\n      ['--ripple-x', '50%'],\n      ['--ripple-y', '50%'],\n    ];\n\n    try {\n      for (const [property, value] of properties) {\n        CSS.registerProperty({\n          name: property,\n          syntax: '<percentage>',\n          inherits: false,\n          initialValue: value,\n        });\n      }\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (ripple.matches(':disabled,.disabled')) return;\n\n      // Set ripple position to the pointer position.\n      const rect = ripple.getBoundingClientRect();\n      const x = (event.clientX - rect.x) / rect.width;\n      const y = (event.clientY - rect.y) / rect.height;\n      ripple.style.setProperty('--ripple-x', `${x * 100}%`);\n      ripple.style.setProperty('--ripple-y', `${y * 100}%`);\n\n      // If another pointerdown is received while the ripple is active, restart\n      // the active press animation.\n      if (ripple.classList.contains(RIPPLE_CLASSES.active)) {\n        const pressAnimation = ripple\n          .getAnimations()\n          .find(\n            (animation) =>\n              (animation as Partial<CSSAnimation>).animationName ===\n              'ripple-press',\n          );\n        pressAnimation?.cancel();\n        pressAnimation?.play();\n      }\n\n      // Emulate the `:active` class for a minimum press duration to show the\n      // ripple effect on short clicks.\n      ripple.classList.add(RIPPLE_CLASSES.active);\n      clearTimeout(minimumPressTimeoutId);\n      minimumPressTimeoutId = setTimeout(() => {\n        ripple.classList.remove(RIPPLE_CLASSES.active);\n      }, MINIMUM_PRESS_MS);\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'keydown',\n    (event: KeyboardEvent): void => {\n      // Reset ripple pointer position when a key is pressed.\n      ripple.style.removeProperty('--ripple-x');\n      ripple.style.removeProperty('--ripple-y');\n    },\n    opts,\n  );\n}\n\nclass RippleDirective extends Directive {\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('The `ripple` directive must be used on an element');\n    }\n  }\n  render() {}\n  override update({element}: ElementPart) {\n    if (this.element !== element) {\n      this.element = element as HTMLElement;\n      this.cleanup?.abort();\n      this.cleanup = new AbortController();\n      setupRipple(this.element, {signal: this.cleanup.signal});\n    }\n    return noChange;\n  }\n}\n\n/**\n * A Lit directive that adds updates the position of a ripple to match pointer\n * interactions. Use with the `.ripple` class.\n *\n * @example\n * ```ts\n * class Component extends LitElement {\n *   static styles = [rippleStyles, css`...`];\n *\n *   render() {\n *     return html`<button class=\"ripple\" ${ripple()}>Ripple effect</button>`;\n *   }\n * }\n * ```\n *\n * Use the `.ripple-target` class if the interactive element is a parent or\n * child of the ripple element.\n *\n * The `ripple()` directive should be applied to the parent element, which may\n * be the `.ripple-target` instead of the `.ripple`.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"card ripple\" ${ripple()}>\n *     Child interactive element\n *     <button class=\"ripple-target card-btn\"></button>\n *   </div>\n *\n *   <button class=\"ripple-target\" ${ripple()}>\n *     Parent interactive element\n *     <span class=\"ripple\"></span>\n *   </button>\n * `;\n * ```\n */\nexport const ripple = directive(RippleDirective);\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["ripple.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 {type ClassInfo} from 'lit/directives/class-map.js';\nimport {createElementDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES, isDisabled} from '../shared/pseudo-classes.js';\n\n/** Ripple classes. */\nexport const RIPPLE_CLASSES = {\n  ripple: 'ripple',\n  rippleTarget: 'ripple-target',\n  rippleHost: 'ripple-host',\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n};\n\n/** The state provided to the `rippleClasses()` function. */\nexport interface RippleClassesState {\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the ripple classes to apply to an element based on the given state.\n *\n * @param state The state of the ripple.\n * @return An object of class names and truthy values if they apply.\n */\nexport function rippleClasses({\n  hover = false,\n  active = false,\n  disabled = false,\n}: RippleClassesState = {}): ClassInfo {\n  return {\n    [RIPPLE_CLASSES.ripple]: true,\n    [RIPPLE_CLASSES.hover]: hover,\n    [RIPPLE_CLASSES.active]: active,\n    [RIPPLE_CLASSES.disabled]: disabled,\n  };\n}\n\nconst MINIMUM_PRESS_MS = 225;\nlet ripplePropertiesRegistered = false;\n\n/**\n * Sets up ripple functionality for the given element.\n *\n * @param ripple The element on which to set up ripple functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupRipple(\n  ripple: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  if (!ripplePropertiesRegistered) {\n    const properties = [\n      ['--ripple-scale', '0%'],\n      ['--ripple-hover-opacity', '0%'],\n      ['--ripple-press-opacity', '0%'],\n      ['--ripple-x', '50%'],\n      ['--ripple-y', '50%'],\n    ];\n\n    try {\n      for (const [property, value] of properties) {\n        CSS.registerProperty({\n          name: property,\n          syntax: '<percentage>',\n          inherits: false,\n          initialValue: value,\n        });\n      }\n    } catch {\n      // Ignore errors if the properties are already registered.\n    } finally {\n      ripplePropertiesRegistered = true;\n    }\n  }\n\n  let minimumPressTimeoutId: number | undefined;\n  const activateRipple = () => {\n    // If the ripple is already active, restart the current press animation.\n    if (ripple.classList.contains(RIPPLE_CLASSES.active)) {\n      const pressAnimation = ripple\n        .getAnimations()\n        .find(\n          (animation) =>\n            (animation as Partial<CSSAnimation>).animationName ===\n            'ripple-press',\n        );\n      pressAnimation?.cancel();\n      pressAnimation?.play();\n    }\n\n    // Emulate the `:active` class for a minimum press duration to show the\n    // ripple effect on short clicks.\n    ripple.classList.add(RIPPLE_CLASSES.active);\n    clearTimeout(minimumPressTimeoutId);\n    minimumPressTimeoutId = setTimeout(() => {\n      ripple.classList.remove(RIPPLE_CLASSES.active);\n    }, MINIMUM_PRESS_MS);\n  };\n\n  // Return true if the ripple is disabled, or if the ripple class has been\n  // removed. This allows components to disable and re-enable ripple behavior.\n  const isRippleDisabled = () =>\n    isDisabled(ripple) || !ripple.matches(`.${RIPPLE_CLASSES.ripple}`);\n\n  ripple.addEventListener(\n    'pointerdown',\n    (event: PointerEvent): void => {\n      if (isRippleDisabled()) return;\n      // Set ripple position to the pointer position.\n      const rect = ripple.getBoundingClientRect();\n      const x = (event.clientX - rect.x) / rect.width;\n      const y = (event.clientY - rect.y) / rect.height;\n      ripple.style.setProperty('--ripple-x', `${x * 100}%`);\n      ripple.style.setProperty('--ripple-y', `${y * 100}%`);\n      activateRipple();\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'keydown',\n    (event: KeyboardEvent): void => {\n      // Reset ripple pointer position when a key is pressed.\n      ripple.style.removeProperty('--ripple-x');\n      ripple.style.removeProperty('--ripple-y');\n    },\n    opts,\n  );\n\n  ripple.addEventListener(\n    'click',\n    (event) => {\n      // A UIEvent.detail click count of 0 indicates the click was not triggered\n      // by a pointer. Show the ripple press effect for these clicks as well.\n      if (event.detail === 0 && !isRippleDisabled()) {\n        activateRipple();\n      }\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds updates the position of a ripple to match pointer\n * interactions. Use with the `.ripple` class.\n *\n * @example\n * ```ts\n * class Component extends LitElement {\n *   static styles = [rippleStyles, css`...`];\n *\n *   render() {\n *     return html`<button class=\"ripple\" ${ripple()}>Ripple effect</button>`;\n *   }\n * }\n * ```\n *\n * Use the `.ripple-target` class if the interactive element is a parent or\n * child of the ripple element.\n *\n * The `ripple()` directive should be applied to the parent element, which may\n * be the `.ripple-target` instead of the `.ripple`.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"card ripple\" ${ripple()}>\n *     Child interactive element\n *     <button class=\"ripple-target card-btn\"></button>\n *   </div>\n *\n *   <button class=\"ripple-target\" ${ripple()}>\n *     Parent interactive element\n *     <span class=\"ripple\"></span>\n *   </button>\n * `;\n * ```\n */\nexport const ripple = createElementDirective(setupRipple);\n"]}

package/labs/gb/components/shared/directives.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { DirectiveResult } from 'lit/async-directive.js';
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/**
+ * A function that sets up logic for a directive's element.
+ *
+ * @param element The element attached to the directive.
+ * @param opts Options for setting up the element, including an AbortSignal for
+ *     cleanup.
+ */
+export type SetupElementFunction = (element: HTMLElement, opts: {
+    signal: AbortSignal;
+}) => void;
+/**
+ * All class map directives include AdditionalClasses to allow adding dynamic
+ * classes to the element using `classMap()`.
+ */
+export interface AdditionalClasses {
+    /**
+     * Additional classes to apply to the element.
+     */
+    classes?: ClassInfo;
+}
+/**
+ * Options for creating a class map directive.
+ *
+ * @param getClasses A function that returns the class names and truthy values
+ *     if they apply.
+ * @param setupElement An optional function to set up logic for the directive's
+ *     element.
+ */
+export interface ClassMapDirectiveOptions<State> {
+    getClasses: (state?: State) => ClassInfo;
+    setupElement?: SetupElementFunction;
+}
+/**
+ * Creates a Lit directive that behaves like `classMap()`, but also provides
+ * element setup and cleanup logic.
+ *
+ * These directives bind to `class="${componentDirectiveName()}"`.
+ *
+ * @example
+ * ```ts
+ * const toggleButton = createClassMapDirective({
+ *   getClasses: (state: ToggleButtonState) => ({
+ *     'toggle-button': true,
+ *     'toggle-button-selected': state.selected,
+ *   }),
+ *   setupElement: (element, opts) => {
+ *     element.addEventListener('click', () => {
+ *       state.selected = !state.selected;
+ *     }, opts);
+ *   },
+ * });
+ *
+ * html`
+ *   <button class="${toggleButton()}">Unselected</button>
+ *   <button class="${toggleButton({selected: true})}">Selected</button>
+ *   <button class="${toggleButton({classes: {'visible': isVisible}})}">
+ *     With additional classes
+ *   </button>
+ * `;
+ * ```
+ *
+ * @param options Options for creating the class map directive.
+ * @return A Lit `directive()` that binds to the class attribute.
+ */
+export declare function createClassMapDirective<State = {}>(options: ClassMapDirectiveOptions<State>): (state?: State & AdditionalClasses) => DirectiveResult;
+/**
+ * Creates a Lit directive that can be used to add setup and cleanup logic to
+ * an element.
+ *
+ * These directives bind as element parts.
+ *
+ * @example
+ * ```ts
+ * const logClick = createElementDirective((element, opts) => {
+ *   element.addEventListener('click', (event) => {
+ *     console.log('click', event);
+ *   }, opts);
+ * });
+ *
+ * html`<button ${logClick()}>Click me</button>`;
+ * ```
+ *
+ * @param setupElement The function to set up logic for the directive's element.
+ * @return A Lit `directive()` that binds as an element part.
+ */
+export declare function createElementDirective(setupElement: SetupElementFunction): () => DirectiveResult;