@getflip/swirl-components 0.338.2 → 0.340.0

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js

@@ -20,6 +20,26 @@ const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
  */
 export class SwirlShellLayout {
     constructor() {
+        this.browserBackButtonLabel = "Navigate back";
+        this.browserForwardButtonLabel = "Navigate forward";
+        this.collapseNavigationButtonLabel = "Collapse navigation";
+        this.enableSecondaryNavGridLayout = true;
+        this.expandNavigationButtonLabel = "Expand navigation";
+        this.gridNavLayoutToggleLabel = "Grid";
+        this.hideMobileNavigationButtonLabel = "Close navigation";
+        this.listNavLayoutToggleLabel = "List";
+        this.navigationLabel = "Main";
+        this.secondaryNavCollapseLabel = "Show less";
+        this.secondaryNavExpandLabel = "Show more";
+        this.sidebarToggleIcon = "notifications";
+        this.sidebarToggleLabel = "Toggle sidebar";
+        this.skipLinkLabel = "Skip to main content";
+        this.isDesktopViewport = true;
+        this.secondaryNavView = "list";
+        this.sidebarScrollState = {
+            scrollable: false,
+            scrolledToTop: false,
+        };
         this.collectNavItems = () => {
             this.mainNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item"));
             this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
@@ -51,33 +71,6 @@ export class SwirlShellLayout {
         this.onSidebarScroll = debounce(() => {
             this.updateSidebarScrollState();
         }, 16);
-        this.brandedHeader = undefined;
-        this.browserBackButtonLabel = "Navigate back";
-        this.browserForwardButtonLabel = "Navigate forward";
-        this.collapseNavigationButtonLabel = "Collapse navigation";
-        this.enableSecondaryNavGridLayout = true;
-        this.expandNavigationButtonLabel = "Expand navigation";
-        this.gridNavLayoutToggleLabel = "Grid";
-        this.hideMobileNavigationButtonLabel = "Close navigation";
-        this.listNavLayoutToggleLabel = "List";
-        this.navigationLabel = "Main";
-        this.secondaryNavCollapseLabel = "Show less";
-        this.secondaryNavExpandLabel = "Show more";
-        this.sidebarActive = undefined;
-        this.sidebarToggleBadge = undefined;
-        this.sidebarToggleBadgeAriaLabel = undefined;
-        this.sidebarToggleIcon = "notifications";
-        this.sidebarToggleLabel = "Toggle sidebar";
-        this.skipLinkLabel = "Skip to main content";
-        this.isDesktopViewport = true;
-        this.mobileNavigationActive = undefined;
-        this.navigationCollapsed = undefined;
-        this.secondaryNavCollapsed = undefined;
-        this.secondaryNavView = "list";
-        this.sidebarScrollState = {
-            scrollable: false,
-            scrolledToTop: false,
-        };
     }
     componentWillLoad() {
         this.isDesktopViewport = isDesktopViewport();
@@ -212,25 +205,25 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: 'c2ffd1c80fe74b5690b58976cbf41b010ab3c364' }, h("div", { key: 'd9fe711f3ab42dced31c0558e83ad8058feb5eaa', class: className }, h("header", { key: '30d499d7635c2a599dd15ae59bd0ebee0c82392e', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'd3e3136b69ed537919d8ea730c21e7e9ce69be8d', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'ed13a5b6d0d078d8dbff77186249c3ccdb0c6896', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'af38ae0e454e0d784f4e55f8620a29cc33353619', content: this.navigationCollapsed
+        return (h(Host, { key: '61728ec1085a10381daa3cc23d82b5a2d71b1a86' }, h("div", { key: 'a9663a749b64f95f44562707e4214cc15169b828', class: className }, h("header", { key: '763f7df0712be52726b3c57b9694f933c7ce7e11', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'a02d0956da631c669ffdf3cf03621ad7f8d99666', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'd1c99094994f3a6dd0c4fca2a7f8b57876516d5a', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '5d0bcd146e6fbd4758c48e640fb75e77dcb88e54', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '51918d1e18bd43e63f91880d2895998beed52e12', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '36e38af3596dd760aca940bdfe7cdd09ab503a6d' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '1f92fa6c0c954e2b0a5444572d00295804287860', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '045ad98b41f15b5fe4aa3f776c2cf55a6b7e81b3' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: '3687558f4468c4d5365f9fd9e7f5ee8dc6237b33', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '10b150e85e486ffc3cc094e89463baee952b6f69', size: 20 }), h("swirl-visually-hidden", { key: '88cd92f97adaa7834cbef2f119d204025517d255' }, this.browserBackButtonLabel)), h("a", { key: 'a4d4c0896fb8c2ef41e65c1291c8f834c56a9232', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'bbfeaf1c6a01c6ba922e1d68446b2451a235efbc', size: 20 }), h("swirl-visually-hidden", { key: 'af752ad63b495e2f2ab35286f187022d2cb35baf' }, this.browserForwardButtonLabel)), h("slot", { key: 'dab894dc199e776e62017915955bfc2935ca6582', name: "left-header-tools" })), h("div", { key: '658d0c1997d562229937b46b237e1e655be38195', class: "shell-layout__logo" }, h("slot", { key: '7384f8be45e43f556a92a4a04367121c99142857', name: "logo" })), h("div", { key: '24bd5fd5ab86ce110a0c88b4b5044df33b4bc670', class: "shell-layout__header-right" }, h("slot", { key: '41d697effb960787303043ba5b7f4dd7b9e15855', name: "right-header-tools" }), h("button", { key: 'c905851894651bacebdc4743c5fda6ba385acbe2', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5bac3e027c0b65f05768d66365ce4b67a5be9050', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'a7e343b4bb50fb134b878f92333a2bf2b77d9fff' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'c222356d8908033943cc5ba5ebdeefb1e33bb020', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '8e5cdd4c1a60da93cd85a4f2fef2e0bc7a9657dc', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '96f2d76730e2f08129e13a1c405399cb46aaf02e', size: 20 }), h("swirl-visually-hidden", { key: '36cf7de257a87acfcc9141b08e0af1f5cd0ab649' }, this.browserBackButtonLabel)), h("a", { key: '643995813cf0bfecae98474de80f6aa1f12882cc', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '6c15e4d10f612316547318c3a491e1ceb6db188a', size: 20 }), h("swirl-visually-hidden", { key: '41f725415ac58c1b39e3b356fb2bcaa5ae17c68c' }, this.browserForwardButtonLabel)), h("slot", { key: '266e8c781ec70a777d6fefd95c7edb6500c5815d', name: "left-header-tools" })), h("div", { key: '243668e828135fcdd9beb6ee3fa0caff26c4a90e', class: "shell-layout__logo" }, h("slot", { key: 'f85f405aeb06c2029739aae75fd83af9b3c19480', name: "logo" })), h("div", { key: '89e9760cf995a348a193446df39246ca9c2299f5', class: "shell-layout__header-right" }, h("slot", { key: 'dc42789342411b132e691f498cf623a1a51420eb', name: "right-header-tools" }), h("button", { key: 'cb82d566e9940abe63de68052cadb87bd28bbe02', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '9cff96f9be4ed538921b13c9b9ac2f4097af3364', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'd193d61f2c3aca5953f4d1f9a2a0b0607cb1b615' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'fd5722e2f251b8ec55dd2aa4cd561f87360fc0ce', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'c04b4a9b9bac6fb4f8549653859a6dd5e5677f60', name: "avatar" }))), h("div", { key: '83f00d3f74f57a79a50e438fded645447dd57152', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'aaf949f99f2ef785f31797d4d3d6336ca9a1a0a3', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'f7bf8b52c13aa3a63b3ea99e6d1e80447a2a30d6', class: "shell-layout__mobile-header" }, h("slot", { key: '742520a2f6ca57f09d458198bee5005e52c02550', name: "mobile-logo" }), h("div", { key: '8443961b6a018ac625748ead04ac573e381101d6', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '0389158c9691c8ca5b65dd99b8b33b7a7352e4b1', name: "mobile-header-tools" }), h("button", { key: 'b2f53beb84ca84c003c8a1166f6c278d83768e2b', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '4983a2a8cf8262aa91b1f4793bae7f409de14d57', size: 20 }), h("swirl-visually-hidden", { key: '8f85533efaddb889aff999760ec428bf5d907f52' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'ca7b92a3aef8a5aadf6e1d95ac9149cb09f53134', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'b51955e64bd77ac495f8cb185c9eba9ee615254a' }, h("span", { key: '63dee11afc20c2c3a68c7723277dc960eb3006f2', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'c76a3b7d03a56079b98c56d2f4d25a872b86b29a', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'ba68ea1b6715bc7078ee7441fa4efb1781ead63a', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '1c9e6aec62283a78d2ae4efc743943d7d8816f34', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '9bb9984e55fc72b8c72ddf5ddf937b24f38d19ea', paddingBlockEnd: "16" }, h("swirl-stack", { key: '9c50210868fd8ab4e6e159adecd1646b94a919de', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '5ad375635468da39928054eca7a92a430274cb1b', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '62ffe5a227b050739601da40406140fd7095500a', name: "avatar" }))), h("div", { key: '085c7e9a6a0b91be4a52217f45b639bc73adac09', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'c549360b63620d270902f4f9702f5b70b9b48866', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '80163b86b41c3f626557357605cb0e80c1fea0b8', class: "shell-layout__mobile-header" }, h("slot", { key: '0c4fe2c972a2143056a17fe823faf7f27c38862d', name: "mobile-logo" }), h("div", { key: '3894ea55495f274df1bd12ec362c8a1fbc78c3ef', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '900f3d6678cd1914cb518d81577b55b0f53970d5', name: "mobile-header-tools" }), h("button", { key: '681b699488b31be2c81178c40ebb4be205f91164', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'be582ab7d4147bce8f3dac6971e5c775a7ecb886', size: 20 }), h("swirl-visually-hidden", { key: 'b853968078f3de8da52919f4a6e1be921d166a42' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '9d6f985b3d907bd54895dcf626422c957d09cff5', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '79d64ac709eacf4b12de258555c15045de3695aa' }, h("span", { key: 'e49b399c68531870392b46e255696089f151f75f', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'ad6bd018b98f3c0672f613496997dcd97026c8fb', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '2b790886eb5ac336499ad81b68bde972ad2a32cd', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '072b7fdcf8feb7887e4350a94d535fc05d11737b', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'ca4876d776da0d380e5f181d1a71d3d649cce5d2', paddingBlockEnd: "16" }, h("swirl-stack", { key: '0f930f479d2818dd6c9e0a4ad42fd2dced80d4ea', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '769e9fe1b8f13d41e0ae6d96a5b783736309ad24', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '598cacb6f3ad82a9f5012ecd058e4399278fcfa7', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'd4d05300da66f32e887bfae45255e35c8a1224f4', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '2f94c00303b3893917f714e567a784b8a11da279', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '11bf2beffb3c879c4474262f47b5223ccee34875', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: '0ce78d648acb9a1af73da5e4828aa77735fa8978', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '16c2e3bb517c23984123c2ca3d1b3250f381a9aa', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '198890731474a037a4b6f5d6da2571d44fef8e4e' })), h("aside", { key: '9ec8d709a8a6b27e85e1efdd1cca32516ab043da', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '071b1521996abde544098207649cd709028e8e4d', class: "shell-layout__sidebar-body" }, h("div", { key: '331287eb3fd2a9814a125623d1b31555b43ebd21', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'e10d14c1b7ffec71482bde24c71da7ab90b4927e', name: "sidebar-app-bar" })), h("div", { key: 'bd8d1fa07e4e2efce9d31a0e8c4f777d9e9dd780', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '6f2a660783d9d83870119aed7bb7e8e7bf1b9d54', name: "sidebar" })))))));
+            } }, h("slot", { key: '33bedc87b6ef58f5d875406ad1749119d58e0c35', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '36940a37a781a8a32ba41195610539ccb8f794c6', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'ec1ba6537810abae2925bc3b06e33e926b613ed5' })), h("aside", { key: 'cb2241808754598045781b547c2fa711117ce36a', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '833966481f389aa1394f4d8c0a9e303112c0e9b7', class: "shell-layout__sidebar-body" }, h("div", { key: '4cde8e77fa304c044ae9bc3d939d940a8ed4f134', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '25dc42bf9bd3272535bd588a4a11fd8fcc106360', name: "sidebar-app-bar" })), h("div", { key: 'd991698b4aa217ffc44a0d3acc085def75bbe332', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'fea70d6f616a31a9a5b05747774c8b52da30abd3', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -248,6 +241,7 @@ export class SwirlShellLayout {
         return {
             "brandedHeader": {
                 "type": "boolean",
+                "attribute": "branded-header",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -260,11 +254,13 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "branded-header",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "browserBackButtonLabel": {
                 "type": "string",
+                "attribute": "browser-back-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -277,12 +273,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "browser-back-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Navigate back\""
             },
             "browserForwardButtonLabel": {
                 "type": "string",
+                "attribute": "browser-forward-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -295,12 +293,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "browser-forward-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Navigate forward\""
             },
             "collapseNavigationButtonLabel": {
                 "type": "string",
+                "attribute": "collapse-navigation-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -313,12 +313,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "collapse-navigation-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Collapse navigation\""
             },
             "enableSecondaryNavGridLayout": {
                 "type": "boolean",
+                "attribute": "enable-secondary-nav-grid-layout",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -331,12 +333,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "enable-secondary-nav-grid-layout",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "expandNavigationButtonLabel": {
                 "type": "string",
+                "attribute": "expand-navigation-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -349,12 +353,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "expand-navigation-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Expand navigation\""
             },
             "gridNavLayoutToggleLabel": {
                 "type": "string",
+                "attribute": "grid-nav-layout-toggle-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -367,12 +373,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "grid-nav-layout-toggle-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Grid\""
             },
             "hideMobileNavigationButtonLabel": {
                 "type": "string",
+                "attribute": "hide-mobile-navigation-button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -385,12 +393,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-mobile-navigation-button-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Close navigation\""
             },
             "listNavLayoutToggleLabel": {
                 "type": "string",
+                "attribute": "list-nav-layout-toggle-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -403,12 +413,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "list-nav-layout-toggle-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"List\""
             },
             "navigationLabel": {
                 "type": "string",
+                "attribute": "navigation-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -421,12 +433,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "navigation-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Main\""
             },
             "secondaryNavCollapseLabel": {
                 "type": "string",
+                "attribute": "secondary-nav-collapse-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -439,12 +453,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-nav-collapse-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Show less\""
             },
             "secondaryNavExpandLabel": {
                 "type": "string",
+                "attribute": "secondary-nav-expand-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -457,12 +473,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "secondary-nav-expand-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Show more\""
             },
             "sidebarActive": {
                 "type": "boolean",
+                "attribute": "sidebar-active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -475,11 +493,13 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-active",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarToggleBadge": {
                 "type": "any",
+                "attribute": "sidebar-toggle-badge",
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
@@ -492,11 +512,13 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-toggle-badge",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarToggleBadgeAriaLabel": {
                 "type": "string",
+                "attribute": "sidebar-toggle-badge-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -509,11 +531,13 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-toggle-badge-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "sidebarToggleIcon": {
                 "type": "string",
+                "attribute": "sidebar-toggle-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -526,12 +550,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-toggle-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"notifications\""
             },
             "sidebarToggleLabel": {
                 "type": "string",
+                "attribute": "sidebar-toggle-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -544,12 +570,14 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "sidebar-toggle-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Toggle sidebar\""
             },
             "skipLinkLabel": {
                 "type": "string",
+                "attribute": "skip-link-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -562,7 +590,8 @@ export class SwirlShellLayout {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "skip-link-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"Skip to main content\""
             }

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js

@@ -5,17 +5,8 @@ import classnames from "classnames";
  */
 export class SwirlShellNavigationItem {
     constructor() {
-        this.active = undefined;
-        this.badgeLabel = undefined;
-        this.boxed = undefined;
         this.hideLabel = false;
-        this.href = undefined;
-        this.inlineLabel = undefined;
         this.inlineLabelColor = "default";
-        this.label = undefined;
-        this.target = undefined;
-        this.tiled = undefined;
-        this.withGradient = undefined;
     }
     render() {
         const tagClassNames = classnames("shell-navigation-item", {
@@ -51,6 +42,7 @@ export class SwirlShellNavigationItem {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -63,11 +55,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "badgeLabel": {
                 "type": "string",
+                "attribute": "badge-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -80,11 +74,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "badge-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "boxed": {
                 "type": "boolean",
+                "attribute": "boxed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -97,11 +93,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "boxed",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -114,12 +112,14 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hide-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -132,11 +132,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inlineLabel": {
                 "type": "boolean",
+                "attribute": "inline-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -149,11 +151,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "inline-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inlineLabelColor": {
                 "type": "string",
+                "attribute": "inline-label-color",
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlLabelColor",
@@ -172,12 +176,14 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "inline-label-color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -190,11 +196,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -207,11 +215,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "tiled": {
                 "type": "boolean",
+                "attribute": "tiled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,11 +234,13 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tiled",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "withGradient": {
                 "type": "boolean",
+                "attribute": "with-gradient",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -241,7 +253,8 @@ export class SwirlShellNavigationItem {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "with-gradient",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };