@getflip/swirl-components 0.244.0 → 0.245.0

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -37,7 +37,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '20fccbb35a5f2e851019d447396bf70cdbf0a866', role: "row" }, h("div", { key: '8dcc46e1b5f293d3e0efdc67bba2fd4886706dd4', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '6a45500189abb0303be6cc433a5c928d1eb31a1f', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '6a8f5200a3d8d24823f69356f6522405892a9732', class: "resource-list-file-item__label-container" }, h("span", { key: '3c31cdb35f04a06bfe2deb2610cbc12308269a65', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '7eb461a7a191db05937aa22ace31f5cca9379816', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '43d30a92c839d797092b6ac646d3f1925902018d', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'c13104b44ad620e51339b1e52fac9adce24c1de3', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '8bd9ae4557d35627734b648bdc07b6969cd04f73', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '1d9abac38e18874ea7ceb8c8c6d3eef4779113bc', size: "s" }))), showRemoveButton && (h("span", { key: 'f7822bad206bb92aa1acd57cd432ad3c44a0b179', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'de8b719b20cd39d7feb4032b46495a95d6039cdf', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: 'c1fd77f8e6c7d91f58e585c6a787d548b0995105', role: "row" }, h("div", { key: 'a24dc62369366c454ffa86c86f991fc11d4f108d', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'd563eb451cb8e7f7cc2ec0296a3ee1aa49412a46', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '2fa8a4b2e3f345eb6108e59c5cd7a62145cc9015', class: "resource-list-file-item__label-container" }, h("span", { key: '0cbfc4e13515f2deff5e63d188080d234275cf09', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '9c2fbd9bc325e6e6dfbe61f09b1749cb47832e00', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '258459911456a1d06b6571a8d52aae4da3ff5e09', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '6c07a2b6d2336c9e5c2dcf7d6e1bee867e0e9bc3', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '119f184c853e469d21ba13aa07b2be2389e60720', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '45b2b225a2b15761b6df3e118abcf0e0d4c6c0ef', size: "s" }))), showRemoveButton && (h("span", { key: '582f474e83b04fb6a03f9ea05bcbef547987f922', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'e807c3fc2027f25910fedad01b629681894f5c41', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -119,11 +119,11 @@ export class SwirlSelect {
             "select--multi": this.multiSelect,
             "select--search-loading": this.searchLoading,
         });
-        return (h(Host, { key: '28192864fedd0105ed4ea22af7d8fbbfe604a8fe', onKeyDown: this.onKeyDown }, h("div", { key: '43cdcd3254d65298f569536491038178fa61491f', class: className }, h("swirl-popover-trigger", { key: '8fb2b7eb8f2dd56677285db02a7a2dd3c57a5cdd', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("input", { key: '19c38ad87591dd6b1a0943972a03353935e1aa65', "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: 'd7a0f88e1805a3282e361b839bf90223ac27ac35', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'd1f2b212a7994e78cfc572db6aaf064f0c2ffdbe', onKeyDown: this.onKeyDown }, h("div", { key: 'ced428abbd2bf11cdeb5c743a022818f2cec8e8e', class: className }, h("swirl-popover-trigger", { key: 'b597c85728963178dcb51203a8ddf8ea21203c26', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("input", { key: 'ca519acf6055bf1fb741f678dc4e9f98ab447712', "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: '5673c42edd36551c2c12e5dfa71a477a41e24249', 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 })))), h("span", { key: 'fe1cdf090525e7ddab3285394aebdeeb092adcc3', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { key: 'f1cb32544c67621a9c7784d038592d932835d586', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { key: 'b4e6ca0b51cf1596c99bc57bf2b16425d676f57c', class: "select__search" }, h("swirl-icon-search", { key: '3ae43687b9fc7c6901b26fc53232102a2dff7237', class: "select__search-icon", size: 20 }), h("input", { key: 'ee4b0172880122fcbad8a8ca05fd9ffdf5e13c4b', "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: '7946e18bb47243409a1de840cd6bcb9a7b89b6ee', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'e3274290f262698c5f8eca238a7e9d3a9d0645dd', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '20b3fe135aea4e2a03ae909cc6aa959db7d8e4aa', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '3a0832e03f0a22315c34eaf9d85e5be49e29deee', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'e253638007617f119b4ec24c869c747af87ac1ba', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: 'e11845859b8286dfede6d0426c58b7d9b156804d', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { key: 'aed2263e89c84390592e3c066c379d9e2e692168', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (h("div", { key: '34ddc62a2a188846a523bad838415850db753b8c', class: "select__search" }, h("swirl-icon-search", { key: 'c6ec263b0cbcda1739203e055040df06376d3b3a', class: "select__search-icon", size: 20 }), h("input", { key: '065da695394a883d5fc3ab0bbe68824d59422037', "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: '7984384d33a7f292dfd46937ed9ff2d27a4df88f', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'a2deea882b290ab649fc23f0cdfc6c1bd0601a9c', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '52b75473e55c8bcfe13adfb7c278e01b8913ccee', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'bfbc223b858e7bed52f44c580028f611726f1f1a', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'b633a8b55413c932e168c917fb7718a7d31abf7d', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -212,25 +212,25 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: 'e59a81d9486e1d9c65d2fbf5a13c1177b935a1b6' }, h("div", { key: '993f1fa7e1bc79f23c042c00992429c3a5c01a04', class: className }, h("header", { key: '1cb3a9c1bfdd8d3cd16cab59f31768a83d2c0cff', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '0c2cbb0e604d2051066ffecc304985aadc0a413a', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'f00a7fc3b8f5e691889f679233c2bbce38f5e2cf', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '6e73afca750785b2c5916aa8656e5f67501a7e0a', content: this.navigationCollapsed
+        return (h(Host, { key: 'dfacfb28b0469aeed85bc713cbd0189da9ee9121' }, h("div", { key: '1ff48589b148512296b58af4795692c56a22829c', class: className }, h("header", { key: 'da337e1e0d8e73dcb1a483635923f1b7d7f745f4', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'd4ee1b02554c555ab6fc8d82f81743613c226f07', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '1f393c693012baa345ec17729c9a402111c5ff05', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '2d8ad782aa1ea0d403207bf5e47a4f7a113af03b', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '90367e1528cc332dd064d9214f7274bf16bdac19', 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: '0ce6a13a5f9be722e5b5b2085904d5ed00d9bff4' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'd0f8475851bdacd982cb8cdb6513b2675761c51d', 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: '595d309187e68915836e6489e318f652c928301a' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: '30e38c2148814b30580a6cd3786d456028756dbc', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '971b1708b810e9704e30670c005c744a364f47a9', size: 20 }), h("swirl-visually-hidden", { key: '60fd8ca229d9d1149c037f72c17f7d1a29d387e3' }, this.browserBackButtonLabel)), h("a", { key: '94ff6d1dad4cb0fca7eb31aea0ab5fab33021693', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'e5100e2c6a381894d9112fe3448c0db23e057713', size: 20 }), h("swirl-visually-hidden", { key: 'c3d14808e884c3df477d2a5c8abb8e45f7b2aadc' }, this.browserForwardButtonLabel)), h("slot", { key: 'eae965a6a55596497ccc3f19aac7bc2f392703f9', name: "left-header-tools" })), h("div", { key: '472cd871184319b6b601e6b3756e55f58eb99b91', class: "shell-layout__logo" }, h("slot", { key: '85bd0454b3f2a9e2266c31a2d2c0241a1e768be6', name: "logo" })), h("div", { key: '85097d241e71f5c7795ebe88a69211889f9eae2d', class: "shell-layout__header-right" }, h("slot", { key: 'c825a614806f106466b3342d6c07ea527ffc3d2b', name: "right-header-tools" }), h("button", { key: '4cf9523fe7c55c928b7ef1a822dc85c99d54a569', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'd12ca79e7c01cab383a94e1c8db6ed6d6825a770', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'e4ca881c17ce5df8ecebef35164681713bbdbbe8' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'cb72e74a9771b4b44b526e6e5c56784cb2154e28', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: 'eaa175be9b9950c91bbe05014f800c9477bde953', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '1b3f91483aded16978f30d1582370bdbd5ae3830', size: 20 }), h("swirl-visually-hidden", { key: 'c002632f4863d937a4b354a212b9fb0a7ce7397c' }, this.browserBackButtonLabel)), h("a", { key: '6d9000fd9878a28b5b1a12de2651da22179a60bb', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'f5599c754670a644bccec39f554510750f7e3026', size: 20 }), h("swirl-visually-hidden", { key: '71d6602562f5b940116e184d19861eec5666c118' }, this.browserForwardButtonLabel)), h("slot", { key: '795a473842dc7d83927a7d037b0631981c8eab37', name: "left-header-tools" })), h("div", { key: '85ba51e674050ef339c1be6b3724acec39fabd9a', class: "shell-layout__logo" }, h("slot", { key: '2d7e5d269ef307989aca6707c7417b39679373bf', name: "logo" })), h("div", { key: '4585a3df834aeb71a851995c360715e6fbca05dc', class: "shell-layout__header-right" }, h("slot", { key: 'fe9aa8755d20200abbf1c1c29cc38e6d026e7eef', name: "right-header-tools" }), h("button", { key: 'b1e01a5c86dad22155979297e14a7354c9c1e935', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '7f42296b6e0834dc10faca85f8e73138d764d01e', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '75d56be479825eb1cb13def9031eb270b054ead7' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '69a5be3ffe055ba6ce5aa534845e9cd3b0a6bcf3', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'b6e679c5817372981ea29c92f5d913edb1c77c3f', name: "avatar" }))), h("div", { key: '25f3803a1a3b75afa4c678043080450793c52a62', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '62046a2dd8315c4762a3e91004bfaa019737c1f5', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'ca010de7cbc6f443d8adb15e82e026c6ba7f432a', class: "shell-layout__mobile-header" }, h("slot", { key: 'aec7efbf841b780bf43f29ef065b83d6187a9700', name: "mobile-logo" }), h("div", { key: 'bed9a206cf4e309c02f9f855b1d3084e496abd6c', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'c7843da41b838a6539881990c85a0b471d0e7aa2', name: "mobile-header-tools" }), h("button", { key: '05cbea1e70a44b50115289f8e96989fc6a253362', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '6a00745f4f62df1eef207e4863b45e02ba64d747', size: 20 }), h("swirl-visually-hidden", { key: '2cd4b610d3489ff301f1a7270f9b9785006ede67' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '6bbc10715d69d7e0c9b94d9e3456cc4fcd4079bb', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '1732e3b2e9bc3f1d9d147740df837c719fca7dcb' }, h("span", { key: 'b49a81be63fa6c4cedd3fa822ef49bd3335a9233', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'eb1c0048f450a8e53a9526d8df5e386a4f571d4a', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '42b9870a1f2925c20b1551c9a5eb62d60eacaa69', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '19dc78b129b9842ae0d55193c882053469aaebb1', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '38655ce1296a6fe5a70e5317b02321ccab95e721', paddingBlockEnd: "16" }, h("swirl-stack", { key: '24ff236c6cf7e4f07090fcc3a49aa378ae698cf1', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'b256fba77ef0ab1f55b111d32eacfefb4ae4ad3a', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'bcf86df105ba45d59d4d3a0a8d2cd1e64d462e45', name: "avatar" }))), h("div", { key: 'e7ff8d2305594aa69f64b303cefae2833c52020e', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '82ceb53943bcd00a91337988a72e3bb7e960c190', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '15ca8c62c8c81e951d3aa46b24be5df010ade9c9', class: "shell-layout__mobile-header" }, h("slot", { key: '1a40bcc4c07c375db9bd78efa7a05e18e35241ec', name: "mobile-logo" }), h("div", { key: 'd046b35ab584b67c8ca19a63e1a06179079a71e5', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'f22b63e5f4258eb056d1cafc4020309e04a88815', name: "mobile-header-tools" }), h("button", { key: 'f899ad4a9f885f99c6f861e045f9ea5a0c097e82', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '055ccf17868f287bd7ab37ae1a8da2d95b51b864', size: 20 }), h("swirl-visually-hidden", { key: '91e2f64623d06f3f50e81cf9aa402158fcf344de' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'eaeeb1c30dd05ef5a49e0812fbc6a58a2abd1248', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'bded45ad301724ea6cbf0711a8858246911e0b3c' }, h("span", { key: '0f7ac056fc8bb22350e5f7b012036d7f31cb8b36', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '13cfcf0760810f374c3e07043a20a9db19ffd87b', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '600cf5703e7ebce0b8d64417cc5121b87661a41f', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'e57384c5df94b6c04e79ecd300594903d6c526ed', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '24aa8ceb5c4c33d97e039b6aef06625037a46564', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'bd720ea6033a0aa035786bcf3ed84b4d60783c5d', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '07778ed9d75bd763976092db314942b4edb80475', 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: '5e60c8d3460c4c9641d94b171f6a6e31ab4f8d80', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'c200cb9b8ef58da95217384067e6f0557d2bffdb', 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: 'd4664ef11f254c1357187907c13f4ed5b06db3ec', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'dda6b13df520616985cdfe633e9d8d078553b8d3', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: 'a783c83affed8466ea16f61d19f432aafb7336d0', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '93ca4c503153c93836d356ac5d0c2c294b1fe185', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '6119fcc24284e4ae73f80a02b9814962c60754ef' })), h("aside", { key: 'a08733425103544ca5835962996549e60964fac3', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'b7c82b7a4c9090fee76c695e75e44c1aa4000bf9', class: "shell-layout__sidebar-body" }, h("div", { key: '70ce8f4c0ed87e1f65a3ce62258e620219d7c998', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '8ff304f4ba682cdf0b0dc20ef44af9fe3f871178', name: "sidebar-app-bar" })), h("div", { key: '577d4bc413fb08e3567b5626f807ddbe2a83b4cb', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: 'cde6ddf74ad09ed54ad90fa224752e19f25dde7d', name: "sidebar" })))))));
+            } }, h("slot", { key: '5ea994e16659dbba1717c0c4400d9d470cf76b59', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '3781138352b52482af13d960121958ee3505bef1', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'fab8b7cd5e9fd2f4b88ced48d3358cfd4e5671f9' })), h("aside", { key: 'c100bf9bc7df04ea7057f158525234c6255583a5', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'c06c9b23de5f48e6a90143074a989088a9b7101e', class: "shell-layout__sidebar-body" }, h("div", { key: '73806f9883a1b75d979fd59259c8a51f5325623a', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'b7e968716ae363dfe4eb531a4ed910543b7e7866', name: "sidebar-app-bar" })), h("div", { key: '5e2e0c6fd01894c6b82eb2eaa32db169715d253e', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '1f8045aa215aef29107d2d9632306f3b06a30c44', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

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

@@ -93,7 +93,14 @@
         text-decoration: underline;
       }
 
+.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {
+      position: absolute;
+      left: var(--s-space-12);
+      top: var(--s-space-12);
+    }
+
 .shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {
+      position: inherit;
       width: 100%;
       height: 100%;
     }
@@ -109,6 +116,19 @@
       aspect-ratio: 1;
     }
 
+.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          aspect-ratio: 1;
+          display: inline-block;
+          border-radius: var(--s-border-radius-base);
+          background-image: linear-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.8)
+          );
+        }
+
 .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
       position: absolute;
       top: -0.375rem;
@@ -120,13 +140,30 @@
       display: -webkit-box;
       overflow: hidden;
       text-align: start;
+      font-weight: var(--s-font-weight-semibold);
       white-space: normal;
       text-overflow: unset;
       overflow-wrap: anywhere;
+      color: var(--s-text-default);
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
     }
 
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {
+      position: absolute;
+      bottom: var(--s-space-12);
+      left: var(--s-space-12);
+      margin-right: var(--s-space-12);
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {
+        color: rgba(242, 242, 242, 1);
+      }
+
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {
+        color: rgb(25, 25, 25);
+      }
+
 .shell-navigation-item.shell-navigation-item--active {
     background-color: var(--s-surface-sunken-hovered);
   }

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

@@ -8,21 +8,30 @@ export class SwirlShellNavigationItem {
         this.active = undefined;
         this.badgeLabel = undefined;
         this.boxed = undefined;
-        this.hideLabel = 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 className = classnames("shell-navigation-item", {
+        const tagClassNames = classnames("shell-navigation-item", {
             "shell-navigation-item--active": this.active,
             "shell-navigation-item--boxed": this.boxed,
             "shell-navigation-item--tiled": this.tiled,
+            "shell-navigation-item--gradient": this.withGradient,
+        });
+        const labelClassNames = classnames("shell-navigation-item__label", {
+            "shell-navigation-item__label--light": this.inlineLabelColor === "light",
+            "shell-navigation-item__label--dark": this.inlineLabelColor === "dark",
+            "shell-navigation-item__label--inline": this.inlineLabel,
         });
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '8f668fc263920a3544a848f3e1dae9bd975b622f' }, h("swirl-tooltip", { key: '159b4df0d0debb01c2cef0c1c29304dab8dc0496', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '1c357bba117c9dfaf8ff2cdb30c1e574ec0d36aa', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '45a09de3187850380499dc2e0048a4fbd4e756ca', class: "shell-navigation-item__icon" }, h("slot", { key: '997e25fffc95f760c88d4eead87a78226cfd7bc2', name: "icon" })), !this.hideLabel ? (h("span", { class: "shell-navigation-item__label" }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: "shell-navigation-item__label" }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '8d5a0bbe07d162f9d8d637f0291bafd074d9fe92', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: 'ac27ba222fb6d1037eafe559f0a0ce62b00fefcd' }, h("swirl-tooltip", { key: 'c69e9255e6a0a8ac24ff5c7b9084f8b0549ed0db', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'b9c162718cc86f8f1dc3659852e740d21b23f18c', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: 'cd81b747a5361b712d0928e797b01d45c6198db8', class: "shell-navigation-item__icon" }, h("slot", { key: 'b2123d0a0f7ab375f4b17382080c86d9943e0edf', name: "icon" })), !this.hideLabel ? (h("span", { class: labelClassNames }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: 'b90e6f6f5cdcb4e08588417bce12369bc643622f', "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" }))))));
     }
@@ -100,13 +109,14 @@ export class SwirlShellNavigationItem {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "hide-label",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "href": {
                 "type": "string",
@@ -125,6 +135,47 @@ export class SwirlShellNavigationItem {
                 "attribute": "href",
                 "reflect": false
             },
+            "inlineLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "inline-label",
+                "reflect": false
+            },
+            "inlineLabelColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlLabelColor",
+                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "references": {
+                        "SwirlLabelColor": {
+                            "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::SwirlLabelColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "inline-label-color",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -175,6 +226,23 @@ export class SwirlShellNavigationItem {
                 },
                 "attribute": "tiled",
                 "reflect": false
+            },
+            "withGradient": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "with-gradient",
+                "reflect": false
             }
         };
     }

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

@@ -13,12 +13,17 @@ export default {
 const Template = (args) => {
     const element = generateStoryElement("swirl-shell-navigation-item", args);
     element.innerHTML = `
-    <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/237/200/300"></swirl-app-icon>
+    <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/25/200/300"></swirl-app-icon>
   `;
+    element.style.width = "120px";
     return element;
 };
 export const SwirlShellNavigationItem = Template.bind({});
 SwirlShellNavigationItem.args = {
     label: "Label",
     badgeLabel: "1",
+    tiled: true,
+    inlineLabel: true,
+    withGradient: true,
+    inlineLabelColor: "light",
 };

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

@@ -10,11 +10,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: 'a137dd7915355522f1b0adeeac17876539dc01e2', style: {
+        return (h(Host, { key: 'eaa1f0b78ba2e09368a0c31937a1776c60a38bd4', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: '0407a7fc26328b29d812af1e2c875c06f2149f7a', class: className, style: {
+            } }, h("div", { key: '4192011e2f868cdd0a8107d7073afbd082b75029', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill"
                     ? `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: '91edd9f485d311dde6fa5e915ae1bf51cdc20455' }, h("div", { key: '808ee50b0708b690fa7a78f8dfdbcc402dd38546', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+        return (h(Host, { key: 'ff8a083caea381a90aacf3e66e4afef2ff42d6f2' }, h("div", { key: '3b14bc4ba15c04eff3dcd07422f3f2257ef3d51f', 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

@@ -7,7 +7,7 @@ export class SwirlSpinner {
     }
     render() {
         const className = classnames("spinner", `spinner--size-${this.size}`);
-        return (h(Host, { key: '04cae93a2cc943588e307d34391fcd7f70c06b22' }, h("span", { key: '7ef0a1d82a857a5263d968917f8a380c1b2aeb4b', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: '71a1148b93ac28815baba7fcad7f02d82a8f76fa', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'f1ea916777bf4d960fed4f97b25270e75e20663d', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: '2d948be6e5146721bba1ba678a39f9deecd52063', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: '2eaeb9a4f9036f0007c444bfc21edddd88b07c74' }, h("span", { key: '1d8398c2c2c0d0da888eb6ccf5e3bb661201776e', class: "spinner__label" }, this.label))))));
+        return (h(Host, { key: 'ae38f5b997acaea4123ba35c4c702c5c7548c136' }, h("span", { key: '7fb5a2d0edea393d5dfbb35069314e140f39ac24', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: 'b75d82a032acc0ad9a5155ddd922b995decd2b8a', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: 'ef14e8049e6dd09d367b9e7285903fb9ec37c4e9', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: '1951ac96261ed442a42367ebccc5639ddf856c76', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: '0dc7f94b322767cd49fa61b9fbd5ac2e80dbbad9' }, h("span", { key: '64a146014f759b6f9b4413cdd47e58d1c880f022', 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

@@ -7,7 +7,7 @@ export class SwirlStatusIndicator {
     }
     render() {
         const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (h(Host, { key: 'f359a427b0d2f5b810e9567b0bac441dc0087f31' }, h("div", { key: '03acce899d0a84dd266470be3ca3ea843ccb8968', class: className }, h("span", { key: '7d99dd4b23942f8675b0ad1bc442714651edcfd0', class: "status-indicator__dot" }), h("span", { key: '108eb0c318cb3873f6e8ddc59d8c144f9c779aac', class: "status-indicator__label" }, this.label))));
+        return (h(Host, { key: '12ad187054fd68f60d69b79f3faab9e106cef752' }, h("div", { key: '0f51e9195ef9c6193bb180bc4da66a0e24ebb431', class: className }, h("span", { key: '95cfbf375a38e84c34f678fad1eea27df03f8cdc', class: "status-indicator__dot" }), h("span", { key: 'bedb34932a682a2e6b5ac77469c14630b565d56f', 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

@@ -30,7 +30,7 @@ export class SwirlSwitch {
             "switch--on": on,
             "switch--disabled": this.disabled,
         });
-        return (h(Host, { key: 'cedaf29a2ee5fedd89cdbb39553d18ceb37a5b9a' }, h("label", { key: 'cd2f6bd0936dc8e8b127448eb548d30a319a701b', class: className, htmlFor: this.inputId }, h("span", { key: '7e8852b9aea9b8f996d6c7aec68a16de0f1a3958', class: "switch__control" }, h("swirl-visually-hidden", { key: '3cd9e0142925081c65bd0ec79eefff19c7933dfa' }, h("input", { key: '38ae820f0a2e0e1f5eec8d43e24ff23205c1e38f', "aria-checked": ariaCheckedLabel, 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: 'b60201088276b8e78f8e991e6b2c765aa244d8af', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (h("span", { key: '3900528e738efc67f01708de2ba196ead158ebdb', class: "switch__label" }, this.label)), this.label && this.hideLabel && (h("swirl-visually-hidden", { key: 'aa6e24674b9d44b7bbbd3b8f9a31687fafcc3258' }, this.label)))));
+        return (h(Host, { key: '24aaff17051b26a91587032d203271dd3c182cbd' }, h("label", { key: '91d3bb3c765f727672cd9fed68a942f4436804d7', class: className, htmlFor: this.inputId }, h("span", { key: 'e29bbb56bfccdeb7ce77b2cac0a809278820939c', class: "switch__control" }, h("swirl-visually-hidden", { key: 'd3ad3f6a3907705eb4e9eb09db18bb91460acfb2' }, h("input", { key: '586eb536d3fb2d0a0cb7ef0529436225a88a176f', "aria-checked": ariaCheckedLabel, 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: 'eda4640707c4ce7aaeb7cea03771169266a37cce', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (h("span", { key: 'a0133580f3d8ae8682a231529a2a61b6d4a004ad', class: "switch__label" }, this.label)), this.label && this.hideLabel && (h("swirl-visually-hidden", { key: '210938320c9393f0fe4699f1568db1f1c88ab99e' }, this.label)))));
     }
     static get is() { return "swirl-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,7 +10,7 @@ export class SwirlTab {
     }
     render() {
         const className = classnames("tab", { "tab--active": this.active });
-        return (h(Host, { key: 'd3ff81823ef81d081ca0aac411e4042c50241a5c', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: '5e5646dcdc6bbb14b2fa9608282c97f2dfc10a08' })));
+        return (h(Host, { key: 'd4d20215e6ec5e406e88c2a3da587b383fc8c6bb', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: 'f415125e7a606532211261bff117a16b8c91b3f8' })));
     }
     static get is() { return "swirl-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -29,7 +29,7 @@ export class SwirlTabBar {
                 ? `var(--s-space-${this.paddingInlineStart})`
                 : undefined,
         };
-        return (h(Host, { key: '218c8b7e11e02ca36179d5f75b992460bfbea2b0' }, h("div", { key: '35d3ee3d5294de433db4cb0e4c4f483cc556e538', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: 'ea93aa68f44536d6bd3b6a6d12b88b87c83777de' }, h("div", { key: '09207de8f8fdd28f16152ccbcdfe3154045c9684', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
             });

package/dist/collection/components/swirl-table-column/swirl-table-column.js

@@ -22,7 +22,7 @@ export class SwirlTableColumn {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: '49e6f592d1a2e9530fdad9d1773912c541defd6a', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '253a89be8848f49aa2b7e44007221440eb05866c' }, h("slot", { key: 'a3131624fc2b7b30bcb191f5d9e57fdaf826c68c' })), this.sortable && (h("span", { key: 'a9d641ba618631293576f7157cc51a8a943d8051', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'ef0b4d5db14828beed9167cda659c7cdd117d366', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'a11e3fcad58af02cbf0f14b371c94cc082040b08', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '5eaa343f5d9344f85a0f2b2617b3b67a51f936c2', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '13109489a86afe1855ff52f5f8bfe891df007e25' }, h("slot", { key: 'dbcbad744cc3d64993261addb14ce1dfe94c8dab' })), this.sortable && (h("span", { key: '742952495996feb84140f194c7355e3e00079d0b', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'bd67d3c8b75e95aef25505a885856d6cbdec50b3', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '5c0c3dbc9ab7183e2560a04f28d7d311cb857432', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     static get is() { return "swirl-table-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class SwirlTag {
     }
     render() {
         const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '314bb385a4dfd4fc3aac39b3eff6c94e173b3170' }, h("span", { key: 'b9a9454b145a745300d60fdf97f2970b7c2de009', class: className, part: "tag" }, this.icon && (h("span", { key: '88a14178eb5b7d0d8cbfba7e30b5af17b6125582', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'e52a51ff097e0783a6dbd6ddf0fbc0fa6936b307', class: "tag__label" }, this.label), this.removable && (h("button", { key: '65c89bf99db994ae16146ee725af001c2f83960a', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '6e1335d3304150b3172e4b93ba8e89773bfcfe57', size: 16 }))))));
+        return (h(Host, { key: '45e5a4bbcf96b35c7a3752e35da0420df14f2af1' }, h("span", { key: '3cba8136d0ec0cd88228570098b03876729b2e68', class: className, part: "tag" }, this.icon && (h("span", { key: '24595925205a07cb706120fae8dabc6794952414', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'b42a3b38173a39ed5d75b40d7b05b8c8a93d19a9', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'dd4b5a3b52e137a5a532435106b38ec5c27ba3e7', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'ca6459abd4a29d5c27f7d8051bd0b70b5ca18e9e', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: 'ae43dce27dc3152fcafcfb95d7aed3b9e3aac649' }, h(Tag, { key: '717f497f8d2decc844525187bcabf82344fbec52', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'a7a16a67b570abfa5cb6adf4d04f385973a7cec1' }))));
+        return (h(Host, { key: 'e745ae5ee49419e9993e764a8a4cea5b544bcf55' }, h(Tag, { key: '441dc1ef0cff74cf151820913d1e92069cb000df', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'd32e5ed3edefd646afcacc08fe4daa7ab5d9a1ac' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,7 +29,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '169089be9d73d32f09fa79e606cd494177bfcabd' }, h("span", { key: 'a0dcd5123d7f07e27136ed2981548b06649d3006', class: className, role: "group" }, h(ImageWrapper, { key: '9894399dcb768705493a6dafe1c330322a3ac2c3', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '3563d7dfddcb976fe2d083d4ecd8028dbdb51117', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'ebec7fe23f3e1ba1c6700c99b40dfd987c329580', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '932ad95268b33e64b138f031d02502fdebb6fcd3', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'd54308f88c6eeb7dfd39f30023a02f1f431b65a1', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '202da8f6425efc913eebd9d91ea666f4a565787d' }, h("swirl-button", { key: 'ecb2ed1dc845c6752927c582a12b4a0bbf5234c9', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '9605e51158e368ad03be62df50fa19d054545204' }, h("swirl-button", { key: '86d387395955643362558b5625609196cb6c1389', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '142a675e2ca0599d0494241fc0ab8e1c75796736', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: 'fe8b54784f53e9476875288900813ed3d56d7ae7' }, h("span", { key: 'bf8f4021d0463a249ede4f9064f1e1b8f7b01fef', class: className, role: "group" }, h(ImageWrapper, { key: '8d76cacc2d872c5af83c81e75534478d267d63b7', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'abd165e7e5efe56e38a898bef431ef8d3916efa5', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'dcbf10469ecca2efd6e8ad396ec7892a5c2e34bb', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '094ad69094a713d8d968b992d2003d52a7ac06b5', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'b9e2ba93d2a6b2d6bae69e566ef6a851f5301723', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'b8e7ff0f5bd8cf8325990cc117c044e335ec5fa8' }, h("swirl-button", { key: '16889dde7558128b919ddbe8c337bea620041fac', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'fc5f1c213d4fb29369fec87acc9567b92b595b6d' }, h("swirl-button", { key: '9c9ab28aa6d0aa54bebcedd91bd820b071e3e688', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '24a2efd1dc21d634e27ff8d13f54cf228fdd2c73', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '3f18540b25b145f15f1eaca37dd5be78c42103db' }, h("div", { key: '666739cb13cfc70881aedef22844cbe8ad2783d4', class: className }, this.icon && (h("span", { key: '8964a20477ae0d365fe600ce34529354177597ea', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'f8e210ce416ce272af9062c59cbe1d813d781b29', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '119b58256339906ef3f94db1a8e99dac23cd3154' })), h("button", { key: '352b2d3024d115c5d8e415891f621f4d8c49c03e', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '4427cfd0ed52328b282ed327ec086b0cb4b3860b', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'c99dfdb7fb408541c85dc0f992e7db60948bbccb' }, h("div", { key: 'c45887e366fcb433bd68d495c15df4d618012055', class: className }, this.icon && (h("span", { key: '9335e85961d8fda675e1fd3987651acdc1b62fe8', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'e0cbcc8fda5aa8d2c326c8b6369fd906cb13a0dd', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '0f9e37a7ae612fc6efb90b60002e509692295b10' })), h("button", { key: 'b98bb0250b6a30956c623b3521aef9d9bb101167', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'd555ff6dd1a3217c6677f89a6beb46c524db1f36', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -49,7 +49,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: 'b4e75e8b86b496b1bff8baec4df1e1762a25fb3d', role: "status" }, h("swirl-stack", { key: '0b85451df7c697ae44a54a6d7a66c9ac8a5bafe4', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '9ad8bd900c35bae7dc87319ed6123b3fd4c79312', role: "status" }, h("swirl-stack", { key: 'b1f42c45828153de003906253eb80b8a974c475e', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

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

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, h("swirl-stack", { key: '5f37a4b04ae86acc12e7c923466d1ccafe80dc61', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '468bbff3894acf369feda7a56db6b432445e71f6' }))));
+        return (h(Host, { key: '6f5c646bd9899b76f7c3ed04fa79f0a0261e1605' }, h("swirl-stack", { key: '6d3bf09a8dab3eea1e86b80aba821b04fe5b23de', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '4b952d57c53c5ba8c1b4c453dddaa6cc902c97f1' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '6b4349568aeda21be1c86dc8ba47d32fd69fcf6c', onKeydown: this.onKeydown }, h("span", { key: '23920a993ad647905f7d9aa72cf4815c762e0239', class: className }, h("span", { key: '3bc99d469fe2fb3fbe459778b3a5138e2e10d14b', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '7cb1ae022a8a668fdc43baff33ec00c23721cbf7' })), h("span", { key: 'd6afed9fe735ec487bf360673f233d57ca00a550', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '032f7f7faed3c0beb1aaf995860c67428cf1d083', onKeydown: this.onKeydown }, h("span", { key: 'a5189bd18e5cc1ea5d9695efbb4abb36c11a09c1', class: className }, h("span", { key: 'd17f03e1e30b2be77393e3c4c97be5dc21e55b75', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '0c35fc5c5d80b47c57850e37b8e535d7e84c52b6' })), h("span", { key: 'a0e64797b14566a02ffb65ccb4f46aeb19990704', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -118,7 +118,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '05ab2e80cae9ef200520044028fd97aef05f36a5', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '7c8260e768c51475675090049e8f4acdb6915861', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '3b2642690f347c433c98e36de14b04cb99f8d9aa', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '1f5eaedac815954cc6a08e921049df0e1e5f5e17', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '94b4d83056bc12d8605cef28c2a7e914705333fd', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '8e03769cc91742255b1e097b5cc22e3fc6773a39', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));