@getflip/swirl-components 0.361.0 → 0.362.0

package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js

@@ -11,7 +11,7 @@ export class SwirlResourceListSection {
     render() {
         const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
         const childrenListRole = role === "listitem" ? "list" : undefined;
-        return (h(Host, { key: '3aa275cb5306ae292f261074133b07694d4e8f21' }, this.hasSeparator && (h("swirl-separator", { key: '59c62b6ce718c480038bbf743071c5f1b888f6e7', spacing: this.separatorSpacing })), h("div", { key: '6939db84d5d07d2916078b9698a2f4ca756f1b21', "aria-labelledby": "label", role: role }, h("span", { key: 'daccdf3607dd8587f4e8a96010c31eab20e95920', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd30d9b373687055ee872e5ae28ac7a5b036210ec', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '91ac08d8f5c4ae0ff1db41098cc71c18fa241502' })))));
+        return (h(Host, { key: 'ad73b675f2dac3f2254fe5c934898e941a2ffb0c' }, this.hasSeparator && (h("swirl-separator", { key: '2c1d0912f9bf10ce6be35dc3e0941068a11364a5', spacing: this.separatorSpacing })), h("div", { key: '4a147e505b1ab8fc9848dacd25529f2eef3a33ed', "aria-labelledby": "label", role: role }, h("span", { key: '52a42ab51d2907a6585d4e0f4795f1ee7b6df4c5', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'd5f56d957bcf9ea86f1ebf5eff8d1649a58fdea0', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: '765f646046a5aaadb5e0d704c621961d8fc0948b' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-select/swirl-select.js

@@ -118,11 +118,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'd1031615d59be2e17c0b23ca7abf7c035b6cd435', onKeyDown: this.onKeyDown }, h("div", { key: '8dcde5f5d53860b31ca8841e7d6431575f0418db', class: className }, h("swirl-popover-trigger", { key: '6b0f87fe64afa581646b9dbf7f14060d031a4324', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '4b1952ba092b5a1d607282eea65364fae752d087', class: "select__value-container" }, this.standalone && (h("span", { key: '7eb072eea5dcc08ae527c4f7391d932309531543', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '2739933c28cabb4ed7d48203808cc3de78197927', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '9c6a02b0a8263236dc8ab24a1bd5e391aaa9e2bc', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'c533f5a8e9ea5fcd2c75698bf999cf5aceec9528', onKeyDown: this.onKeyDown }, h("div", { key: 'f1d75d71dd5fd569883082fb0cc36e0dd0acc616', class: className }, h("swirl-popover-trigger", { key: 'c949e7ed55431de42353f14a60dc7518796d19c7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '63718ba09fff33c26b90d583c7bc62ffb805d492', class: "select__value-container" }, this.standalone && (h("span", { key: '61367a9a667d5dc266b333774f822685fbde46bd', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'ca4dbe77ea103c58b12548a7a714602f4e303644', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '111f3ac7c2f62ade6518b935d24cd180e12dec85', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '07b4f6abc769e957e0f677fd4307d99518ebfac3', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '96b0cd2a3dc850c0049e4feefd01f21605a7f162', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'cb770fb13680cbd18358f27d9ff57295891669e9', class: "select__search" }, h("swirl-icon-search", { key: '15a676fcc790937b3c895acee0a70ab0a6f1e257', class: "select__search-icon", size: 20 }), h("input", { key: '5a51f57e110484ed1247372e5ca20bd9f5548cf2', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '0ceaa6d772d31cc24717a20f002eed2746ca3343', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '3327d160e78a0858957b1fe53b105ec7d59e13fa', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '8c9b26e7b8c931e00f0ba166343b02e491ca80a8', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '7adab3b703802035c466dcda4eeb05ca9de7aaa9', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '044d1d53062aed1145ccd0d4a53ef30f8fc472e5', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '1aac41b4a6d9ac91d1227622065b3c9682eb9253', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '1ab6fd1029534a3a9ef0896dcc073a55f48c00ed', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '97d19270357ccddfe54732e6c7e954aa89f565cc', class: "select__search" }, h("swirl-icon-search", { key: 'd319ae0563cdb4b8960f948a6bfe3120f78d5958', class: "select__search-icon", size: 20 }), h("input", { key: 'd7dc08fab7877ae9c9bed08961ef94bf14432a25', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '8440a2940b73149b8db60fbd5fc5f04a40ac97b4', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '853541359e3695d0d29d73fd025c2fc5842da386', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'cd9eaa70c8aa04656f53b2737eb3d10672d33d55', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '856c423dc7fb206a6a734cacdef4352cd2e90f87', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '2d253c5ca76038e5ab43e7ee7c048f6cd094f535', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -434,18 +434,25 @@
     gap: var(--s-space-2);
   }
 
-.shell-layout__secondary-nav-items--grid-view ::slotted(ul) {
+.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view ::slotted(ul) {
     flex-wrap: wrap;
     flex-direction: row;
     gap: var(--s-space-16);
   }
 
-.shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
+.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view ::slotted(ul > *) {
     min-width: 0;
     max-height: none;
+  }
+
+.shell-layout__secondary-nav-items--tiled ::slotted(ul > *) {
     flex-basis: calc(50% - var(--s-space-8));
   }
 
+.shell-layout__secondary-nav-items--app-icon ::slotted(ul > *) {
+    flex-basis: calc(32% - var(--s-space-8));
+  }
+
 .shell-layout__main {
   overflow: hidden;
   background-color: var(--s-background-default);

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

@@ -24,6 +24,7 @@ export class SwirlShellLayout {
         this.browserForwardButtonLabel = "Navigate forward";
         this.collapseNavigationButtonLabel = "Collapse navigation";
         this.enableSecondaryNavGridLayout = true;
+        this.secondaryNavGridLayoutVariant = "tiled";
         this.expandNavigationButtonLabel = "Expand navigation";
         this.gridNavLayoutToggleLabel = "Grid";
         this.hideMobileNavigationButtonLabel = "Close navigation";
@@ -166,10 +167,12 @@ export class SwirlShellLayout {
     }
     setSecondaryNavItemsTiled() {
         this.secondaryNavItems.forEach((item) => {
-            item.tiled =
+            item.variant =
                 this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" ||
-                        (this.navigationCollapsed && this.isDesktopViewport));
+                        (this.navigationCollapsed && this.isDesktopViewport))
+                    ? this.secondaryNavGridLayoutVariant
+                    : "default";
         });
     }
     restoreSecondaryNavState() {
@@ -205,25 +208,26 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '145beb59a3a61eb54bdf0afb62910673a7f68f15' }, h("div", { key: 'fc8670543e559badd26edfef174b5841e32252ea', class: className }, h("header", { key: '93a9731c41b24095664fae994204465809eba542', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '1d6650ff78b19704eabf838c9f8b6a62ab21255f', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '7827b786a8fbde3b4710538ca0bcb34cd778a378', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'c9d882a8a68ec78c4eae18a230302a34cc4291fa', content: this.navigationCollapsed
+        return (h(Host, { key: '9c751493caa90c8d209cdaf802f3a2471cf2c43b' }, h("div", { key: '0d6a9b9c3747723307c4afd71bfa12ac678863ce', class: className }, h("header", { key: '4ae8c6df5ca8a88a03d7ebd8ae9a376c1b0cc7b0', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '086c1bdd5bf9ec288cfd6c94d323d69062368a53', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'fd246e7a0d5bcb6e615c178a52b80a79dcb372e3', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'f65d96f20f2d61a91d880357a7d0af5fa8920c93', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '1ab392572c7b366b49f03819099b327a6859f1d0', 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: 'f26f8e633330956653e7931f54e5b055f7750c45' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '5738d3bf54bb5f193473fe526357e2db9a81be2e', 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: '179718ea90513e2fa688d0527edab4e0e2685630' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: 'fa8a132b5745c58bc9ca4a5127a050d8e2a322f5', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'c3dcc838e7345e587f099a0bf99e76071b851fa2', size: 20 }), h("swirl-visually-hidden", { key: 'c2b34b9dcfacd0f0959250675fcf05477298dc6d' }, this.browserBackButtonLabel)), h("a", { key: 'c70433fe8b668436d7de5861ef5e5c6739c12f2f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '33c060e8e5f99860be1f96e2e1e3a1b6c416af40', size: 20 }), h("swirl-visually-hidden", { key: '85f09cc5e891a723b5b12a64d04f396c73ad9271' }, this.browserForwardButtonLabel)), h("slot", { key: 'fb3e7a7eaa86bdc45db5960adba4600c8cb70cc4', name: "left-header-tools" })), h("div", { key: '67551617c815eff767e57b617c9f99170276f6ca', class: "shell-layout__logo" }, h("slot", { key: '7f0b8a256cc9380aa49070007cd23aefab158331', name: "logo" })), h("div", { key: '0985541a454b5615eb33b8acf908927005ac5339', class: "shell-layout__header-right" }, h("slot", { key: '7d26b8cd00a5ba0ed6c79c24db9a49262c7536ff', name: "right-header-tools" }), h("button", { key: '5dded5c0b6c0f4f9fc79c560fef3cf8b684f72c3', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '53e5e7158b05226fa1c5a80218cf56d63f935a41', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '3f7905b838a01000eb53c37cc2d3d7fe0b9fb261' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '3c2b8574d4f753bc1a0720f4f2bb8ade0802d0f1', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '5a8482c134dbe1c360b32acbaf1fa4827fa2e237', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '45360123d5147e80eeea2c3ec8a6b93350f1a3cc', size: 20 }), h("swirl-visually-hidden", { key: '0933277119b59c5d1336dcf42dca8c626a9e93c9' }, this.browserBackButtonLabel)), h("a", { key: 'e812ed7a623fb4d2fb97cf434ffdcf09cbfa51e2', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '5e78c3967302c0e5ba99f1e1922dca66a78f3f7c', size: 20 }), h("swirl-visually-hidden", { key: '228e4d052c359a30b5207b2463d8dcd270a5cb5c' }, this.browserForwardButtonLabel)), h("slot", { key: '922ad9dbc8f8e8ed3867d7b4993308ac43c7cf36', name: "left-header-tools" })), h("div", { key: '70b8cc0cbe8fa2f4439a96427c27b32309e82079', class: "shell-layout__logo" }, h("slot", { key: '7f5be19beae205048190df3462f342ceb80c7aa5', name: "logo" })), h("div", { key: '42ac3f772d663f7a0d3f977b79d4d692a01306b7', class: "shell-layout__header-right" }, h("slot", { key: '4afadfcc9a89264979dd24c418fad28ef043f019', name: "right-header-tools" }), h("button", { key: 'a1a7ffaa3260eaf2d91f30e24ecb121a0e4adc8b', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '5ea6514239f1d0bc5a18cad695257657dfe5a595', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '9d61e2a3d2ce3f7e8073cc96734679fc7e8a96c6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '27eaec5b60d5dfbb4cf962d543c93f364b9e1c84', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'dd842d448e0a8c40bbcbf9e6c471b65391e656aa', name: "avatar" }))), h("div", { key: '21ec3253f535a6e11fc4e4b9d3275be16bef3e37', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '03ccd71ba07a10b25e2e6cc08fa35d20583d0af9', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '67d4bfd1af203813d62cc33ec30536f1d583fd2c', class: "shell-layout__mobile-header" }, h("slot", { key: '5a58cb78d82a485208d78f18a6344d8e6700f9de', name: "mobile-logo" }), h("div", { key: 'f97151a5d10dc38914ca0724ab4ef91605748946', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'bafbae1b3c90f0b3e4b8b307bab0fdaa921e6865', name: "mobile-header-tools" }), h("button", { key: '7da04b4e2eb07e8c20a22d90fa213e2b30abd9ac', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '103e4618977f434370e1798d1a51d320640a0fad', size: 20 }), h("swirl-visually-hidden", { key: '5abbf1644bf262e8d35c6067ea1c828f020d91d4' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '142f08f462b8bf8399d2bf2d6422d6e7315c570c', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '85b00ace5e31af100ede2cc0131bac6b6f775e94' }, h("span", { key: '41a713f916dadcc7e49487fb8ae6c09fa00fcc30', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '16ce50afbb39c9b07fef6101acad2ec2c4ba4586', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '03b3ce1513e83a0479c032aef4cdffb465f1124a', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '65e40b6c023d7d7a4dac4c66497196ed97f82b9f', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '1bbf9dcf3f7d371e6d4741b2981c9c577ca561c7', paddingBlockEnd: "16" }, h("swirl-stack", { key: '8f1c8e98897eb678eebc599dac9dc4335e0182cd', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'fad25f850b48d068ae362d3af46480f0216f388a', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '750f08ca2df6dd1b200b33c1c4a74067a8355816', name: "avatar" }))), h("div", { key: 'f6b8966a7a8c0b3381667f88440a9b5aa6d6180f', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '99af15ebba4f59849a42c536b357c3119e72a369', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'e8f0f3c7c22f3424b5da244a4f9e35d68a6df16b', class: "shell-layout__mobile-header" }, h("slot", { key: '688378a54a44173cbe601f152460b8233b2c722c', name: "mobile-logo" }), h("div", { key: 'b355ee02bd82221aac2a805cb28655c85adaa831', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '79b8058933acb81b6068c7f047ad4361c261880f', name: "mobile-header-tools" }), h("button", { key: 'bea6783adf1ae60de494396600e5b772222e345c', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '9cc9b6f61948e8311f29c7b23aca1d95673ed434', size: 20 }), h("swirl-visually-hidden", { key: 'c8f3710ff32046e1474291bb8459b746b742e5b6' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '61a889dca67f3af0a728cc64d9a55325640eb1ef', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '9581c3fd6fbfb88eca016e77ad41735caa6c7a43' }, h("span", { key: '560779789e0792aa360defb0eef73e5c5bfd63cc', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '91670892f54522f80500d9a0855690e56534485c', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'd393078255ba73d63350c65a7ebb0a67a72b9286', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '4bfb0409ffcf41c1c4a89bae77a33fcd1cfa9358', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'e30f4ddfb5b82eb2f8979909b0cff098cb0e7c91', paddingBlockEnd: "16" }, h("swirl-stack", { key: '0cf8f58c0d38e87dc5393b13e0b880ae3298f3ef', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '5c93d538b2e1a1912fd105db17513b916cba0a35', 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: 'a25fd052e4f847f6cca797c0f75441c103b32d85', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '0c1998573727739df3a79333390edabf8b202b71', 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: '58194ffa9a4de1213d32d4cb3be20abad06767a0', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '0016ff5a602a91b8ceb9ae880430f1cf646417e9', class: {
+                [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
-                    (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: '0f8de170a58e97c7247e32bd299be70801c39d4a', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '4eaff45b2e6ab9fa6b0ba750c743e72cf599f520', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'b9c9733e3fdba52431a5ac69b515a6096b5ff2de' })), h("aside", { key: 'c6bf67f8577ae161af4d0870aee0924b9774a406', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '4dd11812f5c370fbed3964bf499aca4e442a8b82', class: "shell-layout__sidebar-body" }, h("div", { key: '856529398cb2ee871550a8e16d411efbb08505ea', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '19fe1d49a68109ec28235ea18b8389bc59c66ea2', name: "sidebar-app-bar" })), h("div", { key: 'cd69d10323442c23387b0f08f80a0e361b7737ba', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'f36a07e5d839b96d6150fdc10f03d3ce124b5596', name: "sidebar" })))))));
+                    this.secondaryNavView === "grid",
+            } }, h("slot", { key: '713dd9ebb264042fd9d02fd4aca023b39f493b8e', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '731beca3e221213721ff45682fb1e92583ad3a85', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'cfb3e086eaa14d09b91957e46ad97372b4adcb92' })), h("aside", { key: 'cd5c9d5a4bdd1314dd91b6f66d2870b9ec2cb46e', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '3cffb268ef38cba98918b424d092b41217d2d045', class: "shell-layout__sidebar-body" }, h("div", { key: '4d16bd2adf9d09ead5ed0d0ebd5848807c932a2a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1098ee7a56eba10fb16fc7873d13d10b474bd3f0', name: "sidebar-app-bar" })), h("div", { key: 'aa5d4878ac74495f44486a598f7979359158ec06', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f6efd442c7955dd9a9c57e12ac68e5c81e3dfee', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }
@@ -338,6 +342,32 @@ export class SwirlShellLayout {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "secondaryNavGridLayoutVariant": {
+                "type": "string",
+                "attribute": "secondary-nav-grid-layout-variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlShellLayoutSecondaryNavGridItemVariant",
+                    "resolved": "\"app-icon\" | \"tiled\"",
+                    "references": {
+                        "SwirlShellLayoutSecondaryNavGridItemVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-shell-layout/swirl-shell-layout.tsx",
+                            "id": "src/components/swirl-shell-layout/swirl-shell-layout.tsx::SwirlShellLayoutSecondaryNavGridItemVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"tiled\""
+            },
             "expandNavigationButtonLabel": {
                 "type": "string",
                 "attribute": "expand-navigation-button-label",

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

@@ -69,22 +69,22 @@ const Template = (args) => {
 
     <ul slot="secondary-nav">
       <li>
-        <swirl-shell-navigation-item label="Reporting hub" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="Reporting hub" with-gradient>
           <swirl-app-icon src="/menu-item-1.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="My absences" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="My absences" badge-label="3">
           <swirl-app-icon src="/menu-item-2.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="IT self-service" with-gradient>
-          <swirl-app-icon src="/menu-item-3.png" slot="icon"></swirl-app-icon>
+        <swirl-shell-navigation-item filled inline-label label="IT self-service">
+          <swirl-symbol glyph="shopping-cart" size="24" slot="icon" ></swirl-symbol>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="Office door key" with-gradient>
+        <swirl-shell-navigation-item filled inline-label label="Office door key" with-gradient>
           <swirl-app-icon src="/menu-item-4.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
@@ -181,4 +181,5 @@ export const SwirlShellLayout = Template.bind({});
 SwirlShellLayout.args = {
     sidebarToggleBadgeAriaLabel: "3 new notifications",
     sidebarToggleBadge: true,
+    secondaryNavGridLayoutVariant: "app-icon",
 };

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

@@ -12,7 +12,7 @@
   }
 
 .shell-navigation-item {
-  --swirl-app-icon-size: 1.5rem;
+  --swirl-app-icon-size: 2rem;
   --swirl-shell-navigation-item-gradient: linear-gradient(
     rgba(0, 0, 0, 0),
     rgba(0, 0, 0, 0.8)
@@ -76,6 +76,28 @@
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);
     }
 
+.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {
+        width: 2rem;
+        min-width: 2rem;
+        height: 2rem;
+        min-height: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--filled {
+    padding: var(--s-space-8);
+  }
+
+.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {
+        color: var(--s-icon-on-action-primary);
+        background-color: var(--s-action-primary-default);
+      }
+
+.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {
+      position: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
 .shell-navigation-item.shell-navigation-item--tiled {
     --swirl-app-icon-size: 100%;
 
@@ -129,24 +151,10 @@
           aspect-ratio: 1;
         }
 
-.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
-      position: absolute;
-      top: -0.375rem;
-      right: -0.375rem;
-      padding: var(--s-space-2);
-    }
-
 .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
-      display: -webkit-box;
-      overflow: hidden;
       color: var(--s-text-default);
       font-weight: var(--s-font-weight-semibold);
       text-align: start;
-      white-space: normal;
-      text-overflow: unset;
-      overflow-wrap: anywhere;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
     }
 
 .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {
@@ -164,6 +172,76 @@
         color: rgb(25, 25, 25);
       }
 
+.shell-navigation-item.shell-navigation-item--app-icon {
+    --swirl-app-icon-size: 100%;
+    font-size: var(--s-font-size-xs);
+    padding: var(--s-space-8) var(--s-space-4);
+    align-items: center;
+    height: auto;
+    border-radius: var(--s-border-radius-sm);
+    flex-direction: column;
+    container-type: inline-size;
+    gap: var(--s-space-8);
+  }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {
+      padding: var(--s-space-8);
+      --swirl-app-icon-size: 2rem;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {
+        max-width: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {
+        max-width: 2rem;
+        max-height: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {
+      overflow: hidden;
+      width: 100%;
+      max-width: 3.5rem;
+      height: auto;
+      border-radius: var(--s-border-radius-base);
+
+      color: var(--s-icon-on-action-primary);
+      aspect-ratio: 1;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {
+      max-width: 3.5rem;
+      max-height: 3.5rem;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {
+      line-height: var(--s-line-height-xs);
+      text-align: center;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
+      display: -webkit-box;
+      overflow: hidden;
+      white-space: normal;
+      text-overflow: unset;
+      overflow-wrap: anywhere;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
+      position: absolute;
+      top: -0.375rem;
+      right: -0.375rem;
+      padding: var(--s-space-2);
+    }
+
 .shell-navigation-item.shell-navigation-item--active {
     background-color: var(--s-surface-sunken-hovered);
   }
@@ -211,6 +289,8 @@
   min-height: 2rem;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
+  border-radius: var(--s-border-radius-base);
 }
 
 .shell-navigation-item__text-wrapper {

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

@@ -7,13 +7,34 @@ export class SwirlShellNavigationItem {
     constructor() {
         this.hideLabel = false;
         this.inlineLabelColor = "default";
+        this.variant = "default";
+    }
+    componentWillLoad() {
+        this.forceIconProps();
+    }
+    componentDidRender() {
+        this.forceIconProps();
+    }
+    forceIconProps() {
+        const iconEl = this.el.querySelector("[slot='icon']");
+        const smallIcon = this.hideLabel || this.variant === "default";
+        if (iconEl &&
+            (iconEl.tagName.startsWith("SWIRL-ICON") ||
+                iconEl.tagName.startsWith("SWIRL-EMOJI") ||
+                iconEl.tagName.startsWith("SWIRL-SYMBOL"))) {
+            iconEl.setAttribute("size", smallIcon ? "20" : "24");
+        }
     }
     render() {
-        const tagClassNames = classnames("shell-navigation-item", {
+        const hasSwirlAppIcon = Boolean(this.el.querySelector("swirl-app-icon"));
+        const tagClassNames = classnames("shell-navigation-item", `shell-navigation-item--${this.variant}`, {
             "shell-navigation-item--active": this.active,
             "shell-navigation-item--boxed": this.boxed,
-            "shell-navigation-item--tiled": this.tiled,
+            "shell-navigation-item--filled": this.filled,
+            "shell-navigation-item--inline-label": this.inlineLabel,
             "shell-navigation-item--gradient": this.withGradient,
+            "shell-navigation-item--hide-label": this.hideLabel,
+            "shell-navigation-item--has-app-icon": hasSwirlAppIcon,
         });
         const labelClassNames = classnames("shell-navigation-item__label", {
             "shell-navigation-item__label--light": this.inlineLabelColor === "light",
@@ -25,9 +46,9 @@ export class SwirlShellNavigationItem {
         const tooltipContent = this.description
             ? `${this.label} ${this.description}`
             : this.label;
-        return (h(Host, { key: 'c5fe604eba70c09f532850d9547ac77e63907b68' }, h("swirl-tooltip", { key: '9189209fec8308e2c7ded881cc09735e4bb7de01', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'dfc5ee51c08a90d6d0299e897a148d97b76ebe86', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '44b87e21631ded76bd2f4baa1223a13adc9d4dfa', class: "shell-navigation-item__icon" }, h("slot", { key: '4f81888c8feaa9b613dd35ac959e17a2c154f25b', name: "icon" })), !this.hideLabel ? (this.tiled ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '2640130ad0d30190f9c682bbc84e81edf0bf010a', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: 'cad673a0a9f38a18a82ab1f54622780e95103f90' }, h("swirl-tooltip", { key: '28dc1e5db2a3c904b2510f796ad7bb1066ee796c', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '221d94e96b760edc1249924297af2d13fb99f12d', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '4ea0230ff658a088276ca156b22bd4bfc96bfa03', class: "shell-navigation-item__icon" }, h("slot", { key: '9dfb7a37d9e0cbcb515c09c8562a9e75657e5b47', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("span", { key: 'e7c51b017a8c6f9b2044274e4d22146f135fef79', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'f9f73e35ca63f46cdf352167568b524e9c808124', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))))));
     }
     static get is() { return "swirl-shell-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,6 +121,25 @@ export class SwirlShellNavigationItem {
                 "setter": false,
                 "reflect": false
             },
+            "filled": {
+                "type": "boolean",
+                "attribute": "filled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "hideLabel": {
                 "type": "boolean",
                 "attribute": "hide-label",
@@ -241,24 +281,31 @@ export class SwirlShellNavigationItem {
                 "setter": false,
                 "reflect": false
             },
-            "tiled": {
-                "type": "boolean",
-                "attribute": "tiled",
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "SwirlShellNavigationItemVariant",
+                    "resolved": "\"app-icon\" | \"default\" | \"tiled\"",
+                    "references": {
+                        "SwirlShellNavigationItemVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.tsx",
+                            "id": "src/components/swirl-shell-navigation-item/swirl-shell-navigation-item.tsx::SwirlShellNavigationItemVariant"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "\"default\""
             },
             "withGradient": {
                 "type": "boolean",

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

@@ -22,7 +22,7 @@ export const SwirlShellNavigationItem = Template.bind({});
 SwirlShellNavigationItem.args = {
     label: "Label",
     badgeLabel: "1",
-    tiled: true,
+    variant: "tiled",
     inlineLabel: true,
     withGradient: true,
     inlineLabelColor: "light",

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js

@@ -7,11 +7,11 @@ export class SwirlSkeletonBox {
     }
     render() {
         const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: '46ad219b39508c0f6a4087a7cc3ccbe7414c1813', style: {
+        return (h(Host, { key: 'b7d0def70588e3c02bf9256c5ecc6fa67bd7da21', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: 'c3cf0c23b2a41224ef2c9c7884fb21838c4e389b', class: className, style: {
+            } }, h("div", { key: '90743565eeb02ab7384466699284c3ad9cca7e83', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
                     ? `var(--s-border-radius-${this.borderRadius})`

package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.js

@@ -9,7 +9,7 @@ export class SwirlSkeletonText {
     render() {
         const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (h(Host, { key: 'bd88ab3103abad7e11d29553316290644c50d45b' }, h("div", { key: 'e069ab7ed44155fdab0899d11bc7d67556b8ba8c', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+        return (h(Host, { key: 'ca789c1979612c8121b0f1ec5727cd62c284edf4' }, h("div", { key: 'e7e45b74354223b9a0f389d3728691ebbd2774c8', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
     }
     static get is() { return "swirl-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-spinner/swirl-spinner.js

@@ -6,7 +6,7 @@ export class SwirlSpinner {
     }
     render() {
         const className = classnames("spinner", `spinner--size-${this.size}`);
-        return (h(Host, { key: 'e5f3d910c7a8237ed0270c166b68e7176a7ca154' }, h("span", { key: '04b5196ba7e16405ad65b62257213271eec45a44', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: '337d331928a067e43ca5a2cd368014c4b1062019', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'ea4d6f0e909e64d14162c3b08ea7c5fe37f49dc8', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: 'a80d940f389622b7f36dd2b5d1be16f9d9b90604', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: 'a89e3eee0bad4b4f0998e72b5e3d7348f6371e4c' }, h("span", { key: 'ee9470c9ea287d75656988564cf0e0ed2cfc633d', class: "spinner__label" }, this.label))))));
+        return (h(Host, { key: '343e69cab508213397e5b8542a755c308c67e91d' }, h("span", { key: 'fc5cdbca0b9350d70b0c462fb675545cdac53f01', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: '12391d13de20ab622d130a243d6c37fd13c388e9', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'f910d45bf400fe7cf5ec2174ef1098bcda557308', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: 'd852e5956aebf8826c4132b7770e5b2fa28fea30', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: 'fab9622695b534835b7735b61881f05b7ca9cb67' }, h("span", { key: '8a50d169678c85f2a0d7e156c11748212acabda6', class: "spinner__label" }, this.label))))));
     }
     static get is() { return "swirl-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-status-indicator/swirl-status-indicator.js

@@ -3,7 +3,7 @@ import classnames from "classnames";
 export class SwirlStatusIndicator {
     render() {
         const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (h(Host, { key: 'c11d1de029c227a62ec754932dc3616780815386' }, h("div", { key: '332ab9d0fd8db2a1d3c0b562ef2ff849291e32a6', class: className }, h("span", { key: '65f5047f4f60da82f412e65013d4df2d27e3811b', class: "status-indicator__dot" }), h("span", { key: 'f8147947a90569a2da16d8fea70e105061330e85', class: "status-indicator__label" }, this.label))));
+        return (h(Host, { key: '9d4ad3865c14201d4c16055c54072fa09967c20e' }, h("div", { key: 'd9389cadd7bda120c5faf806da14a4be3fce7628', class: className }, h("span", { key: 'dbc2cf0fe7feb1362d1446cf1f22c13cc7a41ae5', class: "status-indicator__dot" }), h("span", { key: '9c5cbad193d526b4cb7e31df069f6e1e0139d600', class: "status-indicator__label" }, this.label))));
     }
     static get is() { return "swirl-status-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-switch/swirl-switch.js

@@ -25,9 +25,9 @@ export class SwirlSwitch {
             "switch--on": on,
             "switch--disabled": this.disabled,
         });
-        return (h(Host, { key: '13ba1716bc7142703cc1500626e2f80a17391db9' }, h("label", { key: '8fc01e9cead6ef409e8556d8ff7ea63598f236c3', class: className, htmlFor: this.inputId }, h("span", { key: '68361a49b663b6dad33ad4d5396e94d4bb8f23ad', class: "switch__control" }, h("swirl-visually-hidden", { key: 'b3669541d478b21527f208aff800a637c3a949c9' }, h("input", { key: 'cb786055af07a27ad71026fc3d452b8141e5faf9', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
+        return (h(Host, { key: 'ca1f071615f6d212ebbe45e63a997262abb31f76' }, h("label", { key: '01ea5236c24279327fdacaf04235d7691f0c1195', class: className, htmlFor: this.inputId }, h("span", { key: 'd17b9f56db83b9b6c3b955d7a956ff6a2a545a66', class: "switch__control" }, h("swirl-visually-hidden", { key: '90c01a89d4e63573c57585aabf1275278b615256' }, h("input", { key: '2ac0b55018cb93bdee90985825827a4271fbfadb', "aria-checked": ariaCheckedLabel, "aria-label": !this.hideLabel && this.swirlAriaLabel
                 ? this.swirlAriaLabel
-                : undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: '30dec914719190736a0ee42d3a74049d5486f597', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: '51acf4a6cf3d134a563f7d11dd310d88a77d9f55', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: 'e7101c259de05f65be07ebe749e82717ac9fef5a', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: 'eb41b48db1349da2a99c7f8dbe1344316a83a9a6' }, this.swirlAriaLabel || this.label)), this.description && (h("span", { key: 'fccc0e647e35bbb49eb185500655ee8e88153783', class: "switch__description" }, this.description))))));
+                : undefined, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), role: "switch", type: "checkbox", value: this.value })), h("span", { key: 'ce930906f21a00c53da71eb59c9e691c4d754d10', "aria-hidden": "true", class: "switch__thumb" })), h("swirl-stack", { key: '5aa3573f01e8ca2f93ac5414ebb61d72d13d260f', class: "switch__content" }, this.label && !this.hideLabel && (h("span", { key: '69728963d19ed790ff1de363e11a35e324ff96c0', class: "switch__label" }, this.label)), this.hideLabel && (h("swirl-visually-hidden", { key: 'cfe24dd0a28b2bc7dfdac5f64d5070d5e40877ba' }, this.swirlAriaLabel || this.label)), this.description && (h("span", { key: '593ebe1ae07dc67c0942bb5f304811057d12945f', class: "switch__description" }, this.description))))));
     }
     static get is() { return "swirl-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-symbol/swirl-symbol.js

@@ -5,7 +5,7 @@ export class SwirlHeading {
     }
     render() {
         const Tag = `swirl-symbol-${this.glyph}`;
-        return (h(Host, { key: '072312e19176cea073c61c53df098a00c1b326f0' }, h(Tag, { key: '0c4e7a679f163f40fc02972a4ccc015f8ccaf77d', size: this.size })));
+        return (h(Host, { key: 'd88b07f6899b6b522ca0a633c413a8dfaf3fa92c' }, h(Tag, { key: 'b6f0e7772478b234a1224f0c7ab9e452f4a0dcbc', size: this.size })));
     }
     static get is() { return "swirl-symbol"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-account-circle.js

@@ -8,7 +8,7 @@ export class SwirlSymbolAccountCircle {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: 'ebfba039c0b7313d2e2a7031737ea050b0639dbc', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '62f6750c5536339d62dd7c0c1818cb35c8810e48' }, h("path", { key: '419ee171357a8ca7744f64eddba77561090a99a8', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
+        return (h("svg", { key: 'd94f05e92297086594f9df7bf74ff97102ac0703', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: 'fa0f005b36aefc5358e917de46748c105eed5399' }, h("path", { key: '3e5231c95f01641b52f575a2fd175b3608a2012a', d: "M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 5C12.5933 5 13.1734 5.17595 13.6667 5.50559C14.1601 5.83524 14.5446 6.30377 14.7716 6.85195C14.9987 7.40013 15.0581 8.00333 14.9424 8.58527C14.8266 9.16721 14.5409 9.70176 14.1213 10.1213C13.7018 10.5409 13.1672 10.8266 12.5853 10.9424C12.0033 11.0581 11.4001 10.9987 10.852 10.7716C10.3038 10.5446 9.83524 10.1601 9.5056 9.66671C9.17595 9.17336 9 8.59334 9 8C9 7.20435 9.31607 6.44129 9.87868 5.87868C10.4413 5.31607 11.2044 5 12 5ZM12 19.2C10.8119 19.2 9.64219 18.906 8.59528 18.3441C7.54838 17.7823 6.65678 16.9701 6 15.98C6.03 13.99 10 12.9 12 12.9C14 12.9 17.97 13.99 18 15.98C17.3432 16.9701 16.4516 17.7823 15.4047 18.3441C14.3578 18.906 13.1881 19.2 12 19.2Z", fill: "currentColor" }))));
     }
     static get is() { return "swirl-symbol-account-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-alternate-email.js

@@ -8,7 +8,7 @@ export class SwirlSymbolAlternateEmail {
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: '582c5aface17e973733971144f6716c8f8806706', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: 'dfe13e64a690ee12538eecb361483daa0ff1eca5' }, h("path", { key: '748df7b8437695ffdcc9cdb046d5b07e3f5e20a9', d: "M12.72 2.03C11.2895 1.92586 9.85327 2.13097 8.50906 2.63136C7.16486 3.13175 5.94415 3.91571 4.92993 4.92993C3.91571 5.94415 3.13175 7.16486 2.63136 8.50906C2.13097 9.85327 1.92586 11.2895 2.03 12.72C2.25932 15.2774 3.44555 17.654 5.35148 19.3745C7.25741 21.095 9.74256 22.0327 12.31 22H16C16.2652 22 16.5196 21.8946 16.7071 21.7071C16.8946 21.5196 17 21.2652 17 21C17 20.7348 16.8946 20.4804 16.7071 20.2929C16.5196 20.1054 16.2652 20 16 20H12.33C10.507 20.0255 8.72662 19.4482 7.26549 18.3578C5.80435 17.2674 4.74428 15.7249 4.25 13.97C3.9207 12.6293 3.94274 11.2264 4.31399 9.89667C4.68524 8.56699 5.39316 7.35554 6.36935 6.37935C7.34554 5.40316 8.55699 4.69524 9.88667 4.32399C11.2164 3.95274 12.6193 3.9307 13.96 4.26C15.7171 4.7485 17.2628 5.80538 18.3556 7.26544C19.4484 8.7255 20.0266 10.5065 20 12.33V13.43C19.9896 13.8312 19.8303 14.2143 19.553 14.5045C19.2757 14.7947 18.9004 14.9713 18.5 15C18.0996 14.9713 17.7243 14.7947 17.447 14.5045C17.1697 14.2143 17.0104 13.8312 17 13.43V12.18C17.0186 10.9584 16.5992 9.77056 15.8178 8.83141C15.0364 7.89226 13.9446 7.26388 12.74 7.06C11.8943 6.93234 11.03 7.02353 10.2295 7.32488C9.42907 7.62623 8.7192 8.12767 8.16765 8.78137C7.6161 9.43507 7.24127 10.2192 7.07893 11.0589C6.91659 11.8987 6.97215 12.766 7.24032 13.5782C7.50849 14.3904 7.98031 15.1203 8.61077 15.6982C9.24122 16.2762 10.0093 16.683 10.8416 16.8797C11.674 17.0765 12.5429 17.0566 13.3654 16.8221C14.1879 16.5875 14.9366 16.1461 15.54 15.54C16.027 16.1827 16.7106 16.6487 17.4868 16.8671C18.263 17.0855 19.0893 17.0444 19.84 16.75C20.4916 16.4715 21.0452 16.0048 21.43 15.4098C21.8148 14.8148 22.0132 14.1185 22 13.41V12.32C22.0348 9.75098 21.0981 7.26359 19.3774 5.35564C17.6567 3.44768 15.2789 2.2599 12.72 2.03ZM12 15C11.4067 15 10.8266 14.8241 10.3333 14.4944C9.83994 14.1648 9.45542 13.6962 9.22836 13.148C9.0013 12.5999 8.94189 11.9967 9.05764 11.4147C9.1734 10.8328 9.45912 10.2982 9.87868 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.8241 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z", fill: "currentColor" }))));
+        return (h("svg", { key: 'e6f99b9ef17228e7a63032787387f3b25a644526', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '2b6991fdbe46cf60749b092e86d5f78bbbb8ba41' }, h("path", { key: 'b34aeffbdca107f1e2656bf13bc33a817e64bc5a', d: "M12.72 2.03C11.2895 1.92586 9.85327 2.13097 8.50906 2.63136C7.16486 3.13175 5.94415 3.91571 4.92993 4.92993C3.91571 5.94415 3.13175 7.16486 2.63136 8.50906C2.13097 9.85327 1.92586 11.2895 2.03 12.72C2.25932 15.2774 3.44555 17.654 5.35148 19.3745C7.25741 21.095 9.74256 22.0327 12.31 22H16C16.2652 22 16.5196 21.8946 16.7071 21.7071C16.8946 21.5196 17 21.2652 17 21C17 20.7348 16.8946 20.4804 16.7071 20.2929C16.5196 20.1054 16.2652 20 16 20H12.33C10.507 20.0255 8.72662 19.4482 7.26549 18.3578C5.80435 17.2674 4.74428 15.7249 4.25 13.97C3.9207 12.6293 3.94274 11.2264 4.31399 9.89667C4.68524 8.56699 5.39316 7.35554 6.36935 6.37935C7.34554 5.40316 8.55699 4.69524 9.88667 4.32399C11.2164 3.95274 12.6193 3.9307 13.96 4.26C15.7171 4.7485 17.2628 5.80538 18.3556 7.26544C19.4484 8.7255 20.0266 10.5065 20 12.33V13.43C19.9896 13.8312 19.8303 14.2143 19.553 14.5045C19.2757 14.7947 18.9004 14.9713 18.5 15C18.0996 14.9713 17.7243 14.7947 17.447 14.5045C17.1697 14.2143 17.0104 13.8312 17 13.43V12.18C17.0186 10.9584 16.5992 9.77056 15.8178 8.83141C15.0364 7.89226 13.9446 7.26388 12.74 7.06C11.8943 6.93234 11.03 7.02353 10.2295 7.32488C9.42907 7.62623 8.7192 8.12767 8.16765 8.78137C7.6161 9.43507 7.24127 10.2192 7.07893 11.0589C6.91659 11.8987 6.97215 12.766 7.24032 13.5782C7.50849 14.3904 7.98031 15.1203 8.61077 15.6982C9.24122 16.2762 10.0093 16.683 10.8416 16.8797C11.674 17.0765 12.5429 17.0566 13.3654 16.8221C14.1879 16.5875 14.9366 16.1461 15.54 15.54C16.027 16.1827 16.7106 16.6487 17.4868 16.8671C18.263 17.0855 19.0893 17.0444 19.84 16.75C20.4916 16.4715 21.0452 16.0048 21.43 15.4098C21.8148 14.8148 22.0132 14.1185 22 13.41V12.32C22.0348 9.75098 21.0981 7.26359 19.3774 5.35564C17.6567 3.44768 15.2789 2.2599 12.72 2.03ZM12 15C11.4067 15 10.8266 14.8241 10.3333 14.4944C9.83994 14.1648 9.45542 13.6962 9.22836 13.148C9.0013 12.5999 8.94189 11.9967 9.05764 11.4147C9.1734 10.8328 9.45912 10.2982 9.87868 9.87868C10.2982 9.45912 10.8328 9.1734 11.4147 9.05764C11.9967 8.94189 12.5999 9.0013 13.148 9.22836C13.6962 9.45542 14.1648 9.83994 14.4944 10.3333C14.8241 10.8266 15 11.4067 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15Z", fill: "currentColor" }))));
     }
     static get is() { return "swirl-symbol-alternate-email"; }
     static get encapsulation() { return "shadow"; }