@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.css

@@ -1,9 +1,17 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: block;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-sidebar-side-menu-single-item-color);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  font-weight: var(--side-menu-text-items-font-weight);
+  color: var(--side-menu-single-item-color);
 }
 :host .subheading {
-  color: var(--tds-grey-500);
+  color: var(--color-foreground-text-subtle);
 }

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

@@ -5,7 +5,7 @@ export class TdsSideMenuUserLabel {
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: 'fcd180821724e5e7ad1d8574a3adaf428f124b47' }, this.heading, this.subheading && h("div", { key: 'f1d86f3f1f200de394e771ea71839e5e9a94ba10', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '6d284cd0a71bca32e18f7498ab1e700f4c3532c7' }, this.heading, this.subheading && h("div", { key: '5e54c355fe2a3710dff97d01846ef1d5f97fbd26', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,10 +29,10 @@ body {
   /* 'end' slot */
 }
 :host .wrapper slot:not([name])::slotted(*) {
-  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
 }
 :host .wrapper ::slotted([slot=end]) {
-  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  border-top: 1px solid var(--side-menu-bottom-menu-border-top);
 }
 :host .wrapper .tds-side-menu-list-end {
   margin-top: 68px;
@@ -46,6 +46,11 @@ body {
 :host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button) {
   opacity: 1;
 }
+:host .tds-side-menu-list li {
+  display: flex;
+  flex-direction: column;
+  gap: var(--side-menu-space-top-level-vertical-gap-padding);
+}
 :host .state-upper-slot-empty .tds-side-menu-list-upper {
   display: none;
 }
@@ -54,7 +59,7 @@ body {
 }
 :host .state-upper-slot-empty ::slotted([slot=end]) {
   border-top: none;
-  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
 }
 
 @media (max-width: 992px) {
@@ -69,7 +74,7 @@ body {
     position: static;
     width: 272px;
     height: auto;
-    border-right: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+    border-right: 1px solid var(--side-menu-bottom-menu-border-top);
   }
   :host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
     display: none;
@@ -84,11 +89,11 @@ body {
     display: block;
   }
   :host(.menu-persistent):host(.menu-collapsed) {
-    width: 69px;
+    width: calc(var(--side-menu-collapsed-button-size) + 1px);
     box-sizing: border-box;
   }
   :host(.menu-persistent):host(.menu-collapsed) .menu {
-    width: 68px;
+    width: var(--side-menu-collapsed-button-size);
   }
   :host(.menu-persistent) slot[name=end]::slotted(*) {
     display: none;
@@ -114,28 +119,32 @@ body {
     width: 100%;
   }
 }
+aside {
+  background-color: var(--side-menu-background-cover);
+}
 aside .tds-side-menu-wrapper {
+  padding: 0 var(--side-menu-space-top-level-left);
+  padding-top: var(--component-side-menu-space-top-level-top);
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   flex-grow: 1;
-  background-color: var(--tds-sidebar-side-menu-background-cover);
   overflow-y: auto;
 }
 aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--tds-scrollbar-hover-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   background-clip: padding-box;
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar-track {
-  background: var(--tds-scrollbar-track-color);
+  background: var(--color-background-layer-01);
 }
 aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--tds-scrollbar-thumb-color);
+  background: var(--color-foreground-icon-discrete);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }

package/dist/collection/components/slider/slider-stories-setup.js

@@ -129,6 +129,30 @@ export const SliderArgTypes = ({ storyName }) => ({
             defaultValue: { summary: false },
         },
     },
+    modeVariant: {
+        name: 'Mode variant (input field)',
+        description: 'Mode variant adjusts the background color of the slider input field',
+        control: {
+            type: 'radio',
+        },
+        options: ['Inherit from parent', 'Primary', 'Secondary'],
+        if: { arg: 'showInput', eq: true },
+        table: {
+            defaultValue: { summary: 'Inherit from parent' },
+        },
+    },
+    state: {
+        name: 'Input field state',
+        description: 'Controls the validation state of the slider input.',
+        control: {
+            type: 'radio',
+        },
+        options: ['Default', 'Success'],
+        if: { arg: 'showInput', eq: true },
+        table: {
+            defaultValue: { summary: 'default' },
+        },
+    },
     thumbSize: {
         name: 'Thumb size',
         description: 'Switches between the large and small version of the thumb.',
@@ -182,7 +206,7 @@ const sizeLookUp = {
     Large: 'lg',
     Small: 'sm',
 };
-export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
+export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, state, modeVariant, }) => formatHtmlPreview(`
    <!-- Style code below is just for demo purposes -->
       <style>
         .demo-wrapper {
@@ -205,6 +229,10 @@ export const SliderTemplate = ({ min, max, initialValue, showLabel, labelText, s
           ${showControls ? 'controls' : ''}
           ${showInput ? 'input' : ''}
           ${disabled ? 'disabled' : ''}
+          state=${(state || 'Default').toLowerCase()}
+          ${modeVariant && modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
+    : ''}
           thumb-size="${sizeLookUp[thumbSize]}"
           ${readonly ? 'read-only' : ''}
           tds-read-only-aria-label="Read only"

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 tds-slider {
   box-sizing: border-box;
   width: 100%;
@@ -19,6 +22,12 @@ tds-slider .sr-only {
   white-space: nowrap;
   border: 0;
 }
+tds-slider .slider-primary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
+  background-color: var(--slider-inputfield-background);
+}
+tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
+  background-color: var(--slider-inputfield-background-secondary);
+}
 
 .tds-slider-wrapper {
   width: 100%;
@@ -27,10 +36,18 @@ tds-slider .sr-only {
   pointer-events: none;
 }
 
+.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
+  box-shadow: var(--slider-input-field-box-shadow-success);
+  color: var(--slider-input-success-text);
+}
+.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover {
+  box-shadow: var(--slider-input-field-box-shadow-success);
+}
+
 .tds-slider-wrapper:focus-within {
+  border-radius: var(--tds-spacing-element-4);
   outline: 2px solid var(--tds-blue-400);
   outline-offset: 2px;
-  border-radius: var(--tds-spacing-element-4);
 }
 
 .tds-slider {
@@ -65,46 +82,63 @@ tds-slider .sr-only {
   align-items: center;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-value {
-  user-select: none;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--slider-input-value);
   padding: 18px;
-  color: var(--tds-grey-700);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  user-select: none;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-value.min-value {
   padding-left: 0;
 }
 .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper {
-  background-color: var(--tds-slider-inputfield-background);
+  background-color: var(--slider-inputfield-background);
+  border-radius: var(--slider-border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px 4px 0 0;
 }
 .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);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  border-left: 1px solid var(--slider-border-left);
+  border-right: 1px solid var(--slider-border-right);
+  border-bottom: 1px solid var(--slider-border-bottom);
+  border-top: 1px solid var(--slider-border-top);
+  border-radius: var(--slider-border-radius);
+  box-shadow: var(--slider-input-field-box-shadow);
+  color: var(--slider-input-inputfield);
   border: 0;
   background-color: transparent;
   text-align: center;
   padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);
-  border-radius: 4px 4px 0 0;
+  transition: box-shadow 200ms ease;
 }
 .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);
+  box-shadow: var(--slider-input-field-box-shadow-hover);
 }
 .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;
+  box-shadow: var(--slider-input-field-box-shadow-focus);
+  outline: var(--slider-border-outline);
 }
 .tds-slider label {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--slider-label);
   user-select: none;
   position: absolute;
-  color: var(--tds-slider-label-color);
   padding-bottom: 16px;
   transform: translateY(-100%);
 }
@@ -112,19 +146,24 @@ tds-slider .sr-only {
   padding-bottom: 34px;
 }
 .tds-slider .tds-slider__value {
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  background-color: var(--slider-value-tooltip-background);
+  color: var(--slider-value-tooltip);
+  z-index: 2;
   user-select: none;
   border-radius: 4px;
-  padding: 8px;
+  padding: 8px 11px;
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
-  background-color: var(--tds-slider-value-tooltip-background);
-  color: var(--tds-slider-value-tooltip-color);
 }
 .tds-slider .tds-slider__value svg {
-  color: var(--tds-slider-value-tooltip-background);
+  color: var(--slider-value-tooltip-background);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -134,10 +173,10 @@ tds-slider .sr-only {
   position: absolute;
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner {
+  background-color: var(--slider-thumb);
   width: 20px;
   height: 20px;
   border-radius: 100%;
-  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -145,11 +184,11 @@ tds-slider .sr-only {
   cursor: pointer;
 }
 .tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before {
+  background-color: var(--slider-thumb);
   content: " ";
   display: none;
   width: 48px;
   height: 48px;
-  background-color: var(--tds-slider-thumb-color);
   position: absolute;
   border-radius: 100%;
   top: 50%;
@@ -181,18 +220,23 @@ tds-slider .sr-only {
   width: 100%;
 }
 .tds-slider .tds-slider__value-dividers .tds-slider__value-divider {
+  background-color: var(--slider-divider);
+  color: var(--slider-divider-values);
   transform: translateY(-50%);
   height: 16px;
-  background-color: var(--tds-slider-divider-color);
-  color: var(--tds-slider-divider-values-color);
   width: 1px;
 }
 .tds-slider .tds-slider__value-dividers .tds-slider__value-divider span {
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   user-select: none;
   color: var(-tds-grey-700);
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
   position: relative;
   top: -7px;
   left: 50%;
@@ -201,10 +245,10 @@ tds-slider .sr-only {
   text-align: center;
 }
 .tds-slider .tds-slider__track {
+  background-color: var(--slider-track);
   width: 100%;
   height: 2px;
   border-radius: 1px;
-  background-color: var(--tds-slider-track-color);
   position: relative;
   cursor: pointer;
 }
@@ -230,7 +274,7 @@ tds-slider .sr-only {
   opacity: 0.08;
 }
 .tds-slider .tds-slider__track .tds-slider__track-fill {
-  background-color: var(--tds-slider-track-fill-color);
+  background-color: var(--slider-track-fill);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -247,23 +291,24 @@ tds-slider .sr-only {
   pointer-events: none;
 }
 .tds-slider.disabled label {
-  color: var(--tds-slider-disabled);
+  color: var(--slider-disabled-text);
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
 .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);
+  fill: var(--slider-disabled);
 }
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-value {
-  color: var(--tds-slider-disabled);
+  color: var(--slider-disabled);
 }
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper {
   pointer-events: none;
 }
 .tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field {
-  color: var(--tds-slider-disabled);
+  color: var(--slider-disabled);
   pointer-events: none;
+  box-shadow: none;
 }
 .tds-slider.disabled .tds-slider__value {
   display: none;
@@ -272,16 +317,16 @@ tds-slider .sr-only {
   cursor: not-allowed;
 }
 .tds-slider.disabled .tds-slider__track .tds-slider__track-fill {
-  background-color: var(--tds-slider-disabled);
+  background-color: var(--slider-disabled);
 }
 .tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span {
-  color: var(--tds-slider-disabled);
+  color: var(--slider-disabled);
 }
 .tds-slider.disabled .tds-slider__thumb {
   pointer-events: none;
 }
 .tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner {
-  background-color: var(--tds-slider-disabled);
+  background-color: var(--slider-disabled);
   cursor: default;
 }
 .tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner {
@@ -301,11 +346,11 @@ tds-slider .sr-only {
   cursor: default;
 }
 .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);
+  color: var(--slider-controls);
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
 .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);
+  color: var(--slider-disabled);
 }

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

@@ -27,6 +27,8 @@ export class TdsSlider {
         this.value = '0';
         this.min = '0';
         this.max = '100';
+        this.state = 'default';
+        this.modeVariant = null;
         this.ticks = '0';
         this.showTickNumbers = false;
         this.tooltip = false;
@@ -401,30 +403,34 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
+        return (h("div", { key: 'bd4183c7e9ab8598f2f1e00ff7d6d395847400d5', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+                'slider-default': this.state === 'default',
+                'slider-success': this.state === 'success',
+                'slider-primary': this.modeVariant === 'primary',
+                'slider-secondary': this.modeVariant === 'secondary',
+            } }, h("input", { key: '26336c8cae0fa98a4afd3971c85d606bc19ef1d8', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '81b4037332a2cd014499aab8e0a736f6b29466ad', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', class: {
+            } }), h("div", { key: '45076b1377c6ed50ca30bb54ea6813e0bbe86823', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '0c99475a8bdb1fdec04358421ec34630111a63b8', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '986444a64e1254c9fe7e48d92439dfbf68e1cd9c', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '78958c70f9f18a68e5a652cab122ce69390a7638', class: "tds-slider__input-values" }, h("div", { key: '7488b615ae3f989e89819418e95a0e50f6870f39', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'b13a12af4fa8b1256bff7df615f870295604fcb8', class: "tds-slider__controls" }, h("div", { key: '6d8f516d30ef263971969b2034d132e47254e7a8', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '29be5d68dc58887ca806d2e871e21abd49f8bc6b', name: "minus", size: "16px" })))), h("div", { key: '2082aa0ebf30e5e32c9d5f2dcfc092cf51f486f7', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '78894f9a5ec898237bad37507ceb0e719829e835', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '28b5650b22efe479753a15585266daba70e8fe99', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '4c3345c0729d8b2fc8dc41d7d341649a3456e431', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '93c0ab45f73c0c2ee8dbdaf75dcc0b36a5d8c5e6', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '0ad854c25663ba050dc1aedb737a209d43046e50', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', 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", { key: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b80b3f6e542820507f5b75cc458475ded9f3d917', class: "tds-slider__value" }, this.value, h("svg", { key: 'e3144dc00d812cb4ea7c2b1be1ac5e79e70d9022', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '940b3dc10755cb6b66d793e1fe03201a4661dbfd', 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", { key: 'a6da99482099afd5b4a36f51e43cd83184a80e4f', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'c80e10049d55a5457ddbfdbccc107e26a48d44b1', class: "tds-slider__input-values" }, h("div", { key: '31892d55b7ffb5db331bbb273ff9ade5ff5ce187', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '5cfd66b7016d413a52b884d61ba585e25e6d8e53', class: "tds-slider__input-field-wrapper" }, h("input", { key: '0110bd5e6bf77baf28e621145fa4b683b488ee62', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b4acf1abc7c3ec847e385ce3e71c396975efbbc0', class: "tds-slider__controls" }, h("div", { key: '41d053f1471824dc3e6acdd143dc15a3b29dcb62', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '9f78191d97f05e5e3ee1dc10243beb5435671116', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -511,6 +517,42 @@ export class TdsSlider {
                 "reflect": false,
                 "defaultValue": "'100'"
             },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success'",
+                    "resolved": "\"default\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of input"
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "modeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode variant of the Slider"
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "ticks": {
                 "type": "string",
                 "mutable": false,