@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/esm/tds-dropdown_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -49,9 +49,6 @@ 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);
     }
     if (input) {
@@ -76,8 +73,7 @@ const convertArrayToStrings = (values) => {
     return values.map((value) => convertToString(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,:root{--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,:host .dropdown-select.disabled .menu-icon{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;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;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;
+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,:root{--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,:host .dropdown-select.disabled .menu-icon{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;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;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)}`;
 
 function hasValueChanged(newValue, currentValue) {
     if (newValue.length !== currentValue.length)
@@ -92,6 +88,35 @@ const TdsDropdown = class {
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.tdsClear = createEvent(this, "tdsClear", 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.internalValue = '';
+        this.filterResult = null;
+        this.filterFocus = false;
+        this.internalDefaultValue = '';
+        this.selectedOptions = [];
+        this.filterQuery = '';
         this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
@@ -247,31 +272,6 @@ const TdsDropdown = class {
                 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 = '';
-        this.filterResult = null;
-        this.filterFocus = false;
-        this.internalDefaultValue = '';
-        this.selectedOptions = [];
-        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         /** Normalize to array */
@@ -598,9 +598,9 @@ const TdsDropdown = class {
         /** 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: '95814dc19d0c75fcfc78f8c434db1c8b71a659a1', class: {
+        return (h(Host, { key: 'c2ed2597b63db6b77aab94cea81f75881870d352', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ab1ba8c2935e11d011c7eeb421988bea33104d1b', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '94ed0bb5bc35108e3b9d9fb9a766db48ce692f2e', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '58f5f65798e6a14233388b333f398ff6b7541109', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '0a34ca7d20bc1393710cce380fd009d31c938823', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -644,7 +644,7 @@ const TdsDropdown = class {
                     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: '00ee04d8efa997d41996e82ff91f9ffcdaf6c8fe', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (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: '25c188703162d55736b5b6a098b9fca8a9e948d1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 if (element)
                     this.dropdownList = element;
             }, class: {
@@ -656,23 +656,28 @@ const TdsDropdown = class {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '3dd6b7ab60e7a33259b20cb59c4d4537c147267f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'f71a4316378185af92c591512219074313f38138', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'ad99eba3f43e8cb97a56468a110396e195142699', id: helperId, class: {
+            } }, h("slot", { key: '7c4a19dece5f2ca15a9fee5d06306380ba897961', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'e4f451576dfd856eb25dba32313a7b63e1ca5429', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'bf3678351fb23fdd3a20a09e16d807c2b68f623e', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '7008b6016ea4a48b55102d70f4a6295aa7431c38', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '89baafb9dda7d88bb3898d053e7e0fa3900d4d25', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"],
-        "open": ["handleOpenState"],
-        "defaultValue": ["handleDefaultValueChange"]
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "open": [{
+                "handleOpenState": 0
+            }],
+        "defaultValue": [{
+                "handleDefaultValueChange": 0
+            }]
     }; }
 };
-TdsDropdown.style = TdsDropdownStyle0;
+TdsDropdown.style = dropdownCss();
 
-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 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 TdsDropdownOption = class {
     constructor(hostRef) {
@@ -680,7 +685,14 @@ const TdsDropdownOption = class {
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
-        this.parentElement = null;
+        /** Internal value storage that's always a string */
+        this.internalValue = '';
+        /** Sets the option as disabled. */
+        this.disabled = false;
+        this.selected = false;
+        this.multiselect = false;
+        this.size = 'lg';
+        this.parentDropdown = null;
         // @ts-expect-error - label property is used internally for text content tracking
         // eslint-disable-next-line no-unused-vars,
         this.label = '';
@@ -689,13 +701,13 @@ const TdsDropdownOption = class {
             if (!this.host.parentElement) {
                 return;
             }
-            this.parentElement =
+            this.parentDropdown =
                 ((_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 = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
-                this.size = this.parentElement.size || 'lg';
+            if (this.parentDropdown) {
+                this.multiselect = (_b = this.parentDropdown.multiselect) !== null && _b !== void 0 ? _b : false;
+                this.size = this.parentDropdown.size || 'lg';
             }
             this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
@@ -703,8 +715,8 @@ const TdsDropdownOption = class {
             var _a, _b;
             if (!this.disabled) {
                 this.selected = true;
-                (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
-                (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.close();
+                (_a = this.parentDropdown) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                (_b = this.parentDropdown) === null || _b === void 0 ? void 0 : _b.close();
                 this.tdsSelect.emit({
                     value: this.internalValue,
                     selected: this.selected,
@@ -715,7 +727,7 @@ const TdsDropdownOption = class {
             var _a, _b;
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
+                    (_a = this.parentDropdown) === null || _a === void 0 ? void 0 : _a.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -723,7 +735,7 @@ const TdsDropdownOption = class {
                     });
                 }
                 else {
-                    (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
+                    (_b = this.parentDropdown) === null || _b === void 0 ? void 0 : _b.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
                         value: this.internalValue,
@@ -736,24 +748,17 @@ const TdsDropdownOption = class {
         this.handleFocus = (event) => {
             // Focus events are now handled by the parent dropdown component
             // Only emit if this is a standalone option (not within a dropdown)
-            if (!this.parentElement) {
+            if (!this.parentDropdown) {
                 this.tdsFocus.emit(event);
             }
         };
         this.handleBlur = (event) => {
             // Blur events are now handled by the parent dropdown component
             // Only emit if this is a standalone option (not within a dropdown)
-            if (!this.parentElement) {
+            if (!this.parentDropdown) {
                 this.tdsBlur.emit(event);
             }
         };
-        this.value = undefined;
-        this.internalValue = '';
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.selected = false;
-        this.multiselect = false;
-        this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
@@ -766,14 +771,14 @@ const TdsDropdownOption = class {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '5276b572424933484ff6d923e5210dcd647b9554' }, h("div", { key: '5eea7afac6ba6c1badfbc8ccf1f53ceb24df567d', class: `dropdown-option
+        return (h(Host, { key: 'ed72ff7168fa058f650e6ded417cd305c0b645bd' }, h("div", { key: '3d1e94b5a526827dc09791b3f62740dbb5f78803', 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') {
-                    (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.close();
+                    (_a = this.parentDropdown) === null || _a === void 0 ? void 0 : _a.close();
                 }
             } }, h("tds-checkbox", { onTdsChange: (event) => {
                 this.handleMultiselect(event);
@@ -788,9 +793,11 @@ const TdsDropdownOption = class {
     static get delegatesFocus() { return true; }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "value": ["valueWatcher"]
+        "value": [{
+                "valueWatcher": 0
+            }]
     }; }
 };
-TdsDropdownOption.style = TdsDropdownOptionStyle0;
+TdsDropdownOption.style = dropdownOptionCss();
 
 export { TdsDropdown as tds_dropdown, TdsDropdownOption as tds_dropdown_option };

package/dist/esm/tds-folder-tab.entry.js

@@ -1,14 +1,13 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}";
-const TdsFolderTabStyle0 = folderTabCss;
+const folderTabCss = () => `:host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:" ";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}`;
 
 const TdsFolderTab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
-        this.tabWidth = undefined;
     }
     /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
     async setTabWidth(width) {
@@ -37,13 +36,13 @@ const TdsFolderTab = class {
         }
     }
     render() {
-        return (h(Host, { key: '4a695d366a2e8e8e5b11b76f4be517c348e55c5b', "aria-selected": this.selected }, h("div", { key: 'b5dc85bc80aede911238d245d41b06ba82143c47', class: {
+        return (h(Host, { key: '3a6f843e08803fe8f005c0741449cc9f4a6df938', "aria-selected": this.selected }, h("div", { key: '5feeee7938110401632ccae56c7c9dda5fefdafd', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'a3c58caf8081862b9b89052f30e7100493ea0985' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '5b3947a9e16cde774eddcb896849f965e16042c8' }))));
     }
     get host() { return getElement(this); }
 };
-TdsFolderTab.style = TdsFolderTabStyle0;
+TdsFolderTab.style = folderTabCss();
 
 export { TdsFolderTab as tds_folder_tab };

package/dist/esm/tds-folder-tabs.entry.js

@@ -1,17 +1,27 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsFolderTabsStyle0 = folderTabsCss;
+const folderTabsCss = () => `:host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}`;
 
 const TdsFolderTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = null;
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.buttonWidth = 0;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -26,7 +36,7 @@ const TdsFolderTabs = class {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -34,15 +44,15 @@ const TdsFolderTabs = class {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -54,7 +64,7 @@ const TdsFolderTabs = class {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -62,23 +72,15 @@ const TdsFolderTabs = class {
                 }
             });
         };
-        this.modeVariant = null;
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.buttonWidth = 0;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
-        if (tabIndex < 0 || tabIndex >= this.children.length) {
+        if (tabIndex < 0 || tabIndex >= this.tabElements.length) {
             throw new Error('Tab index out of bounds');
         }
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -94,12 +96,12 @@ const TdsFolderTabs = class {
     }
     handleSelectedIndexUpdate() {
         const tabs = Array.from(this.host.children);
-        this.children = tabs.map((tabElement) => {
+        this.tabElements = tabs.map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
         if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -120,27 +122,27 @@ const TdsFolderTabs = class {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.tabElements[0].classList.add('first');
+        this.tabElements[this.tabElements.length - 1].classList.add('last');
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -176,15 +178,17 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '093e2804b56cb6c336744551ad4d27d962a34d02', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'eaaa9db902ead14bd581416c661b7c105263e335', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '41717283c59a48b103f09d57f98eeeb0e59b9b90', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '110565630876d0562c0da97c17fb3f0322aebdf3', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '50a7f0455048807c8642ecb66de0d01b7a27ce58', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '411a393ac446ae8224ec8c407b5e1b0adda87098', name: "chevron_left", size: "20px" })), h("slot", { key: 'a534cd27f044a0ac8a03ffb28e20f04cb8eba7a6', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6284e9746b9dfdc2010ff65b201e39db0e51feda', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '6a2e53089c50e1aa03a87af001a685ff9ba059dc', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '3dae6d2ec51d16943dde21c1177cd9e4258c6e7d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '80f25b8b7b3b684e2ce99772864f5953e7984d41', name: "chevron_left", size: "20px" })), h("slot", { key: '2725126f14468a685eed1ad75401e5490312d696', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bebfa92afee71e4403c11d4d82653b264c7c3506', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '81ac9deabdbe4ed4127c2504fb9cbe0ba3b114b9', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "selectedIndex": ["handleSelectedIndexUpdate"]
+        "selectedIndex": [{
+                "handleSelectedIndexUpdate": 0
+            }]
     }; }
 };
-TdsFolderTabs.style = TdsFolderTabsStyle0;
+TdsFolderTabs.style = folderTabsCss();
 
 export { TdsFolderTabs as tds_folder_tabs };

package/dist/esm/tds-footer-group.entry.js

@@ -1,21 +1,20 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { h as hasSlot } from './hasSlot-d52114d0.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { h as hasSlot } from './hasSlot-DDX6uFcm.js';
 
-const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:12px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}";
-const TdsFooterGroupStyle0 = footerGroupCss;
+const footerGroupCss = () => `:host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links-header);padding-bottom:8px}:host .footer-top-title *,:host .footer-top-title ::slotted(*){margin:0}:host button.footer-top-title-button{border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button *,:host button.footer-top-title-button ::slotted(*){margin:0}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:12px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child){flex-direction:column}:host .mobile-view [role=list].start:not(.top-part-child).start,:host .mobile-view [role=list].start:not(.top-part-child).end{gap:8px}:host .mobile-view [role=list].top-part-child.closed{display:none}:host .mobile-view [role=list].top-part-child{gap:0}:host .mobile-view button.footer-top-title-button{display:flex;align-items:center}`;
 
 const TdsFooterGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
+        this.open = false;
+        /** Indicates if the component is in mobile view. */
+        this.isMobile = false;
         /** If the group is placed in the main part of the Footer,
          * it can have either start or end as a slot position otherwise undefined. */
         this.slotPosition = null;
         /** Indicates if a group is part of the top part of the Footer. */
         this.topPartGroup = false;
-        this.titleText = undefined;
-        this.tdsListAriaLabel = undefined;
-        this.open = false;
-        this.isMobile = false;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
@@ -43,15 +42,15 @@ const TdsFooterGroup = class {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: '96594800603cf0e9cebf94cb567da570df3dfa34', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'f131ba95fba5cbd3113dfae4ab0c40bfe322f370', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: '67a8de92cb3f9e958f43818c87c5b6d51ba94f15', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '9373f8486cc78e684cc9d84b26d36a8a44f9f2bf', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'a7ba1cb22025afa4f11680108e9382cf388d692e', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'af304cf0fe2282b44b86cef3647177d9f89bd928', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: '397a8a2c393331de0816ebf73d21647666cad858', "aria-label": this.tdsListAriaLabel }, h("div", { key: '4bbe0af02551f494a8513dca354958ff3e796a08', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '7117d7f69790dac3baab851edd7bb4420c2f7c3d' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'da11d1279d22a8093bb8367ae8056dbecf5ac0c0' }))))));
     }
     get host() { return getElement(this); }
 };
-TdsFooterGroup.style = TdsFooterGroupStyle0;
+TdsFooterGroup.style = footerGroupCss();
 
 export { TdsFooterGroup as tds_footer_group };

package/dist/esm/tds-footer-item.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const footerItemCss = ":host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:active),:host([role=listitem]) div.top-part-child ::slotted(button:active){text-decoration:underline;background-color:var(--tds-footer-top-links-background-active)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}";
-const TdsFooterItemStyle0 = footerItemCss;
+const footerItemCss = () => `:host([role=listitem]) div ::slotted(a),:host([role=listitem]) div ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);text-decoration:none}:host([role=listitem]) div ::slotted(a:focus-visible),:host([role=listitem]) div ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host([role=listitem]) div ::slotted(a:hover),:host([role=listitem]) div ::slotted(button:hover){text-decoration:underline}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media all and (max-width: 992px){:host([role=listitem]) div.top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}:host([role=listitem]) div.top-part-child ::slotted(a),:host([role=listitem]) div.top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}:host([role=listitem]) div.top-part-child ::slotted(a:active),:host([role=listitem]) div.top-part-child ::slotted(button:active){text-decoration:underline;background-color:var(--tds-footer-top-links-background-active)}:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}}`;
 
 const TdsFooterItem = class {
     constructor(hostRef) {
@@ -16,10 +15,10 @@ const TdsFooterItem = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ed7e825469fcae5d17af59f0a5f845fcadf8bf89', role: "listitem" }, h("div", { key: '74b64120093b651b91eba2b2dd98c5300a590fae', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '84a215c3bc66039e4973337bb2bc7de3dbe5ed77' }))));
+        return (h(Host, { key: '8ddec62c76a87e0ecd03e77ac8abeb924f1a0665', role: "listitem" }, h("div", { key: '07e7552a21644ccde5c34cb1943eb39fa7c947bb', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '0a2986024eef08b2251851a320d35d72a665e952' }))));
     }
     get host() { return getElement(this); }
 };
-TdsFooterItem.style = TdsFooterItemStyle0;
+TdsFooterItem.style = footerItemCss();
 
 export { TdsFooterItem as tds_footer_item };