@getflip/swirl-components-react 0.298.0 → 0.300.0

package/dist/swirl-table.entry.0dbfce59.js

@@ -0,0 +1,306 @@
+import { r as v, c as C, h as a, H as D, g as S } from "./index.24a4f18e.js";
+import { c as x } from "./index-267776a4.6beb4f4b.js";
+import { S as _ } from "./sortable.esm-0bfddf0c.953ca6a6.js";
+import { d as R, i as p, q as k } from "./utils-877a768f.c277f897.js";
+import "react";
+import "react-dom";
+var L = function(t) {
+  var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, o = void 0, s = void 0, n = void 0, l = [];
+  return function() {
+    var f = O(r), b = new Date().getTime(), m = !o || b - o > f;
+    o = b;
+    for (var g = arguments.length, d = Array(g), c = 0; c < g; c++)
+      d[c] = arguments[c];
+    if (m && i.leading)
+      return i.accumulate ? Promise.resolve(t.call(this, [d])).then(function(u) {
+        return u[0];
+      }) : Promise.resolve(t.call.apply(t, [this].concat(d)));
+    if (s ? clearTimeout(n) : s = T(), l.push(d), n = setTimeout(y.bind(this), f), i.accumulate) {
+      var w = l.length - 1;
+      return s.promise.then(function(u) {
+        return u[w];
+      });
+    }
+    return s.promise;
+  };
+  function y() {
+    var h = s;
+    clearTimeout(n), Promise.resolve(i.accumulate ? t.call(this, l) : t.apply(this, l[l.length - 1])).then(h.resolve, h.reject), l = [], s = null;
+  }
+};
+function O(e) {
+  return typeof e == "function" ? e() : e;
+}
+function T() {
+  var e = {};
+  return e.promise = new Promise(function(t, r) {
+    e.resolve = t, e.reject = r;
+  }), e;
+}
+const A = `.sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid
+      var(--s-border-highlight)}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),
+    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),
+    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:flex}.table__empty-row-cell.sc-swirl-table{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)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}`, I = A, q = {
+  end: "Dropped. Final position in table: {position} of {rowCount}.",
+  initial: "Press space to move the row.",
+  moved: "Current position in table: {position} of {rowCount}.",
+  start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop."
+}, K = class {
+  constructor(e) {
+    v(this, e), this.dropRow = C(this, "dropRow", 7), this.triggerRerender = R(async () => {
+      await this.updateLayout(), this.updateEmptyState();
+    }, 0, !0), this.updateLayout = L(async () => {
+      this.resetCellStyles(), this.resetColumnStyles(), this.resetEmptyRowStyles(), this.resetRowGroupStyles(), this.layoutEmptyRow(), this.layoutRowGroups(), this.layOutCellsAndColumns(), this.updateScrolledState();
+    }, 16, { leading: !0 }), this.onScroll = () => {
+      this.updateScrolledState();
+    }, this.onSlotChange = async () => {
+      await this.updateLayout(), this.updateEmptyState(), this.setupDragDrop();
+    }, this.onFocus = (t) => {
+      var i;
+      if (this.movingViaKeyboard) {
+        const o = this.el.querySelector(".table-row--moving");
+        o && this.focusDragHandleOfRow(o);
+      }
+      const r = !!((i = t.target) != null && i.closest(this.dragDropHandle));
+      this.liveRegionText === "" && r && this.updateLiveRegionText("initial");
+    }, this.onBlur = (t) => {
+      const r = t.relatedTarget, i = !!(r != null && r.closest(this.dragDropHandle));
+      this.el.contains(r) && i || this.liveRegionText !== "" && this.updateLiveRegionText();
+    }, this.onKeyDown = (t) => {
+      var o, s;
+      if (!this.enableDragDrop)
+        return;
+      const r = (o = t.target) == null ? void 0 : o.closest("swirl-table-row");
+      !((s = t.target) != null && s.closest(this.dragDropHandle)) || (t.code === "Space" ? (t.preventDefault(), t.stopPropagation(), this.toggleKeyboardMove(r)) : t.code === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "up")) : t.code === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), this.moveRow(r, "down")) : t.code === "Escape" && (t.preventDefault(), t.stopPropagation(), this.cancelKeyboardMove()));
+    }, this.caption = void 0, this.dragDropHandle = void 0, this.dragDropInstructions = q, this.emptyStateLabel = "No results found.", this.enableDragDrop = void 0, this.label = void 0, this.empty = void 0, this.liveRegionText = "", this.scrollable = void 0, this.scrolled = void 0, this.scrolledToEnd = void 0;
+  }
+  async componentDidLoad() {
+    this.setupIntersectionObserver(), queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  disconnectedCallback() {
+    var e, t;
+    (e = this.intersectionObserver) == null || e.disconnect(), (t = this.sortable) == null || t.destroy();
+  }
+  handleEnableDragDropChange() {
+    queueMicrotask(() => {
+      this.setupDragDrop();
+    });
+  }
+  setupIntersectionObserver() {
+    this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
+      threshold: 0
+    }), this.intersectionObserver.observe(this.container);
+  }
+  setupDragDrop() {
+    if (this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop) {
+      if (!!this.el.querySelector("swirl-table-row-group")) {
+        console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
+        return;
+      }
+      if (!this.dragDropHandle) {
+        console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
+        return;
+      }
+      const t = this.el.querySelector('[slot="rows"]');
+      this.dragDropContainer = (t == null ? void 0 : t.tagName) !== "SWIRL-TABLE-ROW" ? t != null ? t : this.bodyEl : this.bodyEl, this.sortable = new _(this.dragDropContainer, {
+        animation: 100,
+        direction: "vertical",
+        handle: this.dragDropHandle,
+        fallbackOnBody: !0,
+        group: `swirl-table-${Math.random().toString().substring(2)}`,
+        onEnd: (r) => {
+          var l;
+          r.stopPropagation();
+          const { to: i, newIndex: o, oldIndex: s, item: n } = r;
+          this.dropRow.emit({
+            newIndex: o,
+            oldIndex: s,
+            item: n,
+            itemId: (l = n.id) != null ? l : n.querySelector(":scope > swirl-table-row").id,
+            newNextSiblingItemId: o < i.children.length - 1 ? i.children[o + 1].id : void 0,
+            newPrevSiblingItemId: o > 0 ? i.children[o - 1].id : void 0
+          });
+        }
+      });
+    }
+  }
+  async onVisibilityChange(e) {
+    e.some((r) => r.isIntersecting) && setTimeout(async () => {
+      await this.updateLayout();
+    }, 100);
+  }
+  async componentDidRender() {
+    await this.updateLayout(), this.updateEmptyState();
+  }
+  async onWindowResize() {
+    await this.updateLayout();
+  }
+  async rerender() {
+    this.triggerRerender();
+  }
+  resetEmptyRowStyles() {
+    const e = this.el.querySelector(".table__empty-row");
+    !Boolean(e) || (e.style.width = "");
+  }
+  resetRowGroupStyles() {
+    Array.from(this.el.querySelectorAll("swirl-table-row-group")).forEach((t) => {
+      const r = t.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(r) || (t.shadowRoot.querySelector(".table-row-group__header-row").style.width = "");
+    });
+  }
+  resetColumnStyles() {
+    this.getColumns().forEach((t) => {
+      t.classList.remove("table-column--has-shadow", "table-column--is-sticky", "table-column--is-sticky-right"), t.style.right = "", t.style.left = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  resetCellStyles() {
+    this.getCells().forEach((t) => {
+      t.classList.remove("table-cell--has-shadow", "table-cell--is-sticky", "table-cell--is-sticky-right"), t.style.flex = "", t.style.left = "", t.style.right = "", t.style.position = "", t.style.zIndex = "";
+    });
+  }
+  updateScrolledState() {
+    const e = p();
+    if (this.container === void 0)
+      return;
+    const t = this.container.scrollWidth > this.container.clientWidth, r = this.container.scrollLeft > 0, i = Math.ceil(this.container.clientWidth + this.container.scrollLeft) >= Math.floor(this.container.scrollWidth);
+    t !== this.scrollable && (t && !e ? this.container.classList.add("table__container--scrollable") : this.container.classList.remove("table__container--scrollable")), r !== this.scrolled && (r && !e ? this.container.classList.add("table__container--scrolled") : this.container.classList.remove("table__container--scrolled")), i !== this.scrolledToEnd && (i && !e ? this.container.classList.add("table__container--scrolled-to-end") : this.container.classList.remove("table__container--scrolled-to-end"));
+  }
+  getColumns() {
+    return Array.from(this.el.querySelectorAll("swirl-table-column"));
+  }
+  getCells() {
+    return Array.from(this.el.querySelectorAll("swirl-table-cell"));
+  }
+  layoutEmptyRow() {
+    const e = this.el.querySelector(".table__empty-row");
+    if (!Boolean(e))
+      return;
+    const t = `${this.el.querySelector(".table__container").scrollWidth}px`;
+    e.style.width = t;
+  }
+  layoutRowGroups() {
+    var r;
+    const e = Array.from(this.el.querySelectorAll("swirl-table-row-group")), t = `${(r = this.el.querySelector(".table__container")) == null ? void 0 : r.scrollWidth}px`;
+    e.forEach((i) => {
+      const o = i.shadowRoot.querySelector(".table-row-group__header-row");
+      !Boolean(o) || (i.shadowRoot.querySelector(".table-row-group__header-row").style.width = t);
+    });
+  }
+  layOutCellsAndColumns() {
+    const e = this.getColumns(), t = this.getCells();
+    e.forEach((r, i) => {
+      const o = this.getCellsForColumn(t, e, i), s = this.calculateColumnProperties(r, e, i);
+      o.forEach((n) => this.applyCellStyles(n, r, s)), this.applyColumnStyles(r, s);
+    });
+  }
+  getCellsForColumn(e, t, r) {
+    return e.filter((i, o) => (r - o) % t.length === 0);
+  }
+  calculateColumnProperties(e, t, r) {
+    const i = e.sticky ? this.getLeftOffsetForStickyColumn(t, r) : 0, o = `${e.getBoundingClientRect().width}px`, s = e.sticky && t.length === r + 1, n = e.sticky && !this.hasStickyColumnsToRight(t, r);
+    return {
+      leftOffsetForStickyColumn: i,
+      columnWidth: o,
+      isLastColumnSticky: s,
+      hasShadowRight: n
+    };
+  }
+  applyCellStyles(e, t, r) {
+    const { leftOffsetForStickyColumn: i, columnWidth: o, isLastColumnSticky: s, hasShadowRight: n } = r;
+    e.style.flex = Boolean(o) ? `0 0 ${o}` : "", !p() && (t.sticky && !s && (e.classList.add("table-cell--is-sticky"), e.style.left = i + "px", n && e.classList.add("table-cell--has-shadow-right")), s && e.classList.add("table-cell--is-sticky-right", "table-cell--has-shadow-left"));
+  }
+  applyColumnStyles(e, t) {
+    if (p())
+      return;
+    const { leftOffsetForStickyColumn: r, isLastColumnSticky: i, hasShadowRight: o } = t;
+    e.sticky && !i && (e.classList.add("table-column--is-sticky"), e.style.left = r + "px", o && e.classList.add("table-column--has-shadow-right")), i && e.classList.add("table-column--is-sticky-right", "table-column--has-shadow-left");
+  }
+  getLeftOffsetForStickyColumn(e, t) {
+    return e.slice(0, t).reduce((r, i) => {
+      if (i.sticky)
+        return r += i.getBoundingClientRect().width, r;
+    }, 0);
+  }
+  hasStickyColumnsToRight(e, t) {
+    return e.slice(t + 1, e.length - 1).some((r) => r.sticky);
+  }
+  updateEmptyState() {
+    const e = this.el.querySelector('[slot="rows"]');
+    this.empty = !Boolean(e) || e.children.length === 0;
+  }
+  updateLiveRegionText(e, t = {}) {
+    let r = e ? this.dragDropInstructions[e] : "";
+    for (const [i, o] of Object.entries(t != null ? t : {}))
+      r = r.replaceAll(`{${i}}`, String(o));
+    r !== this.liveRegionText && (this.liveRegionText = r);
+  }
+  toggleKeyboardMove(e) {
+    this.movingViaKeyboard ? this.endKeyboardMove(e) : this.startKeyboardMove(e);
+  }
+  startKeyboardMove(e) {
+    this.movingViaKeyboard = !0, this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(e), e.classList.add("table-row--moving"), this.updateLiveRegionText("start", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    });
+  }
+  endKeyboardMove(e) {
+    this.movingViaKeyboard = !1, e.classList.remove("table-row--moving"), this.updateLiveRegionText("end", {
+      position: Array.from(this.dragDropContainer.children).indexOf(e) + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.dropRow.emit({
+      item: e,
+      newIndex: Array.from(this.dragDropContainer.children).indexOf(e),
+      oldIndex: this.positionBeforeKeyboardMove,
+      itemId: e.id,
+      newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) < this.dragDropContainer.children.length - 1 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) + 1].id : void 0,
+      newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(e) > 0 ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(e) - 1].id : void 0
+    }), this.positionBeforeKeyboardMove = void 0;
+  }
+  cancelKeyboardMove() {
+    if (!this.movingViaKeyboard)
+      return;
+    const e = this.el.querySelector(".table-row--moving");
+    !e || (e.classList.remove("table-row--moving"), this.movingViaKeyboard = !1, this.positionBeforeKeyboardMove !== void 0 && this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[this.positionBeforeKeyboardMove]));
+  }
+  moveRow(e, t) {
+    if (!this.movingViaKeyboard)
+      return;
+    let r;
+    if (t === "up") {
+      const i = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.max(0, i - 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r]);
+    } else {
+      const i = Array.from(this.dragDropContainer.children).indexOf(e);
+      r = Math.min(this.dragDropContainer.children.length - 1, i + 1), this.dragDropContainer.insertBefore(e, this.dragDropContainer.children[r + 1]);
+    }
+    this.updateLiveRegionText("moved", {
+      position: r + 1,
+      rowCount: this.dragDropContainer.children.length
+    }), this.focusDragHandleOfRow(e);
+  }
+  focusDragHandleOfRow(e) {
+    var r, i;
+    const t = (r = k(e, this.dragDropHandle)) == null ? void 0 : r[0];
+    t.tagName === "BUTTON" ? t.focus() : (i = t.querySelector("button")) == null || i.focus();
+  }
+  render() {
+    const e = x("table", {
+      "table--keyboard-move": this.movingViaKeyboard
+    });
+    return a(D, { key: "072ad27c0d91fe202a82c853917575d36f9868b9" }, a("div", { key: "30915cb7a92b2f45d0ee3dc6b7af1040d0765b93", class: e }, this.enableDragDrop && a("swirl-visually-hidden", { key: "286a7f9a8a88054c6b330ccd49527495157001e8" }, a("span", { key: "9b94d79b0f8882da55b09cd3edede48ca1bac26d", "aria-live": "assertive" }, this.liveRegionText)), a("div", { key: "0221127e6feedb0c4f2dc8fefd9f00a08e72e711", class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (t) => this.container = t, tabIndex: -1 }, a("div", { key: "c7afbe0db6e602ff7b7c59c149a2abb2dca39168", "aria-describedby": Boolean(this.caption) ? "caption" : void 0, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && a("swirl-visually-hidden", { key: "a02b165844fc9685c158e8115fb90c48ae6e87f3" }, a("div", { key: "c6fd789ad9d5a7e2ba1af8d1179c96c50806e10d", id: "caption" }, this.caption)), a("div", { key: "7386f5e1d6f6a1ec1e3f81b4f302fb3026e674fa", role: "rowgroup" }, a("div", { key: "4a9c0fb92683cd8530acdb9bc912e9ca080ce5b3", class: "table__header", role: "row" }, a("slot", { key: "23fe3ffe2bf0f78684846c4fd3ecfed994a871b4", name: "columns", onSlotchange: this.onSlotChange }))), a("div", { key: "972dcf9e869a187edc976a30bc513efcd3e6a549", class: "table__body", ref: (t) => this.bodyEl = t }, a("slot", { key: "5610098e443132f5a745c8e345d4e3a03c917190", name: "rows", onSlotchange: this.onSlotChange }), this.empty && a("div", { key: "c85753cf3ef5cb3ec2e62b623372d248eb485495", class: "table__empty-row", role: "row" }, a("div", { key: "533e9cfebbc9bb4336d1c2c3bba54ccf8ebe1765", "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, a("swirl-text", { key: "e9a348686f3c80a33501e9bb85f8c92c068e7fe5", align: "center", size: "sm" }, this.emptyStateLabel))))))));
+  }
+  get el() {
+    return S(this);
+  }
+  static get watchers() {
+    return {
+      enableDragDrop: ["handleEnableDragDropChange"]
+    };
+  }
+};
+K.style = I;
+export {
+  K as swirl_table
+};

package/dist/{swirl-tabs.entry.1edc5c5d.js → swirl-tabs.entry.3a3a6c5b.js}

@@ -1,10 +1,10 @@
-import { r as n, c as b, h as e, H as r, g as d } from "./index.712081f1.js";
-import { f as s } from "./utils-877a768f.c277f897.js";
+import { r as b, c as n, h as s, H as r, g as c } from "./index.24a4f18e.js";
+import { f as e } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
-const c = ".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 = c, l = class {
+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 = d, l = class {
   constructor(t) {
-    n(this, t), this.tabActivated = b(this, "tabActivated", 7), this.tabs = [], this.onActivateNextTab = () => {
+    b(this, t), this.tabActivated = n(this, "tabActivated", 7), this.tabs = [], this.onActivateNextTab = () => {
       this.activateNextTab();
     }, this.onActivatePreviousTab = () => {
       this.activatePreviousTab();
@@ -23,14 +23,14 @@ const c = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     !Boolean(i) || (i.active = !0, this.tabActivated.emit(i), this.updateTabBarTabs());
   }
   activateNextTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = s(t + 1, this.tabs.length);
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t + 1, this.tabs.length);
     this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
       var a;
       (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
     });
   }
   activatePreviousTab() {
-    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = s(t - 1, this.tabs.length);
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = e(t - 1, this.tabs.length);
     this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
       var a;
       (a = this.el.querySelector(".tabs__tab--active")) == null || a.focus();
@@ -51,10 +51,10 @@ const c = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl
     }));
   }
   render() {
-    return e(r, { key: "8f776091b83d55785e936df66c991738f1f98102" }, e("div", { key: "94e213f60729e970661621a683b791c44a67a90e", class: "tabs" }, e("swirl-tab-bar", { key: "d680d7a11f6a0a89edcd6f0a63cf2d79e64d50f0", 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 })), e("slot", { key: "edc54b9b40475e1930eb98c08774a5e7d721e31e" }));
+    return s(r, { key: "341704212596c244b030469cbc133c845f43b17a" }, s("div", { key: "bea41635c44fa9a7090b39511353d4fe9e38c23f", class: "tabs" }, s("swirl-tab-bar", { key: "1aa5dcdaff37a0934c887dac63bcca6f38da89c3", 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: "29e72997a00d6630e6abbaa279ea282f890a03c7" }));
   }
   get el() {
-    return d(this);
+    return c(this);
   }
 };
 l.style = h;

package/dist/{swirl-text-input.entry.5e7b93d4.js → swirl-text-input.entry.34b5df20.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as d } from "./index.712081f1.js";
+import { r as h, c as n, h as i, H as d } from "./index.24a4f18e.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import { g as x } from "./utils-877a768f.c277f897.js";
 import "react";

package/dist/{swirl-text.entry.d1d93c15.js → swirl-text.entry.e0549688.js}

@@ -1,4 +1,4 @@
-import { r as at, h as Y, H as lt, g as ct } from "./index.712081f1.js";
+import { r as at, h as Y, H as lt, g as ct } from "./index.24a4f18e.js";
 import { c as ht } from "./_commonjsHelpers-d20b9603.2d9b8855.js";
 import { c as dt } from "./index-267776a4.6beb4f4b.js";
 import "react";
@@ -286,7 +286,7 @@ const pt = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-
     }), o = {
       whiteSpace: a ? "nowrap" : this.whiteSpace
     };
-    return Y(lt, { key: "58852d3eda21365916053627efdfd755cf1a3512" }, Y(l, { key: "c88165cea60cb0d540f1636262a449818c8127a2", class: r, ref: (c) => this.textEl = c, style: o }, Y("slot", { key: "267baa6125ef490f3536adc3d51f16e9782ef94a" })));
+    return Y(lt, { key: "713388ef1ff5eb7d6114a53cd1145169079edf95" }, Y(l, { key: "4b14c27894c47122d5ebdb16bea0dc8023693b8d", class: r, ref: (c) => this.textEl = c, style: o }, Y("slot", { key: "8057eff74c66a986a47c9978fce2f83ca4272112" })));
   }
   get el() {
     return ct(this);

package/dist/{swirl-theme-provider.entry.a10286ed.js → swirl-theme-provider.entry.63b1378b.js}

@@ -1,4 +1,4 @@
-import { r as m, c as a, h as o, H as d } from "./index.712081f1.js";
+import { r as m, c as a, h as o, H as d } from "./index.24a4f18e.js";
 import "react";
 import "react-dom";
 const l = ".sc-swirl-theme-provider-h{display:unset}", c = l, i = "swirl-preferred-theme", g = class {
@@ -80,7 +80,7 @@ const l = ".sc-swirl-theme-provider-h{display:unset}", c = l, i = "swirl-preferr
     }), this.setDesignTokens = [];
   }
   render() {
-    return o(d, { key: "0f1694a7bf967fcbffdd7e915ec4aa4a8d2f93cf" }, o("slot", { key: "7c3c75d2927e01783040f473ba41f3831164bfa8" }));
+    return o(d, { key: "e292aaf46693437e24ce6f2a331e43ac486dfb6d" }, o("slot", { key: "5d64cc274bfcfcb78cd379730f3361ebb56c4d9f" }));
   }
   static get watchers() {
     return {

package/dist/{swirl-time-input.entry.fa5a6f15.js → swirl-time-input.entry.4c885c2b.js}

@@ -1,4 +1,4 @@
-import { r as c, c as u, h as a, H as p, g as m } from "./index.712081f1.js";
+import { r as c, c as u, h as a, H as p, g as m } from "./index.24a4f18e.js";
 import { c as f } from "./index-267776a4.6beb4f4b.js";
 import { p as r, i as o, f as d, m as v } from "./maska-c5119b9a.aa658697.js";
 import { g as w } from "./utils-877a768f.c277f897.js";
@@ -62,7 +62,7 @@ const b = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h
     const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, i = Boolean(this.value) ? r(this.value, l, new Date()) : void 0, t = o(i) ? d(i, this.format) : void 0, s = f("time-input", {
       "time-input--inline": this.inline
     });
-    return a(p, { key: "2c4924715b04c0e77299b48a29fe7ec044229884" }, a("div", { key: "b8bceee82f8ee07a206515e8f3bf3ba6c7fd6320", class: s }, a("input", { key: "d06d11faf603e2c8526ab780ac64bbe10b61d562", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (n) => this.inputEl = n, required: this.required, type: "text", value: t }), a("span", { key: "b84dd53cb89b2532904f0978c951dcab01996d33", class: "time-input__icon" }, a("swirl-icon-time-outlined", { key: "0c6df7dcd4388bfd2b06c6e70e2a30e36474ea3a", size: this.iconSize }))));
+    return a(p, { key: "11575c7c43abed50d92714f74e70997ba3513d73" }, a("div", { key: "22b1e8c6fb208fdb04d0564b62aeee6149bfef0d", class: s }, a("input", { key: "6142af4dcf4a7f9cfb83a08f63fa200e29ed8641", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (n) => this.inputEl = n, required: this.required, type: "text", value: t }), a("span", { key: "2d6b3392c86d2c324b413f3b5d47c9b07bdc8cce", class: "time-input__icon" }, a("swirl-icon-time-outlined", { key: "f6f663c6628b6268757e2675890bd66afa2980ce", size: this.iconSize }))));
   }
   get el() {
     return m(this);

package/dist/{swirl-toast-provider.entry.65e4eb5d.js → swirl-toast-provider.entry.b4a3bc61.js}

@@ -1,7 +1,7 @@
-import { r, h as a, H as e } from "./index.712081f1.js";
+import { r, h as o, H as e } from "./index.24a4f18e.js";
 import "react";
 import "react-dom";
-const h = class {
+const l = class {
   constructor(t) {
     r(this, t), this.onDismiss = (s) => {
       this.toasts = [...this.toasts].filter((i) => i.toastId !== s.detail);
@@ -14,7 +14,7 @@ const h = class {
     this.toasts = [...this.toasts].filter((s) => s.toastId !== t);
   }
   async toast(t) {
-    if (this.toasts.some((o) => o.toastId === t.toastId))
+    if (this.toasts.some((a) => a.toastId === t.toastId))
       return;
     let s = this.globalDuration;
     this.globalDuration === void 0 ? s = t.duration : this.globalDuration === 0 && (s = void 0);
@@ -27,12 +27,12 @@ const h = class {
     return this.toasts = [...this.toasts, i], i;
   }
   render() {
-    return a(e, { key: "3650e2962ff80074ed761a02c2181aa199b113e7", role: "status" }, a("swirl-stack", { key: "a7d56803f722b22f3a58d4a9685d467895e8a65b", spacing: "12" }, this.toasts.map((t) => {
+    return o(e, { key: "6b3eb6381417fc57320494b85675634ec8cbd28e", role: "status" }, o("swirl-stack", { key: "26b7c2f18fefc092f0822a995f1066ef8c8fc6ef", spacing: "12" }, this.toasts.map((t) => {
       const s = { ...t, content: void 0 };
-      return a("swirl-toast", { key: t.toastId, onDismiss: this.onDismiss, ...s }, t.content);
+      return o("swirl-toast", { key: t.toastId, onDismiss: this.onDismiss, ...s }, t.content);
     })));
   }
 };
 export {
-  h as swirl_toast_provider
+  l as swirl_toast_provider
 };

package/dist/{swirl-toast.entry.8a27a657.js → swirl-toast.entry.5fabebe0.js}

@@ -1,11 +1,11 @@
-import { r as o, c as n, h as e, H as r } from "./index.712081f1.js";
-import { c as d } from "./index-267776a4.6beb4f4b.js";
-import { g as c } from "./utils-877a768f.c277f897.js";
+import { r as o, c as n, h as e, H as r } from "./index.24a4f18e.js";
+import { c } from "./index-267776a4.6beb4f4b.js";
+import { g as d } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const h = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{width:1.25rem;height:1.25rem;margin-top:0}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}.toast__content ::part(link){color:var(--text-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}", l = h, m = class {
   constructor(s) {
-    o(this, s), this.dismiss = n(this, "dismiss", 7), this.desktopMediaQuery = c(), this.desktopMediaQueryHandler = (t) => {
+    o(this, s), this.dismiss = n(this, "dismiss", 7), this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (t) => {
       this.forceIconProps(t.matches);
     }, this.onDismiss = () => {
       this.dismiss.emit(this.toastId);
@@ -35,8 +35,8 @@ const h = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;
     !Boolean(this.timeout) || (clearTimeout(this.timeout), this.timeout = void 0);
   }
   render() {
-    const s = d("toast", `toast--intent-${this.intent}`);
-    return e(r, { key: "ff494adb183bfd3b0cf64f854370f65d9025688d" }, e("div", { key: "ec42812f4e085d3853d529c5155847d3166d7235", class: s }, this.icon && e("span", { key: "9565980b265dfb58f2d3f4625642c4b42b286bb0", class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (t) => this.iconEl = t }), e("span", { key: "20a9d20e6a1250d8584768db191033b7dca0faeb", class: "toast__content", innerHTML: this.content, part: "toast__content" }, e("slot", { key: "59a95eece747a0a434c6730c84ca8138b7036b5c" })), e("button", { key: "413e402fb6504c7791d68e21b2dd333a79fb4e2e", "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && e("swirl-icon-close", { key: "76fb12bf16bdd0f7dfb1d51becf2774e438921a3", ref: (t) => this.dismissIconEl = t }))));
+    const s = c("toast", `toast--intent-${this.intent}`);
+    return e(r, { key: "676e4706190a84cee6b6b6b1800e8788fc1ba828" }, e("div", { key: "9cc47f4d3c482c091b95d43b497dd90e12e02528", class: s }, this.icon && e("span", { key: "ad828f1c327c8ce8628f68ccf7364ee345dc974f", class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (t) => this.iconEl = t }), e("span", { key: "7cc6eebcf936e40ebf1bd1f661b595a96dd29d72", class: "toast__content", innerHTML: this.content, part: "toast__content" }, e("slot", { key: "df2debd57ed2aa87b529aa81fda26bd1fc02a721" })), e("button", { key: "1d1c2938862a572253611bf226265f3cc3e8ac71", "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && e("swirl-icon-close", { key: "a1ea242f9764316d018c37af9c2c55cc0a11a6a0", ref: (t) => this.dismissIconEl = t }))));
   }
   static get watchers() {
     return {

package/dist/{swirl-toggle-button.entry.ebf8a112.js → swirl-toggle-button.entry.4eca1c12.js}

@@ -1,4 +1,4 @@
-import { r as e, h as o } from "./index.712081f1.js";
+import { r as e, h as o } from "./index.24a4f18e.js";
 import { c as r } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -12,7 +12,7 @@ const s = ":host{display:inline-block}:host *{box-sizing:border-box}.button{disp
     const t = r("button", {
       "button--pressed": this.isPressed
     });
-    return o("button", { key: "f1fd00b70d49441eed96d0c3cd3b513abc2e2942", class: t, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, o("span", { key: "62b776441bc1175ff19ceaeebd19bb7ea9818b51", class: "button__label" }, this.label));
+    return o("button", { key: "60ec065056c43a35a655d5a659230feaa2dfbe7c", class: t, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, o("span", { key: "90282ff1de8a2bdb023c32f3e41c79c2d763bbaf", class: "button__label" }, this.label));
   }
 };
 n.style = i;

package/dist/{swirl-toggle-group.entry.18201c94.js → swirl-toggle-group.entry.3943ef35.js}

@@ -1,4 +1,4 @@
-import { r as g, c as i, h as o, g as r } from "./index.712081f1.js";
+import { r as g, c as i, h as o, g as r } from "./index.24a4f18e.js";
 import "react";
 import "react-dom";
 const l = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-4);background-color:var(--s-surface-default);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1)}", n = l, d = class {
@@ -39,7 +39,7 @@ const l = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-grou
     });
   }
   render() {
-    return o("swirl-stack", { key: "dd91f7ccecce01bf2bd29a155b888b1c7ff0325e", class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, o("slot", { key: "b22ba319fb73e5c448e513156f64f817766fd055", onSlotchange: this.onSlotChange }));
+    return o("swirl-stack", { key: "38ba2ae6fd183ef0b1f45af3aa09dc13d9a0fc7e", class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, o("slot", { key: "333d7b64beda4587448e92a7dc70e9ff7e7dbd40", onSlotchange: this.onSlotChange }));
   }
   get el() {
     return r(this);

package/dist/{swirl-toolbar.entry.e8e08487.js → swirl-toolbar.entry.095c4bf2.js}

@@ -1,4 +1,4 @@
-import { r as n, h as s, H as r, g as i } from "./index.712081f1.js";
+import { r as n, h as s, H as r, g as i } from "./index.24a4f18e.js";
 import { b as a } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
@@ -44,7 +44,7 @@ const c = ":host{display:block}:host *{box-sizing:border-box}", l = c, d = class
     });
   }
   render() {
-    return s(r, { key: "0bd307a0ad1039736f25124308ad98dc4fa03d18" }, s("swirl-stack", { key: "626904a735a98982c9f84aa1e27e1e4b7cd78606", align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: !0 }, s("slot", { key: "c4f06b12016aa2589d470ca1dcf4f53a3ed2c099" })));
+    return s(r, { key: "5416d10668ae2e88c6ea3501184dffe87779b9f5" }, s("swirl-stack", { key: "02e4d2a3d41b63d50fa85cbab86ff0a11bfb02ee", align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: !0 }, s("slot", { key: "46c598bd3a3b716f28c897669396bd276de3a2dd" })));
   }
   get el() {
     return i(this);

package/dist/{swirl-tooltip.entry.925f3864.js → swirl-tooltip.entry.cee32bd8.js}

@@ -1,5 +1,5 @@
-import { r as p, h as i, H as h, g as d } from "./index.712081f1.js";
-import { b as c, c as m, a as u, o as f, s as b, f as w } from "./floating-ui.dom.esm-bef21834.ec4a9cbf.js";
+import { r as p, h as i, H as h, g as c } from "./index.24a4f18e.js";
+import { b as d, c as m, a as u, o as b, s as f, f as w } from "./floating-ui.dom.esm-bef21834.ec4a9cbf.js";
 import { c as y } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -14,7 +14,7 @@ const v = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host
         return;
       const s = [
         ...this.options.middleware.filter((l) => l.name !== "arrow"),
-        c({ element: this.arrowElement, padding: 12 })
+        d({ element: this.arrowElement, padding: 12 })
       ];
       this.actualPosition = await m(t, this.popperEl, { ...this.options, middleware: s });
       const e = (n = this.actualPosition.middlewareData.arrow) == null ? void 0 : n.x, o = (r = this.actualPosition.middlewareData.arrow) == null ? void 0 : r.y;
@@ -37,7 +37,7 @@ const v = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host
     }, this.updateOptions = () => {
       const t = +getComputedStyle(document.documentElement).getPropertyValue("--s-space-12").replace("rem", "") * 16;
       this.options = {
-        middleware: [f(t), b(), w()],
+        middleware: [b(t), f(), w()],
         placement: this.position,
         strategy: this.positioning
       };
@@ -70,17 +70,17 @@ const v = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host
       "tooltip--active": this.active,
       "tooltip--visible": this.visible
     });
-    return i(h, { key: "529375924a131657990ae49ca1577e384d7fb757", onKeydown: this.onKeydown }, i("span", { key: "6738c27b573fd2b6b9ddf090454a67fe1f28a7fa", class: a }, i("span", { key: "4152986331edada0253c5eee675c2841ddee4f21", class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, i("slot", { key: "15e1427b464e34bd69aa29527d99294e56e2a432" })), i("span", { key: "1632c52e95fd3b944ba6377beeab511deb1e995d", class: "tooltip__popper", ref: (o) => this.popperEl = o, style: {
+    return i(h, { key: "bb0876790cd15f687658d29771ceb91b8dd88001", onKeydown: this.onKeydown }, i("span", { key: "9da9846ede5394a165faa1ded155f88f9760a947", class: a }, i("span", { key: "327bbb9753c47e08c0909f2df05aa4d86b5a4022", class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, i("slot", { key: "5b5a39b6507808a3926b613af1612b19d64585ad" })), i("span", { key: "81122c462ef32fb61185efe4bd796eec600eb341", class: "tooltip__popper", ref: (o) => this.popperEl = o, style: {
       top: Boolean(this.actualPosition) ? `${(s = this.actualPosition) == null ? void 0 : s.y}px` : "",
       left: Boolean(this.actualPosition) ? `${(e = this.actualPosition) == null ? void 0 : e.x}px` : "",
       position: this.positioning
-    } }, this.visible && i("span", { key: "f25541f0a71832bc92bd90cadabb38e22c5e8f1a", class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, i("span", { key: "e7e07ec6b2dbebe5a713e05d9c608a91f8128c80", class: "tooltip__content", innerHTML: this.content })), i("span", { key: "5772550951013f59e059277ba958efc6380f8f73", class: "tooltip__arrow", ref: (o) => this.arrowElement = o, style: {
+    } }, this.visible && i("span", { key: "5bdfba1be1a42825041510626995a68726a6cec2", class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, i("span", { key: "98b85837ac1ab5e8809bc264e67eb6b058837405", class: "tooltip__content", innerHTML: this.content })), i("span", { key: "d6486b3b8b03567eadc72b514c2fa874040c1e6c", class: "tooltip__arrow", ref: (o) => this.arrowElement = o, style: {
       ...this.arrowStyles,
       visibility: this.visible ? "visible" : "hidden"
     } }))));
   }
   get el() {
-    return d(this);
+    return c(this);
   }
   static get watchers() {
     return {

package/dist/{swirl-tree-navigation-item.entry.a4c2012d.js → swirl-tree-navigation-item.entry.3ab8f5c4.js}

@@ -1,4 +1,4 @@
-import { r, c as s, h as e, H as d, g as o } from "./index.712081f1.js";
+import { r, c as s, h as e, H as d, g as o } from "./index.24a4f18e.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -49,12 +49,12 @@ const h = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.t
       "tree-navigation-item__link--active": this.active,
       "tree-navigation-item__link--has-icon": Boolean(this.icon)
     });
-    return e(d, { key: "f18b67c58e0aa8fac5291b8c0a6214852021cc6c", role: "none" }, e("li", { key: "7aa01185db544c5a5d9f97383c75dde04a22dc18", class: {
+    return e(d, { key: "91d0825352336d88b1c20738c08f93833957b615", role: "none" }, e("li", { key: "44b1b57d68086aed645921d86ec588dd10a93345", 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: "817727ed7c788a5faa868fb25effdc3518167228", 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: "4a4a71f00bc9a9825a51d39a0dc4dacd3a099400", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "4b887aef2710b7d99ca08879cec167c5bf0d1811", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "0c2416f44caf82a332c79f70856f1b1f7aab93a0", class: "tree-navigation-item__label" }, e("span", { key: "99283c67764645d4eae695c7db89c9526f3cd108", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "0e97d7a64bfb73b2167d6778186cbf8db2981136", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "7c8e76613a0f2534c5f72315cd2266551f96f233", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "9a1783de80521b08918cf06081846b533b4052d6", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "5486be6428722d1b6b28f920f0bd17311c71ab99", size: 16, role: "img", "aria-label": "External link" }))))), this.hasChildren && e("ul", { key: "ebf61cb2e6ec23082a58282e0028ce2dd68097e0", class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (n) => this.childrenRef = n, style: {
+    }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : void 0, "aria-level": this.level }, e(i, { key: "645f8b69e22a756704b64cfeb1147fad52ae21ea", 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: "ee3be24c31d978b237f3365eb9db5ebaa9dcd0bd", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "1a6ba5fa0d42d36b5cef10ae4b5c4a674c54e0a9", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "fb45c421326713a33e4aea6235da052b7faa7267", class: "tree-navigation-item__label" }, e("span", { key: "f1d44d360ffdd000901d94d7ccf3a339b20ff8a1", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "60092336a4f8258de8dc255d4ff3561bcb421f88", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "c226108f24408a27febff0f21508fbc3053d6dfd", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "f25c601b3bb4a953cb2c50a860fc8c82e34aa4c9", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "f546a936e52e4502d908d35087e10fc1bc042959", size: 16, role: "img", "aria-label": "External link" }))))), this.hasChildren && e("ul", { key: "065e64f7762c564c0210395aabb9ba3521e5b4cd", 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: "519cdbd7d36202ad4ead9fd87900a70a6f0c7d11" }))));
+    } }, e("slot", { key: "0ac59a0c165c0e515af930c47da8666f1eac14dc" }))));
   }
   get el() {
     return o(this);

package/dist/{swirl-tree-navigation.entry.f16b6cde.js → swirl-tree-navigation.entry.d52d39c1.js}

@@ -1,4 +1,4 @@
-import { r as t, h as e, H as i } from "./index.712081f1.js";
+import { r as t, h as e, H as i } from "./index.24a4f18e.js";
 import "react";
 import "react-dom";
 const r = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}", s = r, o = class {
@@ -6,7 +6,7 @@ const r = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{ma
     t(this, a), this.label = void 0;
   }
   render() {
-    return e(i, { key: "359b8985019aacfff300043c67f0553a6ed87471" }, e("ul", { key: "f6bdb96a9817f370ab2b926faf8db231534d22b3", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "7fe3965d7916fcf181f851e55d303a413923cc40" })));
+    return e(i, { key: "6170dc1783135092d40e783ee2c8377035057fbd" }, e("ul", { key: "dc04e572d7a61c96acf21aa3d026b12373d089a9", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "04fb3e839d94ef7bfa13cb0b624909a567c2ba79" })));
   }
 };
 o.style = s;