@limetech/lime-elements 39.10.3 → 39.11.0

package/dist/collection/components/slider/slider.css

@@ -1,178 +1,4 @@
 @charset "UTF-8";
-.mdc-slider__track--active_fill,
-.mdc-slider__track--inactive,
-.mdc-slider__thumb-knob {
-  transition: background-color 0.5s ease;
-}
-
-:host(.displays-percentage-colors[readonly]) {
-  --mdc-theme-on-surface: var(--lime-primary-color);
-}
-
-:host(.displays-percentage-colors.percent-0) {
-  --lime-primary-color: var(--color-percent--0);
-}
-
-:host(.displays-percentage-colors.percent-0-10) {
-  --lime-primary-color: var(--color-percent--0to10);
-}
-
-:host(.displays-percentage-colors.percent-10-20) {
-  --lime-primary-color: var(--color-percent--10to20);
-}
-
-:host(.displays-percentage-colors.percent-20-30) {
-  --lime-primary-color: var(--color-percent--20to30);
-}
-
-:host(.displays-percentage-colors.percent-30-40) {
-  --lime-primary-color: var(--color-percent--30to40);
-}
-
-:host(.displays-percentage-colors.percent-40-50) {
-  --lime-primary-color: var(--color-percent--40to50);
-}
-
-:host(.displays-percentage-colors.percent-50-60) {
-  --lime-primary-color: var(--color-percent--50to60);
-}
-
-:host(.displays-percentage-colors.percent-60-70) {
-  --lime-primary-color: var(--color-percent--60to70);
-}
-
-:host(.displays-percentage-colors.percent-70-80) {
-  --lime-primary-color: var(--color-percent--70to80);
-}
-
-:host(.displays-percentage-colors.percent-80-90) {
-  --lime-primary-color: var(--color-percent--80to90);
-}
-
-:host(.displays-percentage-colors.percent-90-100) {
-  --lime-primary-color: var(--color-percent--90to100);
-}
-
-:host(.displays-percentage-colors.percent-30-40) .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-40-50) .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-70-80) .mdc-slider__value-indicator-text {
-  color: rgb(var(--color-gray-darker));
-}
-:host(.displays-percentage-colors.percent-30-40) .mdc-slider--disabled .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-40-50) .mdc-slider--disabled .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-70-80) .mdc-slider--disabled .mdc-slider__value-indicator-text {
-  color: rgb(var(--contrast-100));
-}
-
-:host(.displays-percentage-colors.percent-50-60) .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-60-70) .mdc-slider__value-indicator-text {
-  color: rgb(var(--color-gray-dark));
-}
-:host(.displays-percentage-colors.percent-50-60) .mdc-slider--disabled .mdc-slider__value-indicator-text,
-:host(.displays-percentage-colors.percent-60-70) .mdc-slider--disabled .mdc-slider__value-indicator-text {
-  color: rgb(var(--contrast-100));
-}
-
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled {
-  opacity: 1;
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track,
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active,
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive,
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
-  height: 1rem;
-  border-radius: 1rem;
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active {
-  top: 0;
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
-  transition: all 0s;
-  transform: translateY(1.75rem);
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
-  opacity: 0;
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill,
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
-  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-}
-:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {
-  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-}
-
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:before, .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:after {
-  transition: all 0.2s ease 0.2s;
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  border: 0.25rem solid transparent;
-  border-top-color: rgba(var(--contrast-1400), 0.6);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:before {
-  left: -1.25rem;
-  transform: rotate(90deg);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:after {
-  right: -1.25rem;
-  transform: rotate(-90deg);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:before {
-  opacity: 0.8;
-  left: -1.75rem;
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:after {
-  opacity: 0.8;
-  right: -1.75rem;
-}
-
-.mdc-slider .mdc-slider__thumb {
-  top: -0.25rem;
-}
-.mdc-slider .mdc-slider__value-indicator-container {
-  z-index: 1;
-}
-.mdc-slider .mdc-slider__value-indicator {
-  transition: transform 0.2s ease-out;
-  opacity: 1;
-  transform: scale(1) translateY(2rem);
-  border-radius: 1.25rem;
-  padding: 0 0.5rem;
-  height: 1.5rem;
-}
-.mdc-slider .mdc-slider__value-indicator:before {
-  border-top-color: transparent;
-}
-.mdc-slider .mdc-slider__value-indicator-text {
-  color: rgb(var(--color-white));
-}
-.mdc-slider .mdc-ripple-upgraded--foreground-activation .mdc-slider__value-indicator {
-  transform: scale(1.5) translateY(0);
-  box-shadow: var(--shadow-depth-16);
-}
-.mdc-slider .mdc-ripple-upgraded--foreground-activation .mdc-slider__value-indicator:before {
-  border-top-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator {
-  box-shadow: var(--button-shadow-normal);
-}
-
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator, :host(limel-slider[readonly]) .mdc-slider__value-indicator {
-  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-}
-
 /**
 * Note! This file is forwarded via `src/style/exports.scss`
 * and exposed to consumers through the root `index.scss`.
@@ -262,486 +88,180 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
-:host(limel-slider:focus),
-:host(limel-slider:focus-visible),
-:host(limel-slider:focus-within) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
+:host([displays-percentage-colors].percent-0) {
+  --lime-primary-color: var(--color-percent--0);
 }
 
-:host(limel-slider) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
-  --limel-h-l-grid-template-rows: 0fr;
+:host([displays-percentage-colors].percent-0-10) {
+  --lime-primary-color: var(--color-percent--0to10);
 }
 
-:host(limel-slider:focus) limel-helper-line,
-:host(limel-slider:focus-visible) limel-helper-line,
-:host(limel-slider:focus-within) limel-helper-line,
-:host(limel-slider:hover) limel-helper-line {
-  will-change: grid-template-rows;
+:host([displays-percentage-colors].percent-10-20) {
+  --lime-primary-color: var(--color-percent--10to20);
 }
 
-limel-helper-line {
-  order: 3;
+:host([displays-percentage-colors].percent-20-30) {
+  --lime-primary-color: var(--color-percent--20to30);
 }
 
-@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-slider__thumb {
-  --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-slider__thumb::before, .mdc-slider__thumb::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-slider__thumb::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
+:host([displays-percentage-colors].percent-30-40) {
+  --lime-primary-color: var(--color-percent--30to40);
 }
-.mdc-slider__thumb::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
+
+:host([displays-percentage-colors].percent-40-50) {
+  --lime-primary-color: var(--color-percent--40to50);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
+
+:host([displays-percentage-colors].percent-50-60) {
+  --lime-primary-color: var(--color-percent--50to60);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
+
+:host([displays-percentage-colors].percent-60-70) {
+  --lime-primary-color: var(--color-percent--60to70);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
+
+:host([displays-percentage-colors].percent-70-80) {
+  --lime-primary-color: var(--color-percent--70to80);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+
+:host([displays-percentage-colors].percent-80-90) {
+  --lime-primary-color: var(--color-percent--80to90);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+
+:host([displays-percentage-colors].percent-90-100) {
+  --lime-primary-color: var(--color-percent--90to100);
 }
-.mdc-slider__thumb::before, .mdc-slider__thumb::after {
-  top: calc(50% - 50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
+
+:host([displays-percentage-colors].percent-30-40) .indicator,
+:host([displays-percentage-colors].percent-40-50) .indicator,
+:host([displays-percentage-colors].percent-70-80) .indicator {
+  color: rgb(var(--color-gray-darker));
 }
-.mdc-slider__thumb.mdc-ripple-upgraded::before, .mdc-slider__thumb.mdc-ripple-upgraded::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-slider__thumb.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-slider__thumb::before, .mdc-slider__thumb::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));
-}
-.mdc-slider__thumb:hover::before, .mdc-slider__thumb.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-slider__thumb.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+
+:host([displays-percentage-colors].percent-50-60) .indicator,
+:host([displays-percentage-colors].percent-60-70) .indicator {
+  color: rgb(var(--color-gray-dark));
 }
 
-.mdc-slider .mdc-slider__track {
-  height: 4px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
+:host([readonly]:not([readonly=false])) input[type=range] {
+  cursor: default;
 }
-.mdc-slider .mdc-slider__track--active,
-.mdc-slider .mdc-slider__track--inactive {
-  display: flex;
-  height: 100%;
-  position: absolute;
-  width: 100%;
+:host([readonly]:not([readonly=false])) .track,
+:host([readonly]:not([readonly=false])) .active,
+:host([readonly]:not([readonly=false])) .indicator {
+  height: 0.75rem;
 }
-.mdc-slider .mdc-slider__track--active {
-  border-radius: 3px;
-  height: 6px;
-  overflow: hidden;
-  top: -1px;
+:host([readonly]:not([readonly=false])) .indicator {
+  box-shadow: none;
 }
-.mdc-slider .mdc-slider__track--active_fill {
-  border-top: 6px solid;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  position: relative;
-  /* @noflip */ /*rtl:ignore*/
-  -webkit-transform-origin: left;
-  /* @noflip */ /*rtl:ignore*/
-  transform-origin: left;
-}
-[dir=rtl] .mdc-slider .mdc-slider__track--active_fill, .mdc-slider .mdc-slider__track--active_fill[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  -webkit-transform-origin: right;
-  /* @noflip */ /*rtl:ignore*/
-  transform-origin: right;
-  /*rtl:end:ignore*/
+:host([readonly]:not([readonly=false])) .knob {
+  opacity: 0;
+}
+:host([readonly]:not([readonly=false])) .active {
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 
-.mdc-slider .mdc-slider__track--inactive::before {
+.thumb {
   position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: 1px solid transparent;
-  border-radius: inherit;
-  content: "";
-  pointer-events: none;
-}
-.mdc-slider .mdc-slider__track--inactive {
-  border-radius: 2px;
-  height: 4px;
-  left: 0;
+  left: calc(var(--slider-fraction) * 100%);
   top: 0;
+  bottom: 0;
+  width: 0;
+  z-index: 1;
 }
-.mdc-slider .mdc-slider__track--active_fill {
-  border-color: #6200ee;
-  /* @alternate */
-  border-color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {
-  border-color: #000;
-  /* @alternate */
-  border-color: var(--mdc-theme-on-surface, #000);
-}
-.mdc-slider .mdc-slider__track--inactive {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-theme-primary, #6200ee);
-  opacity: 0.24;
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-theme-on-surface, #000);
-  opacity: 0.24;
-}
-.mdc-slider .mdc-slider__value-indicator-container {
-  bottom: 44px;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  pointer-events: none;
+
+.knob {
+  transition: border-color 0.5s ease;
   position: absolute;
-  transform: translateX(-50%);
+  top: 50%;
+  left: 0;
+  transform: translate3d(-50%, -50%, 0);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  border: 0.5rem solid;
+  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+  background-color: rgb(var(--contrast-100));
 }
-.mdc-slider .mdc-slider__value-indicator {
-  transition: transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);
-  align-items: center;
-  border-radius: 4px;
-  display: flex;
-  height: 32px;
-  padding: 0 12px;
-  transform: scale(0);
-  transform-origin: bottom;
-}
-.mdc-slider .mdc-slider__value-indicator::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid;
-  bottom: -5px;
+.knob:before, .knob:after {
+  transition: all 0.2s ease 0.2s;
   content: "";
-  height: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
+  display: block;
   position: absolute;
-  transform: translateX(-50%);
+  top: 0;
+  bottom: 0;
+  margin: auto;
   width: 0;
+  height: 0;
+  border: 0.375rem solid transparent;
 }
-.mdc-slider .mdc-slider__value-indicator::after {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: 1px solid transparent;
-  border-radius: inherit;
-  content: "";
-  pointer-events: none;
-}
-.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container {
-  pointer-events: auto;
-}
-.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {
-  transition: transform 100ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  transform: scale(1);
-}
-@media (prefers-reduced-motion) {
-  .mdc-slider .mdc-slider__value-indicator,
-  .mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {
-    transition: none;
-  }
-}
-.mdc-slider .mdc-slider__value-indicator-text {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-subtitle2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-subtitle2-font-size, 0.875rem);
-  line-height: 1.375rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-subtitle2-line-height, 1.375rem);
-  font-weight: 500;
-  /* @alternate */
-  font-weight: var(--mdc-typography-subtitle2-font-weight, 500);
-  letter-spacing: 0.0071428571em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-subtitle2-letter-spacing, 0.0071428571em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-subtitle2-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-subtitle2-text-transform, inherit);
-}
-.mdc-slider .mdc-slider__value-indicator {
-  background-color: #000;
-  opacity: 0.6;
-}
-.mdc-slider .mdc-slider__value-indicator::before {
-  border-top-color: #000;
-}
-.mdc-slider .mdc-slider__value-indicator {
-  color: #fff;
-  /* @alternate */
-  color: var(--mdc-theme-on-primary, #fff);
-}
-.mdc-slider .mdc-slider__thumb {
-  display: flex;
-  height: 48px;
-  /* @noflip */ /*rtl:ignore*/
-  left: -24px;
-  outline: none;
-  position: absolute;
-  user-select: none;
-  width: 48px;
+:host([disabled]:not([disabled=false])) .knob:before, :host([disabled]:not([disabled=false])) .knob:after {
+  content: none;
 }
-.mdc-slider .mdc-slider__thumb--top {
-  z-index: 1;
-}
-.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {
-  border-style: solid;
-  border-width: 1px;
-  box-sizing: content-box;
+.knob:before {
+  opacity: calc(var(--slider-fraction) * 100);
+  left: -1rem;
+  transform: rotate(90deg);
 }
-.mdc-slider .mdc-slider__thumb-knob {
-  /* @alternate */
-  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);
-  border: 10px solid;
-  border-radius: 50%;
-  box-sizing: border-box;
-  height: 20px;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 20px;
-}
-.mdc-slider .mdc-slider__thumb-knob {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-theme-primary, #6200ee);
-  border-color: #6200ee;
-  /* @alternate */
-  border-color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {
-  border-color: #fff;
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-theme-on-surface, #000);
-  border-color: #000;
-  /* @alternate */
-  border-color: var(--mdc-theme-on-surface, #000);
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob, .mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob {
-  border-color: #fff;
-}
-.mdc-slider .mdc-slider__thumb::before, .mdc-slider .mdc-slider__thumb::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));
-}
-.mdc-slider .mdc-slider__thumb:hover::before, .mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused::before, .mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-slider .mdc-slider__tick-marks {
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  height: 100%;
-  justify-content: space-between;
-  padding: 0 1px;
-  position: absolute;
-  width: 100%;
+.knob:after {
+  opacity: calc((1 - var(--slider-fraction)) * 100);
+  right: -1rem;
+  transform: rotate(-90deg);
 }
-.mdc-slider .mdc-slider__tick-mark--active,
-.mdc-slider .mdc-slider__tick-mark--inactive {
-  border-radius: 50%;
-  height: 2px;
-  width: 2px;
-}
-.mdc-slider .mdc-slider__tick-mark--active {
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-theme-on-primary, #fff);
-  opacity: 0.6;
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active {
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-theme-on-primary, #fff);
-  opacity: 0.6;
-}
-.mdc-slider .mdc-slider__tick-mark--inactive {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-theme-primary, #6200ee);
-  opacity: 0.6;
-}
-.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-theme-on-surface, #000);
-  opacity: 0.6;
-}
-.mdc-slider {
-  cursor: pointer;
-  height: 48px;
-  margin: 0 24px;
-  position: relative;
-  touch-action: pan-y;
+.slider:hover .knob, .slider:has(input[type=range]:active) .knob, .slider:has(input[type=range]:focus) .knob {
+  box-shadow: var(--button-shadow-normal);
 }
-.mdc-slider.mdc-slider--disabled {
-  opacity: 0.38;
-  cursor: auto;
+.slider:hover .knob:before, .slider:has(input[type=range]:active) .knob:before, .slider:has(input[type=range]:focus) .knob:before {
+  left: -1.5rem;
+  border-top-color: rgb(var(--contrast-1400), 0.5);
 }
-.mdc-slider.mdc-slider--disabled .mdc-slider__thumb {
-  pointer-events: none;
+.slider:hover .knob:after, .slider:has(input[type=range]:active) .knob:after, .slider:has(input[type=range]:focus) .knob:after {
+  right: -1.5rem;
+  border-top-color: rgb(var(--contrast-1400), 0.5);
 }
-.mdc-slider--discrete .mdc-slider__thumb,
-.mdc-slider--discrete .mdc-slider__track--active_fill {
-  transition: transform 80ms ease;
+
+.indicator {
+  user-select: none;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 1;
+  transform: translate3d(-50%, -50%, 0);
+  transform-origin: bottom center;
+  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;
+  border-radius: 1.25rem;
+  padding: 0 0.375rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  color: rgb(var(--color-white));
+  font-size: 0.6875rem;
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+  box-shadow: var(--button-shadow-normal);
 }
-@media (prefers-reduced-motion) {
-  .mdc-slider--discrete .mdc-slider__thumb,
-  .mdc-slider--discrete .mdc-slider__track--active_fill {
-    transition: none;
-  }
+
+:host(:not([disabled]):not([readonly])) input[type=range]:active ~ .thumb .indicator, :host(:not([disabled]):not([readonly])) input[type=range]:focus ~ .thumb .indicator {
+  transform: translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);
+  box-shadow: var(--shadow-depth-16);
 }
 
-.mdc-slider__input {
-  cursor: pointer;
-  left: 0;
-  margin: 0;
-  height: 100%;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
 }
 
 :host(limel-slider) {
+  box-sizing: border-box;
   isolation: isolate;
   position: relative;
   display: flex;
@@ -761,47 +281,49 @@ div[slot=content] {
   padding: 0 0.25rem;
 }
 
-.mdc-slider {
+.slider {
+  position: relative;
   height: 2.5rem;
   margin: 0 0.75rem;
 }
-.mdc-slider .mdc-slider__track--inactive {
-  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-}
-.mdc-slider .mdc-slider__track--active_fill {
-  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+
+input[type=range] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+  margin: 0;
+  appearance: none;
 }
-.mdc-slider .mdc-slider__thumb-knob {
-  border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
-  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+
+:host([disabled]:not([disabled=false])) input[type=range] {
+  cursor: not-allowed;
 }
-.mdc-slider .mdc-slider__value-indicator-text {
-  font-size: var(--limel-theme-default-small-font-size);
+:host([disabled]:not([disabled=false])) .track .active {
+  opacity: 0.5;
 }
-
-.mdc-slider .mdc-slider__value-indicator-text {
-  font-family: inherit;
+:host([disabled]:not([disabled=false])) .indicator {
+  border-radius: 0.125rem;
+  box-shadow: var(--button-shadow-pressed);
 }
 
-.slider__content-range-container {
+.track {
+  transition: background-color 0.5s ease;
   display: flex;
-  order: 2;
+  align-items: center;
   justify-content: space-between;
-  margin: 0 auto;
-  margin-top: -0.75rem;
-  width: 100%;
-}
-
-.slider__content-min-label,
-.slider__content-max-label {
-  line-height: 1;
-  transition: opacity 0.2s ease;
-  opacity: 0.7;
-  font-size: 0.75rem;
-  color: rgba(var(--contrast-1200), 1);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 0.5rem;
+  border-radius: 1rem;
+  background-color: rgba(var(--contrast-700), 0.6);
 }
-
-.mdc-slider__track:before, .mdc-slider__track:after {
+.track:before, .track:after {
   content: "";
   display: inline-block;
   position: absolute;
@@ -813,9 +335,60 @@ div[slot=content] {
   border-radius: 50%;
   background-color: rgba(var(--contrast-700), 0.6);
 }
-.mdc-slider__track:before {
+.track:before {
   left: -0.75rem;
 }
-.mdc-slider__track:after {
+.track:after {
   right: -0.75rem;
+}
+.track .active {
+  transition: background-color 0.5s ease;
+  position: absolute;
+  height: 100%;
+  width: calc(var(--slider-fraction) * 100%);
+  border-radius: inherit;
+  background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
+}
+
+.step-dot {
+  transform: translateX(-50%);
+  border-radius: 50%;
+  height: 0.25rem;
+  width: 0.25rem;
+  background-color: rgb(var(--contrast-100), 0.6);
+}
+.step-dot:first-of-type, .step-dot:last-of-type {
+  opacity: 0;
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: -0.75rem;
+  width: 100%;
+}
+.range-labels .min,
+.range-labels .max {
+  line-height: 1;
+  font-size: 0.75rem;
+  color: var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)));
+}
+
+:host(limel-slider:focus),
+:host(limel-slider:focus-visible),
+:host(limel-slider:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limel-slider) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limel-slider:focus) limel-helper-line,
+:host(limel-slider:focus-visible) limel-helper-line,
+:host(limel-slider:focus-within) limel-helper-line,
+:host(limel-slider:hover) limel-helper-line {
+  will-change: grid-template-rows;
 }