feat(labs): add switch utility class component

PiperOrigin-RevId: 900968035

Author: asyncliz

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

@@ -0,0 +1,28 @@
+/**
+ * @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 as HTMLSlotElement).assignedNodes().length > 0,
+      );
+    },
+    opts,
+  );
+});

labs/gb/components/shared/has-slotted_test.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {Environment} from '@material/web/testing/environment.js';
+import {html, render} from 'lit';
+
+import {hasSlotted} from './has-slotted.js';
+
+describe('hasSlotted()', () => {
+  const env = new Environment();
+  let host: HTMLElement;
+  let shadowRoot: ShadowRoot;
+  let slot: HTMLSlotElement;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    shadowRoot = host.attachShadow({mode: 'open'});
+    render(html`<slot ${hasSlotted()} name="test"></slot>`, shadowRoot);
+    slot = shadowRoot.querySelector('slot')!;
+    env.render(html`${host}`);
+  });
+
+  it('throws an error if used on a non-<slot> element', () => {
+    expect(() => {
+      env.render(html`<div ${hasSlotted()}></div>`);
+    }).toThrowError('hasSlotted() must be used on a <slot> element.');
+  });
+
+  it('does not add .has-slotted class when slot has no assigned nodes', async () => {
+    expect(slot.classList)
+      .withContext('slot classList')
+      .not.toContain('has-slotted');
+  });
+
+  it('adds .has-slotted class when slot has assigned nodes', async () => {
+    render(html`<span slot="test">Content</span>`, host);
+    await env.waitForStability();
+
+    expect(slot.classList)
+      .withContext('slot classList')
+      .toContain('has-slotted');
+  });
+
+  it('toggles .has-slotted class on slot content change', async () => {
+    render(html`<span slot="test">Content</span>`, host);
+    await env.waitForStability();
+
+    expect(slot.classList)
+      .withContext('slot classList')
+      .toContain('has-slotted');
+
+    host.firstElementChild?.remove();
+    await env.waitForStability();
+
+    expect(slot.classList)
+      .withContext('slot classList')
+      .not.toContain('has-slotted');
+  });
+});

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%);
+}

labs/gb/components/switch/demo/demo.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './material-collection.js';
+import './index.js';
+
+import {
+  KnobTypesToKnobs,
+  MaterialCollection,
+  materialInitsToStoryInits,
+  setUpDemo,
+} from './material-collection.js';
+import {boolInput, Knob, textInput} from './index.js';
+
+import {stories, StoryKnobs} from './stories.js';
+
+const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
+  'Switch',
+  [
+    new Knob('selected', {ui: boolInput()}),
+    new Knob('disabled', {ui: boolInput()}),
+    new Knob('onIcon', {ui: textInput()}),
+    new Knob('offIcon', {ui: textInput()}),
+  ],
+);
+
+collection.addStories(...materialInitsToStoryInits(stories));
+
+setUpDemo(collection, {fonts: 'roboto', icons: 'material-symbols'});

labs/gb/components/switch/demo/stories.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '@material/web/icon/icon.js';
+import '@material/web/labs/gb/components/switch/md-switch.js';
+
+import {MaterialStoryInit} from './material-collection.js';
+import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
+import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js';
+import {css, html, nothing} from 'lit';
+
+/** Knob types for switch stories. */
+export interface StoryKnobs {
+  selected: boolean;
+  disabled: boolean;
+  onIcon: string;
+  offIcon: string;
+}
+
+adoptStyles(document, [
+  m3Styles,
+  css`
+    :root {
+      --md-icon-font: 'Material Symbols Outlined';
+    }
+  `,
+]);
+
+const playground: MaterialStoryInit<StoryKnobs> = {
+  name: 'Playground',
+  render(knobs) {
+    return html`
+      <md-switch .selected=${knobs.selected} ?disabled=${knobs.disabled}>
+        ${knobs.offIcon
+          ? html`<md-icon slot="off-icon">${knobs.offIcon}</md-icon>`
+          : nothing}
+        ${knobs.onIcon
+          ? html`<md-icon slot="on-icon">${knobs.onIcon}</md-icon>`
+          : nothing}
+      </md-switch>
+    `;
+  },
+};
+
+const withIcons: MaterialStoryInit<StoryKnobs> = {
+  name: 'With icons',
+  styles: css`
+    md-switch.css-icons::part(switch) {
+      --icon: 'close';
+    }
+    md-switch.css-icons:state(selected)::part(switch) {
+      --icon: 'check';
+    }
+  `,
+  render(knobs) {
+    return html`
+      <md-switch
+        class="css-icons"
+        .selected=${knobs.selected}
+        ?disabled=${knobs.disabled}>
+      </md-switch>
+    `;
+  },
+};
+
+/** Switch stories. */
+export const stories = [playground, withIcons];