@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -11,18 +11,19 @@ const brandIconMap = {
 };
 export class Icon {
     constructor() {
+        /** Pass the name of the icon.
+         * For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library */
+        this.name = 'truck';
+        /** Pass a size of icon as a string, for example, 32px, 1rem, 4em... */
+        this.size = '16px';
+        /** Set aria-hidden attribute on svg */
+        this.tdsAriaHidden = false;
+        this.arrayOfIcons = [];
         this.setIcons = () => this.arrayOfIcons.map((element) => {
             if (element.name === this.name) {
                 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 = undefined;
-        this.arrayOfIcons = [];
     }
     componentWillLoad() {
         this.detectAndSetBrand();
@@ -44,7 +45,7 @@ export class Icon {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: 'e54289a5f2cf5717ffc9aafc0295a6aafd1cb7de' }, this.setIcons());
+        return h(Host, { key: '28dd81a4993b7c842a115f7feca92d038b4ef195' }, this.setIcons());
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -65,7 +66,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
+                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"key\" | \"list\" | \"placeholder\" | \"merge\" | \"copy\" | \"history\" | \"print\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
                     "references": {
                         "IconNames": {
                             "location": "import",
@@ -80,8 +81,10 @@ export class Icon {
                     "tags": [],
                     "text": "Pass the name of the icon.\nFor icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "name",
                 "defaultValue": "'truck'"
             },
             "size": {
@@ -98,8 +101,10 @@ export class Icon {
                     "tags": [],
                     "text": "Pass a size of icon as a string, for example, 32px, 1rem, 4em..."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'16px'"
             },
             "svgTitle": {
@@ -116,8 +121,10 @@ export class Icon {
                     "tags": [],
                     "text": "Override the default title for the svg. Also used by aria-labelledby."
                 },
-                "attribute": "svg-title",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "svg-title"
             },
             "tdsAriaHidden": {
                 "type": "boolean",
@@ -133,8 +140,10 @@ export class Icon {
                     "tags": [],
                     "text": "Set aria-hidden attribute on svg"
                 },
-                "attribute": "tds-aria-hidden",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-hidden",
                 "defaultValue": "false"
             },
             "svgDescription": {
@@ -151,8 +160,10 @@ export class Icon {
                     "tags": [],
                     "text": "Set description for the svg. Also used by aria-describedby."
                 },
-                "attribute": "svg-description",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "svg-description"
             }
         };
     }

package/dist/collection/components/link/link.css

@@ -8,22 +8,28 @@
   color: var(--tds-link);
   text-decoration: underline;
 }
+:host ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*) {
+  text-decoration: none;
+}
+:host .no-underline ::slotted(*:hover) {
+  color: var(--tds-link-hover);
+  text-decoration: underline;
+  text-decoration-color: var(--tds-link-hover);
+}
 :host ::slotted(*:focus-visible) {
   color: var(--tds-link-focus);
   text-decoration: none;
-  outline: 2px solid var(--tds-link-focus);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white), 0 0 0 3px var(--tds-link-focus);
 }
 :host ::slotted(*:active) {
   color: var(--tds-link);
   text-decoration: underline;
   text-decoration-color: var(--tds-link);
 }
-:host ::slotted(*:hover) {
-  color: var(--tds-link-hover);
-  text-decoration: underline;
-  text-decoration-color: var(--tds-link-hover);
-}
 :host ::slotted(*:visited) {
   color: var(--tds-link-visited);
   text-decoration-color: var(--tds-link-visited);
@@ -36,14 +42,6 @@
   pointer-events: none;
 }
 
-.no-underline ::slotted(*) {
-  text-decoration: none;
-}
-
-.no-underline:hover ::slotted(*) {
-  text-decoration: none;
-}
-
 .standalone ::slotted(*) {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

package/dist/collection/components/link/link.js

@@ -4,8 +4,11 @@ import { h } from "@stencil/core";
  */
 export class TdsLink {
     constructor() {
+        /** Disables the Link */
         this.disabled = false;
+        /** Displays the Link with an underline. */
         this.underline = true;
+        /** Displays the Link as a standalone component. Not part of a paragraph. */
         this.standalone = false;
     }
     connectedCallback() {
@@ -26,11 +29,11 @@ export class TdsLink {
         }
     }
     render() {
-        return (h("span", { key: '7f0f25738cc23b6f1cb77be9dd80ea14b9b399bc', class: {
+        return (h("span", { key: '46854dd9cf4b0577098702567ede43ccfae897d6', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: '73203886b4064a43a2b3ede33ce650f280ebe9c5' })));
+            } }, h("slot", { key: 'f574609666ae7484752ec8cfaf7f0bffa1645c83' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -60,8 +63,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Disables the Link"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "underline": {
@@ -78,8 +83,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Displays the Link with an underline."
                 },
-                "attribute": "underline",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "underline",
                 "defaultValue": "true"
             },
             "standalone": {
@@ -96,8 +103,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Displays the Link as a standalone component. Not part of a paragraph."
                 },
-                "attribute": "standalone",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "standalone",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/message/message.css

@@ -8,31 +8,31 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--system-info-default);
+  border-left: 4px solid var(--tds-message-border-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--system-info-default);
+  color: var(--tds-message-icon-info);
 }
 :host .wrapper.success {
   background-color: var(--tds-message-background-success);
-  border-left: 4px solid var(--system-success-default);
+  border-left: 4px solid var(--tds-message-border-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--system-success-default);
+  color: var(--tds-message-icon-success);
 }
 :host .wrapper.error {
   background-color: var(--tds-message-background-error);
-  border-left: 4px solid var(--system-danger-default);
+  border-left: 4px solid var(--tds-message-border-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--system-danger-default);
+  color: var(--tds-message-icon-error);
 }
 :host .wrapper.warning {
   background-color: var(--tds-message-background-warning);
-  border-left: 4px solid var(--system-warning-default);
+  border-left: 4px solid var(--tds-message-border-warning);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--system-warning-default);
+  color: var(--tds-message-icon-warning);
 }
 :host .wrapper.minimal {
   border: none;
@@ -48,7 +48,7 @@
   text-transform: var(--detail-02-text-transform);
 }
 :host .wrapper.minimal.error .header {
-  color: var(--system-danger-default);
+  color: var(--tds-message-minimal-header-error);
 }
 :host tds-icon {
   padding-right: 16px;

package/dist/collection/components/message/message.js

@@ -5,6 +5,16 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsMessage {
     constructor() {
+        /** Variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** Variant of Message. */
+        this.variant = 'information';
+        /** Removes the icon in the Message. */
+        this.noIcon = false;
+        /** Minimal Message styling. */
+        this.minimal = false;
+        /** Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
         this.getIconName = () => {
             switch (this.variant) {
                 case 'information':
@@ -19,13 +29,6 @@ export class TdsMessage {
                     return 'info';
             }
         };
-        this.header = undefined;
-        this.modeVariant = null;
-        this.variant = 'information';
-        this.noIcon = false;
-        this.minimal = false;
-        this.tdsAlertDialog = 'dialog';
-        this.tdsAriaLabel = undefined;
     }
     getAriaLabel() {
         if (this.header) {
@@ -37,11 +40,11 @@ export class TdsMessage {
     render() {
         const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
         const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
-        return (h(Host, { key: '752eb725898add9261df7460b3043642e7e6a7ef', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'd1346696f7f4d63d25cbacc0b3cbf60c39a54add', class: {
+        return (h(Host, { key: 'ac71829f0647270d499469049a833c282abca25d', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'ae95905137e70a95e6013e643e43baec0c10792b', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: '39d83a70a25d5ac07c3786f47989ce77b1a9b386', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'aeb139399975656ee15493dab9c2ac77e4f295a0', class: `content` }, this.header && (h("div", { key: 'd9a1e8b5d2513630ff9c0a4363d346dfe2ecfd09', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: 'dffbcdb31b11c4f6313609fac311991202b9f462', class: "extended-message", id: contentId }, h("slot", { key: '38578271864c5884c5a4a4c105ae44ef6d2caf07' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: 'ea830e6051ef9e0f751a1e8d5e24fbd17ad6ec58', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'c71e70d57147d9ac050e7a223ed097e58cb6a49e', class: `content` }, this.header && (h("div", { key: '1acded0a8f8522792f41a4331a2009a42cbf4894', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '0aed7c6daf7892e6ac1d5b3f8715e7c9032b11a3', class: "extended-message", id: contentId }, h("slot", { key: '75898f0a957581dc2720667c3eaae6e17201d81c' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }
@@ -71,8 +74,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Header text for the component."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "modeVariant": {
                 "type": "string",
@@ -88,8 +93,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "variant": {
@@ -106,8 +113,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Variant of Message."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'information'"
             },
             "noIcon": {
@@ -124,8 +133,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Removes the icon in the Message."
                 },
-                "attribute": "no-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-icon",
                 "defaultValue": "false"
             },
             "minimal": {
@@ -142,8 +153,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Minimal Message styling."
                 },
-                "attribute": "minimal",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "minimal",
                 "defaultValue": "false"
             },
             "tdsAlertDialog": {
@@ -160,8 +173,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
                 },
-                "attribute": "tds-alert-dialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-alert-dialog",
                 "defaultValue": "'dialog'"
             },
             "tdsAriaLabel": {
@@ -178,8 +193,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -8,6 +8,20 @@ import generateUniqueId from "../../utils/generateUniqueId";
  * */
 export class TdsModal {
     constructor() {
+        /** Disables closing Modal on clicking on overlay area. */
+        this.prevent = false;
+        /** Size of Modal  */
+        this.size = 'md';
+        /** Changes the position behaviour of the actions slot.  */
+        this.actionsPosition = 'static';
+        /** Shows or hides the close [X] button. */
+        this.closable = true;
+        /** Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
+        // State that keeps track of show/closed state for the Modal.
+        this.isShown = false;
+        // Focus state index in focusable Elements
+        this.activeElementIndex = 0;
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
             this.returnFocusOnClose();
@@ -56,17 +70,6 @@ export class TdsModal {
                 referenceEl.addEventListener('click', this.handleReferenceElementClick);
             }
         };
-        this.header = undefined;
-        this.prevent = false;
-        this.size = 'md';
-        this.actionsPosition = 'static';
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.show = undefined;
-        this.closable = true;
-        this.tdsAlertDialog = 'dialog';
-        this.isShown = false;
-        this.activeElementIndex = 0;
     }
     /** Shows the Modal.  */
     async showModal() {
@@ -205,10 +208,10 @@ export class TdsModal {
         const usesActionsSlot = hasSlot('actions', this.host);
         const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
         const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '2d39760de58fd957585e4370aa88447d85249eca', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: '4a220f8d1156cd7ef30ba0f77e33f6b368a71c5d', 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: '5eeaf5c29529bf77ddde4892067f13d312d1bba7', class: "tds-modal-backdrop" }), h("div", { key: '8a6ccd911dfec947a809320a0631d5f9904ef78d', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'b7c760ebded4e98319cec75c161002a579316902', id: headerId, class: "header" }, this.header && h("div", { key: 'db14e71913052ba5367ab95a41a366c7f2dea4a3', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '62b394718c78e564fd50e7ff3328e637a63679e6', name: "header" }), this.closable && (h("button", { key: '9ff8ad81be4f72ee6a298a9ba39a1024269d3ec2', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'b34b8a55c7f5c65ce7a3fdee6114c66ee4ab82c3', name: "cross", size: "20px" })))), h("div", { key: 'ab04e506dd94c69d8f91fb774fa85f355f3629d4', id: bodyId, class: "body" }, h("slot", { key: 'f4a8e2377b4cae3a9c4fa1032e896b0b0c58a06a', name: "body" })), usesActionsSlot && h("slot", { key: '09137d7c8b81f91dbf419b10c8a085de25df1272', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2129611789e7d9c1e32731f59100f75ff4e58800', class: "tds-modal-backdrop" }), h("div", { key: 'cce280887ce68ab5471cd939847c8f23703e6a11', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '2629204523dff0d2afefab238514db74b9d1a93b', id: headerId, class: "header" }, this.header && h("div", { key: '040ddd22c7b782d77e07cc1ff4cd1fdf0d508cbe', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '7b15247fea7c3ab2986e453b98e7a7f9ccff943f', name: "header" }), this.closable && (h("button", { key: '67e09f9f95ad58e02c1f9adb9883af4a1c16f837', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '52694db7eb7dc40ca2ea8aeb3e13611f899177a8', name: "cross", size: "20px" })))), h("div", { key: 'b7fedc44fae5a964399f6b63fad96acaba9263a1', id: bodyId, class: "body" }, h("slot", { key: 'd60cbee2a55a487f738aa9a741d8b1e0cb74484e', name: "body" })), usesActionsSlot && h("slot", { key: 'c969e1f820a4f4ecfab84fe3349eee0233710f05', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -238,8 +241,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Sets the header of the Modal."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "prevent": {
                 "type": "boolean",
@@ -255,8 +260,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Disables closing Modal on clicking on overlay area."
                 },
-                "attribute": "prevent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "prevent",
                 "defaultValue": "false"
             },
             "size": {
@@ -273,8 +280,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Size of Modal"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "actionsPosition": {
@@ -291,8 +300,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Changes the position behaviour of the actions slot."
                 },
-                "attribute": "actions-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "actions-position",
                 "defaultValue": "'static'"
             },
             "selector": {
@@ -309,8 +320,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "CSS selector for the element that will show the Modal."
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -330,7 +343,9 @@ export class TdsModal {
                 "docs": {
                     "tags": [],
                     "text": "Element that will show the Modal (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "show": {
                 "type": "boolean",
@@ -346,8 +361,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Controls whether the Modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
                 },
-                "attribute": "show",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show"
             },
             "closable": {
                 "type": "boolean",
@@ -363,8 +380,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Shows or hides the close [X] button."
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             },
             "tdsAlertDialog": {
@@ -381,8 +400,10 @@ export class TdsModal {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-alert-dialog",
                 "defaultValue": "'dialog'"
             }
         };

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

@@ -3,7 +3,7 @@
   display: inline-block;
   color: var(--tds-popover-canvas-color);
   background-color: var(--tds-popover-canvas-background);
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--tds-popover-canvas-box-shadow);
   border-radius: 4px;
   z-index: 900;
 }