@scania/tegel 1.25.0-fix-a11y-checkbox-beta.0 → 1.25.0-header-item-slot.0

package/dist/collection/components/card/card.js

@@ -20,14 +20,13 @@ export class TdsCard {
             const usesHeaderSlot = hasSlot('header', this.host);
             const usesSubheaderSlot = hasSlot('subheader', this.host);
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
-            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -47,8 +46,9 @@ export class TdsCard {
             [this.imagePlacement]: !this.stretch,
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
-        const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '3386e1f0d6536d31d7207c074a5e0f16ebf18a77', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '03c6bf925c58c0634797f8370c68cc360f54cc0c', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: () => {
+                this.handleClick();
+            } }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -22,7 +22,6 @@ export class TdsCheckbox {
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
-        this.tdsAriaLabel = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -51,21 +50,12 @@ export class TdsCheckbox {
             this.indeterminate = false;
         }
     }
-    connectedCallback() {
-        const hasLabeledAndDescribedBy = this.host.getAttribute('aria-describedby') && this.host.getAttribute('aria-labelledby');
-        if (!hasLabeledAndDescribedBy) {
-            console.warn('Tegel Checkbox component: aria-describedby or aria-labelledby attributes are missing');
-        }
-        if (!this.tdsAriaLabel) {
-            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
-        }
-    }
     render() {
-        return (h("div", { key: '2e5501c960153741f6362c414f338a2d66ff5c54', class: "tds-checkbox" }, h("input", { key: '02f0f43e0fb2ff6fec330df2ec08b4558f7bbf60',
+        return (h("div", { key: '1d0a8257cd1710277e076b4a277dff2c0c89b3d8', class: "tds-checkbox" }, h("input", { key: '689144e40c0be61db6b82aa6eaeb7ff3d09d7d72',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-label": this.tdsAriaLabel, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '4e8b53749d6f3c88d8b77087773eac500876c0ba', htmlFor: this.checkboxId }, h("slot", { key: 'e595c87bfd340b95651761ee3a7d057e55b70a9b', name: "label" }))));
+            } }), h("label", { key: '534eed7aa114861c528be0b776879484a35348bf', htmlFor: this.checkboxId }, h("slot", { key: 'db59bcc78f7f2be94037651b880a5ef149b90747', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -204,23 +194,6 @@ export class TdsCheckbox {
                 },
                 "attribute": "value",
                 "reflect": false
-            },
-            "tdsAriaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Value to be used for the aria-label attribute"
-                },
-                "attribute": "tds-aria-label",
-                "reflect": false
             }
         };
     }

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

@@ -31,16 +31,48 @@ export class TdsHeaderItem {
             this.updateSlotted(isImage, addImageClass);
         }
     }
+    /**
+     * Read the native "order" attribute on the host and update the CSS order accordingly.
+     * If the attribute "order" has the value "end", the order is set to 1. Otherwise, 0.
+     */
+    updateOrder() {
+        if (this.host.getAttribute('order') === 'end') {
+            this.host.style.order = '1';
+        }
+        else {
+            this.host.style.order = '0';
+        }
+    }
     componentDidLoad() {
         this.slotEl = this.host.shadowRoot.querySelector('slot');
         this.updateSlottedElements();
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        // Set the order on initial load.
+        this.updateOrder();
+        // Create a MutationObserver to listen for changes on the "order" attribute.
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'order') {
+                    this.updateOrder();
+                }
+            });
+        });
+        // Start observing the host element for attribute changes (specifically "order").
+        this.mutationObserver.observe(this.host, {
+            attributes: true,
+            attributeFilter: ['order'],
+        });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     }
     render() {
-        return (h(Host, { key: '7317ab5668685390e2671908dd41855715267b1c' }, h("tds-core-header-item", { key: 'befc861a437912245c22413bbf774617fa84b289', class: {
+        return (h(Host, { key: 'b25cc4090e1352897e28022478961853954a4861' }, h("tds-core-header-item", { key: 'a4b3dea5fd3245485024e2b06f1819d6fc302826', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'f4405b3881dc0d6e4b86f96aa90d0b045c7bf2d8' }))));
+            } }, h("slot", { key: '4a1693dee4cb3ee71b686178449d6e59bbba65b4' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,3 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+const disabledRules = ['page-has-heading-one', 'landmark-one-main'];
 export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();

package/dist/components/{p-3a7f88ff.js → p-368c544b.js}

@@ -36,16 +36,48 @@ const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem exten
             this.updateSlotted(isImage, addImageClass);
         }
     }
+    /**
+     * Read the native "order" attribute on the host and update the CSS order accordingly.
+     * If the attribute "order" has the value "end", the order is set to 1. Otherwise, 0.
+     */
+    updateOrder() {
+        if (this.host.getAttribute('order') === 'end') {
+            this.host.style.order = '1';
+        }
+        else {
+            this.host.style.order = '0';
+        }
+    }
     componentDidLoad() {
         this.slotEl = this.host.shadowRoot.querySelector('slot');
         this.updateSlottedElements();
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        // Set the order on initial load.
+        this.updateOrder();
+        // Create a MutationObserver to listen for changes on the "order" attribute.
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'order') {
+                    this.updateOrder();
+                }
+            });
+        });
+        // Start observing the host element for attribute changes (specifically "order").
+        this.mutationObserver.observe(this.host, {
+            attributes: true,
+            attributeFilter: ['order'],
+        });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     }
     render() {
-        return (h(Host, { key: '7317ab5668685390e2671908dd41855715267b1c' }, h("tds-core-header-item", { key: 'befc861a437912245c22413bbf774617fa84b289', class: {
+        return (h(Host, { key: 'b25cc4090e1352897e28022478961853954a4861' }, h("tds-core-header-item", { key: 'a4b3dea5fd3245485024e2b06f1819d6fc302826', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'f4405b3881dc0d6e4b86f96aa90d0b045c7bf2d8' }))));
+            } }, h("slot", { key: '4a1693dee4cb3ee71b686178449d6e59bbba65b4' }))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderItemStyle0; }

package/dist/components/{p-96d51054.js → p-6c2d5c85.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { a as convertToString } from './p-b1d21573.js';
-import { d as defineCustomElement$2 } from './p-ece57b20.js';
+import { d as defineCustomElement$2 } from './p-eac79032.js';
 import { d as defineCustomElement$1 } from './p-ad77fb02.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";

package/dist/components/{p-ece57b20.js → p-eac79032.js}

@@ -28,7 +28,6 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
-        this.tdsAriaLabel = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -57,21 +56,12 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
             this.indeterminate = false;
         }
     }
-    connectedCallback() {
-        const hasLabeledAndDescribedBy = this.host.getAttribute('aria-describedby') && this.host.getAttribute('aria-labelledby');
-        if (!hasLabeledAndDescribedBy) {
-            console.warn('Tegel Checkbox component: aria-describedby or aria-labelledby attributes are missing');
-        }
-        if (!this.tdsAriaLabel) {
-            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
-        }
-    }
     render() {
-        return (h("div", { key: '2e5501c960153741f6362c414f338a2d66ff5c54', class: "tds-checkbox" }, h("input", { key: '02f0f43e0fb2ff6fec330df2ec08b4558f7bbf60',
+        return (h("div", { key: '1d0a8257cd1710277e076b4a277dff2c0c89b3d8', class: "tds-checkbox" }, h("input", { key: '689144e40c0be61db6b82aa6eaeb7ff3d09d7d72',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-label": this.tdsAriaLabel, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '4e8b53749d6f3c88d8b77087773eac500876c0ba', htmlFor: this.checkboxId }, h("slot", { key: 'e595c87bfd340b95651761ee3a7d057e55b70a9b', name: "label" }))));
+            } }), h("label", { key: '534eed7aa114861c528be0b776879484a35348bf', htmlFor: this.checkboxId }, h("slot", { key: 'db59bcc78f7f2be94037651b880a5ef149b90747', name: "label" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -86,7 +76,6 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         "checked": [1540],
         "indeterminate": [1028],
         "value": [1],
-        "tdsAriaLabel": [1, "tds-aria-label"],
         "toggleCheckbox": [64]
     }, [[4, "reset", "handleFormReset"]], {
         "indeterminate": ["handleIndeterminateState"]

package/dist/components/{p-f1980746.js → p-eef8fec0.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$3 } from './p-707a562e.js';
-import { d as defineCustomElement$2 } from './p-3a7f88ff.js';
+import { d as defineCustomElement$2 } from './p-368c544b.js';
 import { d as defineCustomElement$1 } from './p-ad77fb02.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";

package/dist/components/tds-badge.js

@@ -11,8 +11,6 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
         this.value = '';
         this.hidden = false;
         this.size = 'lg';
-        this.tdsAriaLive = 'polite';
-        this.tdsAriaLabel = '';
         this.shape = '';
         this.text = '';
     }
@@ -25,18 +23,24 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
     checkProps() {
         const valueAsNumber = parseInt(this.value);
         if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-            this.shape = this.value.length >= 2 ? 'pill' : '';
+            this.shape = this.value.toString().length >= 2 ? 'pill' : '';
             this.size = 'lg';
             this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
         }
+        else {
+            // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+            if (this.value !== '' && this.size !== 'sm') {
+                console.warn('The provided value is either empty or string, please provide value as number.');
+            }
+        }
     }
     render() {
-        return (h("host", { key: '1bb4a6deafad993e87c934ae2e1fac7d0fa94306', role: "status", class: {
+        return (h("host", { key: '4e3c33d01ed9a0da06dd45f6cbb7e3ff55837f65', class: {
                 'tds-badge': true,
                 [`tds-badge-${this.size}`]: true,
                 'tds-badge-pill': this.shape === 'pill',
                 'tds-badge-hidden': this.hidden,
-            }, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: '3a32a1394cebceb7600d39508ab2dd5d91087ead', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
+            } }, h("div", { key: '3a1966458cc39041221082096ef70efc3fd13d9f', class: "tds-badge-text" }, this.text)));
     }
     static get watchers() { return {
         "value": ["watchProps"],
@@ -47,8 +51,6 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
         "value": [1],
         "hidden": [516],
         "size": [1],
-        "tdsAriaLive": [1, "tds-aria-live"],
-        "tdsAriaLabel": [32],
         "shape": [32],
         "text": [32]
     }, undefined, {

package/dist/components/tds-block.js

@@ -9,7 +9,6 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
         this.__registerHost();
         this.__attachShadow();
         this.modeVariant = null;
-        this.componentTag = 'div';
     }
     getNestingLevel() {
         let level = 0;
@@ -23,7 +22,6 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
         return level;
     }
     render() {
-        const TagType = this.componentTag;
         const nestingLevel = this.getNestingLevel();
         let evenOddClass = '';
         if (this.modeVariant === null) {
@@ -34,13 +32,12 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '82ac7d3a746ea2fafafd81e5bcbb1d4c0d854ca2', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '6e3930c8b38ac92eb26a6080e16698352865afe8' })));
+        return (h("div", { key: 'efd570de70b5c6a313c3334b718cb201c4946251', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '56f2673bc4ae6c6801c52caf465d1bbcf27d8514' })));
     }
     get host() { return this; }
     static get style() { return TdsBlockStyle0; }
 }, [1, "tds-block", {
-        "modeVariant": [1, "mode-variant"],
-        "componentTag": [1, "component-tag"]
+        "modeVariant": [1, "mode-variant"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-card.js

@@ -21,14 +21,13 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
             const usesHeaderSlot = hasSlot('header', this.host);
             const usesSubheaderSlot = hasSlot('subheader', this.host);
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
-            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -48,8 +47,9 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
             [this.imagePlacement]: !this.stretch,
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
-        const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '3386e1f0d6536d31d7207c074a5e0f16ebf18a77', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '03c6bf925c58c0634797f8370c68cc360f54cc0c', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: () => {
+                this.handleClick();
+            } }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     get host() { return this; }
     static get style() { return TdsCardStyle0; }

package/dist/components/tds-checkbox.js

@@ -1,4 +1,4 @@
-import { T as TdsCheckbox$1, d as defineCustomElement$1 } from './p-ece57b20.js';
+import { T as TdsCheckbox$1, d as defineCustomElement$1 } from './p-eac79032.js';
 
 const TdsCheckbox = TdsCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-dropdown-option.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-96d51054.js';
+import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-6c2d5c85.js';
 
 const TdsDropdownOption = TdsDropdownOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header-brand-symbol.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as defineCustomElement$3 } from './p-707a562e.js';
-import { d as defineCustomElement$2 } from './p-3a7f88ff.js';
+import { d as defineCustomElement$2 } from './p-368c544b.js';
 
 const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}";
 const TdsHeaderBrandSymbolStyle0 = headerBrandSymbolCss;

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { d as defineCustomElement$6 } from './p-707a562e.js';
-import { d as defineCustomElement$5 } from './p-3a7f88ff.js';
+import { d as defineCustomElement$5 } from './p-368c544b.js';
 import { d as defineCustomElement$4 } from './p-ad77fb02.js';
 import { d as defineCustomElement$3 } from './p-f0a50868.js';
 import { d as defineCustomElement$2 } from './p-3351035f.js';

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$4 } from './p-707a562e.js';
-import { d as defineCustomElement$3 } from './p-3a7f88ff.js';
+import { d as defineCustomElement$3 } from './p-368c544b.js';
 import { d as defineCustomElement$2 } from './p-ad77fb02.js';
 
 const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";

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

@@ -1,4 +1,4 @@
-import { T as TdsHeaderItem$1, d as defineCustomElement$1 } from './p-3a7f88ff.js';
+import { T as TdsHeaderItem$1, d as defineCustomElement$1 } from './p-368c544b.js';
 
 const TdsHeaderItem = TdsHeaderItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-header-launcher-button.js

@@ -1,4 +1,4 @@
-import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-f1980746.js';
+import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-eef8fec0.js';
 
 const TdsHeaderLauncherButton = TdsHeaderLauncherButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$7 } from './p-707a562e.js';
-import { d as defineCustomElement$6 } from './p-3a7f88ff.js';
-import { d as defineCustomElement$5 } from './p-f1980746.js';
+import { d as defineCustomElement$6 } from './p-368c544b.js';
+import { d as defineCustomElement$5 } from './p-eef8fec0.js';
 import { d as defineCustomElement$4 } from './p-ad77fb02.js';
 import { d as defineCustomElement$3 } from './p-f0a50868.js';
 import { d as defineCustomElement$2 } from './p-3351035f.js';

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-ece57b20.js';
+import { d as defineCustomElement$2 } from './p-eac79032.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){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;

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$5 } from './p-ece57b20.js';
+import { d as defineCustomElement$5 } from './p-eac79032.js';
 import { d as defineCustomElement$4 } from './p-467fe701.js';
-import { d as defineCustomElement$3 } from './p-96d51054.js';
+import { d as defineCustomElement$3 } from './p-6c2d5c85.js';
 import { d as defineCustomElement$2 } from './p-ad77fb02.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)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-ece57b20.js';
+import { d as defineCustomElement$2 } from './p-eac79032.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;