@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/cjs/tds-slider.cjs.entry.js

@@ -1,18 +1,51 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
-
-const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-slider-input-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.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);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.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 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);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb:hover .tds-slider__value{display:block}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;background-color:var(--tds-slider-thumb-hover)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;background-color:var(--tds-slider-thumb-pressed)}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{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{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%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.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}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.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)}.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-controls-disabled)}";
-const TdsSliderStyle0 = sliderCss;
+const sliderCss = () => `tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-slider-input-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.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);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.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 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);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb:hover .tds-slider__value{display:block}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;background-color:var(--tds-slider-thumb-hover)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;background-color:var(--tds-slider-thumb-pressed)}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{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{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%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.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}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.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)}.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-controls-disabled)}`;
 
 const TdsSlider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
         this.tdsInput = index.createEvent(this, "tdsInput", 6);
+        /** Text for label */
+        this.label = '';
+        /** Initial value */
+        this.value = '0';
+        /** Minimum value */
+        this.min = '0';
+        /** Maximum value */
+        this.max = '100';
+        /** Number of tick markers (tick for min- and max-value will be added automatically) */
+        this.ticks = '0';
+        /** Decide to show numbers above the tick markers or not  */
+        this.showTickNumbers = false;
+        /** Decide to show the tooltip or not */
+        this.tooltip = false;
+        /** Sets the disabled state for the whole component  */
+        this.disabled = false;
+        /** Sets the read only state for the whole component  */
+        this.readOnly = false;
+        /** Decide to show the controls or not */
+        this.controls = false;
+        /** Decide to show the input field or not */
+        this.input = false;
+        /** Defines how much to increment/decrement the value when using controls */
+        this.step = '1';
+        /** Name property (will be inherited by the native slider component) */
+        this.name = '';
+        /** Sets the size of the thumb */
+        this.thumbSize = 'lg';
+        /** Snap to the tick's grid */
+        this.snap = false;
+        /** Sets the aria-label for the slider control. */
+        this.tdsAriaLabel = '';
+        /** ID for the Slider's input element, randomly generated if not specified. */
+        this.sliderId = generateUniqueId.generateUniqueId();
+        /** Sets the read only aria label for the input field */
+        this.tdsReadOnlyAriaLabel = '';
         this.wrapperElement = null;
         this.thumbElement = null;
         this.thumbInnerElement = null;
@@ -35,24 +68,6 @@ const TdsSlider = class {
             this.forceValueUpdate(this.initialValue);
             this.reset();
         };
-        this.label = '';
-        this.value = '0';
-        this.min = '0';
-        this.max = '100';
-        this.ticks = '0';
-        this.showTickNumbers = false;
-        this.tooltip = false;
-        this.disabled = false;
-        this.readOnly = false;
-        this.controls = false;
-        this.input = false;
-        this.step = '1';
-        this.name = '';
-        this.thumbSize = 'lg';
-        this.snap = false;
-        this.tdsAriaLabel = '';
-        this.sliderId = generateUniqueId.generateUniqueId();
-        this.tdsReadOnlyAriaLabel = '';
     }
     roundToStep(val) {
         const stepNum = parseFloat(this.step);
@@ -450,36 +465,38 @@ const TdsSlider = class {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (index.h("div", { key: '1d089e5942bf7e4872b68bc46a269e975a4957a7', class: {
+        return (index.h("div", { key: 'a8b597a5b5ce36c572cf6e0773efb96350fe7b3c', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, index.h("input", { key: 'cf47a9ec5545aa0dd064b4e900578204ec9865c9', 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 }), index.h("div", { key: '1867645432d81580de1cb345ad68e55f9c004c28', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, index.h("input", { key: '1ac5ada12fbe89365459ab53e9b06aca30da95ec', 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 }), index.h("div", { key: 'a30d1d4e14ed8086e36f3605d59a5f6f6b79e38a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), index.h("div", { key: '39c628693700a11cda5f9536c6cfc8d4fcad70b6', class: {
+            } }), index.h("div", { key: '7f8f10c5a9982042b332291eb48fe1a91c4d5120', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: '8e0a61a0a9c872eda41f0d38efd9056cdf34906e', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (index.h("div", { key: '04a9887058c3f4ff2a6cd86a0e351b581becba74', class: "tds-slider__input-values" }, index.h("div", { key: 'eefa61151c058767d3293bad2ecd0e9878aa3b16', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: '241854ca030c62361240e98b112f7ec490cf6570', class: "tds-slider__controls" }, index.h("div", { key: '9ee83bb2be85b0813abf53d593059c3f8867175b', 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' }, index.h("tds-icon", { key: '80351eb5648c3032cc6356c8494c7fdc38a105a0', name: "minus", size: "16px" })))), index.h("div", { key: '5abdde18e7e8131b9b3f85d18cbbcc5583d18a52', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (index.h("div", { key: '364212a676b02719c87cce1135b11aa295753f46', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: 'ae1e63e6d45760ca582814ed1e72c3d8db43ef44', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: 'f3be603d4b0c9e30988265361d6b2c9f8b550483', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: '89e9d60169bd2a23d0bc978ee9fb5bf096f8467e', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (index.h("div", { key: '1e29ecf4b885e1e99222a558a48900e72a388060', class: "tds-slider__input-values" }, index.h("div", { key: '9f3dd1a0e4a0e04eb551664df4526d7dbbf17126', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: 'a73effd4c30c98b87009f39d3541172187309323', class: "tds-slider__controls" }, index.h("div", { key: 'bf46603c92eab4ed3bdb8ed79a2bdcb210185f56', 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' }, index.h("tds-icon", { key: '6df94fb293200e8cc91e56d2298872c106204027', name: "minus", size: "16px" })))), index.h("div", { key: '63a8cc2b56f1e099001c03fafab7bbfb198e7bde', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (index.h("div", { key: '31fd5005c4c3b2b19aaedfccc0c3c87fb5281d02', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '54ccc695e448db25bdb20b10669d58ebc7a6bc6c', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: '6dcc0f426c23e2b9f8193632275a4a2eb750cc85', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, index.h("div", { key: 'cd786e1d47f5ab9a3f4b824f00849fda01064915', class: "tds-slider__track-fill", ref: (el) => {
+            } }, index.h("div", { key: '5fa9d32cc1fed8cf79818fafe38b249764362172', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), index.h("div", { key: '36be5f7f9bb51d138e4a2b5e66dd9116c14260f8', class: "tds-slider__thumb", ref: (el) => {
+            } }), index.h("div", { key: '716c4f6c4f43224beda11704751e3c1425a9a53c', 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 && (index.h("div", { key: '0ccf5661d2ed49474040b964f3c31c9144effdc1', class: "tds-slider__value" }, this.value, index.h("svg", { key: 'c93653b56ab7759af24ed4ca9c32af758d51266d', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'f02dd0b4b9274dc9ea36aeb30059aed4bd81007f', 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" })))), index.h("div", { key: '688f3d350bb7175d08b017e804edac1ddde08ee6', 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 && (index.h("div", { key: 'e25c63d00730d805af96a22c180791a9ba90890e', class: "tds-slider__value" }, this.value, index.h("svg", { key: '0317b096047d60ab74e60e200ab11d3b448cc955', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '56db3635fda47222988e6b4bdee660f10306e4ae', 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" })))), index.h("div", { key: '9d23233322159f4bbee6d3089b1caf848b6e070d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (index.h("div", { key: '3f85a89df94fe531b1e9a3aa052cae465493aab0', class: "tds-slider__input-values" }, index.h("div", { key: 'd6f72ceb11a9305485712fed72831257ba3e47ce', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: 'd694e8f0bab9e97be10720bcef2f7d218a997103', class: "tds-slider__input-field-wrapper" }, index.h("tds-text-field", { key: '50e55ae9e12d7bac3b1bee5132130b57db6082de', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (index.h("div", { key: '328e507a5ff8c40d01b1eb5769914a07dceb436c', class: "tds-slider__controls" }, index.h("div", { key: 'f43b7c31a4e5c38c650a24e6b622b84e32e358c2', 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' }, index.h("tds-icon", { key: '707af22bfa42a1e9212199d372edf46db26eead1', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (index.h("div", { key: '52b37470f53b205c5ef4a5ecda1bc50ef534835a', class: "tds-slider__input-values" }, index.h("div", { key: 'b2016512dce7ff7914aec8d7f5ea8404ca4cccb7', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: 'ab4b1f51bf1ecb7b41bb56f14a331a33e98b551f', class: "tds-slider__input-field-wrapper" }, index.h("tds-text-field", { key: 'acaadb9b63f8aa5b26313a15e31d6bc4645039d5', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (index.h("div", { key: '1ce34d27847f849a817f344c8be4b85d38b4e448', class: "tds-slider__controls" }, index.h("div", { key: 'e13e63e23d8f55ee00bfb1fa3aa952dc90384a2a', 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' }, index.h("tds-icon", { key: 'cc11a2defee786216ab376339317f285d9730523', name: "plus", size: "16px" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueUpdate"]
+        "value": [{
+                "handleValueUpdate": 0
+            }]
     }; }
 };
-TdsSlider.style = TdsSliderStyle0;
+TdsSlider.style = sliderCss();
 
 exports.tds_slider = TdsSlider;

package/dist/cjs/tds-spinner.cjs.entry.js

@@ -1,22 +1,21 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.js');
-
-const spinnerCss = ":root{--spinner-background-inverted:var(--tds-white)}:root,.scania,.scania .tds-mode-light{--spinner-background:var(--tds-blue-400)}.scania .tds-mode-dark{--spinner-background:var(--tds-blue-400)}.traton,.traton .tds-mode-light{--spinner-background:rgba(0, 72, 82, 1)}.traton .tds-mode-dark{--spinner-background:rgba(194, 191, 182, 1)}:root{--spinner-speed:1.8s;--spinner-speed-lg:2s;--spinner-radius-xs:8px;--spinner-radius-sm:12px;--spinner-radius-md:26px;--spinner-radius-lg:42px;--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width-xs:3px;--spinner-stroke-width-sm:4px;--spinner-stroke-width-md:6px;--spinner-stroke-width-lg:8px;--spinner-stroke-width:var(--spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{display:block;width:calc(var(--spinner-radius) * 2);height:calc(var(--spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--spinner-radius:var(--spinner-radius-xs);--spinner-stroke-width:var(--spinner-stroke-width-xs);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-sm{--spinner-radius:var(--spinner-radius-sm);--spinner-stroke-width:var(--spinner-stroke-width-sm);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-md{--spinner-radius:var(--spinner-radius-md);--spinner-stroke-width:var(--spinner-stroke-width-md);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-lg{--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width:var(--spinner-stroke-width-lg);--spinner-animation-speed:var(--spinner-speed-lg)}.tds-spinner-circle{cx:var(--spinner-radius);cy:var(--spinner-radius);r:calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);fill:none;--spinner-stroke-dash:calc((2 * var(--PI)) * var(--spinner-radius));stroke-dasharray:var(--spinner-stroke-dash);stroke-width:var(--spinner-stroke-width);animation:dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--spinner-stroke-dash))}to{stroke-dashoffset:var(--spinner-stroke-dash)}}";
-const TdsSpinnerStyle0 = spinnerCss;
+const spinnerCss = () => `:root{--spinner-background-inverted:var(--tds-white)}:root,.scania,.scania .tds-mode-light{--spinner-background:var(--tds-blue-400)}.scania .tds-mode-dark{--spinner-background:var(--tds-blue-400)}.traton,.traton .tds-mode-light{--spinner-background:rgba(0, 72, 82, 1)}.traton .tds-mode-dark{--spinner-background:rgba(194, 191, 182, 1)}:root{--spinner-speed:1.8s;--spinner-speed-lg:2s;--spinner-radius-xs:8px;--spinner-radius-sm:12px;--spinner-radius-md:26px;--spinner-radius-lg:42px;--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width-xs:3px;--spinner-stroke-width-sm:4px;--spinner-stroke-width-md:6px;--spinner-stroke-width-lg:8px;--spinner-stroke-width:var(--spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{display:block;width:calc(var(--spinner-radius) * 2);height:calc(var(--spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--spinner-radius:var(--spinner-radius-xs);--spinner-stroke-width:var(--spinner-stroke-width-xs);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-sm{--spinner-radius:var(--spinner-radius-sm);--spinner-stroke-width:var(--spinner-stroke-width-sm);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-md{--spinner-radius:var(--spinner-radius-md);--spinner-stroke-width:var(--spinner-stroke-width-md);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-lg{--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width:var(--spinner-stroke-width-lg);--spinner-animation-speed:var(--spinner-speed-lg)}.tds-spinner-circle{cx:var(--spinner-radius);cy:var(--spinner-radius);r:calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);fill:none;--spinner-stroke-dash:calc((2 * var(--PI)) * var(--spinner-radius));stroke-dasharray:var(--spinner-stroke-dash);stroke-width:var(--spinner-stroke-width);animation:dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--spinner-stroke-dash))}to{stroke-dashoffset:var(--spinner-stroke-dash)}}`;
 
 const TdsSpinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Size of the Spinner */
         this.size = 'lg';
+        /** Variant of the Spinner */
         this.variant = 'standard';
     }
     render() {
-        return (index.h("div", { key: '2d27b4a94cd9dc205e11f18ecc6b249572912eac', "aria-live": "assertive", role: "status", "aria-label": "loading" }, index.h("svg", { key: 'a372dada808ed13b8c2c6ef4de9c559f59d9e9f2', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, index.h("circle", { key: '153f00da5e87ba55dc569b511cd184f93c1740c7', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (index.h("div", { key: 'a91630640bf14d5b0060989422e36f66d565f51e', "aria-live": "assertive", role: "status", "aria-label": "loading" }, index.h("svg", { key: '85fdcfc17c156f0ebae71342837184e672e6bd84', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, index.h("circle", { key: '51657ab3832eb8c54c8e6c40347b3480562112d1', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
 };
-TdsSpinner.style = TdsSpinnerStyle0;
+TdsSpinner.style = spinnerCss();
 
 exports.tds_spinner = TdsSpinner;

package/dist/cjs/tds-step.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.js');
-
-const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-stepper-icon-step-border-color-warning);color:var(--tds-stepper-icon-step-border-color-warning)}:host [role=listitem] .content-container.success{background-color:var(--tds-stepper-icon-step-border-color-success);border-color:var(--tds-stepper-icon-step-border-color-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{background-color:var(--tds-stepper-background);color:var(--tds-stepper-color)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
-const TdsStepStyle0 = stepCss;
+const stepCss = () => `:host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 16px + 16px);right:0;top:16px}:host [role=listitem].lg.horizontal::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 16px + 16px);left:0;top:16px}:host [role=listitem].lg.horizontal.hide-labels::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 16px + 8px);right:0;top:16px}:host [role=listitem].lg.horizontal.hide-labels::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 16px + 8px);left:0;top:16px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:auto;right:-10px;width:10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;left:-10px;right:auto;width:10px}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 12px + 16px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:0;right:calc(50% + 12px + 16px);top:13px}:host [role=listitem].sm.horizontal.hide-labels::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 12px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal.hide-labels::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 12px + 8px);left:0;top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;left:auto;right:-10px;width:10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;left:-10px;right:auto;width:10px}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-stepper-icon-step-border-color-warning);color:var(--tds-stepper-icon-step-border-color-warning)}:host [role=listitem] .content-container.success{background-color:var(--tds-stepper-icon-step-border-color-success);border-color:var(--tds-stepper-icon-step-border-color-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{background-color:var(--tds-stepper-icon-step-border-color-current);color:var(--tds-stepper-color)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal.text-aside{padding-right:0;padding-left:20px}:host(:last-of-type) [role=listitem].horizontal.text-aside::before{content:" ";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;width:20px;left:-10px;right:auto;top:16px}:host(:last-of-type) [role=listitem].horizontal.text-aside.sm.hide-labels::before{top:13px;width:13px;left:0;right:calc(50% + 20px)}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}`;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -16,13 +13,8 @@ const propToStateMap = {
 const TdsStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
@@ -48,10 +40,10 @@ const TdsStep = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0589d81b64f547deb8f0d9db7c9d377ee9d8db67' }, index.h("div", { key: '7d01660a996d9c3a63b6c9765aa9e97a3c465f72', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: 'f11f36b998a8b40842517a4032fe25aad488ccf3', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: '0e707ca85c128c486906e893f20f7a171ef693f7', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '265d2e99ba2b59749a1ee841895127c90c7750ac', name: "label" }))))));
+        return (index.h(index.Host, { key: '02d1b6ed29a07f3734f66c1d52fe076fcfce51a3' }, index.h("div", { key: 'b57393eea78ab1868ec1f1f745a4d5d50a68df3a', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: 'ee0e109c683ec2ae5ee63bffcba78db4ac01b41c', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: '0649edfcf0a1b5be4cbeb4904a185b0d62d933a2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '1e75c2ab1172c03914b43f2c041a656e53230b36', name: "label" }))))));
     }
     get el() { return index.getElement(this); }
 };
-TdsStep.style = TdsStepStyle0;
+TdsStep.style = stepCss();
 
 exports.tds_step = TdsStep;

package/dist/cjs/tds-stepper.cjs.entry.js

@@ -1,22 +1,29 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
-
-const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
-const TdsStepperStyle0 = stepperCss;
+const stepperCss = () => `:host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}`;
 
 const TdsStepper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.internalTdsPropsChange = index.createEvent(this, "internalTdsPropsChange", 6);
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId.generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -57,12 +64,20 @@ const TdsStepper = class {
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "orientation": ["handleDirectionChange"],
-        "labelPosition": ["handleLabelPositionChange"],
-        "size": ["handleSizeChange"],
-        "hideLabels": ["handleHideLabelsChange"]
+        "orientation": [{
+                "handleDirectionChange": 0
+            }],
+        "labelPosition": [{
+                "handleLabelPositionChange": 0
+            }],
+        "size": [{
+                "handleSizeChange": 0
+            }],
+        "hideLabels": [{
+                "handleHideLabelsChange": 0
+            }]
     }; }
 };
-TdsStepper.style = TdsStepperStyle0;
+TdsStepper.style = stepperCss();
 
 exports.tds_stepper = TdsStepper;

package/dist/cjs/tds-table-body-input-wrapper.cjs.entry.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.js');
-
-const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
+const tableBodyInputWrapperCss = () => `:host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}`;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableBodyInputWrapper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -98,6 +96,6 @@ const TdsTableBodyInputWrapper = class {
     }
     get host() { return index.getElement(this); }
 };
-TdsTableBodyInputWrapper.style = TdsTableBodyInputWrapperStyle0;
+TdsTableBodyInputWrapper.style = tableBodyInputWrapperCss();
 
 exports.tds_table_body_input_wrapper = TdsTableBodyInputWrapper;

package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js

@@ -1,30 +1,40 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
-
-const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
-const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
+const tableBodyRowExpandableCss = () => `:host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row--selected{background-color:var(--tds-table-body-row-background-selected)}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__row--selected:hover{background-color:var(--tds-table-body-row-background-selected-hover)}:host .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell-expand{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}`;
 
 const relevantTableProps = [
     'verticalDividers',
     'compactDesign',
     'noMinWidth',
     'modeVariant',
+    'multiselect',
 ];
 const TdsTableBodyRowExpandable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.internalTdsRowExpanded = index.createEvent(this, "internalTdsRowExpanded", 6);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
+        this.tdsSelect = index.createEvent(this, "tdsSelect", 6);
+        /** In case that automatic count of columns does not work, user can manually set this one.
+         *  Take in mind that expandable control is column too */
         this.colSpan = null;
+        /** ID for the table row. Randomly generated if not specified. */
         this.rowId = generateUniqueId.generateUniqueId();
-        this.expanded = undefined;
+        /** Controls the overflow behavior of the expandable row content */
         this.overflow = 'auto';
+        /** Sets isExpanded state to true or false internally */
+        /** Enables auto-collapse of other expandable rows when one row is expanded */
         this.autoCollapse = false;
+        /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Marks the row as selected, used for multiselect table. */
+        this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
+        this.disabled = false;
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -32,6 +42,7 @@ const TdsTableBodyRowExpandable = class {
         this.compactDesign = false;
         this.noMinWidth = false;
         this.modeVariant = null;
+        this.multiselect = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -97,7 +108,15 @@ const TdsTableBodyRowExpandable = class {
         else {
             const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
             if (header) {
-                this.columnsNumber = header.childElementCount + 1;
+                // Start with the number of data columns (header cells from slot)
+                let totalColumns = header.childElementCount;
+                // Add 1 for the expandable row control column
+                totalColumns += 1;
+                // Add 1 if multiselect is enabled (checkbox column)
+                if (this.multiselect) {
+                    totalColumns += 1;
+                }
+                this.columnsNumber = totalColumns;
             }
         }
     }
@@ -109,34 +128,46 @@ const TdsTableBodyRowExpandable = class {
         this.isExpanded = event.currentTarget.checked === true;
         this.sendValue();
     }
+    async handleCheckboxChange(event) {
+        var _a;
+        this.selected = event.detail.checked;
+        this.tdsSelect.emit({
+            tableId: this.tableId,
+            checked: this.selected,
+            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
+        });
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9747b45c606d94f6a79e35afd1e126e0d4940761', class: {
+        return (index.h(index.Host, { key: '53c6c5c66dd79503113385dd2b70026ea160fbf6', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, index.h("tr", { key: 'c3eb7c452c55cd64393d4d0820983a450b3c83de', id: `expandable-content-${this.rowId}`, class: {
+            } }, index.h("tr", { key: '6dc01208f1eb843e3e06c33f4e25913049957769', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, index.h("td", { key: 'a269a53c209ac33f82475c92408a824194feea0d', class: {
+                'tds-table__row--selected': this.selected,
+            }, part: "row" }, this.multiselect && (index.h("td", { key: '5a71e2f9bff42312b3cd9b2d45718c8344be06fe', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '9d7c37bec627e917ac93a2d5ebcd2eb3633b5208', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("td", { key: '5dfa199437435c4dc1c847f19a1dd2aa97803639', class: {
                 'tds-table__cell-expand': true,
-            } }, index.h("label", { key: '3a32f175d6f584850e442a279818bbdec8fbc00a', class: "tds-table__expand-control-container" }, index.h("input", { key: '073584fdeda9b0aa6dc6fa51030ee84c1478f3a4', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), index.h("span", { key: 'd3782b0bb66e7ac420c94eaa310a18ec97de34a8', class: "tds-expendable-row-icon" }, index.h("svg", { key: 'd25d24e492917ecea514da86a7e92238089bfe3c', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '1849dbf3a843f1f98a415a0017ad32951e0af4ff', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), index.h("slot", { key: 'c6af8843f62b83e6e96e3ea65087c276c0fb6e4f' })), index.h("tr", { key: '12d8127b203fd91f1b0a767b47aa752d84016aed', class: {
+            } }, index.h("label", { key: '010aef1164845e706485d3e5770c83225b6f0c70', class: "tds-table__expand-control-container" }, index.h("input", { key: 'c27e847d9b855cb7a016236347c8af908f991f12', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), index.h("span", { key: 'b0ba2cb10f89f3e81bad48f982d2f84d994d49c3', class: "tds-expendable-row-icon" }, index.h("svg", { key: 'a0d7f78a7a7da51d056ed22b6092e74715f506af', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '5dc808624d2fcff7b4b9dd83fc9ef2b2b00e2cea', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), index.h("slot", { key: 'c7e24da48dafb8ecd8d461a272897efa9723c634' })), index.h("tr", { key: '8b538e7208adf89505842965b969e0bcc393e1ab', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, index.h("td", { key: '9bd6d1292ede611479fe3f59239ca0ae1257fddc', class: {
+            }, part: "expand-row" }, index.h("td", { key: 'b8cc7780fd35b1eb46718d1670f89b2c28c5e0fd', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, index.h("div", { key: '6cfcd733564c5e6d1b55f6029e80e2b5713988d5', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, index.h("div", { key: '877805be7aa699870575767188b63bf9b5eb4ffe', style: {
                 overflow: this.overflow,
-            } }, index.h("slot", { key: 'fa74913d8c68ad2fbfc359fe9d67f27b9b254d28', name: "expand-row" }))))));
+            } }, index.h("slot", { key: '0fcc6e24283b7c8e755e42fc16a6adccdd0193b9', name: "expand-row" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "expanded": ["watchExpanded"]
+        "expanded": [{
+                "watchExpanded": 0
+            }]
     }; }
 };
-TdsTableBodyRowExpandable.style = TdsTableBodyRowExpandableStyle0;
+TdsTableBodyRowExpandable.style = tableBodyRowExpandableCss();
 
 exports.tds_table_body_row_expandable = TdsTableBodyRowExpandable;

package/dist/cjs/tds-table-body-row.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DGsdvbvx.js');
 
-const index = require('./index-ca8040ad.js');
-
-const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){border-bottom:1px solid var(--tds-table-divider-hover)}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
-const TdsTableBodyRowStyle0 = tableBodyRowCss;
+const tableBodyRowCss = () => `:host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){border-bottom:1px solid var(--tds-table-divider-hover)}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}`;
 
 const relevantTableProps = [
     'multiselect',
@@ -17,8 +14,11 @@ const TdsTableBodyRow = class {
         index.registerInstance(this, hostRef);
         this.tdsSelect = index.createEvent(this, "tdsSelect", 6);
         this.tdsClick = index.createEvent(this, "tdsClick", 6);
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -79,16 +79,16 @@ const TdsTableBodyRow = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '94bac5b3613998d805d62da4ce0ca9480e337fbc', tabindex: this.clickable ? '0' : null, class: {
+        return (index.h(index.Host, { key: 'de0e413cf92011d5b652d19512dd58c243fb40f2', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (index.h("td", { key: 'cb823140e532475537b7f7e78ae667173fa49259', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'f4727dca32c80f8c0ec36995f0ac072fc7af1106', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '33046cf6051498b6b1b314f8d7dd380b4c2309d0' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (index.h("td", { key: '23fb993da5cac2a419719723d7a259460b179f55', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'eab391b07c02f9fa913022fc9c8ebef0dab16ce8', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '5cd67b73cc428535ede2cb934d6b3dc36630e36d' })));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableBodyRow.style = TdsTableBodyRowStyle0;
+TdsTableBodyRow.style = tableBodyRowCss();
 
 exports.tds_table_body_row = TdsTableBodyRow;