@scania/tegel 1.49.2 → 1.50.0-dev-test-beta.0

package/dist/collection/components/slider/slider.js

@@ -415,7 +415,7 @@ export class TdsSlider {
     }
     componentDidLoad() {
         this.calculateInputSizeFromMax();
-        if (!this.resizeObserverAdded) {
+        if (!this.resizeObserverAdded && typeof ResizeObserver !== 'undefined') {
             this.resizeObserverAdded = true;
             const resizeObserver = new ResizeObserver(() => {
                 this.calculateThumbLeftFromValue(this.value);
@@ -459,30 +459,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: 'b292fb88725097524b908a920eec96c87a242685', class: {
+        return (h("div", { key: '8b3642548f48ff352395b4d3ebdf84abf464b51d', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '93df885ffdb69b5b9261877f3489f4e0a27de114', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '730c20f6adf2cb8b00222ece8c553240fca9fc6a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '9f35e897044114dd9a5c97a66e9a335d4c09975d', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '74fe5f97050ae8fa970d0d2d00145a1f20b9d728', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '0d7a1a204e4893cb451e00976825ed69b297d36f', class: {
+            } }), h("div", { key: '2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '8e02adb2e59e5425b8a2695e04d1de0c0db22808', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '3e1c8b9d0403536479a68c40dd30bae04203fb23', class: "tds-slider__input-values" }, h("div", { key: '9fc1090387cfeb4d4e7b6bad0676df1b49057ede', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '996317c2a48374311a2b654994dc99d5d62555dd', class: "tds-slider__controls" }, h("div", { key: '07aeeabdcd75d6238ac7ee458aee91ca951bc748', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'e42b57eb0db364ad919398201fffe34fb167eb2f', name: "minus", size: "16px" })))), h("div", { key: '6ece66a7e5b6058cc2c9991b3625c2ae7f474fa7', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'ceb9140f2bf24827913ae5adfc911827f6e487d1', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'd0b6cb025543e7de8d68d86b9d3b7ac91ec4782a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '40355beb56539ade6aadc6b75aa8a5444ddeb512', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '7461b0e104ee03cf51c9e84ab8af06df78b6b12b', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: 'ce065240c807cf75544efd3ecc2c5b1b45e0b987', class: "tds-slider__input-values" }, h("div", { key: 'ac8b1a0d7cd44e079e7739e9697912a7f8c65c62', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'e85dfafe22e306fa8f9c2a0ee2c094caa0937abf', class: "tds-slider__controls" }, h("div", { key: 'b21861744b1ba29cc6d5566d2d466c507b55f54e', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'b31ed68e1b5a96d85951c928abf4dae472889050', name: "minus", size: "16px" })))), h("div", { key: 'b4c46afe353a403e2f2ebb35e40bad3946f83e23', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '0c4662ea24810f52b6415f4bf205e1dff4250d7c', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '39f70859eecd83a4f962288e7d06f61719260297', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '9f6214318aaaec0c792a94b3241dbcd9ce321130', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: '91f7514a2f8533a91b90af108fe5a7559019c387', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: 'd70dbc3e02dda21538a1c709ee9fb94bf1517766', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'e25e3f91631040ce0b2aea1ae5007a9b989f239c', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'aa5ceb99150a8387e9b01becd054e3beee185955', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'f21169a0dc0df70287c680e3f5ba32c4ae8e263f', class: "tds-slider__value" }, this.value, h("svg", { key: '1cf441da18bfc2d8b55a009073dea7ef948ddcad', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '050ac1177f3b4526f94a1ff4418b746c56463009', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '8817050cc1ead7468139f7d166b61ca3d977c578', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b1b3ecfbedd63039e66aabc10db98b7b25c04b6d', class: "tds-slider__value" }, this.value, h("svg", { key: '80e22bbb6b56c85f754c7cfae63f21d7adb7eb56', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ce11c849ba43904f2d2d1540bb60c12a1e695ee', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '44205e90c8ff3e6506e155a66b6ce53aa191f25e', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: 'b3132b32773468761ead8f3f3e035df8b51fe319', class: "tds-slider__input-values" }, h("div", { key: 'faa0e4b8e5c60430d90902bb97c80e621407cca5', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '05f9d258e85202769af4cc8c1a665bb08af9d8bd', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: 'cb5eda3e508e4bae438e1e282543fc20e2ff4b84', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '0e0f1d2d1ee7630b9b802291395581add2324b7d', class: "tds-slider__controls" }, h("div", { key: 'b9675d90ec44b9a2b0b9880b19c1abd5d02ad98e', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '6af836d67b5fdf5c5c7c2c5de68acb6781d4e020', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '099b5dfac47680c3a2d882273856689d9bdd3953', class: "tds-slider__input-values" }, h("div", { key: '68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '481a52db19f0bc035c43a252e005e5304a27bf9e', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '5361928ed0dcf9cb5cb873a0b769ea0af76c809c', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'abaa88dc33a0193360999df8ba6fe04569ff12aa', class: "tds-slider__controls" }, h("div", { key: '294ebb18d08ea797ee481f38f2b8c7f57b368ce2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '637b1f5eb5744749b534be62848c2a5f33a20475', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -513,7 +513,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label",
                 "defaultValue": "''"
             },
@@ -533,7 +533,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value",
                 "defaultValue": "'0'"
             },
@@ -553,7 +553,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "min",
                 "defaultValue": "'0'"
             },
@@ -573,7 +573,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "max",
                 "defaultValue": "'100'"
             },
@@ -593,7 +593,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "ticks",
                 "defaultValue": "'0'"
             },
@@ -613,7 +613,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "show-tick-numbers",
                 "defaultValue": "false"
             },
@@ -633,7 +633,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tooltip",
                 "defaultValue": "false"
             },
@@ -653,7 +653,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -673,7 +673,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "read-only",
                 "defaultValue": "false"
             },
@@ -693,7 +693,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "controls",
                 "defaultValue": "false"
             },
@@ -713,7 +713,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "input",
                 "defaultValue": "false"
             },
@@ -733,7 +733,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "step",
                 "defaultValue": "'1'"
             },
@@ -753,7 +753,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "''"
             },
@@ -773,7 +773,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "thumb-size",
                 "defaultValue": "'lg'"
             },
@@ -793,7 +793,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "snap",
                 "defaultValue": "false"
             },
@@ -813,7 +813,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label",
                 "defaultValue": "''"
             },
@@ -833,7 +833,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "slider-id",
                 "defaultValue": "generateUniqueId()"
             },
@@ -853,7 +853,7 @@ export class TdsSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-read-only-aria-label",
                 "defaultValue": "''"
             }

package/dist/collection/components/spinner/spinner.js

@@ -7,7 +7,7 @@ export class TdsSpinner {
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: '6b8e0e3672d59119b4c81a514c2ce3c7aec0bdce', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'f311853629ac196027dbc6a7d4ae8df0df19a1ff', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '0c78f2bb689a72bb5ae7c1e0329fb943d517d352', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: '6bc92547f2513496d52ff297e0edc981c5dd7d89', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '4997ea9dffe315deb470c76df65a3da2a5e576a0', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '90dd9b3586801519aa62977c27099306f587db6e', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
     static get originalStyleUrls() {
@@ -38,7 +38,7 @@ export class TdsSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
@@ -58,7 +58,7 @@ export class TdsSpinner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "variant",
                 "defaultValue": "'standard'"
             }

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

@@ -37,7 +37,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '71ffa72c7207f344cfd9e614354b52c57e133a36' }, h("div", { key: '9e738ad1d10d83c7a3f29fe4602fdb698ff4a574', 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: '6d7c25472829f5459bb97d8f5a1a0cec3343f595', 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: 'bd3f88a33114c3eee0fe6402ad4365ad1d4a5b10', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: 'cc7a809cc19505b21a748fe5eb58cc8900188625', name: "label" }))))));
+        return (h(Host, { key: 'c76b0023f433c881360b9a98ad96d0a163a0d99d' }, h("div", { key: 'ea169fe4d94d0b33e36eb52ffeb2e08982c2704c', 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: 'c6f3f8f2d0ba7b2c4ed15abc45551bacf69e36b0', 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: '9ff61949c0de2d74962a6a10e46915bd5484b282', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '6c13e8acd45be0e104207b8daaa9ef64ec1453ee', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,7 @@ export class TdsStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "index"
             },
             "state": {
@@ -88,7 +88,7 @@ export class TdsStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "state",
                 "defaultValue": "'upcoming'"
             },
@@ -108,7 +108,7 @@ export class TdsStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-current"
             }
         };

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

@@ -56,7 +56,7 @@ export class TdsStepper {
         });
     }
     render() {
-        return (h(Host, { key: 'a62077cf8b1936e7109eea64cad0ceb67a45c676' }, h("div", { key: 'f958fcd53b074ac8ac72d055162e738116e94956', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'e9dfa6c14ec134baafe5a58394337b09ca091809' }))));
+        return (h(Host, { key: '6639dd75f7c2e87d85165810b90608c28129f5ee' }, h("div", { key: 'def675a425fb28d4c14153278a283bf047ef3a5e', role: "list", "aria-label": this.tdsAriaLabel, class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: '5ae928f0400ca4bf419f5dc15ac4e07583c7235b' }))));
     }
     static get is() { return "tds-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +88,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
@@ -108,7 +108,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label-position",
                 "defaultValue": "'below'"
             },
@@ -128,7 +128,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
@@ -148,7 +148,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "hide-labels",
                 "defaultValue": "false"
             },
@@ -168,7 +168,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "stepper-id",
                 "defaultValue": "generateUniqueId()"
             },
@@ -188,7 +188,7 @@ export class TdsStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label",
                 "defaultValue": "'Progress steps'"
             }

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

@@ -111,11 +111,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: '677bf0b8c1df0154c90438ad8af1c947b701a1f8', class: {
+        return (h(Host, { key: '22e1189b298e2af0346a3a04126eed47528f1169', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: '673a4b1bae0b0430760697b0312611d0a91421bf', style: this.getStyles(), class: {
+            } }, h("table", { key: '9a756d4799eba3dc75b6a7d5cb75c53a21509949', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -126,7 +126,7 @@ export class TdsTable {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '218dfb52cd9498b0c72839dd6d0c2f4bb71a89cb' }))));
+            } }, h("slot", { key: '2f0e653f4d44b8ada5933ab2389338b92ed48493' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -317,7 +317,7 @@ export class TdsTable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "horizontal-scroll-width",
                 "defaultValue": "null"
             },
@@ -337,7 +337,7 @@ export class TdsTable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "table-id",
                 "defaultValue": "generateUniqueId()"
             }

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

@@ -82,13 +82,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '8344d3c796f2f56305924347e161d08039ae9c72', class: {
+        return (h(Host, { key: '1b2e629f6e69dc781b31a858762a310cde81283a', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-            } }, h("td", { key: '330bec9031af90243469ab548b638a4be86dd40d', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '0af9c581a3cf0db8c94cd68cd9e500ba51fe2501' }))));
+            } }, h("td", { key: '809dfc0ebb81dfb243bdfad230263d5c899baaee', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '1e2286ec6f5d982d3e2dc0ec82451689b585c360' }))));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -204,7 +204,7 @@ export class TdsTableBodyCell {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "col-span"
             },
             "rowSpan": {
@@ -223,7 +223,7 @@ export class TdsTableBodyCell {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "row-span"
             }
         };

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

@@ -82,7 +82,7 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '55c8cd1004779a0a3a963c33b8466cc913ca287f', class: {
+        return (h(Host, { key: '8dc24acf73acb59732dcd490d792545a63679d2a', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -118,7 +118,7 @@ export class TdsTableBodyInputWrapper {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "show-icon",
                 "defaultValue": "true"
             }

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

@@ -138,27 +138,27 @@ export class TdsTableBodyRowExpandable {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a9d04614f8d871750cb2fa00b1a337d6f9e28ace', class: {
+        return (h(Host, { key: '4cb9b9ae686cff6a0c9f7a73a2eb72eb4444859a', 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: '3793225d2c27f912c163412d60a20b02bd2371d8', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: 'd9df910f8c230d7a0289c887a6a9cea5af569d9d', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
                 'tds-table__row--selected': this.selected,
-            }, part: "row" }, this.multiselect && (h("td", { key: 'e3f677c5a981643bd962322c2af8fa5f211dfedf', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'afc00dda710e7e264c37211b4f616899939d1430', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: 'b6ec0d7bd81f5006cd3947b2c3381db72b879e37', class: {
+            }, part: "row" }, this.multiselect && (h("td", { key: 'e7b76c0efb3fc1c6700980e0d48a681458eacd6f', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'e707b13211b328beb76ffe78ff874bbd863483ee', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: '6150b96c6b00407685d8f059c083bbd159a27938', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '4f509a0334697c59ee574a9913ced773923c7e8d', class: "tds-table__expand-control-container" }, h("input", { key: 'b9dc3b631f37bf872c4e0072a9bca78980d69252', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'bf6624feb9e7be71c1abf792c8ea9d9009d08ff2', class: "tds-expendable-row-icon" }, h("svg", { key: '6cd57f6ab7df0bed1a5253c4cad14c488ca9b086', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1f06b5699c21f9ba200ceb6fe2103510061c86cb', "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: 'dff5aa77425f0bae12cf17bbdd2e46c4d7e54e68' })), h("tr", { key: '1e087bbf254e7fb07a7673ebef3008be850c33db', class: {
+            } }, h("label", { key: '78df3bcaf49fb79d37d958a94645f6eaffbcdfba', class: "tds-table__expand-control-container" }, h("input", { key: '93a7d13ac6fd8a43e02ca67abadbcf1f37230cf8', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '4e9399e6e6520e24a6f40cf0a4853f436c18bd9c', class: "tds-expendable-row-icon" }, h("svg", { key: 'cde3749b3716a1b96e0f93fe6d140f2e0d1a5174', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '98803ddb93a854f0734a080641bd19c6983f63ea', "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: 'f821c49713d75972ce698c199da7b20eae103530' })), h("tr", { key: '1ffedd81c1410d80f31be60737d401a8622d104a', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'bd1c81dcbadd11aca4483f481e06392d0a508a25', class: {
+            }, part: "expand-row" }, h("td", { key: '2d1f4ef38dcea38e4154ea4a788404c9b44f0b9a', 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: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: 'c99022dc16a229a351bc800989c1b500701b8678', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: 'ab809e98c84bc5c3bc5c1233ec20b18c80e569b7', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '2e8dbbb470f6ac21eee98a712a3542774d5445a5', name: "expand-row" }))))));
+            } }, h("slot", { key: '0a540ac54a7b6e5c1d1567e5178a0bd624b76d2f', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -190,7 +190,7 @@ export class TdsTableBodyRowExpandable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "col-span",
                 "defaultValue": "null"
             },
@@ -269,7 +269,7 @@ export class TdsTableBodyRowExpandable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "auto-collapse",
                 "defaultValue": "false"
             },

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

@@ -18,6 +18,8 @@ export class TdsTableFooter {
         this.rowsperpage = true;
         /** Set available rows per page values */
         this.rowsPerPageValues = [10, 25, 50];
+        /** Set rows per page dropdown open direction */
+        this.rowsPerPageDropdownOpenDirection = 'auto';
         /** Sets the number of pages. */
         this.pages = 0;
         /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
@@ -179,14 +181,14 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8cf70f3e746f05b392b4b95d54bfece7220633e4', class: {
+        return (h(Host, { key: 'b9b2a655adbdac509705cf06f8b2cdc0e3b9a0ae', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5cb6329b2555cc8b5d225509523e231c446b3c4a', class: "tds-table__footer-row" }, h("td", { key: '6f80504a5a0ff08150815f92981ca3fc6daaefab', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '14412d3db567342d7d24a52291de9468306111cc', class: "tds-table__pagination" }, h("div", { key: 'e7d3853740a5173322cb35670e39485e9ffb8c11', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '9f92698875cacaa25910597a7361fcbcda4318c6', class: "rows-per-page" }, h("p", { key: 'f046870d8bdbe7f90625e36a37b8b3720f72ff12' }, "Rows per page"), h("tds-dropdown", { key: 'c75c1ef3c1a66e8ec7a130d24dca504148b8113e', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: 'dd171addd35fdfb1f4a90e545dd3d4a56568436f', class: "tds-table__page-selector" }, h("input", { key: 'af61e22ec0dfa8468ee32ed0343aae28bc54f101', ref: (element) => {
+            }, style: this.getStyles() }, h("tr", { key: 'd6f7af8c3ad70cdae194eb633313f815b8cc400a', class: "tds-table__footer-row" }, h("td", { key: '1e5bd029e2cb154e8c4eb61a566311166b4b135f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '60abf7e8650298f0ec56bc48fc72488c3786e674', class: "tds-table__pagination" }, h("div", { key: 'aa3d9e8d9124efd479811b1e9c5e26437f798c54', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '1f6ed9da5ca83748e507ce0f5193abaf5e36c213', class: "rows-per-page" }, h("p", { key: '8319a28772407a09752e5aa0646db4f83f2ce926' }, "Rows per page"), h("tds-dropdown", { key: 'cc7596459725ebd14500179a5e15f80404df41e0', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event), openDirection: this.rowsPerPageDropdownOpenDirection }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '3b7d98daceb0b48ceda16618914033c69eca0e10', class: "tds-table__page-selector" }, h("input", { key: 'd050a2fdf9c4cb49447ab84eaa5b4da60339ff53', ref: (element) => {
                 if (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: 'd741a6d807bcbc9d3b132092b827b99ac7c27764', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ba74d91e5ed8796c0c17e73e53f4ea9385cdbdb5' }, this.pages), " pages"), h("button", { key: '7ba4cb7b425c0aba89cde7e925d3b50ebd28070d', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '2b6ddc50e9d584cf4e7530a6f3a8a20b67035c89', name: "skip_backwards", size: "20px" })), h("button", { key: '5dd123e068da4d89552c6403aefa32e6c037c571', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '86da02b6cde0c0aac91a5bbde6a705c8499f7516', name: "chevron_left", size: "20px" })), h("button", { key: 'd8208da719503be3edc6397a82d196c76beac598', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f52872c6cf209a65658f4cf8f9ca7f309a94793b', name: "chevron_right", size: "20px" })), h("button", { key: 'b1e5db7b0dffd15b920db01ed3f02d5c5940e288', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '52ec734eaa1992709ac6ffc32f6d493e8ebd86a9', name: "skip_forward", size: "20px" })))))))));
+            }, 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: 'fa177ca38fd59d80de9f75eb64e27d516b99bf18', class: "tds-table__footer-text" }, "of ", h("span", { key: 'e15b05026a1ae3e0b5f01e6f3604cf2d88ed0cbb' }, this.pages), " pages"), h("button", { key: '12b29edbd391eb68dea8bc7439f4cc154f81ed47', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'b365b40363e6036e0e7500d121e8af86ea7f9097', name: "skip_backwards", size: "20px" })), h("button", { key: '6458ce6240499c1d801506756c6bdda25893bea3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '9a0f4b8696d5437758a9b255b9e5abb4db40e9f1', name: "chevron_left", size: "20px" })), h("button", { key: '9672939723a0359217578ddd9055d2c269b201ec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f84e8a062daebddafef3f58e17015df1a741eca0', name: "chevron_right", size: "20px" })), h("button", { key: '9d00d09e9bf6b59664faa828ec85e3a43b3b17e2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '815192910a462e07046048d84bbddb5cf2f850ba', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -280,6 +282,26 @@ export class TdsTableFooter {
                 "setter": false,
                 "defaultValue": "[10, 25, 50]"
             },
+            "rowsPerPageDropdownOpenDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down' | 'auto'",
+                    "resolved": "\"auto\" | \"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set rows per page dropdown open direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows-per-page-dropdown-open-direction",
+                "defaultValue": "'auto'"
+            },
             "pages": {
                 "type": "number",
                 "mutable": false,
@@ -316,7 +338,7 @@ export class TdsTableFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "cols",
                 "defaultValue": "null"
             }

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

@@ -90,11 +90,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '6694732da4046fe06dd5583dabcd7f08b1eca27e', class: {
+        return (h(Host, { key: '081f1f38317966710af212df1f9ce7c0abe5e43d', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'ae44f1f20feedd4833dcad0f5eb166dbcb8271c2' }, this.multiselect && (h("th", { key: '7164dda86ee3eb21dc04c11ebd0dd074a8fdf00d', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '791a29bf597e9395c84bae6d408f146f8d240967', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '6bad99498d9e67dfe068e393ed15dc229a6229de', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '5818a44e2ce485265fecef36135dbbe113ac2bdf', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a8cd6f4cde24922bf8a1998a4120c7ff02cf60f3' }))));
+            } }, h("tr", { key: 'd7d544ea5dd7d54c7599797fd22f5dcc610740d9' }, this.multiselect && (h("th", { key: 'de1d90c31d0bea8c277a748c4f9a5cda5251cb2f', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '3e62bed00d239585d752e76f522f656f796084f5', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '0500722422e1512430fd01050fac00bfa5d0f165', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '6b71efdaec2bd25f3a28077f90c42dc5bc950339', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '32f0040445889329eabd3f2084890721d1799636' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }
@@ -188,7 +188,7 @@ export class TdsTableHeaderRow {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "indeterminate",
                 "defaultValue": "false"
             }