@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

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

@@ -5,6 +5,7 @@ import inheritAttributes from "../../utils/inheritAttributes";
  */
 export class TdsTooltip {
     constructor() {
+        this.border = '';
         this.popperjsExtraModifiers = [
             {
                 name: 'positionCalc',
@@ -29,7 +30,7 @@ export class TdsTooltip {
                 },
             },
         ];
-        this.inheritedAttributes = [];
+        this.inheritedAttributes = {};
         this.text = '';
         this.selector = undefined;
         this.referenceEl = undefined;
@@ -58,20 +59,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: '49b74045dffd614a85e5749c0f3e22a5c825b12a', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '8b02fca65300f241ddeb938977f6260477f10804' }, 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: '3dc322ae67df156173931c052dfd97b4f7fb8acb' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -110,11 +107,11 @@ export class TdsTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the Tooltip"
@@ -127,7 +124,7 @@ export class TdsTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement | null",
-                    "resolved": "HTMLElement",
+                    "resolved": "HTMLElement | null | undefined",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -200,8 +197,8 @@ export class TdsTooltip {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | null",
+                    "resolved": "boolean | null",
                     "references": {}
                 },
                 "required": false,
@@ -279,11 +276,11 @@ export class TdsTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the aria-describedby attribute"

package/dist/collection/tegel-lite/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-lite/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-3f2187a4.js → p-0f9ce30b.js}

@@ -12,7 +12,7 @@ const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '30326793059e4e25b3c769e94b22780a37754ba4' }, this.heading, this.subheading && h("div", { key: 'e3912bf0571bb8ef67ebea53d37547a0a9284bf7', class: "subheading" }, this.subheading)));
     }
     static get style() { return TdsSideMenuUserLabelStyle0; }
 }, [1, "tds-side-menu-user-label", {