@scania/tegel 1.41.0 → 1.42.0-sass-migration-beta.0

package/dist/collection/components/textarea/textarea.js

@@ -39,7 +39,8 @@ export class TdsTextarea {
     }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
-        this.textEl.focus();
+        var _a;
+        (_a = this.textEl) === null || _a === void 0 ? void 0 : _a.focus();
         this.focusInput = true;
         this.tdsFocus.emit(event);
     }
@@ -61,7 +62,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
+        return (h("div", { key: 'ab345d2f34e48367b2040556b9b3a6564add939d', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -71,7 +72,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '674206c9897b2e6f8ed4742e4bf4b9db5740a302', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '808b87787dbdb3386bdf528051eb7ab991259e30', class: "textarea-wrapper" }, h("textarea", { key: 'bb9871a2b0f4d88ac150fb8b550c2d5001b9cc2d', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'c8290eb384aff2b8a8d7c2495b69167066e76415', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '43cd7476de0402a1aab5eaf2d930678422aaf40e', class: "textarea-wrapper" }, h("textarea", { key: '265bd91d6cb4ca7009d0bc60f3db15c0e6bb47bc', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && 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) {
@@ -81,7 +82,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'f9fc9c3136ec57b6f0becd8602c6353f0c8848dd', class: "textarea-resizer-icon" }, h("svg", { key: '8b7f6fe75e111c7d4de27a1a6d30c430cd136753', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f5857808dfc21333fc8d95c38c0a8e69823a6229', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'df897e9b418dc4b7a2fefc152f0f850278695211', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'd350ce47947ccd11fea39f06b5ae6e7cdba84ca9', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '327fd5153c188dcc171d6cbed2727716148157b1', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '5625f2580ce1724b5462e00c8024fb7b9c3f3107', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2873a82b45675d1e09a07de357386b0ea83ed054', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '0a54c37e440f4740e373943bfd48001e8f8f39e6', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '53f25f455440e8383bd1dabba20cce266fe78074', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '682632eb45587ee86e48fa7dd42946d97db7da13', class: "textarea-resizer-icon" }, h("svg", { key: '7631ef268be5ec867452ba449f769e45c099d574', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ba27459f776dc0d6a6d0570420e4610ee08d6b9e', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '34f0c79ee333e2e0b0e27dc63d4be1e93b7fc6e4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '0aa6ad6c681f5abe6ba19a28f80125d002543fc4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '780fe72cff253212d79820c29a701258c55da508', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '657766f8f89e07aaac65daece6fc1162b925986a', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ce5e472fb172d53cb45e9dab4c317fb38dbd05eb', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '919a5471cfad225cefe6c30e88f782cdfc913b2f', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '338ef9cdac06151d4fd092208764e3812c2d4f01', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -331,8 +332,8 @@ export class TdsTextarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/toggle/toggle.js

@@ -39,12 +39,13 @@ export class TdsToggle {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
     render() {
-        return (h("div", { key: 'c3317c42904e33fd2936aa01ce064f87d33786e3', class: "tds-toggle" }, this.headline && (h("div", { key: '9c2280058b2fbc09e0663dc5e92d4d3dd413cc83', class: {
+        return (h("div", { key: 'ee3157ccfc7cc20e4cc0ea94d18ef18206aad346', class: "tds-toggle" }, this.headline && (h("div", { key: 'bb0b6242312d2b93aedca8b30060dced738ad418', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: 'b5e5cfee5c3115c1039e816bbd6f7751cf6a5f6c', ref: (inputEl) => {
-                this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, "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" }), this.labelSlot && (h("label", { key: '9eedb6f2c2a0494e2b59f392764c27b143dcecee', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '11346fe1d7f4ea0da665b153ae25af9e084a0602', name: "label" })))));
+            } }, this.headline)), h("input", { key: 'ff36441c8064df09ee5f09239472250211182725', ref: (inputEl) => {
+                if (inputEl)
+                    this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, "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" }), this.labelSlot && (h("label", { key: '67a2179e0c1252fb5d4dc9d9e5ade990bec58cbc', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'ec8080b6080cffecbc83fb9080c55031a8d0a1e7', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -29,7 +29,7 @@ export class TdsTooltip {
                 },
             },
         ];
-        this.inheritedAttributes = [];
+        this.inheritedAttributes = {};
         this.text = '';
         this.selector = undefined;
         this.referenceEl = undefined;
@@ -58,20 +58,16 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '69ced518e10ea5d65da8266257d7f7bba5db3f63', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '9511b6fb5dcd5a270de5b6f9b50b40271b4f5030' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '2b72a1988aa57732d9295a33a43e8baf117e7e17', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '449a74bcead02452d6bd7f443cfbfd8ef29071a1' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
-                'tds-tooltip-show': this.show,
-            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
-            // @ts-ignore
-            onInternalTdsShow: () => {
+                'tds-tooltip-show': !!this.show,
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
                 this.show = true;
-            },
-            // @ts-ignore
-            onInternalTdsClose: () => {
+            }, onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '8fb6467b2d1fa2ce6a70a171966ff245f8205b55' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: 'c232d55352f3e827c16630c69df138ba687486b4' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -127,7 +123,7 @@ export class TdsTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | null | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -200,8 +196,8 @@ export class TdsTooltip {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | null",
+                    "resolved": "boolean | null",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/tegel-light/components/tl-dropdown/_dropdownKeyboard.js

@@ -0,0 +1,190 @@
+// ============================================================================
+// Dropdown Keyboard Navigation
+// Handles arrow keys, Enter, Space, Tab, and Escape for all dropdown variants
+// ============================================================================
+let initialized = false;
+export function initDropdownKeyboard() {
+    if (initialized)
+        return;
+    initialized = true;
+    // ============================================================================
+    // Handler for when dropdown list is open
+    // ============================================================================
+    const handleOpenListKeydown = (e) => {
+        const openTrigger = document.querySelector('.tl-dropdown__button[aria-expanded="true"], .tl-dropdown__input[aria-expanded="true"]');
+        if (!openTrigger)
+            return;
+        const root = openTrigger.closest('.tl-dropdown');
+        const openList = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+        if (!openList)
+            return;
+        const isDropUp = root === null || root === void 0 ? void 0 : root.classList.contains('tl-dropdown--dropup');
+        const isMultiSelect = openList.getAttribute('aria-multiselectable') === 'true';
+        const isFilterDropdown = !!(root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__input'));
+        const options = Array.from(openList.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+            const el = option;
+            return (!el.classList.contains('tl-dropdown__option--disabled') &&
+                !el.classList.contains('tl-dropdown__option--no-result') &&
+                el.style.display !== 'none');
+        });
+        if (!options.length)
+            return;
+        const { activeElement } = document;
+        const currentIndex = options.findIndex((option) => option === activeElement);
+        const focusOption = (index) => {
+            if (index < 0 || index >= options.length)
+                return;
+            options[index].focus();
+        };
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (isFilterDropdown && activeElement === openTrigger) {
+                const isArrowDown = e.key === 'ArrowDown';
+                const firstIndex = isArrowDown
+                    ? isDropUp
+                        ? options.length - 1
+                        : 0
+                    : isDropUp
+                        ? 0
+                        : options.length - 1;
+                focusOption(firstIndex);
+                return;
+            }
+            const direction = e.key === 'ArrowDown' ? 1 : -1;
+            let nextIndex = currentIndex;
+            if (currentIndex === -1) {
+                const isArrowDown = e.key === 'ArrowDown';
+                nextIndex = isArrowDown
+                    ? isDropUp
+                        ? options.length - 1
+                        : 0
+                    : isDropUp
+                        ? 0
+                        : options.length - 1;
+            }
+            else {
+                nextIndex = currentIndex + (isDropUp ? -direction : direction);
+            }
+            if (nextIndex >= options.length)
+                nextIndex = 0;
+            if (nextIndex < 0)
+                nextIndex = options.length - 1;
+            focusOption(nextIndex);
+            return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            const focusedOption = options[currentIndex];
+            if (!focusedOption)
+                return;
+            if (isMultiSelect)
+                return;
+            e.preventDefault();
+            focusedOption.click();
+            if (openTrigger)
+                openTrigger.setAttribute('aria-expanded', 'false');
+            if (!isFilterDropdown) {
+                openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+            }
+            return;
+        }
+        if (e.key === 'Tab') {
+            if (isFilterDropdown) {
+                const inputWrapper = openTrigger.parentElement;
+                const clearButton = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('.tl-dropdown__input-clear');
+                const clearButtonTabindex = clearButton === null || clearButton === void 0 ? void 0 : clearButton.getAttribute('tabindex');
+                const canFocusClearButton = clearButton && clearButtonTabindex === '0';
+                if (currentIndex >= 0) {
+                    if (!e.shiftKey && canFocusClearButton) {
+                        e.preventDefault();
+                        clearButton === null || clearButton === void 0 ? void 0 : clearButton.focus();
+                        return;
+                    }
+                    return;
+                }
+                return;
+            }
+            e.preventDefault();
+            const movingForward = isDropUp ? e.shiftKey : !e.shiftKey;
+            const nextIndex = movingForward ? currentIndex + 1 : currentIndex - 1;
+            if (nextIndex >= options.length || nextIndex < 0) {
+                if (openTrigger)
+                    openTrigger.setAttribute('aria-expanded', 'false');
+                openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+                return;
+            }
+            focusOption(nextIndex);
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            if (openTrigger)
+                openTrigger.setAttribute('aria-expanded', 'false');
+            openTrigger === null || openTrigger === void 0 ? void 0 : openTrigger.focus();
+        }
+    };
+    const handleTriggerKeydown = (e) => {
+        var _a;
+        const trigger = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.tl-dropdown__button, .tl-dropdown__input');
+        if (!trigger)
+            return;
+        const root = trigger.closest('.tl-dropdown');
+        const list = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+        if (!list)
+            return;
+        const isDropUp = root === null || root === void 0 ? void 0 : root.classList.contains('tl-dropdown--dropup');
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        const options = Array.from(list.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+            const el = option;
+            return !el.classList.contains('tl-dropdown__option--disabled') && el.style.display !== 'none';
+        });
+        if (!options.length)
+            return;
+        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !isOpen) {
+            e.preventDefault();
+            trigger.setAttribute('aria-expanded', 'true');
+            const firstIndex = isDropUp ? options.length - 1 : 0;
+            options[firstIndex].focus();
+        }
+    };
+    const handleClearButtonKeydown = (e) => {
+        const target = e.target;
+        if (!target.classList.contains('tl-dropdown__input-clear'))
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            target.click();
+        }
+        if (e.key === 'Tab' && e.shiftKey) {
+            const root = target.closest('.tl-dropdown');
+            const list = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__list');
+            if (list) {
+                const options = Array.from(list.querySelectorAll('.tl-dropdown__option')).filter((option) => {
+                    const el = option;
+                    return (!el.classList.contains('tl-dropdown__option--disabled') &&
+                        !el.classList.contains('tl-dropdown__option--no-result') &&
+                        el.style.display !== 'none');
+                });
+                if (options.length > 0) {
+                    e.preventDefault();
+                    options[options.length - 1].focus();
+                }
+            }
+        }
+    };
+    const handleClearButtonFocus = (e) => {
+        var _a;
+        const target = e.target;
+        if (!target.classList.contains('tl-dropdown__input-clear'))
+            return;
+        const input = (_a = target
+            .closest('.tl-dropdown__input-wrapper')) === null || _a === void 0 ? void 0 : _a.querySelector('.tl-dropdown__input');
+        if (input) {
+            input.setAttribute('aria-expanded', 'true');
+        }
+    };
+    document.addEventListener('keydown', handleOpenListKeydown);
+    document.addEventListener('keydown', handleTriggerKeydown);
+    document.addEventListener('keydown', handleClearButtonKeydown);
+    document.addEventListener('focus', handleClearButtonFocus, true);
+}

package/dist/collection/tegel-light/components/tl-dropdown/_dropdownScripts.js

@@ -0,0 +1,304 @@
+function setupOptionTabindex(container, selector = '.tl-dropdown__option', disableCheckboxes = false) {
+    container.querySelectorAll(selector).forEach((option) => {
+        const isDisabled = option.classList.contains('tl-dropdown__option--disabled');
+        option.setAttribute('tabindex', isDisabled ? '-1' : '0');
+        if (disableCheckboxes) {
+            const checkbox = option.querySelector('.tl-checkbox__input');
+            if (checkbox)
+                checkbox.setAttribute('tabindex', '-1');
+        }
+    });
+}
+function setupClickOutside(root, closeCallback) {
+    document.addEventListener('click', (e) => {
+        if (!root.contains(e.target))
+            closeCallback();
+    });
+    root.addEventListener('focusout', (e) => {
+        setTimeout(() => {
+            if (!root.contains(e.relatedTarget))
+                closeCallback();
+        }, 20);
+    });
+}
+function handleKeyboardSelection(e, selector, callback) {
+    var _a;
+    if (e.key === 'Enter' || e.key === ' ') {
+        const focusedOption = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(selector);
+        if (focusedOption) {
+            e.preventDefault();
+            callback(focusedOption);
+        }
+    }
+}
+function createToggleDropdown(trigger) {
+    return () => {
+        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
+        trigger.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+    };
+}
+function createCloseDropdown(trigger) {
+    return () => trigger.setAttribute('aria-expanded', 'false');
+}
+function getSelectedCheckboxLabels(container) {
+    return Array.from(container.querySelectorAll('.tl-checkbox__input:checked'))
+        .map((checkbox) => {
+        var _a, _b;
+        const label = (_a = checkbox.closest('.tl-dropdown__option')) === null || _a === void 0 ? void 0 : _a.querySelector('.tl-checkbox__label');
+        return ((_b = label === null || label === void 0 ? void 0 : label.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+    })
+        .filter(Boolean)
+        .join(', ');
+}
+function setupInputWrapperToggle(inputWrapper, input, openDropdown, closeDropdown, filterOptions) {
+    inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.addEventListener('mousedown', (e) => {
+        const target = e.target;
+        if (target === input || target.closest('.tl-dropdown__input-clear') || input.disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const isOpen = input.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            closeDropdown();
+            input.blur();
+        }
+        else {
+            openDropdown();
+            input.focus();
+            filterOptions();
+        }
+    });
+}
+function setupClearButton(clearButton, callback) {
+    clearButton === null || clearButton === void 0 ? void 0 : clearButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        callback();
+    });
+}
+function createUpdateClearButtonTabindex(input, clearButton) {
+    return () => {
+        const isVisible = input.getAttribute('aria-expanded') === 'true' && input.value.trim() !== '';
+        clearButton === null || clearButton === void 0 ? void 0 : clearButton.setAttribute('tabindex', isVisible ? '0' : '-1');
+    };
+}
+function setupInputEvents(input, openDropdown, filterOptions, updateClearButtonTabindex, getInitialValue) {
+    input.addEventListener('focus', () => {
+        openDropdown();
+        const initialValue = getInitialValue === null || getInitialValue === void 0 ? void 0 : getInitialValue();
+        if (initialValue)
+            input.value = '';
+        filterOptions();
+        updateClearButtonTabindex();
+    });
+    input.addEventListener('input', () => {
+        filterOptions();
+        updateClearButtonTabindex();
+    });
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Tab')
+            updateClearButtonTabindex();
+    });
+}
+function setupListClickHandler(list, selector, callback, preventDefault = false) {
+    list.addEventListener('click', (e) => {
+        const clickedOption = e.target.closest(selector);
+        if (clickedOption) {
+            if (preventDefault)
+                e.preventDefault();
+            callback(clickedOption);
+        }
+    });
+}
+function createCheckboxToggleHandler(updateDisplay) {
+    return (option) => {
+        const checkbox = option.querySelector('.tl-checkbox__input');
+        if (checkbox) {
+            checkbox.checked = !checkbox.checked;
+            option.classList.toggle('tl-dropdown__option--selected', checkbox.checked);
+            updateDisplay();
+            const changeEvent = new Event('change', { bubbles: true });
+            checkbox.dispatchEvent(changeEvent);
+        }
+    };
+}
+function setupButtonDropdownEvents(button, toggleDropdown, root, closeDropdown) {
+    button.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleDropdown();
+    });
+    setupClickOutside(root, closeDropdown);
+}
+export function tlDropdownSingleScriptDemo(menuId) {
+    const list = document.getElementById(menuId);
+    if (!list)
+        return;
+    const root = list.closest('.tl-dropdown');
+    const button = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__button');
+    const textDisplay = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__text');
+    if (!root || !button)
+        return;
+    setupOptionTabindex(list);
+    const toggleDropdown = createToggleDropdown(button);
+    const closeDropdown = createCloseDropdown(button);
+    const selectOption = (selectedOption) => {
+        var _a;
+        list.querySelectorAll('.tl-dropdown__option').forEach((option) => {
+            option.classList.remove('tl-dropdown__option--selected');
+        });
+        selectedOption.classList.add('tl-dropdown__option--selected');
+        if (textDisplay)
+            textDisplay.textContent = ((_a = selectedOption.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        closeDropdown();
+        button.focus();
+    };
+    setupButtonDropdownEvents(button, toggleDropdown, root, closeDropdown);
+    setupListClickHandler(list, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', selectOption);
+    list.addEventListener('keydown', (e) => handleKeyboardSelection(e, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', selectOption));
+}
+export function tlDropdownMultiScriptDemo(menuId) {
+    const list = document.getElementById(menuId);
+    if (!list)
+        return;
+    const root = list.closest('.tl-dropdown');
+    const button = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__button');
+    const textDisplay = root === null || root === void 0 ? void 0 : root.querySelector('.tl-dropdown__text');
+    if (!root || !button)
+        return;
+    setupOptionTabindex(list, '.tl-dropdown__option', true);
+    const toggleDropdown = createToggleDropdown(button);
+    const closeDropdown = createCloseDropdown(button);
+    const updateDisplay = () => {
+        if (textDisplay)
+            textDisplay.textContent = getSelectedCheckboxLabels(list);
+    };
+    const handleOptionToggle = createCheckboxToggleHandler(updateDisplay);
+    setupButtonDropdownEvents(button, toggleDropdown, root, closeDropdown);
+    setupListClickHandler(list, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', handleOptionToggle, true);
+    list.addEventListener('keydown', (e) => handleKeyboardSelection(e, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', handleOptionToggle));
+}
+export function tlDropdownFilterSingleScriptDemo(listId, inputId) {
+    const list = document.getElementById(listId);
+    const input = document.getElementById(inputId);
+    if (!list || !input)
+        return;
+    const root = list.closest('.tl-dropdown');
+    const inputWrapper = input.parentElement;
+    const clearButton = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('.tl-dropdown__input-clear');
+    const noResultMessage = list.querySelector('.tl-dropdown__option--no-result');
+    const options = Array.from(list.querySelectorAll('.tl-dropdown__option:not(.tl-dropdown__option--no-result)'));
+    setupOptionTabindex(list, '.tl-dropdown__option:not(.tl-dropdown__option--no-result)');
+    if (noResultMessage)
+        noResultMessage.setAttribute('tabindex', '-1');
+    let selectedValue = '';
+    const openDropdown = () => input.setAttribute('aria-expanded', 'true');
+    const closeDropdown = createCloseDropdown(input);
+    const updateClearButtonTabindex = createUpdateClearButtonTabindex(input, clearButton);
+    const filterOptions = () => {
+        const searchQuery = input.value.toLowerCase().trim();
+        let visibleCount = 0;
+        options.forEach((option) => {
+            var _a;
+            const optionText = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const isVisible = !searchQuery || optionText.toLowerCase().includes(searchQuery);
+            option.style.display = isVisible ? '' : 'none';
+            if (isVisible)
+                visibleCount++;
+        });
+        const showNoResults = !!searchQuery && visibleCount === 0;
+        if (noResultMessage) {
+            noResultMessage.style.display = showNoResults ? '' : 'none';
+        }
+    };
+    const selectOption = (selectedOption) => {
+        var _a;
+        options.forEach((option) => {
+            option.classList.remove('tl-dropdown__option--selected');
+        });
+        selectedOption.classList.add('tl-dropdown__option--selected');
+        selectedValue = ((_a = selectedOption.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        input.value = selectedValue;
+        input.blur();
+    };
+    const handleClearButton = () => {
+        selectedValue = '';
+        input.value = '';
+        input.focus();
+        filterOptions();
+        updateClearButtonTabindex();
+    };
+    setupClearButton(clearButton, handleClearButton);
+    setupInputWrapperToggle(inputWrapper, input, openDropdown, closeDropdown, filterOptions);
+    setupInputEvents(input, openDropdown, filterOptions, updateClearButtonTabindex, () => selectedValue);
+    setupListClickHandler(list, '.tl-dropdown__option:not(.tl-dropdown__option--no-result):not(.tl-dropdown__option--disabled)', selectOption, true);
+    root === null || root === void 0 ? void 0 : root.addEventListener('focusout', (e) => {
+        setTimeout(() => {
+            const newFocus = e.relatedTarget || document.activeElement;
+            const isClearButton = clearButton && newFocus === clearButton;
+            if (!root.contains(newFocus) && !isClearButton) {
+                closeDropdown();
+                if (selectedValue)
+                    input.value = selectedValue;
+            }
+        }, 20);
+    });
+    filterOptions();
+    updateClearButtonTabindex();
+}
+export function tlDropdownFilterMultiScriptDemo(listId, inputId) {
+    const list = document.getElementById(listId);
+    const input = document.getElementById(inputId);
+    if (!list || !input)
+        return;
+    const root = list.closest('.tl-dropdown');
+    const inputWrapper = input.parentElement;
+    const clearButton = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('.tl-dropdown__input-clear');
+    const options = Array.from(list.querySelectorAll('.tl-dropdown__option'));
+    setupOptionTabindex(list, '.tl-dropdown__option', true);
+    const openDropdown = () => input.setAttribute('aria-expanded', 'true');
+    const closeDropdown = createCloseDropdown(input);
+    const updateClearButtonTabindex = createUpdateClearButtonTabindex(input, clearButton);
+    const getSelectedValues = () => getSelectedCheckboxLabels(list);
+    const filterOptions = () => {
+        const searchQuery = input.value.toLowerCase().trim();
+        options.forEach((option) => {
+            var _a;
+            const optionText = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const isVisible = !searchQuery || optionText.toLowerCase().includes(searchQuery);
+            option.style.display = isVisible ? '' : 'none';
+        });
+    };
+    const updateDisplay = () => {
+        input.value = getSelectedValues();
+        updateClearButtonTabindex();
+    };
+    const handleClearButton = () => {
+        list.querySelectorAll('.tl-checkbox__input:checked').forEach((cb) => {
+            var _a;
+            cb.checked = false;
+            (_a = cb.closest('.tl-dropdown__option')) === null || _a === void 0 ? void 0 : _a.classList.remove('tl-dropdown__option--selected');
+        });
+        input.value = '';
+        input.focus();
+        filterOptions();
+        updateClearButtonTabindex();
+    };
+    const handleOptionToggle = createCheckboxToggleHandler(updateDisplay);
+    setupClearButton(clearButton, handleClearButton);
+    setupInputWrapperToggle(inputWrapper, input, openDropdown, closeDropdown, filterOptions);
+    setupInputEvents(input, openDropdown, filterOptions, updateClearButtonTabindex, getSelectedValues);
+    setupListClickHandler(list, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', handleOptionToggle, true);
+    list.addEventListener('keydown', (e) => handleKeyboardSelection(e, '.tl-dropdown__option:not(.tl-dropdown__option--disabled)', handleOptionToggle));
+    root === null || root === void 0 ? void 0 : root.addEventListener('focusout', (e) => {
+        setTimeout(() => {
+            const newFocus = e.relatedTarget || document.activeElement;
+            const isClearButton = clearButton && newFocus === clearButton;
+            if (!root.contains(newFocus) && !isClearButton) {
+                closeDropdown();
+                input.value = getSelectedValues();
+            }
+        }, 20);
+    });
+    filterOptions();
+    updateClearButtonTabindex();
+}

package/dist/collection/utils/appendHiddenInput.js

@@ -14,12 +14,14 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
         input = element.ownerDocument.createElement('input');
         input.type = 'hidden';
         if (additionalAttributes) {
-            additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+            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 || '';
+    }
 };
 export default appendHiddenInput;

package/dist/components/{p-d10d21bd.js → p-0d286c19.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$3 } from './p-e1622f4a.js';
-import { d as defineCustomElement$2 } from './p-7c3348eb.js';
-import { d as defineCustomElement$1 } from './p-f7d94947.js';
+import { d as defineCustomElement$2 } from './p-ead6727f.js';
+import { d as defineCustomElement$1 } from './p-edc838a0.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;