@scania/tegel 1.40.0 → 1.41.0-beta.0

package/dist/components/tds-step.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-stepper-icon-step-border-color-warning);color:var(--tds-stepper-icon-step-border-color-warning)}:host [role=listitem] .content-container.success{background-color:var(--tds-stepper-icon-step-border-color-success);border-color:var(--tds-stepper-icon-step-border-color-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{background-color:var(--tds-stepper-background);color:var(--tds-stepper-color)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
-const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -11,17 +10,14 @@ const propToStateMap = {
     hideLabels: 'hideLabels',
 };
 const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
@@ -48,8 +44,8 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
         return (h(Host, { key: '871df74d99ed0bdf15fa82e0c2980b08b94735a8' }, h("div", { key: 'e108eb5e43390635fbd6020195cb7e6a4912c7c2', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '8940a00dcd0001d6d264aff8cbc9331d4d890d49', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'daa62f4d9347c571d214b1b9eb68b7d56418aed2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '68a20d3daded858cf1188f43747edb77ed2c9cbf', name: "label" }))))));
     }
     get el() { return this; }
-    static get style() { return TdsStepStyle0; }
-}, [1, "tds-step", {
+    static get style() { return stepCss; }
+}, [257, "tds-step", {
         "index": [1],
         "state": [1],
         "tdsAriaCurrent": [1, "tds-aria-current"],

package/dist/components/tds-stepper.js

@@ -1,20 +1,31 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
 
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
-const TdsStepperStyle0 = stepperCss;
 
 const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -60,8 +71,8 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         "size": ["handleSizeChange"],
         "hideLabels": ["handleHideLabelsChange"]
     }; }
-    static get style() { return TdsStepperStyle0; }
-}, [1, "tds-stepper", {
+    static get style() { return stepperCss; }
+}, [257, "tds-stepper", {
         "orientation": [1],
         "labelPosition": [1, "label-position"],
         "size": [1],

package/dist/components/tds-table-body-input-wrapper.js

@@ -1,15 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableBodyInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyInputWrapper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -89,15 +91,15 @@ const TdsTableBodyInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTab
         }
     }
     render() {
-        return (h(Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
+        return (h(Host, { key: '8030b00df873e3a242708a9b4fe88b4ad618d069', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
             } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyInputWrapperStyle0; }
-}, [1, "tds-table-body-input-wrapper", {
+    static get style() { return tableBodyInputWrapperCss; }
+}, [257, "tds-table-body-input-wrapper", {
         "showIcon": [4, "show-icon"],
         "renderSlot": [32],
         "inputFocused": [32],

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

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
 
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;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)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
-const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
 
 const relevantTableProps = [
     'verticalDividers',
@@ -11,18 +10,27 @@ const relevantTableProps = [
     'modeVariant',
 ];
 const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRowExpandable extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.internalTdsRowExpanded = createEvent(this, "internalTdsRowExpanded", 6);
         this.tdsChange = createEvent(this, "tdsChange", 6);
+        /** In case that automatic count of columns does not work, user can manually set this one.
+         *  Take in mind that expandable control is column too */
         this.colSpan = null;
+        /** ID for the table row. Randomly generated if not specified. */
         this.rowId = generateUniqueId();
-        this.expanded = undefined;
+        /** Controls the overflow behavior of the expandable row content */
         this.overflow = 'auto';
+        /** Sets isExpanded state to true or false internally */
+        /** Enables auto-collapse of other expandable rows when one row is expanded */
         this.autoCollapse = false;
+        /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -127,8 +135,8 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
     static get watchers() { return {
         "expanded": ["watchExpanded"]
     }; }
-    static get style() { return TdsTableBodyRowExpandableStyle0; }
-}, [1, "tds-table-body-row-expandable", {
+    static get style() { return tableBodyRowExpandableCss; }
+}, [257, "tds-table-body-row-expandable", {
         "colSpan": [2, "col-span"],
         "rowId": [513, "row-id"],
         "expanded": [516],

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

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-44f5b5e1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-Ca3wGDna.js';
 
 const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){border-bottom:1px solid var(--tds-table-divider-hover)}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}: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)}";
-const TdsTableBodyRowStyle0 = tableBodyRowCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -10,14 +9,19 @@ const relevantTableProps = [
     'compactDesign',
 ];
 const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.tdsClick = createEvent(this, "tdsClick", 6);
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -84,8 +88,8 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
             }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyRowStyle0; }
-}, [1, "tds-table-body-row", {
+    static get style() { return tableBodyRowCss; }
+}, [257, "tds-table-body-row", {
         "selected": [516],
         "disabled": [516],
         "clickable": [516],

package/dist/components/tds-table-body.js

@@ -1,7 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
-const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -9,23 +8,24 @@ const relevantTableProps = [
     'zebraMode',
 ];
 const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
         this.multiselectArray = [];
-        this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -71,8 +71,8 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
             } }, h("slot", { key: '61a0ec649d2f7f51ca386c46335a6ae018c993d0' })));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyStyle0; }
-}, [4, "tds-table-body", {
+    static get style() { return tableBodyCss; }
+}, [260, "tds-table-body", {
         "multiselect": [32],
         "enablePaginationTableBody": [32],
         "expandableRows": [32],

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

@@ -1,11 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$5 } from './p-44f5b5e1.js';
-import { d as defineCustomElement$4 } from './p-2a2d66fe.js';
-import { d as defineCustomElement$3 } from './p-6ef207b2.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$5 } from './p-Ca3wGDna.js';
+import { d as defineCustomElement$4 } from './p-BhQM9_yR.js';
+import { d as defineCustomElement$3 } from './p-Ee9QeMgy.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
-const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -15,11 +14,32 @@ function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
 }
 const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsPagination = createEvent(this, "tdsPagination", 7);
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -63,18 +83,6 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
             this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
-        this.pagination = false;
-        this.paginationValue = 1;
-        this.rowsperpage = true;
-        this.rowsPerPageValues = [10, 25, 50];
-        this.pages = null;
-        this.cols = null;
-        this.columnsNumber = 0;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -147,8 +155,8 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         }))))), h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', 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: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return this; }
-    static get style() { return TdsTableFooterStyle0; }
-}, [1, "tds-table-footer", {
+    static get style() { return tableFooterCss; }
+}, [257, "tds-table-footer", {
         "pagination": [516],
         "paginationValue": [1538, "pagination-value"],
         "rowsperpage": [516],

package/dist/components/tds-table-header-input-wrapper.js

@@ -1,15 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderInputWrapper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -78,8 +80,8 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
             } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
     }
     get host() { return this; }
-    static get style() { return TdsTableHeaderInputWrapperStyle0; }
-}, [1, "tds-table-header-input-wrapper", {
+    static get style() { return tableHeaderInputWrapperCss; }
+}, [257, "tds-table-header-input-wrapper", {
         "showIcon": [4, "show-icon"],
         "compactDesign": [4, "compact-design"],
         "renderSlot": [32],

package/dist/components/tds-table-header.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-44f5b5e1.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-Ca3wGDna.js';
 
 const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
-const TdsTableHeaderStyle0 = tableHeaderCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -12,14 +11,18 @@ const relevantTableProps = [
     'noMinWidth',
 ];
 const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderRow extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsSelectAll = createEvent(this, "tdsSelectAll", 6);
+        /** @deprecated Deprecated, use selected instead. */
         this.allSelected = false;
-        this.selected = undefined;
+        /** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
         this.disabled = false;
+        /** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -95,8 +98,8 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
             } }, h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
     }
     get host() { return this; }
-    static get style() { return TdsTableHeaderStyle0; }
-}, [1, "tds-table-header", {
+    static get style() { return tableHeaderCss; }
+}, [257, "tds-table-header", {
         "allSelected": [1540, "all-selected"],
         "selected": [1540],
         "disabled": [1540],

package/dist/components/tds-table-toolbar.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
-const TdsTableToolbarStyle0 = tableToolbarCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -11,13 +10,18 @@ const relevantTableProps = [
     'horizontalScrollWidth',
 ];
 const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsFilter = createEvent(this, "tdsFilter", 7);
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -79,8 +83,8 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
             }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7310ec2851d440ba6529eb2d48bb20bcb508429f', class: "tds-table__upper-bar-flex" }, h("div", { key: '5b901252d433968edb04de20a25ea9c09bb39b4b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '661f8de9fe38cd72b098251b027c7e6f554033e5', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '8d00d01e2ac92c75f95dc6ae89e7b8769cde6dc1', name: "start" })), h("div", { key: 'fd28cb512ed5ad997cdb1f0b1dff8f7489f95db5', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'fb2649d623a21eeb1a8c3ed5c512d02d7bbb2efc', class: "tds-table__searchbar" }, h("input", { key: '9cd1284bec12081a2e99996eb6bd160ac926b751', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '015060f9c59d06c430fabb0acabb8b476a477616', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '5f990c7f452a46bb0471dd658f24afd848d029e9', name: "search", size: "20px" })))), h("slot", { key: 'a91b2aee680ef316d2fdd46d46bfe9ec3eb3e314', name: "end" })))));
     }
     get host() { return this; }
-    static get style() { return TdsTableToolbarStyle0; }
-}, [1, "tds-table-toolbar", {
+    static get style() { return tableToolbarCss; }
+}, [257, "tds-table-toolbar", {
         "tableTitle": [513, "table-title"],
         "filter": [516],
         "tdsSearchAriaLabel": [1, "tds-search-aria-label"],

package/dist/components/tds-table.js

@@ -1,24 +1,42 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
 
 const tableCss = ":host{--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,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-table--horizontal-scroll::-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}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
-const TdsTableStyle0 = tableCss;
 
 const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.internalTdsTablePropChange = createEvent(this, "internalTdsTablePropChange", 6);
+        /** Enables style with vertical dividers between columns */
         this.verticalDividers = false;
+        /** Enables style where Table toolbar, rows and footer are less high */
         this.compactDesign = false;
-        this.noMinWidth = undefined;
+        // TODO: Due to unknown reason, one of this items has to be left as is.
+        //  If all are false, it seems like emitting is not properly done and it affects other events in Table.
+        //  Try setting it and observe text-align set on header cell
+        /** Enables multiselect feature of Table */
         this.multiselect = false;
+        /** Enables extended row feature of Table */
         this.expandableRows = false;
+        /** Enables Table to take 100% available width with equal spacing of columns */
         this.responsive = false;
+        /** Variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Enables zebra stripe mode on the table rows or columns. */
         this.zebraMode = 'none';
+        /** Width of the table, used as the constraint for horizontal scrolling.
+         * **NOTE**: this will disable usage of the responsive flag
+         * */
         this.horizontalScrollWidth = null;
+        /** ID used for internal Table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
+         * as the default ID is random and will be different every time.
+         */
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
         this.enableHorizontalScrollFooterDesign = false;
@@ -120,8 +138,8 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         "modeVariant": ["modeVariantChanged"],
         "horizontalScrollWidth": ["widthChanged"]
     }; }
-    static get style() { return TdsTableStyle0; }
-}, [1, "tds-table", {
+    static get style() { return tableCss; }
+}, [257, "tds-table", {
         "verticalDividers": [516, "vertical-dividers"],
         "compactDesign": [516, "compact-design"],
         "noMinWidth": [516, "no-min-width"],