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

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

@@ -4,14 +4,16 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderDropdownListItem {
     constructor() {
+        /** If the link should appear selected. */
         this.selected = false;
+        /** The size of the component. */
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '1dd37d8c57686fdde3bbf602cd2d327237ff9ee8' }, h("div", { key: 'ecbcceac23e94264aa3bfd253190c358d415492d', class: {
+        return (h(Host, { key: 'a77c76be838a9f7036fe712b86cdf2f5b3c0c46f' }, h("div", { key: 'a3740446c4fed86228fa14ecb20b99b2c707f97b', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '0e02564e017aaea2a0e9336e64fb853ecf4db367' }))));
+            } }, h("slot", { key: '0a037fd8059aa356ed9885e3e06d391f876e2fc3' }))));
     }
     static get is() { return "tds-header-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +43,10 @@ export class TdsHeaderDropdownListItem {
                     "tags": [],
                     "text": "If the link should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "size": {
@@ -59,8 +63,10 @@ export class TdsHeaderDropdownListItem {
                     "tags": [],
                     "text": "The size of the component."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'md'"
             }
         };

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

@@ -4,14 +4,8 @@ import { h, Host } from "@stencil/core";
  * @slot header - Slot for the header.
  */
 export class TdsHeaderDropdownListLgUser {
-    constructor() {
-        this.imgUrl = undefined;
-        this.imgAlt = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
-    }
     render() {
-        return (h(Host, { key: 'ce178361998f3e7e64972a5a2971b3c39d9cd1eb', role: "listitem" }, h("div", { key: 'cd52038858fe6fb243f013d741343abd0bc529f1', class: "user-box" }, this.imgUrl && h("img", { key: '2f269c20c2e54695630b559002464f92a4f332bc', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '567bcc9d198d5e9e1a9ffd4c213dd2cf80ffbbb6', name: "thumbanil" }), h("div", { key: '06a2def2886269e2399a1b95850b077e8235fdfb', class: "user-content" }, h("div", { key: 'bb189ed4a6a22a884837d876255dcff7495c5200', class: "header" }, this.header, h("slot", { key: 'b88637de2dbff8fdc5f2280f123abd8b44d8f20e', name: "header" })), h("div", { key: '34b503dd4ec0ac5c450947e4019783af7074b777', class: "subheader" }, this.subheader, h("slot", { key: '8ffcd878217abd7036b304ed70ae12a4bd992350', name: "subheader" }))))));
+        return (h(Host, { key: '88298dc621372f56b0336686d055f27ef7bfee8a', role: "listitem" }, h("div", { key: 'da8b981e30d4cca52b4dfc2813e2d706f7c18d30', class: "user-box" }, this.imgUrl && h("img", { key: 'f81a370f4499f5bec4eedef0ef2d1aaa5aeca4ca', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '33c9d2b8d0761d6915129cd03f4b596b5c05c1b4', name: "thumbanil" }), h("div", { key: '78a05fa64af6d694b4927fef55260e18c2d5711f', class: "user-content" }, h("div", { key: '15f6a48e0f10574ae14af2e2d92342ec77e85aa1', class: "header" }, this.header, h("slot", { key: '12ebbfbc257918f264c76e7d38a28827880cadec', name: "header" })), h("div", { key: 'bbd348e04b5ea5732bb4426547ef5ed9eddf55d0', class: "subheader" }, this.subheader, h("slot", { key: '403e7f20cb5b564928759ce0be1b058d12610290', name: "subheader" }))))));
     }
     static get is() { return "tds-header-dropdown-list-user"; }
     static get encapsulation() { return "shadow"; }
@@ -41,8 +35,10 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Image URL."
                 },
-                "attribute": "img-url",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-url"
             },
             "imgAlt": {
                 "type": "string",
@@ -58,8 +54,10 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Image alt text."
                 },
-                "attribute": "img-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-alt"
             },
             "header": {
                 "type": "string",
@@ -75,8 +73,10 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Header text, usually the users first name and last name."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "subheader": {
                 "type": "string",
@@ -92,8 +92,10 @@ export class TdsHeaderDropdownListLgUser {
                     "tags": [],
                     "text": "Subheader text."
                 },
-                "attribute": "subheader",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheader"
             }
         };
     }

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

@@ -1,12 +1,9 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
-    constructor() {
-        this.tdsAriaLabel = undefined;
-    }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'e89db0f35bac2766a531be705b37c1d02e315431' }, h("tds-header-item", { key: '2aba0027ff9ce0516722d9785df5f61cd69aa02e' }, h("button", Object.assign({ key: 'f3b03d5b8a13285972edc9c645effc91c3ec92ad' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '6177dfc5ec0fed7902ecea6bab75b6031099c9c3', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'f1b3e80727ae2fbb84cbdf19fdd6500067fa010b' }, h("tds-header-item", { key: '6053c08c86b6f4149bed2eb7c8a4a26f16262fc9' }, h("button", Object.assign({ key: 'b2b645ed658328622e9a6411d5bcdfe66e59028c' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '6140334699f8a27f7d78387bb3bfcf08295a0c90', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }
@@ -36,8 +33,10 @@ export class TdsHeaderHamburger {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -19,10 +19,17 @@
 :host ::slotted(button:hover),
 :host ::slotted(a:hover) {
   background-color: var(--tds-header-item-hover);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-hover);
+}
+:host ::slotted(button:active),
+:host ::slotted(a:active) {
+  background-color: var(--tds-header-item-active);
+  box-shadow: inset 0 -2px 0 0 var(--tds-header-item-border-active);
 }
 :host ::slotted(button:focus-visible),
 :host ::slotted(a:focus-visible) {
   border: none;
+  margin-right: 1px;
   outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: inset 0 0 0 3px var(--tds-white);
   outline-offset: -2px;
@@ -35,9 +42,9 @@
 }
 :host .component-selected:not(.component-active) ::slotted(button),
 :host .component-selected:not(.component-active) ::slotted(a) {
-  background-color: var(--tds-header--basic-element-background-selected);
-  padding-top: 4px;
-  border-bottom-style: solid;
-  border-bottom-width: 4px;
-  border-bottom-color: var(--tds-nav-item-border-color-active);
+  box-shadow: inset 0 -4px 0 0 var(--tds-header-item-border-hover);
+}
+:host .component-selected:not(.component-active) ::slotted(button:focus-visible),
+:host .component-selected:not(.component-active) ::slotted(a:focus-visible) {
+  box-shadow: inset 0 0 0 3px var(--tds-white);
 }

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

@@ -5,7 +5,10 @@ import dfs from "../../../utils/dfs";
  */
 export class TdsHeaderItem {
     constructor() {
+        /** If the button should appear active. Can be used when the button is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
+        /** If the button should appear selected. */
         this.selected = false;
     }
     updateSlotted(searchPredicate, mutationCallback) {
@@ -74,10 +77,10 @@ export class TdsHeaderItem {
         }
     }
     render() {
-        return (h(Host, { key: '4a9d013ab3abde506f9992453cae793db9a652cf' }, h("tds-core-header-item", { key: '359634d0bca7720c8a9bfd5c696a89c97df76a75', class: {
+        return (h(Host, { key: '8bf1f05e837866442a31d6079cebce9f3f4b6a01' }, h("tds-core-header-item", { key: '2000815259c320803ecc6bb71553d56187c40983', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '7318ad6ea4d1dfa0f16b70c6f305ece087aeea2e' }))));
+            } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }
@@ -107,8 +110,10 @@ export class TdsHeaderItem {
                     "tags": [],
                     "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "active",
                 "defaultValue": "false"
             },
             "selected": {
@@ -125,8 +130,10 @@ export class TdsHeaderItem {
                     "tags": [],
                     "text": "If the button should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             }
         };

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

@@ -6,11 +6,9 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
  */
 export class TdsHeaderLauncher {
     constructor() {
-        this.uuid = generateUniqueId();
         this.open = false;
-        this.buttonEl = undefined;
         this.hasListTypeMenu = false;
-        this.tdsAriaLabel = undefined;
+        this.uuid = generateUniqueId();
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -48,11 +46,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: 'b62aac321e36b12d139d51c3421a1a9540079c22' }, h("div", { key: '4bb1d8e74ec245d9899870fccd990935488dcf7b', class: {
+        return (h(Host, { key: '8fc1d1c845a4dfa5deba02a83edf89c6d3ea8278' }, h("div", { key: '2c23ffd716390481b3cdd2da2a4062193723f800', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'c3b90d64efd2878ffc2b0332538c2877f2b48fec' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'dd41f1e0573ceed07f519813bec503001d02377b', 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: 'a82084372217eb32338e15bd436ed09006331043' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '87bd7d7aad3f60993c9cfb9df25c5cd54a45150f', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -89,8 +87,10 @@ export class TdsHeaderLauncher {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute of the launcher button"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -2,13 +2,14 @@ import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
     constructor() {
+        /** If the button should appear active. Can be used when the button is
+         * triggering a dropdown, and the dropdown is open, for example. */
         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: '62757385fdf2aa3c51af260f2761714aea4c9727' }, h("tds-header-item", { key: '199a00653122178784999c0b5d643b9b15cd8cc5', active: this.active }, h("button", Object.assign({ key: 'd59e77834e10763d5b1c518d5bcd96e51c4dad58' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'add07749af57c4110b6baeda3944e97ddf36c067', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: '6d8b16f71586f3bc944f17aa80234605bbc57ab0' }, h("tds-header-item", { key: '49529617101956090cdc2092d4df80fdf376a123', active: this.active }, h("button", Object.assign({ key: '76cd7b84413aafedaec6b1326e55307bf640b73f' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '145394461e3bc680a2f2b07e82f8b3bb549f1e6d', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }
@@ -38,8 +39,10 @@ export class TdsHeaderLauncherButton {
                     "tags": [],
                     "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "active",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -56,8 +59,10 @@ export class TdsHeaderLauncherButton {
                     "tags": [],
                     "text": "Value to be used by the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

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

@@ -5,9 +5,6 @@ import isHeadingElement from "../../../utils/isHeadingElement";
  * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
  */
 export class TdsHeaderLauncherGrid {
-    constructor() {
-        this.headingElement = undefined;
-    }
     componentWillLoad() {
         const listRoot = this.host;
         const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
@@ -28,7 +25,7 @@ export class TdsHeaderLauncherGrid {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: '3f2f7a655fef2f9d996851065a54b1f86929c989' }, h("div", Object.assign({ key: '2a111751b897f09bedeaa332fb7c9c0ef46ba5cd' }, listAttributes), h("slot", { key: '9e172d88f775c2f7508fb55b7de5cec49e7c9160' }))));
+        return (h(Host, { key: '5d0824ce5d829d78fd61e2e53e08b6bdca0e4569' }, h("div", Object.assign({ key: '7e6f891f6bc92b4f93874a538e017382c72e176e' }, listAttributes), h("slot", { key: '31133b8760e19ed767f24544fea026c59c181e53' }))));
     }
     static get is() { return "tds-header-launcher-grid"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherGridItem {
     render() {
-        return (h(Host, { key: 'fc7949be187e1a83b56e8cf3a7fd1ac51a4c76cc', role: "listitem" }, h("slot", { key: '998d551d53a7e0b6536a5a45f5e67a7425508f70' })));
+        return (h(Host, { key: '1506d0cda6ddcdd025ea7febf24e34c8e0d5b479', role: "listitem" }, h("slot", { key: 'f6ae96ad0c953297fddf43cfcee6d688a93846f5' })));
     }
     static get is() { return "tds-header-launcher-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherGridTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '586d5eb51af05ee6a6f1897ce77a765eae3d79dd' }, h("h3", { key: 'e1fab245e78ed2ab2e2c4be5abe1e8bdb218d1eb', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '7b1f819e8e4a0353f06d88b6c4ec5dc3ad254f3a' }))));
+        return (h(Host, { key: '25db2b1431472f1883bce6605c060e48129dacc5' }, h("h3", { key: '0caaece113240546638d8d0366bcecba6f945986', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '16962f436f38d529357dbaade615badd87862323' }))));
     }
     static get is() { return "tds-header-launcher-grid-title"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherList {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'd8237d7c159c99b1ddef846db5a18900bb301504' }, h("tds-header-dropdown-list", { key: 'd314cd468397a9a288e5842cae1a1910d111ac40', size: "lg" }, h("slot", { key: '03465a88d59f0f56ec18f675d129560100d254dd' }))));
+        return (h(Host, { key: 'ceedbada9d5a96ecdb5306b0e55f939ba69c78d8' }, h("tds-header-dropdown-list", { key: 'a1ffa08021a4ac0d3aad0401330b6d82ad4e20f9', size: "lg" }, h("slot", { key: 'e0808a6e71a6bb26e8b56005c9552fde5af9296b' }))));
     }
     static get is() { return "tds-header-launcher-list"; }
 }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsHeaderLauncherListItem {
     render() {
-        return (h(Host, { key: '7ec01704950bdb48cbc48251e5cb4ad0e4b8babf' }, h("tds-header-dropdown-list-item", { key: '2274d354403ca35178bad010cfcec06f716ac24c', size: "lg" }, h("slot", { key: '35a3c7cdb933bb9bb1be32770b74d3ae9441b1ff' }))));
+        return (h(Host, { key: 'bcc63c58186216485acf6e6e0f896158e92cd29e' }, h("tds-header-dropdown-list-item", { key: 'e4b963bf20b97aa19f8f6dbd4d4a6face04220db', size: "lg" }, h("slot", { key: '03445a4fe12c6f5a283b6d2635d657bbfd103263' }))));
     }
     static get is() { return "tds-header-launcher-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderLauncherListTitle {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'c280ad56213dd6f54b3c4eac8695e2ecef6819f8' }, h("h3", { key: 'a1e4c17cb97f27bb882de8c8092593e654168e02', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'eaf2effb5d779e1faaa030a2e2df2b6afde51d66' }))));
+        return (h(Host, { key: '2bd6c5fa87fe1b94065980a7f7794ada3ccf2a9f' }, h("h3", { key: '3ccf8d967a2bda31d1724d4d3bf522cb1052f497', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '831e18f03058184f3825541fd2be34d07a443e78' }))));
     }
     static get is() { return "tds-header-launcher-list-title"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/header-title/header-title.css

@@ -8,6 +8,8 @@ h4 {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  font-size: 14px;
+  line-height: normal;
 }
 h4 slot {
   display: block;

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TdsHeaderTitle {
     render() {
-        return (h("h4", { key: 'b3ac74d4d978c32c1dfd417a5217bc5953075033' }, h("slot", { key: '67d55d1f3413b130767ae8db2e1d952f27beb00a' })));
+        return (h("h4", { key: '4af2f894bf508d0ea8f5c934f4b6e3be61f1ce1a' }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' })));
     }
     static get is() { return "tds-header-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class TdsHeader {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '1e9a1427f3038ac59e3c89669049679a06626fff' }, h("slot", { key: 'a2e84cf4bfc88b8bc3a971cf374593afcd3eabae', name: "hamburger" }), h("slot", { key: 'c8a49826b7c504ddd17be29a3b6ae814848d6033', name: "title" }), h("nav", Object.assign({ key: '750a09450f2edfd0d335ca7863b084f62655129e' }, navAttributes), h("ul", { key: '1bca7410f4c0f81ffa77e57fba7c48f64afc22ab', class: "tds-header-component-list" }, h("slot", { key: 'fdaaac9d39e9cf5f396004dc1e1a7ce6d83a7ada' }), h("li", { key: '339deea3cbd820159adc3fe7dfa8a6a8e5192698', class: "tds-header-middle-spacer" }), h("slot", { key: '37273630aaf66ada7154ebb6f4ea01cc0ce0f94a', name: "end" })))));
+        return (h(Host, { key: 'f5c7796ebe3f5d9bd6e555f0dd01f8ace54c1cd8' }, h("slot", { key: '77cba127f947cc8fefa875a6db0e68bf52c5a80e', name: "hamburger" }), h("slot", { key: 'daf9d8299734f72355eeaeb307dcc3e25520a7b8', name: "title" }), h("nav", Object.assign({ key: '904338fd0fb8ab3ce42b46ee482d021667fe49e8' }, navAttributes), h("ul", { key: '66994fd2de781178624f8d67c88e4d75e84d2844', class: "tds-header-component-list" }, h("slot", { key: '51ee40aa7b17fb2a36ca23c2cebfb74efb69ea24' }), h("li", { key: 'db64903ac70ee12d48cd5029997949875caa53e8', class: "tds-header-middle-spacer" }), h("slot", { key: '80a48331b218b734061a421c9e31f8fd1b98be1a', name: "end" })))));
     }
     static get is() { return "tds-header"; }
     static get originalStyleUrls() {

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