@scania/tegel 1.8.1 → 1.9.0

package/dist/components/tds-slider.js

@@ -1,11 +1,11 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { g as generateUniqueId } from './generateUniqueId.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-604b1ae6.js';
+import { g as generateUniqueId } from './p-11648030.js';
+import { d as defineCustomElement$2 } from './p-f64a898a.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-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__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-grey-700);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 input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.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)}.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}.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;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 .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;opacity:0.08}.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;opacity:0.16 !important}.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}.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.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.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)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-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);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-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);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: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)}.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)}";
 const TdsSliderStyle0 = sliderCss;
 
-const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends HTMLElement {
+const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -291,24 +291,24 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends HTM
         this.updateTrack();
     }
     render() {
-        return (h("div", { key: 'bf3ca081d01c6eac5907fe1ebef8ae5f14fa87da', class: {
+        return (h("div", { key: '9c5bf62899d37963bb7b8fb625aaad698faea337', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '0fb204f882d1905461354f2b75ff4fc374ffa9c9', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '6ea9c5efc3a9d590c36b9b9f40bbd2401b9c2dfc', class: {
+            } }, h("input", { key: '941a70b4e3a7784425e4f93f9b350eec6c68be55', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: 'feeff66bbe79feae4e5f920d98c22d8e89903769', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: '738c0dcf07e3d99a49443f1d501ccaa278653a8d', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { key: '999c32a0970e2ec7ab2a601b168ddcf5a0a74bcc', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '57ecf12b107bf4f4b0b23134ad2820a01063e624', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '45fa4b4faad7fd9c72fc7ca3b4df3880a7ebff7f', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'c7e54be509f4b3701583f571f21ba12eff5af70b', class: "tds-slider__input-values" }, h("div", { key: 'f6a0bb7b63752502c6c1b5dae98e36435cd723c0', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '0575cbae374f6c3b0857a5853f614b542d2458c6', class: "tds-slider__controls" }, h("div", { key: '9137108aabe821b5dc186d597662a7ef96da26cd', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '02da8328036a52838d1dee14c90a1609cbbddaa0', name: "minus", size: "16px" })))), h("div", { key: '510859a373a25f9a93f29b8919f19c9a5bc67a53', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '6c61bb70796d907a26239e9fd9ed80af3163a460', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'a6e0b03f496e4f139d4553773ac529f619bad01b', 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: 'b11e297631af75b8b6e30a03811eaa79ba302e75', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'd12fc549e7e503865fd3a1505c4a51476d769908', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '23e5671900b2ec63f2b2012cde9543155ed25d7a', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'ecc291e9e4aeb3c813f866e3a58615184ef21c35', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'c431b6fbe7de7932c4cbabb30dac6ebff77851ff', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '403b0ea3f2ca18469a3e8ef32a2a8468d1a2e82c', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: 'a1727a0e71f38901a9c084d986f8d0a71a6e17c5', class: "tds-slider__value" }, this.value, h("svg", { key: 'f44b64e9269f290526c49e53c4ea083ed60025d0', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '828e5f5377a9ba3c41f613f52505fdf6b329fff1', 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: 'c2dc9e400794783ffdf9acaf1cadc97a2ea6e894', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'a3a24d547e4b0d6161876da8be41884cedbae4d8', class: "tds-slider__input-values" }, h("div", { key: '304561b07e1e691b391c1f779ecfba1ddf9d1c51', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'a6e3cae9e496701fc7f5eff06eb4a81842c76ecd', class: "tds-slider__input-field-wrapper" }, h("input", { key: '62013aa85bb71ca8de6d2478cb8c2381afd3336d', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '9ac838af89b6bc5ad32d0fbbe3d2971838111c5f', class: "tds-slider__controls" }, h("div", { key: '23cdd6031ce48382c0362ec6f26e290bc8f6fd92', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'c623619b0b4b48de2fb480ec767cef641c429793', name: "plus", size: "16px" })))))));
     }
     static get watchers() { return {
         "value": ["handleValueUpdate"]

package/dist/components/tds-spinner.js

@@ -1,9 +1,9 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './p-604b1ae6.js';
 
 const spinnerCss = ":root{--tds-spinner-background:var(--tds-blue-400);--tds-spinner-background-inverted:var(--tds-white);--tds-spinner-speed:1.8s;--tds-spinner-speed-lg:2s;--tds-spinner-radius-xs:8px;--tds-spinner-radius-sm:12px;--tds-spinner-radius-md:26px;--tds-spinner-radius-lg:42px;--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width-xs:3px;--tds-spinner-stroke-width-sm:4px;--tds-spinner-stroke-width-md:6px;--tds-spinner-stroke-width-lg:8px;--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--tds-spinner-radius) * 2);height:calc(var(--tds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--tds-spinner-radius:var(--tds-spinner-radius-xs);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-xs);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-sm{--tds-spinner-radius:var(--tds-spinner-radius-sm);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-sm);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-md{--tds-spinner-radius:var(--tds-spinner-radius-md);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-md);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-lg{--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--tds-spinner-animation-speed:var(--tds-spinner-speed-lg)}.tds-spinner-circle{cx:var(--tds-spinner-radius);cy:var(--tds-spinner-radius);r:calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);fill:none;--tds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--tds-spinner-radius));stroke-dasharray:var(--tds-spinner-stroke-dash);stroke-width:var(--tds-spinner-stroke-width);animation:dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--tds-spinner-background)}.tds-spinner-circle-inverted{stroke:var(--tds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--tds-spinner-stroke-dash))}to{stroke-dashoffset:var(--tds-spinner-stroke-dash)}}";
 const TdsSpinnerStyle0 = spinnerCss;
 
-const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends HTMLElement {
+const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -11,7 +11,7 @@ const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: '152350d165fc9410c715b967c928f40487a0f636', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '3b02495d7d68735181e0cce975d6717d0d75bd89', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'dd68d0e6b90d2a32752d4499145f766d3ada79bc', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: '13dcb29d2a392299bb705f062544dca1226e4ae7', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '3295c24006f13219f9d4dadb01194cc97a1259d3', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ba6939e6ae556aa57b5a20b40f23922207a33b87', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get style() { return TdsSpinnerStyle0; }
 }, [0, "tds-spinner", {

package/dist/components/tds-step.js

@@ -1,7 +1,7 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-604b1ae6.js';
+import { d as defineCustomElement$2 } from './p-f64a898a.js';
 
-const stepCss = ":host{position:relative;display:table-cell}:host tds-icon{line-height:1}: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.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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 .content-container{height:24px;min-width:24px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}: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);opacity:var(--tds-stepper-label-text-opacity-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) [role=listitem].sm::after,:host(.last) [role=listitem].lg::after{display:none}:host(.last) [role=listitem].sm.vertical::before{display:none}:host(.first) [role=listitem].sm::before,:host(.first) [role=listitem].lg::before{display:none}";
+const stepCss = ":host{position:relative;display:table-cell}:host tds-icon{line-height:1}: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.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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 .content-container{height:24px;min-width:24px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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-icon-step-background-after);opacity:0.16;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);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}: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);opacity:var(--tds-stepper-label-text-opacity-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 propToStateMap = {
@@ -10,7 +10,7 @@ const propToStateMap = {
     size: 'size',
     hideLabels: 'hideLabels',
 };
-const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends HTMLElement {
+const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -44,7 +44,7 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '1a28ad519601ffc63918ca1ed585c68c7fe0a99a' }, h("div", { key: 'dd3afe46dfd76674833be41e9eaa98c400769081', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { key: '5d4534ca241ddf43653ffb97c9784127bd6752dd', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+        return (h(Host, { key: '25272154fa202dc80faadec2f69bb76c7cfb23ba' }, h("div", { key: 'b95ec3ae0c8842cce29a26a00b77e9d63ddf3e7c', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { key: '5bc8c4ccdf3af7371ea49018d2cd9e1081f7055d', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { key: '971af264f2f27ddc0d42c9d05e9ae2d641d88bac', class: `label ${this.size} ${this.state}` }, h("slot", { key: 'dec79d74317c78f72230e4983ac7c672d2560e4b', name: "label" }))))));
     }
     get el() { return this; }
     static get style() { return TdsStepStyle0; }

package/dist/components/tds-stepper.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as generateUniqueId } from './generateUniqueId.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { g as generateUniqueId } from './p-11648030.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 TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends HTMLElement {
+const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -17,8 +17,6 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         this.stepperId = generateUniqueId();
     }
     componentWillLoad() {
-        this.host.children[0].classList.add('first');
-        this.host.children[this.host.children.length - 1].classList.add('last');
         if (this.orientation === 'vertical') {
             this.labelPosition = 'aside';
         }
@@ -52,7 +50,7 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         });
     }
     render() {
-        return (h(Host, { key: 'dcc6fc6be2e37bc4dcd4f0ab5dbe643ae26a1cbb' }, h("div", { key: '030eec1bc0b3075f7158f6936faad30c33272e02', role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'e4460b2a26a98cad97915059e2c4628a0e91a97e' }))));
+        return (h(Host, { key: '1cee7a313771fe80c13c7b2ca72c069b47d77902' }, h("div", { key: '5c7ec9b395c3133fae25e4fd0de5912195246438', role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'bf6d7efe8e633c11fbd9d63e5dbfa6b56c853615' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/tds-table-body-row-expandable.js

@@ -1,4 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { g as generateUniqueId } from './p-11648030.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-blue-400);outline-offset:-2px}: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{padding:16px 16px 16px 66px;color:var(--tds-table-color)}: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;
@@ -9,13 +10,16 @@ const relevantTableProps = [
     'noMinWidth',
     'modeVariant',
 ];
-const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRowExpandable extends HTMLElement {
+const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRowExpandable extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.internalTdsRowExpanded = createEvent(this, "internalTdsRowExpanded", 6);
+        this.tdsChange = createEvent(this, "tdsChange", 6);
         this.colSpan = null;
+        this.rowId = generateUniqueId();
+        this.expanded = undefined;
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -36,7 +40,27 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
             });
         }
     }
+    watchExpanded(newValue) {
+        if (newValue !== this.isExpanded) {
+            this.isExpanded = newValue;
+            this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+        }
+    }
+    /** method to expand table row */
+    async expand() {
+        this.isExpanded = true;
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+    }
+    /** method to collapse table row */
+    async collapse() {
+        this.isExpanded = false;
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+    }
     connectedCallback() {
+        /* if user did set a prop we use that as default behaviour */
+        if (this.expanded !== undefined) {
+            this.isExpanded = this.expanded;
+        }
         this.tableEl = this.host.closest('tds-table');
         this.tableId = this.tableEl.tableId;
     }
@@ -55,37 +79,47 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
     }
     sendValue() {
         this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
     }
     onChangeHandler(event) {
         this.isExpanded = event.currentTarget.checked === true;
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '9626f70d55237e1329fc2e0f5df22528a72a9f0b', class: {
+        return (h(Host, { key: '74b02f93d3827e994ec32d6936861ca272cf6091', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'c9cf04c118f2b673a09959dece24b06d21cdf640', class: {
+            } }, h("tr", { key: '8c9b941b05eba4e785bd3d0d3b2fcc102e582e3b', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            } }, h("td", { key: '6b16a052a399b5d2ea7a4453552eb1e71f7a2041', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'd9cc4607a1444127cefe58c6fbe433a410d51e91', class: "tds-table__expand-control-container" }, h("input", { key: 'dcf0a28c1cea3003cdf22d2c183c604a944e5e61', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'a28d1acd69d6c760790c7cd30325053711d27bc9', class: "tds-expendable-row-icon" }, h("svg", { key: '856b07328c10897097aba2fae76b659015be91dd', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '3dcbb08f11f7e83d5717364cc72d90f1fa973404', "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" }))))), h("slot", { key: '4121dfa2d04cc947261c14cb5745423eea6f042d' })), h("tr", { key: '6665c1c224fcf276afa56ff8b5433054c99bae84', class: {
+            } }, h("td", { key: '6ca2b7232372c6773b20cbebcf57c2dc22873b8e', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '37831f286353d52f811edec384f2e8e9da65cd50', class: "tds-table__expand-control-container" }, h("input", { key: 'ecd7ac5041cba257b00485e44e9b2867fdd563a6', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '2eb29d27eea8ff2ee7a6afe74a70695b03aa141d', class: "tds-expendable-row-icon" }, h("svg", { key: '88731d236df24d952130566dfa395d3e161de82e', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '81a677c1f6a0b15145b879748cc4d9d6a93821d4', "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" }))))), h("slot", { key: 'deffa2b70b546db18812e4288e07fe6f8ac0d42d' })), h("tr", { key: '1515f8da52b7fec720a788ae9c2127d8a9a69fce', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            } }, h("td", { key: '359babd8f869aa9f98c88968f0b7f69952910129', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'bf5c3571bb6bc09afae0a01872e4c2922827da48', name: "expand-row" })))));
+            } }, h("td", { key: 'e16011d9e155b003d011de4a73518a81414f2e91', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'f60bf938090436423632bf93076bd41ee8def3ce', name: "expand-row" })))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "expanded": ["watchExpanded"]
+    }; }
     static get style() { return TdsTableBodyRowExpandableStyle0; }
 }, [1, "tds-table-body-row-expandable", {
         "colSpan": [2, "col-span"],
+        "rowId": [513, "row-id"],
+        "expanded": [516],
         "isExpanded": [32],
         "tableId": [32],
         "columnsNumber": [32],
         "verticalDividers": [32],
         "compactDesign": [32],
         "noMinWidth": [32],
-        "modeVariant": [32]
-    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
+        "modeVariant": [32],
+        "expand": [64],
+        "collapse": [64]
+    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]], {
+        "expanded": ["watchExpanded"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tds-table-body-row.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './checkbox.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { d as defineCustomElement$2 } from './p-2d20f437.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){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)}";
 const TdsTableBodyRowStyle0 = tableBodyRowCss;
@@ -9,7 +9,7 @@ const relevantTableProps = [
     'verticalDividers',
     'compactDesign',
 ];
-const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends HTMLElement {
+const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -54,12 +54,12 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
         });
     }
     render() {
-        return (h(Host, { key: '4d4328aa863f838b14a43d98fe356a39fd497860', class: {
+        return (h(Host, { key: '2b99a5336354cb5e7e2e7ef9c81bac76a55c6895', class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, this.multiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: 'e6c0cab232ece7b5ff14f3283478de5b36f405c7' })));
+            } }, this.multiselect && (h("td", { key: '049e91ea474a539b6fbe344db4aed9de42297f3d', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2af9307e3143db71cae028c1cc2116382b20f4c9', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '2eff0d398eb53934ca0b152d25422a5febbbffbb' })));
     }
     get host() { return this; }
     static get style() { return TdsTableBodyRowStyle0; }

package/dist/components/tds-table-body.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './p-604b1ae6.js';
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";
 const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = ['multiselect', 'expandableRows'];
-const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends HTMLElement {
+const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -58,7 +58,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         }
     }
     render() {
-        return (h(Host, { key: '1b8be2776860786f9a3f82f05bbdfc0205fcc5d1', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: '6ec26061a4861faec740d2ae2b706d533dabfa3f' })));
+        return (h(Host, { key: '4b70d0bd4efabb2b82878ebc6ed7098576388b86', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: '7c4324c634680b90c37e9e1042fe0f93704b9d0b' })));
     }
     get host() { return this; }
     static get style() { return TdsTableBodyStyle0; }

package/dist/components/tds-table-footer.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { d as defineCustomElement$2 } from './p-f64a898a.js';
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 16px}:host .tds-table__footer-cell .tds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-left:16px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:20px;width:20px;fill:var(--tds-table-color)}:host(.tds-table--compact){height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:24px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
 const TdsTableFooterStyle0 = tableFooterCss;
@@ -8,7 +8,7 @@ const relevantTableProps = ['compactDesign'];
 function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
 }
-const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter extends HTMLElement {
+const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -99,7 +99,7 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         this.storeLastCorrectValue(this.paginationValue);
     }
     render() {
-        return (h(Host, { key: 'ae4ce3e329813100d2fa669bf9278cc44329f581', class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { key: '833409674137c346a5e0aa68a55bf1aed21762e9', class: "tds-table__footer-row" }, h("td", { key: 'f8570501ea5279dc1ed65c71fe37ac173b28e0cb', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { class: "tds-table__footer-text" }, "of ", h("span", null, this.pages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
+        return (h(Host, { key: '8a128e443420d841b0e56303d4c533ced7fef56c', class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { key: '6315f2fdf35c670a702cb7a298b29d53a636a639', class: "tds-table__footer-row" }, h("td", { key: '6d179522f5e379c8899d545c1cae1ebf868dc9dc', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'd6b8f037c8a0b4ec05448a64ea3edc11b253289b', class: "tds-table__pagination" }, h("div", { key: '422d83996b22557dc9d31ab23e82b040a3106f62', class: "tds-table__row-selector" }), h("div", { key: 'a978da12ff6763049d9e75e9dea8d85e2786af07', class: "tds-table__page-selector" }, h("input", { key: '343d34c4c7edebd6a797e4bb5c59e20ea5b43fad', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '38d4a5c1897adeda83ea8faec711a4e32c1ef040', class: "tds-table__footer-text" }, "of ", h("span", { key: '0769b3a30cfe35dcfb13834625b60825ae087a60' }, this.pages), " pages"), h("button", { key: 'fa8af3c295fdbbeb5d965abd76ec71a7564f0a50', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '0011853f15bc9f0880a2bdf98d20952df2f49ba8', name: "chevron_left", size: "20px" })), h("button", { key: '36c2c94ec609f6e6d30dfd9fc698709f65f24a98', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'e3affadd067d44e1f106be7a9334ffe14dae0f1f', name: "chevron_right", size: "20px" })))))))));
     }
     get host() { return this; }
     static get style() { return TdsTableFooterStyle0; }

package/dist/components/tds-table-header.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './checkbox.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { d as defineCustomElement$2 } from './p-2d20f437.js';
 
 const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}: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:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
 const TdsTableHeaderStyle0 = tableHeaderCss;
@@ -11,7 +11,7 @@ const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
 ];
-const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderRow extends HTMLElement {
+const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderRow extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -88,11 +88,11 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         });
     }
     render() {
-        return (h(Host, { key: '53981e80f911cd21366edac319ae313723ab4d88', class: {
+        return (h(Host, { key: '5f212887d3d35e32240e9745d62685b7024100e1', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '122f5cb4bd9d70b8a5d6ebef26fb2cce6848b4f9' }, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '355e7a0942a0c3764e021093aff4bb9010f0d030' }))));
+            } }, h("tr", { key: '1a40af0dddfb627c39ae5df47aedc80eb1006f04' }, this.multiselect && (h("th", { key: '17d16e6bf8964b30e0ce93a76c436112ac0a6540', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '98f282baf5a0b4a929ad04c850319e04955090a0', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d8115deb1403df121309d32a166ccc6eac685d5', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7cc0e1c0d3d7ec9f4bef917a5b8346cca8bc58ae', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f7aa3bd3acdd69f1f2a20d3525ad5901f0ac239' }))));
     }
     get host() { return this; }
     static get style() { return TdsTableHeaderStyle0; }

package/dist/components/tds-table-toolbar.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { d as defineCustomElement$2 } from './p-f64a898a.js';
 
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.tds-table--compact){height:56px}";
 const TdsTableToolbarStyle0 = tableToolbarCss;
@@ -9,7 +9,7 @@ const relevantTableProps = [
     'noMinWidth',
     'verticalDividers',
 ];
-const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends HTMLElement {
+const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -60,7 +60,7 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         }
     }
     render() {
-        return (h(Host, { key: '8da67bc90ca3b04449261ef63929959e7cb2dce8', class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { key: '2b5b7719b644bfa845fcf4d22f8bb975e0edef91', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd1447f81583ed926ff70b3f509092c49f3b9d03f', class: "tds-table__title" }, this.tableTitle), h("div", { key: '438cb445a8dc759db37396e505b14257aa03f337', class: "tds-table__actionbar" }, this.filter && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { key: '4906ceb0f3d87650e90499d50a040f7a92ad5a6a', name: "end" })))));
+        return (h(Host, { key: 'adcfcb7f8f70a870f9fb04a2285095e732626892', class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { key: '26061d9f0fcb71fa2933f7f1657fb2bdb12ead1a', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'dc482f239aeb319d9e97c0c751e66c9775320ba1', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'c7e915c2f9da44d94b8867c0126c28a4de034769', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '3c7d5adcf41620a88b8d0d53447b0ee090576e54', class: "tds-table__searchbar" }, h("input", { key: 'fee2bc1860c61b0dcefe821c3d0416e24ff6c2aa', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '0ff52f05dc15569b21bff731776c3fa59971c64c', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'a5c9c9d47fb1b56ac1e85feb404589c0ed30c194', name: "search", size: "20px" })))), h("slot", { key: '1a8c32e70f2c45f49e2c685b3877a5eb412ecc4e', name: "end" })))));
     }
     get host() { return this; }
     static get style() { return TdsTableToolbarStyle0; }

package/dist/components/tds-table.js

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as generateUniqueId } from './generateUniqueId.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-604b1ae6.js';
+import { g as generateUniqueId } from './p-11648030.js';
 
 const tableCss = ":host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}";
 const TdsTableStyle0 = tableCss;
 
-const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends HTMLElement {
+const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
     constructor() {
         super();
         this.__registerHost();

package/dist/components/tds-text-field.js

@@ -1,11 +1,11 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as hasSlot } from './hasSlot.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-604b1ae6.js';
+import { h as hasSlot } from './p-ae110fc2.js';
+import { d as defineCustomElement$2 } from './p-f64a898a.js';
 
 const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-lg.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-lg.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-md.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-md.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-sm.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-sm.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{pointer-events:none}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{padding-right:54px;background-color:transparent}.form-text-field-success.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.sc-tds-text-field .text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
 const TdsTextFieldStyle0 = textFieldCss;
 
-const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends HTMLElement {
+const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -55,7 +55,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '2b312cea422545b69a06408597cc8acdb2e1b571', class: {
+        return (h("div", { key: 'af93aac8fe99744a466af32645df1159f6517621', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -69,12 +69,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { key: '23c59920fa3c06b9677e06b1c8413b9938c731eb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'ceffe4d0d2cbc71f0261b8e3d61e18b24ba22b68', class: "text-field-label-outside" }, h("div", { key: '2084087df1a986ab9c41fb741fd00ff6e22bb572' }, this.label))), h("div", { key: '3077fb9808ee0b09cb28cb69b9f2bb34b7224eb0', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '6e234045ab96c5d29a1119c2a7c16e77205f466e', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { name: "prefix" }))), h("div", { key: 'aea27bc666bf486c46b9fe07bf0fb7290addf5ad', class: "text-field-input-container" }, h("input", { key: '6b2cb5c19fdac8280806cf70d0ebbc4aefc80e8a', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: '76df42ef5b886284b471cf77552b1d7473857f0c', name: "prefix" }))), h("div", { key: '03b3ee869ba507a9decd9c9b5af1fda9bc47c671', class: "text-field-input-container" }, h("input", { key: '47049115cff82c06d88a77792388f37ffedc5dbc', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -87,13 +87,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { key: 'd51f4eb1d1b8afeae3375d8111bcaf5f322e7382', class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '69deb0290018fd1649700266e706b0a55ed66b5e', class: "text-field-label-inside" }, this.label))), h("div", { key: '5cddf711727ef892849e3970a366854ce19fffc1', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'a169798c9699ebced30dd65660678358d8e63ac8', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { name: "suffix" }))), h("span", { key: 'ebf4dc9b5aba18087491a01d0619eea334dc0b93', class: "text-field-icon__readonly" }, h("tds-icon", { key: '0c346e4bc4835081b3cf85dcf09b641dec1f6127', name: "edit_inactive", size: "20px" })), h("span", { key: '637c5b8941df13c39b0eda219c775f552253b15e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: '4043d0ab130b9a0e7d2c0966300b997537bae53e', name: "suffix" }))), h("span", { key: 'ef9e4d55f310cbc8132e46f1e74f89a9fbc62ca9', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'a968990fc370038a3657c752720ae29905b8b115', name: "edit_inactive", size: "20px" })), h("span", { key: '7518767f23b8a424bdad9d3cc776c179bf745680', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '857ab4650416e7abb96637c4cb7a8bf5a6f7fbe5', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'bee202fccd49ba3cbe14a65d9e75b1d2a1e8d7a4', class: "text-field-helper-error-state" }, h("tds-icon", { key: '039457d06cccdf7a3a61b6b65952d2735df6aac3', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '92aa70e21712e92836ecd92b1d5faa2f31473f82', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '58559bb93ab041e096e6a6b383b6371cc49e40af', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     get host() { return this; }
     static get style() { return TdsTextFieldStyle0; }