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

package/labs/gb/components/ripple/ripple.scss

@@ -0,0 +1,103 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@layer md.sys;
+@layer md.comp.ripple {
+  @property --ripple-scale {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-hover-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-press-opacity {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 0%;
+  }
+  @property --ripple-x {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+  @property --ripple-y {
+    syntax: '<percentage>';
+    inherits: false;
+    initial-value: 50%;
+  }
+
+  .ripple {
+    --ripple-color: currentColor;
+    --ripple-press-transition: --ripple-press-opacity 375ms linear;
+    --ripple-transition: --ripple-hover-opacity 15ms linear,
+      var(--ripple-press-transition);
+    --ripple-animation: ripple-release 375ms linear;
+    --ripple: radial-gradient(
+        hsl(from var(--ripple-color) h s l / var(--ripple-hover-opacity))
+      ),
+      radial-gradient(
+        circle at var(--ripple-x) var(--ripple-y),
+        hsl(from var(--ripple-color) h s l / var(--ripple-press-opacity))
+          var(--ripple-scale),
+        transparent calc(var(--ripple-scale) * 1.35)
+      );
+
+    background-image: var(--ripple);
+    transition: var(--ripple-transition);
+    animation: var(--ripple-animation), var(--focus-ring-animation, none);
+
+    // Ripples support the following DOM use cases:
+    // 1. `.ripple` and interactive element are the same.
+    // 2. `.ripple` is a parent of a child interactive `.ripple-target`.
+    // 3. `.ripple` is a child of a parent interactive `.ripple-target`.
+    // 4. `.ripple.ripple-host` is a within an interactive shadow DOM host.
+    //
+    // Pseudo class emulation is only needed for the `.ripple` element, not for
+    // the target or host elements.
+
+    &:is(:hover, .hover),
+    &:has(.ripple-target:hover),
+    .ripple-target:hover &,
+    :host(:hover) &.ripple-host {
+      --ripple-hover-opacity: 8%;
+    }
+
+    &:is(:active, .active),
+    &:has(.ripple-target:active),
+    .ripple-target:active &,
+    :host(:active) &.ripple-host {
+      --ripple-press-opacity: 10%;
+      --ripple-press-transition: --ripple-press-opacity 100ms linear;
+      --ripple-animation: ripple-press forwards 450ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    &:is(:disabled, .disabled) {
+      --ripple: none;
+    }
+  }
+
+  @keyframes ripple-press {
+    from {
+      --ripple-scale: 20%;
+    }
+    to {
+      --ripple-scale: 100%;
+      --ripple-x: 50%;
+      --ripple-y: 50%;
+    }
+  }
+
+  @keyframes ripple-release {
+    from {
+      --ripple-scale: 100%;
+    }
+    to {
+      --ripple-scale: 100%;
+    }
+  }
+}

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

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

package/labs/gb/components/shared/directives.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { noChange } from 'lit';
+import { AsyncDirective, directive, } from 'lit/async-directive.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Creates a Lit directive that behaves like `classMap()`, but also provides
+ * element setup and cleanup logic.
+ *
+ * These directives bind to `class="${componentDirectiveName()}"`.
+ *
+ * @example
+ * ```ts
+ * const toggleButton = createClassMapDirective({
+ *   getClasses: (state: ToggleButtonState) => ({
+ *     'toggle-button': true,
+ *     'toggle-button-selected': state.selected,
+ *   }),
+ *   setupElement: (element, opts) => {
+ *     element.addEventListener('click', () => {
+ *       state.selected = !state.selected;
+ *     }, opts);
+ *   },
+ * });
+ *
+ * html`
+ *   <button class="${toggleButton()}">Unselected</button>
+ *   <button class="${toggleButton({selected: true})}">Selected</button>
+ *   <button class="${toggleButton({classes: {'visible': isVisible}})}">
+ *     With additional classes
+ *   </button>
+ * `;
+ * ```
+ *
+ * @param options Options for creating the class map directive.
+ * @return A Lit `directive()` that binds to the class attribute.
+ */
+export function createClassMapDirective(options) {
+    return directive(class ComponentClassMapDirective extends SetupElementDirective {
+        constructor() {
+            super(...arguments);
+            this.setupElement = options.setupElement;
+        }
+        render(params) {
+            return classMap({
+                ...(params?.classes || {}),
+                ...options.getClasses(params),
+            });
+        }
+    });
+}
+/**
+ * Creates a Lit directive that can be used to add setup and cleanup logic to
+ * an element.
+ *
+ * These directives bind as element parts.
+ *
+ * @example
+ * ```ts
+ * const logClick = createElementDirective((element, opts) => {
+ *   element.addEventListener('click', (event) => {
+ *     console.log('click', event);
+ *   }, opts);
+ * });
+ *
+ * html`<button ${logClick()}>Click me</button>`;
+ * ```
+ *
+ * @param setupElement The function to set up logic for the directive's element.
+ * @return A Lit `directive()` that binds as an element part.
+ */
+export function createElementDirective(setupElement) {
+    return directive(class ElementDirective extends SetupElementDirective {
+        constructor() {
+            super(...arguments);
+            this.setupElement = setupElement;
+        }
+        render() {
+            return noChange;
+        }
+    });
+}
+/**
+ * A base class for Lit element and attribute directives that provides a setup
+ * method for initializing logic when a directive's element is connected.
+ */
+class SetupElementDirective extends AsyncDirective {
+    update({ element }, params) {
+        if (element !== this.element) {
+            this.element = element;
+            this.disconnected();
+            if (this.isConnected) {
+                this.reconnected();
+            }
+        }
+        return this.render(...params);
+    }
+    disconnected() {
+        this.cleanup?.abort();
+    }
+    reconnected() {
+        if (this.element && this.setupElement) {
+            this.cleanup = new AbortController();
+            this.setupElement(this.element, { signal: this.cleanup.signal });
+        }
+    }
+}
+//# sourceMappingURL=directives.js.map

package/labs/gb/components/shared/directives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directives.js","sourceRoot":"","sources":["directives.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,KAAK,CAAC;AAC7B,OAAO,EACL,cAAc,EAEd,SAAS,GAGV,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,QAAQ,EAAiB,MAAM,6BAA6B,CAAC;AAsCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAwC;IAExC,OAAO,SAAS,CACd,MAAM,0BAA2B,SAAQ,qBAAqB;QAA9D;;YAQqB,iBAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzD,CAAC;QARC,MAAM,CAAC,MAAkC;YACvC,OAAO,QAAQ,CAAC;gBACd,GAAG,CAAC,MAAM,EAAE,OAAO,IAAI,EAAE,CAAC;gBAC1B,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC;aAC9B,CAAC,CAAC;QACL,CAAC;KAGF,CACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,sBAAsB,CACpC,YAAkC;IAElC,OAAO,SAAS,CACd,MAAM,gBAAiB,SAAQ,qBAAqB;QAApD;;YAKqB,iBAAY,GAAG,YAAY,CAAC;QACjD,CAAC;QALC,MAAM;YACJ,OAAO,QAAQ,CAAC;QAClB,CAAC;KAGF,CACF,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAe,qBAAsB,SAAQ,cAAc;IAmBhD,MAAM,CAAC,EAAC,OAAO,EAA8B,EAAE,MAAiB;QACvE,IAAI,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,OAAO,GAAG,OAAsB,CAAC;YACtC,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;IAChC,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACxB,CAAC;IAEkB,WAAW;QAC5B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAC,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {noChange} from 'lit';\nimport {\n  AsyncDirective,\n  AttributePart,\n  directive,\n  DirectiveResult,\n  ElementPart,\n} from 'lit/async-directive.js';\nimport {classMap, type ClassInfo} from 'lit/directives/class-map.js';\n\n/**\n * A function that sets up logic for a directive's element.\n *\n * @param element The element attached to the directive.\n * @param opts Options for setting up the element, including an AbortSignal for\n *     cleanup.\n */\nexport type SetupElementFunction = (\n  element: HTMLElement,\n  opts: {signal: AbortSignal},\n) => void;\n\n/**\n * All class map directives include AdditionalClasses to allow adding dynamic\n * classes to the element using `classMap()`.\n */\nexport interface AdditionalClasses {\n  /**\n   * Additional classes to apply to the element.\n   */\n  classes?: ClassInfo;\n}\n\n/**\n * Options for creating a class map directive.\n *\n * @param getClasses A function that returns the class names and truthy values\n *     if they apply.\n * @param setupElement An optional function to set up logic for the directive's\n *     element.\n */\nexport interface ClassMapDirectiveOptions<State> {\n  getClasses: (state?: State) => ClassInfo;\n  setupElement?: SetupElementFunction;\n}\n\n/**\n * Creates a Lit directive that behaves like `classMap()`, but also provides\n * element setup and cleanup logic.\n *\n * These directives bind to `class=\"${componentDirectiveName()}\"`.\n *\n * @example\n * ```ts\n * const toggleButton = createClassMapDirective({\n *   getClasses: (state: ToggleButtonState) => ({\n *     'toggle-button': true,\n *     'toggle-button-selected': state.selected,\n *   }),\n *   setupElement: (element, opts) => {\n *     element.addEventListener('click', () => {\n *       state.selected = !state.selected;\n *     }, opts);\n *   },\n * });\n *\n * html`\n *   <button class=\"${toggleButton()}\">Unselected</button>\n *   <button class=\"${toggleButton({selected: true})}\">Selected</button>\n *   <button class=\"${toggleButton({classes: {'visible': isVisible}})}\">\n *     With additional classes\n *   </button>\n * `;\n * ```\n *\n * @param options Options for creating the class map directive.\n * @return A Lit `directive()` that binds to the class attribute.\n */\nexport function createClassMapDirective<State = {}>(\n  options: ClassMapDirectiveOptions<State>,\n): (state?: State & AdditionalClasses) => DirectiveResult {\n  return directive(\n    class ComponentClassMapDirective extends SetupElementDirective {\n      render(params?: State & AdditionalClasses) {\n        return classMap({\n          ...(params?.classes || {}),\n          ...options.getClasses(params),\n        });\n      }\n\n      protected override setupElement = options.setupElement;\n    },\n  );\n}\n\n/**\n * Creates a Lit directive that can be used to add setup and cleanup logic to\n * an element.\n *\n * These directives bind as element parts.\n *\n * @example\n * ```ts\n * const logClick = createElementDirective((element, opts) => {\n *   element.addEventListener('click', (event) => {\n *     console.log('click', event);\n *   }, opts);\n * });\n *\n * html`<button ${logClick()}>Click me</button>`;\n * ```\n *\n * @param setupElement The function to set up logic for the directive's element.\n * @return A Lit `directive()` that binds as an element part.\n */\nexport function createElementDirective(\n  setupElement: SetupElementFunction,\n): () => DirectiveResult {\n  return directive(\n    class ElementDirective extends SetupElementDirective {\n      render() {\n        return noChange;\n      }\n\n      protected override setupElement = setupElement;\n    },\n  );\n}\n\n/**\n * A base class for Lit element and attribute directives that provides a setup\n * method for initializing logic when a directive's element is connected.\n */\nabstract class SetupElementDirective extends AsyncDirective {\n  /**\n   * Called when the directive's element changes. Use this method to add\n   * event listeners or perform other setup logic.\n   *\n   * The `signal` option is used to clean up setup logic when the element is\n   * disconnected.\n   *\n   * @param element The element attached to the directive.\n   * @param signal An AbortSignal to clean up event listeners and other logic.\n   */\n  protected setupElement?: (\n    element: HTMLElement,\n    opts: {signal: AbortSignal},\n  ) => void;\n\n  private element?: HTMLElement;\n  private cleanup?: AbortController;\n\n  override update({element}: ElementPart | AttributePart, params: unknown[]) {\n    if (element !== this.element) {\n      this.element = element as HTMLElement;\n      this.disconnected();\n      if (this.isConnected) {\n        this.reconnected();\n      }\n    }\n\n    return this.render(...params);\n  }\n\n  protected override disconnected() {\n    this.cleanup?.abort();\n  }\n\n  protected override reconnected() {\n    if (this.element && this.setupElement) {\n      this.cleanup = new AbortController();\n      this.setupElement(this.element, {signal: this.cleanup.signal});\n    }\n  }\n}\n"]}

package/labs/gb/components/shared/has-slotted.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class
+ * to `<slot>` elements when they have assigned nodes.
+ */
+export declare const hasSlotted: () => import("lit-html/directive.js").DirectiveResult;

package/labs/gb/components/shared/has-slotted.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createElementDirective } from './directives.js';
+/**
+ * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class
+ * to `<slot>` elements when they have assigned nodes.
+ */
+export const hasSlotted = createElementDirective((element, opts) => {
+    if (!element.matches('slot')) {
+        throw new Error('hasSlotted() must be used on a <slot> element.');
+    }
+    element.addEventListener('slotchange', (event) => {
+        element.classList.toggle('has-slotted', element.assignedNodes().length > 0);
+    }, opts);
+});
+//# sourceMappingURL=has-slotted.js.map

package/labs/gb/components/shared/has-slotted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-slotted.js","sourceRoot":"","sources":["has-slotted.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,sBAAsB,EAAC,MAAM,iBAAiB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,sBAAsB,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;IACjE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CAAC,gBAAgB,CACtB,YAAY,EACZ,CAAC,KAAK,EAAE,EAAE;QACR,OAAO,CAAC,SAAS,CAAC,MAAM,CACtB,aAAa,EACZ,OAA2B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CACxD,CAAC;IACJ,CAAC,EACD,IAAI,CACL,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createElementDirective} from './directives.js';\n\n/**\n * Emulates the `:has-slotted` CSS pseudo class by adding a `.has-slotted` class\n * to `<slot>` elements when they have assigned nodes.\n */\nexport const hasSlotted = createElementDirective((element, opts) => {\n  if (!element.matches('slot')) {\n    throw new Error('hasSlotted() must be used on a <slot> element.');\n  }\n\n  element.addEventListener(\n    'slotchange',\n    (event) => {\n      element.classList.toggle(\n        'has-slotted',\n        (element as HTMLSlotElement).assignedNodes().length > 0,\n      );\n    },\n    opts,\n  );\n});\n"]}

package/labs/gb/components/shared/pseudo-classes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Cross-component classes for emulating pseudo-classes.
+ *
+ * All components that style with psuedo-classes for their DOM structure also
+ * support emulating these states.
+ *
+ * @example
+ * ```html
+ * <button class="ripple active">Pressed ripple</button>
+ * ```
+ */
+export declare const PSEUDO_CLASSES: {
+    active: string;
+    checked: string;
+    disabled: string;
+    focus: string;
+    focusVisible: string;
+    hover: string;
+    indeterminate: string;
+    invalid: string;
+};
+/**
+ * Returns whether the element is disabled.
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export declare function isDisabled(element: Element): boolean;

package/labs/gb/components/shared/pseudo-classes.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Cross-component classes for emulating pseudo-classes.
+ *
+ * All components that style with psuedo-classes for their DOM structure also
+ * support emulating these states.
+ *
+ * @example
+ * ```html
+ * <button class="ripple active">Pressed ripple</button>
+ * ```
+ */
+export const PSEUDO_CLASSES = {
+    active: 'active',
+    checked: 'checked',
+    disabled: 'disabled',
+    focus: 'focus',
+    focusVisible: 'focus-visible',
+    hover: 'hover',
+    indeterminate: 'indeterminate',
+    invalid: 'invalid',
+};
+/**
+ * Returns whether the element is disabled.
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export function isDisabled(element) {
+    return element.matches('.disabled,:disabled,[disabled],[aria-disabled=true]');
+}
+//# sourceMappingURL=pseudo-classes.js.map

package/labs/gb/components/shared/pseudo-classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudo-classes.js","sourceRoot":"","sources":["pseudo-classes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB;IACzC,OAAO,OAAO,CAAC,OAAO,CAAC,qDAAqD,CAAC,CAAC;AAChF,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Cross-component classes for emulating pseudo-classes.\n *\n * All components that style with psuedo-classes for their DOM structure also\n * support emulating these states.\n *\n * @example\n * ```html\n * <button class=\"ripple active\">Pressed ripple</button>\n * ```\n */\nexport const PSEUDO_CLASSES = {\n  active: 'active',\n  checked: 'checked',\n  disabled: 'disabled',\n  focus: 'focus',\n  focusVisible: 'focus-visible',\n  hover: 'hover',\n  indeterminate: 'indeterminate',\n  invalid: 'invalid',\n};\n\n/**\n * Returns whether the element is disabled.\n *\n * @param element The element to check.\n * @return true if the element is disabled.\n */\nexport function isDisabled(element: Element): boolean {\n  return element.matches('.disabled,:disabled,[disabled],[aria-disabled=true]');\n}\n"]}

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

@@ -0,0 +1,56 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  --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;
+}
+
+@mixin hovered {
+  --handle-color: var(--md-sys-color-on-surface-variant);
+}
+
+@mixin selected {
+  --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);
+}
+
+@mixin selected-hovered {
+  --handle-color: var(--md-sys-color-primary-container);
+}
+
+@mixin pressed {
+  --handle-size: 28px;
+}
+
+@mixin 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%
+  );
+}
+
+@mixin disabled-selected {
+  --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%);
+}

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { CheckboxValidator } from '@material/web/labs/behaviors/validators/checkbox-validator.js';
+import { CSSResultOrNative, LitElement } from 'lit';
+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("@material/web/labs/behaviors/custom-state-set.js").WithCustomStateSet) & (abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof LitElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>>;
+/**
+ * A Material Design switch component.
+ */
+export declare class Switch extends baseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    static styles: CSSResultOrNative[];
+    /**
+     * Puts the switch in the selected state and sets the form submission value to
+     * the `value` property.
+     */
+    get selected(): boolean;
+    set selected(value: boolean);
+    /**
+     * The default selected state of the switch.
+     */
+    get defaultSelected(): boolean;
+    set defaultSelected(value: boolean);
+    /**
+     * 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
+     */
+    required: boolean;
+    /**
+     * The value associated with this switch on form submission. `null` is
+     * submitted when `selected` is `false`.
+     */
+    value: string;
+    private readonly button;
+    /**
+     * 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
+     */
+    private dirtyCheckedness;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    [getFormValue](): string;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLButtonElement;
+}
+export {};