@scania/tegel 1.4.0 → 1.6.0

package/dist/components/tds-spinner.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 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 {
     constructor() {
@@ -10,9 +11,9 @@ const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        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}` }))));
     }
-    static get style() { return spinnerCss; }
+    static get style() { return TdsSpinnerStyle0; }
 }, [0, "tds-spinner", {
         "size": [1],
         "variant": [1]

package/dist/components/tds-step.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './icon.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 TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -43,10 +44,10 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends HTMLEle
         }
     }
     render() {
-        return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+        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" }))))));
     }
     get el() { return this; }
-    static get style() { return stepCss; }
+    static get style() { return TdsStepStyle0; }
 }, [1, "tds-step", {
         "index": [1],
         "state": [1],

package/dist/components/tds-stepper.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as generateUniqueId } from './generateUniqueId.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 {
     constructor() {
@@ -51,7 +52,7 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         });
     }
     render() {
-        return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+        return (h(Host, { key: 'dcc6fc6be2e37bc4dcd4f0ab5dbe643ae26a1cbb' }, h("div", { key: '030eec1bc0b3075f7158f6936faad30c33272e02', role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'e4460b2a26a98cad97915059e2c4628a0e91a97e' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -60,7 +61,7 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         "size": ["handleSizeChange"],
         "hideLabels": ["handleHideLabelsChange"]
     }; }
-    static get style() { return stepperCss; }
+    static get style() { return TdsStepperStyle0; }
 }, [1, "tds-stepper", {
         "orientation": [1],
         "labelPosition": [1, "label-position"],

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 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: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 .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;
 
 const relevantTableProps = [
     'verticalDividers',
@@ -60,15 +61,15 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
         this.sendValue();
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '9626f70d55237e1329fc2e0f5df22528a72a9f0b', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { class: "tds-table__row" }, h("td", { class: "tds-table__cell tds-table__cell--expand" }, h("label", { class: "tds-table__expand-control-container" }, h("input", { class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { class: "tds-expendable-row-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "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", null)), h("tr", { class: "tds-table__row-expand" }, h("td", { class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { name: "expand-row" })))));
+            } }, h("tr", { key: 'ae5d76d08d0cd5e7c20d42bed127848b9fb73283', class: "tds-table__row" }, h("td", { key: 'd2b87e039627fa91c093ce11a252f813687f3c41', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'e5b5d74c7f65aa4503127a81a7e305a513ef2e8b', class: "tds-table__expand-control-container" }, h("input", { key: '3d574c291be5a4b283496b51de6116e86cf2c753', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'f8560da1bee34be6a79d22176c7228645d6c7a6a', class: "tds-expendable-row-icon" }, h("svg", { key: '5ed6f50b7a6b7a7b96a366439411db3f9f915041', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '9e97250e72daaa53b974235949e3a6b06009d553', "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: '85e65109691af6470c407f737e80404c0aa6292a' })), h("tr", { key: '54c52a50db17b76cbeed3d9675b8dfd350d7fdd5', class: "tds-table__row-expand" }, h("td", { key: '6876e76c7e0c81a12d77a0f4d1375a778df40ff8', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: '2857aa53b2360769bea65f4263a59de799c7d945', name: "expand-row" })))));
     }
     get host() { return this; }
-    static get style() { return tableBodyRowExpandableCss; }
+    static get style() { return TdsTableBodyRowExpandableStyle0; }
 }, [1, "tds-table-body-row-expandable", {
         "colSpan": [2, "col-span"],
         "isExpanded": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './checkbox.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;
 
 const relevantTableProps = [
     'multiselect',
@@ -15,6 +16,7 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
         this.__attachShadow();
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.selected = false;
+        this.disabled = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
         this.verticalDividers = false;
@@ -52,17 +54,18 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
         });
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '4d4328aa863f838b14a43d98fe356a39fd497860', 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 }))), h("slot", null)));
+            } }, 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' })));
     }
     get host() { return this; }
-    static get style() { return tableBodyRowCss; }
+    static get style() { return TdsTableBodyRowStyle0; }
 }, [1, "tds-table-body-row", {
         "selected": [516],
+        "disabled": [516],
         "multiselect": [32],
         "mainCheckBoxStatus": [32],
         "verticalDividers": [32],

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 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 {
@@ -57,10 +58,10 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         }
     }
     render() {
-        return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, h("slot", null)));
+        return (h(Host, { key: '1b8be2776860786f9a3f82f05bbdfc0205fcc5d1', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: '6ec26061a4861faec740d2ae2b706d533dabfa3f' })));
     }
     get host() { return this; }
-    static get style() { return tableBodyCss; }
+    static get style() { return TdsTableBodyStyle0; }
 }, [4, "tds-table-body", {
         "multiselect": [32],
         "enablePaginationTableBody": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.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;
 
 const relevantTableProps = ['compactDesign'];
 function removeShakeAnimation(e) {
@@ -98,10 +99,10 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         this.storeLastCorrectValue(this.paginationValue);
     }
     render() {
-        return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { 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: '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" })))))))));
     }
     get host() { return this; }
-    static get style() { return tableFooterCss; }
+    static get style() { return TdsTableFooterStyle0; }
 }, [1, "tds-table-footer", {
         "pagination": [516],
         "paginationValue": [1538, "pagination-value"],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './checkbox.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;
 
 const relevantTableProps = [
     'multiselect',
@@ -18,6 +19,7 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         this.tdsSelectAll = createEvent(this, "tdsSelectAll", 6);
         this.allSelected = false;
         this.selected = undefined;
+        this.disabled = false;
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -86,17 +88,18 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         });
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '53981e80f911cd21366edac319ae313723ab4d88', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", null, 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, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
+            } }, 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' }))));
     }
     get host() { return this; }
-    static get style() { return tableHeaderCss; }
+    static get style() { return TdsTableHeaderStyle0; }
 }, [1, "tds-table-header", {
         "allSelected": [1540, "all-selected"],
         "selected": [1540],
+        "disabled": [1540],
         "indeterminate": [4],
         "multiselect": [32],
         "expandableRows": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.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;
 
 const relevantTableProps = [
     'compactDesign',
@@ -59,10 +60,10 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         }
     }
     render() {
-        return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { 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", { name: "end" })))));
+        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" })))));
     }
     get host() { return this; }
-    static get style() { return tableToolbarCss; }
+    static get style() { return TdsTableToolbarStyle0; }
 }, [1, "tds-table-toolbar", {
         "tableTitle": [513, "table-title"],
         "filter": [516],

package/dist/components/tds-table.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as generateUniqueId } from './generateUniqueId.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 {
     constructor() {
@@ -66,17 +67,17 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends HTMLE
         this.emitInternalTdsPropChange('modeVariant', newValue);
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'e90429bc887c2a3a24eaf3acf0bba7748fd291ed', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { class: {
+            } }, h("table", { key: '0ab17fb64542a59745bf6b5a8dee0fc365adecf3', class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
                 'tds-table--responsive': this.responsive,
-            } }, h("slot", null))));
+            } }, h("slot", { key: '855c9d02a5564e5ac5cba37c92b87e19e6fba919' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -87,7 +88,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends HTMLE
         "noMinWidth": ["noMinWidthChanged"],
         "modeVariant": ["modeVariantChanged"]
     }; }
-    static get style() { return tableCss; }
+    static get style() { return TdsTableStyle0; }
 }, [1, "tds-table", {
         "verticalDividers": [516, "vertical-dividers"],
         "compactDesign": [516, "compact-design"],

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

@@ -3,6 +3,7 @@ import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './icon.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:18px;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 {
     constructor() {
@@ -15,6 +16,8 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         this.type = 'text';
         this.labelPosition = 'no-label';
         this.label = '';
+        this.min = undefined;
+        this.max = undefined;
         this.helper = undefined;
         this.placeholder = '';
         this.value = '';
@@ -52,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", { class: `
+        return (h("div", { key: '10f02c5fd7d8a5a340c193436e92686164f65277', class: `
         ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
                 ? 'form-text-field text-field-focus'
@@ -67,7 +70,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         ${this.size === 'md' ? 'form-text-field-md' : ''}
         ${this.size === 'sm' ? 'form-text-field-sm' : ''}
         ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { key: 'e0f9dda3a9efb72f61e419fba8889d91f859674b', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { key: '3edab2913fcfd3a6d9bde99648afb2a62ee391ea', class: "text-field-input-container" }, h("input", { key: '1abb6c38e8cfcb4557d957b055087c46a30f035b', ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -75,14 +78,16 @@ 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", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { 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))))));
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { key: '021c1a06221e989477fa554ad223238d714bd28d', class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { key: '9246b6f25d37f5961906ac610bb0471bfb2f4ac0', class: "text-field-icon__readonly" }, h("tds-icon", { key: '2b35b53f5e62493d0391d43a5a104c7da44680c5', name: "edit_inactive", size: "20px" })), h("span", { key: 'b53594f386def37d0411214a94ddc77d8966a89d', 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))))));
     }
     get host() { return this; }
-    static get style() { return textFieldCss; }
+    static get style() { return TdsTextFieldStyle0; }
 }, [6, "tds-text-field", {
         "type": [513],
         "labelPosition": [1, "label-position"],
         "label": [1],
+        "min": [8],
+        "max": [8],
         "helper": [1],
         "placeholder": [1],
         "value": [513],

package/dist/components/tds-textarea.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './icon.js';
 
 const textareaCss = ".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:\"\";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:focus::placeholder{color:var(--tds-textarea-placeholder-focus-color)}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea:disabled~.textfield-label-inside.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder-focus-color)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea{pointer-events:none}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea:hover~.textarea-icon__readonly-label.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textfield-input.sc-tds-textarea{padding-right:54px;background-color:transparent}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}";
+const TdsTextareaStyle0 = textareaCss;
 
 const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends HTMLElement {
     constructor() {
@@ -48,7 +49,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
     }
     render() {
         var _a;
-        return (h("div", { class: `
+        return (h("div", { key: 'fe8dc68fbf05efeb130e0c181159eae6cff74c03', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -58,7 +59,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { class: "textarea-wrapper" }, h("textarea", { class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { key: '91c7397794a076d825f3eff54a15667a5d39597c', class: "textarea-wrapper" }, h("textarea", { key: '44f7fadbbf81ad05b9ac43b6f397fabf581ac057', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -66,9 +67,9 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("tds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: 'cf2e97ae7e208467029b104b162bc7804e0d44f8', class: "textarea-resizer-icon" }, h("svg", { key: '0f9dbf84245317aefae29073a7f5762365253051', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '22301b51387084acd9a8787ec056f2cf8bb52b46', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '34a6785de8d8d8c79d43b02df76589cb2af9667c', class: "textarea-icon__readonly" }, h("tds-icon", { key: '640471367ddabc3c23ef51729167942bd97f113a', name: "edit_inactive" })), h("span", { key: 'c52b90439d07733301316af624d52b464bcf77b9', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: '7168cbe9559ce4d7b3e0ae2796da02f23240d2a4', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
-    static get style() { return textareaCss; }
+    static get style() { return TdsTextareaStyle0; }
 }, [2, "tds-textarea", {
         "label": [1],
         "name": [1],

package/dist/components/tds-toast.js

@@ -4,6 +4,7 @@ import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const toastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{margin-top:12px}:host slot[name=actions]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";
+const TdsToastStyle0 = toastCss;
 
 const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLElement {
     constructor() {
@@ -60,17 +61,17 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'ef3bf94989a3966dbceae7266b9defd5f3e94b97', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { class: `
+            } }, h("div", { key: '037b0d3313fbb663c147c195aef001fa6c0c0b5f', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { onClick: () => {
+            ${this.variant}` }, h("tds-icon", { key: 'd69688a9dff7ec78c7bdc3923b5efb793034497e', name: this.getIconName(), size: "20px" }), h("div", { key: 'cee5e70c6af0b0fb2f51131a5f000ef849456c6f', class: `content` }, h("div", { key: '18855f70d0db55bd8aea5c7c82cc4a159cfb10a0', class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { key: 'e95faf92ad8cfc5262aafbf1a5ace77a96f87e20', onClick: () => {
                 this.handleClose();
-            }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+            }, class: `close` }, h("tds-icon", { key: 'e1ce21f0ef7fb6862f560f153c515296c83d4f57', name: "cross", size: "20px" })))));
     }
     get host() { return this; }
-    static get style() { return toastCss; }
+    static get style() { return TdsToastStyle0; }
 }, [1, "tds-toast", {
         "toastId": [1, "toast-id"],
         "header": [1],

package/dist/components/tds-toggle.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { g as generateUniqueId } from './generateUniqueId.js';
 
 const toggleCss = ".tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus{outline:none}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus::before{background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}";
+const TdsToggleStyle0 = toggleCss;
 
 const TdsToggle$1 = /*@__PURE__*/ proxyCustomElement(class TdsToggle extends HTMLElement {
     constructor() {
@@ -32,10 +33,10 @@ const TdsToggle$1 = /*@__PURE__*/ proxyCustomElement(class TdsToggle extends HTM
         };
     }
     render() {
-        return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+        return (h("div", { key: 'c5ef82c0a9c7ac3e32dea737d269dffe6758a158', class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: '6958177bc218b15c455ea74d7978a854d963b9bd', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: 'fbf7a151180e872b2db76edc8d8024325270f376', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: '77a95fda7a452e5cd05c84845a33692cf0dd2589', name: "label" }))));
     }
     get host() { return this; }
-    static get style() { return toggleCss; }
+    static get style() { return TdsToggleStyle0; }
 }, [6, "tds-toggle", {
         "checked": [516],
         "required": [4],

package/dist/components/tds-tooltip.js

@@ -3,6 +3,7 @@ import { i as inheritAttributes } from './inheritAttributes.js';
 import { d as defineCustomElement$2 } from './popover-core.js';
 
 const tooltipCss = ".sc-tds-tooltip:root,.tds-mode-light.sc-tds-tooltip{--tds-tooltip-background:var(--tds-grey-800);--tds-tooltip-color:var(--tds-white)}.tds-mode-dark.sc-tds-tooltip{--tds-tooltip-background:var(--tds-grey-200);--tds-tooltip-color:var(--tds-grey-958)}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
+const TdsTooltipStyle0 = tooltipCss;
 
 const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends HTMLElement {
     constructor() {
@@ -47,7 +48,7 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     }
     render() {
         var _a;
-        return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        return (h(Host, { key: 'bcc66dd0579d47ddc7dfe6f3cd37e95aac6efc9f' }, h("tds-popover-core", Object.assign({ key: '8cb113ad567f52b39979bda4ceff545973e163f7' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -56,10 +57,10 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", null))));
+            } }), this.text, h("slot", { key: 'd15a1e1164cc747cd336db2ce109c0cd782fbc68' }))));
     }
     get host() { return this; }
-    static get style() { return tooltipCss; }
+    static get style() { return TdsTooltipStyle0; }
 }, [6, "tds-tooltip", {
         "text": [1],
         "selector": [1],