@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

package/dist/components/{p-BiyghEA7.js → p-7e02ea3e.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { c as convertToString, a as convertArrayToStrings } from './p-CBZ6wC3m.js';
-import { g as generateUniqueId } from './p-Cn4f8w1e.js';
-import { d as defineCustomElement$1 } from './p-CPDv0bBc.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
+import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
+import { g as generateUniqueId } from './p-11648030.js';
+import { d as defineCustomElement$1 } from './p-edc838a0.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -51,14 +51,20 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
     if (!element.querySelector('input')) {
         input = element.ownerDocument.createElement('input');
         input.type = 'hidden';
+        if (additionalAttributes) {
+            additionalAttributes.forEach((attr) => input === null || input === void 0 ? void 0 : input.setAttribute(attr.key, attr.value));
+        }
         element.appendChild(input);
     }
-    input.disabled = disabled;
-    input.name = name;
-    input.value = value || '';
+    if (input) {
+        input.disabled = disabled;
+        input.name = name;
+        input.value = value || '';
+    }
 };
 
 const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
+const TdsDropdownStyle0 = dropdownCss;
 
 function hasValueChanged(newValue, currentValue) {
     if (newValue.length !== currentValue.length)
@@ -66,41 +72,14 @@ function hasValueChanged(newValue, currentValue) {
     return newValue.some((val) => !currentValue.includes(val));
 }
 const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
-        /** Sets the Dropdown in a disabled state */
-        this.disabled = false;
-        /** Mode variant of the component, based on current mode. */
-        this.modeVariant = null;
-        /** The direction the Dropdown should open, auto if not specified. */
-        this.openDirection = 'auto';
-        /** The size of the Dropdown. */
-        this.size = 'lg';
-        this.animation = 'slide';
-        /** Sets the Dropdown in an error state */
-        this.error = false;
-        /** Enables multiselect in the Dropdown. */
-        this.multiselect = false;
-        /** Enables filtration in the Dropdown. */
-        this.filter = false;
-        /** Normalizes input text for fuzzier search */
-        this.normalizeText = true;
-        /** Text that is displayed if filter is used and there are no options that matches the search.
-         * Setting it to an empty string disables message from showing up. */
-        this.noResultText = 'No result';
-        /** Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. */
-        this.value = null;
-        this.open = false;
-        this.selectedOptions = [];
-        this.filterQuery = '';
         this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
@@ -131,7 +110,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         };
         this.getSelectedChildrenLabels = () => {
             var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
+            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => { var _a; return (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(); });
         };
         this.getValue = () => {
             const labels = this.getSelectedChildrenLabels();
@@ -162,6 +141,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             return this.openDirection;
         };
         this.handleToggleOpen = () => {
+            var _a;
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
@@ -169,7 +149,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                         this.focusInputElement();
                     }
                     else {
-                        const button = this.host.shadowRoot.querySelector('button');
+                        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
                         if (button) {
                             button.focus();
                         }
@@ -197,7 +177,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }
             else {
                 this.filterResult = children.filter((element) => {
-                    if (!this.normalizeString(element.textContent)
+                    var _a;
+                    if (!this.normalizeString((_a = element === null || element === void 0 ? void 0 : element.textContent) !== null && _a !== void 0 ? _a : '')
                         .toLowerCase()
                         .includes(this.normalizeString(query).toLowerCase())) {
                         element.setAttribute('hidden', '');
@@ -244,6 +225,31 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 this.reset();
             }
         };
+        this.name = undefined;
+        this.disabled = false;
+        this.helper = undefined;
+        this.label = undefined;
+        this.labelPosition = undefined;
+        this.modeVariant = null;
+        this.openDirection = 'auto';
+        this.placeholder = undefined;
+        this.size = 'lg';
+        this.animation = 'slide';
+        this.error = false;
+        this.multiselect = false;
+        this.filter = false;
+        this.normalizeText = true;
+        this.noResultText = 'No result';
+        this.defaultValue = undefined;
+        this.value = null;
+        this.tdsAriaLabel = undefined;
+        this.open = false;
+        this.internalValue = undefined;
+        this.filterResult = undefined;
+        this.filterFocus = undefined;
+        this.internalDefaultValue = undefined;
+        this.selectedOptions = [];
+        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -361,10 +367,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             normalizedValue = [convertToString(value)];
         }
         this.updateDropdownStateFromUser(normalizedValue);
-        return this.getSelectedChildren().map((element) => ({
-            value: element.value,
-            label: element.textContent.trim(),
-        }));
+        return this.getSelectedChildren().map((element) => {
+            var _a;
+            return ({
+                value: element.value,
+                label: (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(),
+            });
+        });
     }
     async reset() {
         this.updateDropdownStateFromUser([]);
@@ -375,13 +384,14 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
+        var _a;
         if (this.filter) {
             // For filter mode, focus the input element
             this.focusInputElement();
         }
         else {
             // For non-filter mode, focus the button element
-            const button = this.host.shadowRoot.querySelector('button');
+            const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
             if (button) {
                 button.focus();
             }
@@ -429,7 +439,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         }
     }
     async onKeyDown(event) {
-        var _a;
+        var _a, _b;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -442,8 +452,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             const startingIndex = activeElement.nextElementSibling
                 ? children.findIndex((element) => element === activeElement.nextElementSibling)
                 : 0;
-            const elementIndex = findNextFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            if (children.length > 0) {
+                const elementIndex = findNextFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
         }
         else if (event.key === 'ArrowUp') {
             /* Get the index of the current focus index, if there is no
@@ -451,8 +464,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             const startingIndex = activeElement.nextElementSibling
                 ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
                 : 0;
-            const elementIndex = findPreviousFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            if (children.length > 0) {
+                const elementIndex = findPreviousFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
         }
         else if (event.key === 'Escape') {
             this.open = false;
@@ -461,7 +477,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                const button = this.host.shadowRoot.querySelector('button');
+                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
                 button === null || button === void 0 ? void 0 : button.focus();
             }
         }
@@ -547,9 +563,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
+        return (h(Host, { key: '20b2b8e16e86f66e735870c142caae96094e8a67', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '151a7528da2411eb549ba55b00234609524d21ef', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'b74809f85659d8b59fda7e26cc6ce7d25c1683c9', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -593,22 +609,23 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
-                this.dropdownList = element;
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '47278e9797420ea5f5c9c5ea4ef327386b087b53', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                if (element)
+                    this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
-                'label-outside': this.label && this.labelPosition === 'outside',
+                'label-outside': !!(this.label && this.labelPosition === 'outside'),
                 'open': this.open,
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
+            } }, h("slot", { key: 'b50453420be7803742bde1a3bc5ac3274bf61478', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '979d8b7224f9d845a3aa6364f913fdf22bf5ddf9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a471701f913ef80a5d7d0875e270c32ebaf236c8', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '294692745fec61636576c1f8256050abf1f57913', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -616,8 +633,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "open": ["handleOpenState"],
         "defaultValue": ["handleDefaultValueChange"]
     }; }
-    static get style() { return dropdownCss; }
-}, [257, "tds-dropdown", {
+    static get style() { return TdsDropdownStyle0; }
+}, [1, "tds-dropdown", {
         "name": [1],
         "disabled": [4],
         "helper": [1],

package/dist/components/{p-CuIyaNyT.js → p-859e3ebf.js}

@@ -1,4 +1,4 @@
-import { d as dfs } from './p-CLF3diNe.js';
+import { d as dfs } from './p-52bf0fdf.js';
 
 /**
  * Checks if the given element is a heading element (h1-h6) or has a role of "heading".

package/dist/components/{p-Ee9QeMgy.js → p-98d082f9.js}

@@ -1,65 +1,44 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { c as convertToString } from './p-CBZ6wC3m.js';
-import { d as defineCustomElement$2 } from './p-Ca3wGDna.js';
-import { d as defineCustomElement$1 } from './p-CPDv0bBc.js';
-
-function isTag(el, tagName) {
-    return !!el && el.tagName === tagName.toUpperCase();
-}
-function closestByTag(start, tagName) {
-    const found = start.closest(tagName);
-    return isTag(found, tagName) ? found : null;
-}
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
+import { c as convertToString } from './p-a1181b1f.js';
+import { d as defineCustomElement$2 } from './p-e627f11b.js';
+import { d as defineCustomElement$1 } from './p-edc838a0.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:pointer}:host .dropdown-option:hover.disabled{border-bottom-color:var(--tds-dropdown-option-border-hover);cursor:not-allowed}:host([hidden]){display:none}";
+const TdsDropdownOptionStyle0 = dropdownOptionCss;
 
 const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.__attachShadow();
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
-        /** Sets the option as disabled. */
-        this.disabled = false;
-        this.selected = false;
-        this.multiselect = false;
-        this.size = 'lg';
         this.parentElement = null;
         // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
         this.componentWillRender = () => {
-            var _a, _b;
-            if (!this.host.parentElement)
+            var _a, _b, _c;
+            if (!this.host.parentElement) {
                 return;
-            const directParent = this.host.parentElement;
-            if (isTag(directParent, 'tds-dropdown')) {
-                this.parentElement = directParent;
-            }
-            else {
-                const root = this.host.getRootNode();
-                if (root instanceof ShadowRoot) {
-                    this.parentElement = closestByTag(root.host, 'tds-dropdown');
-                }
-                else {
-                    this.parentElement = null;
-                }
             }
+            this.parentElement =
+                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
+                    ? this.host.parentElement
+                    : this.host.getRootNode().host;
             if (this.parentElement) {
-                this.multiselect = (_a = this.parentElement.multiselect) !== null && _a !== void 0 ? _a : false;
+                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
                 this.size = this.parentElement.size || 'lg';
             }
-            this.label = ((_b = this.host.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
         this.handleSingleSelect = () => {
+            var _a, _b;
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.internalValue);
-                this.parentElement.close();
+                (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.close();
                 this.tdsSelect.emit({
                     value: this.internalValue,
                     selected: this.selected,
@@ -67,9 +46,10 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
             }
         };
         this.handleMultiselect = (event) => {
+            var _a, _b;
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.internalValue);
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -77,7 +57,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.internalValue);
+                    (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -101,6 +81,13 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                 this.tdsBlur.emit(event);
             }
         };
+        this.value = undefined;
+        this.internalValue = undefined;
+        this.disabled = false;
+        this.tdsAriaLabel = undefined;
+        this.selected = false;
+        this.multiselect = false;
+        this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
@@ -113,13 +100,14 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '9fa5bfe8a6dc4596c0181c3319cba2e4101b7502' }, h("div", { key: 'b160e2007f01dfa6b13b633408125cd32159bb95', class: `dropdown-option
+        return (h(Host, { key: 'c073be0f228d93964e103da392ef7609878f9d0c' }, h("div", { key: 'bb4349fa2c32884bfafc80cd3c58a0e9fe738e53', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
           ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
+                var _a;
                 if (event.key === 'Escape') {
-                    this.parentElement.close();
+                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.close();
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
@@ -136,8 +124,8 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
     static get watchers() { return {
         "value": ["valueWatcher"]
     }; }
-    static get style() { return dropdownOptionCss; }
-}, [273, "tds-dropdown-option", {
+    static get style() { return TdsDropdownOptionStyle0; }
+}, [17, "tds-dropdown-option", {
         "value": [8],
         "disabled": [4],
         "tdsAriaLabel": [1, "tds-aria-label"],

package/dist/components/{p-Ip9G3co9.js → p-a64cbc40.js}

@@ -1,57 +1,44 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { h as hasSlot } from './p-DDX6uFcm.js';
-import { g as generateUniqueId } from './p-Cn4f8w1e.js';
-import { g as getAriaInvalid } from './p-wEP_nEaO.js';
-import { d as defineCustomElement$3 } from './p-CPDv0bBc.js';
-import { d as defineCustomElement$2 } from './p-X1sPx4t5.js';
-import { d as defineCustomElement$1 } from './p-DnzQe_HU.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
+import { h as hasSlot } from './p-ae110fc2.js';
+import { g as generateUniqueId } from './p-11648030.js';
+import { g as getAriaInvalid } from './p-bbf9492a.js';
+import { d as defineCustomElement$3 } from './p-edc838a0.js';
+import { d as defineCustomElement$2 } from './p-6fd2b339.js';
+import { d as defineCustomElement$1 } from './p-ad376f70.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-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;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-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;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-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;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);border-top:1px solid transparent;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-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.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)}.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)}.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)}.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-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{cursor:not-allowed;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)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-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.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.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{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .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:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.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.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.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 = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
-    constructor(registerHost) {
+    constructor() {
         super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
+        this.__registerHost();
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.uuid = generateUniqueId();
-        /** Which input type, text, password or similar */
         this.type = 'text';
-        /** Position of the label for the Text Field. */
         this.labelPosition = 'no-label';
-        /** Label text */
         this.label = '';
-        /** Placeholder text */
+        this.min = undefined;
+        this.max = undefined;
+        this.helper = undefined;
         this.placeholder = '';
-        /** Value of the input text */
         this.value = '';
-        /** Set input in disabled state */
         this.disabled = false;
-        /** Set input in readonly state */
         this.readOnly = false;
-        /** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
         this.hideReadOnlyIcon = false;
-        /** Size of the input */
         this.size = 'lg';
-        /** Mode variant of the Text Field */
         this.modeVariant = null;
-        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
-        /** Name property */
         this.name = '';
-        /** Error state of input */
         this.state = 'default';
-        /** Autofocus for input */
+        this.maxLength = undefined;
         this.autofocus = false;
-        /** Makes the text field required */
+        this.tdsAriaLabel = undefined;
         this.required = false;
-        /** Value to be used for the text field's autocomplete attribute */
         this.autocomplete = 'off';
-        /** Listen to the focus state of the input */
         this.focusInput = false;
     }
     handleChange(event) {
@@ -77,7 +64,8 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleFocus(event) {
-        this.textInput.focus();
+        var _a;
+        (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
@@ -96,7 +84,7 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
+        return (h("div", { key: 'bcc403b4abba73fb457719e3205070f56d91c2cd', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -114,12 +102,12 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
                 '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", { key: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '69af0c24b21e3edda262749538cc9775c501e115', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '0133120eb1b74bb2244dd122afe1b2df7d54383b', class: "text-field-label-outside" }, h("label", { key: 'd1805d76b9ba9cd36bddbc546dd2081e4c891905', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '227c0581da20afcb1a55c2c3fc7f1458a0daf06f', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '913b945ec6d9898c22e3577ada5ce9782af3ec0a', 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", { key: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
+            } }, h("slot", { key: 'ebaa7a7bb48ef059e013fe48f9aa4ca2677d9021', name: "prefix" }))), h("div", { key: 'f7cca070bf5a514b4bc75fbf14438609bdc1fd2f', class: "text-field-input-container" }, h("input", { key: '23ce48510d1b9516d7fffb7fd1b30b7a18bb5a4f', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -134,20 +122,20 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '19a93786e8647aa1d2e5b9a9b80c71c250330d8d', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ee49db21967cb8eec227464fe6fbcb7e0e0c2531', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '7c59f424bb444e58ec36650dadf56457ea58e12a', 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", { key: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '9934f078456a0af683b0d1f8a997c5484e58868c', class: {
+            } }, h("slot", { key: 'b7e43d945a4b6c5769422635bc43ced38c535f14', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'f9981c3d95da264abc0a44d399b6d6686038f82d', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'a72d52738bd5ad69025acae3b2adbda71f9131c4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'cd407a27027ee56bb8cfa24a83871b63c637867a', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '61dc2389d69774e47535a3c6a464353bf1db78b3', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '1ddabddbcd537b04cd9fec9314ff5ea6ddfcd591', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ce671b297fa5f058162270bc931870df89c22daf', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '875cc35361dec4bb2b9ed33ef454e3ae670b0f62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'ea47b420f3d3ec1c08bb47c5b615e6727cd7a3ed', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
     }
     get host() { return this; }
-    static get style() { return textFieldCss; }
-}, [262, "tds-text-field", {
+    static get style() { return TdsTextFieldStyle0; }
+}, [6, "tds-text-field", {
         "type": [513],
         "labelPosition": [1, "label-position"],
         "label": [1],