@getflip/swirl-components-react 0.442.0 → 0.444.0

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

@@ -1,53 +0,0 @@
-import { r as n, c as o, h as s, H as r } from "./index.cce5c1d5.js";
-import { c } from "./index-orsBiyT_.fc4357c3.js";
-import { D as d } from "./media-query.service-BSiuFyfW.201120cc.js";
-import "react";
-import "react-dom";
-import "./utils-Dn2SWlGn.dbe5b17a.js";
-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-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}}.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__action-button{--swirl-plain-button-text-color-default:var(--s-text-on-status);--swirl-plain-button-text-color-hovered:var(--s-text-on-status);--swirl-plain-button-text-color-pressed:var(--s-text-on-status);margin-left:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__action-button{margin-top:-1px}}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__dismiss-button{margin-top:calc(-1 * var(--s-space-2))}}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}", l = class {
-  constructor(t) {
-    n(this, t), this.action = o(this, "action", 7), this.dismiss = o(this, "dismiss", 7), this.accessibleDismissLabel = "Dismiss", this.intent = "default", this.mediaQueryUnsubscribe = () => {
-    }, this.onAction = () => {
-      this.action.emit(this.toastId);
-    }, this.onDismiss = () => {
-      this.dismiss.emit(this.toastId);
-    };
-  }
-  watchDuration() {
-    this.startTimer();
-  }
-  componentDidLoad() {
-    this.startTimer(), this.mediaQueryUnsubscribe = d.subscribe((t) => {
-      this.forceIconProps(t);
-    });
-  }
-  disconnectedCallback() {
-    this.mediaQueryUnsubscribe();
-  }
-  forceIconProps(t) {
-    var a;
-    const i = (a = this.iconEl) == null ? void 0 : a.children[0], e = this.dismissIconEl;
-    i == null || i.setAttribute("size", t ? "20" : "24"), e == null || e.setAttribute("size", t ? "20" : "24");
-  }
-  startTimer() {
-    this.clearTimer(), !(this.duration === void 0 || this.duration === 1 / 0) && (this.timeout = setTimeout(() => {
-      this.dismiss.emit(this.toastId);
-    }, this.duration));
-  }
-  clearTimer() {
-    !Boolean(this.timeout) || (clearTimeout(this.timeout), this.timeout = void 0);
-  }
-  render() {
-    const t = c("toast", `toast--intent-${this.intent}`);
-    return s(r, { key: "c6c39c69618e55d3cbf836c2181358aea369bfac" }, s("div", { key: "e4d885a7fe1a86df561157829856c7714ef68a8f", class: t }, this.icon && s("span", { key: "3728a76200fc9103c4d2fa405ccdb06dfcb210f1", class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (i) => this.iconEl = i }), s("span", { key: "3941b37e5259e44f9767304643190b3813e2327d", class: "toast__content", innerHTML: this.content, part: "toast__content" }, s("slot", { key: "e7bedf5747061d07519036ae4dabd194a46fe395" })), this.actionLabel && s("swirl-button", { key: "2882961418fdbfac244e4030d356c24e4e6eced1", class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }), s("button", { key: "a4f862b504cf7f73e73927ae7acefb3e4581a9cb", "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && s("swirl-icon-close", { key: "4d666bd0140ae2abc96ef712ae1a2970bf287b75", ref: (i) => this.dismissIconEl = i }))));
-  }
-  static get watchers() {
-    return {
-      duration: ["watchDuration"]
-    };
-  }
-};
-l.style = h;
-export {
-  l as swirl_toast
-};

package/dist/swirl-toggle-button.entry.489f5cb7.js

@@ -1,21 +0,0 @@
-import { r as s, h as t } from "./index.cce5c1d5.js";
-import { c as o } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const i = ":host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-surface-sunken-hovered)}.button:active{background-color:var(--s-surface-sunken-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}", n = class {
-  constructor(e) {
-    s(this, e), this.isPressed = !1, this.onClick = () => {
-      this.isPressed = !0;
-    };
-  }
-  render() {
-    const e = o("button", {
-      "button--pressed": this.isPressed
-    });
-    return t("button", { key: "819217a82456737d031a757044ab8deea0f3ceb7", class: e, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && t("swirl-icon", { key: "ef7dc10cb39b4945e72b7012fcd4aa9a5ccb21b3", class: "button__icon", glyph: this.icon }), t("span", { key: "6c7da8250b0452ca140de6eb3dabcef0857d5dba", class: "button__label" }, this.label));
-  }
-};
-n.style = i;
-export {
-  n as swirl_toggle_button
-};

package/dist/swirl-toggle-group.entry.b7ebf547.js

@@ -1,60 +0,0 @@
-import { r as i, c as g, h as o, g as r } from "./index.cce5c1d5.js";
-import { c as l } from "./index-orsBiyT_.fc4357c3.js";
-import "react";
-import "react-dom";
-const a = ":host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}", n = class {
-  constructor(t) {
-    i(this, t), this.selectedToggleChange = g(this, "selectedToggleChange", 7), this.variant = "flat", this.toggleButtons = [], this.onSlotChange = () => {
-      this.toggleButtons = Array.from(this.el.querySelectorAll("swirl-toggle-button")), this.setTogglePressedStates();
-    };
-  }
-  watchSelectedToggleId(t, e) {
-    t !== e && (this.selectedToggleChange.emit(t), this.setTogglePressedStates());
-  }
-  onClick(t) {
-    const e = t.target;
-    if ((e == null ? void 0 : e.tagName) === "SWIRL-TOGGLE-BUTTON") {
-      t.stopPropagation();
-      const s = e;
-      this.selectedToggleId = s.identifier;
-    }
-  }
-  setTogglePressedStates() {
-    var e;
-    if (!((e = this.toggleButtons) != null && e.length))
-      return;
-    if (!this.selectedToggleId) {
-      this.toggleButtonWithId(this.toggleButtons[0].identifier);
-      return;
-    }
-    if (!this.toggleButtons.some((s) => s.identifier === this.selectedToggleId)) {
-      this.toggleButtonWithId(this.toggleButtons[0].identifier);
-      return;
-    }
-    this.toggleButtonWithId(this.selectedToggleId);
-  }
-  toggleButtonWithId(t) {
-    var e;
-    !((e = this.toggleButtons) != null && e.length) || this.toggleButtons.forEach((s) => {
-      s.identifier === t ? s.isPressed = !0 : s.isPressed = !1;
-    });
-  }
-  render() {
-    const t = l("toggle-group", `toggle-group--variant-${this.variant}`, {
-      "toggle-group--elevated": this.elevated
-    });
-    return o("swirl-stack", { key: "f31ad927433989bf9bf75b48a5e8242e50fea2e1", class: t, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, o("slot", { key: "e7421d43d76b85b41d1832a82ea4c88d5dd0f7b4", onSlotchange: this.onSlotChange }));
-  }
-  get el() {
-    return r(this);
-  }
-  static get watchers() {
-    return {
-      selectedToggleId: ["watchSelectedToggleId"]
-    };
-  }
-};
-n.style = a;
-export {
-  n as swirl_toggle_group
-};

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

@@ -1,56 +0,0 @@
-import { r, h as s, H as n, g as i } from "./index.cce5c1d5.js";
-import { k as a } from "./utils-Dn2SWlGn.dbe5b17a.js";
-import "react";
-import "react-dom";
-const c = ":host{display:block}:host *{box-sizing:border-box}", l = class {
-  constructor(e) {
-    r(this, e), this.orientation = "horizontal", this.onKeyDown = (t) => {
-      t.code === "ArrowDown" || t.code === "ArrowRight" ? (t.preventDefault(), this.focusNextItem()) : (t.code === "ArrowUp" || t.code === "ArrowLeft") && (t.preventDefault(), this.focusPreviousItem());
-    };
-  }
-  componentDidLoad() {
-    var o;
-    const e = this.getItems();
-    this.deactivateTabIndexes(e);
-    const t = (o = e[0]) == null ? void 0 : o.querySelector("button");
-    !Boolean(t) || (t.tabIndex = 0);
-  }
-  getItems() {
-    return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"));
-  }
-  focusNextItem() {
-    const e = this.getItems(), o = (this.getActiveItemIndex(e) + 1) % e.length;
-    this.focusItem(e[o]);
-  }
-  focusPreviousItem() {
-    const e = this.getItems(), t = this.getActiveItemIndex(e), o = t === 0 ? e.length - 1 : t - 1;
-    this.focusItem(e[o]);
-  }
-  getActiveItemIndex(e) {
-    const t = a();
-    return e.findIndex((o) => o === (t == null ? void 0 : t.closest("swirl-button, swirl-chip")));
-  }
-  focusItem(e) {
-    const t = this.getItems();
-    if (this.deactivateTabIndexes(t), !Boolean(e))
-      return;
-    const o = e.querySelector("button");
-    !Boolean(o) || (o.tabIndex = 0, o.focus());
-  }
-  deactivateTabIndexes(e) {
-    e.forEach((t) => {
-      const o = t.querySelector("button");
-      !Boolean(o) || (o.tabIndex = -1);
-    });
-  }
-  render() {
-    return s(n, { key: "9fd4884176c4b0eaef9dcfe1ed4aa71cadcecdce" }, s("swirl-stack", { key: "35022ae48962fb327050d6b1d1f7e4cc24526d3a", 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: "aa6241a3678c5264e4dfb89b5e1e301b466429ea" })));
-  }
-  get el() {
-    return i(this);
-  }
-};
-l.style = c;
-export {
-  l as swirl_toolbar
-};

package/dist/swirl-tooltip.entry.2b24db96.js

@@ -1,113 +0,0 @@
-import { r as c, h as e, H as h, g as d } from "./index.cce5c1d5.js";
-import { b as u, c as f, o as m, s as b, f as w, a as g } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
-import { c as v } from "./index-orsBiyT_.fc4357c3.js";
-import { n } from "./utils-Dn2SWlGn.dbe5b17a.js";
-import "react";
-import "react-dom";
-const _ = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}", y = class {
-  constructor(i) {
-    c(this, i), this.active = !0, this.delay = 200, this.intent = "default", this.maxWidth = "17.5rem", this.position = "top", this.trigger = ["focus", "hover"], this.visible = !1, this.onKeydown = (t) => {
-      t.code === "Escape" && this.hide();
-    }, this.onFocusIn = () => {
-      this.trigger.includes("focus") && this.show();
-    }, this.onFocusOut = () => {
-      this.trigger.includes("focus") && this.hide();
-    }, this.reposition = async () => {
-      var r, l;
-      const t = this.el.children[0];
-      if (!Boolean(t) || !Boolean(this.popperEl))
-        return;
-      const s = [
-        ...this.options.middleware.filter((p) => p && p.name !== "arrow"),
-        u({ element: this.arrowElement, padding: 12 })
-      ];
-      this.actualPosition = await f(t, this.popperEl, { ...this.options, middleware: s });
-      const o = (r = this.actualPosition.middlewareData.arrow) == null ? void 0 : r.x, a = (l = this.actualPosition.middlewareData.arrow) == null ? void 0 : l.y;
-      this.arrowStyles = {
-        left: Boolean(o) ? o + "px" : void 0,
-        top: Boolean(a) ? a + "px" : void 0
-      };
-    }, this.showWithDelay = () => {
-      !this.active || (Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.showTimeout = setTimeout(() => {
-        this.show();
-      }, this.delay));
-    }, this.updateOptions = () => {
-      const t = n("--s-space-12"), s = n("--s-space-8"), o = n("--s-space-16");
-      this.options = {
-        middleware: [
-          m(t),
-          b({
-            padding: {
-              top: s,
-              bottom: s,
-              left: o,
-              right: o
-            }
-          }),
-          w()
-        ],
-        placement: this.position,
-        strategy: "fixed"
-      };
-    };
-  }
-  watchPosition() {
-    this.updateOptions();
-  }
-  onMouseEnter() {
-    this.trigger.includes("hover") && this.showWithDelay();
-  }
-  onMouseLeave() {
-    this.trigger.includes("hover") && this.hide();
-  }
-  onWindowResize() {
-    !this.active || this.reposition();
-  }
-  onWindowScroll() {
-    !this.active || !this.visible || this.reposition();
-  }
-  componentWillLoad() {
-    this.reposition();
-  }
-  componentDidLoad() {
-    this.positioning !== void 0 && console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.'), this.updateOptions();
-  }
-  async show() {
-    !this.active || (this.visible = !0, requestAnimationFrame(() => {
-      var t;
-      const i = this.el.children[0];
-      !Boolean(i) || ((t = this.popperEl) == null || t.showPopover(), this.reposition(), this.disableAutoUpdate = g(i, this.popperEl, this.reposition.bind(this)));
-    }));
-  }
-  async hide() {
-    var i, t;
-    Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.visible = !1, (i = this.popperEl) == null || i.hidePopover(), (t = this.disableAutoUpdate) == null || t.call(this);
-  }
-  render() {
-    var t, s, o;
-    const i = v("tooltip", `tooltip--actual-placement-${(t = this.actualPosition) == null ? void 0 : t.placement}`, `tooltip--intent-${this.intent}`, {
-      "tooltip--active": this.active,
-      "tooltip--visible": this.visible
-    });
-    return e(h, { key: "48ab3278a67c7d1d262b217e02592c5cd9cf69f1", onKeydown: this.onKeydown }, e("span", { key: "3eab41bc1f7fd5d1ae140789b2d5bd1104f81340", class: i }, e("span", { key: "e19d18cacb63cbe946ee52ce11f387e28aaeb3c2", class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, e("slot", { key: "0579888c5ee02a3efe15d22277006aa896554940" })), e("span", { key: "b816e2464f8c8353bbee9597ce4e1b9f6babe07d", class: "tooltip__popper", popover: "manual", ref: (a) => this.popperEl = a, style: {
-      top: Boolean(this.actualPosition) ? `${(s = this.actualPosition) == null ? void 0 : s.y}px` : "",
-      left: Boolean(this.actualPosition) ? `${(o = this.actualPosition) == null ? void 0 : o.x}px` : "",
-      maxWidth: this.maxWidth
-    } }, this.visible && e("span", { key: "50a16fd107c4580da7183cd36916790945aacc82", class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, e("span", { key: "0d71bca889cb4bd8169e7cc890ffaa4d7e71b68e", class: "tooltip__content", innerHTML: this.content })), e("span", { key: "dcae7a9101b96ca1d6258eb285e6b309d3e4b989", class: "tooltip__arrow", ref: (a) => this.arrowElement = a, style: {
-      ...this.arrowStyles,
-      visibility: this.visible ? "visible" : "hidden"
-    } }))));
-  }
-  get el() {
-    return d(this);
-  }
-  static get watchers() {
-    return {
-      position: ["watchPosition"]
-    };
-  }
-};
-y.style = _;
-export {
-  y as swirl_tooltip
-};

package/dist/swirl-tree-navigation-item.entry.88c4bdf1.js

@@ -1,71 +0,0 @@
-import { r, c as s, h as e, H as d, g as o } from "./index.cce5c1d5.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(d, { key: "bde67c3626898c692b6ec67ade2784c6576586c8", role: "none" }, e("li", { key: "58c38d43d5886c7bf000e6f764b98cd97f0ddf41", 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: "e09b04d21549b61c1ab8ddf5f1b7372e2e6c70f1", 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: "8b211875da1587ad74e8083a21459a4d818fbe40", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "2d9d571b0b4e771ab86fd6537c884d0b7b89921e", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "ad2cad8de060f1829077e5ab589c4842adf49dcc", class: "tree-navigation-item__label" }, e("span", { key: "4f10002aa8f59e8dc9e97a0afd096d5dd1b0e50e", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "e022b8b218c9afabb9e8168deba654b9dffed089", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "2cc5603ad7b5c5b2f3a1932f3d4080ef7fd7965b", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "336dedff994a58eea28ee9e803887e829be56378", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "acd053ce14a62ef1fc2f49342916ee09257f889b", size: 16, role: "img", "aria-label": "External link" }))))), this.hasChildren && e("ul", { key: "e362e1a3b860203d547bec3888bcf1f220a36d4b", 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: "37dc7e6e29b1394828324b5a5f3a72f822bdde21" }))));
-  }
-  get el() {
-    return o(this);
-  }
-  static get watchers() {
-    return {
-      expanded: ["handleExpandedChange"]
-    };
-  }
-};
-c.style = h;
-export {
-  c as swirl_tree_navigation_item
-};

package/dist/swirl-tree-navigation.entry.dabf9cad.js

@@ -1,15 +0,0 @@
-import { r, h as e, H as t } from "./index.cce5c1d5.js";
-import "react";
-import "react-dom";
-const i = ":host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}", s = class {
-  constructor(a) {
-    r(this, a);
-  }
-  render() {
-    return e(t, { key: "d35918d0a4586d0638d3db2d59feb2f8968f8e17" }, e("ul", { key: "078e958b6a1da0802e16fae4352be6858180b1dd", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "f7bd664f789a2ac290312760c671dbb4d4af9c27" })));
-  }
-};
-s.style = i;
-export {
-  s as swirl_tree_navigation
-};

package/dist/swirl-tree-view-item.entry.5e326e92.js

@@ -1,203 +0,0 @@
-import { r as w, c as l, f as c, h as s, F as b, H as u, g as y } from "./index.cce5c1d5.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";
-import "react";
-import "react-dom";
-const x = "swirl-tree-view-item{display:block;flex-grow:1}swirl-tree-view-item *{box-sizing:border-box}.tree-view-item{list-style:none}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost){border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--chosen.tree-view-item--drag:not(.tree-view-item--ghost) .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--ghost{border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm)}.tree-view-item--ghost .tree-view-item__link:hover .tree-view-item__drag-handle{opacity:0}.tree-view-item--moving-via-keyboard{position:relative;z-index:1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-3)}.tree-view-item--moving-via-keyboard .tree-view-item__link{background-color:var(--s-background-default)}.tree-view-item--moving-via-keyboard .tree-view-item__link:focus-visible{outline:none}.tree-view-item--cannot-keyboard-drop{opacity:0.5}.tree-view-item--active>.tree-view-item__link{background-color:var(--s-background-hovered)}.tree-view-item--has-tags .tree-view-item__tags{display:flex}.tree-view-item__children{display:flex;margin:0;padding:0 0 0 var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column;gap:var(--s-space-2)}.tree-view-item__children--drop-zone{min-height:0.5rem;margin-top:-0.5rem}.tree-view-item__link{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link:hover{background-color:var(--s-background-hovered)}.tree-view-item__link:hover .tree-view-item__drag-handle{opacity:1}.tree-view-item__link:active{background-color:var(--s-background-pressed)}.tree-view-item__link:focus:not(:focus-visible){outline:none}.tree-view-item__link:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link{font-size:var(--s-font-size-sm)}}.tree-view-item__drag-handle{display:inline-flex;flex-shrink:0;cursor:grab;opacity:0}.tree-view-item__drag-handle:active{cursor:grabbing}.tree-view-item__icon{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon ::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon{width:1.25rem;height:1.25rem}}.tree-view-item__label{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}", D = class {
-  constructor(t) {
-    w(this, t), this.dropTreeViewItem = l(this, "dropTreeViewItem", 7), this.expandedChange = l(this, "expandedChange", 7), this.itemSelected = l(this, "itemSelected", 7), this.startKeyboardMoveEvent = l(this, "startKeyboardMove", 7), this.endKeyboardMoveEvent = l(this, "endKeyboardMove", 7), this.keyboardMoveEvent = l(this, "keyboardMove", 7), this.expandable = !0, this.cannotKeyboardDropInCurrentPosition = !1, this.dragDropItemSelector = "swirl-tree-view-item", this.enableDragDrop = !1, this.expanded = !1, this.level = 0, this.movingViaKeyboard = !1, this.selected = !1, this.onFocus = () => {
-      !this.selected && this.getSemantics() === "tree" && this.select();
-    }, this.onKeyDown = (e) => {
-      if (e.code === "Space") {
-        e.preventDefault(), this.toggleKeyboardMove();
-        return;
-      }
-      !this.movingViaKeyboard || (e.code === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), this.moveItem("down")) : e.code === "ArrowUp" && (e.preventDefault(), e.stopPropagation(), this.moveItem("up")));
-    }, this.onClickCollapse = (e) => {
-      e.preventDefault(), e.stopPropagation(), this.collapse();
-    }, this.onClickExpand = (e) => {
-      e.preventDefault(), e.stopPropagation(), this.expand();
-    };
-  }
-  componentWillLoad() {
-    this.updateLevel();
-    const t = this.el.closest("swirl-tree-view");
-    this.enableDragDrop = t == null ? void 0 : t.enableDragDrop, this.canDrop = t == null ? void 0 : t.canDrop, this.dragDropItemSelector = t == null ? void 0 : t.dragDropItemSelector;
-  }
-  componentDidLoad() {
-    this.setUpDragDrop();
-  }
-  async expand() {
-    this.expanded || !this.expandable || this.getSemantics() !== "tree" || (this.expanded = !0, this.expandedChange.emit(this.expanded));
-  }
-  async collapse() {
-    !this.expanded || !this.expandable || this.getSemantics() !== "tree" || (this.expanded = !1, this.expandedChange.emit(this.expanded));
-  }
-  async select(t) {
-    var e;
-    this.getSemantics() === "tree" && (this.selected = !0, t && ((e = this.link) == null || e.focus()), this.itemSelected.emit(this.el));
-  }
-  async unselect() {
-    this.getSemantics() === "tree" && (this.selected = !1);
-  }
-  setUpDragDrop() {
-    this.sortable && (this.sortable.destroy(), this.sortable = void 0), this.enableDragDrop && this.childList && (this.sortable = new I(this.childList, {
-      ...p,
-      draggable: this.dragDropItemSelector,
-      onMove: (t) => {
-        var e;
-        return typeof this.canDrop == "function" ? this.canDrop({
-          parentId: (e = t.to.closest("swirl-tree-view-item")) == null ? void 0 : e.itemId,
-          position: Math.max(Array.from(t.to.children).indexOf(t.related), 0)
-        }) : !0;
-      },
-      onStart: (t) => {
-        var e, i;
-        (i = (e = p).onStart) == null || i.call(e, t);
-      },
-      onEnd: (t) => {
-        var m, d, v, g, f;
-        t.stopPropagation(), (d = (m = p).onEnd) == null || d.call(m, t);
-        const { from: e, to: i, newIndex: r, oldIndex: n, item: o } = t, a = (v = e.closest("swirl-tree-view-item")) == null ? void 0 : v.itemId, h = (g = i.closest("swirl-tree-view-item")) == null ? void 0 : g.itemId;
-        this.dropTreeViewItem.emit({
-          newIndex: r,
-          oldIndex: n,
-          item: o,
-          itemId: (f = o.id) != null ? f : o.querySelector(":scope > swirl-tree-view-item").id,
-          newNextSiblingItemId: r < i.children.length - 1 ? i.children[r + 1].id : void 0,
-          newPrevSiblingItemId: r > 0 ? i.children[r - 1].id : void 0,
-          sourceParentItemId: a,
-          targetParentItemId: h
-        });
-      }
-    }));
-  }
-  updateLevel() {
-    var e, i;
-    let t = (e = this.el.parentElement) == null ? void 0 : e.closest("swirl-tree-view-item");
-    for (; Boolean(t); )
-      this.level += 1, t = (i = t.parentElement) == null ? void 0 : i.closest("swirl-tree-view-item");
-  }
-  getItemContext() {
-    var i;
-    const t = (i = this.getParentTreeViewItem()) != null ? i : this.el.closest("swirl-tree-view"), e = Array.from(t.querySelectorAll(`
-        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},
-        :scope > .tree-view > ${this.dragDropItemSelector}
-      `));
-    return {
-      canDrop: !this.cannotKeyboardDropInCurrentPosition,
-      parent: t,
-      position: e.indexOf(this.el),
-      siblingCount: e.length
-    };
-  }
-  getParentItem() {
-    return this.getElementToMove().parentElement.closest(this.dragDropItemSelector);
-  }
-  getParentTreeViewItem() {
-    return this.el.parentElement.closest("swirl-tree-view-item");
-  }
-  getElementToMove() {
-    return this.dragDropItemSelector ? this.el.closest(this.dragDropItemSelector) : this.el;
-  }
-  getKeyboardMoveEventData() {
-    const { canDrop: t, parent: e, position: i, siblingCount: r } = this.getItemContext();
-    if (!!e)
-      return {
-        canDrop: t,
-        parentLabel: e.label,
-        childrenCount: r,
-        itemLabel: this.label,
-        position: i
-      };
-  }
-  toggleKeyboardMove() {
-    this.movingViaKeyboard ? this.endKeyboardMove() : this.startKeyboardMove();
-  }
-  endKeyboardMove() {
-    var r, n, o, a;
-    const { parent: t, position: e } = this.getItemContext();
-    if (typeof this.canDrop == "function" && !this.canDrop({ parentId: t.id, position: e }))
-      return;
-    this.movingViaKeyboard = !1;
-    const i = this.getKeyboardMoveEventData();
-    !i || (this.endKeyboardMoveEvent.emit(i), this.dropTreeViewItem.emit({
-      item: this.getElementToMove(),
-      itemId: this.itemId,
-      newIndex: e,
-      oldIndex: this.positionBeforeKeyboardMove.position,
-      newNextSiblingItemId: i.position < i.childrenCount - 1 ? (r = this.getElementToMove().nextElementSibling) == null ? void 0 : r.id : void 0,
-      newPrevSiblingItemId: i.position > 0 ? (n = this.getElementToMove().previousElementSibling) == null ? void 0 : n.id : void 0,
-      sourceParentItemId: (o = this.positionBeforeKeyboardMove.parent.id) != null ? o : void 0,
-      targetParentItemId: (a = this.getParentItem()) == null ? void 0 : a.id
-    }));
-  }
-  startKeyboardMove() {
-    if (this.disableDrag)
-      return;
-    const { parent: t, position: e } = this.getItemContext();
-    this.positionBeforeKeyboardMove = {
-      parent: t,
-      position: e
-    }, this.movingViaKeyboard = !0;
-    const i = this.getKeyboardMoveEventData();
-    !i || this.startKeyboardMoveEvent.emit(i);
-  }
-  moveItem(t) {
-    const e = this.getElementToMove(), i = this.getParentItem(), r = this.getParentTreeViewItem();
-    if (t === "down") {
-      const o = e.nextElementSibling;
-      if (o) {
-        o.querySelector(".tree-view-item__children").prepend(e), r && c(r);
-        const a = o.tagName === "SWIRL-TREE-VIEW-ITEM" ? o : o.querySelector("swirl-tree-view-item");
-        c(a), a.expand();
-      } else
-        i && (i.parentElement.insertBefore(e, i.nextElementSibling), r && c(r));
-    } else if (t === "up") {
-      const o = e.previousElementSibling;
-      if (o) {
-        o.querySelector(".tree-view-item__children").appendChild(e), r && c(r);
-        const a = o.tagName === "SWIRL-TREE-VIEW-ITEM" ? o : o.querySelector("swirl-tree-view-item");
-        c(a), a.expand();
-      } else
-        i && (i.parentElement.insertBefore(e, i), r && c(r));
-    }
-    requestAnimationFrame(() => {
-      this.link.focus();
-    }), this.checkKeyboardDropStatus();
-    const n = this.getKeyboardMoveEventData();
-    !n || this.keyboardMoveEvent.emit(n);
-  }
-  checkKeyboardDropStatus() {
-    const { parent: t, position: e } = this.getItemContext();
-    if (typeof this.canDrop == "function") {
-      const i = this.canDrop({ parentId: t.id, position: e });
-      this.cannotKeyboardDropInCurrentPosition = !i;
-      return;
-    }
-    this.cannotKeyboardDropInCurrentPosition = !1;
-  }
-  getSemantics() {
-    return this.el.closest('[role="tree"]') ? "tree" : "list";
-  }
-  render() {
-    const t = Boolean(this.el.querySelector("swirl-tree-view-item")), e = Boolean(this.el.querySelector('[slot="tags"]')), i = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon), r = this.enableDragDrop && !t, n = this.getSemantics(), o = this.expanded || n !== "tree", a = n === "tree" ? this.selected ? 0 : -1 : void 0, h = n === "tree" ? "li" : "div", m = _("tree-view-item", {
-      "tree-view-item--active": this.active,
-      "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
-      "tree-view-item--moving-via-keyboard": this.movingViaKeyboard,
-      "tree-view-item--disable-drag": this.disableDrag,
-      "tree-view-item--has-tags": e
-    });
-    return s(u, { key: "a09479fb47bc67c8e824d8dba85bbd03d8fdefc0", id: this.itemId, role: n === "tree" ? "none" : "listitem" }, s(h, { key: "3493116e84e14c12c6fffc06e5d6eb1ae2e8e625", class: m, role: n === "tree" ? "none" : void 0 }, s("a", { key: "d928f9f7f3d2ecefdc551bbdf99e4a755dbe1edf", "aria-current": this.active ? "page" : void 0, "aria-expanded": !t || n !== "tree" ? void 0 : String(o), "aria-level": n === "tree" ? this.level + 1 : void 0, "aria-owns": t && n === "tree" ? `${this.itemId}-children` : void 0, "aria-selected": n === "tree" ? String(this.selected) : void 0, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (d) => this.link = d, role: n === "tree" ? "treeitem" : void 0, tabIndex: a }, !this.disableDrag && this.enableDragDrop && s("span", { key: "5d2826718297e134e2e6b183f078c60142c9242a", class: "tree-view-item__drag-handle" }, s("swirl-icon-drag-handle", { key: "af3a78bd6d01e8c3d4c474953f4fbdda5aa95d42", size: 20 })), this.expandable && n === "tree" && s("span", { key: "f1eaae526ae0eb6ae4ca2e632ed190e56fd9e206", class: "tree-view-item__toggle-icon" }, t && s(b, { key: "537996a56cc4b22a36cc6f2e9960eb4f1fecba66" }, o ? s("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 }) : s("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))), Boolean(this.icon) && s(b, { key: "aae7d93d6168a81d65700ad6542207898261b11c" }, s("span", { key: "25926b0d49ac08e385c2ed23e21a0c2a8a2bbb15", class: "tree-view-item__icon" }, i ? this.icon : s("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))), s("span", { key: "1aa32365035c8fe61aecc8b8a517769dec174fab", class: "tree-view-item__label" }, this.label), s("span", { key: "8c548433be3d53be0f711f91bd0f1d4d45845184", class: "tree-view-item__tags" }, s("slot", { key: "7cbf366468e4f81a806e9d32897087d7abbd87e2", name: "tags" }))), s("ul", { key: "7799f5dc8eb7e76d2a92b15015a47921a23f2586", "aria-label": this.label, class: `tree-view-item__children ${r ? "tree-view-item__children--drop-zone" : ""}`, id: `${this.itemId}-children`, ref: (d) => this.childList = d, role: n === "tree" ? "group" : void 0, style: {
-      display: (!o || !t) && !r ? "none" : void 0
-    } }, s("slot", { key: "0af0ea32c45f4c7252d609a0f21c54cacba74fa4" }))));
-  }
-  get el() {
-    return y(this);
-  }
-};
-D.style = x;
-export {
-  D as swirl_tree_view_item
-};