@getflip/swirl-components 0.244.0 → 0.246.0

package/dist/cjs/swirl-select.cjs.entry.js

@@ -130,11 +130,11 @@ const SwirlSelect = class {
             "select--multi": this.multiSelect,
             "select--search-loading": this.searchLoading,
         });
-        return (index.h(index.Host, { key: '28192864fedd0105ed4ea22af7d8fbbfe604a8fe', onKeyDown: this.onKeyDown }, index.h("div", { key: '43cdcd3254d65298f569536491038178fa61491f', class: className }, index.h("swirl-popover-trigger", { key: '8fb2b7eb8f2dd56677285db02a7a2dd3c57a5cdd', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.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 })), index.h("span", { key: 'd7a0f88e1805a3282e361b839bf90223ac27ac35', class: "select__multi-select-values" }, this.value
+        return (index.h(index.Host, { key: 'd1f2b212a7994e78cfc572db6aaf064f0c2ffdbe', onKeyDown: this.onKeyDown }, index.h("div", { key: 'ced428abbd2bf11cdeb5c743a022818f2cec8e8e', class: className }, index.h("swirl-popover-trigger", { key: 'b597c85728963178dcb51203a8ddf8ea21203c26', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.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 })), index.h("span", { key: '5673c42edd36551c2c12e5dfa71a477a41e24249', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (index.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 })))), index.h("span", { key: 'fe1cdf090525e7ddab3285394aebdeeb092adcc3', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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 && (index.h("div", { key: 'b4e6ca0b51cf1596c99bc57bf2b16425d676f57c', class: "select__search" }, index.h("swirl-icon-search", { key: '3ae43687b9fc7c6901b26fc53232102a2dff7237', class: "select__search-icon", size: 20 }), index.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 && (index.h("swirl-spinner", { key: '7946e18bb47243409a1de840cd6bcb9a7b89b6ee', class: "select__search-spinner", size: "s" })))), index.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 && (index.h("div", { key: '20b3fe135aea4e2a03ae909cc6aa959db7d8e4aa', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '3a0832e03f0a22315c34eaf9d85e5be49e29deee', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: 'e253638007617f119b4ec24c869c747af87ac1ba', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { key: 'e11845859b8286dfede6d0426c58b7d9b156804d', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.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 && (index.h("div", { key: '34ddc62a2a188846a523bad838415850db753b8c', class: "select__search" }, index.h("swirl-icon-search", { key: 'c6ec263b0cbcda1739203e055040df06376d3b3a', class: "select__search-icon", size: 20 }), index.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 && (index.h("swirl-spinner", { key: '7984384d33a7f292dfd46937ed9ff2d27a4df88f', class: "select__search-spinner", size: "s" })))), index.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 && (index.h("div", { key: '52b75473e55c8bcfe13adfb7c278e01b8913ccee', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: 'bfbc223b858e7bed52f44c580028f611726f1f1a', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: 'b633a8b55413c932e168c917fb7718a7d31abf7d', onSlotchange: this.onSlotChange }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-shell-layout.cjs.entry.js

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

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2ab5d772.js');
 const index$1 = require('./index-9f94303c.js');
 
-const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 1.5rem;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    flex-direction: column;\n    container-type: unset;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      text-align: start;\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
+const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  --swirl-app-icon-size: 1.5rem;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n    --swirl-app-icon-size: 2rem;\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      overflow: hidden;\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      background-color: var(--s-background-default);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n    --swirl-app-icon-size: 100%;\n\n    height: auto;\n    padding: 0;\n    align-items: start;\n    flex-direction: column;\n    container-type: unset;\n    gap: var(--s-space-8);\n  }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n      background-color: transparent;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n        text-decoration: underline;\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n      position: absolute;\n      left: var(--s-space-12);\n      top: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n      position: inherit;\n      width: 100%;\n      height: 100%;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n      overflow: hidden;\n      width: 100%;\n      min-width: 100%;\n      height: auto;\n      min-height: auto;\n      border-radius: var(--s-border-radius-base);\n      background-color: var(--s-surface-sunken-hovered);\n      aspect-ratio: 1;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n          content: \"\";\n          position: absolute;\n          width: 100%;\n          aspect-ratio: 1;\n          display: inline-block;\n          border-radius: var(--s-border-radius-base);\n          background-image: linear-gradient(\n            rgba(0, 0, 0, 0),\n            rgba(0, 0, 0, 0.8)\n          );\n        }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n      position: absolute;\n      top: -0.375rem;\n      right: -0.375rem;\n      padding: var(--s-space-2);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n      display: -webkit-box;\n      overflow: hidden;\n      text-align: start;\n      font-weight: var(--s-font-weight-semibold);\n      white-space: normal;\n      text-overflow: unset;\n      overflow-wrap: anywhere;\n      color: var(--s-text-default);\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n      position: absolute;\n      bottom: var(--s-space-12);\n      left: var(--s-space-12);\n      margin-right: var(--s-space-12);\n    }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n        color: rgba(242, 242, 242, 1);\n      }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n        color: rgb(25, 25, 25);\n      }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n      color: var(--s-icon-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n      color: var(--s-text-highlight);\n    }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  width: 2rem;\n  min-width: 2rem;\n  height: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
 const SwirlShellNavigationItemStyle0 = swirlShellNavigationItemCss;
 
 const SwirlShellNavigationItem = class {
@@ -14,21 +14,30 @@ const SwirlShellNavigationItem = class {
         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 = index$1.classnames("shell-navigation-item", {
+        const tagClassNames = index$1.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 = index$1.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 (index.h(index.Host, { key: '8f668fc263920a3544a848f3e1dae9bd975b622f' }, index.h("swirl-tooltip", { key: '159b4df0d0debb01c2cef0c1c29304dab8dc0496', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, index.h(Tag, { key: '1c357bba117c9dfaf8ff2cdb30c1e574ec0d36aa', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { key: '45a09de3187850380499dc2e0048a4fbd4e756ca', class: "shell-navigation-item__icon" }, index.h("slot", { key: '997e25fffc95f760c88d4eead87a78226cfd7bc2', name: "icon" })), !this.hideLabel ? (index.h("span", { class: "shell-navigation-item__label" }, this.label)) : (index.h("swirl-visually-hidden", null, index.h("span", { class: "shell-navigation-item__label" }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { key: '8d5a0bbe07d162f9d8d637f0291bafd074d9fe92', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
+        return (index.h(index.Host, { key: 'ac27ba222fb6d1037eafe559f0a0ce62b00fefcd' }, index.h("swirl-tooltip", { key: 'c69e9255e6a0a8ac24ff5c7b9084f8b0549ed0db', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, index.h(Tag, { key: 'b9c162718cc86f8f1dc3659852e740d21b23f18c', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, index.h("span", { key: 'cd81b747a5361b712d0928e797b01d45c6198db8', class: "shell-navigation-item__icon" }, index.h("slot", { key: 'b2123d0a0f7ab375f4b17382080c86d9943e0edf', name: "icon" })), !this.hideLabel ? (index.h("span", { class: labelClassNames }, this.label)) : (index.h("swirl-visually-hidden", null, index.h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (index.h("swirl-badge", { key: 'b90e6f6f5cdcb4e08588417bce12369bc643622f', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
             }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))))));
     }

package/dist/cjs/swirl-skeleton-box.cjs.entry.js

@@ -19,11 +19,11 @@ const SwirlSkeletonBox = class {
     }
     render() {
         const className = index$1.classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (index.h(index.Host, { key: 'a137dd7915355522f1b0adeeac17876539dc01e2', style: {
+        return (index.h(index.Host, { key: 'eaa1f0b78ba2e09368a0c31937a1776c60a38bd4', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, index.h("div", { key: '0407a7fc26328b29d812af1e2c875c06f2149f7a', class: className, style: {
+            } }, index.h("div", { key: '4192011e2f868cdd0a8107d7073afbd082b75029', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill"
                     ? `var(--s-border-radius-${this.borderRadius})`

package/dist/cjs/swirl-skeleton-text.cjs.entry.js

@@ -18,7 +18,7 @@ const SwirlSkeletonText = class {
     render() {
         const className = index$1.classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = index$1.classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (index.h(index.Host, { key: '91edd9f485d311dde6fa5e915ae1bf51cdc20455' }, index.h("div", { key: '808ee50b0708b690fa7a78f8dfdbcc402dd38546', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
+        return (index.h(index.Host, { key: 'ff8a083caea381a90aacf3e66e4afef2ff42d6f2' }, index.h("div", { key: '3b14bc4ba15c04eff3dcd07422f3f2257ef3d51f', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
     }
 };
 SwirlSkeletonText.style = SwirlSkeletonTextStyle0;

package/dist/cjs/swirl-status-indicator.cjs.entry.js

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

package/dist/cjs/swirl-switch.cjs.entry.js

@@ -40,7 +40,7 @@ const SwirlSwitch = class {
             "switch--on": on,
             "switch--disabled": this.disabled,
         });
-        return (index.h(index.Host, { key: 'cedaf29a2ee5fedd89cdbb39553d18ceb37a5b9a' }, index.h("label", { key: 'cd2f6bd0936dc8e8b127448eb548d30a319a701b', class: className, htmlFor: this.inputId }, index.h("span", { key: '7e8852b9aea9b8f996d6c7aec68a16de0f1a3958', class: "switch__control" }, index.h("swirl-visually-hidden", { key: '3cd9e0142925081c65bd0ec79eefff19c7933dfa' }, index.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 })), index.h("span", { key: 'b60201088276b8e78f8e991e6b2c765aa244d8af', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (index.h("span", { key: '3900528e738efc67f01708de2ba196ead158ebdb', class: "switch__label" }, this.label)), this.label && this.hideLabel && (index.h("swirl-visually-hidden", { key: 'aa6e24674b9d44b7bbbd3b8f9a31687fafcc3258' }, this.label)))));
+        return (index.h(index.Host, { key: '24aaff17051b26a91587032d203271dd3c182cbd' }, index.h("label", { key: '91d3bb3c765f727672cd9fed68a942f4436804d7', class: className, htmlFor: this.inputId }, index.h("span", { key: 'e29bbb56bfccdeb7ce77b2cac0a809278820939c', class: "switch__control" }, index.h("swirl-visually-hidden", { key: 'd3ad3f6a3907705eb4e9eb09db18bb91460acfb2' }, index.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 })), index.h("span", { key: 'eda4640707c4ce7aaeb7cea03771169266a37cce', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (index.h("span", { key: 'a0133580f3d8ae8682a231529a2a61b6d4a004ad', class: "switch__label" }, this.label)), this.label && this.hideLabel && (index.h("swirl-visually-hidden", { key: '210938320c9393f0fe4699f1568db1f1c88ab99e' }, this.label)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tab-bar.cjs.entry.js

@@ -41,7 +41,7 @@ const SwirlTabBar = class {
                 ? `var(--s-space-${this.paddingInlineStart})`
                 : undefined,
         };
-        return (index.h(index.Host, { key: '218c8b7e11e02ca36179d5f75b992460bfbea2b0' }, index.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 (index.h(index.Host, { key: 'ea93aa68f44536d6bd3b6a6d12b88b87c83777de' }, index.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 = index$1.classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
             });

package/dist/cjs/swirl-tab.cjs.entry.js

@@ -19,7 +19,7 @@ const SwirlTab = class {
     }
     render() {
         const className = index$1.classnames("tab", { "tab--active": this.active });
-        return (index.h(index.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})` } }, index.h("slot", { key: '5e5646dcdc6bbb14b2fa9608282c97f2dfc10a08' })));
+        return (index.h(index.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})` } }, index.h("slot", { key: 'f415125e7a606532211261bff117a16b8c91b3f8' })));
     }
 };
 SwirlTab.style = SwirlTabStyle0;

package/dist/cjs/swirl-table-column.cjs.entry.js

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

package/dist/cjs/swirl-text.cjs.entry.js

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

package/dist/cjs/swirl-toast-provider.cjs.entry.js

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

package/dist/cjs/swirl-toast.cjs.entry.js

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

package/dist/cjs/swirl-toolbar.cjs.entry.js

@@ -75,7 +75,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'b99b48ca99a102b317587c27deabd8fcd2ef4862' }, index.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 }, index.h("slot", { key: '468bbff3894acf369feda7a56db6b432445e71f6' }))));
+        return (index.h(index.Host, { key: '6f5c646bd9899b76f7c3ed04fa79f0a0261e1605' }, index.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 }, index.h("slot", { key: '4b952d57c53c5ba8c1b4c453dddaa6cc902c97f1' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tooltip.cjs.entry.js

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