@material/web 0.1.0-alpha.0

package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,kBAAkB,EAAC,MAAM,2BAA2B,CAAC;AAE7D,qBAAqB;AACrB,MAAM,OAAO,0BAA2B,SAAQ,kBAAkB;IAChE,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oCAAoC,EAAE,IAAI;SAC3C,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {SegmentedButtonSet} from './segmented-button-set.js';\n\n/** @soyCompatible */\nexport class OutlinedSegmentedButtonSet extends SegmentedButtonSet {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button-set--outlined': true,\n    };\n  }\n}"]}

package/segmentedbuttonset/lib/outlined-styles.css.d.ts

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

package/segmentedbuttonset/lib/outlined-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `.md3-segmented-button-set--outlined{height:var(--md-segmented-button-container-height, 40px)}.md3-segmented-button-set--outlined ::slotted(:first-child){border-start-start-radius:var(--md-segmented-button-shape-start-start, 9999px);border-end-start-radius:var(--md-segmented-button-shape-end-start, 9999px)}.md3-segmented-button-set--outlined ::slotted(:last-child){border-start-end-radius:var(--md-segmented-button-shape-start-end, 9999px);border-end-end-radius:var(--md-segmented-button-shape-end-end, 9999px)}/*# sourceMappingURL=outlined-styles.css.map */
+`;
+//# sourceMappingURL=outlined-styles.css.js.map

package/segmentedbuttonset/lib/outlined-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-segmented-button-set--outlined{height:var(--md-segmented-button-container-height, 40px)}.md3-segmented-button-set--outlined ::slotted(:first-child){border-start-start-radius:var(--md-segmented-button-shape-start-start, 9999px);border-end-start-radius:var(--md-segmented-button-shape-end-start, 9999px)}.md3-segmented-button-set--outlined ::slotted(:last-child){border-start-end-radius:var(--md-segmented-button-shape-start-end, 9999px);border-end-end-radius:var(--md-segmented-button-shape-end-end, 9999px)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/segmentedbuttonset/lib/outlined-styles.scss

@@ -0,0 +1,17 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@use './outlined-segmented-button-set';
+@use './outlined-segmented-button-set-theme';
+
+@include outlined-segmented-button-set.static-styles;
+
+.md3-segmented-button-set--outlined {
+  @include outlined-segmented-button-set-theme.theme-styles(
+    outlined-segmented-button-set-theme.$light-theme
+  );
+}

package/segmentedbuttonset/lib/segmented-button-set.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @requirecss {segmentedbuttonset.lib.shared_styles}
+ *
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { SegmentedButton } from '../../segmentedbutton/lib/segmented-button.js';
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ * @soyCompatible
+ */
+export declare class SegmentedButtonSet extends LitElement {
+    multiselect: boolean;
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    buttons: SegmentedButton[];
+    getButtonDisabled(index: number): boolean;
+    setButtonDisabled(index: number, disabled: boolean): void;
+    getButtonSelected(index: number): boolean;
+    setButtonSelected(index: number, selected: boolean): void;
+    private handleSegmentedButtonInteraction;
+    private toggleSelection;
+    private indexOutOfBounds;
+    private emitSelectionEvent;
+    /** @soyTemplate */
+    render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+}

package/segmentedbuttonset/lib/segmented-button-set.js

@@ -0,0 +1,118 @@
+/**
+ * @requirecss {segmentedbuttonset.lib.shared_styles}
+ *
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { ariaProperty } from '@material/web/decorators/aria-property.js';
+import { html, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ * @soyCompatible
+ */
+export class SegmentedButtonSet extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiselect = false;
+    }
+    getButtonDisabled(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].disabled;
+    }
+    setButtonDisabled(index, disabled) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.buttons[index].disabled = disabled;
+    }
+    getButtonSelected(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].selected;
+    }
+    setButtonSelected(index, selected) {
+        // Ignore out-of-index values.
+        if (this.indexOutOfBounds(index))
+            return;
+        // Ignore disabled buttons.
+        if (this.getButtonDisabled(index))
+            return;
+        if (this.multiselect) {
+            this.buttons[index].selected = selected;
+            this.emitSelectionEvent(index);
+            return;
+        }
+        // Single-select segmented buttons are not unselectable.
+        if (!selected)
+            return;
+        this.buttons[index].selected = true;
+        this.emitSelectionEvent(index);
+        // Deselect all other buttons for single-select.
+        for (let i = 0; i < this.buttons.length; i++) {
+            if (i === index)
+                continue;
+            this.buttons[i].selected = false;
+        }
+    }
+    handleSegmentedButtonInteraction(e) {
+        const index = this.buttons.indexOf(e.target);
+        this.toggleSelection(index);
+    }
+    toggleSelection(index) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.setButtonSelected(index, !this.buttons[index].selected);
+    }
+    indexOutOfBounds(index) {
+        return index < 0 || index >= this.buttons.length;
+    }
+    emitSelectionEvent(index) {
+        this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {
+            detail: {
+                button: this.buttons[index],
+                selected: this.buttons[index].selected,
+                index,
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** @soyTemplate */
+    render() {
+        return html `
+     <span
+       role="group"
+       @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
+       aria-label="${ifDefined(this.ariaLabel)}"
+       class="md3-segmented-button-set ${classMap(this.getRenderClasses())}">
+       <slot></slot>
+     </span>
+     `;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {};
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], SegmentedButtonSet.prototype, "multiselect", void 0);
+__decorate([
+    ariaProperty // tslint:disable-line:no-new-decorators
+    ,
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", String)
+], SegmentedButtonSet.prototype, "ariaLabel", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true }),
+    __metadata("design:type", Array)
+], SegmentedButtonSet.prototype, "buttons", void 0);
+//# sourceMappingURL=segmented-button-set.js.map

package/segmentedbuttonset/lib/segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @requirecss {segmentedbuttonset.lib.shared_styles}\n *\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ariaProperty} from '@material/web/decorators/aria-property.js';\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {SegmentedButton} from '../../segmentedbutton/lib/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n * @soyCompatible\n */\nexport class SegmentedButtonSet extends LitElement {\n  @property({type: Boolean}) multiselect = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(e: CustomEvent) {\n    const index = this.buttons.indexOf(e.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n     <span\n       role=\"group\"\n       @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n       aria-label=\"${ifDefined(this.ariaLabel)}\"\n       class=\"md3-segmented-button-set ${classMap(this.getRenderClasses())}\">\n       <slot></slot>\n     </span>\n     `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {};\n  }\n}\n"]}

package/segmentedbuttonset/lib/shared-styles.css.d.ts

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

package/segmentedbuttonset/lib/shared-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{display:flex;outline:none}.md3-segmented-button-set{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;grid-auto-rows:auto;width:100%}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/segmentedbuttonset/lib/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:flex;outline:none}.md3-segmented-button-set{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;grid-auto-rows:auto;width:100%}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/segmentedbuttonset/lib/shared-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './segmented-button-set';
+
+@include segmented-button-set.static-styles;

package/segmentedbuttonset/outlined-segmented-button-set.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { OutlinedSegmentedButtonSet } from './lib/outlined-segmented-button-set.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;
+    }
+}
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+    static styles: import("lit").CSSResult[];
+}

package/segmentedbuttonset/outlined-segmented-button-set.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OutlinedSegmentedButtonSet } from './lib/outlined-segmented-button-set.js';
+import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedSegmentedButtonSet = class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+};
+MdOutlinedSegmentedButtonSet.styles = [sharedStyles, outlinedStyles];
+MdOutlinedSegmentedButtonSet = __decorate([
+    customElement('md-outlined-segmented-button-set')
+], MdOutlinedSegmentedButtonSet);
+export { MdOutlinedSegmentedButtonSet };
+//# sourceMappingURL=outlined-segmented-button-set.js.map

package/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEH,IAAa,4BAA4B,GAAzC,MAAa,4BAA6B,SAAQ,0BAA0B;CAE3E,CAAA;AADiB,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/switch/_switch.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/switch-theme' show
+  theme;

package/switch/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { Switch } from './lib/switch.js';
+/**
+ * Test harness for switch elements.
+ */
+export declare class SwitchHarness extends Harness<Switch> {
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/switch/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for switch elements.
+ */
+export class SwitchHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.md3-switch');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/switch/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,aAAa,CAAE,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {Switch} from './lib/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLElement>('.md3-switch')!;\n  }\n}\n"]}

package/switch/lib/_switch-handle-theme.scss

@@ -0,0 +1,137 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+$_selected: '.md3-switch--selected';
+$_unselected: '.md3-switch--unselected';
+
+@mixin theme-styles($theme) {
+  .md3-switch__handle-container {
+    @include _handle-container($theme);
+  }
+
+  .md3-switch__handle {
+    @include _handle($theme);
+    @include _handle-selected($theme);
+    &::before {
+      @include _handle-unselected($theme);
+    }
+  }
+}
+
+@mixin _handle-container($theme) {
+  @include _handle-position(
+    map.get($theme, track-height),
+    map.get($theme, track-width)
+  );
+}
+
+@mixin _handle-position($track-height, $track-width) {
+  $margin: calc($track-width - $track-height);
+
+  #{$_selected} & {
+    margin-inline-start: $margin;
+  }
+
+  #{$_unselected} & {
+    margin-inline-end: $margin;
+  }
+}
+
+@mixin _handle($theme) {
+  // Handle shape
+  border-start-start-radius: map.get($theme, handle-shape-start-start);
+  border-start-end-radius: map.get($theme, handle-shape-start-end);
+  border-end-end-radius: map.get($theme, handle-shape-end-end);
+  border-end-start-radius: map.get($theme, handle-shape-end-start);
+
+  @include _handle-size($theme);
+}
+
+@mixin _handle-size($theme) {
+  height: map.get($theme, handle-height);
+  width: map.get($theme, handle-width);
+
+  // TODO(b/230484095): Use token instead of hard coded values
+  #{$_selected} &,
+  #{$_unselected} &.md3-switch__handle--big {
+    transform: scale(1.2);
+  }
+  #{$_unselected} & {
+    transform: scale(0.8);
+  }
+  #{$_selected}:enabled:active &,
+  #{$_unselected}:enabled:active & {
+    transform: scale(1.4);
+  }
+}
+
+@mixin _handle-selected($theme) {
+  @include _selected-handle-color(
+    (
+      default: map.get($theme, selected-handle-color),
+      disabled: map.get($theme, disabled-selected-handle-color),
+      focus: map.get($theme, selected-focus-handle-color),
+      hover: map.get($theme, selected-hover-handle-color),
+      pressed: map.get($theme, selected-pressed-handle-color),
+    )
+  );
+}
+
+@mixin _selected-handle-color($colors) {
+  background-color: map.get($colors, default);
+
+  #{$_selected}:hover & {
+    background-color: map.get($colors, hover);
+  }
+
+  #{$_selected}:focus-visible & {
+    background-color: map.get($colors, focus);
+  }
+
+  #{$_selected}:active & {
+    background-color: map.get($colors, pressed);
+  }
+
+  #{$_selected}:disabled & {
+    background-color: map.get($colors, disabled);
+  }
+}
+
+@mixin _handle-unselected($theme) {
+  @include _unselected-handle-color(
+    (
+      default: map.get($theme, unselected-handle-color),
+      disabled: map.get($theme, disabled-unselected-handle-color),
+      focus: map.get($theme, unselected-focus-handle-color),
+      hover: map.get($theme, unselected-hover-handle-color),
+      pressed: map.get($theme, unselected-pressed-handle-color),
+    )
+  );
+}
+
+@mixin _unselected-handle-color($colors) {
+  background-color: map.get($colors, default);
+
+  #{$_unselected}:hover & {
+    background-color: map.get($colors, hover);
+  }
+
+  #{$_unselected}:focus-visible & {
+    background-color: map.get($colors, focus);
+  }
+
+  #{$_unselected}:active & {
+    background-color: map.get($colors, pressed);
+  }
+
+  #{$_unselected}:disabled & {
+    background-color: map.get($colors, disabled);
+  }
+}

package/switch/lib/_switch-icon-theme.scss

@@ -0,0 +1,52 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+$_selected: '.md3-switch--selected';
+$_unselected: '.md3-switch--unselected';
+
+@mixin theme-styles($theme) {
+  .md3-switch__icon {
+    @include _icon($theme);
+  }
+}
+
+// PRIVATE API - icons
+
+@mixin _icon($theme) {
+  // icon size
+
+  #{$_selected} & {
+    width: map.get($theme, selected-icon-size);
+    height: map.get($theme, selected-icon-size);
+  }
+
+  #{$_unselected} & {
+    width: map.get($theme, unselected-icon-size);
+    height: map.get($theme, unselected-icon-size);
+  }
+
+  // icon color
+
+  #{$_selected} & {
+    fill: map.get($theme, selected-icon-color);
+  }
+
+  #{$_selected}:disabled & {
+    fill: map.get($theme, disabled-selected-icon-color);
+  }
+
+  #{$_unselected} & {
+    fill: map.get($theme, unselected-icon-color);
+  }
+
+  #{$_unselected}:disabled & {
+    fill: map.get($theme, disabled-unselected-icon-color);
+  }
+}