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

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

@@ -0,0 +1,159 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { mixinDelegatesAria } from '@material/web/internal/aria/delegate.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { hasState, mixinCustomStateSet, toggleState, } from '@material/web/labs/behaviors/custom-state-set.js';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { getFormState, getFormValue, mixinFormAssociated, } from '@material/web/labs/behaviors/form-associated.js';
+import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
+import { hasSlotted } from '@material/web/labs/gb/components/shared/has-slotted.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';
+import rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';
+import switchStyles from './switch.cssresult.js';
+import { switchToggle } from './switch.js';
+// Separate variable needed for closure.
+const baseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinCustomStateSet(mixinElementInternals(LitElement)))));
+/**
+ * A Material Design switch component.
+ */
+let Switch = class Switch extends baseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true, require the switch to be selected when participating in
+         * form submission.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+         */
+        this.required = false;
+        /**
+         * The value associated with this switch on form submission. `null` is
+         * submitted when `selected` is `false`.
+         */
+        this.value = 'on';
+        /**
+         * Mimics the behavior of <input> dirty checkedness, where the `checked`
+         * attribute only updates the checked state if the checkbox has not been
+         * interacted with.
+         *
+         * @see https://html.spec.whatwg.org/multipage/input.html#concept-input-checked-dirty-flag
+         */
+        this.dirtyCheckedness = false;
+    }
+    /**
+     * Puts the switch in the selected state and sets the form submission value to
+     * the `value` property.
+     */
+    get selected() {
+        return this[hasState]('selected');
+    }
+    set selected(value) {
+        this[toggleState]('selected', value);
+    }
+    /**
+     * The default selected state of the switch.
+     */
+    get defaultSelected() {
+        return this.hasAttribute('selected');
+    }
+    set defaultSelected(value) {
+        this.toggleAttribute('selected', value || false);
+    }
+    render() {
+        const { ariaLabel } = this;
+        return html `
+      <button
+        role="switch"
+        part="switch"
+        class="${switchToggle()}"
+        aria-checked="${this.selected ? 'true' : 'false'}"
+        aria-label=${ariaLabel || nothing}
+        ?disabled=${this.disabled}
+        @change=${this.handleChange}>
+        <slot name="off-icon" class="switch-icon-off" ${hasSlotted()}></slot>
+        <slot name="on-icon" class="switch-icon-on"></slot>
+      </button>
+    `;
+    }
+    handleChange(event) {
+        this.dirtyCheckedness = true;
+        this.selected = this.button?.ariaChecked === 'true';
+        // Change event is not composed, re-dispatch it.
+        redispatchEvent(this, event);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'selected' && this.dirtyCheckedness) {
+            // The 'selected' attribute does not update switches that have been
+            // interacted with.
+            return;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.selected ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.selected);
+    }
+    formResetCallback() {
+        this.dirtyCheckedness = false;
+        this.selected = this.defaultSelected;
+    }
+    formStateRestoreCallback(state) {
+        this.selected = state === 'true';
+    }
+    [createValidator]() {
+        return new CheckboxValidator(() => ({
+            checked: this.selected,
+            required: this.required,
+        }));
+    }
+    [getValidityAnchor]() {
+        return this.button;
+    }
+};
+/** @nocollapse */
+Switch.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+Switch.styles = [
+    focusRingStyles,
+    rippleStyles,
+    switchStyles,
+    css `
+      :host {
+        display: inline-flex;
+      }
+      .switch {
+        flex: 1;
+      }
+      ::slotted(*) {
+        grid-area: handle;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "required", void 0);
+__decorate([
+    property()
+], Switch.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-switch.js","sourceRoot":"","sources":["md-switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,kBAAkB,EAAC,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAC,eAAe,EAAC,MAAM,mDAAmD,CAAC;AAClF,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EACL,QAAQ,EACR,mBAAmB,EACnB,WAAW,GACZ,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,mDAAmD,CAAC;AACxF,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,mBAAmB,GACpB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAC,iBAAiB,EAAC,MAAM,+DAA+D,CAAC;AAChG,OAAO,EAAC,UAAU,EAAC,MAAM,wDAAwD,CAAC;AAClF,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,eAAe,MAAM,gEAAgE,CAAC;AAC7F,OAAO,YAAY,MAAM,6DAA6D,CAAC;AACvF,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AASzC,wCAAwC;AACxC,MAAM,SAAS,GAAG,kBAAkB,CAClC,yBAAyB,CACvB,mBAAmB,CAAC,mBAAmB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,CAC5E,CACF,CAAC;AAEF;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA8CL;;;;;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,wBAAiB,GAAmB;IAClD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEc,aAAM,GAAwB;IAC5C,eAAe;IACf,YAAY;IACZ,YAAY;IACZ,GAAG,CAAA;;;;;;;;;;KAUF;CACF,AAfqB,CAepB;AAOF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAGzB;AAqB0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;wCAAkB;AAMhC;IAAX,QAAQ,EAAE;qCAAc;AAGR;IADhB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;sCAC6B;AA7DxC,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CAyIlB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ARIAMixinStrict} from '@material/web/internal/aria/aria.js';\nimport {mixinDelegatesAria} from '@material/web/internal/aria/delegate.js';\nimport {redispatchEvent} from '@material/web/internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '@material/web/labs/behaviors/constraint-validation.js';\nimport {\n  hasState,\n  mixinCustomStateSet,\n  toggleState,\n} from '@material/web/labs/behaviors/custom-state-set.js';\nimport {mixinElementInternals} from '@material/web/labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '@material/web/labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '@material/web/labs/behaviors/validators/checkbox-validator.js';\nimport {hasSlotted} from '@material/web/labs/gb/components/shared/has-slotted.js';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, query} from 'lit/decorators.js';\n\nimport focusRingStyles from '@material/web/labs/gb/components/focus/focus-ring.cssresult.js';\nimport rippleStyles from '@material/web/labs/gb/components/ripple/ripple.cssresult.js';\nimport switchStyles from './switch.cssresult.js';\n\nimport {switchToggle} from './switch.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design switch component. */\n    'md-switch': Switch;\n  }\n}\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@customElement('md-switch')\nexport class Switch 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

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:". handle ." 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: ""}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: ""): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:"";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: " "}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}/*# sourceMappingURL=switch.css.map */

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

@@ -0,0 +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"}

package/labs/gb/components/switch/switch.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/switch/switch.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/switch/switch.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring;@layer md.comp.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:". handle ." 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: ""}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: ""): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:"";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: " "}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=switch.cssresult.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.cssresult.js","sourceRoot":"","sources":["switch.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/switch/switch.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.switch{.switch{--handle-color: var(--md-sys-color-outline);--handle-size: 16px;--with-icon-handle-size: 24px;--icon-color: var(--md-sys-color-surface-container-highest);--icon-size: 18px;--state-layer-color: var(--md-sys-color-on-surface);--state-layer-size: 40px;--track-color: var(--md-sys-color-surface-container-highest);--track-height: 32px;--track-outline-color: var(--md-sys-color-outline);--track-outline-width: 2px;--track-width: 52px}.switch:is(:hover,.hover){--handle-color: var(--md-sys-color-on-surface-variant)}.switch:is(:checked,.checked,[aria-checked=true]){--track-color: var(--md-sys-color-primary);--track-outline-color: transparent;--handle-color: var(--md-sys-color-on-primary);--handle-size: 24px;--icon-color: var(--md-sys-color-on-primary-container);--state-layer-color: var(--md-sys-color-primary)}.switch:is(:checked,.checked,[aria-checked=true]):where(:hover,.hover){--handle-color: var(--md-sys-color-primary-container)}.switch:is(:active,.active):where(:not(:disabled,.disabled)){--handle-size: 28px}.switch:is(:disabled,.disabled){--handle-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl( from var(--md-sys-color-surface-container-highest) h s l / 12% );--track-outline-color: hsl( from var(--md-sys-color-on-surface) h s l / 12% )}.switch:is(:disabled,.disabled):where(:checked,.checked,[aria-checked=true]){--handle-color: var(--md-sys-color-surface);--icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);--track-color: hsl(from var(--md-sys-color-on-surface) h s l / 12%)}.switch{display:inline-grid;grid-template:\". handle .\" 1fr/0fr min-content 1fr;place-items:center;appearance:none;background:var(--track-color);border:var(--track-outline-width) solid var(--track-outline-color);border-radius:calc(var(--track-height)/2);width:var(--track-width);height:var(--track-height);margin:0;padding:0;transition:grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);isolation:isolate;position:relative;color:var(--icon-color);--md-icon-size: var(--icon-size);--icon: \"\"}.switch:is(:checked,.checked,[aria-checked=true]){grid-template-columns:1fr min-content 0fr}.switch::before{--_handle-size: if( style(--icon: \"\"): var(--handle-size); else: max(var(--handle-size), var(--with-icon-handle-size)); );content:var(--icon);font:var(--md-icon-size) var(--md-icon-font);display:grid;place-items:center;z-index:-1;grid-area:handle;aspect-ratio:1;height:100%;clip-path:circle(calc(var(--_handle-size) / 2));transition:clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:50%;background:var(--handle-color)}.switch::after{content:\"\";z-index:-1;position:absolute;grid-area:handle;background-image:var(--ripple);aspect-ratio:1;width:var(--state-layer-size);border-radius:50%;color:var(--state-layer-color);transition:var(--ripple-transition);animation:var(--ripple-animation)}.switch:has(.switch-icon-off:not(slot),.switch-icon-off.has-slotted){--icon: \" \"}.switch .switch-icon-off:not(slot),.switch .switch-icon-off::slotted(*),.switch .switch-icon-on:not(slot),.switch .switch-icon-on::slotted(*){grid-area:handle}.switch:is(:checked,.checked,[aria-checked=true]) .switch-icon-off,.switch:not(:checked,.checked,[aria-checked=true]) .switch-icon-on{display:none}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Switch classes. */
+export declare const SWITCH_CLASSES: {
+    readonly switch: "switch";
+    readonly checked: string;
+    readonly hover: string;
+    readonly active: string;
+    readonly disabled: string;
+};
+/** The state provided to the `switchClasses()` function. */
+export interface SwitchClassesState {
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the switch classes to apply to an element based on the given state.
+ *
+ * @param state The state of the switch.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function switchClasses({ checked, hover, active, disabled, }?: SwitchClassesState): ClassInfo;
+/**
+ * Sets up switch functionality for the given element.
+ *
+ * @param switchEl The element on which to set up switch functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupSwitch(switchEl: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds switch styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <input role="switch" type="checkbox" class="${switchToggle()}">
+ *
+ *   <button role="switch" aria-checked="false" class="${switchToggle()}"></button>
+ * `;
+ * ```
+ */
+export declare const switchToggle: (state?: SwitchClassesState & import("@material/web/labs/gb/components/shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { afterDispatch, setupDispatchHooks, } from '@material/web/internal/events/dispatch-hooks.js';
+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 { createClassMapDirective } from '@material/web/labs/gb/components/shared/directives.js';
+import { PSEUDO_CLASSES, isDisabled, } from '@material/web/labs/gb/components/shared/pseudo-classes.js';
+/** Switch classes. */
+export const SWITCH_CLASSES = {
+    switch: 'switch',
+    checked: PSEUDO_CLASSES.checked,
+    hover: PSEUDO_CLASSES.hover,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the switch classes to apply to an element based on the given state.
+ *
+ * @param state The state of the switch.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function switchClasses({ checked = false, hover = false, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses(),
+        [SWITCH_CLASSES.switch]: true,
+        [SWITCH_CLASSES.checked]: checked,
+        [SWITCH_CLASSES.hover]: hover,
+        [SWITCH_CLASSES.active]: active,
+        [SWITCH_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up switch functionality for the given element.
+ *
+ * @param switchEl The element on which to set up switch functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupSwitch(switchEl, opts) {
+    const isButton = switchEl.matches('button');
+    if (isButton) {
+        // Only setup dispatch hooks if we add a button click listener, but call it
+        // before setupRipple() adds its click listener.
+        setupDispatchHooks(switchEl, 'click');
+    }
+    setupRipple(switchEl, opts);
+    if (!isButton)
+        return;
+    // Support toggling <button role="switch" aria-checked="">
+    switchEl.addEventListener('click', (event) => {
+        if (isDisabled(switchEl))
+            return;
+        const wasChecked = switchEl.ariaChecked === 'true';
+        switchEl.ariaChecked = String(!wasChecked);
+        afterDispatch(event, () => {
+            if (event.defaultPrevented) {
+                switchEl.ariaChecked = String(wasChecked);
+                return;
+            }
+            // Mimic native browser input and change event behavior.
+            switchEl.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            switchEl.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    }, opts);
+}
+/**
+ * A Lit directive that adds switch styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`
+ *   <input role="switch" type="checkbox" class="${switchToggle()}">
+ *
+ *   <button role="switch" aria-checked="false" class="${switchToggle()}"></button>
+ * `;
+ * ```
+ */
+export const switchToggle = createClassMapDirective({
+    getClasses: switchClasses,
+    setupElement: setupSwitch,
+});
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,kBAAkB,GACnB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,sDAAsD,CAAC;AACtF,OAAO,EACL,aAAa,EACb,WAAW,GACZ,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAAC,uBAAuB,EAAC,MAAM,uDAAuD,CAAC;AAC9F,OAAO,EACL,cAAc,EACd,UAAU,GACX,MAAM,2DAA2D,CAAC;AAGnE,sBAAsB;AACtB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAcX;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACM,EAAE;IACxB,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,EAAE;QACrB,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI;QAC7B,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO;QACjC,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK;QAC7B,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM;QAC/B,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACpC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CACzB,QAAqB,EACrB,IAA6B;IAE7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5C,IAAI,QAAQ,EAAE,CAAC;QACb,2EAA2E;QAC3E,gDAAgD;QAChD,kBAAkB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC;IAED,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,QAAQ;QAAE,OAAO;IAEtB,0DAA0D;IAC1D,QAAQ,CAAC,gBAAgB,CACvB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,UAAU,CAAC,QAAQ,CAAC;YAAE,OAAO;QACjC,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,KAAK,MAAM,CAAC;QACnD,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3C,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE;YACxB,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC3B,QAAQ,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;gBAC1C,OAAO;YACT,CAAC;YAED,wDAAwD;YACxD,QAAQ,CAAC,aAAa,CACpB,IAAI,UAAU,CAAC,OAAO,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzD,CAAC;YACF,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACL,CAAC,EACD,IAAI,CACL,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,uBAAuB,CAAC;IAClD,UAAU,EAAE,aAAa;IACzB,YAAY,EAAE,WAAW;CAC1B,CAAC,CAAC","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 {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 {createClassMapDirective} from '@material/web/labs/gb/components/shared/directives.js';\nimport {\n  PSEUDO_CLASSES,\n  isDisabled,\n} from '@material/web/labs/gb/components/shared/pseudo-classes.js';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\n\n/** Switch classes. */\nexport const SWITCH_CLASSES = {\n  switch: 'switch',\n  checked: PSEUDO_CLASSES.checked,\n  hover: PSEUDO_CLASSES.hover,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `switchClasses()` function. */\nexport interface SwitchClassesState {\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the switch classes to apply to an element based on the given state.\n *\n * @param state The state of the switch.\n * @return An object of class names and truthy values if they apply.\n */\nexport function switchClasses({\n  checked = false,\n  hover = false,\n  active = false,\n  disabled = false,\n}: SwitchClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses(),\n    [SWITCH_CLASSES.switch]: true,\n    [SWITCH_CLASSES.checked]: checked,\n    [SWITCH_CLASSES.hover]: hover,\n    [SWITCH_CLASSES.active]: active,\n    [SWITCH_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up switch functionality for the given element.\n *\n * @param switchEl The element on which to set up switch functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupSwitch(\n  switchEl: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  const isButton = switchEl.matches('button');\n  if (isButton) {\n    // Only setup dispatch hooks if we add a button click listener, but call it\n    // before setupRipple() adds its click listener.\n    setupDispatchHooks(switchEl, 'click');\n  }\n\n  setupRipple(switchEl, opts);\n  if (!isButton) return;\n\n  // Support toggling <button role=\"switch\" aria-checked=\"\">\n  switchEl.addEventListener(\n    'click',\n    (event) => {\n      if (isDisabled(switchEl)) return;\n      const wasChecked = switchEl.ariaChecked === 'true';\n      switchEl.ariaChecked = String(!wasChecked);\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) {\n          switchEl.ariaChecked = String(wasChecked);\n          return;\n        }\n\n        // Mimic native browser input and change event behavior.\n        switchEl.dispatchEvent(\n          new InputEvent('input', {bubbles: true, composed: true}),\n        );\n        switchEl.dispatchEvent(new Event('change', {bubbles: true}));\n      });\n    },\n    opts,\n  );\n}\n\n/**\n * A Lit directive that adds switch styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`\n *   <input role=\"switch\" type=\"checkbox\" class=\"${switchToggle()}\">\n *\n *   <button role=\"switch\" aria-checked=\"false\" class=\"${switchToggle()}\"></button>\n * `;\n * ```\n */\nexport const switchToggle = createClassMapDirective({\n  getClasses: switchClasses,\n  setupElement: setupSwitch,\n});\n"]}

package/labs/gb/components/switch/switch.scss

@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'switch-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring;
+@layer md.comp.switch {
+  .switch {
+    & {
+      @include switch-tokens.root;
+    }
+    &:is(:hover, .hover) {
+      @include switch-tokens.hovered;
+    }
+    &:is(:checked, .checked, [aria-checked='true']) {
+      @include switch-tokens.selected;
+      &:where(:hover, .hover) {
+        @include switch-tokens.selected-hovered;
+      }
+    }
+    &:is(:active, .active):where(:not(:disabled, .disabled)) {
+      @include switch-tokens.pressed;
+    }
+    &:is(:disabled, .disabled) {
+      @include switch-tokens.disabled;
+      &:where(:checked, .checked, [aria-checked='true']) {
+        @include switch-tokens.disabled-selected;
+      }
+    }
+
+    & {
+      display: inline-grid;
+      grid-template: '. handle .' 1fr / 0fr min-content 1fr;
+      place-items: center;
+      appearance: none;
+      background: var(--track-color);
+      border: var(--track-outline-width) solid var(--track-outline-color);
+      border-radius: calc(var(--track-height) / 2);
+      width: var(--track-width);
+      height: var(--track-height);
+      margin: 0;
+      padding: 0;
+      transition: grid-template-columns 75ms cubic-bezier(0.4, 0, 0.2, 1);
+      isolation: isolate;
+      position: relative;
+      color: var(--icon-color);
+      --md-icon-size: var(--icon-size);
+      --icon: '';
+
+      &:is(:checked, .checked, [aria-checked='true']) {
+        grid-template-columns: 1fr min-content 0fr;
+      }
+
+      &::before {
+        --_handle-size: if(
+          style(--icon: ''): var(--handle-size);
+          else: max(var(--handle-size), var(--with-icon-handle-size));
+        );
+        content: var(--icon);
+        font: var(--md-icon-size) var(--md-icon-font);
+        display: grid;
+        place-items: center;
+        z-index: -1;
+        grid-area: handle;
+        aspect-ratio: 1;
+        height: 100%;
+        clip-path: circle(calc(var(--_handle-size) / 2));
+        transition: clip-path 75ms cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 50%;
+        background: var(--handle-color);
+      }
+
+      &::after {
+        content: '';
+        z-index: -1;
+        position: absolute;
+        grid-area: handle;
+        background-image: var(--ripple);
+        aspect-ratio: 1;
+        width: var(--state-layer-size);
+        border-radius: 50%;
+        color: var(--state-layer-color);
+        transition: var(--ripple-transition);
+        animation: var(--ripple-animation);
+      }
+    }
+
+    &:has(.switch-icon-off:not(slot), .switch-icon-off.has-slotted) {
+      --icon: ' '; // Use space to clear CSS icon and update the handle size.
+    }
+
+    .switch-icon-off,
+    .switch-icon-on {
+      &:not(slot),
+      &::slotted(*) {
+        grid-area: handle;
+      }
+    }
+
+    &:is(:checked, .checked, [aria-checked='true']) .switch-icon-off,
+    &:not(:checked, .checked, [aria-checked='true']) .switch-icon-on {
+      display: none;
+    }
+  }
+}

package/labs/gb/styles/adopt-styles.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type CSSResultOrNative } from 'lit';
+/**
+ * Owner types that can adopt stylesheets using `adoptStyles()`.
+ */
+export type AdoptStylesOwner = DocumentOrShadowRoot | Element;
+/**
+ * Adopts the given stylesheets to the provided document or shadow root owner.
+ *
+ * @example
+ * ```ts
+ * import globalStylesheet from './stylesheet.css' with {type: 'css'};
+ *
+ * adoptStyles(document, globalStylesheet);
+ * ```
+ *
+ * If an element is provided, the styles are adopted to the element's owner
+ * document. If the element is within a shadow root, the styles are also adopted
+ * to the host shadow root.
+ *
+ * @example
+ * ```ts
+ * import hostClasses from './stylesheet.css' with {type: 'css'};
+ *
+ * class LightDomElement extends HTMLElement {
+ *   connectedCallback() {
+ *     adoptStyles(this, hostClasses);
+ *     this.classList.add('host-class');
+ *   }
+ * }
+ * ```
+ *
+ * @param owner The owner document, shadow root, or element to adopt the
+ *     styles to.
+ * @param styles The styles to adopt.
+ */
+export declare function adoptStyles(owner: AdoptStylesOwner | null | undefined, styles: CSSResultOrNative | CSSResultOrNative[]): void;

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Adopts the given stylesheets to the provided document or shadow root owner.
+ *
+ * @example
+ * ```ts
+ * import globalStylesheet from './stylesheet.css' with {type: 'css'};
+ *
+ * adoptStyles(document, globalStylesheet);
+ * ```
+ *
+ * If an element is provided, the styles are adopted to the element's owner
+ * document. If the element is within a shadow root, the styles are also adopted
+ * to the host shadow root.
+ *
+ * @example
+ * ```ts
+ * import hostClasses from './stylesheet.css' with {type: 'css'};
+ *
+ * class LightDomElement extends HTMLElement {
+ *   connectedCallback() {
+ *     adoptStyles(this, hostClasses);
+ *     this.classList.add('host-class');
+ *   }
+ * }
+ * ```
+ *
+ * @param owner The owner document, shadow root, or element to adopt the
+ *     styles to.
+ * @param styles The styles to adopt.
+ */
+export function adoptStyles(owner, styles) {
+    if (!owner)
+        return;
+    styles = Array.isArray(styles) ? styles : [styles];
+    const stylesheets = styles.map((cssResultOrNative) => isCSSResult(cssResultOrNative)
+        ? cssResultOrNative.styleSheet
+        : cssResultOrNative);
+    if (adopt(owner, stylesheets)) {
+        // Styles adopted directly on the owner document or shadow root.
+        return;
+    }
+    // When provided an element, adopt styles to the element's document and host
+    // shadow root, if present.
+    adopt(owner.ownerDocument, stylesheets);
+    adopt(owner.getRootNode(), stylesheets);
+}
+function adopt(node, stylesheets) {
+    if (node && 'adoptedStyleSheets' in node) {
+        node.adoptedStyleSheets = Array.from(new Set([...node.adoptedStyleSheets, ...stylesheets]));
+        return true;
+    }
+    return false;
+}
+function isCSSResult(style) {
+    return 'styleSheet' in style;
+}
+//# sourceMappingURL=adopt-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adopt-styles.js","sourceRoot":"","sources":["adopt-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,WAAW,CACzB,KAA0C,EAC1C,MAA+C;IAE/C,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,iBAAiB,EAAE,EAAE,CACpE,WAAW,CAAC,iBAAiB,CAAC;QAC5B,CAAC,CAAC,iBAAiB,CAAC,UAAW;QAC/B,CAAC,CAAC,iBAAiB,CACtB,CAAC;IAEF,IAAI,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC;QAC9B,gEAAgE;QAChE,OAAO;IACT,CAAC;IAED,4EAA4E;IAC5E,2BAA2B;IAC3B,KAAK,CAAC,KAAK,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,KAAK,CACZ,IAAwC,EACxC,WAA4B;IAE5B,IAAI,IAAI,IAAI,oBAAoB,IAAI,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAClC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,GAAG,WAAW,CAAC,CAAC,CACtD,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,WAAW,CAAC,KAAwB;IAC3C,OAAO,YAAY,IAAI,KAAK,CAAC;AAC/B,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {type CSSResult, type CSSResultOrNative} from 'lit';\n\n/**\n * Owner types that can adopt stylesheets using `adoptStyles()`.\n */\nexport type AdoptStylesOwner = DocumentOrShadowRoot | Element;\n\n/**\n * Adopts the given stylesheets to the provided document or shadow root owner.\n *\n * @example\n * ```ts\n * import globalStylesheet from './stylesheet.css' with {type: 'css'};\n *\n * adoptStyles(document, globalStylesheet);\n * ```\n *\n * If an element is provided, the styles are adopted to the element's owner\n * document. If the element is within a shadow root, the styles are also adopted\n * to the host shadow root.\n *\n * @example\n * ```ts\n * import hostClasses from './stylesheet.css' with {type: 'css'};\n *\n * class LightDomElement extends HTMLElement {\n *   connectedCallback() {\n *     adoptStyles(this, hostClasses);\n *     this.classList.add('host-class');\n *   }\n * }\n * ```\n *\n * @param owner The owner document, shadow root, or element to adopt the\n *     styles to.\n * @param styles The styles to adopt.\n */\nexport function adoptStyles(\n  owner: AdoptStylesOwner | null | undefined,\n  styles: CSSResultOrNative | CSSResultOrNative[],\n): void {\n  if (!owner) return;\n\n  styles = Array.isArray(styles) ? styles : [styles];\n  const stylesheets: CSSStyleSheet[] = styles.map((cssResultOrNative) =>\n    isCSSResult(cssResultOrNative)\n      ? cssResultOrNative.styleSheet!\n      : cssResultOrNative,\n  );\n\n  if (adopt(owner, stylesheets)) {\n    // Styles adopted directly on the owner document or shadow root.\n    return;\n  }\n\n  // When provided an element, adopt styles to the element's document and host\n  // shadow root, if present.\n  adopt(owner.ownerDocument, stylesheets);\n  adopt(owner.getRootNode(), stylesheets);\n}\n\nfunction adopt(\n  node: DocumentOrShadowRoot | Node | null,\n  stylesheets: CSSStyleSheet[],\n): node is DocumentOrShadowRoot {\n  if (node && 'adoptedStyleSheets' in node) {\n    node.adoptedStyleSheets = Array.from(\n      new Set([...node.adoptedStyleSheets, ...stylesheets]),\n    );\n    return true;\n  }\n  return false;\n}\n\nfunction isCSSResult(style: CSSResultOrNative): style is CSSResult {\n  return 'styleSheet' in style;\n}\n"]}