@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/collection/components/radio-button/radio-button.css

@@ -15,7 +15,7 @@
   outline: none;
   margin: 0;
   border: 0;
-  width: 24px;
+  width: 20px;
   height: 24px;
   border-radius: 50%;
   position: relative;
@@ -24,7 +24,7 @@
   align-self: flex-start;
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
-  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
@@ -34,25 +34,26 @@
   box-sizing: border-box;
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 22px;
-  height: 22px;
-  left: 1px;
-  top: 1px;
+  width: 20px;
+  height: 20px;
+  top: 2px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
   border: 1px solid var(--tds-radio-button-interaction-01);
   background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
-  left: 4px;
-  top: 4px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
   background-color: var(--tds-radio-button-background-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::before {
   background-color: var(--tds-radio-button-background-focus);
-  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
+  box-shadow: 0 0 0 1px var(--tds-radio-button-background-focus);
+  animation: rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::after {
   outline: 1px solid var(--tds-radio-button-interaction-outline);
@@ -77,18 +78,17 @@
 }
 .tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
   display: block;
+  background-color: transparent;
   width: 16px;
   height: 16px;
-  left: 4px;
+  left: 2px;
   top: 4px;
-  border: 1px solid var(--tds-radio-button-color-disabled-before);
-  box-sizing: content-box;
+  box-shadow: inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after);
 }
 .tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
   border: 4px solid var(--tds-radio-button-interaction-02);
   background-color: var(--tds-radio-button-color-disabled-after);
-  left: 5px;
-  top: 5px;
+  clip-path: inset(1px 1px round 50%);
 }
 @keyframes rb-focus {
   0% {

package/dist/collection/components/radio-button/radio-button.js

@@ -5,20 +5,20 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsRadioButton {
     constructor() {
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId();
+        /** Decides if the Radio Button is checked or not. */
+        this.checked = false;
+        /** Decides if the Radio Button is required or not. */
+        this.required = false;
+        /** Decides if the Radio Button is disabled or not. */
+        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.value = undefined;
-        this.radioId = generateUniqueId();
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -27,10 +27,10 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: '6a4ff569b492e4d5bbdccb0f9bd6b82a8186673e', class: "tds-radio-button" }, h("input", { key: '0681a3f58da48700d7134a5b4db923445fcc57cf', ref: (inputEl) => {
+        return (h("div", { key: 'fb96d651d7161e4e0d4a0ffaab031b0b762ceb90', class: "tds-radio-button" }, h("input", { key: '822234a89727d84cbb00822bb53fdba1b9fec8d4', ref: (inputEl) => {
                 if (inputEl)
                     this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0b5ca6d7a54706ed0c7878b51380683da34301f7', htmlFor: this.radioId }, h("slot", { key: '68d0582c534588d209f1223191a9cc8781117a15', name: "label" }))));
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'c08a19a007fbf87fd0b585341c4c914b72a91671', htmlFor: this.radioId }, h("slot", { key: '3e977aab78c651769ba51f458a2e785aeb638508', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }
@@ -60,8 +60,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Name of Radio Button, used for reference."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -77,8 +79,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Value of input."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             },
             "radioId": {
                 "type": "string",
@@ -94,8 +98,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Unique Radio Button identifier."
                 },
-                "attribute": "radio-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "radio-id",
                 "defaultValue": "generateUniqueId()"
             },
             "checked": {
@@ -112,8 +118,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is checked or not."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "required": {
@@ -130,8 +138,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is required or not."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -148,8 +158,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Decides if the Radio Button is disabled or not."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -166,8 +178,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides an accessible name for the component"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "tdsTabIndex": {
                 "type": "number",
@@ -183,8 +197,10 @@ export class TdsRadioButton {
                     "tags": [],
                     "text": "Provides a tabindex used when radio buttons are grouped"
                 },
-                "attribute": "tds-tab-index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-tab-index"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -12,7 +12,7 @@ export class TdsSideMenuCloseButton {
         const sideMenuEl = this.host.closest('tds-side-menu');
         const sideMenuId = sideMenuEl ? sideMenuEl.id : '';
         const buttonProps = Object.assign(Object.assign(Object.assign({ 'aria-label': 'Close' }, (sideMenuId && { 'aria-controls': sideMenuId })), inheritAriaAttributes(this.host)), { 'onClick': TdsSideMenuCloseButton.handleClick });
-        return (h(Host, { key: '3c7170428b11fd26f5c00f5f6012984982eb364c' }, h("button", Object.assign({ key: 'f3e0253705d9e7a2ddd6d20c779466d09b24b0f7' }, buttonProps), h("tds-icon", { key: 'caa6069e817904f832152838036ca3630b74cd5a', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (h(Host, { key: '5454382b10c715fe943f606794cc4fed75dfd29c' }, h("button", Object.assign({ key: '47e139cce8c51def9b11c5b63729a9a99101e80d' }, buttonProps), h("tds-icon", { key: 'fe168790ca7a9eb404f19682adb36ec29e7b1da6', name: "cross", size: "20px", svgTitle: "Cross" }))));
     }
     static get is() { return "tds-side-menu-close-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuCollapseButton {
     constructor() {
+        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -18,7 +19,6 @@ export class TdsSideMenuCollapseButton {
                 });
             }
         };
-        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -29,12 +29,12 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: '563423e27c70296a2c11820bad22f2e6081cc0b6' }, h("div", { key: 'f9ed17f35641ec86cd31dc2c161bf478c30a3606', class: {
+        return (h(Host, { key: 'cc006e1bf231fa1386f16ddc774465c405823f98' }, h("div", { key: '2eff800550eeb5beab4caa22e6abccbbaf60b1d9', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '3364f79ca3719328636d1cb9b5bebb58e9f9ccdc', class: { button: true } }, h("button", { key: '699963ae2023fdbc5e8836b1801c13e622214634', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+            } }, h("tds-side-menu-item", { key: 'a8e39f7bd79013239b51766aa23423947bd18616', class: { button: true } }, h("button", { key: '64ddd862a2f1422bcfa52c4e113b27fa9f439194', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, h("svg", { key: 'c10901b2cdc12a50a29c1425319ae18286b33cdf', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'd59bc5ce90e44be9f2d930b9a2ac72f26b653681', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '09f5787783fdb7168bbd28acf18ac0d769a31459' }))))));
+            } }, h("svg", { key: 'f2f5628980782b2dbf81feb707d3e0b11341da10', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '4d1968fbce0b872496e1c8620bf04427de83f009', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'fbe64e4bf62fbd627e4478323f4612ca63bbdf4c' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +71,8 @@ export class TdsSideMenuCollapseButton {
                         "CollapseEvent": {
                             "location": "import",
                             "path": "../side-menu",
-                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent",
+                            "referenceLocation": "CollapseEvent"
                         }
                     }
                 }
@@ -95,7 +96,8 @@ export class TdsSideMenuCollapseButton {
                         "CollapseEvent": {
                             "location": "import",
                             "path": "../side-menu",
-                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent",
+                            "referenceLocation": "CollapseEvent"
                         }
                     }
                 }

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -6,9 +6,11 @@ import { Fragment, h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdown {
     constructor() {
+        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        this.buttonLabel = undefined;
+        /** If the button that opens the dropdown should appear selected. */
         this.selected = false;
+        /** Toggle open state programmatically */
         this.open = false;
         this.hoverState = {
             isHovered: false,
@@ -60,13 +62,13 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: 'c445ee17a53144079495acb4d1153dc5f612646b' }, h("div", { key: 'b065cb14ea953a4bc00f9f46c6a2f6e1c1034fc4', class: {
+        return (h(Host, { key: 'a2db6d3e38283bd2c8b1c455bf19538d6bd9195c' }, h("div", { key: 'e47038143a6241e098be770b1808d5b7c95c48a2', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '7943b4e12bdf59a9777789b93c77dd92ad2dfb0e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '1ac32787f2de7250bc5c837bd74f9330dbc0b96f', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: '957d046e71a2318d634dba3d3872e6a49ae16b02' }, h("slot", { key: 'df8984720383a834f689e61a8e8bddb1e0cd92ed', name: "icon" }), !this.collapsed && (h(Fragment, { key: '22085c004966a41285404d5e4871023104d0bb0b' }, this.buttonLabel, h("slot", { key: 'cd82933ecce64fede3b898a77ce949cdb568ebde', name: "label" }), h("tds-icon", { key: 'b475975ed4c714a2e3526a334ae19f308f54715c', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '4bd22d9c1b67f9783d8b596991ff62a8d158ba41', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: '11082571734352f3b8913017d46104b28b57ba47', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '227ceed36a5db531ff2bd45320bcac88943565bc', name: "label" }))), h("slot", { key: 'b8ca5992ac9bbb0539ceb3d98536691f70926ea5' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'a0c9edee1c9ddae87338b6262daecf72710f2e39' }, h("slot", { key: 'cb4363d05de83fa389e7e6e601b4284fe360b105', name: "icon" }), !this.collapsed && (h(Fragment, { key: '4c9bfd1a75368294a2d6b612d6eac05499e7c301' }, this.buttonLabel, h("slot", { key: '51171f2dfb82aa66fcd3054b5c4e9db10dcf9fbb', name: "label" }), h("tds-icon", { key: 'ba103a32e3ab8071f4bd599d12fd355dbd99525b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'd5d25b302170b5815769b986658284e06aac248d', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: 'c006c434c7deff29e26e68daf0d4dd3d9af84351', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'fcb12b622cd8eed23d8034a002d6055fb30260d5', name: "label" }))), h("slot", { key: '4f94b50756851b134bec7fff2b0c04fe454d1e84' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -96,8 +98,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the dropdown should be open from the start."
                 },
-                "attribute": "default-open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-open",
                 "defaultValue": "false"
             },
             "buttonLabel": {
@@ -114,8 +118,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
                 },
-                "attribute": "button-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label"
             },
             "selected": {
                 "type": "boolean",
@@ -131,8 +137,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "If the button that opens the dropdown should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "open": {
@@ -149,8 +157,10 @@ export class TdsSideMenuDropdown {
                     "tags": [],
                     "text": "Toggle open state programmatically"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -15,9 +15,9 @@ export class TdsSideMenuDropdownList {
         this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: '4096fb37997a3cce5750f9d7ee468f99bff81787', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '7cf0000e1371ab010cdc6f86d371f6a7f374f0d2', class: {
+        return (h(Host, { key: '5b7f22b1be0ee04ad371c623e74df76925d18b3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '13ecc23daf9bcbe31325c9cd11a9e2c26a658d13', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'e169b04aae71ea2c53eaae921c9cb87e85b02224' }))));
+            } }, h("slot", { key: '33862a757ab70623a15634a1cc5308e5f6467a14' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  * */
 export class TdsSideMenuDropdownListItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -37,13 +38,13 @@ export class TdsSideMenuDropdownListItem {
         }
     }
     render() {
-        return (h(Host, { key: '64c7367db70070bb43c4533ddcafbda97651231f', role: "listitem" }, h("div", { key: '60434a96f6de0a9bda3d26f7003a10c8b5668552', class: {
+        return (h(Host, { key: 'a8abd6dc9dbbfc88d10ce19d9e11eb2da035d21c', role: "listitem" }, h("div", { key: '3facc73c60078b1965c7b80c1e8608284483a124', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '8590776910cfb61c614c5339daa5c5464cc9a729' }))));
+            } }, h("slot", { key: 'd8d4aafd3f3bea10c73e933d4564143e9604a6f3' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +74,10 @@ export class TdsSideMenuDropdownListItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.js

@@ -5,7 +5,10 @@ import dfs from "../../../utils/dfs";
  * */
 export class TdsSideMenuItem {
     constructor() {
+        /** If the item should appear selected. */
         this.selected = false;
+        /** If the item should appear active. Can be used when the item is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
@@ -75,13 +78,13 @@ export class TdsSideMenuItem {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '4f5ced7e398987e33d5c2ee08a2b50637ccbaf8f' }, h("div", { key: '6bbeae2f3148011c7b516b1922df693abb6f2083', class: {
+        return (h(Host, { key: 'bc1168a557d8bd92a5579fb0be4c4a6b760c0007' }, h("div", { key: '6eba3fb28d25bce88815620a49aba34e4075bd13', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: '2a836f4a3892acae4541972dadcf4a5e958d45f4' }))));
+            } }, h("slot", { key: 'dcf683b97b5f0e8aaaa3741ed5804ee16bbae701' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -111,8 +114,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear selected."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "active": {
@@ -129,8 +134,10 @@ export class TdsSideMenuItem {
                     "tags": [],
                     "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "active",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
+        return (h(Host, { key: 'df82f910a824371d2afd656483f1279e1a941a95' }, h("div", { key: '521b155b9833fe44deed8a460af1172e95c39e1e' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.js

@@ -3,14 +3,8 @@ import { h, Host } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
  * */
 export class TdsSideMenuUser {
-    constructor() {
-        this.heading = undefined;
-        this.subheading = undefined;
-        this.imgSrc = undefined;
-        this.imgAlt = undefined;
-    }
     render() {
-        return (h(Host, { key: '029f8e80bd9eb56ba1826280e6c64fdddbba918c' }, h("tds-side-menu-user-image", { key: 'ee277efe9180b8013596cae3ccebf801c47d7573', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: 'bfd0ee76f3c8903f033417ab917796ab9a2bc941', name: "image" })), h("tds-side-menu-user-label", { key: '0a1e257454854db6e670a68a3a085430e4e5187c', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: '5c68cbd8ac836789142fabebed61ed125435fb74' }, h("tds-side-menu-user-image", { key: '645a823d23202b15e838d35642ab2fa2953a62d7', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '2425cc36d3a13c0e1afd91dcd206b59526fc42ae', name: "image" })), h("tds-side-menu-user-label", { key: '270f9c6276f4ab290aa6dd7e949d70b2312ba289', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }
@@ -40,8 +34,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The heading text."
                 },
-                "attribute": "heading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
             },
             "subheading": {
                 "type": "string",
@@ -57,8 +53,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The subheading text."
                 },
-                "attribute": "subheading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheading"
             },
             "imgSrc": {
                 "type": "string",
@@ -74,8 +72,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The image source."
                 },
-                "attribute": "img-src",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-src"
             },
             "imgAlt": {
                 "type": "string",
@@ -91,8 +91,10 @@ export class TdsSideMenuUser {
                     "tags": [],
                     "text": "The image alt text."
                 },
-                "attribute": "img-alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "img-alt"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.js

@@ -7,12 +7,8 @@ import { h, Host } from "@stencil/core";
  * <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
  * */
 export class TdsSideMenuUserImage {
-    constructor() {
-        this.src = undefined;
-        this.alt = undefined;
-    }
     render() {
-        return (h(Host, { key: '22bb496463e8548ddf2ce55f95f112dae1afa181' }, h("slot", { key: 'ebbe1e06c9b27b41f9f206f65890654be3866d03' }), this.src && h("img", { key: '2a378a8e56cb54a5c300123e156ecadf04d92459', src: this.src, alt: this.alt })));
+        return (h(Host, { key: '85fe09b4f6ac3b7d99da2d6256c758900329653a' }, h("slot", { key: '6c04244257c79df5fcd4d9fd1f8fae6d6765c901' }), this.src && h("img", { key: 'c1a65990c6d1b8f4b6383dc49750f65ca938e820', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }
@@ -42,8 +38,10 @@ export class TdsSideMenuUserImage {
                     "tags": [],
                     "text": "The image source."
                 },
-                "attribute": "src",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
             },
             "alt": {
                 "type": "string",
@@ -59,8 +57,10 @@ export class TdsSideMenuUserImage {
                     "tags": [],
                     "text": "The image alt text."
                 },
-                "attribute": "alt",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
             }
         };
     }

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.js

@@ -1,11 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuUserLabel {
-    constructor() {
-        this.heading = undefined;
-        this.subheading = undefined;
-    }
     render() {
-        return (h(Host, { key: '30326793059e4e25b3c769e94b22780a37754ba4' }, this.heading, this.subheading && h("div", { key: 'e3912bf0571bb8ef67ebea53d37547a0a9284bf7', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '6eadfff1b48a9cc2cb2d3454f39a3f4aca466a60' }, this.heading, this.subheading && h("div", { key: 'f92e371afe0154292f9ef21e9fd43e77f63dbb88', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }
@@ -35,8 +31,10 @@ export class TdsSideMenuUserLabel {
                     "tags": [],
                     "text": "The heading text."
                 },
-                "attribute": "heading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
             },
             "subheading": {
                 "type": "string",
@@ -52,8 +50,10 @@ export class TdsSideMenuUserLabel {
                     "tags": [],
                     "text": "The subheading text."
                 },
-                "attribute": "subheading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheading"
             }
         };
     }