@getflip/swirl-components-react 0.368.1 → 0.370.0

package/dist/{swirl-table-cell.entry.8dd11352.js → swirl-table-cell.entry.7f431dfd.js}

@@ -1,12 +1,12 @@
-import { r as t, h as s, H as a } from "./index.17725a49.js";
+import { r as a, h as s, H as t } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const o = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--is-sticky){position:sticky;z-index:1}:host(.table-cell--is-sticky-right){position:sticky;z-index:1;right:0;overflow:hidden}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}", l = class {
   constructor(e) {
-    t(this, e);
+    a(this, e);
   }
   render() {
-    return s(a, { key: "c35406f0779522ab04f61b9d6701607d4d09d108", class: "table-cell", role: "cell" }, s("slot", { key: "8f734106d0ced4cbbe1832b384918ac735a55919" }));
+    return s(t, { key: "caa6a0ead6554c367126f5073fc5d6f6dd7b81c5", class: "table-cell", role: "cell" }, s("slot", { key: "a6b3deb661f69bb1ab969684d4c217d76c4ae986" }));
   }
 };
 l.style = o;

package/dist/{swirl-table-column.entry.c9a83115.js → swirl-table-column.entry.6961ab1e.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as i, g as a } from "./index.17725a49.js";
+import { r as t, h as s, H as i, g as a } from "./index.027a9fcf.js";
 import { l as o } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-row-group.entry.45c6359e.js → swirl-table-row-group.entry.10d748a1.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as a, g as l } from "./index.17725a49.js";
+import { r as o, h as e, H as a, g as l } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const r = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}:host(:hover),:host(:focus-within){z-index:2}.table-row-group__header-row{position:relative;z-index:var(--s-z-10);padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);display:flex;align-items:center}.table-row-group__label{position:sticky;left:var(--s-space-16)}.table-row-group__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.table-row-group__tooltip-icon{color:var(--s-icon-default)}.table-row-group__collapse-icon{color:var(--s-icon-default);padding-right:var(--s-space-20)}.table-row-group__rows-container{overflow:visible clip;transition:height 0.3s ease-out}.table-row-group__rows-container.is-hidden{height:0}.sc-swirl-button-h{display:flex}", n = class {
@@ -20,10 +20,10 @@ const r = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:bo
   }
   render() {
     const i = this.el.querySelectorAll("swirl-table-row").length, t = this.isVisible ? "<swirl-icon-expand-less></swirl-icon-expand-less" : "<swirl-icon-expand-more></swirl-icon-expand-more";
-    return e(a, { key: "7ed817de9256030e39bfcceb210b758d9337da62", class: "table-row-group", role: "rowgroup" }, e("div", { key: "5bf82404aa5f1314cfc7a17821753c364e564410", class: "table-row-group__header-row", role: "row", ref: (s) => this.headerRowElement = s }, this.collapsible && e("swirl-button", { key: "a73f8b5ae7cbf858cb521ef592a68e45b22369fe", class: "table-row-group__collapse-icon", icon: t, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: !0 }), e("span", { key: "3ea32396dd87d7f41103faf14b551dc86c0983bc", "aria-rowspan": i, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && e("span", { key: "6aad71d6c5f10526849ab5cf0ce167f7d27cfaca", class: "table-row-group__tooltip" }, e("swirl-tooltip", { key: "814bcc0b5d1d82043bb8fac1b9010d4076f66643", content: this.tooltip, position: "top", positioning: "fixed" }, e("swirl-icon-info", { key: "0ceb6ec73f96deb08fe812255b8e6254defd0ac1", size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" }))))), e("div", { key: "195482e9aff7a998acebdafa4531e4d898ccc2ac", class: {
+    return e(a, { key: "466b29723fe0657d0224e31f41e24e40c8535051", class: "table-row-group", role: "rowgroup" }, e("div", { key: "570577ca2aabac6ec76324234e5493b3af1875f8", class: "table-row-group__header-row", role: "row", ref: (s) => this.headerRowElement = s }, this.collapsible && e("swirl-button", { key: "db19f8f13726fd1d58d7da0b6dd8e5733d090c23", class: "table-row-group__collapse-icon", icon: t, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: !0 }), e("span", { key: "eae2332e09e7e500ec47c403edaf3776faab41be", "aria-rowspan": i, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && e("span", { key: "90b75405fb2c17a3ebf6debacf26abac0d0387a1", class: "table-row-group__tooltip" }, e("swirl-tooltip", { key: "abe03bde8fa0a73b93a7fc2524b0fe574941d87c", content: this.tooltip, position: "top", positioning: "fixed" }, e("swirl-icon-info", { key: "f85a9acf6b2cef3090c31b2b5e43160713329495", size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" }))))), e("div", { key: "8e3dbaac26a1ddec5f47ba9b298127092e983f32", class: {
       "table-row-group__rows-container": !0,
       "table-row-group__rows-container--is-hidden": this.isVisible
-    }, "aria-hidden": !this.isVisible, ref: (s) => this.tableRowElements = s }, e("slot", { key: "9981a787853c9df248e4fbf07ac0920cd3196d40" })));
+    }, "aria-hidden": !this.isVisible, ref: (s) => this.tableRowElements = s }, e("slot", { key: "fc6272e8d8cb906eb3826a0719905e5ef2a7d936" })));
   }
   get el() {
     return l(this);

package/dist/{swirl-table-row.entry.e41666b1.js → swirl-table-row.entry.611124e5.js}

@@ -1,27 +1,27 @@
-import { r as o, h as e, H as r, g as s } from "./index.17725a49.js";
-import { c as a } from "./index-orsBiyT_.fc4357c3.js";
-import { l } from "./utils-D_MUFqkF.654ff3ce.js";
+import { r as o, h as e, H as r, g as s } from "./index.027a9fcf.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import { l as a } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";
-const i = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", b = class {
+const i = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}", d = class {
   constructor(t) {
     o(this, t);
   }
   componentDidLoad() {
-    const t = l(this.el, "swirl-table");
+    const t = a(this.el, "swirl-table");
     t == null || t.rerender();
   }
   render() {
-    const t = a("table-row", {
+    const t = l("table-row", {
       "table-row--highlighted": this.highlighted
     });
-    return e(r, { key: "e719f1b061025231a4ab26a23a2999240cce9ae5", "aria-rowindex": this.index, class: t, role: "row" }, e("slot", { key: "5101fc064437e47c3ba6bd721ba991fb23b4f407" }));
+    return e(r, { key: "88c230f066b64b23b28c8b2cffdd1e530b1fc4ca", "aria-rowindex": this.index, class: t, role: "row" }, e("slot", { key: "e8d3f5ff24dd58c0a61b2a133de256b6ec014925" }));
   }
   get el() {
     return s(this);
   }
 };
-b.style = i;
+d.style = i;
 export {
-  b as swirl_table_row
+  d as swirl_table_row
 };

package/dist/{swirl-table.entry.13a06df0.js → swirl-table.entry.12d83371.js}

@@ -1,4 +1,4 @@
-import { r as x, c as R, h as a, H as _, g as k } from "./index.17725a49.js";
+import { r as x, c as R, h as a, H as _, g as k } from "./index.027a9fcf.js";
 import { c as O, g as L } from "./index-orsBiyT_.fc4357c3.js";
 import { S as M } from "./sortable.esm-CMrz6687.dac971cd.js";
 import { d as A, i as f, q as T } from "./utils-D_MUFqkF.654ff3ce.js";

package/dist/{swirl-tabs.entry.f6add996.js → swirl-tabs.entry.3ec4865d.js}

@@ -1,10 +1,10 @@
-import { r as b, c as r, h as s, H as n, g as c } from "./index.17725a49.js";
+import { r as b, c, h as s, H as r, g as n } from "./index.027a9fcf.js";
 import { n as e } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";
 const d = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}", h = class {
   constructor(t) {
-    b(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabBarVariant = "default", this.tabBarTabs = [], this.tabs = [], this.onActivateNextTab = () => {
+    b(this, t), this.tabActivated = c(this, "tabActivated", 7), this.tabBarVariant = "default", this.tabBarTabs = [], this.tabs = [], this.onActivateNextTab = () => {
       this.activateNextTab();
     }, this.onActivatePreviousTab = () => {
       this.activatePreviousTab();
@@ -51,10 +51,10 @@ const d = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     }));
   }
   render() {
-    return s(n, { key: "f96bdb8681babf66671867fef6b36b4a05fbc1d4" }, s("div", { key: "b0d64e7fe96cb6eb8f81356749e6a6e8a69b57a5", class: "tabs" }, s("swirl-tab-bar", { key: "e9327c7eb153a7afacd7d2c01328e595288e7022", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "61ed03c9d0c37ab1336f6a09da38a3832df10448" }));
+    return s(r, { key: "1b71ed5ebc8c25ed689c2f007f258903f70f16b0" }, s("div", { key: "43d418a0accc3ff045c125910ec4ac78ccfcb7c3", class: "tabs" }, s("swirl-tab-bar", { key: "6fc41b7e6f1eb12a569aef6d1e43cbfe2fdb69df", label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), s("slot", { key: "099762d240237856fd73a448bad8b1794f91fed5" }));
   }
   get el() {
-    return c(this);
+    return n(this);
   }
 };
 h.style = d;

package/dist/{swirl-tag.entry.f53552b7.js → swirl-tag.entry.d47b0204.js}

@@ -1,4 +1,4 @@
-import { r as e, c as n, h as r, H as s, g as i } from "./index.17725a49.js";
+import { r as e, c as n, h as r, H as s, g as i } from "./index.027a9fcf.js";
 import { c } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";

package/dist/{swirl-text-input.entry.940f0327.js → swirl-text-input.entry.b6c234c9.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as c } from "./index.17725a49.js";
+import { r as h, c as n, h as i, H as c } from "./index.027a9fcf.js";
 import { c as d } from "./index-orsBiyT_.fc4357c3.js";
 import { D as x } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";

package/dist/{swirl-text.entry.0b896ab4.js → swirl-text.entry.c268d802.js}

@@ -1,4 +1,4 @@
-import { r as lt, h as Z, H as ct, g as ht } from "./index.17725a49.js";
+import { r as lt, h as Z, H as ct, g as ht } from "./index.027a9fcf.js";
 import { c as dt, g as ft } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";

package/dist/{swirl-theme-provider.entry.8a00d268.js → swirl-theme-provider.entry.66340027.js}

@@ -1,4 +1,4 @@
-import { r as m, c as a, h as o, H as d } from "./index.17725a49.js";
+import { r as m, c as a, h as o, H as d } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const l = ".sc-swirl-theme-provider-h{display:unset}", i = "swirl-preferred-theme", c = class {
@@ -80,7 +80,7 @@ const l = ".sc-swirl-theme-provider-h{display:unset}", i = "swirl-preferred-them
     }), this.setDesignTokens = [];
   }
   render() {
-    return o(d, { key: "5e5666314a969520cd3afd9832d851810ba9cf2d" }, o("slot", { key: "659cc00af9c93fdad4fb686f7a66c01349c211e4" }));
+    return o(d, { key: "8393a61a05cc2eeb473ee1ef1feaf1e8e269eb4d" }, o("slot", { key: "8cc0185f22946934eac2c3d60ab73066477207d5" }));
   }
   static get watchers() {
     return {

package/dist/{swirl-time-input.entry.0e0bdc46.js → swirl-time-input.entry.1f399d50.js}

@@ -1,11 +1,11 @@
-import { r as m, c as n, h as s, H as h, g as p } from "./index.17725a49.js";
+import { r as m, c as n, h as s, H as h, g as p } from "./index.027a9fcf.js";
 import { c as d } from "./index-orsBiyT_.fc4357c3.js";
 import { I as a, i as o, f as r, p as l } from "./index-D3UoejeY.7db8c51e.js";
 import { D as f } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";
 import "react-dom";
 import "./utils-D_MUFqkF.654ff3ce.js";
-const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}", c = "HH:mm:ss", w = class {
+const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}", c = "HH:mm:ss", b = class {
   constructor(i) {
     m(this, i), this.inputBlur = n(this, "inputBlur", 7), this.inputFocus = n(this, "inputFocus", 7), this.valueChange = n(this, "valueChange", 7), this.format = "HH:mm", this.placeholder = "hh:mm", this.iconSize = 24, this.mediaQueryUnsubscribe = () => {
     }, this.onBlur = (t) => {
@@ -100,7 +100,7 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
     const i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = d("time-input", {
       "time-input--inline": this.inline
     });
-    return s(h, { key: "fcff63c5c5cae44ce02b0c11098a65d930c32cb4" }, s("div", { key: "ea5190d825539eea8009234d492de00c61685016", class: t }, s("input", { key: "f7fd06406aa6716ea98c960a974f25ef7dcc13ed", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, type: "text" }), s("span", { key: "f1d3db8f74ec7217119698736ceefa8486195bbd", class: "time-input__icon" }, s("swirl-icon-time-outlined", { key: "329431e6fd0cc8758c2d9ae6b721f798f83a2ac2", size: this.iconSize }))));
+    return s(h, { key: "981cf171001c3c69d9ca6499bdd7426848810711" }, s("div", { key: "2949f08e0a08ef2e159e59ce2d2fc7fb84dd274b", class: t }, s("input", { key: "c2be09c877ca4ec6e10e7514cd85e674fc07a57b", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (e) => this.inputEl = e, required: this.required, type: "text" }), s("span", { key: "ae29d4c1ca5d831bfc7a5af272989603c9ce5f86", class: "time-input__icon" }, s("swirl-icon-time-outlined", { key: "9fdef36886b40de6cafb94c09f0445a1c55da0b3", size: this.iconSize }))));
   }
   get el() {
     return p(this);
@@ -112,7 +112,7 @@ const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
     };
   }
 };
-w.style = g;
+b.style = g;
 export {
-  w as swirl_time_input
+  b as swirl_time_input
 };

package/dist/{swirl-toast-provider.entry.7dcb4b21.js → swirl-toast-provider.entry.e32a7b95.js}

@@ -1,4 +1,4 @@
-import { r as o, h as i, H as r } from "./index.17725a49.js";
+import { r as o, h as i, H as r } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const c = class {

package/dist/{swirl-toast.entry.2cb34b03.js → swirl-toast.entry.e9756dcc.js}

@@ -1,4 +1,4 @@
-import { r as o, c as r, h as i, H as n } from "./index.17725a49.js";
+import { r as o, c as r, h as i, H as n } from "./index.027a9fcf.js";
 import { c } from "./index-orsBiyT_.fc4357c3.js";
 import { D as d } from "./media-query.service-Cx_VEA2f.c4de15e1.js";
 import "react";

package/dist/{swirl-toggle-button.entry.ea9d9d6f.js → swirl-toggle-button.entry.dda6621c.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t } from "./index.17725a49.js";
+import { r as s, h as t } from "./index.027a9fcf.js";
 import { c as o } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";
@@ -12,7 +12,7 @@ const i = ":host{display:inline-block}:host *{box-sizing:border-box}.button{disp
     const e = o("button", {
       "button--pressed": this.isPressed
     });
-    return t("button", { key: "7fea74ea5bdf424e022318ad1a47e1cb7a9524c1", class: e, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && t("swirl-icon", { key: "6075f521484294765adfe92586e12e5a977188cd", class: "button__icon", glyph: this.icon }), t("span", { key: "06db4d7123e013b8ed257621a00764c993b23cff", class: "button__label" }, this.label));
+    return t("button", { key: "725fa8f8aecb56f47b055c9e337a23c04594842c", class: e, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && t("swirl-icon", { key: "28e52ad921ed4660a8767b2a4a2fbe4c09787bc5", class: "button__icon", glyph: this.icon }), t("span", { key: "725200238f3d8bcf14c9795386a4cc07198f881a", class: "button__label" }, this.label));
   }
 };
 n.style = i;

package/dist/{swirl-toggle-group.entry.68bd8589.js → swirl-toggle-group.entry.16119afb.js}

@@ -1,4 +1,4 @@
-import { r as i, c as g, h as o, g as r } from "./index.17725a49.js";
+import { r as i, c as g, h as o, g as r } from "./index.027a9fcf.js";
 import { c as l } from "./index-orsBiyT_.fc4357c3.js";
 import "react";
 import "react-dom";

package/dist/{swirl-toolbar.entry.acac3dbd.js → swirl-toolbar.entry.c36445c7.js}

@@ -1,4 +1,4 @@
-import { r, h as s, H as n, g as i } from "./index.17725a49.js";
+import { r, h as s, H as n, g as i } from "./index.027a9fcf.js";
 import { k as c } from "./utils-D_MUFqkF.654ff3ce.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tooltip.entry.74b1ac09.js → swirl-tooltip.entry.1d43e5ee.js}

@@ -1,4 +1,4 @@
-import { r as p, h as i, H as h, g as c } from "./index.17725a49.js";
+import { r as p, h as i, H as h, g as c } from "./index.027a9fcf.js";
 import { u as d, P as m, N as u, D as b, k as f, b as w } from "./floating-ui.dom.browser.min-BtsCuEVE.45e9e353.js";
 import { c as y } from "./index-orsBiyT_.fc4357c3.js";
 import "react";

package/dist/swirl-tree-navigation-item.entry.9d40afb2.js

@@ -0,0 +1,71 @@
+import { r, c as s, h as e, H as o, g as d } from "./index.027a9fcf.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const h = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}", c = class {
+  constructor(t) {
+    r(this, t), this.expansionChange = s(this, "expansionChange", 7), this.level = 1, this.expandable = !0, this.external = !1, this.expanded = !1, this.hasChildren = !1, this.childrenHeight = "0", this.buttonId = `${this.navigationItemId}-button`, this.childrenId = `${this.navigationItemId}-children`, this.onKeyDown = (i) => {
+      switch (i.key) {
+        case " ":
+          i.preventDefault(), this.toggleExpanded(i);
+          break;
+        case "ArrowRight":
+          i.preventDefault(), !this.expanded && this.hasChildren && this.expand();
+          break;
+        case "ArrowLeft":
+          i.preventDefault(), this.expanded && this.collapse();
+          break;
+      }
+    }, this.toggleExpanded = (i) => {
+      this.expandable && this.hasChildren && !this.href && (i.preventDefault(), i.stopPropagation(), this.expanded ? this.collapse() : this.expand());
+    };
+  }
+  componentWillLoad() {
+    this.checkForChildren();
+  }
+  componentDidLoad() {
+    this.hasChildren && this.expanded && this.updateChildrenHeight();
+  }
+  updateChildrenHeight() {
+    if (this.childrenRef) {
+      const t = this.expanded ? `${this.childrenRef.scrollHeight}px` : "0";
+      this.childrenHeight = t;
+    }
+  }
+  handleExpandedChange() {
+    this.expansionChange.emit(this.expanded), this.updateChildrenHeight();
+  }
+  checkForChildren() {
+    this.hasChildren = Boolean(this.el.querySelector("swirl-tree-navigation-item"));
+  }
+  async expand() {
+    this.expanded || !this.expandable || !this.hasChildren || (this.expanded = !0);
+  }
+  async collapse() {
+    !this.expanded || !this.expandable || !this.hasChildren || (this.expanded = !1);
+  }
+  render() {
+    const t = Boolean(this.href), i = t ? "a" : "button", a = l("tree-navigation-item__link", {
+      "tree-navigation-item__link--active": this.active,
+      "tree-navigation-item__link--has-icon": Boolean(this.icon)
+    });
+    return e(o, { key: "e5892006f6e0d479a93994f050a9bfc06d358cb9", role: "none" }, e("li", { key: "12fbbd5cf3ca7e97597a6faa1889e665e910becb", class: {
+      "tree-navigation-item": !0,
+      "tree-navigation-item--expanded": this.expanded
+    }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : void 0, "aria-level": this.level }, e(i, { key: "44e9017d8b25ad561050666ad2e6c9a35d9fe2a3", onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: a, href: this.href, target: this.target, type: t ? void 0 : "button", id: this.buttonId, "aria-current": this.active ? "page" : void 0, "aria-controls": this.hasChildren ? this.childrenId : void 0, "aria-expanded": this.hasChildren ? this.expanded : void 0 }, e("span", { key: "7ec98ce065c42aaf96a8340da27b22888a9fcf49", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "0110d7f713ca0040067bb4cecfe10f3c21140df5", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "321e98259f46f2537daa178b94880af5b654e7cd", class: "tree-navigation-item__label" }, e("span", { key: "03b40b5a27f2ebaabde7dd1eda9389e8a5ae5ab8", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "43bb07c08e0fb5c8e67b8ac2ef5a75e0c89d0f3a", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "e7b0b04613e89576cbd7e9052bf300fbe7936589", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "3c53d1fb965bc60273762fae697161dd07d79b7c", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "c0a534343158a84b62d1f2217020cbd831cf8ee3", size: 16, role: "img", "aria-label": "External link" }))))), this.hasChildren && e("ul", { key: "ffb5c9030cfffa3e2717782678ed37c2edf51cd8", class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (n) => this.childrenRef = n, style: {
+      height: this.childrenHeight
+    } }, e("slot", { key: "0c6eefee8fbb6fe15702d739807cba7ac2e58231" }))));
+  }
+  get el() {
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      expanded: ["handleExpandedChange"]
+    };
+  }
+};
+c.style = h;
+export {
+  c as swirl_tree_navigation_item
+};

package/dist/{swirl-tree-navigation.entry.5c0b62bf.js → swirl-tree-navigation.entry.0982aa49.js}

@@ -1,4 +1,4 @@
-import { r, h as e, H as t } from "./index.17725a49.js";
+import { r, h as e, H as t } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const i = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}", s = class {
@@ -6,7 +6,7 @@ const i = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{ma
     r(this, a);
   }
   render() {
-    return e(t, { key: "6a4a6277f27ec2cc4e13d811c43a969e3052089b" }, e("ul", { key: "ee4dbfc8553e4dbbaf3b688a041ae73506b715e9", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "f3e66d8a17136a882e57b6ea1ccf1342775f2f94" })));
+    return e(t, { key: "6de0c53c48ee5a11541f3f048da018df9a0d19f9" }, e("ul", { key: "b9e5bf4dfb6aef8acb2e92421a71fe936d3912e9", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "d2999c3fbebc8629f3662b9536d1da42ec671b2d" })));
   }
 };
 s.style = i;

package/dist/{swirl-tree-view-item.entry.ccee4b88.js → swirl-tree-view-item.entry.171d8a44.js}

@@ -1,4 +1,4 @@
-import { r as b, c as l, f as c, h as s, F as f, H as u, g as y } from "./index.17725a49.js";
+import { r as b, c as l, f as c, h as s, F as f, H as u, g as y } from "./index.027a9fcf.js";
 import { c as _ } from "./index-orsBiyT_.fc4357c3.js";
 import { S as I } from "./sortable.esm-CMrz6687.dac971cd.js";
 import { t as p } from "./swirl-tree-view.config-BkSXzL50.94f4a648.js";

package/dist/{swirl-tree-view.entry.f177faa7.js → swirl-tree-view.entry.3f4b1a00.js}

@@ -1,4 +1,4 @@
-import { r as g, c as h, f as p, h as d, H as I, g as w } from "./index.17725a49.js";
+import { r as g, c as h, f as p, h as d, H as I, g as w } from "./index.027a9fcf.js";
 import { S as f } from "./sortable.esm-CMrz6687.dac971cd.js";
 import { t as m } from "./swirl-tree-view.config-BkSXzL50.94f4a648.js";
 import "react";

package/dist/{swirl-video-thumbnail.entry.992b691d.js → swirl-video-thumbnail.entry.139d2419.js}

@@ -1,4 +1,4 @@
-import { r as e, h as n, H as a } from "./index.17725a49.js";
+import { r as e, h as n, H as a } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const t = `:host {
@@ -79,7 +79,7 @@ const t = `:host {
     e(this, i), this.durationLabel = "Duration";
   }
   render() {
-    return n(a, { key: "885b5026b5ce2119760c6b6ca144be001b16b991" }, n("button", { key: "c3e08d6910079201c125750d126dca751873f378", "aria-describedby": this.duration !== void 0 ? "duration" : void 0, "aria-label": this.label, class: "video-thumbnail", type: "button" }, n("img", { key: "48dd71f050a4e9be31c91a6cdee8b656a812e9c1", alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && n("span", { key: "be560b7007ab8687ae11950fe1446adc5a048edf", class: "video-thumbnail__duration", id: "duration" }, n("swirl-visually-hidden", { key: "97b59d520740e6288bc3522da2408ac39d5412a5" }, this.durationLabel), this.duration), n("svg", { key: "6e367099743e2b8cd03ec28a4065be848014fb1e", class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, n("path", { key: "9cbbbdd73f4555f8bccd4418b9750af6224ed00d", d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" }))));
+    return n(a, { key: "42f3f85dc459c8d7140d9052f9cf4c6edaa4dd51" }, n("button", { key: "82dd95b54642b3b108fd91dbf1a8f8afeb0fa271", "aria-describedby": this.duration !== void 0 ? "duration" : void 0, "aria-label": this.label, class: "video-thumbnail", type: "button" }, n("img", { key: "278f7980472b30d2611f4b2ea81f680d01f98ce0", alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && n("span", { key: "909ec9ce4fb84fd292047f01bf5b151e2d31d8ad", class: "video-thumbnail__duration", id: "duration" }, n("swirl-visually-hidden", { key: "c116caa5cdfce1eaf4c90fc0952435677b7a8f91" }, this.durationLabel), this.duration), n("svg", { key: "f3def89bf9321a2bd650ce8da299927841492bd9", class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, n("path", { key: "c680681835a6635574865c28eb9c579073b57068", d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" }))));
   }
 };
 o.style = t;

package/dist/{swirl-visually-hidden.entry.ab46316c.js → swirl-visually-hidden.entry.fcccf703.js}

@@ -1,12 +1,12 @@
-import { r as e, h as i, H as r } from "./index.17725a49.js";
+import { r as s, h as e, H as r } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 const d = ".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", a = class {
-  constructor(s) {
-    e(this, s);
+  constructor(i) {
+    s(this, i);
   }
   render() {
-    return i(r, { key: "2629887aba4136ddd1d58b8eef851f87cb916281" }, i("slot", { key: "e294868680464e61f643daaff98b7f07cbb2b405" }));
+    return e(r, { key: "c60b98986bfc4bfe390d3d3e1eef5a54dcc25110" }, e("slot", { key: "f150f7d98ab83d65e72983aa63ca593b915e2f5d" }));
   }
 };
 a.style = d;

package/dist/{wc-datepicker.entry.170b93a6.js → wc-datepicker.entry.d1eca953.js}

@@ -1,4 +1,4 @@
-import { r as R, c as S, h as n, H, g as E } from "./index.17725a49.js";
+import { r as R, c as S, h as n, H, g as E } from "./index.027a9fcf.js";
 import "react";
 import "react-dom";
 function F(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.368.1",
+  "version": "0.370.0",
   "type": "module",
   "files": [
     "dist"
@@ -23,7 +23,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.368.1"
+    "@getflip/swirl-components": "^0.370.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.18",

package/dist/swirl-app-bar.entry.1185084c.js

@@ -1,48 +0,0 @@
-import { r as n, c as s, h as t, H as c, g as r } from "./index.17725a49.js";
-import { c as l } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const p = ':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}', d = class {
-  constructor(a) {
-    n(this, a), this.backButtonClick = s(this, "backButtonClick", 7), this.closeButtonClick = s(this, "closeButtonClick", 7), this.stepUpButtonClick = s(this, "stepUpButtonClick", 7), this.stepDownButtonClick = s(this, "stepDownButtonClick", 7), this.backButtonLabel = "Go back", this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>", this.closeButtonLabel = "Close", this.paddingInlineEnd = "16", this.paddingInlineStart = "16", this.stepUpButtonLabel = "Previous item", this.stepDownButtonLabel = "Next item", this.onBackButtonClick = (e) => {
-      this.backButtonClick.emit(e);
-    }, this.onCloseButtonClick = (e) => {
-      this.closeButtonClick.emit(e);
-    }, this.onStepUpButtonClick = (e) => {
-      this.stepUpButtonClick.emit(e);
-    }, this.onStepDownButtonClick = (e) => {
-      this.stepDownButtonClick.emit(e);
-    };
-  }
-  componentWillLoad() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.updateCtaStatus();
-    }), this.mutationObserver.observe(this.el, { childList: !0 }), queueMicrotask(() => {
-      this.updateCtaStatus();
-    });
-  }
-  disconnectedCallback() {
-    var a;
-    (a = this.mutationObserver) == null || a.disconnect();
-  }
-  updateCtaStatus() {
-    this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
-  }
-  render() {
-    const a = this.showBackButton || this.showCloseButton || this.showStepperControls, e = Boolean(this.el.querySelector('[slot="right-controls"]')), i = l("app-bar", {
-      "app-bar--has-cta": this.hasCta,
-      "app-bar--has-right-controls": e
-    }), o = {
-      paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
-      paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`
-    };
-    return t(c, { key: "d600deeb8a687bb4845149bcf2bad842f5ecf1f3" }, t("div", { key: "1c662e5e543ccec7fa1aa92721e7e3c43fbf6e4f", class: i, style: o }, a && t("div", { key: "1360ad530e65281d1756d3857020dc745d103695", class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && t("div", { key: "d1abed9606942b05ca70dc6a334b81050c4c1fe6", class: "app-bar__main-navigation-control" }, this.showBackButton && t("swirl-button", { key: "fe72d1498779c96c01893eb7befdbccaa537b947", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick }), this.showCloseButton && t("swirl-button", { key: "8dcb78f5b58bf6bc641c456cc8a58f9fb001bf09", hideLabel: !0, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showStepperControls && t("div", { key: "70d556ed3057812ba3bae94a3137f50475971b5d", class: "app-bar__stepper-controls" }, t("swirl-button", { key: "ff0f84da0dc691e84d549c269efab64ad4052c58", hideLabel: !0, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), t("swirl-button", { key: "ba47ee06389bd22569408c48b6bdcfc6fdd1d039", hideLabel: !0, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))), t("div", { key: "48ec84b6d54b8a2bc480467ae6b7556f8d2f6756", class: "app-bar__cta" }, t("slot", { key: "2303f169c07f38410740fd75ef788944ee23cdd1", name: "cta" })), t("div", { key: "a03346495a15b78da499f5e5dc584e140ddb3a85", class: "app-bar__heading" }, t("slot", { key: "dedbfa247ba4d1c31f04aa670f11499218fe9b4e", name: "heading" })), t("div", { key: "cae7eea7759c04cffc983d4dd525b6bf87b8ee8e", class: "app-bar__center-controls" }, t("slot", { key: "fd94d148cbedad08013203e9aba179165c7afedb", name: "center-controls" })), t("div", { key: "16e9c5e550774658b7b6ea93ff695564f6d7e65e", class: "app-bar__right-controls" }, t("slot", { key: "218d119f1d046ceff9a243c155a00dd730b76508", name: "right-controls" }))));
-  }
-  get el() {
-    return r(this);
-  }
-};
-d.style = p;
-export {
-  d as swirl_app_bar
-};

package/dist/swirl-console-layout.entry.ad5ef078.js

@@ -1,96 +0,0 @@
-import { r as c, c as l, h as e, H as d, g as b } from "./index.17725a49.js";
-import { c as h } from "./index-orsBiyT_.fc4357c3.js";
-import { d as p, i } from "./utils-D_MUFqkF.654ff3ce.js";
-import "react";
-import "react-dom";
-const u = `:host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"
-        "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"
-    "navigation"
-    "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"
-    "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"
-    "content"
-    "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout--has-custom-app-bar .console-layout__content{padding-top:var(--s-space-16)}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}`, f = class {
-  constructor(a) {
-    c(this, a), this.backButtonClick = l(this, "backButtonClick", 7), this.helpButtonClick = l(this, "helpButtonClick", 7), this.backButonLabel = "Back", this.helpButonLabel = "Help", this.hideNavigationButtonLabel = "Hide main navigation", this.logoText = "Admin", this.navigationLabel = "Main", this.showNavigationButtonLabel = "Show main navigation", this.mainScrollState = {
-      scrollable: !1,
-      scrolledToTop: !1,
-      scrolledToBottom: !1
-    }, this.updateCustomAppBarStatus = () => {
-      this.hasCustomAppBar = Boolean(this.el.querySelector('[slot="app-bar"]'));
-    }, this.updateFooterStatus = () => {
-      this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
-    }, this.onMainScroll = p(() => {
-      this.updateMainScrollState();
-    }, 16), this.onBackButtonClick = (o) => {
-      this.backButtonClick.emit(o);
-    }, this.onHelpButtonClick = (o) => {
-      this.helpButtonClick.emit(o);
-    }, this.onMobileNavigationToggleClick = () => {
-      this.toggleSidebar();
-    }, this.onClick = (o) => {
-      var s;
-      const t = o.target, n = Boolean(t.closest(".console-layout__mobile-navigation-button")), r = ((s = t.closest("[slot]")) == null ? void 0 : s.slot) === "overlays";
-      !o.composedPath().includes(this.sidebarEl) && !n && !r && this.sidebarActive && this.deactivateSidebar();
-    }, this.onKeyDown = (o) => {
-      o.code === "Escape" && this.sidebarActive && this.deactivateSidebar();
-    };
-  }
-  componentDidLoad() {
-    queueMicrotask(() => {
-      i() ? this.deactivateSidebar() : this.activateSidebar(), this.updateMainScrollState(), this.updateCustomAppBarStatus(), this.updateFooterStatus();
-    });
-  }
-  updateMainScrollState() {
-    const a = {
-      scrollable: this.mainEl.scrollHeight > this.mainEl.clientHeight,
-      scrolledToTop: this.mainEl.scrollTop === 0,
-      scrolledToBottom: Math.round(this.mainEl.scrollTop + this.mainEl.clientHeight) >= this.mainEl.scrollHeight
-    };
-    Object.keys(a).some((o) => a[o] !== this.mainScrollState[o]) && (this.mainScrollState = a);
-  }
-  onWindowResize() {
-    const a = i();
-    !a && !this.sidebarActive ? this.activateSidebar() : a && this.deactivateSidebar();
-  }
-  async toggleSidebar() {
-    this.sidebarActive ? this.deactivateSidebar() : this.activateSidebar();
-  }
-  async showSidebar() {
-    this.sidebarActive || this.activateSidebar();
-  }
-  async hideSidebar() {
-    this.sidebarActive && this.deactivateSidebar();
-  }
-  activateSidebar() {
-    var a;
-    this.sidebarActive = !0, this.sidebarEl.removeAttribute("inert"), i() && ((a = this.el.querySelector("swirl-tree-navigation-item")) == null || a.focus());
-  }
-  deactivateSidebar() {
-    this.sidebarActive = !1, i() && this.sidebarEl.setAttribute("inert", "");
-  }
-  render() {
-    const a = Boolean(this.maxContentWidth) ? {
-      maxWidth: this.maxContentWidth,
-      justifySelf: "center",
-      width: "100%"
-    } : void 0;
-    this.updateCustomAppBarStatus(), this.updateFooterStatus();
-    const o = h("console-layout", {
-      "console-layout--sidebar-active": this.sidebarActive,
-      "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
-      "console-layout--has-footer": this.hasFooter,
-      "console-layout--has-custom-app-bar": this.hasCustomAppBar,
-      "console-layout--main-scrollable": this.mainScrollState.scrollable,
-      "console-layout--main-scrolled-to-top": this.mainScrollState.scrolledToTop,
-      "console-layout--main-scrolled-to-bottom": this.mainScrollState.scrolledToBottom
-    });
-    return e(d, { key: "496726613eda9b1c13e33c085e915d775933ed0d" }, e("div", { key: "3579c1193e739746a8638efabfdce3117bf0f7ce", class: o, onClick: this.onClick, onKeyDown: this.onKeyDown }, e("header", { key: "675b17d7ae85f8625e322debcb000d5bf2e90353", "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (t) => this.sidebarEl = t }, e("div", { key: "8aff40aaea61bb8d05f3a055251f44b1e3127369", class: "console-layout__header" }, e("div", { key: "28c91b86ee3c54491354b2201529b93e616ed5a2", class: "console-layout__logo" }, e("svg", { key: "94c383254b365d55087f79016f64de5c2a9090f3", class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, e("path", { key: "95d61c6613839aaadf51693466036c9fc80ae379", d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), e("path", { key: "cbb0bcffdaebc54633f2e07d658e3c9c9a529ddc", d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), e("path", { key: "203d33fe023f8f24dfc3dbb5a484151ec2067179", d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), e("path", { key: "78fa8fc8471d593dd6b82e9a0e6dd55804cbb5cb", d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), e("swirl-text", { key: "1a1c38e126ceb14ed84d20ea35eb9881a6e96a29", class: "console-layout__logo-text", weight: "medium" }, this.logoText))), e("nav", { key: "10c48be46ba7cb3b57ab7941b565ec6262d5441e", "aria-label": this.navigationLabel, class: "console-layout__navigation" }, e("slot", { key: "40c8755440f5fa081cf75e80f2658082f5f372f2", name: "navigation" })), e("div", { key: "dd865340cbff798b518dfd1619a71ac7aa746b28", class: "console-layout__user" }, e("slot", { key: "8526bf246e4df5ad1a8f156de420094b0bf07a42", name: "user" }))), e("main", { key: "1d748d5d7f368dfc04cc798b67c84ac70bfa27bc", "aria-labelledby": Boolean(this.appName) ? "app-name" : void 0, class: "console-layout__main", onScroll: this.onMainScroll, ref: (t) => this.mainEl = t }, e("header", { key: "4f4a0ec2fce6b3332a383d2eb490cef9f9914c82", class: "console-layout__app-bar console-layout__app-bar--custom" }, e("slot", { key: "22ef51d2afffe32c7802938b0501a980317fd422", name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), e("header", { key: "4e7f642ec1b0db200a06014895a304410d4e4bf6", class: "console-layout__app-bar" }, e("span", { key: "5b62b2d1c1d778b663a436d3f3cdb1fb3ceda0bd", class: "console-layout__mobile-navigation-button" }, e("swirl-button", { key: "dc14fca02f84c6e6deb1ad326940abfe6c46bb2e", swirlAriaExpanded: String(this.sidebarActive), hideLabel: !0, icon: this.sidebarActive ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive ? this.hideNavigationButtonLabel : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), e("div", { key: "01d45eb50d075757955b80853198f1b0f39299c8", class: "console-layout__app-name" }, this.appName && e("swirl-heading", { key: "02175712524e8351c77fb19e694b578fb7286cf4", as: "h1", headingId: "app-name", level: 4, text: this.appName })), this.showHelpButton && e("swirl-button", { key: "d32c76e8ece2eeb22f011f32c413a4830cc30981", class: "console-layout__help-button", hideLabel: !0, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick })), e("section", { key: "d1988d4c22eb7bdc7f0a6e7b2214f279d16f0f58", "aria-labelledby": "heading", class: "console-layout__content", style: a }, e("header", { key: "a0432af5b8fa2c86cdb38107bf9862434b71c3a8", class: "console-layout__content-header" }, this.showBackButton && e("swirl-button", { key: "247e57f3ad9aa23d632676da5f9412bf49178046", class: "console-layout__back-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick }), Boolean(this.heading) && e("div", { key: "45edcca489cfd352b051296b603014b4a3680f0d", class: "console-layout__heading-container" }, e("swirl-heading", { key: "7b4e9fd2b38eb7c577d9c24a777081091e67edd0", as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && e("swirl-text", { key: "1c2465d0e95338b0951eb4acca5c600b59e28ed0", class: "console-layout__subheading", color: "subdued" }, this.subheading)), !Boolean(this.heading) && e("div", { key: "4ba8d0d2952cbd856740bdc9cc437bf3cc760a30", class: "console-layout__heading-container" }, e("slot", { key: "e4f52ed468b699b7c7243857337342ee5c11ab42", name: "heading" })), e("div", { key: "5aeb6ea58a0d5773684c63faab63efd58356472a", class: "console-layout__content-header-tools" }, e("slot", { key: "736fa0e793324d24da67ed4a005a520e55e9a047", name: "content-header-tools" }))), e("div", { key: "ccfd6c9269d2eb46761dc5b1746928cc9f032e36", class: "console-layout__integration" }, e("slot", { key: "61c7b54e8ade13b05a8c3fca648c01fb45704913", name: "content" }))), e("footer", { key: "74be6cb8601f004b48e76070172d11a61a9567f9", class: "console-layout__footer" }, e("slot", { key: "346a507d59d8969c3d53289cdd777cd278c35608", name: "footer", onSlotchange: this.updateFooterStatus })), e("div", { key: "9d27e700c9d1863a0801661ca45f7e7bdf01e4f6", class: "console-layout__overlays" }, e("slot", { key: "3d2bc10779ef6cfdb56aed0a145a5d8ccfe2a764", name: "overlays" })))));
-  }
-  get el() {
-    return b(this);
-  }
-};
-f.style = u;
-export {
-  f as swirl_console_layout
-};