@limetech/lime-elements 39.8.1 → 39.9.1

package/dist/collection/components/switch/switch.css

@@ -1,11 +1,13 @@
 @charset "UTF-8";
 /**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
 *
-* Or, just don't import anything, that works too.
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
 */
 /**
 * This can be used on a trigger element that opens a dropdown menu or a popover.
@@ -86,806 +88,106 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
-:host(limel-switch:focus),
-:host(limel-switch:focus-visible),
-:host(limel-switch:focus-within) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
-}
-
 :host(limel-switch) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
-  --limel-h-l-grid-template-rows: 0fr;
-}
-
-:host(limel-switch:focus) limel-helper-line,
-:host(limel-switch:focus-visible) limel-helper-line,
-:host(limel-switch:focus-within) limel-helper-line,
-:host(limel-switch:hover) limel-helper-line {
-  will-change: grid-template-rows;
+  min-height: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-.mdc-elevation-overlay {
-  position: absolute;
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0;
-  /* @alternate */
-  opacity: var(--mdc-elevation-overlay-opacity, 0);
-  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-elevation-overlay-color, #fff);
+.switch {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  min-height: 1.75rem;
 }
 
-.mdc-switch {
-  align-items: center;
-  background: none;
+button {
   border: none;
+  outline: none;
   cursor: pointer;
-  display: inline-flex;
+  transition: background-color calc(0.2s + 0.2s) ease;
   flex-shrink: 0;
-  margin: 0;
-  outline: none;
-  overflow: visible;
+  display: inline-flex;
+  align-items: center;
   padding: 0;
-  position: relative;
-}
-.mdc-switch:disabled {
-  cursor: default;
-  pointer-events: none;
-}
-
-.mdc-switch__track {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-.mdc-switch__track::before, .mdc-switch__track::after {
-  border: 1px solid transparent;
-  border-radius: inherit;
-  box-sizing: border-box;
-  content: "";
-  height: 100%;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  position: absolute;
-  width: 100%;
+  width: 2.25rem;
+  height: 1.25rem;
+  border-radius: 1.25rem;
+  background-color: rgb(var(--contrast-700));
 }
-.mdc-switch__track::before {
-  transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  transform: translateX(0);
-}
-.mdc-switch__track::after {
-  transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  transform: translateX(-100%);
-}
-[dir=rtl] .mdc-switch__track::after, .mdc-switch__track[dir=rtl]::after {
-  /*rtl:begin:ignore*/
-  transform: translateX(100%);
-  /*rtl:end:ignore*/
-}
-
-.mdc-switch--selected .mdc-switch__track::before {
-  transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  transform: translateX(100%);
-}
-[dir=rtl] .mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track[dir=rtl]::before {
-  /*rtl:begin:ignore*/
-  transform: translateX(-100%);
-  /*rtl:end:ignore*/
-}
-
-.mdc-switch--selected .mdc-switch__track::after {
-  transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  transform: translateX(0);
+:host([disabled]) button {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
-
-.mdc-switch__handle-track {
-  height: 100%;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  right: auto;
-}
-[dir=rtl] .mdc-switch__handle-track, .mdc-switch__handle-track[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  left: auto;
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  /*rtl:end:ignore*/
+button[aria-checked=true] {
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 
-.mdc-switch__handle-track {
+.handle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  transition: transform 0.2s cubic-bezier(0.46, 0.52, 0.27, 1.55), box-shadow 0.2s ease, background-color 0.2s ease;
   transform: translateX(0);
 }
-.mdc-switch--selected .mdc-switch__handle-track {
-  transform: translateX(100%);
-}
-[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track, .mdc-switch--selected .mdc-switch__handle-track[dir=rtl] {
-  /*rtl:begin:ignore*/
-  transform: translateX(-100%);
-  /*rtl:end:ignore*/
-}
-
-.mdc-switch__handle {
-  display: flex;
-  pointer-events: auto;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  right: auto;
+button[aria-checked=true] .handle {
+  transform: translateX(1rem);
 }
-[dir=rtl] .mdc-switch__handle, .mdc-switch__handle[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  left: auto;
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  /*rtl:end:ignore*/
+button:focus-visible .handle {
+  background-color: rgb(var(--color-white), 0.6);
+  box-shadow: var(--shadow-depth-8-focused), var(--shadow-brighten-edges-inside);
 }
-
-.mdc-switch__handle::before, .mdc-switch__handle::after {
-  border: 1px solid transparent;
-  border-radius: inherit;
-  box-sizing: border-box;
+.handle:after {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   content: "";
-  width: 100%;
-  height: 100%;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: -1;
-}
-
-.mdc-switch__shadow {
-  border-radius: inherit;
-  bottom: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  position: absolute;
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  top: 0;
-}
-
-.mdc-elevation-overlay {
-  bottom: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  top: 0;
-}
-
-.mdc-switch__ripple {
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: -1;
-}
-.mdc-switch:disabled .mdc-switch__ripple {
-  display: none;
-}
-
-.mdc-switch__icons {
-  height: 100%;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-}
-
-.mdc-switch__icon {
-  bottom: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  margin: auto;
-  position: absolute;
-  /* @noflip */ /*rtl:ignore*/
-  right: 0;
-  top: 0;
-  opacity: 0;
-  transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-.mdc-switch--selected .mdc-switch__icon--on,
-.mdc-switch--unselected .mdc-switch__icon--off {
-  opacity: 1;
-  transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-}
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.mdc-switch {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-switch .mdc-switch__ripple::before,
-.mdc-switch .mdc-switch__ripple::after {
   position: absolute;
+  inset: 0.125rem;
   border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-switch .mdc-switch__ripple::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-switch .mdc-switch__ripple::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
-  top: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-switch.mdc-ripple-upgraded--unbounded .mdc-switch__ripple::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-switch.mdc-ripple-upgraded--foreground-activation .mdc-switch__ripple::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-switch.mdc-ripple-upgraded--foreground-deactivation .mdc-switch__ripple::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-switch .mdc-switch__ripple::before,
-.mdc-switch .mdc-switch__ripple::after {
-  top: calc(50% - 50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
-}
-.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::before,
-.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-switch.mdc-ripple-upgraded .mdc-switch__ripple::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
-  background: #6200ee;
-  /* @alternate */
-  background: var(--mdc-switch-selected-handle-color, var(--mdc-theme-primary, #6200ee));
-}
-
-.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
-  background: #310077;
-  /* @alternate */
-  background: var(--mdc-switch-selected-hover-handle-color, #310077);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {
-  background: #310077;
-  /* @alternate */
-  background: var(--mdc-switch-selected-focus-handle-color, #310077);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__handle::after {
-  background: #310077;
-  /* @alternate */
-  background: var(--mdc-switch-selected-pressed-handle-color, #310077);
-}
-
-.mdc-switch.mdc-switch--selected:disabled .mdc-switch__handle::after {
-  background: #424242;
-  /* @alternate */
-  background: var(--mdc-switch-disabled-selected-handle-color, #424242);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after {
-  background: #616161;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-handle-color, #616161);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {
-  background: #212121;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-hover-handle-color, #212121);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {
-  background: #212121;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-focus-handle-color, #212121);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {
-  background: #212121;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-pressed-handle-color, #212121);
-}
-
-.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__handle::after {
-  background: #424242;
-  /* @alternate */
-  background: var(--mdc-switch-disabled-unselected-handle-color, #424242);
-}
-
-.mdc-switch .mdc-switch__handle::before {
-  background: #fff;
-  /* @alternate */
-  background: var(--mdc-switch-handle-surface-color, var(--mdc-theme-surface, #fff));
-}
-.mdc-switch:enabled .mdc-switch__shadow {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  /* @alternate */
-  box-shadow: var(--mdc-switch-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));
-  --mdc-elevation-box-shadow-for-gss: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-}
-.mdc-switch:disabled .mdc-switch__shadow {
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-  /* @alternate */
-  box-shadow: var(--mdc-switch-disabled-handle-elevation, var(--mdc-elevation-box-shadow-for-gss));
-  --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-}
-.mdc-switch .mdc-switch__handle {
-  height: 20px;
-  /* @alternate */
-  height: var(--mdc-switch-handle-height, 20px);
-}
-.mdc-switch:disabled .mdc-switch__handle::after {
-  opacity: 0.38;
-  /* @alternate */
-  opacity: var(--mdc-switch-disabled-handle-opacity, 0.38);
-}
-
-.mdc-switch .mdc-switch__handle {
-  border-radius: 10px;
-  /* @alternate */
-  border-radius: var(--mdc-switch-handle-shape, 10px);
-}
-.mdc-switch .mdc-switch__handle {
-  width: 20px;
-  /* @alternate */
-  width: var(--mdc-switch-handle-width, 20px);
-}
-.mdc-switch .mdc-switch__handle-track {
-  width: calc(100% - 20px);
-  /* @alternate */
-  width: calc(100% - var(--mdc-switch-handle-width, 20px));
-}
-.mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
-  fill: #fff;
-  /* @alternate */
-  fill: var(--mdc-switch-selected-icon-color, var(--mdc-theme-on-primary, #fff));
-}
-
-.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
-  fill: #fff;
-  /* @alternate */
-  fill: var(--mdc-switch-disabled-selected-icon-color, var(--mdc-theme-on-primary, #fff));
-}
-
-.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
-  fill: #fff;
-  /* @alternate */
-  fill: var(--mdc-switch-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
-}
-
-.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
-  fill: #fff;
-  /* @alternate */
-  fill: var(--mdc-switch-disabled-unselected-icon-color, var(--mdc-theme-on-primary, #fff));
-}
-
-.mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
-  opacity: 0.38;
-  /* @alternate */
-  opacity: var(--mdc-switch-disabled-selected-icon-opacity, 0.38);
-}
-
-.mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
-  opacity: 0.38;
-  /* @alternate */
-  opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 0.38);
-}
-
-.mdc-switch.mdc-switch--selected .mdc-switch__icon {
-  width: 18px;
-  /* @alternate */
-  width: var(--mdc-switch-selected-icon-size, 18px);
-  height: 18px;
-  /* @alternate */
-  height: var(--mdc-switch-selected-icon-size, 18px);
-}
-
-.mdc-switch.mdc-switch--unselected .mdc-switch__icon {
-  width: 18px;
-  /* @alternate */
-  width: var(--mdc-switch-unselected-icon-size, 18px);
-  height: 18px;
-  /* @alternate */
-  height: var(--mdc-switch-unselected-icon-size, 18px);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-switch-selected-hover-state-layer-color, var(--mdc-theme-primary, #6200ee));
-}
-
-.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-switch-selected-focus-state-layer-color, var(--mdc-theme-primary, #6200ee));
-}
-
-.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-switch-selected-pressed-state-layer-color, var(--mdc-theme-primary, #6200ee));
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {
-  background-color: #424242;
-  /* @alternate */
-  background-color: var(--mdc-switch-unselected-hover-state-layer-color, #424242);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {
-  background-color: #424242;
-  /* @alternate */
-  background-color: var(--mdc-switch-unselected-focus-state-layer-color, #424242);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::before,
-.mdc-switch.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {
-  background-color: #424242;
-  /* @alternate */
-  background-color: var(--mdc-switch-unselected-pressed-state-layer-color, #424242);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-switch-selected-hover-state-layer-opacity, 0.04);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--selected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-switch-selected-focus-state-layer-opacity, 0.12);
-}
-
-.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-switch.mdc-switch--selected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.1;
-  /* @alternate */
-  opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
-}
-.mdc-switch.mdc-switch--selected:enabled:active.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-switch-selected-pressed-state-layer-opacity, 0.1);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus):hover .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:hover:not(:focus).mdc-ripple-surface--hover .mdc-switch__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-switch-unselected-hover-state-layer-opacity, 0.04);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:focus.mdc-ripple-upgraded--background-focused .mdc-switch__ripple::before, .mdc-switch.mdc-switch--unselected:enabled:focus:not(.mdc-ripple-upgraded):focus .mdc-switch__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-switch-unselected-focus-state-layer-opacity, 0.12);
-}
-
-.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded) .mdc-switch__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-switch.mdc-switch--unselected:enabled:active:not(.mdc-ripple-upgraded):active .mdc-switch__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.1;
-  /* @alternate */
-  opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
-}
-.mdc-switch.mdc-switch--unselected:enabled:active.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-switch-unselected-pressed-state-layer-opacity, 0.1);
-}
-
-.mdc-switch .mdc-switch__ripple {
-  height: 48px;
-  /* @alternate */
-  height: var(--mdc-switch-state-layer-size, 48px);
-  width: 48px;
-  /* @alternate */
-  width: var(--mdc-switch-state-layer-size, 48px);
-}
-.mdc-switch .mdc-switch__track {
-  height: 14px;
-  /* @alternate */
-  height: var(--mdc-switch-track-height, 14px);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal), var(--button-shadow-normal);
 }
-.mdc-switch:disabled .mdc-switch__track {
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-switch-disabled-track-opacity, 0.12);
+button:hover:not(:disabled) .handle:after {
+  box-shadow: var(--button-shadow-normal), var(--button-shadow-hovered);
 }
 
-.mdc-switch:enabled .mdc-switch__track::after {
-  background: #d7bbff;
-  /* @alternate */
-  background: var(--mdc-switch-selected-track-color, #d7bbff);
-}
-
-.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {
-  background: #d7bbff;
-  /* @alternate */
-  background: var(--mdc-switch-selected-hover-track-color, #d7bbff);
-}
-
-.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {
-  background: #d7bbff;
-  /* @alternate */
-  background: var(--mdc-switch-selected-focus-track-color, #d7bbff);
-}
-
-.mdc-switch:enabled:active .mdc-switch__track::after {
-  background: #d7bbff;
-  /* @alternate */
-  background: var(--mdc-switch-selected-pressed-track-color, #d7bbff);
-}
-
-.mdc-switch:disabled .mdc-switch__track::after {
-  background: #424242;
-  /* @alternate */
-  background: var(--mdc-switch-disabled-selected-track-color, #424242);
-}
-
-.mdc-switch:enabled .mdc-switch__track::before {
-  background: #e0e0e0;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-track-color, #e0e0e0);
-}
-
-.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {
-  background: #e0e0e0;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-hover-track-color, #e0e0e0);
-}
-
-.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {
-  background: #e0e0e0;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-focus-track-color, #e0e0e0);
-}
-
-.mdc-switch:enabled:active .mdc-switch__track::before {
-  background: #e0e0e0;
-  /* @alternate */
-  background: var(--mdc-switch-unselected-pressed-track-color, #e0e0e0);
-}
-
-.mdc-switch:disabled .mdc-switch__track::before {
-  background: #424242;
-  /* @alternate */
-  background: var(--mdc-switch-disabled-unselected-track-color, #424242);
-}
-
-.mdc-switch .mdc-switch__track {
-  border-radius: 7px;
-  /* @alternate */
-  border-radius: var(--mdc-switch-track-shape, 7px);
-}
-.mdc-switch {
-  width: 36px;
-  /* @alternate */
-  width: var(--mdc-switch-track-width, 36px);
-}
-
-@media screen and (forced-colors: active), (-ms-high-contrast: active) {
-  .mdc-switch:enabled .mdc-switch__shadow {
-    /* @alternate */
-  }
-  .mdc-switch:disabled .mdc-switch__shadow {
-    /* @alternate */
-  }
-  .mdc-switch:disabled .mdc-switch__handle::after {
-    opacity: 1;
-    /* @alternate */
-    opacity: var(--mdc-switch-disabled-handle-opacity, 1);
-  }
-  .mdc-switch.mdc-switch--selected:enabled .mdc-switch__icon {
-    fill: ButtonText;
-    /* @alternate */
-    fill: var(--mdc-switch-selected-icon-color, ButtonText);
-  }
-  .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icon {
-    fill: GrayText;
-    /* @alternate */
-    fill: var(--mdc-switch-disabled-selected-icon-color, GrayText);
-  }
-  .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__icon {
-    fill: ButtonText;
-    /* @alternate */
-    fill: var(--mdc-switch-unselected-icon-color, ButtonText);
-  }
-  .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icon {
-    fill: GrayText;
-    /* @alternate */
-    fill: var(--mdc-switch-disabled-unselected-icon-color, GrayText);
-  }
-  .mdc-switch.mdc-switch--selected:disabled .mdc-switch__icons {
-    opacity: 1;
-    /* @alternate */
-    opacity: var(--mdc-switch-disabled-selected-icon-opacity, 1);
-  }
-  .mdc-switch.mdc-switch--unselected:disabled .mdc-switch__icons {
-    opacity: 1;
-    /* @alternate */
-    opacity: var(--mdc-switch-disabled-unselected-icon-opacity, 1);
-  }
-  .mdc-switch:disabled .mdc-switch__track {
-    opacity: 1;
-    /* @alternate */
-    opacity: var(--mdc-switch-disabled-track-opacity, 1);
-  }
-}
-:host(limel-switch) {
-  isolation: isolate;
-  min-height: 1.75rem;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  --mdc-switch-selected-icon-color: transparent;
-  --mdc-switch-unselected-icon-color: transparent;
-  --mdc-switch-disabled-selected-icon-opacity: 1;
-  --mdc-switch-disabled-unselected-icon-opacity: 1;
-  --mdc-switch-selected-icon-size: 0.75rem;
-  --mdc-switch-unselected-icon-size: 0.75rem;
-  --mdc-switch-track-height: 1.25rem;
-  --mdc-switch-track-shape: var(--mdc-switch-track-height);
-  --mdc-switch-unselected-focus-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-selected-focus-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-unselected-pressed-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-selected-pressed-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-unselected-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-unselected-hover-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-selected-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-selected-hover-handle-color: var(
-      --lime-elevated-surface-background-color
-  );
-  --mdc-switch-unselected-track-color: rgb(var(--contrast-700));
-  --mdc-switch-unselected-focus-track-color: rgb(var(--contrast-800));
-  --mdc-switch-unselected-pressed-track-color: rgb(var(--contrast-800));
-  --mdc-switch-unselected-hover-track-color: rgb(var(--contrast-800));
-  --mdc-switch-selected-focus-track-color: var(
-      --lime-primary-color,
-      var(--limel-theme-primary-color)
-  );
-  --mdc-switch-selected-pressed-track-color: var(
-      --lime-primary-color,
-      var(--limel-theme-primary-color)
-  );
-  --mdc-switch-selected-track-color: var(
-      --lime-primary-color,
-      var(--limel-theme-primary-color)
-  );
-  --mdc-switch-selected-hover-track-color: var(
-      --lime-primary-color,
-      var(--limel-theme-primary-color)
-  );
-  --mdc-switch-handle-elevation: var(--button-shadow-normal);
-  --mdc-switch-disabled-track-opacity: 0.4;
-  --mdc-switch-disabled-selected-handle-color: rgb(var(--contrast-1000));
-  --mdc-switch-disabled-unselected-handle-color: rgb(var(--contrast-1000));
-}
-
-.mdc-switch {
-  margin-top: 0.25rem;
-}
-.mdc-switch:hover {
-  --mdc-switch-handle-elevation: var(--button-shadow-hovered);
+svg {
+  width: 0.625rem;
+  height: 0.625rem;
+  fill: var(--lime-elevated-surface-background-color);
 }
 
 label {
-  padding-top: 0.25rem;
   font-size: var(--limel-theme-default-font-size);
-}
-label:not(.disabled) {
   cursor: pointer;
+  width: fit-content;
+}
+:host([disabled]) label {
+  cursor: not-allowed;
+  opacity: 0.4;
 }
 
-label {
-  font-family: inherit;
+:host(limel-switch:focus),
+:host(limel-switch:focus-visible),
+:host(limel-switch:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
 }
 
-.mdc-switch.mdc-switch--selected .mdc-switch__handle:after, .mdc-switch.mdc-switch--selected .mdc-switch__handle:before, .mdc-switch.mdc-switch.mdc-switch--unselected .mdc-switch__handle:after, .mdc-switch.mdc-switch.mdc-switch--unselected .mdc-switch__handle:before {
-  transform: scale(0.8);
+:host(limel-switch) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
 }
-.mdc-switch .mdc-switch__shadow {
-  transform: scale(0.8);
+
+:host(limel-switch:focus) limel-helper-line,
+:host(limel-switch:focus-visible) limel-helper-line,
+:host(limel-switch:focus-within) limel-helper-line,
+:host(limel-switch:hover) limel-helper-line {
+  will-change: grid-template-rows;
 }