@material/web 2.4.2-nightly.fd17013.0 → 2.5.0

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

@@ -4,11 +4,13 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --icon-color: var(--md-sys-color-on-surface-variant);
   --icon-size: 20px;
   --state-layer-color: var(--md-sys-color-on-surface);
   --state-layer-shape: 50%;
   --state-layer-size: 40px;
+  // LINT.ThenChange(md-radio.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin hovered {

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

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

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

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

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

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

package/labs/gb/components/radio/{md-radio.d.ts → radio-element.d.ts}

@@ -7,17 +7,20 @@ 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("../../../behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("../../../behaviors/focusable.js").Focusable) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>;
 /**
  * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
  */
-export declare class Radio extends radioBaseClass {
+export declare class RadioElement extends radioBaseClass {
     static styles: CSSResultOrNative[];
     /**
      * Whether or not the radio is selected.

package/labs/gb/components/radio/{md-radio.js → radio-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, isServer, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
 import { SingleSelectionController } from '../../../../radio/internal/single-selection-controller.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
@@ -24,8 +24,17 @@ import { radio } from './radio.js';
 const radioBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(LitElement))));
 /**
  * A Material Design radio component.
+ *
+ * @fires {InputEvent} input - Fired when the radio is checked (but not unchecked). --bubbles --composed
+ * @fires {Event} change - Fired when the radio is checked (but not unchecked). --bubbles
+ * @csspart radio - The radio's root element.
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-shape
+ * @cssprop --state-layer-size
  */
-let Radio = class Radio extends radioBaseClass {
+export class RadioElement extends radioBaseClass {
     /**
      * Whether or not the radio is selected.
      */
@@ -149,8 +158,8 @@ let Radio = class Radio extends radioBaseClass {
     [getValidityAnchor]() {
         return this.radio;
     }
-};
-Radio.styles = [
+}
+RadioElement.styles = [
     focusRingStyles,
     rippleStyles,
     radioStyles,
@@ -166,21 +175,17 @@ Radio.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], Radio.prototype, "checked", null);
+], RadioElement.prototype, "checked", null);
 __decorate([
     property({ type: Boolean })
-], Radio.prototype, "required", void 0);
+], RadioElement.prototype, "required", void 0);
 __decorate([
     property()
-], Radio.prototype, "value", void 0);
+], RadioElement.prototype, "value", void 0);
 __decorate([
     query('.radio', true)
-], Radio.prototype, "radio", void 0);
+], RadioElement.prototype, "radio", void 0);
 __decorate([
     state()
-], Radio.prototype, "isFocused", void 0);
-Radio = __decorate([
-    customElement('md-radio')
-], Radio);
-export { Radio };
-//# sourceMappingURL=md-radio.js.map
+], RadioElement.prototype, "isFocused", void 0);
+//# sourceMappingURL=radio-element.js.map

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

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

package/labs/gb/components/radio/radio.css.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,aACA,iCAEA,eACE,oBACA,wBACA,4CACA,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,OCLF,qDACA,kBACA,oDACA,yBACA,yBDII,4BCCJ,6CDEI,mCCEJ,6CDCI,8BCGJ,iDDCE,6BCGF,0CACA,iDDDI,oDCKJ,oDDDE,+BCKF,mEDDE,OACE,gBACA,kBACA,oBACA,mBACA,uBACA,WACA,YACA,sBACA,aACA,iCAEA,eACE,oBACA,wBACA,4CACA,uBACA,eAEF,qCACE,+BAEF,cACE,WACA,kBACA,eACA,+BACA,+BACA,8BACA,uCACA,kCACA,wCACA,oCACA","file":"radio.css"}

package/labs/gb/components/splitbutton/_split-button-tokens.scss

@@ -4,15 +4,19 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --between-space: 2px;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin button {
+  // LINT.IfChange
   --icon-size: 0;
   --inner-corner-size: 0;
   --outer-corner-size: calc(var(--container-height) / 2);
   --leading-space: 0;
   --trailing-space: 0;
+  // LINT.ThenChange(md-split-button.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin button-xs {

package/labs/gb/components/splitbutton/md-gb-split-button.d.ts

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

package/labs/gb/components/splitbutton/md-gb-split-button.js

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

package/labs/gb/components/splitbutton/md-gb-split-button.js.map

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

package/labs/gb/components/splitbutton/split-button-element.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type SplitButtonColor, type SplitButtonSize } from './split-button.js';
+/**
+ * A Material Design split button component.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
+ */
+export declare class SplitButtonElement extends LitElement {
+    static styles: CSSResultOrNative[];
+    color: SplitButtonColor;
+    size: SplitButtonSize;
+    selected: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateSlotFocusVisible;
+    private cleanupToggleListener?;
+    private handleTrailingSlotchange;
+}

package/labs/gb/components/splitbutton/{md-split-button.js → split-button-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { button } from '../button/button.js';
 import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
 // import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
@@ -18,8 +18,21 @@ import splitButtonStyles from './split-button.css' with { type: 'css' }; // gith
 import { splitButton, } from './split-button.js';
 /**
  * A Material Design split button component.
+ *
+ * @slot leading - Requires a `<button>` for the main action.
+ * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.
+ * @slot - Used to render the trailing button's popover menu.
+ * @csspart split-btn - The split button's root element.
+ * @csspart leading-btn - The split button's main action.
+ * @csspart trailing-btn - The split button's menu action.
+ * @cssprop --between-space
+ * @cssprop --icon-size
+ * @cssprop --inner-corner-size
+ * @cssprop --outer-corner-size
+ * @cssprop --leading-space
+ * @cssprop --trailing-space
  */
-let SplitButton = class SplitButton extends LitElement {
+export class SplitButtonElement extends LitElement {
     constructor() {
         super(...arguments);
         this.color = 'filled';
@@ -70,8 +83,8 @@ let SplitButton = class SplitButton extends LitElement {
             this.selected = event.newState === 'open';
         }, { signal: this.cleanupToggleListener.signal });
     }
-};
-SplitButton.styles = [
+}
+SplitButtonElement.styles = [
     focusRingStyles,
     rippleStyles,
     buttonStyles,
@@ -105,15 +118,11 @@ SplitButton.styles = [
 ];
 __decorate([
     property()
-], SplitButton.prototype, "color", void 0);
+], SplitButtonElement.prototype, "color", void 0);
 __decorate([
     property()
-], SplitButton.prototype, "size", void 0);
+], SplitButtonElement.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
-], SplitButton.prototype, "selected", void 0);
-SplitButton = __decorate([
-    customElement('md-split-button')
-], SplitButton);
-export { SplitButton };
-//# sourceMappingURL=md-split-button.js.map
+], SplitButtonElement.prototype, "selected", void 0);
+//# sourceMappingURL=split-button-element.js.map

package/labs/gb/components/splitbutton/split-button-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button-element.js","sourceRoot":"","sources":["split-button-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {button} from '../button/button.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 buttonStyles from '../button/button.css' with {type: 'css'}; // github-only\n// import buttonStyles from '../button/button.cssresult.js'; // google3-only\nimport splitButtonStyles from './split-button.css' with {type: 'css'}; // github-only\n// import {styles as splitButtonStyles} from './split-button.cssresult.js'; // google3-only\n\nimport {\n  splitButton,\n  type SplitButtonColor,\n  type SplitButtonSize,\n} from './split-button.js';\n\n/**\n * A Material Design split button component.\n *\n * @slot leading - Requires a `<button>` for the main action.\n * @slot trailing - Requires a `<button>` for the menu action. Use `popovertarget` to display a menu.\n * @slot - Used to render the trailing button's popover menu.\n * @csspart split-btn - The split button's root element.\n * @csspart leading-btn - The split button's main action.\n * @csspart trailing-btn - The split button's menu action.\n * @cssprop --between-space\n * @cssprop --icon-size\n * @cssprop --inner-corner-size\n * @cssprop --outer-corner-size\n * @cssprop --leading-space\n * @cssprop --trailing-space\n */\nexport class SplitButtonElement extends LitElement {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    buttonStyles,\n    splitButtonStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .split-btn {\n        flex: 1;\n      }\n      [name='leading'] {\n        display: contents;\n        &::slotted(button) {\n          all: inherit;\n          display: flex;\n        }\n      }\n      [name='trailing'] {\n        position: relative;\n        &::slotted(button) {\n          position: absolute;\n          inset: 0;\n          appearance: none;\n          background: none;\n          border: none;\n          outline: none;\n        }\n      }\n    `,\n  ];\n\n  @property() color: SplitButtonColor = 'filled';\n  @property() size: SplitButtonSize = 'sm';\n  @property({type: Boolean}) selected = false;\n\n  protected override render() {\n    const buttonConfig = {\n      color: this.color,\n      size: this.size,\n    };\n\n    return html`<div part=\"split-btn\" class=\"${splitButton(this)}\">\n      <slot\n        name=\"leading\"\n        part=\"leading-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}>\n      </slot>\n      <slot\n        name=\"trailing\"\n        part=\"trailing-btn\"\n        class=\"${button(buttonConfig)}\"\n        @focusin=${this.updateSlotFocusVisible}\n        @focusout=${this.updateSlotFocusVisible}\n        @slotchange=${this.handleTrailingSlotchange}>\n      </slot>\n      <slot></slot>\n    </div>`;\n  }\n\n  private updateSlotFocusVisible(event: Event) {\n    const slot = event.currentTarget as HTMLSlotElement;\n    const hasFocusVisible = slot\n      .assignedElements()\n      .some((el) => el.matches(':focus-visible,:has(:focus-visible)'));\n    slot.classList.toggle('focus-visible', hasFocusVisible);\n  }\n\n  private cleanupToggleListener?: AbortController;\n  private handleTrailingSlotchange(event: Event) {\n    this.cleanupToggleListener?.abort();\n    this.cleanupToggleListener = new AbortController();\n    const slot = event.target as HTMLSlotElement;\n    const trailingButton = slot\n      .assignedElements()\n      .find((el): el is HTMLButtonElement => el.matches('button'));\n    if (!trailingButton?.popoverTargetElement) return;\n    trailingButton.popoverTargetElement.addEventListener(\n      'toggle',\n      (event: Event) => {\n        this.selected = (event as ToggleEvent).newState === 'open';\n      },\n      {signal: this.cleanupToggleListener.signal},\n    );\n  }\n}\n"]}

package/labs/gb/components/splitbutton/split-button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["split-button.scss","_split-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kEACA,4BACE,WCLA,qBDQE,gBCJF,eACA,uBACA,uDACA,mBACA,oBDIE,qCCCF,mDDEI,gDCEJ,sBACA,uBDCI,qDCGJ,sBACA,+DAIA,6FAIA,mDDCE,mBCGF,kBACA,mDDDI,gDCKJ,sBACA,uBDFI,qDCMJ,sBACA,uBDHI,wCCOJ,mDDHI,0CCOJ,mDDFE,mBCMF,kBACA,mDDJI,gDCQJ,sBACA,uBDLI,qDCSJ,sBACA,uBDNI,wCCUJ,mDDNI,0CCUJ,mDDLE,mBCSF,kBACA,mDDPI,gDCWJ,sBACA,uBDRI,qDCYJ,sBACA,uBDTI,wCCaJ,6DDTI,0CCaJ,6DDRE,mBCYF,kBACA,mDDVI,gDCcJ,sBACA,uBDXI,qDCeJ,sBACA,uBDZI,wCCgBJ,6DDZI,0CCgBJ,6DDVI,kFCcJ,uDDPE,WACE,oBACA,mBACA,yBAGF,iCACE,mDACA,iDACA,iDACA,+CAGF,sCACE,mDACA,iDACA,iDACA,+CAEA,8CACE,0BACA,6CACA,aACA,mBACA,eACA,0BACA,gBAIJ,0FAEE,yBACA","file":"split-button.css"}
+{"version":3,"sourceRoot":"","sources":["split-button.scss","_split-button-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kEACA,4BACE,WCJA,qBDOE,gBCDF,eACA,uBACA,uDACA,mBACA,oBDCE,mBCIF,kBACA,mDDFI,gDCMJ,sBACA,uBDHI,qDCOJ,sBACA,uBDJI,wCCQJ,mDDJI,0CCQJ,mDDHE,mBCOF,kBACA,mDDLI,gDCSJ,sBACA,uBDNI,qDCUJ,sBACA,uBDPI,wCCWJ,mDDPI,0CCWJ,mDDNE,mBCUF,kBACA,mDDRI,gDCYJ,sBACA,uBDTI,qDCaJ,sBACA,uBDVI,wCCcJ,mDDVI,0CCcJ,mDDTE,mBCaF,kBACA,mDDXI,gDCeJ,sBACA,uBDZI,qDCgBJ,sBACA,uBDbI,wCCiBJ,6DDbI,0CCiBJ,6DDZE,mBCgBF,kBACA,mDDdI,gDCkBJ,sBACA,uBDfI,qDCmBJ,sBACA,uBDhBI,wCCoBJ,6DDhBI,0CCoBJ,6DDdI,kFCkBJ,uDDXE,WACE,oBACA,mBACA,yBAGF,iCACE,mDACA,iDACA,iDACA,+CAGF,sCACE,mDACA,iDACA,iDACA,+CAEA,8CACE,0BACA,6CACA,aACA,mBACA,eACA,0BACA,gBAIJ,0FAEE,yBACA","file":"split-button.css"}

package/labs/gb/components/splitbutton/split-button.d.ts

@@ -36,12 +36,12 @@ export declare function splitButtonClasses({ selected, }?: SplitButtonClassesSta
  *   <div class="${splitButton()}">
  *     <button class="${button({color: 'filled'})}">Label</button>
  *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
- *     <md-menu id="menu">
- *       <md-menu-item>Option 1</md-menu-item>
- *       <md-menu-item>Option 2</md-menu-item>
- *     </md-menu>
+ *     <md-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-menu>
  *   </div>
  * `;
  * ```
  */
-export declare const splitButton: (state?: SplitButtonClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+export declare const splitButton: (state?: SplitButtonClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/splitbutton/split-button.js

@@ -3,7 +3,7 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { createClassMapDirective } from '../shared/directives.js';
 /** Split Button classes. */
 export const SPLIT_BUTTON_CLASSES = {
     splitButton: 'split-btn',
@@ -32,10 +32,10 @@ export function splitButtonClasses({ selected = false, } = {}) {
  *   <div class="${splitButton()}">
  *     <button class="${button({color: 'filled'})}">Label</button>
  *     <button class="${button({color: 'filled'})}" popovertarget="menu"></button>
- *     <md-menu id="menu">
- *       <md-menu-item>Option 1</md-menu-item>
- *       <md-menu-item>Option 2</md-menu-item>
- *     </md-menu>
+ *     <md-gb-menu id="menu">
+ *       <md-gb-menu-item>Option 1</md-gb-menu-item>
+ *       <md-gb-menu-item>Option 2</md-gb-menu-item>
+ *     </md-gb-menu>
  *   </div>
  * `;
  * ```

package/labs/gb/components/splitbutton/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAS9F,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Split Button color configuration types. */\nexport type SplitButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined';\n\n/** Split Button size configuration types. */\nexport type SplitButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Split Button classes. */\nexport const SPLIT_BUTTON_CLASSES = {\n  splitButton: 'split-btn',\n  splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/** The state provided to the `splitButtonClasses()` function. */\nexport interface SplitButtonClassesState {\n  /** Whether the split trailing button is selected. */\n  selected?: boolean;\n}\n\n/**\n * Returns the split button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function splitButtonClasses({\n  selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n  return {\n    [SPLIT_BUTTON_CLASSES.splitButton]: true,\n    [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n  };\n}\n\n/**\n * A Lit directive that adds split button styling and functionality to its\n * element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${splitButton()}\">\n *     <button class=\"${button({color: 'filled'})}\">Label</button>\n *     <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n *     <md-menu id=\"menu\">\n *       <md-menu-item>Option 1</md-menu-item>\n *       <md-menu-item>Option 2</md-menu-item>\n *     </md-menu>\n *   </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n  getClasses: splitButtonClasses,\n});\n"]}
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["split-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAQhE,4BAA4B;AAC5B,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,WAAW,EAAE,WAAW;IACxB,mBAAmB,EAAE,oBAAoB;CACjC,CAAC;AAQX;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,GAAG,KAAK,MACW,EAAE;IAC7B,OAAO;QACL,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,IAAI;QACxC,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,EAAE,QAAQ;KACrD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,uBAAuB,CAAC;IACjD,UAAU,EAAE,kBAAkB;CAC/B,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 {createClassMapDirective} from '../shared/directives.js';\n\n/** Split Button color configuration types. */\nexport type SplitButtonColor = 'filled' | 'elevated' | 'tonal' | 'outlined';\n\n/** Split Button size configuration types. */\nexport type SplitButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Split Button classes. */\nexport const SPLIT_BUTTON_CLASSES = {\n  splitButton: 'split-btn',\n  splitButtonSelected: 'split-btn-selected',\n} as const;\n\n/** The state provided to the `splitButtonClasses()` function. */\nexport interface SplitButtonClassesState {\n  /** Whether the split trailing button is selected. */\n  selected?: boolean;\n}\n\n/**\n * Returns the split button classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the split button.\n * @return An object of class names and truthy values if they apply.\n */\nexport function splitButtonClasses({\n  selected = false,\n}: SplitButtonClassesState = {}): ClassInfo {\n  return {\n    [SPLIT_BUTTON_CLASSES.splitButton]: true,\n    [SPLIT_BUTTON_CLASSES.splitButtonSelected]: selected,\n  };\n}\n\n/**\n * A Lit directive that adds split button styling and functionality to its\n * element.\n *\n * @example\n * ```ts\n * html`\n *   <div class=\"${splitButton()}\">\n *     <button class=\"${button({color: 'filled'})}\">Label</button>\n *     <button class=\"${button({color: 'filled'})}\" popovertarget=\"menu\"></button>\n *     <md-gb-menu id=\"menu\">\n *       <md-gb-menu-item>Option 1</md-gb-menu-item>\n *       <md-gb-menu-item>Option 2</md-gb-menu-item>\n *     </md-gb-menu>\n *   </div>\n * `;\n * ```\n */\nexport const splitButton = createClassMapDirective({\n  getClasses: splitButtonClasses,\n});\n"]}

package/labs/gb/components/switch/_switch-tokens.scss

@@ -4,6 +4,7 @@
 //
 
 @mixin root {
+  // LINT.IfChange
   --handle-color: var(--md-sys-color-outline);
   --handle-size: 16px;
   --with-icon-handle-size: 24px;
@@ -16,6 +17,7 @@
   --track-outline-color: var(--md-sys-color-outline);
   --track-outline-width: 2px;
   --track-width: 52px;
+  // LINT.ThenChange(md-switch.ts) keep in sync with `@cssprop` jsdoc tags
 }
 
 @mixin hovered {

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

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

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

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

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

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

package/labs/gb/components/switch/{md-switch.d.ts → switch-element.d.ts}

@@ -7,17 +7,29 @@ import { CSSResultOrNative, LitElement } from 'lit';
 import { createValidator, getValidityAnchor } from '../../../behaviors/constraint-validation.js';
 import { getFormState, getFormValue } from '../../../behaviors/form-associated.js';
 import { CheckboxValidator } from '../../../behaviors/validators/checkbox-validator.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        /** A Material Design switch component. */
-        'md-switch': Switch;
-    }
-}
 declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("../../../behaviors/custom-state-set.js").WithCustomStateSet) & (abstract new (...args: any[]) => import("../../../behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("../../../behaviors/form-associated.js").FormAssociatedConstructor, import("../../../behaviors/form-associated.js").FormAssociated>, import("../../../behaviors/constraint-validation.js").ConstraintValidation>>;
 /**
  * A Material Design switch component.
+ *
+ * @slot off-icon - Used to show an icon when the switch is unselected.
+ * @slot on-icon - Used to show an icon when the switch is selected.
+ * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles
+ * @csspart switch - The switch's root element.
+ * @cssprop --handle-color
+ * @cssprop --handle-size
+ * @cssprop --with-icon-handle-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-size
+ * @cssprop --track-color
+ * @cssprop --track-height
+ * @cssprop --track-outline-color
+ * @cssprop --track-outline-width
+ * @cssprop --track-width
  */
-export declare class Switch extends baseClass {
+export declare class SwitchElement extends baseClass {
     /** @nocollapse */
     static shadowRootOptions: ShadowRootInit;
     static styles: CSSResultOrNative[];

package/labs/gb/components/switch/{md-switch.js → switch-element.js}

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { mixinDelegatesAria } from '../../../../internal/aria/delegate.js';
 import { redispatchEvent } from '../../../../internal/events/redispatch-event.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../../behaviors/constraint-validation.js';
@@ -25,8 +25,26 @@ import { switchToggle } from './switch.js';
 const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement)))));
 /**
  * A Material Design switch component.
+ *
+ * @slot off-icon - Used to show an icon when the switch is unselected.
+ * @slot on-icon - Used to show an icon when the switch is selected.
+ * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed
+ * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles
+ * @csspart switch - The switch's root element.
+ * @cssprop --handle-color
+ * @cssprop --handle-size
+ * @cssprop --with-icon-handle-size
+ * @cssprop --icon-color
+ * @cssprop --icon-size
+ * @cssprop --state-layer-color
+ * @cssprop --state-layer-size
+ * @cssprop --track-color
+ * @cssprop --track-height
+ * @cssprop --track-outline-color
+ * @cssprop --track-outline-width
+ * @cssprop --track-width
  */
-let Switch = class Switch extends baseClass {
+export class SwitchElement extends baseClass {
     constructor() {
         super(...arguments);
         /**
@@ -121,13 +139,13 @@ let Switch = class Switch extends baseClass {
     [getValidityAnchor]() {
         return this.button;
     }
-};
+}
 /** @nocollapse */
-Switch.shadowRootOptions = {
+SwitchElement.shadowRootOptions = {
     mode: 'open',
     delegatesFocus: true,
 };
-Switch.styles = [
+SwitchElement.styles = [
     focusRingStyles,
     rippleStyles,
     switchStyles,
@@ -145,18 +163,14 @@ Switch.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], Switch.prototype, "selected", null);
+], SwitchElement.prototype, "selected", null);
 __decorate([
     property({ type: Boolean })
-], Switch.prototype, "required", void 0);
+], SwitchElement.prototype, "required", void 0);
 __decorate([
     property()
-], Switch.prototype, "value", void 0);
+], SwitchElement.prototype, "value", void 0);
 __decorate([
     query('button', true)
-], Switch.prototype, "button", void 0);
-Switch = __decorate([
-    customElement('md-switch')
-], Switch);
-export { Switch };
-//# sourceMappingURL=md-switch.js.map
+], SwitchElement.prototype, "button", void 0);
+//# sourceMappingURL=switch-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-element.js","sourceRoot":"","sources":["switch-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAC;AAChF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,QAAQ,EACR,mBAAmB,EACnB,WAAW,GACZ,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAC,qBAAqB,EAAC,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,qDAAqD,CAAC;AACtF,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,eAAe,MAAM,yBAAyB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACxF,kFAAkF;AAClF,OAAO,YAAY,MAAM,sBAAsB,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAClF,4EAA4E;AAC5E,OAAO,YAAY,MAAM,cAAc,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AAC1E,oEAAoE;AAEpE,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC5E,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IAA5C;;QA8CE;;;;;WAKG;QACwB,aAAQ,GAAG,KAAK,CAAC;QAE5C;;;WAGG;QACS,UAAK,GAAG,IAAI,CAAC;QAKzB;;;;;;WAMG;QACK,qBAAgB,GAAG,KAAK,CAAC;IAmEnC,CAAC;IAjHC;;;OAGG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IACpC,CAAC;IACD,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,WAAW,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACH,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;IACD,IAAI,eAAe,CAAC,KAAc;QAChC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IACnD,CAAC;IA4BkB,MAAM;QACvB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;iBAIE,YAAY,EAAE;wBACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBACnC,SAAS,IAAI,OAAO;oBACrB,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,YAAY;wDACqB,UAAU,EAAE;;;KAG/D,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,WAAW,KAAK,MAAM,CAAC;QACpD,gDAAgD;QAChD,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,mEAAmE;YACnE,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,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3C,CAAC;IAEQ,CAAC,YAAY,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAEQ,iBAAiB;QACxB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC;IACvC,CAAC;IAEQ,wBAAwB,CAAC,KAAa;QAC7C,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC;IACnC,CAAC;IAEQ,CAAC,eAAe,CAAC;QACxB,OAAO,IAAI,iBAAiB,CAAC,GAAG,EAAE,CAAC,CAAC;YAClC,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC,CAAC;IACN,CAAC;IAEQ,CAAC,iBAAiB,CAAC;QAC1B,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;;AAvID,kBAAkB;AACF,+BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,oBAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAfqB,CAepB;AAOF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAGzB;AAqB0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CAAkB;AAMhC;IAAX,QAAQ,EAAE;4CAAc;AAGR;IADhB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;6CAC6B","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ARIAMixinStrict} from '../../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../../behaviors/constraint-validation.js';\nimport {\n  hasState,\n  mixinCustomStateSet,\n  toggleState,\n} from '../../../behaviors/custom-state-set.js';\nimport {mixinElementInternals} from '../../../behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../../behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../../behaviors/validators/checkbox-validator.js';\nimport {hasSlotted} from '../shared/has-slotted.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 switchStyles from './switch.css' with {type: 'css'}; // github-only\n// import switchStyles from './switch.cssresult.js'; // google3-only\n\nimport {switchToggle} from './switch.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement))),\n  ),\n);\n\n/**\n * A Material Design switch component.\n *\n * @slot off-icon - Used to show an icon when the switch is unselected.\n * @slot on-icon - Used to show an icon when the switch is selected.\n * @fires {InputEvent} input - Fired when the switch is selected or unselected. --bubbles --composed\n * @fires {Event} change - Fired when the switch is selected or unselected. --bubbles\n * @csspart switch - The switch's root element.\n * @cssprop --handle-color\n * @cssprop --handle-size\n * @cssprop --with-icon-handle-size\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --state-layer-color\n * @cssprop --state-layer-size\n * @cssprop --track-color\n * @cssprop --track-height\n * @cssprop --track-outline-color\n * @cssprop --track-outline-width\n * @cssprop --track-width\n */\nexport class SwitchElement extends baseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    switchStyles,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .switch {\n        flex: 1;\n      }\n      ::slotted(*) {\n        grid-area: handle;\n      }\n    `,\n  ];\n\n  /**\n   * Puts the switch in the selected state and sets the form submission value to\n   * the `value` property.\n   */\n  @property({type: Boolean})\n  get selected() {\n    return this[hasState]('selected');\n  }\n  set selected(value: boolean) {\n    this[toggleState]('selected', value);\n  }\n\n  /**\n   * The default selected state of the switch.\n   */\n  get defaultSelected(): boolean {\n    return this.hasAttribute('selected');\n  }\n  set defaultSelected(value: boolean) {\n    this.toggleAttribute('selected', value || false);\n  }\n\n  /**\n   * When true, require the switch to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value associated with this switch on form submission. `null` is\n   * submitted when `selected` is `false`.\n   */\n  @property() value = 'on';\n\n  @query('button', true)\n  private readonly button!: HTMLButtonElement | null;\n\n  /**\n   * Mimics the behavior of <input> dirty checkedness, where the `checked`\n   * attribute only updates the checked state if the checkbox 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\n  protected override render() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        role=\"switch\"\n        part=\"switch\"\n        class=\"${switchToggle()}\"\n        aria-checked=\"${this.selected ? 'true' : 'false'}\"\n        aria-label=${ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        @change=${this.handleChange}>\n        <slot name=\"off-icon\" class=\"switch-icon-off\" ${hasSlotted()}></slot>\n        <slot name=\"on-icon\" class=\"switch-icon-on\"></slot>\n      </button>\n    `;\n  }\n\n  private handleChange(event: Event) {\n    this.dirtyCheckedness = true;\n    this.selected = this.button?.ariaChecked === 'true';\n    // Change event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (name === 'selected' && this.dirtyCheckedness) {\n      // The 'selected' attribute does not update switches that have been\n      // interacted with.\n      return;\n    }\n\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  override [getFormValue]() {\n    return this.selected ? this.value : null;\n  }\n\n  override [getFormState]() {\n    return String(this.selected);\n  }\n\n  override formResetCallback() {\n    this.dirtyCheckedness = false;\n    this.selected = this.defaultSelected;\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.selected = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => ({\n      checked: this.selected,\n      required: this.required,\n    }));\n  }\n\n  override [getValidityAnchor]() {\n    return this.button;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["switch.scss","_switch-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBAEI,QCNF,4CACA,oBACA,8BACA,4DACA,kBACA,oDACA,yBACA,6DACA,qBACA,mDACA,2BACA,oBDFE,0BCMF,uDDHE,kDCOF,2CACA,mCACA,+CACA,oBACA,uDACA,iDDVI,uECcJ,sDDVE,6DCcF,oBDXE,gCCeF,qEACA,qFAGA,8EDjBI,6ECuBJ,4CACA,mEACA,oEDpBE,QACE,oBACA,mDACA,mBACA,gBACA,8BACA,mEACA,0CACA,yBACA,2BACA,SACA,UACA,mEACA,kBACA,kBACA,wBACA,iCACA,WAEA,kDACE,0CAGF,gBACE,0HAIA,oBACA,6CACA,aACA,mBACA,WACA,iBACA,eACA,YACA,gDACA,uDACA,kBACA,+BAGF,eACE,WACA,WACA,kBACA,iBACA,+BACA,eACA,8BACA,kBACA,+BACA,oCACA,kCAIJ,qEACE,YAKA,8IAEE,iBAIJ,sIAEE","file":"switch.css"}
+{"version":3,"sourceRoot":"","sources":["switch.scss","_switch-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,kDACA,sBAEI,QCLF,4CACA,oBACA,8BACA,4DACA,kBACA,oDACA,yBACA,6DACA,qBACA,mDACA,2BACA,oBDHE,0BCQF,uDDLE,kDCSF,2CACA,mCACA,+CACA,oBACA,uDACA,iDDZI,uECgBJ,sDDZE,6DCgBF,oBDbE,gCCiBF,qEACA,qFAGA,8EDnBI,6ECyBJ,4CACA,mEACA,oEDtBE,QACE,oBACA,mDACA,mBACA,gBACA,8BACA,mEACA,0CACA,yBACA,2BACA,SACA,UACA,mEACA,kBACA,kBACA,wBACA,iCACA,WAEA,kDACE,0CAGF,gBACE,0HAIA,oBACA,6CACA,aACA,mBACA,WACA,iBACA,eACA,YACA,gDACA,uDACA,kBACA,+BAGF,eACE,WACA,WACA,kBACA,iBACA,+BACA,eACA,8BACA,kBACA,+BACA,oCACA,kCAIJ,qEACE,YAKA,8IAEE,iBAIJ,sIAEE","file":"switch.css"}

package/labs/gb/styles/adopt-styles.js

@@ -37,9 +37,7 @@ export function adoptStyles(owner, styles) {
     if (!owner)
         return;
     styles = Array.isArray(styles) ? styles : [styles];
-    const stylesheets = styles.map((cssResultOrNative) => isCSSResult(cssResultOrNative)
-        ? cssResultOrNative.styleSheet
-        : cssResultOrNative);
+    const stylesheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
     if (adopt(owner, stylesheets)) {
         // Styles adopted directly on the owner document or shadow root.
         return;
@@ -51,12 +49,14 @@ export function adoptStyles(owner, styles) {
 }
 function adopt(node, stylesheets) {
     if (node && 'adoptedStyleSheets' in node) {
-        node.adoptedStyleSheets = Array.from(new Set([...node.adoptedStyleSheets, ...stylesheets]));
+        const unadopted = stylesheets.filter((stylesheet) => !node.adoptedStyleSheets.includes(stylesheet));
+        if (!unadopted.length) {
+            // All styles are already adopted.
+            return true;
+        }
+        node.adoptedStyleSheets = Array.from(new Set([...node.adoptedStyleSheets, ...unadopted]));
         return true;
     }
     return false;
 }
-function isCSSResult(style) {
-    return 'styleSheet' in style;
-}
 //# sourceMappingURL=adopt-styles.js.map