@scania/tegel 1.16.0-tdsheaderitems-beta.1 → 1.17.0-beta.0

package/dist/collection/components/dropdown/dropdown.js

@@ -90,10 +90,13 @@ export class TdsDropdown {
             return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
         };
         this.setValueAttribute = () => {
-            var _a, _b, _c;
-            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '')
-                this.value = null;
-            this.host.setAttribute('value', (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((val) => val).toString()) !== null && _c !== void 0 ? _c : null);
+            var _a;
+            if (!this.value || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
+                this.host.removeAttribute('value');
+            }
+            else {
+                this.host.setAttribute('value', this.value.map((val) => val).toString());
+            }
         };
         this.handleFilter = (event) => {
             this.tdsInput.emit(event);
@@ -342,7 +345,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '1e7eacac32eba892288cd94254053ef9d09b03f7', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '8a97e693abbf5ff8973fde64c1d383e926d5c5a8', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '55d98944321d2084de6cb3fd5f70b32b5b84d518', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: 'c756dc7221c39b901524bd0c28938bd166e412bc', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '5184a8c84d24e0f13379c95fc7ceb7791f1e25ab', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '601bc322ce765ed1ee52e1ee6a0894fcb335485b', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -353,13 +356,20 @@ export class TdsDropdown {
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
                     ` }, this.label)), h("input", {
             // eslint-disable-next-line no-return-assign
-            ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.placeholder, value: this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
+            ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
                 this.filterFocus = false;
+                if (this.multiselect) {
+                    this.inputElement.value = this.getValue();
+                }
                 this.handleBlur(event);
             }, onFocus: (event) => {
                 this.open = true;
                 this.filterFocus = true;
+                if (this.multiselect) {
+                    this.inputElement.value = '';
+                }
                 this.handleFocus(event);
+                this.handleFilter({ target: { value: '' } });
             }, onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
@@ -385,11 +395,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'b661988b59447f31ab71e6d03da4b6226caab184', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: '71042ce1a28e3598ee37977b86ae887c68caad1d', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '855021b97bdc5e56d8a2ebcd981e143aabb8a1ef', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'c282e26376e176e3eca36261eb269bfe4cce60da', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '6bce306c718a21a8eb5320da036a7f8909467d76', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'a15e4b87b4388fd44701db482b4be4a9cfee68f2', name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'bf606ae5c67258fc04df20474cde59ff00ea90eb', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '2a1b20c4ad0acf3f6c7de06ef3e6a84e7879f398', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1c4cb2ca717f28fe16306729ae6cf555358a1a65', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '6b3a6054fa2e1f1b77c8520cdfab20ef5e7a4bf9', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -18,15 +18,6 @@ export class TdsHeader {
         };
         this.observer = new MutationObserver(callback);
     }
-    updateRoles() {
-        const navElement = this.host.querySelector('.tds-header-component-list');
-        if (navElement) {
-            updateListChildrenRoles(navElement);
-        }
-    }
-    handleSlotChange() {
-        this.updateRoles();
-    }
     componentDidLoad() {
         const hostElement = this.host;
         const navElement = hostElement.querySelector('.tds-header-component-list');
@@ -41,7 +32,7 @@ export class TdsHeader {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '9444edcd74ab89d00450b398c6cb1a4f25ed9cd1' }, h("slot", { key: '9ee5c071427d56d71ebed3f4fb28540f26f756f4', name: "hamburger" }), h("slot", { key: 'ba6cb45780392f5682ff13b889c5500fc90dd1ce', name: "title" }), h("nav", Object.assign({ key: '1017dce61683cb6b9e1c80ef35332b6ea741c809' }, navAttributes), h("ul", { key: '043975c96c36ca0e4947d3c087f53ca05a594378', class: "tds-header-component-list" }, h("slot", { key: '71ec961aeaea24a74d5135bcf2434b34e62488f2', onSlotchange: () => this.handleSlotChange() }), h("li", { key: '1acf8c3b307df00d9751f071f9bf5b3e76bc9412', class: "tds-header-middle-spacer" }), h("slot", { key: '6e013e5ce40c2fb81f16ae8fdd338920bbc31396', name: "end" })))));
+        return (h(Host, { key: '7f42725db4686769f46fb327bc7baeb3b83f2d15' }, h("slot", { key: '26b4ab152030e56733efdb29c5ef11e3e8df1bdb', name: "hamburger" }), h("slot", { key: '7783ecdec32b28baab698ea379e7497a66da6a11', name: "title" }), h("nav", Object.assign({ key: '66a2d848b6ceed22d57080641652392dc2357405' }, navAttributes), h("ul", { key: '5b47c9a9e2210ca4c944ef6323bd5378437d8237', class: "tds-header-component-list" }, h("slot", { key: '14aaafb9b73a5f7d7fd48d0e0cfe4f4907183f27' }), h("li", { key: 'd3e6db876946d322dc14ef22ada0c92414941d2f', class: "tds-header-middle-spacer" }), h("slot", { key: '833f75ce887181221118a0dfe32ca96cf149a3ff', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/side-menu/side-menu.js

@@ -163,7 +163,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -187,7 +187,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -211,7 +211,7 @@ export class TdsSideMenu {
                     "references": {
                         "InternalTdsSideMenuPropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
                         }
                     }

package/dist/collection/components/stepper/stepper.js

@@ -173,7 +173,7 @@ export class TdsStepper {
                     "references": {
                         "InternalTdsStepperPropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/stepper/stepper.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
                             "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
                         }
                     }

package/dist/collection/components/table/table/table.js

@@ -327,7 +327,7 @@ export class TdsTable {
                     "references": {
                         "InternalTdsTablePropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/table/table/table.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/table/table/table.tsx",
                             "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
                         }
                     }

package/dist/collection/components/table/table-body-row/table-body-row.css

@@ -51,4 +51,12 @@
 
 :host(.tds-table--divider) .tds-table__body-cell--checkbox {
   border-right: 1px solid var(--tds-table-divider);
+}
+
+:host(.tds-table__row--clickable) {
+  cursor: pointer;
+}
+
+:host(.tds-table__row--clickable:focus-visible) {
+  outline: var(--focus-outline, 2px solid blue);
 }

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -11,6 +11,7 @@ export class TdsTableBodyRow {
     constructor() {
         this.selected = false;
         this.disabled = false;
+        this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
         this.verticalDividers = false;
@@ -26,6 +27,22 @@ export class TdsTableBodyRow {
             selectedRows: await this.tableEl.getSelectedRows(),
         });
     }
+    handleRowClick(e) {
+        if (!this.clickable)
+            return;
+        let rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);
+        this.tdsClick.emit({
+            event: e,
+            tableId: this.tableId,
+            rowIndex: rowIndex,
+        });
+    }
+    handleKeyDown(e) {
+        if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            this.handleRowClick(e);
+        }
+    }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
             event.detail.changed
@@ -48,12 +65,13 @@ export class TdsTableBodyRow {
         });
     }
     render() {
-        return (h(Host, { key: '2b99a5336354cb5e7e2e7ef9c81bac76a55c6895', class: {
+        return (h(Host, { key: '47571b7325bea2c32791792aee4813ce4364e8eb', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, this.multiselect && (h("td", { key: '049e91ea474a539b6fbe344db4aed9de42297f3d', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2af9307e3143db71cae028c1cc2116382b20f4c9', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '2eff0d398eb53934ca0b152d25422a5febbbffbb' })));
+                'tds-table__row--clickable': this.clickable,
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (h("td", { key: 'ad8bb61ead16afe42e6100dc4fe842c058556a20', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '37844a08f73175f234168a016a9527d01ad2209e', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: 'e7beb86f278f2476f23c365197addd4f22ce2a69' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }
@@ -104,6 +122,24 @@ export class TdsTableBodyRow {
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the row clickable and tabbable for accessibility purposes."
+                },
+                "attribute": "clickable",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -133,6 +169,26 @@ export class TdsTableBodyRow {
                     "resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
                     "references": {}
                 }
+            }, {
+                "method": "tdsClick",
+                "name": "tdsClick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a row is clicked."
+                },
+                "complexType": {
+                    "original": "{\n    event: MouseEvent;\n    tableId: string;\n    rowIndex: number;\n  }",
+                    "resolved": "{ event: MouseEvent; tableId: string; rowIndex: number; }",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -61,6 +61,12 @@
   padding: 16px 16px 16px 66px;
   color: var(--tds-table-color);
 }
+:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible {
+  overflow: visible;
+}
+:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden {
+  overflow: hidden;
+}
 
 :host(.tds-table__row-expand--active) .tds-table__row {
   background-color: var(--tds-table-body-row-background-selected);

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -12,6 +12,7 @@ const relevantTableProps = [
 
  * @part row - Selector for the main row of the table.
  * @part expand-row - Selector for the expanded row of the table.
+ * @part expand-row-cell - Selector for the cell in the expanded row of the table.
  */
 export class TdsTableBodyRowExpandable {
     constructor() {
@@ -19,6 +20,7 @@ export class TdsTableBodyRowExpandable {
         this.rowId = generateUniqueId();
         this.expanded = undefined;
         this.overflow = 'auto';
+        this.autoCollapse = false;
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -39,21 +41,34 @@ export class TdsTableBodyRowExpandable {
             });
         }
     }
+    handleRowExpand(event) {
+        /** Collapse all other rows when autoCollapse is true and a row is expanded */
+        if (this.autoCollapse &&
+            event.detail.isExpanded &&
+            event.detail.rowId !== this.rowId &&
+            event.detail.tableId === this.tableId) {
+            this.collapse();
+        }
+    }
     watchExpanded(newValue) {
         if (newValue !== this.isExpanded) {
             this.isExpanded = newValue;
-            this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+            this.tdsChange.emit({
+                rowId: this.rowId,
+                isExpanded: this.isExpanded,
+                tableId: this.tableId,
+            });
         }
     }
     /** Method to expand table row */
     async expand() {
         this.isExpanded = true;
-        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
     }
     /** Method to collapse table row */
     async collapse() {
         this.isExpanded = false;
-        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
     }
     connectedCallback() {
         /* if user did set a prop we use that as default behaviour */
@@ -78,27 +93,33 @@ export class TdsTableBodyRowExpandable {
     }
     sendValue() {
         this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
-        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
+        this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
     }
     onChangeHandler(event) {
         this.isExpanded = event.currentTarget.checked === true;
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '46a17e89125c4647a7a3db2c04cb8dff90dcc06a', class: {
+        return (h(Host, { key: '802679e89bc19447faa87010bd47d17447c08aca', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '656a636f2444586e1c78fb5c5de45c623a47e2b5', class: {
+            } }, h("tr", { key: '1c089710478c5effb5f6eb727e22879a80e9003d', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '65cb018b213aca84d520a737761e528a6244da8b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'c029a732fe57be3189cfe51c456cb8cdd90739c2', class: "tds-table__expand-control-container" }, h("input", { key: '8bfe49a5a02b5467cd38563244910ea7544c7c5d', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '31b764bf3293b551fc036a4d2a17db4d2c379ab6', class: "tds-expendable-row-icon" }, h("svg", { key: 'e35527f2c66ead3523736ea2dbaf0ce2fcfd3c69', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '00c9f5bca5b04898e0f17ab567e0826d39fe71c4', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '983217a323605c06a600a8db70174fd7464c826c' })), h("tr", { key: '5a2f7db44631b3d912ea93bc97b490d996803d4f', class: {
+            }, part: "row" }, h("td", { key: '6f2b7ad6cffef0c33b9cc177e423eb3edbb5b806', class: {
+                'tds-table__cell-expand': true,
+            } }, h("label", { key: 'bfe1cc4c8bb91c3e50b1cc3abb823ce22a8c8cad', class: "tds-table__expand-control-container" }, h("input", { key: '65be9c515bccfa2bd42dfdfa869b764ca863d009', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'fbf0df316c42061b1800c2db37a26ba6114a2037', class: "tds-expendable-row-icon" }, h("svg", { key: '26057fa763a2debe0ef180c4e7d7e96fdd4a08a7', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '4d66ac5c686c5c0c9ba3a02dff9d7a89f5f15e1a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'b6b611bc514d9e3e74b7c275c407da8d7b1a5ef4' })), h("tr", { key: '8cb106ff4e548936195a6ffbb18739a07cd17ad1', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '38ee3a00705e910161f43894990f987596f3f139', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("div", { key: '5fccf84bd2f7454afc3bb036210294e55f80f781', style: {
+            }, part: "expand-row" }, h("td", { key: '248e880b6793a6a36eb738646a07d82d91e15e8b', class: {
+                'tds-table__cell-expand': true,
+                'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
+                'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '7489853de5d7a2cbe0168f7e873f7bb0be01a215', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '01a7f9edf532244bd4f7205b339ffcafb93ceb20', name: "expand-row" }))))));
+            } }, h("slot", { key: '3f4d7715c224969fb2d798432019c3e45685731f', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -171,8 +192,8 @@ export class TdsTableBodyRowExpandable {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'auto' | 'hidden'",
-                    "resolved": "\"auto\" | \"hidden\"",
+                    "original": "'auto' | 'hidden' | 'visible'",
+                    "resolved": "\"auto\" | \"hidden\" | \"visible\"",
                     "references": {}
                 },
                 "required": false,
@@ -184,6 +205,24 @@ export class TdsTableBodyRowExpandable {
                 "attribute": "overflow",
                 "reflect": true,
                 "defaultValue": "'auto'"
+            },
+            "autoCollapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables auto-collapse of other expandable rows when one row is expanded"
+                },
+                "attribute": "auto-collapse",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -228,8 +267,8 @@ export class TdsTableBodyRowExpandable {
                     "text": "Sends unique table row identifier and isExpanded status when it is expanded/collapsed."
                 },
                 "complexType": {
-                    "original": "{\n    rowId: string;\n    isExpanded: boolean;\n  }",
-                    "resolved": "{ rowId: string; isExpanded: boolean; }",
+                    "original": "{\n    rowId: string;\n    isExpanded: boolean;\n    tableId: string;\n  }",
+                    "resolved": "{ rowId: string; isExpanded: boolean; tableId: string; }",
                     "references": {}
                 }
             }];
@@ -286,6 +325,12 @@ export class TdsTableBodyRowExpandable {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "tdsChange",
+                "method": "handleRowExpand",
+                "target": "body",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/table/table-footer/table-footer.js

@@ -113,6 +113,9 @@ export class TdsTableFooter {
     }
     rowsPerPageChange(event) {
         this.rowsPerPageValue = parseInt(event.detail.value);
+        if (this.paginationValue > this.pages) {
+            this.paginationValue = this.pages;
+        }
         this.emitTdsPagination();
     }
     getStyles() {
@@ -124,12 +127,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a47ca76a46aae73aca5ce929c70c2e76f8c2c853', class: {
+        return (h(Host, { key: 'ef2cd69929908fa46254c82d0799c1b1a4ee52b3', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '725d46b781fd8abe9748a1aabeff92ca419a4189', class: "tds-table__footer-row" }, h("td", { key: 'dce6cb9b634da75b37cd6181d12fbfdfa1eba34c', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '045cf654031b791addb51eb1c9a7b951cb5aec5c', class: "tds-table__pagination" }, h("div", { key: 'e321a6407dc41bb0d5ea8ff272a3ad5a73cc7bf9', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'c126a905a62dbbfad2b1f9b4e90e24ea0a5d1f7d', class: "rows-per-page" }, h("p", { key: '68da58804bf6bf222179368ff99b83aaa2e891b4' }, "Rows per page"), h("tds-dropdown", { key: '4db380d47b1944a45c31b083a69d4662c0951fa4', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: '81951e2a1405f7d8d9fb9d5602ded2652fa3574e', class: "tds-table__page-selector" }, h("input", { key: 'f9a0b0e94c31df6c7f6b78c8334f172b412fde64', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '9f03ddfb2efed8f29d932e4272f37cb7fea99366', class: "tds-table__footer-text" }, "of ", h("span", { key: '0e925460d959f6e00f83011d13e5ef2d7ed3cbb6' }, this.pages), " pages"), h("button", { key: '50da78d78b7ef971056e33ba0d0a1bac78149319', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'd69ea67ed2ff1dff364c9d3805b3cb29fd953050', name: "skip_backwards", size: "20px" })), h("button", { key: 'c3aeea0024fc6a72aea633d59c10db7729f76022', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '0df46c69a9682fb2a4ec4c75b15adc50b7d436da', name: "chevron_left", size: "20px" })), h("button", { key: '5bd78c3e14dc55421763ac78e19daac64c184e34', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'c0739697329a13021dd9cdb771b69491264962a5', name: "chevron_right", size: "20px" })), h("button", { key: 'b1317db56a99632abf132f619bc59c773e631e04', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '3d6b0997ae36fd372aeb2099a304f02282766f7e', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '73c5849886a0144c22b79d31b92a607d8f794483', class: "tds-table__page-selector" }, h("input", { key: 'a297fd5b739df5d4353b045a25ba6e480dbad03e', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'f6d1257c745638b2152843d52c494db23d26b2ca', class: "tds-table__footer-text" }, "of ", h("span", { key: '81b8c076cf322798709eafae1fad43b036127ada' }, this.pages), " pages"), h("button", { key: 'd9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'dac60e50f54fd71ae1d89e21e6140bbcbbda6680', name: "skip_backwards", size: "20px" })), h("button", { key: '39810bac01a38c71427192beea48257b7d2dd2b1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2987abbbdc7be2c7485d7bfcabcafe94983f5f54', name: "chevron_left", size: "20px" })), h("button", { key: '2252c555a816a4014c130b05ae70d2e25893f460', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'a19c83f25082c82cdac308d3538c274bbce62826', name: "chevron_right", size: "20px" })), h("button", { key: 'e06ec885711559b6e7893d90ada5057292f624e0', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/{p-e7eab204.js → p-9c87dbde.js}

@@ -154,10 +154,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             return this.filter ? labels === null || labels === void 0 ? void 0 : labels.join(', ') : labels === null || labels === void 0 ? void 0 : labels.toString();
         };
         this.setValueAttribute = () => {
-            var _a, _b, _c;
-            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '')
-                this.value = null;
-            this.host.setAttribute('value', (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((val) => val).toString()) !== null && _c !== void 0 ? _c : null);
+            var _a;
+            if (!this.value || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
+                this.host.removeAttribute('value');
+            }
+            else {
+                this.host.setAttribute('value', this.value.map((val) => val).toString());
+            }
         };
         this.handleFilter = (event) => {
             this.tdsInput.emit(event);
@@ -406,7 +409,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '1e7eacac32eba892288cd94254053ef9d09b03f7', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '8a97e693abbf5ff8973fde64c1d383e926d5c5a8', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '55d98944321d2084de6cb3fd5f70b32b5b84d518', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: 'c756dc7221c39b901524bd0c28938bd166e412bc', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '5184a8c84d24e0f13379c95fc7ceb7791f1e25ab', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '601bc322ce765ed1ee52e1ee6a0894fcb335485b', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -417,13 +420,20 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
                     ` }, this.label)), h("input", {
             // eslint-disable-next-line no-return-assign
-            ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.placeholder, value: this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
+            ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
                 this.filterFocus = false;
+                if (this.multiselect) {
+                    this.inputElement.value = this.getValue();
+                }
                 this.handleBlur(event);
             }, onFocus: (event) => {
                 this.open = true;
                 this.filterFocus = true;
+                if (this.multiselect) {
+                    this.inputElement.value = '';
+                }
                 this.handleFocus(event);
+                this.handleFilter({ target: { value: '' } });
             }, onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
@@ -449,11 +459,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'b661988b59447f31ab71e6d03da4b6226caab184', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: '71042ce1a28e3598ee37977b86ae887c68caad1d', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '855021b97bdc5e56d8a2ebcd981e143aabb8a1ef', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'c282e26376e176e3eca36261eb269bfe4cce60da', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '6bce306c718a21a8eb5320da036a7f8909467d76', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'a15e4b87b4388fd44701db482b4be4a9cfee68f2', name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'bf606ae5c67258fc04df20474cde59ff00ea90eb', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '2a1b20c4ad0acf3f6c7de06ef3e6a84e7879f398', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1c4cb2ca717f28fe16306729ae6cf555358a1a65', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '6b3a6054fa2e1f1b77c8520cdfab20ef5e7a4bf9', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/tds-breadcrumb.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
 
-const breadcrumbCss = "@charset \"UTF-8\";[role=listitem] ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}[role=listitem]:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}[role=listitem] ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px;outline-offset:0}[role=listitem].current ::slotted(*),[role=listitem] [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}[role=listitem].current:hover ::slotted(*),[role=listitem] [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}[role=listitem]::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) [role=listitem]::after{display:none}";
+const breadcrumbCss = "@charset \"UTF-8\";[role=listitem] ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}[role=listitem]:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}[role=listitem] ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px;outline-offset:0}[role=listitem].current ::slotted(*),[role=listitem] [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}[role=listitem].current:hover ::slotted(*),[role=listitem] [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}[role=listitem]::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}.current::after{display:none}";
 const TdsBreadcrumbStyle0 = breadcrumbCss;
 
 const TdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumb extends H {

package/dist/components/tds-dropdown.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-e7eab204.js';
+import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-9c87dbde.js';
 
 const TdsDropdown = TdsDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header.js

@@ -32,15 +32,6 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
         };
         this.observer = new MutationObserver(callback);
     }
-    updateRoles() {
-        const navElement = this.host.querySelector('.tds-header-component-list');
-        if (navElement) {
-            updateListChildrenRoles(navElement);
-        }
-    }
-    handleSlotChange() {
-        this.updateRoles();
-    }
     componentDidLoad() {
         const hostElement = this.host;
         const navElement = hostElement.querySelector('.tds-header-component-list');
@@ -55,7 +46,7 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends H {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '9444edcd74ab89d00450b398c6cb1a4f25ed9cd1' }, h("slot", { key: '9ee5c071427d56d71ebed3f4fb28540f26f756f4', name: "hamburger" }), h("slot", { key: 'ba6cb45780392f5682ff13b889c5500fc90dd1ce', name: "title" }), h("nav", Object.assign({ key: '1017dce61683cb6b9e1c80ef35332b6ea741c809' }, navAttributes), h("ul", { key: '043975c96c36ca0e4947d3c087f53ca05a594378', class: "tds-header-component-list" }, h("slot", { key: '71ec961aeaea24a74d5135bcf2434b34e62488f2', onSlotchange: () => this.handleSlotChange() }), h("li", { key: '1acf8c3b307df00d9751f071f9bf5b3e76bc9412', class: "tds-header-middle-spacer" }), h("slot", { key: '6e013e5ce40c2fb81f16ae8fdd338920bbc31396', name: "end" })))));
+        return (h(Host, { key: '7f42725db4686769f46fb327bc7baeb3b83f2d15' }, h("slot", { key: '26b4ab152030e56733efdb29c5ef11e3e8df1bdb', name: "hamburger" }), h("slot", { key: '7783ecdec32b28baab698ea379e7497a66da6a11', name: "title" }), h("nav", Object.assign({ key: '66a2d848b6ceed22d57080641652392dc2357405' }, navAttributes), h("ul", { key: '5b47c9a9e2210ca4c944ef6323bd5378437d8237', class: "tds-header-component-list" }, h("slot", { key: '14aaafb9b73a5f7d7fd48d0e0cfe4f4907183f27' }), h("li", { key: 'd3e6db876946d322dc14ef22ada0c92414941d2f', class: "tds-header-middle-spacer" }), h("slot", { key: '833f75ce887181221118a0dfe32ca96cf149a3ff', name: "end" })))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderStyle0; }