@getflip/swirl-components-react 0.401.0 → 0.402.0

package/dist/swirl-shell-layout.entry.38a802bb.js

@@ -0,0 +1,117 @@
+import { r as d, c, h as e, H as h, g as y } from "./index.fb229cb6.js";
+import { c as u } from "./index-orsBiyT_.fc4357c3.js";
+import { c as v } from "./focus-trap.esm-DIdMBZfn.c41dd5d8.js";
+import { m as s } from "./utils-wi_3Z3FQ.29a3aebe.js";
+import "react";
+import "react-dom";
+const b = `.sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:"nav main"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:"header header header"
+      "nav main sidebar"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}`, o = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE", t = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE", i = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE", p = class {
+  constructor(l) {
+    d(this, l), this.skipLinkClick = c(this, "skipLinkClick", 7), this.browserBackButtonLabel = "Navigate back", this.browserForwardButtonLabel = "Navigate forward", this.collapseNavigationButtonLabel = "Collapse navigation", this.enableSecondaryNavGridLayout = !0, this.secondaryNavGridLayoutVariant = "tiled", this.expandNavigationButtonLabel = "Expand navigation", this.gridNavLayoutToggleLabel = "Grid", this.hideMobileNavigationButtonLabel = "Close navigation", this.listNavLayoutToggleLabel = "List", this.navigationLabel = "Main", this.secondaryNavCollapseLabel = "Show less", this.secondaryNavExpandLabel = "Show more", this.skipLinkLabel = "Skip to main content", this.isDesktopViewport = !0, this.secondaryNavView = "list", this.collectNavItems = () => {
+      this.mainNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item")), this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item")), this.toggleNavItemLabels(), this.setSecondaryNavItemsTiled();
+    }, this.toggleSecondaryNavView = (a) => {
+      a.stopPropagation(), this.secondaryNavView === "grid" ? this.secondaryNavView = "list" : this.secondaryNavView = "grid", this.setSecondaryNavItemsTiled(), localStorage.setItem(t, String(this.secondaryNavView));
+    }, this.toggleSecondaryNavCollapse = (a) => {
+      a.stopPropagation(), this.secondaryNavCollapsed = !this.secondaryNavCollapsed, localStorage.setItem(o, String(this.secondaryNavCollapsed));
+    }, this.onNavigationToggleClick = () => {
+      this.navigationCollapsed = !this.navigationCollapsed;
+    }, this.onNavigationClick = () => {
+      this.hideMobileNavigation();
+    };
+  }
+  componentWillLoad() {
+    this.isDesktopViewport = s(), this.collectNavItems();
+    const l = localStorage.getItem(i) === "true";
+    this.navigationCollapsed = l, this.restoreSecondaryNavState();
+  }
+  componentDidLoad() {
+    this.focusTrap = v(this.navElement, {
+      allowOutsideClick: !0,
+      tabbableOptions: {
+        getShadowRoot: (l) => l.shadowRoot
+      }
+    }), this.collectNavItems(), this.navMutationObserver = new MutationObserver(() => {
+      this.collectNavItems();
+    }), this.navMutationObserver.observe(this.navElement, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  componentDidRender() {
+    var l;
+    (l = this.focusTrap) == null || l.updateContainerElements(this.navElement);
+  }
+  disconnectedCallback() {
+    var l, a;
+    (l = this.focusTrap) == null || l.deactivate(), (a = this.navMutationObserver) == null || a.disconnect();
+  }
+  onWindowKeyDown(l) {
+    l.key === "Escape" && this.mobileNavigationActive && this.hideMobileNavigation();
+  }
+  watchEnableSecondaryNavGridLayout() {
+    this.restoreSecondaryNavState();
+  }
+  watchMobileNavigationState() {
+    this.mobileNavigationActive ? setTimeout(() => {
+      this.focusTrap.activate();
+    }, 200) : this.focusTrap.deactivate();
+  }
+  watchNavigationCollapsed() {
+    localStorage.setItem(i, String(this.navigationCollapsed)), this.toggleNavItemLabels(), this.setSecondaryNavItemsTiled();
+  }
+  onWindowResize() {
+    this.isDesktopViewport !== s() && (this.isDesktopViewport = s(), this.collectNavItems());
+  }
+  async showMobileNavigation() {
+    this.mobileNavigationActive = !0, this.collectNavItems();
+  }
+  async hideMobileNavigation() {
+    this.mobileNavigationActive = !1, this.toggleNavItemLabels();
+  }
+  toggleNavItemLabels() {
+    [...this.secondaryNavItems, ...this.mainNavItems].forEach((l) => {
+      l.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
+    });
+  }
+  setSecondaryNavItemsTiled() {
+    this.secondaryNavItems.forEach((l) => {
+      l.variant = this.enableSecondaryNavGridLayout && (this.secondaryNavView === "grid" || this.navigationCollapsed && this.isDesktopViewport) ? this.secondaryNavGridLayoutVariant : "default";
+    });
+  }
+  restoreSecondaryNavState() {
+    if (this.enableSecondaryNavGridLayout) {
+      const l = localStorage.getItem(o) === "true";
+      this.secondaryNavCollapsed = l;
+      const a = localStorage.getItem(t);
+      this.secondaryNavView = a;
+    }
+  }
+  render() {
+    const l = this.navigationCollapsed && this.isDesktopViewport, a = Boolean(this.el.querySelector("[slot='secondary-nav']")), r = u("shell-layout", {
+      "shell-layout--branded-header": this.brandedHeader,
+      "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
+      "shell-layout--has-secondary-nav": a,
+      "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
+      "shell-layout--navigation-collapsed": l
+    });
+    return e(h, { key: "ac0578479f30601b4688d075825dd8ced90b1db9" }, e("div", { key: "ab0d178f91b637ee206dba90513e272342ee0a1d", class: r }, e("header", { key: "dafaff26074b663a0deb51852b770527e0658db1", class: "shell-layout__header", "data-tauri-drag-region": "true" }, e("button", { key: "8a0279d36c6d7ceee1106e78ab86b9aadbd0a1d2", class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), e("div", { key: "006dd289f6d498e8c71b2e4e7710e4f4b5b4041f", class: "shell-layout__header-left" }, e("swirl-tooltip", { key: "26f1372a20ea2f9478a178eb3ae879d410bf579c", content: this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, e("button", { key: "2fec7ce6950380825e56032cff633bd062b60fad", class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? e("swirl-icon-dock-left-expand", { size: 20 }) : e("swirl-icon-dock-left-collapse", { size: 20 }), e("swirl-visually-hidden", { key: "32918f06901b10833bd0714d9df4ad11f85e674f" }, this.navigationCollapsed ? this.expandNavigationButtonLabel : this.collapseNavigationButtonLabel))), e("a", { key: "82634878be0c0cc9223fb3b94cbc25bf63adf005", class: "shell-layout__header-tool", href: "javascript:history.back()" }, e("swirl-icon-arrow-back", { key: "76e10e8a85d9c133a6c418e16e2aae46d6d735d9", size: 20 }), e("swirl-visually-hidden", { key: "9456a122d1264fa793548957eaace4d2b159fff2" }, this.browserBackButtonLabel)), e("a", { key: "80f911686ced6bd0335899a39868795e03c3908c", class: "shell-layout__header-tool", href: "javascript:history.forward()" }, e("swirl-icon-arrow-forward", { key: "a11e0d5f22e9015185047d4bd3bd1d6d1bcb0b46", size: 20 }), e("swirl-visually-hidden", { key: "be0558e4d6138576139296953f329f095fcec031" }, this.browserForwardButtonLabel)), e("slot", { key: "452127f3d2a0d91c58c2b9396be90dff9e8b2522", name: "left-header-tools" })), e("div", { key: "7b837e13bca9e7efe2af2673e569d5347bfe809d", class: "shell-layout__logo" }, e("slot", { key: "8782475ecf38ec1cbff3c4c62546b2f31ce4c429", name: "logo" })), e("div", { key: "7078a0d447369173495eae8aea9b2bcaed4d380a", class: "shell-layout__header-right" }, e("slot", { key: "4de25df2ffceda31c0ea36373dd816e3ec6956d5", name: "right-header-tools" }), e("slot", { key: "82c2cc3b4e5791d6ddabaa59c8a1e3c88b6032b9", name: "avatar" }))), e("div", { key: "99c7a6e5062767eeae9bca0a76b9dbb93673182f", class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), e("nav", { key: "4b26bd504364711d75421041e1fd7a4416cb83ed", "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (n) => this.navElement = n }, e("div", { key: "104f827b6569c1a7831716e2e65499f6aab17243", class: "shell-layout__mobile-header" }, e("slot", { key: "f4100ec98a0bc08032000ea3d6cbd9c000c898e8", name: "mobile-logo" }), e("div", { key: "63acb9e4b06d42dd0902f38f22e06467a5e17d5c", class: "shell-layout__mobile-header-tools" }, e("slot", { key: "700de4947f2db176bd6ae6fb5bce2379a9eb5741", name: "mobile-header-tools" }), e("button", { key: "7934d57b6874b25e366bb8b5abe3a83cb377f175", class: "shell-layout__header-tool", type: "button" }, e("swirl-icon-double-arrow-left", { key: "8428aabadd299408985a155a2a910d4c15c4e300", size: 20 }), e("swirl-visually-hidden", { key: "433ec6a7dc91436839ab566bb0c95345cbc8a276" }, this.hideMobileNavigationButtonLabel)))), e("div", { key: "d55acd62b1eb74c0d247c039cea246ee993c9d07", class: "shell-layout__nav-body" }, e("swirl-visually-hidden", { key: "0130fcc3e3bca07c9a3ed1a16bdb0a1638a1cb60" }, e("span", { key: "e6e41496731456b66eedd8150c44393d4f88c6ad", id: "main-navigation-label" }, this.navigationLabel)), e("slot", { key: "eb753f9fe3c8c36a00824e86f148ddf1a0881525", name: "nav", onSlotchange: this.collectNavItems }), e("div", { key: "9b6f92d616f09c385bce52e198f9a247156adcb6", class: "shell-layout__secondary-nav" }, e("swirl-separator", { key: "7cb6852515a15b58f83510e18373668153a72c46", color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && e("swirl-box", { key: "c7106cedee7f295b67d857b4d3189b7224af9e27", paddingBlockEnd: "16" }, e("swirl-stack", { key: "9f99eaeb8db2bea6ad41eabcee49cee8ff4833ec", justify: l ? "center" : "space-between", orientation: "horizontal" }, e("swirl-button", { key: "f37a504b3489f29c671ac7cb3e1282238533ba89", hideLabel: l, 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" }), !l && !this.secondaryNavCollapsed && e("swirl-button", { key: "3cbbbf36a145b829d569741cb111c17d091ec59b", 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" }))), e("div", { key: "2faa5b97f118fd0256f7495bcfb4e9112e624413", class: {
+      [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: !0,
+      "shell-layout__secondary-nav-items": !0,
+      "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid"
+    } }, e("slot", { key: "065e4ad317213553492f510d3188273713ea1268", name: "secondary-nav", onSlotchange: this.collectNavItems }))))), e("main", { key: "5426b223b821da51b47cd24a046578b51d5b649b", class: "shell-layout__main", id: "main-content" }, e("slot", { key: "a035652618a59e03f9f59904f06574c34dc9b473" }))));
+  }
+  get el() {
+    return y(this);
+  }
+  static get watchers() {
+    return {
+      enableSecondaryNavGridLayout: ["watchEnableSecondaryNavGridLayout"],
+      mobileNavigationActive: ["watchMobileNavigationState"],
+      navigationCollapsed: ["watchNavigationCollapsed"]
+    };
+  }
+};
+p.style = b;
+export {
+  p as swirl_shell_layout
+};

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

@@ -0,0 +1,401 @@
+import { r as d, h as n, H as v, g as m } from "./index.fb229cb6.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const c = `/**
+* seems the container query does not work as expected
+*/
+
+:host {
+  display: inline-flex;
+  width: 100%;
+}
+
+:host * {
+    box-sizing: border-box;
+  }
+
+.shell-navigation-item {
+  --swirl-app-icon-size: 2rem;
+  --swirl-shell-navigation-item-gradient: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8)
+  );
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 3rem;
+  padding: var(--s-space-8);
+  flex-shrink: 0;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-default);
+  background-color: var(--s-surface-overlay-default);
+  font: inherit;
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+  text-decoration: none;
+  cursor: pointer;
+  container-type: size;
+  gap: var(--s-space-12);
+}
+
+.shell-navigation-item:hover {
+    background-color: var(--s-surface-sunken-hovered);
+  }
+
+.shell-navigation-item:hover .shell-navigation-item__badge,
+    .shell-navigation-item:hover .shell-navigation-item__is-new-badge {
+      --swirl-badge-border-color: var(--s-surface-sunken-hovered);
+    }
+
+.shell-navigation-item:active {
+    background-color: var(--s-surface-sunken-pressed);
+  }
+
+.shell-navigation-item:active .shell-navigation-item__badge,
+    .shell-navigation-item:active .shell-navigation-item__is-new-badge {
+      --swirl-badge-border-color: var(--s-surface-sunken-pressed);
+    }
+
+.shell-navigation-item:focus {
+    outline: none;
+  }
+
+.shell-navigation-item:focus-visible {
+    z-index: 1;
+    box-shadow: 0 0 0 0.125rem var(--s-focus-default);
+  }
+
+.shell-navigation-item.shell-navigation-item--boxed {
+    --swirl-app-icon-size: 2rem;
+  }
+
+.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {
+      overflow: hidden;
+      border-radius: var(--s-border-radius-sm);
+      background-color: var(--s-background-default);
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);
+    }
+
+.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {
+        border-radius: var(--s-border-radius-sm);
+        width: 2rem;
+        min-width: 2rem;
+        height: 2rem;
+        min-height: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--filled {
+    padding: var(--s-space-8);
+  }
+
+.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {
+        color: var(--s-icon-on-action-primary);
+        background-color: var(--s-action-primary-default);
+      }
+
+.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {
+      position: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled {
+    --swirl-app-icon-size: 100%;
+
+    height: auto;
+    padding: 0;
+    align-items: start;
+    border-radius: var(--s-border-radius-base);
+    flex-direction: column;
+    container-type: inline-size;
+    gap: var(--s-space-8);
+  }
+
+.shell-navigation-item.shell-navigation-item--tiled:hover {
+      background-color: transparent;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {
+        text-decoration: underline;
+      }
+
+.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {
+      position: absolute;
+      top: var(--s-space-12);
+      left: var(--s-space-12);
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {
+      position: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {
+      overflow: hidden;
+      width: 100%;
+      min-width: 100%;
+      height: auto;
+      min-height: auto;
+      border-radius: var(--s-border-radius-base);
+      background-color: var(--s-surface-sunken-hovered);
+      aspect-ratio: 1;
+    }
+
+.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {
+          position: absolute;
+          display: inline-block;
+          width: 100%;
+          border-radius: var(--s-border-radius-base);
+          background-image: var(--swirl-shell-navigation-item-gradient);
+          content: "";
+          aspect-ratio: 1;
+        }
+
+.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
+      color: var(--s-text-default);
+      font-weight: var(--s-font-weight-semibold);
+      text-align: start;
+    }
+
+.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--app-icon {
+    --swirl-app-icon-size: 100%;
+    font-size: var(--s-font-size-xs);
+    padding: var(--s-space-8) var(--s-space-4);
+    align-items: center;
+    height: auto;
+    border-radius: var(--s-border-radius-sm);
+    flex-direction: column;
+    container-type: inline-size;
+    gap: var(--s-space-8);
+  }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {
+      align-items: start;
+      padding: var(--s-space-8);
+      --swirl-app-icon-size: 2rem;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {
+        border-radius: var(--s-border-radius-sm);
+        max-width: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {
+        max-width: 2rem;
+        max-height: 2rem;
+      }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {
+      overflow: hidden;
+      width: 100%;
+      max-width: 3.5rem;
+      height: auto;
+      border-radius: var(--s-border-radius-base);
+
+      color: var(--s-icon-on-action-primary);
+      aspect-ratio: 1;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {
+      max-width: 3.5rem;
+      max-height: 3.5rem;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {
+      line-height: var(--s-line-height-xs);
+      text-align: center;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
+      display: -webkit-box;
+      overflow: hidden;
+      white-space: normal;
+      text-overflow: unset;
+      overflow-wrap: anywhere;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
+      position: absolute;
+      top: -0.375rem;
+      right: -0.375rem;
+      padding: var(--s-space-2);
+    }
+
+.shell-navigation-item.shell-navigation-item--active {
+    background-color: var(--s-surface-sunken-hovered);
+  }
+
+.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {
+      color: var(--s-icon-highlight);
+    }
+
+.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {
+      color: var(--s-text-highlight);
+    }
+
+.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {
+      --swirl-badge-border-color: var(--s-surface-sunken-hovered);
+    }
+
+.shell-navigation-item.shell-navigation-item--active:hover {
+    background-color: var(--s-surface-sunken-hovered);
+  }
+
+.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {
+      --swirl-badge-border-color: var(--s-surface-sunken-hovered);
+    }
+
+.shell-navigation-item.shell-navigation-item--active:active {
+    background-color: var(--s-surface-sunken-pressed);
+  }
+
+.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {
+      --swirl-badge-border-color: var(--s-surface-sunken-pressed);
+    }
+
+@media (min-width: 992px) {
+
+.shell-navigation-item {
+    background-color: var(--s-surface-sunken-default)
+}
+  }
+
+.shell-navigation-item__icon {
+  display: inline-flex;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: var(--s-border-radius-base);
+}
+
+.shell-navigation-item__text-wrapper {
+  overflow: hidden;
+  min-width: 0;
+  flex-grow: 1;
+  text-align: start;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.shell-navigation-item__description {
+  margin-left: var(--s-space-8);
+  font-weight: var(--s-font-weight-normal);
+  color: var(--s-text-subdued);
+}
+
+.shell-navigation-item__badge {
+  flex-shrink: 0;
+  --swirl-badge-border-color: var(--swirl-shell-background);
+}
+
+.shell-navigation-item__is-new-tag {
+  flex-shrink: 0;
+}
+
+.shell-navigation-item__is-new-badge {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+  flex-shrink: 0;
+  --swirl-badge-border-color: var(--swirl-shell-background);
+}
+
+@container (max-width: 4rem) {
+  .shell-navigation-item__badge {
+    position: absolute;
+    top: var(--s-space-4);
+    right: var(--s-space-4);
+    padding: var(--s-space-2);
+  }
+
+  .shell-navigation-item--gradient .shell-navigation-item__icon {
+    --swirl-shell-navigation-item-gradient: none;
+  }
+
+  .shell-navigation-item__badge--dot {
+    top: var(--s-space-8);
+    right: var(--s-space-8);
+  }
+}
+
+@container (min-width: 10rem) {
+  .shell-navigation-item__badge--dot {
+    padding-right: var(--s-space-4);
+  }
+}
+`, b = class {
+  constructor(i) {
+    d(this, i), this.hideLabel = !1, this.inlineLabelColor = "default", this.markAsNewLabel = "New", this.useCustomIconSize = !1, this.variant = "default";
+  }
+  componentWillLoad() {
+    this.forceIconProps();
+  }
+  componentDidRender() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (this.useCustomIconSize)
+      return;
+    const i = this.el.querySelector("[slot='icon']"), e = this.hideLabel && this.variant === "app-icon" || this.variant === "default";
+    i && (i.tagName.startsWith("SWIRL-ICON") || i.tagName.startsWith("SWIRL-EMOJI") || i.tagName.startsWith("SWIRL-SYMBOL")) && i.setAttribute("size", e ? "20" : "32");
+  }
+  render() {
+    const i = Boolean(this.el.querySelector("swirl-app-icon")), e = l("shell-navigation-item", `shell-navigation-item--${this.variant}`, {
+      "shell-navigation-item--active": this.active,
+      "shell-navigation-item--boxed": this.boxed,
+      "shell-navigation-item--filled": this.filled,
+      "shell-navigation-item--inline-label": this.inlineLabel,
+      "shell-navigation-item--gradient": this.withGradient,
+      "shell-navigation-item--hide-label": this.hideLabel,
+      "shell-navigation-item--has-app-icon": i
+    }), a = l("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
+    }), t = this.badgeLabel !== void 0 && this.badgeLabel !== null, o = !t && this.markAsNew && !this.hideLabel && this.variant === "default", r = !t && this.markAsNew && this.hideLabel && this.variant === "default", s = Boolean(this.href), h = s ? "a" : "button", g = this.description ? `${this.label} ${this.description}` : this.label;
+    return n(v, { key: "5f8337a6e328f4b70794c5df34bea4ce004cdbfc" }, n("swirl-tooltip", { key: "de803be5c5e466daed55cf67c6127f897425e10d", active: this.hideLabel, content: g, delay: 100, position: "right", positioning: "fixed" }, n(h, { key: "56b42a124385745a2048c1fac11abd75c5f5ea47", class: e, href: this.href, target: this.target, type: s ? void 0 : "button", title: this.hideLabel ? void 0 : this.label }, n("span", { key: "fe342b65d7beef54084c3fecd2f448bf2cf8e5c8", class: "shell-navigation-item__icon" }, n("slot", { key: "9c1b2a2476fc0235e3241ed57b458a97809ad50a", name: "icon" })), this.hideLabel ? n("swirl-visually-hidden", null, n("span", { class: a }, this.label)) : this.variant !== "default" ? n("span", { class: a }, this.label) : n("div", { class: "shell-navigation-item__text-wrapper" }, n("span", { class: a }, this.label), this.description && n("span", { class: "shell-navigation-item__description" }, this.description)), t && n("span", { key: "89bb559959dae885912f6af1311c22755cd14af2", class: "shell-navigation-item__badge-wrapper" }, n("swirl-badge", { key: "b9015202651b5c205849113fcc0e8ce783d18412", "aria-label": this.badgeLabel, class: l("shell-navigation-item__badge", {
+      "shell-navigation-item__badge--dot": this.badgeLabel === ""
+    }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })), o && n("swirl-tag", { key: "9e05640b202bd785e50ae6741804b64c3e1e276a", class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" }), r && n("swirl-badge", { key: "30aa107e83bc07394bd7de154109097d0ccf51c4", class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))));
+  }
+  get el() {
+    return m(this);
+  }
+};
+b.style = c;
+export {
+  b as swirl_shell_navigation_item
+};

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

@@ -0,0 +1,31 @@
+import { r as o, h as s, H as r } from "./index.fb229cb6.js";
+import { c as t } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const i = `:host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0) 12%,
+      var(--s-surface-raised-default) 50%,
+      rgba(255, 255, 255, 0) 88%,
+      rgba(255, 255, 255, 0) 100%
+    );content:"";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}`, a = class {
+  constructor(e) {
+    o(this, e), this.animated = !0, this.borderRadius = "base";
+  }
+  render() {
+    const e = t("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+    return s(r, { key: "bb34fc3713e671110d805817d3d0172e3d6c5c99", style: {
+      width: !Boolean(this.width) && !Boolean(this.aspectRatio) ? "100%" : void 0
+    } }, s("div", { key: "900721eb305211d13df2f1fda067cedd3b5a71b0", class: e, style: {
+      aspectRatio: this.aspectRatio,
+      borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none" ? `var(--s-border-radius-${this.borderRadius})` : void 0,
+      height: this.height,
+      width: this.width
+    } }));
+  }
+};
+a.style = i;
+export {
+  a as swirl_skeleton_box
+};

package/dist/swirl-skeleton-text.entry.88bcbaa0.js

@@ -0,0 +1,38 @@
+import { r as l, h as t, H as a } from "./index.fb229cb6.js";
+import { c as s } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const o = `:host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(
+    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2
+  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(
+      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2
+    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(
+    (var(--s-line-height-base) - var(--s-font-size-base)) / 2
+  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(
+      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2
+    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(
+    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2
+  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(
+      (var(--s-line-height-base) - var(--s-font-size-base)) / 2
+    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(
+    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2
+  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(
+    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2
+  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:""}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      var(--s-surface-raised-default) 33%,
+      rgba(255, 255, 255, 0) 66%
+    );content:"";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}`, r = class {
+  constructor(e) {
+    l(this, e), this.animated = !0, this.lines = 1, this.size = "base";
+  }
+  render() {
+    const e = s("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated }), i = s("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
+    return t(a, { key: "15af8647515182ea368d068bb7f0cf655aed132a" }, t("div", { key: "1395f293e7bfb5b49c3165e1548d7309f28f26fb", class: e, part: e }, new Array(this.lines).fill(void 0).map((d, n) => t("div", { class: i, key: n, part: i }))));
+  }
+};
+r.style = o;
+export {
+  r as swirl_skeleton_text
+};

package/dist/swirl-stack.entry.9289e45e.js

@@ -0,0 +1,21 @@
+import { r as i, h as s, H as c } from "./index.fb229cb6.js";
+import { c as n } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const r = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-vertical-reverse{flex-direction:column-reverse}.stack--orientation-horizontal{flex-direction:row}.stack--orientation-horizontal-reverse{flex-direction:row-reverse}.stack--wrap{flex-wrap:wrap}", o = class {
+  constructor(t) {
+    i(this, t), this.align = "start", this.as = "div", this.justify = "start", this.orientation = "vertical", this.spacing = "0", this.wrap = !1;
+  }
+  render() {
+    const t = this.as, e = {
+      columnGap: `var(--s-space-${this.columnSpacing || this.spacing})`,
+      rowGap: `var(--s-space-${this.rowSpacing || this.spacing})`,
+      height: this.height
+    }, a = n("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
+    return s(c, { key: "9361133b37cb5c677dbf6dd49a39eec30c762e7a", style: { height: this.height } }, s(t, { key: "0fa5eaca5ac99e482f50793f170e6349e1854846", class: a, role: this.swirlAriaRole, style: e }, s("slot", { key: "66e0cc4865421fbad50be48718d045a742fecedf" })));
+  }
+};
+o.style = r;
+export {
+  o as swirl_stack
+};

package/dist/swirl-status-indicator.entry.703acecf.js

@@ -0,0 +1,17 @@
+import { r as i, h as t, H as a } from "./index.fb229cb6.js";
+import { c as e } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const o = ':host{display:block}:host *{box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:var(--s-space-4)}.status-indicator--intent-critical .status-indicator__dot:before{background-color:var(--s-icon-critical)}.status-indicator--intent-info .status-indicator__dot:before{background-color:var(--s-icon-info)}.status-indicator--intent-success .status-indicator__dot:before{background-color:var(--s-icon-success)}.status-indicator--intent-warning .status-indicator__dot:before{background-color:var(--s-icon-warning)}.status-indicator__dot{display:inline-flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center}.status-indicator__dot:before{display:inline-flex;width:0.5rem;height:0.5rem;border-radius:50%;content:""}.status-indicator__label{overflow:hidden;min-width:0;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis}', r = class {
+  constructor(s) {
+    i(this, s);
+  }
+  render() {
+    const s = e("status-indicator", `status-indicator--intent-${this.intent}`);
+    return t(a, { key: "6f12aba79d45fda09d51ff87b5c2ed75bcf6bd92" }, t("div", { key: "9b6871b52ccb46dbee1de179d613acda8ed7f785", class: s }, t("span", { key: "a8f389aabfca9e54fa8ddb4fa227433d6c6009db", class: "status-indicator__dot" }), t("span", { key: "16ce45812c9d173aec95eb7362f62d325d6e7168", class: "status-indicator__label" }, this.label)));
+  }
+};
+r.style = o;
+export {
+  r as swirl_status_indicator
+};