@scania/tegel 0.0.7 → 0.0.9

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

@@ -1,216 +1,181 @@
-:root,
-.sdds-mode-light {
-  --sdds-slider-label-color: var(--sdds-grey-958);
-  --sdds-slider-thumb-color: var(--sdds-blue-800);
-  --sdds-slider-divider-color: var(--sdds-grey-400);
-  --sdds-slider-track-color: var(--sdds-grey-400);
-  --sdds-slider-track-fill-color: var(--sdds-blue-800);
-  --sdds-slider-input-inputfield-color: var(--sdds-grey-700);
-  --sdds-slider-inputfield-color: var(--sdds-grey-400);
-  --sdds-slider-controls-color: var(--sdds-grey-958);
-  --sdds-slider-inputfield-background: var(--sdds-white);
-  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
-  --sdds-slider-divider-values-color: var(--sdds-grey-958);
-  --sdds-slider-disabled: var(--sdds-grey-400);
-  --sdds-slider-value-tooltip-background: var(--sdds-grey-800);
-  --sdds-slider-value-tooltip-color: var(--sdds-white);
-}
-
-.sdds-mode-dark {
-  --sdds-slider-label-color: var(--sdds-grey-100);
-  --sdds-slider-thumb-color: var(--sdds-grey-100);
-  --sdds-slider-divider-color: var(--sdds-grey-700);
-  --sdds-slider-track-color: var(--sdds-grey-700);
-  --sdds-slider-track-fill-color: var(--sdds-grey-100);
-  --sdds-slider-inputfield-color: var(--sdds-grey-700);
-  --sdds-slider-input-inputfield-color: var(--sdds-grey-400);
-  --sdds-slider-controls-color: var(--sdds-grey-100);
-  --sdds-slider-inputfield-background: var(--sdds-grey-900);
-  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
-  --sdds-slider-divider-values-color: var(--sdds-grey-100);
-  --sdds-slider-disabled: var(--sdds-grey-700);
-  --sdds-slider-value-tooltip-background: var(--sdds-grey-200);
-  --sdds-slider-value-tooltip-color: var(--sdds-grey-958);
-}
-
-sdds-slider {
+tds-slider {
   box-sizing: border-box;
   width: 100%;
 }
-sdds-slider * {
+tds-slider * {
   box-sizing: border-box;
 }
-sdds-slider input[type=range].sdds-slider-native-element {
+tds-slider input[type=range].tds-slider-native-element {
   display: none;
 }
 
-.sdds-slider-wrapper {
+.tds-slider-wrapper {
   width: 100%;
 }
-.sdds-slider-wrapper.read-only {
+.tds-slider-wrapper.read-only {
   pointer-events: none;
 }
 
-.sdds-slider {
+.tds-slider {
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
   padding-top: 65px;
 }
-.sdds-slider .sdds-slider-inner {
+.tds-slider .tds-slider-inner {
   width: 100%;
   height: 20px;
   position: relative;
 }
-.sdds-slider .sdds-slider__controls {
+.tds-slider .tds-slider__controls {
   position: relative;
   top: -25px;
 }
-.sdds-slider .sdds-slider__controls .sdds-slider__control {
+.tds-slider .tds-slider__controls .tds-slider__control {
   cursor: pointer;
 }
-.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus {
+.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus {
   padding: 18px 18px 18px 0;
 }
-.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus {
+.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus {
   padding: 18px 0 18px 18px;
 }
-.sdds-slider .sdds-slider__input-values {
+.tds-slider .tds-slider__input-values {
   position: relative;
   top: -25px;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-value {
+.tds-slider .tds-slider__input-values .tds-slider__input-value {
   user-select: none;
   padding: 18px;
-  color: var(--sdds-grey-700);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--tds-grey-700);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-value.min-value {
-  padding-left: 0px;
+.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value {
+  padding-left: 0;
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
-  background-color: var(--sdds-slider-inputfield-background);
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
+  background-color: var(--tds-slider-inputfield-background);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px 4px 0 0;
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-slider-input-inputfield-color);
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-slider-input-inputfield-color);
   border: 0;
   background-color: transparent;
   text-align: center;
   padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);
+  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
   border-radius: 4px 4px 0 0;
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover {
-  box-shadow: inset 0 -1px 0 var(--sdds-grey-600);
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
+  box-shadow: inset 0 -1px 0 var(--tds-grey-600);
 }
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus {
-  box-shadow: inset 0 -2px 0 var(--sdds-blue-400);
+.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus {
+  box-shadow: inset 0 -2px 0 var(--tds-blue-400);
   outline: 0;
 }
-.sdds-slider label {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+.tds-slider label {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   user-select: none;
   position: absolute;
-  color: var(--sdds-slider-label-color);
+  color: var(--tds-slider-label-color);
   padding-bottom: 16px;
   transform: translateY(-100%);
 }
-.sdds-slider label.offset {
+.tds-slider label.offset {
   padding-bottom: 34px;
 }
-.sdds-slider .sdds-slider__value {
-  font: var(--sdds-detail-01);
-  letter-spacing: var(--sdds-detail-01-ls);
+.tds-slider .tds-slider__value {
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
   user-select: none;
   border-radius: 4px;
   padding: 8px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
-  background-color: var(--sdds-slider-value-tooltip-background);
-  color: var(--sdds-slider-value-tooltip-color);
+  background-color: var(--tds-slider-value-tooltip-background);
+  color: var(--tds-slider-value-tooltip-color);
 }
-.sdds-slider .sdds-slider__value svg {
-  color: var(--sdds-slider-value-tooltip-background);
+.tds-slider .tds-slider__value svg {
+  color: var(--tds-slider-value-tooltip-background);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 34px;
 }
-.sdds-slider .sdds-slider__scrubber {
+.tds-slider .tds-slider__scrubber {
   position: absolute;
 }
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner {
   width: 20px;
   height: 20px;
   border-radius: 100%;
-  background-color: var(--sdds-slider-thumb-color);
+  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: pointer;
 }
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner::before {
   content: " ";
   display: none;
   width: 48px;
   height: 48px;
-  background-color: var(--sdds-slider-thumb-color);
+  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   border-radius: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before {
+.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner:hover::before {
   display: block;
   opacity: 0.08;
 }
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed {
   width: 24px;
   height: 24px;
 }
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before {
+.tds-slider .tds-slider__scrubber .tds-slider__scrubber-inner.pressed::before {
   display: block;
   opacity: 0.16 !important;
 }
-.sdds-slider .sdds-slider__value-dividers-wrapper {
+.tds-slider .tds-slider__value-dividers-wrapper {
   position: relative;
   width: 100%;
   pointer-events: none;
 }
-.sdds-slider .sdds-slider__value-dividers {
+.tds-slider .tds-slider__value-dividers {
   pointer-events: none;
   position: absolute;
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
-.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider {
+.tds-slider .tds-slider__value-dividers .tds-slider__value-divider {
   transform: translateY(-50%);
   height: 16px;
-  background-color: var(--sdds-slider-divider-color);
-  color: var(--sdds-slider-divider-values-color);
+  background-color: var(--tds-slider-divider-color);
+  color: var(--tds-slider-divider-values-color);
   width: 1px;
 }
-.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span {
+.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span {
   display: block;
   user-select: none;
-  color: var(-sdds-grey-700);
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  color: var(-tds-grey-700);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   position: relative;
   top: -7px;
   left: 50%;
@@ -218,95 +183,95 @@ sdds-slider input[type=range].sdds-slider-native-element {
   width: 50px;
   text-align: center;
 }
-.sdds-slider .sdds-slider__track {
+.tds-slider .tds-slider__track {
   width: 100%;
   height: 2px;
   border-radius: 1px;
-  background-color: var(--sdds-slider-track-color);
+  background-color: var(--tds-slider-track-color);
   position: relative;
 }
-.sdds-slider .sdds-slider__track:focus {
+.tds-slider .tds-slider__track:focus {
   outline: 0;
 }
-.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner {
   width: 24px;
   height: 24px;
 }
-.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+.tds-slider .tds-slider__track:focus .tds-slider__scrubber .tds-slider__scrubber-inner::before {
   display: block;
   opacity: 0.08;
 }
-.sdds-slider .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-slider-track-fill-color);
+.tds-slider .tds-slider__track .tds-slider__track-fill {
+  background-color: var(--tds-slider-track-fill-color);
   border-radius: 2px;
   height: 4px;
   position: absolute;
   left: 0;
   top: -1px;
 }
-.sdds-slider.disabled {
+.tds-slider.disabled {
   cursor: not-allowed;
 }
-.sdds-slider.disabled > * {
+.tds-slider.disabled > * {
   pointer-events: none;
 }
-.sdds-slider.disabled label {
-  color: var(--sdds-slider-disabled);
+.tds-slider.disabled label {
+  color: var(--tds-slider-disabled);
 }
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
+.tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
-  fill: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg {
+  fill: var(--tds-slider-disabled);
 }
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
-  color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value {
+  color: var(--tds-slider-disabled);
 }
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
+.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper {
   pointer-events: none;
 }
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
+  color: var(--tds-slider-disabled);
   pointer-events: none;
 }
-.sdds-slider.disabled .sdds-slider__value {
+.tds-slider.disabled .tds-slider__value {
   display: none;
 }
-.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__track .tds-slider__track-fill {
+  background-color: var(--tds-slider-disabled);
 }
-.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span {
+  color: var(--tds-slider-disabled);
 }
-.sdds-slider.disabled .sdds-slider__scrubber {
+.tds-slider.disabled .tds-slider__scrubber {
   pointer-events: none;
 }
-.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  background-color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__scrubber .tds-slider__scrubber-inner {
+  background-color: var(--tds-slider-disabled);
   cursor: default;
 }
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
+.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner {
   width: 16px;
   height: 16px;
 }
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
+.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner::before {
   width: 40px;
   height: 40px;
 }
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
+.tds-slider.tds-slider-small .tds-slider__scrubber .tds-slider__scrubber-inner.pressed {
   width: 20px;
   height: 20px;
 }
 
-.sdds-slider .sdds-slider__controls .sdds-slider__control {
+.tds-slider .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
-  color: var(--sdds-slider-controls-color);
+.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
+  color: var(--tds-slider-controls-color);
 }
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
+.tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
-  color: var(--sdds-slider-disabled);
+.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
+  color: var(--tds-slider-disabled);
 }

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class Slider {
+export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
     this.scrubberElement = null;
@@ -47,9 +47,13 @@ export class Slider {
   handleKeydown(event) {
     switch (event.key) {
       case 'ArrowLeft':
+      case 'ArrowDown':
+      case '-':
         this.stepLeft();
         break;
       case 'ArrowRight':
+      case 'ArrowUp':
+      case '+':
         this.stepRight();
         break;
       default:
@@ -87,6 +91,24 @@ export class Slider {
     }
     this.scrubberCore(event);
   }
+  updateSupposedValueSlot(localLeft) {
+    const numTicks = parseInt(this.ticks);
+    const trackWidth = this.getTrackWidth();
+    const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
+    const snappedLocalLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
+    let scrubberPositionPX = 0;
+    if (snappedLocalLeft >= 0 && snappedLocalLeft <= trackWidth) {
+      scrubberPositionPX = snappedLocalLeft;
+    }
+    else if (snappedLocalLeft > trackWidth) {
+      scrubberPositionPX = trackWidth;
+    }
+    else if (snappedLocalLeft < 0) {
+      scrubberPositionPX = 0;
+    }
+    this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
+    return snappedLocalLeft;
+  }
   scrubberCore(event) {
     const numTicks = parseInt(this.ticks);
     const trackRect = this.trackElement.getBoundingClientRect();
@@ -101,25 +123,11 @@ export class Slider {
       console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const trackWidth = this.getTrackWidth();
-      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
-      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
-      let scrubberPositionPX = 0;
-      if (localLeft >= 0 && localLeft <= trackWidth) {
-        scrubberPositionPX = localLeft;
-      }
-      else if (localLeft > trackWidth) {
-        scrubberPositionPX = trackWidth;
-      }
-      else if (localLeft < 0) {
-        scrubberPositionPX = 0;
-      }
-      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
+      localLeft = this.updateSupposedValueSlot(localLeft);
     }
     this.scrubberLeft = this.constrainScrubber(localLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
     this.updateValue();
-    this.updateTrack();
   }
   updateTrack() {
     const trackWidth = this.getTrackWidth();
@@ -127,19 +135,22 @@ export class Slider {
     this.trackFillElement.style.width = `${percentageFilled}%`;
   }
   dispatchChangeEvent() {
-    this.sddsChange.emit({ value: this.value });
+    this.tdsChange.emit({ value: this.value });
   }
   updateValue() {
     const trackWidth = this.getTrackWidth();
+    const numTicks = parseInt(this.ticks);
     /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */
-    if (this.supposedValueSlot > 0) {
+    if (this.useSnapping && numTicks) {
       const supposedValue = this.tickValues[this.supposedValueSlot];
       this.value = `${supposedValue}`;
+      this.calculateScrubberLeftFromValue(supposedValue);
     }
     else {
       const percentage = this.scrubberLeft / trackWidth;
       this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
     }
+    this.updateTrack();
     this.dispatchChangeEvent();
   }
   updateValueForced(value) {
@@ -173,6 +184,7 @@ export class Slider {
     const normalizedMax = this.getMax() - this.getMin();
     const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
     this.scrubberLeft = calculatedLeft;
+    this.updateSupposedValueSlot(this.scrubberLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
   }
   componentDidLoad() {
@@ -238,18 +250,7 @@ export class Slider {
     if (this.readonlyState || this.disabled) {
       return;
     }
-    const trackWidth = this.getTrackWidth();
-    const percentage = this.scrubberLeft / trackWidth;
     const numTicks = parseInt(this.ticks);
-    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
-    currentValue += delta;
-    if (currentValue < this.getMin()) {
-      currentValue = this.getMin();
-    }
-    else if (currentValue > this.getMax()) {
-      currentValue = this.getMax();
-    }
-    this.value = `${currentValue}`;
     /* if snapping is enabled, instead just increment or decrement the current "fixed" value from our ticknumber array */
     if (this.useSnapping && numTicks > 0) {
       const stepDir = delta > 0 ? 1 : -1;
@@ -260,10 +261,25 @@ export class Slider {
       else if (this.supposedValueSlot > numTicks + 1) {
         this.supposedValueSlot = numTicks + 1;
       }
+      this.updateValue();
+    }
+    else {
+      const trackWidth = this.getTrackWidth();
+      const percentage = this.scrubberLeft / trackWidth;
+      let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+      currentValue += delta;
+      currentValue = Math.round(currentValue);
+      if (currentValue < this.getMin()) {
+        currentValue = this.getMin();
+      }
+      else if (currentValue > this.getMax()) {
+        currentValue = this.getMax();
+      }
+      this.value = `${currentValue}`;
+      this.calculateScrubberLeftFromValue(this.value);
+      this.updateValueForced(currentValue);
+      this.updateTrack();
     }
-    this.calculateScrubberLeftFromValue(currentValue);
-    this.updateTrack();
-    this.updateValue();
   }
   stepLeft() {
     this.controlsStep(-parseInt(this.step));
@@ -281,18 +297,8 @@ export class Slider {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled) {
-      this.disabledState = true;
-    }
-    else {
-      this.disabledState = false;
-    }
-    if (this.readOnly) {
-      this.readonlyState = true;
-    }
-    else {
-      this.readonlyState = false;
-    }
+    this.disabledState = this.disabled;
+    this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
     if (this.controls) {
@@ -317,30 +323,30 @@ export class Slider {
     }
   }
   render() {
-    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `tds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
-      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
+      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "tds-slider__control tds-slider__control-minus" }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
         this.trackElement = el;
-      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "sdds-slider__track-fill", ref: (el) => {
+      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
-      } }), h("div", { class: "sdds-slider__scrubber", ref: (el) => {
+      } }), h("div", { class: "tds-slider__scrubber", ref: (el) => {
         this.scrubberElement = el;
-      } }, this.tooltip && (h("div", { class: "sdds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
+      } }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "tds-slider__scrubber-inner", ref: (el) => {
         this.scrubberInnerElement = el;
-      } })))), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value" }, this.max), h("div", { class: "sdds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
+      }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
         if (this.readonlyState) {
           e.preventDefault();
           this.inputElement.blur();
         }
-      }, size: this.calculateInputSizeFromMax(), class: "sdds-slider__input-field", value: this.value, ref: (el) => {
+      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
         this.inputElement = el;
-      } })))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.plusElement = el), class: "sdds-slider__control sdds-slider__control-plus" }, h("sdds-icon", { name: "plus", size: "16px" })))))));
+      } })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => (this.plusElement = el), class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
   }
-  static get is() { return "sdds-slider"; }
+  static get is() { return "tds-slider"; }
   static get originalStyleUrls() {
     return {
       "$": ["slider.scss"]
@@ -617,7 +623,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Snap to the ticks grid"
+          "text": "Snap to the tick's grid"
         },
         "attribute": "snap",
         "reflect": false,
@@ -635,7 +641,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID for the sliders input element, randomly generated if not specified."
+          "text": "ID for the Slider's input element, randomly generated if not specified."
         },
         "attribute": "slider-id",
         "reflect": false,
@@ -645,8 +651,8 @@ export class Slider {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,