@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/switch/internal/forced-colors-styles.scss

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './switch';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include switch.theme(
+      (
+        'disabled-selected-icon-color': GrayText,
+        'disabled-selected-icon-opacity': 1,
+        'disabled-selected-track-color': GrayText,
+        'disabled-track-opacity': 1,
+        'disabled-handle-color': GrayText,
+        'disabled-handle-opacity': 1,
+        'disabled-icon-color': Canvas,
+        'disabled-icon-opacity': 1,
+        'selected-focus-track-color': ButtonText,
+        'selected-hover-track-color': ButtonText,
+        'selected-icon-color': ButtonText,
+        'selected-hover-icon-color': ButtonText,
+        'selected-focus-icon-color': ButtonText,
+        'selected-pressed-icon-color': ButtonText,
+        'selected-pressed-track-color': ButtonText,
+        'selected-track-color': ButtonText,
+        'focus-handle-color': ButtonText,
+        'handle-color': ButtonText,
+        'hover-handle-color': ButtonText,
+        'icon-color': Canvas,
+        'hover-icon-color': Canvas,
+        'focus-icon-color': Canvas,
+        'pressed-icon-color': Canvas,
+        'pressed-handle-color': ButtonText,
+      )
+    );
+  }
+}

package/switch/internal/switch-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{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 0.12);--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.touch{position:absolute;height:48px;width:48px}.switch:disabled{cursor:default;pointer-events:none}.switch:disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.switch:disabled .track::before{background-clip:content-box}.switch--selected:disabled .track{background-clip:border-box}.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.switch:disabled .track::before,.switch:disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.switch--selected .track::before{background-color:var(--_selected-track-color)}.switch--selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.switch--selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.switch--selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.switch--selected:disabled .track::before{background-color:var(--_disabled-selected-track-color)}.switch--unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.switch--unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.switch--unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.switch--unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.switch--unselected:disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}.handle-container{display:grid;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.switch--selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.switch--unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.switch:disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_handle-height);width:var(--_handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.switch:disabled .handle,.switch:disabled .handle::before{transition:none}.switch--selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.switch--selected:enabled:active .handle,.switch--unselected:enabled:active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.switch--selected .handle::before{background-color:var(--_selected-handle-color)}.switch--selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.switch--selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.switch--selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.switch--selected:disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.switch--unselected .handle::before{background-color:var(--_handle-color)}.switch--unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.switch--unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.switch--unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.switch--unselected:disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.switch--selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.switch--unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.switch:disabled .icon{transition:none}.switch--selected .icon--on,.switch--unselected .icon--off{opacity:1}.switch--unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);fill:var(--_icon-color)}.switch--unselected:hover .icon--off{fill:var(--_hover-icon-color)}.switch--unselected:focus-within .icon--off{fill:var(--_focus-icon-color)}.switch--unselected:active .icon--off{fill:var(--_pressed-icon-color)}.switch--unselected:disabled .icon--off{fill:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.switch--selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.switch--selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.switch--selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.switch--selected:disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=switch-styles.css.map */
+`;
+//# sourceMappingURL=switch-styles.css.js.map

package/switch/internal/switch-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.css.js","sourceRoot":"","sources":["switch-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{--_disabled-selected-handle-color: var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));--_disabled-selected-handle-opacity: var(--md-switch-disabled-selected-handle-opacity, 1);--_disabled-selected-icon-color: var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-switch-disabled-selected-icon-opacity, 0.38);--_disabled-selected-track-color: var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-track-opacity: var(--md-switch-disabled-track-opacity, 0.12);--_handle-shape: var(--md-switch-handle-shape, 9999px);--_pressed-handle-height: var(--md-switch-pressed-handle-height, 28px);--_pressed-handle-width: var(--md-switch-pressed-handle-width, 28px);--_selected-focus-handle-color: var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-focus-icon-color: var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-focus-track-color: var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4));--_selected-handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff));--_selected-handle-height: var(--md-switch-selected-handle-height, 24px);--_selected-handle-width: var(--md-switch-selected-handle-width, 24px);--_selected-hover-handle-color: var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-hover-icon-color: var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-hover-state-layer-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--_selected-hover-track-color: var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4));--_selected-icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-icon-size: var(--md-switch-selected-icon-size, 16px);--_selected-pressed-handle-color: var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff));--_selected-pressed-icon-color: var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_selected-pressed-state-layer-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12);--_selected-pressed-track-color: var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4));--_selected-track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4));--_state-layer-shape: var(--md-switch-state-layer-shape, 9999px);--_state-layer-size: var(--md-switch-state-layer-size, 40px);--_track-height: var(--md-switch-track-height, 32px);--_track-outline-width: var(--md-switch-track-outline-width, 2px);--_track-shape: var(--md-switch-track-shape, 9999px);--_track-width: var(--md-switch-track-width, 52px);--_with-icon-handle-height: var(--md-switch-with-icon-handle-height, 24px);--_with-icon-handle-width: var(--md-switch-with-icon-handle-width, 24px);--_disabled-handle-color: var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-opacity: var(--md-switch-disabled-handle-opacity, 0.38);--_disabled-icon-color: var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-icon-opacity: var(--md-switch-disabled-icon-opacity, 0.38);--_disabled-track-color: var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_disabled-track-outline-color: var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-handle-color: var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-color: var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_focus-track-outline-color: var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e));--_handle-height: var(--md-switch-handle-height, 16px);--_handle-width: var(--md-switch-handle-width, 16px);--_hover-handle-color: var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-state-layer-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--_hover-track-color: var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_hover-track-outline-color: var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e));--_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_icon-size: var(--md-switch-icon-size, 16px);--_pressed-handle-color: var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-state-layer-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12);--_pressed-track-color: var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_pressed-track-outline-color: var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e));--_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));--_handle-shape-start-start: var( --md-switch-handle-shape-start-start, var(--_handle-shape) );--_handle-shape-start-end: var( --md-switch-handle-shape-start-end, var(--_handle-shape) );--_handle-shape-end-end: var( --md-switch-handle-shape-end-end, var(--_handle-shape) );--_handle-shape-end-start: var( --md-switch-handle-shape-end-start, var(--_handle-shape) );--_track-shape-start-start: var( --md-switch-track-shape-start-start, var(--_track-shape) );--_track-shape-start-end: var( --md-switch-track-shape-start-end, var(--_track-shape) );--_track-shape-end-end: var( --md-switch-track-shape-end-end, var(--_track-shape) );--_track-shape-end-start: var( --md-switch-track-shape-end-start, var(--_track-shape) );display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_track-shape-start-start);--md-focus-ring-shape-start-end: var(--_track-shape-start-end);--md-focus-ring-shape-end-end: var(--_track-shape-end-end);--md-focus-ring-shape-end-start: var(--_track-shape-end-start)}.switch{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;flex-shrink:0;margin:0;outline:none;padding:0;position:relative;width:var(--_track-width);height:var(--_track-height);border-start-start-radius:var(--_track-shape-start-start);border-start-end-radius:var(--_track-shape-start-end);border-end-end-radius:var(--_track-shape-end-end);border-end-start-radius:var(--_track-shape-end-start)}.touch{position:absolute;height:48px;width:48px}.switch:disabled{cursor:default;pointer-events:none}.switch:disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.switch:disabled .track::before{background-clip:content-box}.switch--selected:disabled .track{background-clip:border-box}.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:\"\";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.switch:disabled .track::before,.switch:disabled .track::after{transition:none;opacity:var(--_disabled-track-opacity)}.switch--selected .track::before{background-color:var(--_selected-track-color)}.switch--selected:hover .track::before{background-color:var(--_selected-hover-track-color)}.switch--selected:focus-within .track::before{background-color:var(--_selected-focus-track-color)}.switch--selected:active .track::before{background-color:var(--_selected-pressed-track-color)}.switch--selected:disabled .track::before{background-color:var(--_disabled-selected-track-color)}.switch--unselected .track::before{background-color:var(--_track-color);border-color:var(--_track-outline-color);border-style:solid;border-width:var(--_track-outline-width)}.switch--unselected:hover .track::before{background-color:var(--_hover-track-color);border-color:var(--_hover-track-outline-color)}.switch--unselected:focus-visible .track::before{background-color:var(--_focus-track-color);border-color:var(--_focus-track-outline-color)}.switch--unselected:active .track::before{background-color:var(--_pressed-track-color);border-color:var(--_pressed-track-outline-color)}.switch--unselected:disabled .track::before{background-color:var(--_disabled-track-color);border-color:var(--_disabled-track-outline-color)}.handle-container{display:grid;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.switch--selected .handle-container{margin-inline-start:calc(var(--_track-width) - var(--_track-height))}.switch--unselected .handle-container{margin-inline-end:calc(var(--_track-width) - var(--_track-height))}.switch:disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--_handle-shape-start-start);border-start-end-radius:var(--_handle-shape-start-end);border-end-end-radius:var(--_handle-shape-end-end);border-end-start-radius:var(--_handle-shape-end-start);height:var(--_handle-height);width:var(--_handle-width);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:\"\";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.switch:disabled .handle,.switch:disabled .handle::before{transition:none}.switch--selected .handle{height:var(--_selected-handle-height);width:var(--_selected-handle-width)}.handle.with-icon{height:var(--_with-icon-handle-height);width:var(--_with-icon-handle-width)}.switch--selected:enabled:active .handle,.switch--unselected:enabled:active .handle{height:var(--_pressed-handle-height);width:var(--_pressed-handle-width);transition-timing-function:linear;transition-duration:100ms}.switch--selected .handle::before{background-color:var(--_selected-handle-color)}.switch--selected:hover .handle::before{background-color:var(--_selected-hover-handle-color)}.switch--selected:focus-within .handle::before{background-color:var(--_selected-focus-handle-color)}.switch--selected:active .handle::before{background-color:var(--_selected-pressed-handle-color)}.switch--selected:disabled .handle::before{background-color:var(--_disabled-selected-handle-color);opacity:var(--_disabled-selected-handle-opacity)}.switch--unselected .handle::before{background-color:var(--_handle-color)}.switch--unselected:hover .handle::before{background-color:var(--_hover-handle-color)}.switch--unselected:focus-within .handle::before{background-color:var(--_focus-handle-color)}.switch--unselected:active .handle::before{background-color:var(--_pressed-handle-color)}.switch--unselected:disabled .handle::before{background-color:var(--_disabled-handle-color);opacity:var(--_disabled-handle-opacity)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.switch--selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.switch--unselected md-ripple{--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.switch:disabled .icon{transition:none}.switch--selected .icon--on,.switch--unselected .icon--off{opacity:1}.switch--unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--_icon-size);height:var(--_icon-size);fill:var(--_icon-color)}.switch--unselected:hover .icon--off{fill:var(--_hover-icon-color)}.switch--unselected:focus-within .icon--off{fill:var(--_focus-icon-color)}.switch--unselected:active .icon--off{fill:var(--_pressed-icon-color)}.switch--unselected:disabled .icon--off{fill:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.icon--on{width:var(--_selected-icon-size);height:var(--_selected-icon-size);fill:var(--_selected-icon-color)}.switch--selected:hover .icon--on{fill:var(--_selected-hover-icon-color)}.switch--selected:focus-within .icon--on{fill:var(--_selected-focus-icon-color)}.switch--selected:active .icon--on{fill:var(--_selected-pressed-icon-color)}.switch--selected:disabled .icon--on{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=switch-styles.css.map */\n`;\n "]}

package/switch/internal/switch.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
+export declare class Switch extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /** @nocollapse */
+    static formAssociated: boolean;
+    /**
+     * Disables the switch and makes it non-interactive.
+     */
+    disabled: boolean;
+    /**
+     * Puts the switch in the selected state and sets the form submission value to
+     * the `value` property.
+     */
+    selected: boolean;
+    /**
+     * Shows both the selected and deselected icons.
+     */
+    icons: boolean;
+    /**
+     * Shows only the selected icon, and not the deselected icon. If `true`,
+     * overrides the behavior of the `icons` property.
+     */
+    showOnlySelectedIcon: boolean;
+    private readonly button;
+    /**
+     * The value associated with this switch on form submission. `null` is
+     * submitted when `selected` is `false`.
+     */
+    value: string;
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name(): string;
+    set name(name: string);
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form(): HTMLFormElement;
+    /**
+     * The labels this element is associated with.
+     */
+    get labels(): NodeList;
+    private readonly internals;
+    constructor();
+    protected update(changed: PropertyValues<Switch>): void;
+    protected render(): TemplateResult;
+    private getRenderClasses;
+    private renderHandle;
+    private renderIcons;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    private renderOnIcon;
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    private renderOffIcon;
+    private renderTouchTarget;
+    private shouldShowIcons;
+    private handleClick;
+    /** @private */
+    formResetCallback(): void;
+    /** @private */
+    formStateRestoreCallback(state: string): void;
+}

package/switch/internal/switch.js

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { dispatchActivationClick, isActivationClick } from '../../internal/controller/events.js';
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
+export class Switch extends LitElement {
+    /**
+     * The HTML name to use in form submission.
+     */
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+        this.setAttribute('name', name);
+    }
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    get form() {
+        return this.internals.form;
+    }
+    /**
+     * The labels this element is associated with.
+     */
+    get labels() {
+        return this.internals.labels;
+    }
+    constructor() {
+        super();
+        /**
+         * Disables the switch and makes it non-interactive.
+         */
+        this.disabled = false;
+        /**
+         * Puts the switch in the selected state and sets the form submission value to
+         * the `value` property.
+         */
+        this.selected = false;
+        /**
+         * Shows both the selected and deselected icons.
+         */
+        this.icons = false;
+        /**
+         * Shows only the selected icon, and not the deselected icon. If `true`,
+         * overrides the behavior of the `icons` property.
+         */
+        this.showOnlySelectedIcon = false;
+        /**
+         * The value associated with this switch on form submission. `null` is
+         * submitted when `selected` is `false`.
+         */
+        this.value = 'on';
+        this.internals = this /* needed for closure */.attachInternals();
+        if (!isServer) {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event)) {
+                    return;
+                }
+                this.button?.focus();
+                if (this.button != null) {
+                    // this triggers the click behavior, and the ripple
+                    dispatchActivationClick(this.button);
+                }
+            });
+        }
+    }
+    update(changed) {
+        const state = String(this.selected);
+        this.internals.setFormValue(this.selected ? this.value : null, state);
+        super.update(changed);
+    }
+    render() {
+        // NOTE: buttons must use only [phrasing
+        // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)
+        // children, which includes custom elements, but not `div`s
+        return html `
+      <button
+        id="switch"
+        type="button"
+        class="switch ${classMap(this.getRenderClasses())}"
+        role="switch"
+        aria-checked="${this.selected}"
+        aria-label=${this.ariaLabel || nothing}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <span class="track">
+          ${this.renderHandle()}
+        </span>
+      </button>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'switch--selected': this.selected,
+            'switch--unselected': !this.selected,
+        };
+    }
+    renderHandle() {
+        const classes = {
+            'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),
+        };
+        return html `
+      <span class="handle-container">
+        <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
+        <span class="handle ${classMap(classes)}">
+          ${this.shouldShowIcons() ? this.renderIcons() : html ``}
+        </span>
+        ${this.renderTouchTarget()}
+      </span>
+    `;
+    }
+    renderIcons() {
+        return html `
+      <div class="icons">
+        ${this.renderOnIcon()}
+        ${this.showOnlySelectedIcon ? html `` : this.renderOffIcon()}
+      </div>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    renderOnIcon() {
+        return html `
+      <svg class="icon icon--on" viewBox="0 0 24 24">
+        <path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/>
+      </svg>
+    `;
+    }
+    /**
+     * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+     */
+    renderOffIcon() {
+        return html `
+      <svg class="icon icon--off" viewBox="0 0 24 24">
+        <path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/>
+      </svg>
+    `;
+    }
+    renderTouchTarget() {
+        return html `<span class="touch"></span>`;
+    }
+    shouldShowIcons() {
+        return this.icons || this.showOnlySelectedIcon;
+    }
+    handleClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected = !this.selected;
+        this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        // Bubbles but does not compose to mimic native browser <input> & <select>
+        // Additionally, native change event is not an InputEvent.
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    /** @private */
+    formResetCallback() {
+        // The selected property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.selected = this.hasAttribute('selected');
+    }
+    /** @private */
+    formStateRestoreCallback(state) {
+        this.selected = state === 'true';
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Switch);
+})();
+/** @nocollapse */
+Switch.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+/** @nocollapse */
+Switch.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "icons", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-only-selected-icon' })
+], Switch.prototype, "showOnlySelectedIcon", void 0);
+__decorate([
+    query('button')
+], Switch.prototype, "button", void 0);
+__decorate([
+    property()
+], Switch.prototype, "value", void 0);
+//# sourceMappingURL=switch.js.map

package/switch/internal/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';\n\n/**\n * @fires input {InputEvent} Fired whenever `selected` changes due to user\n * interaction (bubbles and composed).\n * @fires change {Event} Fired whenever `selected` changes due to user\n * interaction (bubbles).\n */\nexport class Switch extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Switch);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /** @nocollapse */\n  static formAssociated = true;\n\n  /**\n   * Disables the switch and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\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}) selected = false;\n\n  /**\n   * Shows both the selected and deselected icons.\n   */\n  @property({type: Boolean}) icons = false;\n\n  /**\n   * Shows only the selected icon, and not the deselected icon. If `true`,\n   * overrides the behavior of the `icons` property.\n   */\n  @property({type: Boolean, attribute: 'show-only-selected-icon'})\n  showOnlySelectedIcon = false;\n\n  // Button\n  @query('button') private readonly button!: HTMLButtonElement|null;\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  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event)) {\n          return;\n        }\n        this.button?.focus();\n        if (this.button != null) {\n          // this triggers the click behavior, and the ripple\n          dispatchActivationClick(this.button);\n        }\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Switch>) {\n    const state = String(this.selected);\n    this.internals.setFormValue(this.selected ? this.value : null, state);\n    super.update(changed);\n  }\n\n  protected override render(): TemplateResult {\n    // NOTE: buttons must use only [phrasing\n    // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)\n    // children, which includes custom elements, but not `div`s\n    return html`\n      <button\n        id=\"switch\"\n        type=\"button\"\n        class=\"switch ${classMap(this.getRenderClasses())}\"\n        role=\"switch\"\n        aria-checked=\"${this.selected}\"\n        aria-label=${(this as ARIAMixin).ariaLabel || nothing}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n        <span class=\"track\">\n          ${this.renderHandle()}\n        </span>\n      </button>\n    `;\n  }\n\n  private getRenderClasses(): ClassInfo {\n    return {\n      'switch--selected': this.selected,\n      'switch--unselected': !this.selected,\n    };\n  }\n\n  private renderHandle() {\n    const classes = {\n      'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),\n    };\n    return html`\n      <span class=\"handle-container\">\n        <md-ripple for=\"switch\" ?disabled=\"${this.disabled}\"></md-ripple>\n        <span class=\"handle ${classMap(classes)}\">\n          ${this.shouldShowIcons() ? this.renderIcons() : html``}\n        </span>\n        ${this.renderTouchTarget()}\n      </span>\n    `;\n  }\n\n  private renderIcons() {\n    return html`\n      <div class=\"icons\">\n        ${this.renderOnIcon()}\n        ${this.showOnlySelectedIcon ? html`` : this.renderOffIcon()}\n      </div>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOnIcon() {\n    return html`\n      <svg class=\"icon icon--on\" viewBox=\"0 0 24 24\">\n        <path d=\"M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z\"/>\n      </svg>\n    `;\n  }\n\n  /**\n   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024\n   */\n  private renderOffIcon() {\n    return html`\n      <svg class=\"icon icon--off\" viewBox=\"0 0 24 24\">\n        <path d=\"M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z\"/>\n      </svg>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"touch\"></span>`;\n  }\n\n  private shouldShowIcons(): boolean {\n    return this.icons || this.showOnlySelectedIcon;\n  }\n\n  private handleClick() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  /** @private */\n  formResetCallback() {\n    // The selected property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.selected = this.hasAttribute('selected');\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string) {\n    this.selected = state === 'true';\n  }\n}\n"]}

package/switch/switch.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Switch } from './lib/switch.js';
+import { Switch } from './internal/switch.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-switch': MdSwitch;

package/switch/switch.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
-import { Switch } from './lib/switch.js';
-import { styles } from './lib/switch-styles.css.js';
+import { styles as forcedColorsStyles } from './internal/forced-colors-styles.css.js';
+import { Switch } from './internal/switch.js';
+import { styles } from './internal/switch-styles.css.js';
 /**
  * @summary Switches toggle the state of a single item on or off.
  *

package/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;GASG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\nimport {Switch} from './lib/switch.js';\nimport {styles} from './lib/switch-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n\n/**\n * @summary Switches toggle the state of a single item on or off.\n *\n * @description\n * There's one type of switch in Material. Use this selection control when the\n * user needs to toggle a single item on or off.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-switch')\nexport class MdSwitch extends Switch {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AAQvD;;;;;;;;;GASG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './internal/forced-colors-styles.css.js';\nimport {Switch} from './internal/switch.js';\nimport {styles} from './internal/switch-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n\n/**\n * @summary Switches toggle the state of a single item on or off.\n *\n * @description\n * There's one type of switch in Material. Use this selection control when the\n * user needs to toggle a single item on or off.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-switch')\nexport class MdSwitch extends Switch {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/tabs/_tab.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/tab' show theme;
+@forward './internal/tab' show theme;

package/tabs/harness.d.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Tab } from './lib/tab.js';
-import { Tabs } from './lib/tabs.js';
+import { Tab } from './internal/tab.js';
+import { Tabs } from './internal/tabs.js';
 /**
  * Test harness for Tab.
  */

package/tabs/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAKlE;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU;aACzB,aAAa,CAAoC,SAAS,CAAE,CAAC;IACpE,CAAC;IAEO,KAAK,CAAC,0BAA0B;QACtC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1D,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;YAClC,SAAS,CAAC,MAAM,EAAE,CAAC;SACpB;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;QACpE,OAAO,OAAO,KAAK,GAAG,CAAC;IACzB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C,mEAAmE;IACnE,gBAAgB;IACP,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,mBAAmB,GACpB,IAAI,CAAC,OAAO,CAAC,YAAwC,CAAC,OACzC;YACd,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,OAAO,MAAM,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QAChB,oCAAoC;QACpC,yDAAyD;QACzD,OAAQ,IAAI,CAAC,OAAO,CAAC,OAAO,CAAoC;aAC3D,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAe,CAAC;QAC9D,CAAC,CAAC,CAAC;IACT,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ElementWithHarness, Harness} from '../testing/harness.js';\n\nimport {Tab} from './lib/tab.js';\nimport {Tabs} from './lib/tabs.js';\n\n/**\n * Test harness for Tab.\n */\nexport class TabHarness extends Harness<Tab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot\n        .querySelector<HTMLButtonElement|HTMLLinkElement>('.button')!;\n  }\n\n  private async completeIndicatorAnimation() {\n    await this.element.updateComplete;\n    const animations = this.element.indicator.getAnimations();\n    for (const animation of animations) {\n      animation.finish();\n    }\n  }\n\n  async isIndicatorShowing() {\n    await this.completeIndicatorAnimation();\n    const opacity = getComputedStyle(this.element.indicator)['opacity'];\n    return opacity === '1';\n  }\n}\n\n/**\n * Test harness for Tabs.\n */\nexport class TabsHarness extends Harness<Tabs> {\n  // Note, Tabs interactive element is the interactive element of the\n  // selected tab.\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const selectedItemHarness =\n        (this.element.selectedItem as ElementWithHarness<Tab>).harness as\n            TabHarness ??\n        new TabHarness(this.element.selectedItem);\n    return await selectedItemHarness.getInteractiveElement();\n  }\n\n  get harnessedItems() {\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return (this.element['items'] as Array<ElementWithHarness<Tab>>)\n        .map(item => {\n          return (item.harness ?? new TabHarness(item)) as TabHarness;\n        });\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAKlE;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU;aACzB,aAAa,CAAoC,SAAS,CAAE,CAAC;IACpE,CAAC;IAEO,KAAK,CAAC,0BAA0B;QACtC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAC1D,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;YAClC,SAAS,CAAC,MAAM,EAAE,CAAC;SACpB;IACH,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;QACpE,OAAO,OAAO,KAAK,GAAG,CAAC;IACzB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C,mEAAmE;IACnE,gBAAgB;IACP,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,mBAAmB,GACpB,IAAI,CAAC,OAAO,CAAC,YAAwC,CAAC,OACzC;YACd,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,OAAO,MAAM,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QAChB,oCAAoC;QACpC,yDAAyD;QACzD,OAAQ,IAAI,CAAC,OAAO,CAAC,OAAO,CAAoC;aAC3D,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,CAAe,CAAC;QAC9D,CAAC,CAAC,CAAC;IACT,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ElementWithHarness, Harness} from '../testing/harness.js';\n\nimport {Tab} from './internal/tab.js';\nimport {Tabs} from './internal/tabs.js';\n\n/**\n * Test harness for Tab.\n */\nexport class TabHarness extends Harness<Tab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot\n        .querySelector<HTMLButtonElement|HTMLLinkElement>('.button')!;\n  }\n\n  private async completeIndicatorAnimation() {\n    await this.element.updateComplete;\n    const animations = this.element.indicator.getAnimations();\n    for (const animation of animations) {\n      animation.finish();\n    }\n  }\n\n  async isIndicatorShowing() {\n    await this.completeIndicatorAnimation();\n    const opacity = getComputedStyle(this.element.indicator)['opacity'];\n    return opacity === '1';\n  }\n}\n\n/**\n * Test harness for Tabs.\n */\nexport class TabsHarness extends Harness<Tabs> {\n  // Note, Tabs interactive element is the interactive element of the\n  // selected tab.\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const selectedItemHarness =\n        (this.element.selectedItem as ElementWithHarness<Tab>).harness as\n            TabHarness ??\n        new TabHarness(this.element.selectedItem);\n    return await selectedItemHarness.getInteractiveElement();\n  }\n\n  get harnessedItems() {\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return (this.element['items'] as Array<ElementWithHarness<Tab>>)\n        .map(item => {\n          return (item.harness ?? new TabHarness(item)) as TabHarness;\n        });\n  }\n}\n"]}