@scania/tegel 1.26.0-value-prop-fix.beta.0 → 1.27.0

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 import { h as hasSlot } from './hasSlot-d52114d0.js';
 
-const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;padding-top:12px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 const TdsBannerStyle0 = bannerCss;
 
 const TdsBanner = class {

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

@@ -27,6 +27,8 @@ const TdsCheckbox = class {
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
+        this.tdsAriaLabel = undefined;
+        this.tdsAriaDescribedby = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -55,12 +57,17 @@ const TdsCheckbox = class {
             this.indeterminate = false;
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h("div", { key: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
+        return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
+            } }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -50,6 +50,7 @@ const TdsChip = class {
         this.name = undefined;
         this.value = undefined;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
     }
     handleInternaRadioChange(event) {
         const { chipId, checked, groupName } = event.detail;
@@ -70,12 +71,16 @@ const TdsChip = class {
         }
         return Object.assign(Object.assign({}, commonAttributes), { onClick: () => this.handleClick() });
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Chip component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
         const inputAttributes = this.renderInputAttributes();
         const hasPrefixSlot = hasSlot('prefix', this.host);
         const hasLabelSlot = hasSlot('label', this.host);
         const hasSuffixSlot = hasSlot('suffix', this.host);
-        const textInsideLabel = this.host.querySelector(`[slot="label"]`).innerHTML;
         const chipClasses = {
             'tds-chip-component': true,
             'sm': this.size === 'sm',
@@ -84,7 +89,7 @@ const TdsChip = class {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'e7a9ea9750272388e5a8988622865d3aef8104d0' }, h("div", { key: '96ef34ec0764c1c2082d32d6403a86fef836d83b', class: "component" }, h("div", { key: '3a565a0fcb663e8bae82e962d810f6316bd72843', class: chipClasses }, h("input", Object.assign({ key: 'fe6d46749f8d45d90ca4990d009db405ce3c00c2', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": hasLabelSlot && textInsideLabel ? textInsideLabel : 'Chip' }, inputAttributes)), h("label", { key: 'b395ede6ab012ed36bd32ad95490da2bfbd3c8a7', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '2713979e0184a424ea5d9dc6c3f2ed19d10564ca', name: "prefix" }), hasLabelSlot && h("slot", { key: '7707873c5ea761b6c64e1591064c7126e85686ba', name: "label" }), hasSuffixSlot && h("slot", { key: '73d2517b2cbc1ef6b690fa7c6ef7b1fda126bee2', name: "suffix" }))))));
+        return (h(Host, { key: 'c5e27b57accf13ea6af61b6544050b64c16a745c' }, h("div", { key: 'b4f3b429a307cfab3e7dd8356951d19fc5a01293', class: "component" }, h("div", { key: '273c7437e97862fc03c7d93386d07cc425437458', class: chipClasses }, h("input", Object.assign({ key: 'a143b14527b00c255a7205fc86a2473bb8b8c000', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'a86d26d9f9fe805e84fad6b9c79b24da48efa2f1', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'ca7e6af86cbac4fc87ac3815fc414f2952d851d0', name: "prefix" }), hasLabelSlot && h("slot", { key: '986cd743afd9f6014cb08e21d5c6c192e579b087', name: "label" }), hasSuffixSlot && h("slot", { key: '1cbbd42853fe0edc52da713f23b9ef3f99d8f4b2', name: "suffix" }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -89,7 +89,7 @@ const TdsDropdown = class {
                 const defaultValues = this.multiselect
                     ? this.internalDefaultValue.split(',')
                     : [this.internalDefaultValue];
-                this.updateDropdownState(defaultValues);
+                this.updateDropdownStateInternal(defaultValues);
             }
         };
         this.getChildren = () => {
@@ -224,6 +224,7 @@ const TdsDropdown = class {
         this.noResultText = 'No result';
         this.defaultValue = undefined;
         this.value = null;
+        this.tdsAriaLabel = undefined;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
@@ -232,14 +233,11 @@ const TdsDropdown = class {
         this.selectedOptions = [];
     }
     handleValueChange(newValue) {
-        console.log('Value changed:', newValue); // Debug
         // Normalize to array
         const normalizedValue = this.normalizeValue(newValue);
-        console.log('Normalized value:', normalizedValue); // Debug
         // Only update if actually changed
         if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
-            console.log('Value has changed, updating state'); // Debug
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateFromUser(normalizedValue);
         }
     }
     normalizeValue(value) {
@@ -268,11 +266,15 @@ const TdsDropdown = class {
             return true;
         return newValue.some((val) => !currentValue.includes(val));
     }
-    updateDropdownState(values) {
-        console.log('Updating dropdown state with values:', values); // Debug
+    updateDropdownStateInternal(values) {
+        this.updateDropdownState(values, false);
+    }
+    updateDropdownStateFromUser(values) {
+        this.updateDropdownState(values, true);
+    }
+    updateDropdownState(values, emitChange = true) {
         // Validate the values first
         const validValues = this.validateValues(values);
-        console.log('Valid values:', validValues); // Debug
         // Update internal state
         this.selectedOptions = [...validValues];
         // Update the value prop
@@ -283,8 +285,9 @@ const TdsDropdown = class {
         this.updateOptionElements();
         // Update display value
         this.updateDisplayValue();
-        // Emit change event
-        this.emitChange();
+        // Emit change event only if value has changed by user
+        if (emitChange)
+            this.emitChange();
         // Update value attribute
         this.setValueAttribute();
     }
@@ -292,7 +295,7 @@ const TdsDropdown = class {
         // Make sure we have children before validation
         const children = this.getChildren();
         if (!children || children.length === 0) {
-            console.warn('No dropdown options found'); // Debug
+            console.warn('No dropdown options found');
             return values; // Return original values if no children yet
         }
         return values.filter((val) => {
@@ -333,18 +336,18 @@ const TdsDropdown = class {
         else {
             normalizedValue = [convertToString(value)];
         }
-        this.updateDropdownState(normalizedValue);
+        this.updateDropdownStateFromUser(normalizedValue);
         return this.getSelectedChildren().map((element) => ({
             value: element.value,
             label: element.textContent.trim(),
         }));
     }
     async reset() {
-        this.updateDropdownState([]);
+        this.updateDropdownStateFromUser([]);
     }
     async removeValue(oldValue) {
         const newValues = this.selectedOptions.filter((v) => v !== oldValue);
-        this.updateDropdownState(newValues);
+        this.updateDropdownStateFromUser(newValues);
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
@@ -424,10 +427,8 @@ const TdsDropdown = class {
     componentWillLoad() {
         // First handle the value prop if it exists
         if (this.value !== null && this.value !== undefined) {
-            console.log('Initial value:', this.value); // Debug
             const normalizedValue = this.normalizeValue(this.value);
-            console.log('Normalized value:', normalizedValue); // Debug
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateInternal(normalizedValue);
             return; // Exit early if we handled the value prop
         }
         // Only use defaultValue if no value prop was provided
@@ -436,7 +437,7 @@ const TdsDropdown = class {
             const initialValue = this.multiselect
                 ? defaultValueStr.split(',').map(convertToString)
                 : [convertToString(this.defaultValue)];
-            this.updateDropdownState(initialValue);
+            this.updateDropdownStateInternal(initialValue);
         }
     }
     /** Method to handle slot changes */
@@ -452,10 +453,10 @@ const TdsDropdown = class {
      */
     async appendValue(value) {
         if (this.multiselect) {
-            this.updateDropdownState([...this.selectedOptions, value]);
+            this.updateDropdownStateFromUser([...this.selectedOptions, value]);
         }
         else {
-            this.updateDropdownState([value]);
+            this.updateDropdownStateFromUser([value]);
         }
     }
     componentDidRender() {
@@ -470,11 +471,16 @@ const TdsDropdown = class {
             form.removeEventListener('reset', this.resetInput);
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: 'a6be6e0f01f203fd2d5777f9026a5b7ed5afc313', role: "select", class: {
+        return (h(Host, { key: 'dbd588020c5f634d489ca464c2a4fd568e9b905a', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'bf629a4d977f27f31cd056f126295d7f3bf00dd7', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '98ea1eee12a76341af8f2cc81846c93e99f2eae8', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e0b7d8efe2206136140695647f7b0656de6f4559', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'abc333e48a6ecc7d89f2ddeec0ff587371baf78c', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -487,7 +493,7 @@ const TdsDropdown = class {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("input", {
+                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled,
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
@@ -501,8 +507,7 @@ const TdsDropdown = class {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
-            }
-        })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
+            } })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleFilterReset();
                 }
@@ -513,7 +518,7 @@ const TdsDropdown = class {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -525,7 +530,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: 'ca3b744399468b3d74e1982b1cb648222e601646', 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: 'd83c66bf81a1d2878827d5ed71cdeee73625cbd0', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -536,11 +541,11 @@ 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: '97fac699a505a4ce347ee5665aa251a5562d9c97', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'a549305b88f3de4a2dfd8050ea2652b459ecca7d', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3d336b6588a9b9f29f9ac3a92d4c0f81fc65a9d5', class: {
+            } }, h("slot", { key: '0133acc19540fb2ebfd44611fb906b5895d300d6', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '3cdf4874c3e5f593850b3238b9f87508ad67c312', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a51e0a23e67f22427010ee9c965ab7535c46176e', class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'fe85fe0e24269416805a570074a65c34224a6fc9', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '719a9da93ed73509c1a0694d3011f8e304d73cf9', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -635,7 +640,7 @@ const TdsDropdownOption = class {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: 'f471d5238869b3a522b36d99d7549c1229cd83a2' }, h("div", { key: 'da9edccba96999b0ee40f8c599325774593de814', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -647,7 +652,7 @@ const TdsDropdownOption = class {
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.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;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);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-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}: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-background-selected);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(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
 const TdsFolderTabStyle0 = folderTabCss;
@@ -18,12 +18,31 @@ const TdsFolderTab = class {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: '919cd453da1e3649fb5da8783ab8fabc47322d47', role: "listitem" }, h("div", { key: 'f00bf3eea1ee0d670d8989e23e27d6c54fbe7c17', class: {
+        return (h(Host, { key: '9290c4ab2f7d051bba9fec4dad9a7d07790ed5b7', "aria-selected": this.selected }, h("div", { key: '36225101c510f2d77282fd600c4ee00085791109', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '3e3bd62fd02c922fa0592dc0f2dae5a8b49d6c4c' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '05954c498b9fbd6a2a1231d84bf2657a0616db36' }))));
     }
+    get host() { return getElement(this); }
 };
 TdsFolderTab.style = TdsFolderTabStyle0;
 

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

@@ -63,6 +63,8 @@ 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;
@@ -163,9 +165,9 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '19b773750f13304194341caf79242c7be95b41be', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '915b525f1d8fc67f3edf82f0841ea89cfd8424bc', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '54a3cceed49387a8f0dbe74eecb96ae284882ff9', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '170e5256bde8efdce412bbab1a674b23159d02d1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '806f5ce973b4b9bf842ae4c3fdf42c6160255db4', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '4762c8fcfb5f7bb9a67ce2515fc3cab557180ca8', name: "chevron_left", size: "20px" })), h("slot", { key: '498f04374cb1ad240df2a6e02830eba9bc6c3c8d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '47f114815e98c22f26b021df2b5f53f4498ba24b', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'b4f3a0e137c84b996bdf7eb7e497e788637ac401', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '1c74ef8c81361bfa6ff5d227c145a3371fb2f66f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '94ddd85d4107c89487db727f13a9c443fd160fc6', name: "chevron_left", size: "20px" })), h("slot", { key: '63978c3c62482bc0a251377756630f555f10dfef', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'aeb86fbdb365e62df37b72daa0b53f51486834a9', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '2cc4d301a4490d6b8d8f2373fc2450c93922a814', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {