@scania/tegel 1.2.0 → 1.3.1

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -1,14 +1,17 @@
 :host {
+  box-sizing: border-box;
   display: block;
   background-color: var(--tds-dropdown-option-background);
 }
+:host * {
+  box-sizing: border-box;
+}
 :host .dropdown-option {
-  display: flex;
-  align-items: center;
   color: var(--tds-dropdown-option-color);
   border-bottom: 1px solid var(--tds-dropdown-option-border);
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
+  overflow-wrap: anywhere;
 }
 :host .dropdown-option.selected {
   background-color: var(--tds-dropdown-option-background-selected);
@@ -16,19 +19,22 @@
 :host .dropdown-option.disabled {
   color: var(--tds-dropdown-option-color-disabled);
 }
-:host .dropdown-option.lg {
-  height: 47px;
-}
-:host .dropdown-option.md {
-  height: 47px;
-}
-:host .dropdown-option.sm {
-  height: 39px;
+:host .dropdown-option button:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
 }
 :host .dropdown-option button {
   all: unset;
   width: 100%;
-  height: 100%;
+}
+:host .dropdown-option button.lg {
+  padding: 19px 0 20px;
+}
+:host .dropdown-option button.md {
+  padding: 15px 0 16px;
+}
+:host .dropdown-option button.sm {
+  padding: 11px 0 12px;
 }
 :host .dropdown-option button .single-select {
   display: flex;
@@ -36,10 +42,6 @@
   justify-content: space-between;
   padding: 0 16px;
 }
-:host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
 :host .dropdown-option .multiselect {
   width: 100%;
   height: 100%;
@@ -48,7 +50,15 @@
   display: flex;
   height: 100%;
   width: 100%;
-  padding: 0 16px;
+}
+:host .dropdown-option .multiselect tds-checkbox.lg {
+  padding: 15px 16px 16px;
+}
+:host .dropdown-option .multiselect tds-checkbox.md {
+  padding: 11px 16px 12px;
+}
+:host .dropdown-option .multiselect tds-checkbox.sm {
+  padding: 7px 16px 8px;
 }
 :host .dropdown-option:hover {
   background-color: var(--tds-dropdown-option-background-hover);

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -72,9 +72,11 @@ export class TdsDropdownOption {
         }
       } }, h("tds-checkbox", { onTdsChange: (event) => {
         this.handleMultiselect(event);
-      }, disabled: this.disabled, checked: this.selected }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+      }, disabled: this.disabled, checked: this.selected, class: {
+        [this.size]: true,
+      } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
         this.handleSingleSelect();
-      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
+      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
   }
   static get is() { return "tds-dropdown-option"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.css

@@ -17,6 +17,7 @@
 }
 :host button.placeholder {
   color: var(--tds-dropdown-placeholder-color);
+  line-height: 1.3;
 }
 :host button.value {
   color: var(--tds-dropdown-value-color);
@@ -41,6 +42,18 @@
 :host button.error {
   border-bottom: 1px solid var(--tds-negative);
 }
+:host button.error:focus {
+  border-bottom-color: transparent;
+}
+:host button.error:focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--tds-negative);
+}
 :host button:disabled {
   color: var(--tds-dropdown-disabled-color);
   border-bottom: 1px solid transparent;
@@ -111,6 +124,21 @@
   height: 2px;
   background: var(--tds-dropdown-border-bottom-open);
 }
+:host .filter.error {
+  border-bottom: 1px solid var(--tds-negative);
+}
+:host .filter.error.focus {
+  border-bottom-color: transparent;
+}
+:host .filter.error.focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--tds-negative);
+}
 :host .filter input {
   flex: 1;
   all: unset;

package/dist/collection/components/dropdown/dropdown.js

@@ -60,6 +60,9 @@ export class TdsDropdown {
     };
     this.getValue = () => {
       const labels = this.getSelectedChildrenLabels();
+      if (!labels) {
+        return '';
+      }
       return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
     };
     this.setValueAttribute = () => {
@@ -294,8 +297,12 @@ export class TdsDropdown {
   render() {
     var _a, _b, _c, _d;
     appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: `filter ${this.filterFocus ? 'focus' : ''}
-            ${this.disabled ? 'disabled' : ''}` }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        filter: true,
+        focus: this.filterFocus,
+        disabled: this.disabled,
+        error: this.error,
+      } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
@@ -315,6 +322,9 @@ export class TdsDropdown {
       }
     })), h("tds-icon", { onClick: () => {
         this.open = !this.open;
+        if (this.open) {
+          this.inputElement.focus();
+        }
       }, class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => {
         this.open = !this.open;
       }, onKeyDown: (event) => {
@@ -704,7 +714,7 @@ export class TdsDropdown {
       },
       "setValue": {
         "complexType": {
-          "signature": "(value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>",
+          "signature": "(value: string | string[], label?: string) => Promise<{ value: any; label: any; }[]>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -722,7 +732,7 @@ export class TdsDropdown {
               "id": "global::HTMLTdsDropdownOptionElement"
             }
           },
-          "return": "Promise<{ value: string; label: string; }[]>"
+          "return": "Promise<{ value: any; label: any; }[]>"
         },
         "docs": {
           "text": "Method for setting the value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",

package/dist/collection/components/footer/footer-item/footer-item.css

@@ -1,7 +1,7 @@
 [role=listitem] ::slotted(a),
 [role=listitem] ::slotted(button) {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-main-links);
   opacity: var(--tds-footer-main-links-opacity);
   text-decoration: none;
@@ -17,11 +17,9 @@
 }
 [role=listitem].top-part-child ::slotted(a),
 [role=listitem].top-part-child ::slotted(button) {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-top-links);
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 18px;
 }
 [role=listitem].top-part-child ::slotted(a:focus-visible),
 [role=listitem].top-part-child ::slotted(button:focus-visible) {

package/dist/collection/components/modal/modal.stories.js

@@ -102,9 +102,9 @@ const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showMod
       <span slot="body">
           ${bodyContent}
       </span>      
-      <span slot='actions'>
-        <tds-button data-dismiss-modal size="md" text="Delete" type="danger"></tds-button>
-        <tds-button data-dismiss-modal size="md" text="Cancel"></tds-button>
+      <span slot='actions' class='tds-u-flex tds-u-gap2'>
+        <tds-button data-dismiss-modal size="md" text="Delete" variant="danger"></tds-button>
+        <tds-button data-dismiss-modal size="md" text="Cancel" variant="secondary"></tds-button>
       </span>      
   </tds-modal>
   

package/dist/collection/components/side-menu/side-menu.js

@@ -154,7 +154,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -178,7 +178,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -202,7 +202,7 @@ export class TdsSideMenu {
           "references": {
             "InternalTdsSideMenuPropChange": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
             }
           }

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

@@ -7,9 +7,6 @@ export class TdsSlider {
     this.thumbInnerElement = null;
     this.trackElement = null;
     this.trackFillElement = null;
-    this.minusElement = null;
-    this.plusElement = null;
-    this.inputElement = null;
     this.thumbGrabbed = false;
     this.thumbLeft = 0;
     this.tickValues = [];
@@ -18,7 +15,6 @@ export class TdsSlider {
     this.useSmall = false;
     this.useSnapping = false;
     this.supposedValueSlot = -1;
-    this.eventListenersAdded = false;
     this.resizeObserverAdded = false;
     this.label = '';
     this.value = '0';
@@ -39,7 +35,6 @@ export class TdsSlider {
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
   async reset() {
-    // @TODO: maybe refactor to use watch-decorators instead
     this.componentWillLoad();
     this.componentDidLoad();
   }
@@ -90,10 +85,8 @@ export class TdsSlider {
     }
     this.thumbCore(event);
   }
-  handleValueUpdate(newVal) {
-    this.calculateThumbLeftFromValue(newVal);
-    this.updateValueForced(newVal);
-    this.updateTrack();
+  handleValueUpdate(newValue) {
+    this.forceValueUpdate(newValue);
   }
   updateSupposedValueSlot(localLeft) {
     const numTicks = parseInt(this.ticks);
@@ -138,9 +131,6 @@ export class TdsSlider {
     const percentageFilled = (this.thumbLeft / trackWidth) * 100;
     this.trackFillElement.style.width = `${percentageFilled}%`;
   }
-  dispatchChangeEvent() {
-    this.tdsChange.emit({ value: this.value });
-  }
   updateValue() {
     const trackWidth = this.getTrackWidth();
     const numTicks = parseInt(this.ticks);
@@ -152,20 +142,16 @@ export class TdsSlider {
     }
     else {
       const percentage = this.thumbLeft / trackWidth;
-      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
+      this.value = `${Math.trunc(parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)))}`;
     }
     this.updateTrack();
-    this.dispatchChangeEvent();
-  }
-  updateValueForced(value) {
-    this.value = value;
-    this.dispatchChangeEvent();
-  }
-  getMin() {
-    return parseFloat(this.min);
+    this.tdsChange.emit({ value: this.value });
   }
-  getMax() {
-    return parseFloat(this.max);
+  forceValueUpdate(newValue) {
+    this.calculateThumbLeftFromValue(newValue);
+    this.value = newValue;
+    this.tdsChange.emit({ value: this.value });
+    this.updateTrack();
   }
   constrainThumb(x) {
     const width = this.getTrackWidth();
@@ -184,61 +170,33 @@ export class TdsSlider {
   calculateThumbLeftFromValue(value) {
     const initValue = value;
     const trackWidth = this.getTrackWidth();
-    const normalizedValue = initValue - this.getMin();
-    const normalizedMax = this.getMax() - this.getMin();
+    const normalizedValue = initValue - parseFloat(this.min);
+    const normalizedMax = parseFloat(this.max) - parseFloat(this.min);
     const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
     this.thumbLeft = calculatedLeft;
     this.updateSupposedValueSlot(this.thumbLeft);
     this.thumbElement.style.left = `${this.thumbLeft}px`;
   }
-  componentDidLoad() {
-    if (!this.resizeObserverAdded) {
-      this.resizeObserverAdded = true;
-      const resizeObserver = new ResizeObserver(( /* entries */) => {
-        this.calculateThumbLeftFromValue(this.value);
-        this.updateTrack();
-      });
-      resizeObserver.observe(this.wrapperElement);
+  /** Updates the slider value based on the current input value */
+  updateSliderValueOnInputChange(event) {
+    const inputElement = event.target;
+    let newValue = parseInt(inputElement.value);
+    if (newValue < parseFloat(this.min)) {
+      newValue = parseFloat(this.min);
     }
-    if (!this.eventListenersAdded) {
-      this.eventListenersAdded = true;
-      this.thumbElement.addEventListener('mousedown', (event) => {
-        event.preventDefault();
-        this.grabThumb();
-      });
-      this.thumbElement.addEventListener('touchstart', () => {
-        this.grabThumb();
-      });
-      if (this.useControls) {
-        this.minusElement.addEventListener('click', () => {
-          this.stepLeft();
-        });
-        this.plusElement.addEventListener('click', () => {
-          this.stepRight();
-        });
-      }
-      if (this.inputElement) {
-        this.inputElement.addEventListener('keydown', (event) => {
-          event.stopPropagation();
-          if (event.key === 'Enter') {
-            let newValue = parseInt(this.inputElement.value);
-            if (newValue < this.getMin()) {
-              newValue = this.getMin();
-            }
-            else if (newValue > this.getMax()) {
-              newValue = this.getMax();
-            }
-            this.calculateThumbLeftFromValue(newValue);
-            this.updateValueForced(newValue);
-            this.updateTrack();
-            this.inputElement.blur();
-            this.wrapperElement.focus();
-          }
-        });
-      }
+    else if (newValue > parseFloat(this.max)) {
+      newValue = parseFloat(this.max);
+    }
+    this.forceValueUpdate(String(newValue));
+  }
+  /** Updates the slider value based on the current input value when enter is pressed */
+  handleInputFieldEnterPress(event) {
+    event.stopPropagation();
+    if (event.key === 'Enter') {
+      this.updateSliderValueOnInputChange(event);
+      const inputElement = event.target;
+      inputElement.blur();
     }
-    this.calculateThumbLeftFromValue(this.value);
-    this.updateTrack();
   }
   grabThumb() {
     if (this.readOnly) {
@@ -270,19 +228,17 @@ export class TdsSlider {
     else {
       const trackWidth = this.getTrackWidth();
       const percentage = this.thumbLeft / trackWidth;
-      let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+      let currentValue = parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min));
       currentValue += delta;
       currentValue = Math.round(currentValue);
-      if (currentValue < this.getMin()) {
-        currentValue = this.getMin();
+      if (currentValue < parseFloat(this.min)) {
+        currentValue = parseFloat(this.min);
       }
-      else if (currentValue > this.getMax()) {
-        currentValue = this.getMax();
+      else if (currentValue > parseFloat(this.max)) {
+        currentValue = parseFloat(this.max);
       }
       this.value = `${currentValue}`;
-      this.calculateThumbLeftFromValue(this.value);
-      this.updateValueForced(currentValue);
-      this.updateTrack();
+      this.forceValueUpdate(this.value);
     }
   }
   stepLeft() {
@@ -294,12 +250,12 @@ export class TdsSlider {
   componentWillLoad() {
     const numTicks = parseInt(this.ticks);
     if (numTicks > 0) {
-      this.tickValues = [this.getMin()];
-      const step = (this.getMax() - this.getMin()) / (numTicks + 1);
+      this.tickValues = [parseFloat(this.min)];
+      const step = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
       for (let i = 1; i < numTicks + 1; i++) {
-        this.tickValues.push(this.getMin() + Math.round(step * i));
+        this.tickValues.push(parseFloat(this.min) + Math.round(step * i));
       }
-      this.tickValues.push(this.getMax());
+      this.tickValues.push(parseFloat(this.max));
     }
     this.useInput = false;
     this.useControls = false;
@@ -311,44 +267,44 @@ export class TdsSlider {
     }
     this.useSmall = this.thumbSize === 'sm';
     this.useSnapping = this.snap;
-    const min = this.getMin();
-    const max = this.getMax();
+    const min = parseFloat(this.min);
+    const max = parseFloat(this.max);
     if (min > max) {
       console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
       this.disabled = true;
     }
   }
+  componentDidLoad() {
+    if (!this.resizeObserverAdded) {
+      this.resizeObserverAdded = true;
+      const resizeObserver = new ResizeObserver(() => {
+        this.calculateThumbLeftFromValue(this.value);
+        this.updateTrack();
+      });
+      resizeObserver.observe(this.wrapperElement);
+    }
+    this.calculateThumbLeftFromValue(this.value);
+    this.updateTrack();
+  }
   render() {
-    return (h("div", { class: `tds-slider-wrapper ${this.readOnly ? '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: {
+    return (h("div", { class: {
+        'tds-slider-wrapper': true,
+        'read-only': this.readOnly,
+      } }, h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { class: {
         'tds-slider': true,
         'disabled': this.disabled,
         'tds-slider-small': this.useSmall,
       }, ref: (el) => {
         this.wrapperElement = 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: "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) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, 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: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
       } }), h("div", { class: "tds-slider__thumb", ref: (el) => {
         this.thumbElement = 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__thumb-inner", ref: (el) => {
+      }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, 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__thumb-inner", ref: (el) => {
         this.thumbInnerElement = el;
-      } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
-        this.minusElement = el;
-      }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
-        if (this.readOnly) {
-          e.preventDefault();
-          this.inputElement.blur();
-        }
-      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
-        this.inputElement = el;
-      } })))), 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" })))))));
+      } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, h("tds-icon", { name: "plus", size: "16px" })))))));
   }
   static get is() { return "tds-slider"; }
   static get originalStyleUrls() {
@@ -383,7 +339,7 @@ export class TdsSlider {
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",

package/dist/collection/components/stepper/step/step.js

@@ -1,4 +1,10 @@
 import { Host, h } from "@stencil/core";
+const propToStateMap = {
+  orientation: 'orientation',
+  labelPosition: 'labelPosition',
+  size: 'size',
+  hideLabels: 'hideLabels',
+};
 /**
  * @slot label - Slot for the label text.
  */
@@ -6,7 +12,7 @@ export class TdsStep {
   constructor() {
     this.index = undefined;
     this.state = 'upcoming';
-    this.hideLabel = undefined;
+    this.hideLabels = undefined;
     this.size = undefined;
     this.orientation = undefined;
     this.labelPosition = undefined;
@@ -17,24 +23,23 @@ export class TdsStep {
     this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
-    this.hideLabel = this.stepperEl.hideLabels;
+    this.hideLabels = this.stepperEl.hideLabels;
     this.stepperId = this.stepperEl.stepperId;
   }
   handlePropsChange(event) {
     if (this.stepperId === event.detail.stepperId) {
       event.detail.changed.forEach((changedProp) => {
         if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
+          throw new Error(`Stepper prop is not supported: ${changedProp}`);
         }
-        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
-          this.labelPosition = 'aside';
+        else if (changedProp in propToStateMap) {
+          this[propToStateMap[changedProp]] = event.detail[changedProp];
         }
-        this[changedProp] = event.detail[changedProp];
       });
     }
   }
   render() {
-    return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+    return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
   }
   static get is() { return "tds-step"; }
   static get encapsulation() { return "shadow"; }
@@ -89,7 +94,7 @@ export class TdsStep {
   }
   static get states() {
     return {
-      "hideLabel": {},
+      "hideLabels": {},
       "size": {},
       "orientation": {},
       "labelPosition": {}

package/dist/collection/components/stepper/stepper.js

@@ -175,7 +175,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
+              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
               "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
             }
           }

package/dist/collection/components/table/table/table.js

@@ -255,7 +255,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/table/table/table.tsx",
+              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
               "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
             }
           }