@scania/tegel 1.27.0-toast-aria-live.0 → 1.28.0

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

@@ -30,7 +30,7 @@ export class TdsDropdown {
             return this.selectedOptions
                 .map((stringValue) => {
                 var _a;
-                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
+                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => convertToString(element.value) === convertToString(stringValue));
                 return matchingElement;
             })
                 .filter(Boolean);
@@ -166,7 +166,7 @@ export class TdsDropdown {
         }
     }
     normalizeValue(value) {
-        if (!value || value === '')
+        if (value === null || value === undefined || value === '')
             return [];
         // For single select, ensure we handle both string and array inputs
         if (!this.multiselect) {
@@ -361,7 +361,7 @@ export class TdsDropdown {
             const defaultValueStr = convertToString(this.defaultValue);
             const initialValue = this.multiselect
                 ? defaultValueStr.split(',').map(convertToString)
-                : [convertToString(this.defaultValue)];
+                : [defaultValueStr];
             this.updateDropdownStateInternal(initialValue);
         }
     }
@@ -403,9 +403,9 @@ export class TdsDropdown {
     }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: 'dbd588020c5f634d489ca464c2a4fd568e9b905a', class: {
+        return (h(Host, { key: 'b8c418ebe609789c1610178d764a7d620e2231c2', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e0b7d8efe2206136140695647f7b0656de6f4559', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'abc333e48a6ecc7d89f2ddeec0ff587371baf78c', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ee5c005d5020e2226ce54c93a90f2098e081a6df', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'ca674a2361f1301886bb855b7093c67b999a500a', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -455,7 +455,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd83c66bf81a1d2878827d5ed71cdeee73625cbd0', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '14558013e5903958942dc7dd3ef2d3a49f79b245', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -466,11 +466,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '0133acc19540fb2ebfd44611fb906b5895d300d6', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '3cdf4874c3e5f593850b3238b9f87508ad67c312', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a51e0a23e67f22427010ee9c965ab7535c46176e', class: {
+            } }, h("slot", { key: '5f69c2fcb5b6a130888d7cd92d4cb882122e3e58', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'bae7a62960f90cd7b679ac4956a677dbff378ac7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'be5fe56a1e19e812fa983c22f130c0d3001da55b', class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '719a9da93ed73509c1a0694d3011f8e304d73cf9', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'c0ccc491caa1aca628aff12e02d8a917a74e9c86', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-group/footer-group.css

@@ -8,8 +8,11 @@
   color: var(--tds-footer-top-links);
   padding-bottom: 8px;
 }
+:host .footer-top-title *,
+:host .footer-top-title ::slotted(*) {
+  margin: 0;
+}
 :host button.footer-top-title-button {
-  display: none;
   border: none;
   width: 100%;
   font: var(--tds-headline-07);
@@ -21,6 +24,10 @@
   justify-content: space-between;
   border-bottom: 1px solid var(--tds-footer-top-divider);
 }
+:host button.footer-top-title-button *,
+:host button.footer-top-title-button ::slotted(*) {
+  margin: 0;
+}
 :host button.footer-top-title-button.expanded {
   border-bottom: none;
 }
@@ -53,24 +60,19 @@
 :host [role=list].top-part-child {
   flex-direction: column;
 }
-@media all and (max-width: 992px) {
-  :host [role=list].start:not(.top-part-child) {
-    flex-direction: column;
-  }
-  :host [role=list].start:not(.top-part-child).start, :host [role=list].start:not(.top-part-child).end {
-    gap: 8px;
-  }
-  :host [role=list].top-part-child.closed {
-    display: none;
-  }
-  :host [role=list].top-part-child {
-    gap: 0;
-  }
-  :host .footer-top-title {
-    display: none;
-  }
-  :host button.footer-top-title-button {
-    display: flex;
-    align-items: center;
-  }
+:host .mobile-view [role=list].start:not(.top-part-child) {
+  flex-direction: column;
+}
+:host .mobile-view [role=list].start:not(.top-part-child).start, :host .mobile-view [role=list].start:not(.top-part-child).end {
+  gap: 8px;
+}
+:host .mobile-view [role=list].top-part-child.closed {
+  display: none;
+}
+:host .mobile-view [role=list].top-part-child {
+  gap: 0;
+}
+:host .mobile-view button.footer-top-title-button {
+  display: flex;
+  align-items: center;
 }

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

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
+import hasSlot from "../../../utils/hasSlot";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For footer items.
+ * @slot title - Slot for the title of the group. Should contain a heading element adjusted to the rest of the website in terms of heading nesting, for accessibility.
  */
 export class TdsFooterGroup {
     constructor() {
@@ -10,20 +12,41 @@ export class TdsFooterGroup {
         /** Indicates if a group is part of the top part of the Footer. */
         this.topPartGroup = false;
         this.titleText = undefined;
+        this.tdsListAriaLabel = undefined;
         this.open = false;
+        this.isMobile = undefined;
+    }
+    updateIsMobile() {
+        this.isMobile = window.innerWidth <= 992;
     }
     connectedCallback() {
+        this.updateIsMobile();
         this.topPartGroup = this.host.parentElement.slot === 'top';
         if (!this.topPartGroup) {
             this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
         }
+        if (!this.tdsListAriaLabel) {
+            console.warn('Tegel Footer Group component: missing tdsListAriaLabel prop');
+        }
+        if (this.titleText) {
+            console.warn('Tegel Footer Group component: to ensure accessibility, please use the title slot instead of the titleText prop. titleText will be deprecated in the future.');
+        }
+        const hasTitleSlot = hasSlot('title', this.host);
+        if (hasTitleSlot && this.titleText) {
+            console.warn('Tegel Footer Group component: titleText prop is set but title slot is used. The titleText prop will be ignored.');
+        }
+    }
+    handleResize() {
+        this.updateIsMobile();
     }
     render() {
-        return (h(Host, { key: '9932f2146509bb7f804c15a3b716308c658893c5' }, this.titleText && this.topPartGroup && (h("div", { key: '511c348c160a1d1144464ce562b616f38a5fd524', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { key: 'c64b3662379de7308d8f64b0e5769296e7f48a02', onClick: () => {
-                this.open = !this.open;
-            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { key: 'f3d5d5bec3f3f9af67bf28e7164eb3190189039c', name: "chevron_down", size: "20px" }))), h("div", { key: '4f5a8b626d572e51f67547d0c3280d946e44203f', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+        const hasTitleSlot = hasSlot('title', this.host);
+        return (h(Host, { key: '4074cd5312d985c58e5136cc0c2c2c5deb9cd6e7', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '1a7817d838cadd10f4fed05b1153fa13be41a042', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+            (this.isMobile ? (h("button", { onClick: () => {
+                    this.open = !this.open;
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: '758bd18ac07eca8dda21b077a494ce8d770c6794', "aria-label": this.tdsListAriaLabel }, h("div", { key: '536e6c65893378fce91dd7fe3577dcdaaa4e5596', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '414c481365b866d921aeb8145fd4358a05d8c90f' }))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '0d1d147e8b955fb39e83a441595c80610843e34c' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -55,13 +78,40 @@ export class TdsFooterGroup {
                 },
                 "attribute": "title-text",
                 "reflect": false
+            },
+            "tdsListAriaLabel": {
+                "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 for the nav element wrapping the list. Should be unique for accessibility."
+                },
+                "attribute": "tds-list-aria-label",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "open": {}
+            "open": {},
+            "isMobile": {}
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/footer/footer-item/footer-item.css

@@ -1,50 +1,50 @@
-[role=listitem] ::slotted(a),
-[role=listitem] ::slotted(button) {
+:host([role=listitem]) div ::slotted(a),
+:host([role=listitem]) div ::slotted(button) {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-main-links);
   opacity: var(--tds-footer-main-links-opacity);
   text-decoration: none;
 }
-[role=listitem] ::slotted(a:focus-visible),
-[role=listitem] ::slotted(button:focus-visible) {
+:host([role=listitem]) div ::slotted(a:focus-visible),
+:host([role=listitem]) div ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-[role=listitem] ::slotted(a:hover),
-[role=listitem] ::slotted(button:hover) {
+:host([role=listitem]) div ::slotted(a:hover),
+:host([role=listitem]) div ::slotted(button:hover) {
   text-decoration: underline;
 }
-[role=listitem].top-part-child ::slotted(a),
-[role=listitem].top-part-child ::slotted(button) {
+:host([role=listitem]) div.top-part-child ::slotted(a),
+:host([role=listitem]) div.top-part-child ::slotted(button) {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-footer-top-links);
 }
-[role=listitem].top-part-child ::slotted(a:focus-visible),
-[role=listitem].top-part-child ::slotted(button:focus-visible) {
+:host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
+:host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 
 @media all and (max-width: 992px) {
-  [role=listitem].top-part-child {
+  :host([role=listitem]) div.top-part-child {
     border-bottom: 1px solid var(--tds-footer-top-divider);
   }
-  [role=listitem].top-part-child ::slotted(a),
-  [role=listitem].top-part-child ::slotted(button) {
+  :host([role=listitem]) div.top-part-child ::slotted(a),
+  :host([role=listitem]) div.top-part-child ::slotted(button) {
     display: block;
     height: 100%;
     padding: 19px 40px;
     font-weight: normal;
   }
-  [role=listitem].top-part-child ::slotted(a:hover),
-  [role=listitem].top-part-child ::slotted(button:hover) {
+  :host([role=listitem]) div.top-part-child ::slotted(a:hover),
+  :host([role=listitem]) div.top-part-child ::slotted(button:hover) {
     text-decoration: underline;
     background-color: var(--tds-footer-top-links-background-hover);
   }
-  [role=listitem].top-part-child ::slotted(a:focus-visible),
-  [role=listitem].top-part-child ::slotted(button:focus-visible) {
+  :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
+  :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
     outline: 2px solid var(--tds-blue-400);
     outline-offset: -2px;
   }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For slotting a link, button, or similar.
  */
@@ -10,7 +10,7 @@ export class TdsFooterItem {
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h("div", { key: '8efe2aba383be6dbbf0c1a95e4a5f247623289bd', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: 'b1406197ba6239bcdec807ebdb2de181ea6a49b7' })));
+        return (h(Host, { key: '04f8f1262940c57846f1f2ca372d181475381de3', role: "listitem" }, h("div", { key: '8a9c806cf008c4c247ab33935d00ba86e65a9f06', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '3510b66d43bf2b892902d3b7540a6b718eac1be4' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.css

@@ -44,7 +44,7 @@
   color: var(--tds-footer-main-copyright);
 }
 :host .footer-main-bottom .brand {
-  background-image: var(--tds-background-image-scania-wordmark-white-svg);
+  background-image: var(--tds-background-image-scania-wordmark-white-svg), var(--tds-background-image-scania-wordmark-white-svg-local);
   background-repeat: no-repeat;
   background-size: 117px;
   background-position: right;

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css

@@ -2,7 +2,7 @@
   display: none;
 }
 :host tds-header-item ::slotted(*) {
-  background-image: var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-png);
+  background-image: var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-svg-local);
   background-size: 30px auto;
   background-position: center;
   background-repeat: no-repeat;

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

@@ -1,10 +1,14 @@
 import { h, Host } from "@stencil/core";
 /**
- * @slot <default> - <b>Unnamed slot.</b> For a link.
+ * @slot <default> - <b>Unnamed slot.</b> For a link. When using an <a> tag, use the aria-label attribute for accessibility.
  */
 export class TdsHeaderBrandSymbol {
     render() {
-        return (h(Host, { key: 'c2e5f418268bf172b1e039aca188489afbc98aa7' }, h("tds-header-item", { key: '375b50758e8616093635a0a1ba194296841e4bbc' }, h("slot", { key: '2f641711d2e2c5b0fdf2042a44181a699df7fe95' }))));
+        const aTag = this.host.querySelector('a');
+        if (!aTag.hasAttribute('aria-label')) {
+            console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
+        }
+        return (h(Host, { key: '18ba2b11b49c7b85f9655881094611b3d2c6e175' }, h("tds-header-item", { key: '36f37aeec7f4d3e412efc2f75baeedeb30d25421' }, h("slot", { key: 'fce5727e5b3b70e92c716ad7fca689b93a25935b' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import generateUniqueId from "../../../utils/generateUniqueId";
+import hasSlot from "../../../utils/hasSlot";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.
@@ -17,6 +18,7 @@ export class TdsHeaderDropdown {
         this.label = undefined;
         this.noDropdownIcon = false;
         this.selected = false;
+        this.tdsAriaLabel = undefined;
         this.open = false;
         this.buttonEl = undefined;
     }
@@ -27,17 +29,38 @@ export class TdsHeaderDropdown {
             this.open = false;
         }
     }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            this.open = false;
+            this.buttonEl.focus();
+        }
+    }
     toggleDropdown() {
         this.open = !this.open;
+        if (this.open) {
+            requestAnimationFrame(() => {
+                const selectors = "a, [tabindex='0']";
+                const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
+                if (firstFocusableElement instanceof HTMLElement) {
+                    firstFocusableElement.focus();
+                }
+            });
+        }
+    }
+    connectedCallback() {
+        const hasLabelSlot = hasSlot('label', this.host);
+        if (!this.tdsAriaLabel && !hasLabelSlot) {
+            console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
+        }
     }
     render() {
-        return (h(Host, { key: '1b3cd2ffee7d6543e98bab5cc3d1953770110ce8' }, h("div", { key: '23f60d4d56e08725985f71f5952b324f5044f53b', class: {
+        return (h(Host, { key: '1bbf8ce73b5f0067b2ffe8d634ba0a3efd6f4fdb' }, h("div", { key: 'd2c548b3989a81a74c2b2985bae4a0afb10bbe06', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '0297ccda2dbf13709443e4b548687e2f648f0bcf', class: "button", active: this.open, selected: this.selected }, h("button", { key: '6f9ea91a3270ea6eeb29a79571567ae8abef001d', ref: (el) => {
+            } }, h("tds-header-item", { key: '2300d57edbebbc66ed1b27a60a9fcb235ddb4b88', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'da6f8271968491b092b18bc835b815e1796af935', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: 'dcc2a8a717706ee3287499805bc32c98b0b29770', name: "icon" }), this.label, h("slot", { key: 'bad14e728dfe465e59a8e98a4ea5a858fc066bb3', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '9963966ab41666db7ba8b75089a46b132b8db6dd', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'cb7b4fb085a94e6243ad6c70144e5b3c6460d27e', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'a9c1c657944cdbd826672e53ffce819df1b261de', name: "icon" }), this.label, h("slot", { key: 'a47173535a91f2a5b94060b6745b7ff60e380b19', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4e2d7e29d2775ef65b636faf0eb16739575f0bed', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67ec32703a4fe306ac8b1a5b3e7ed4d48c257161', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -112,6 +135,23 @@ export class TdsHeaderDropdown {
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used by the aria-label attribute"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }
@@ -129,6 +169,12 @@ export class TdsHeaderDropdown {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -1,9 +1,17 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
+    constructor() {
+        this.tdsAriaLabel = undefined;
+    }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Header Hamburger component: missing tdsAriaLabel prop');
+        }
+    }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'f2f230c8349ca3b5fdcfd7de67555b12888bd9d9' }, h("tds-header-item", { key: '7db87ae4ad59bea1040399a33fdf77aa490ae1ca' }, h("button", Object.assign({ key: 'bf5e3103c23c02e42db7e99a423348efb4488ed7' }, inheritedButtonProps), h("tds-icon", { key: '306b78525304ac2f30a4bcb0be37c0ed7998b01f', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '774d1727624bfe4f8606d2efea75236532f2e9b2' }, h("tds-header-item", { key: '70cbf14a6b7ea638465d56780780ef3e9b5e0f4e' }, h("button", Object.assign({ key: 'af50f354dca1b518b13216ae0ce6cc85488f7df3' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '7978cd71ad41001dee4dbdb12894e22e716f3164', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }
@@ -17,5 +25,26 @@ export class TdsHeaderHamburger {
             "$": ["header-hamburger.css"]
         };
     }
+    static get properties() {
+        return {
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used by the aria-label attribute"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

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

@@ -10,6 +10,7 @@ export class TdsHeaderLauncher {
         this.open = false;
         this.buttonEl = undefined;
         this.hasListTypeMenu = false;
+        this.tdsAriaLabel = undefined;
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -18,12 +19,32 @@ export class TdsHeaderLauncher {
             this.open = false;
         }
     }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            this.open = false;
+            this.buttonEl.shadowRoot.querySelector('button').focus();
+        }
+    }
     componentDidLoad() {
         const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
         this.hasListTypeMenu = hasListTypeMenu;
     }
     toggleLauncher() {
         this.open = !this.open;
+        if (this.open) {
+            requestAnimationFrame(() => {
+                const selectors = "a, [tabindex='0']";
+                const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
+                if (firstFocusableElement instanceof HTMLElement) {
+                    firstFocusableElement.focus();
+                }
+            });
+        }
+    }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Header Launcher component: missing tdsAriaLabel prop');
+        }
     }
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
@@ -32,11 +53,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: 'd886168b8834ced8a2705b30b9982726dc72f8b6' }, h("div", { key: '0c4b9b27e82cf91c000619ef8d0593f8b664b605', class: {
+        return (h(Host, { key: '3a0100f1429a1e09a5745c6b74835bddb6ba5157' }, h("div", { key: '50220e92372ac5496a4b589441e4920375169e79', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'd0ff7205bf79ef4744d65dcf98734aff5520b004' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { key: 'c337c31282b08c5add95b16271bdfc147fd16c5c', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: 'd58c3ba5f08809487eeca1e6ce8a31879f0c52d9' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '4806b02e07aef32a640eedc1f0f76285950ec384', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -57,6 +78,27 @@ export class TdsHeaderLauncher {
             "$": ["header-launcher.css"]
         };
     }
+    static get properties() {
+        return {
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used by the aria-label attribute of the launcher button"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
+            }
+        };
+    }
     static get states() {
         return {
             "open": {},
@@ -72,6 +114,12 @@ export class TdsHeaderLauncher {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -3,11 +3,12 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
     constructor() {
         this.active = false;
+        this.tdsAriaLabel = undefined;
     }
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: '335cfea4d8b36b95639985dc4a67f6ccc891d122' }, h("tds-header-item", { key: '0b497a3b369d43dd3c43f4471e9e9d825f2b5bd1', active: this.active }, h("button", Object.assign({ key: '84aaba13ed00d3515f98d81b419ab2898bca4910' }, buttonProps), h("tds-icon", { key: 'f65b047f5c36222b20c73ffd2340eebca0f47d33', class: "icon", name: "bento", size: "20px" })))));
+        return (h(Host, { key: '445f5863dd96c417c99e460248bd0f2c2a224f0a' }, h("tds-header-item", { key: '792692a34c1192d37e81322a8e75387e51954ebe', active: this.active }, h("button", Object.assign({ key: '7be3e9e148ceab7b361f37b1029dfad474db7b16' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '5001f19dfa40ade6a9c64052caa4c38de901a5d4', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +41,23 @@ export class TdsHeaderLauncherButton {
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used by the aria-label attribute"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }