@limetech/lime-elements 39.0.0 → 39.0.2

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

@@ -1,147 +1,425 @@
 @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.
 */
-@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));
-  }
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled {
+  opacity: 1;
 }
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
+: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;
 }
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active {
+  top: 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;
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
+  transition: all 0s;
+  transform: translateY(1.75rem);
 }
-.mdc-slider__thumb::before, .mdc-slider__thumb::after {
-  position: absolute;
-  border-radius: 50%;
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
   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);
 }
-.mdc-slider__thumb::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 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));
 }
-.mdc-slider__thumb.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
+: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__thumb.mdc-ripple-upgraded::after {
+
+.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;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
+  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__thumb.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:before {
+  left: -1.25rem;
+  transform: rotate(90deg);
 }
-.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:after {
+  right: -1.25rem;
+  transform: rotate(-90deg);
 }
-.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));
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:before {
+  opacity: 0.8;
+  left: -1.75rem;
 }
-.mdc-slider__thumb::before, .mdc-slider__thumb::after {
-  top: calc(50% - 50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb-knob:hover:after {
+  opacity: 0.8;
+  right: -1.75rem;
 }
-.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 .mdc-slider__thumb {
+  top: -0.25rem;
 }
-.mdc-slider__thumb.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
+.mdc-slider .mdc-slider__value-indicator-container {
+  z-index: 1;
 }
-.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 .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__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 .mdc-slider__value-indicator:before {
+  border-top-color: transparent;
 }
-.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 .mdc-slider__value-indicator-text {
+  color: rgb(var(--color-white));
 }
-.mdc-slider__thumb:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
+.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__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-ripple-upgraded--foreground-activation .mdc-slider__value-indicator:before {
+  border-top-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
-.mdc-slider__thumb.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator {
+  box-shadow: var(--button-shadow-normal);
 }
 
-.mdc-slider .mdc-slider__track {
-  height: 4px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
+.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));
 }
-.mdc-slider .mdc-slider__track--active,
-.mdc-slider .mdc-slider__track--inactive {
-  display: flex;
-  height: 100%;
-  position: absolute;
-  width: 100%;
+
+/**
+* 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.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * 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(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;
+}
+
+limel-helper-line {
+  order: 3;
+}
+
+@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);
+}
+.mdc-slider__thumb::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
+}
+.mdc-slider__thumb.mdc-ripple-upgraded::before {
+  transform: scale(var(--mdc-ripple-fg-scale, 1));
+}
+.mdc-slider__thumb.mdc-ripple-upgraded::after {
+  top: 0;
+  /* @noflip */ /*rtl:ignore*/
+  left: 0;
+  transform: scale(0);
+  transform-origin: center center;
+}
+.mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after {
+  top: var(--mdc-ripple-top, 0);
+  /* @noflip */ /*rtl:ignore*/
+  left: var(--mdc-ripple-left, 0);
+}
+.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {
+  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+}
+.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));
+}
+.mdc-slider__thumb::before, .mdc-slider__thumb::after {
+  top: calc(50% - 50%);
+  /* @noflip */ /*rtl:ignore*/
+  left: calc(50% - 50%);
+  width: 100%;
+  height: 100%;
+}
+.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);
+}
+
+.mdc-slider .mdc-slider__track {
+  height: 4px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+.mdc-slider .mdc-slider__track--active,
+.mdc-slider .mdc-slider__track--inactive {
+  display: flex;
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 .mdc-slider .mdc-slider__track--active {
   border-radius: 3px;
@@ -538,294 +816,4 @@ div[slot=content] {
 }
 .mdc-slider__track:after {
   right: -0.75rem;
-}
-
-.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));
-}
-
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-.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 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.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * 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(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;
-}
-
-limel-helper-line {
-  order: 3;
 }