@scania/tegel 1.27.0 → 1.28.0

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
             }
         };
     }

package/dist/collection/components/icon/icon.js

@@ -5,12 +5,13 @@ export class Icon {
     constructor() {
         this.setIcons = () => this.arrayOfIcons.map((element) => {
             if (element.name === this.name) {
-                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
+                return (h("svg", { "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
             }
         });
         this.name = 'truck';
         this.size = '16px';
         this.svgTitle = undefined;
+        this.tdsAriaHidden = false;
         this.svgDescription = undefined;
         this.icons_object = iconsCollection;
         this.arrayOfIcons = [];
@@ -28,7 +29,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: '7501bac4e182e5b44030b140b4c2c68e0fd2522b' }, this.setIcons());
+        return h(Host, { key: 'd19a1de2f0267b93717324d424b9c89e19bbcb21' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +104,24 @@ export class Icon {
                 "attribute": "svg-title",
                 "reflect": false
             },
+            "tdsAriaHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set aria-hidden attribute on svg"
+                },
+                "attribute": "tds-aria-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "svgDescription": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/modal/modal.css

@@ -1,34 +1,31 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 /* MIXINS */
 /* MODAL STYLING */
 .tds-modal {
   box-sizing: border-box;
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   margin: auto;
   position: relative;
-  border-radius: 4px;
+  border-radius: var(--radius-narrow);
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
-  /* SCROLL STUFF */
-  /* width */
-  /* Track */
-  /* Handle */
 }
 .tds-modal * {
   box-sizing: border-box;
 }
 .tds-modal::-webkit-scrollbar {
-  width: 5px;
-  background-color: var(--tds-grey-300);
-  border-radius: 0 1em 1em 0;
+  width: 6px;
+  background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-track {
-  background-color: var(--tds-grey-300);
-  border-radius: 0 1em 1em 0;
+  background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-500);
-  border-radius: 0 1em 1em 0;
+  background-color: var(--foreground-elements-transparparent-discrete);
+  border-radius: 3px;
 }
 .tds-modal__actions-sticky {
   overflow: hidden;
@@ -36,8 +33,12 @@
   flex-direction: column;
 }
 .tds-modal__actions-sticky .body {
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
@@ -45,13 +46,13 @@
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--tds-modal-background);
-  padding: var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);
+  background-color: var(--background-elevation-layer-02);
+  padding: 24px 16px 16px;
   display: flex;
   gap: 16px;
 }
 .tds-modal__actions-static slot[name=actions] {
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   display: flex;
   gap: 16px;
   padding: 24px 16px 16px;
@@ -142,43 +143,47 @@
 /* MODAL SUB ELEMENTS */
 .header {
   display: flex;
-  padding: var(--tds-spacing-element-16);
+  padding: 16px;
   position: sticky;
   top: 0;
-  background-color: var(--tds-modal-background);
+  background-color: var(--background-elevation-layer-02);
   z-index: 1;
 }
 
 .header,
 slot[name=header]::slotted(*) {
-  color: var(--tds-modal-text);
-  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  font: var(--tds-headline-05) !important;
-  letter-spacing: var(--tds-headline-05-ls) !important;
+  font-family: var(--headline-05-font-family);
+  font-size: var(--headline-05-font-size);
+  line-height: var(--headline-05-line-height);
+  font-weight: var(--headline-05-font-weight);
+  letter-spacing: var(--headline-05-letter-spacing);
+  text-transform: var(--headline-05-text-transform);
+  color: var(--foreground-text-strong);
   margin: 0;
   flex: 1;
 }
 
 .body {
-  color: var(--tds-modal-text);
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
+  color: var(--foreground-text-strong);
   overflow-y: visible;
-  padding: 0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);
-  /* SCROLL STUFF */
-  /* width */
-  /* Track */
-  /* Handle */
+  padding: 0 16px 16px;
 }
 .body::-webkit-scrollbar {
-  width: 5px;
-  background-color: var(--tds-grey-300);
+  width: 6px;
+  background-color: transparent;
 }
 .body::-webkit-scrollbar-track {
-  background-color: var(--tds-grey-300);
+  background-color: transparent;
 }
 .body::-webkit-scrollbar-thumb {
-  background-color: var(--tds-grey-500);
+  background-color: var(--foreground-elements-transparparent-discrete);
+  border-radius: 3px;
 }
 
 .tds-modal-backdrop {
@@ -188,7 +193,7 @@ slot[name=header]::slotted(*) {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--tds-modal-backdrop);
+  background-color: var(--background-elevation-scrim);
   pointer-events: auto;
 }
 .tds-modal-backdrop * {
@@ -206,7 +211,7 @@ button.tds-modal-close {
 .tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--tds-modal-icon);
+  color: var(--foreground-text-strong);
   cursor: pointer;
 }
 .tds-modal-close:focus {
@@ -215,12 +220,12 @@ button.tds-modal-close {
 }
 @media (min-width: 320px) {
   .tds-modal-close {
-    margin-left: var(--tds-spacing-element-16);
+    margin-left: 16px;
   }
 }
 @media (min-width: 1056px) {
   .tds-modal-close {
-    margin-left: var(--tds-spacing-element-48);
+    margin-left: 48px;
   }
 }
 
@@ -232,16 +237,16 @@ button.tds-modal-close {
 }
 @media (min-width: 320px) {
   .tds-modal-close-btn {
-    margin-left: var(--tds-spacing-element-16);
+    margin-left: 16px;
   }
 }
 @media (min-width: 1056px) {
   .tds-modal-close-btn {
-    margin-left: var(--tds-spacing-element-48);
+    margin-left: 48px;
   }
 }
 .tds-modal-close-btn svg {
-  fill: var(--tds-modal-icon);
+  fill: var(--foreground-text-strong);
 }
 
 .tds-modal-overflow {

package/dist/collection/components/modal/modal.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot header - Slot for header text
  * @slot body - Slot for main content of modal
@@ -9,6 +10,7 @@ export class TdsModal {
     constructor() {
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
+            this.returnFocusOnClose();
             if (!closeEvent.defaultPrevented) {
                 this.isShown = false;
             }
@@ -57,15 +59,26 @@ export class TdsModal {
         this.referenceEl = undefined;
         this.show = undefined;
         this.closable = true;
+        this.tdsAlertDialog = 'dialog';
         this.isShown = false;
+        this.activeElementIndex = 0;
     }
     /** Shows the Modal.  */
     async showModal() {
         this.isShown = true;
+        // Set focus on first element when opened
+        requestAnimationFrame(() => {
+            const focusableElements = this.getFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+                this.activeElementIndex = 0;
+            }
+        });
     }
     /** Closes the Modal. */
     async closeModal() {
         this.isShown = false;
+        this.returnFocusOnClose();
     }
     connectedCallback() {
         if (this.closable === undefined) {
@@ -103,6 +116,63 @@ export class TdsModal {
             dismissButton.removeEventListener('click', this.handleClose);
         });
     }
+    returnFocusOnClose() {
+        var _a;
+        let referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
+        // If referenced element is a custom element eg: tds-button we find the interactive element inside
+        if (potentialReferenceElements.indexOf(referenceEl.tagName) < 0) {
+            referenceEl = referenceEl.querySelectorAll(potentialReferenceElements.join(','))[0];
+        }
+        referenceEl.focus();
+    }
+    getFocusableElements() {
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
+        /** Focusable elements */
+        return [...focusableInShadowRoot, ...focusableInSlots];
+    }
+    handleFocusTrap(event) {
+        if (event.key === 'Escape' && this.isShown && !this.prevent) {
+            this.handleClose(event);
+            return;
+        }
+        // Only trap focus if the modal is open
+        if (!this.isShown)
+            return;
+        // We care only about the Tab key
+        if (event.key !== 'Tab')
+            return;
+        const focusableElements = this.getFocusableElements();
+        // If there are no focusable elements
+        if (focusableElements.length === 0)
+            return;
+        event.preventDefault();
+        // Going backwards (Shift + Tab) on the first element => move to last
+        if (event.shiftKey) {
+            this.activeElementIndex -= 1;
+            if (this.activeElementIndex === -1) {
+                this.activeElementIndex = focusableElements.length - 1;
+            }
+        }
+        // // Going forwards (Tab) on the last element => move to first
+        if (!event.shiftKey) {
+            this.activeElementIndex += 1;
+            if (this.activeElementIndex === focusableElements.length) {
+                this.activeElementIndex = 0;
+            }
+        }
+        const nextElement = focusableElements[this.activeElementIndex];
+        nextElement.focus();
+    }
     /** Adds an event listener to the dismiss buttons that closes the Modal. */
     setDismissButtons() {
         this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
@@ -112,10 +182,12 @@ export class TdsModal {
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '3b815395be0ccab91eebda3ca785528de624d17e', class: {
+        const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
+        const bodyId = `tds-modal-body-${generateUniqueId()}`;
+        return (h(Host, { key: '398809ea45126dd70b95422f2f7a08a481a22d53', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '84c9952f862e5defe06c04040e7031e08c5caca3', class: "tds-modal-backdrop" }), h("div", { key: '42b3ea985203a582b3a3dee5250b4a4468a23d6f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '06e005618aeab759c01f7d556cc4357f0aed0e1d', class: "header" }, this.header && h("div", { key: 'bff8080a479c4ecef96eae35dc0f33cc3fadaa8c', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'dbec4b999fcda87c5c751a8cf3eb7b9f66e1ec43', name: "header" }), this.closable && (h("button", { key: 'bfbfe0d3419aa5e2a5fcbab7691560ed5619dd05', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '3bcd38d4234a689acd63bb82e21b270c2b0825f9', name: "cross", size: "20px" })))), h("div", { key: '2fc5756d3261dfa354ce3025dc9d8ff213c49ba1', class: "body" }, h("slot", { key: '389ac6e307873c9de7c36c0960ce578cdfaf88e4', name: "body" })), usesActionsSlot && h("slot", { key: 'c964f9d3999f26995543187c553adcc9ac392f2a', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '96e964cc4f3c6d9613fb53e340e0aa5dcd8b6d81', class: "tds-modal-backdrop" }), h("div", { key: 'af7ddc896ef35b6116ae70524d10c4b7b952e20a', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '9dfcf95fcc8925cd5c97f10f29edc6cef183a0ca', id: headerId, class: "header" }, this.header && h("div", { key: '42533c25b07e696a0c61504556150018f8d3583a', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'd9855a20e1763ad17d6c8b80df85796d8f6027a8', name: "header" }), this.closable && (h("button", { key: '3e99b76da7bcf39eaecbe2906e0674fd20ebe9a6', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'f6463437fb98ae280afe358d50a2f960914014ea', name: "cross", size: "20px" })))), h("div", { key: 'ba8ca2e65f5eac8103e6f3c431e3ae9aab2b5f72', id: bodyId, class: "body" }, h("slot", { key: '9e08cbdd00e1a60826588b15cb6ed23fc4b5b0d7', name: "body" })), usesActionsSlot && h("slot", { key: 'aeb50dfcbf6c12e80a8904d149bb15892c691d88', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -273,12 +345,31 @@ export class TdsModal {
                 "attribute": "closable",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
             }
         };
     }
     static get states() {
         return {
-            "isShown": {}
+            "isShown": {},
+            "activeElementIndex": {}
         };
     }
     static get events() {
@@ -372,4 +463,13 @@ export class TdsModal {
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleFocusTrap",
+                "target": "window",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -15,6 +15,7 @@ export class TdsPopoverCanvas {
         this.animation = 'none';
         this.offsetDistance = 8;
         this.modifiers = [];
+        this.tdsAlertDialog = 'dialog';
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -27,12 +28,12 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: '68de2e7161c5060c98b1c0c78050f41a716228ee' }, h("tds-popover-core", Object.assign({ key: 'f50ae36ac2b76445d78cbe4750820d3c684e862a' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '65f267d001dc720000b13f6b46010781ccd3119c' }, h("tds-popover-core", Object.assign({ key: '5a3df2dbc918a330f895fbfb4bbf1a5a6ebe2c21', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '1dac1d925ab9673219449d3885cd7430a3e3f188' }, h("slot", { key: '9c5d3c152b63e0afd8c30e4960edbd2aa3418fd2' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c24d23c70824186c971ce3cfe79d2d14ac472a1' }, h("slot", { key: 'ca58b5e939aabdbe80ca92d747c191f08ad34b4d' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }
@@ -219,6 +220,24 @@ export class TdsPopoverCanvas {
                     "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
                 },
                 "defaultValue": "[]"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
             }
         };
     }