@getflip/swirl-components-react 0.432.1 → 0.434.0

package/dist/swirl-time-input.entry.bcc0dbe4.js

@@ -0,0 +1,136 @@
+import { r as h, c as m, h as n, H as p, g as d } from "./index.796bc882.js";
+import { c as f } from "./index-orsBiyT_.fc4357c3.js";
+import { p as r, i as o, f as l, I as a } from "./index-D3UoejeY.7db8c51e.js";
+import { D as g } from "./media-query.service-BSiuFyfW.201120cc.js";
+import "react";
+import "react-dom";
+import "./utils-Dn2SWlGn.dbe5b17a.js";
+const b = ".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}}", u = "HH:mm:ss", w = class {
+  constructor(t) {
+    h(this, t), this.inputBlur = m(this, "inputBlur", 7), this.inputFocus = m(this, "inputFocus", 7), this.valueChange = m(this, "valueChange", 7), this.format = "HH:mm", this.placeholder = "hh:mm", this.iconSize = 24, this.mediaQueryUnsubscribe = () => {
+    }, this.onBlur = (e) => {
+      this.inputBlur.emit(e);
+    }, this.onClick = (e) => {
+      e.preventDefault();
+    }, this.onFocus = (e) => {
+      this.inputFocus.emit(e), this.handleAutoSelect(e);
+    };
+  }
+  componentWillLoad() {
+    const t = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
+    this.id = `swirl-time-input-${t}`;
+  }
+  componentDidLoad() {
+    this.setupMask(), this.mediaQueryUnsubscribe = g.subscribe((t) => {
+      this.updateIconSize(t);
+    }), this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.mask) == null || t.destroy(), this.mediaQueryUnsubscribe();
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  watchValue(t, e) {
+    if (t !== e)
+      if (this.valueChange.emit(t), this.mask && t) {
+        const i = this.getPattern();
+        let s = r(t, u, new Date());
+        if (o(s) || (s = r(t, i, new Date())), o(s)) {
+          const c = l(s, i);
+          this.mask.value = c;
+        }
+      } else
+        this.mask && !t && (this.mask.value = "");
+  }
+  updateIconSize(t) {
+    this.iconSize = t ? 20 : 24;
+  }
+  getPattern() {
+    return this.format.replace(new RegExp("(?<!H)H(?!H)", "g"), "HH").replace(new RegExp("(?<!h)h(?!h)", "g"), "hh").replace(new RegExp("(?<!m)m(?!m)", "g"), "mm").replace(new RegExp("(?<!s)s(?!s)", "g"), "ss").replace(new RegExp("(?<!a)a(?!a)", "g"), "aa");
+  }
+  handleAutoSelect(t) {
+    if (!this.autoSelect) {
+      setTimeout(() => {
+        t.target && t.target instanceof HTMLInputElement && t.target.setSelectionRange && t.target.setSelectionRange(0, 0);
+      });
+      return;
+    }
+    t.target && t.target instanceof HTMLInputElement && t.target.select();
+  }
+  setupMask() {
+    var e;
+    (e = this.mask) == null || e.destroy();
+    const t = this.getPattern();
+    if (this.mask = a(this.inputEl, {
+      mask: Date,
+      pattern: t.replace(/([^A-Za-z0-9])/g, "$1`"),
+      autofix: "pad",
+      lazy: !0,
+      overwrite: !0,
+      eager: "append",
+      prepareChar: (i) => i.toUpperCase(),
+      blocks: {
+        HH: {
+          mask: a.MaskedRange,
+          from: 0,
+          to: 23,
+          maxLength: 2
+        },
+        hh: {
+          mask: a.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2
+        },
+        mm: {
+          mask: a.MaskedRange,
+          from: 0,
+          to: 59,
+          maxLength: 2
+        },
+        ss: {
+          mask: a.MaskedRange,
+          from: 0,
+          to: 59,
+          maxLength: 2
+        },
+        aa: {
+          mask: a.MaskedEnum,
+          enum: ["AM", "PM"],
+          maxLength: 2
+        }
+      },
+      format: (i) => o(i) ? (this.value = l(i, u), l(i, t)) : "",
+      parse: (i) => r(i, t, new Date())
+    }), this.value) {
+      const i = r(this.value, u, new Date());
+      if (o(i)) {
+        const s = l(i, t);
+        this.mask.value = s;
+      }
+    }
+  }
+  render() {
+    const t = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = f("time-input", {
+      "time-input--inline": this.inline
+    });
+    return n(p, { key: "ecfc7215a6dc9e4b59a4ed914d2830d29e4b54b3" }, n("div", { key: "beb362b1e35407ffe2124fb08309faa9147ca808", class: e }, n("input", { key: "723acff0f9b4e22b78bc6a9b24d0e28ebc6d4c8d", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": t, 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: (i) => this.inputEl = i, required: this.required, type: "text", readonly: this.readonly }), n("span", { key: "9fe6f94df4fa4ef5f479c8c4bc8e250dda6d9689", class: "time-input__icon" }, n("swirl-icon-time-outlined", { key: "0cb6f6592db12a0ff37ffa39841df214a5ff682f", size: this.iconSize }))));
+  }
+  get el() {
+    return d(this);
+  }
+  static get watchers() {
+    return {
+      format: ["watchFormat"],
+      value: ["watchValue"]
+    };
+  }
+};
+w.style = b;
+export {
+  w as swirl_time_input
+};

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

@@ -0,0 +1,79 @@
+import { r as a, h as e, H as r, g as c } from "./index.796bc882.js";
+import "react";
+import "react-dom";
+const l = ".toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}", h = class {
+  constructor(t) {
+    a(this, t), this.toasts = [], this.activeDialogStack = [], this.originalParent = null, this.onAction = (s) => {
+      var o;
+      const i = this.toasts.find(({ toastId: n }) => n === s.detail);
+      !i || ((o = i.onAction) == null || o.call(i, i.toastId), i.dismissOnAction && this.dismiss(s.detail));
+    }, this.onDismiss = (s) => {
+      this.dismiss(s.detail);
+    };
+  }
+  async clearAll() {
+    this.toasts = [];
+  }
+  async dismiss(t) {
+    var i;
+    const s = this.toasts.find((o) => t === o.toastId);
+    !s || ((i = s.onDismiss) == null || i.call(s, s.toastId), this.toasts = [...this.toasts].filter((o) => o.toastId !== t));
+  }
+  async toast(t) {
+    if (this.toasts.some((i) => i.toastId === t.toastId))
+      return;
+    const s = {
+      ...t,
+      createdAt: new Date(),
+      duration: t.duration || this.globalDuration || void 0,
+      toastId: t.toastId || String(Math.round(Math.random() * 1e4))
+    };
+    return this.toasts = [...this.toasts, s], s;
+  }
+  componentWillLoad() {
+    this.originalParent = this.el.parentElement;
+  }
+  disconnectedCallback() {
+    this.el.isConnected || (this.activeDialogStack = this.activeDialogStack.filter((t) => t.isConnected), this.ensureCorrectPosition());
+  }
+  handleDialogToggle(t) {
+    const { newState: s, dialog: i } = t.detail;
+    s === "open" ? this.onDialogOpen(i) : this.onDialogClose(i);
+  }
+  onToastsChange() {
+    this.toasts.length > 0 ? this.ensureCorrectPosition() : this.popoverEl.hidePopover();
+  }
+  onDialogOpen(t) {
+    this.activeDialogStack.includes(t) || this.activeDialogStack.push(t), this.toasts.length > 0 && this.ensureCorrectPosition();
+  }
+  onDialogClose(t) {
+    this.activeDialogStack = this.activeDialogStack.filter((s) => s != t), this.toasts.length > 0 && this.ensureCorrectPosition();
+  }
+  ensureCorrectPosition() {
+    const t = this.activeDialogStack[this.activeDialogStack.length - 1] || this.originalParent;
+    this.el.parentElement !== t && t.appendChild(this.el), this.popoverEl.hidePopover(), this.popoverEl.showPopover();
+  }
+  render() {
+    return e(r, { key: "a609b81e1dc7b7e2674c8d5ff5313e86118b9111", role: "status" }, e("swirl-stack", { key: "7433155ee7c46b70dbec17252fbbdc880f1c53c4", class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (t) => this.popoverEl = t }, this.toasts.map((t) => {
+      const s = {
+        ...t,
+        content: void 0,
+        onDismiss: void 0,
+        onAction: void 0
+      };
+      return e("swirl-toast", { key: t.toastId, ...s, onDismiss: this.onDismiss, onAction: this.onAction }, t.content);
+    })));
+  }
+  get el() {
+    return c(this);
+  }
+  static get watchers() {
+    return {
+      toasts: ["onToastsChange"]
+    };
+  }
+};
+h.style = l;
+export {
+  h as swirl_toast_provider
+};

package/dist/swirl-toast.entry.65ae9730.js

@@ -0,0 +1,53 @@
+import { r as n, c as o, h as s, H as r } from "./index.796bc882.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.fbb91d18.js

@@ -0,0 +1,21 @@
+import { r as s, h as t } from "./index.796bc882.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: "53a9708afba5986a39f0bf492ef81366712a9c5a", class: e, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && t("swirl-icon", { key: "5036e00e2fe7da293f9bf9786869fb8475c114ee", class: "button__icon", glyph: this.icon }), t("span", { key: "eb0821b93d5f7cf98fae80ad7a35ea11513c0897", class: "button__label" }, this.label));
+  }
+};
+n.style = i;
+export {
+  n as swirl_toggle_button
+};

package/dist/swirl-toggle-group.entry.5847e7bf.js

@@ -0,0 +1,60 @@
+import { r as i, c as g, h as o, g as r } from "./index.796bc882.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.19b54d62.js

@@ -0,0 +1,56 @@
+import { r, h as s, H as n, g as i } from "./index.796bc882.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.89fa18b5.js

@@ -0,0 +1,113 @@
+import { r as c, h as e, H as h, g as d } from "./index.796bc882.js";
+import { b as f, c as u, 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:absolute;z-index:var(--s-z-40);display:none;opacity:0}.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(t) {
+    c(this, t), this.active = !0, this.delay = 200, this.intent = "default", this.maxWidth = "17.5rem", this.position = "top", this.positioning = "absolute", this.trigger = ["focus", "hover"], this.visible = !1, this.onKeydown = (i) => {
+      i.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 i = this.el.children[0];
+      if (!Boolean(i) || !Boolean(this.popperEl))
+        return;
+      const s = [
+        ...this.options.middleware.filter((p) => p && p.name !== "arrow"),
+        f({ element: this.arrowElement, padding: 12 })
+      ];
+      this.actualPosition = await u(i, 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 i = n("--s-space-12"), s = n("--s-space-8"), o = n("--s-space-16");
+      this.options = {
+        middleware: [
+          m(i),
+          b({
+            padding: {
+              top: s,
+              bottom: s,
+              left: o,
+              right: o
+            }
+          }),
+          w()
+        ],
+        placement: this.position,
+        strategy: this.positioning
+      };
+    };
+  }
+  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.updateOptions();
+  }
+  async show() {
+    !this.active || (this.visible = !0, requestAnimationFrame(() => {
+      const t = this.el.children[0];
+      !Boolean(t) || (this.reposition(), this.disableAutoUpdate = g(t, this.popperEl, this.reposition.bind(this)));
+    }));
+  }
+  async hide() {
+    var t;
+    Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.visible = !1, (t = this.disableAutoUpdate) == null || t.call(this);
+  }
+  render() {
+    var i, s, o;
+    const t = v("tooltip", `tooltip--actual-placement-${(i = this.actualPosition) == null ? void 0 : i.placement}`, `tooltip--intent-${this.intent}`, {
+      "tooltip--active": this.active,
+      "tooltip--visible": this.visible
+    });
+    return e(h, { key: "e5a7884c4f3f45294efc913baa4767a937afd07d", onKeydown: this.onKeydown }, e("span", { key: "9952c41dc93f61aa103e87f4384e17c271c9a600", class: t }, e("span", { key: "7fcef15d2b640e8cb685fae4275321c0776c0f20", class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, e("slot", { key: "7b975f73546287509b4b04b6c14e304c976e291b" })), e("span", { key: "a385f4ab99e66b5164b1151fffed552a61718da9", class: "tooltip__popper", 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` : "",
+      position: this.positioning,
+      maxWidth: this.maxWidth
+    } }, this.visible && e("span", { key: "7792c9acbe8745684b460789492aafc71e9e75c7", class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, e("span", { key: "d4c6edd15ff7a8bb22932fccc9a2d555ccde11c0", class: "tooltip__content", innerHTML: this.content })), e("span", { key: "117ba01694bfb6a78db345392a7de85977d2ba03", 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.d4f69777.js

@@ -0,0 +1,71 @@
+import { r, c as s, h as e, H as d, g as o } from "./index.796bc882.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: "3907bd903bb13a255a896ccca53a0c6f6077e0d8", role: "none" }, e("li", { key: "026460428ef4ab18d33311170bb7a2542a180f22", 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: "b5417270d2f168fda7bcaf28fe457f5ee815248d", 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: "dcd1a9783d3d0fa629a818fe86b89fdef9dda4eb", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "3ec54db11ddb3814d63f838e34fc6806da9de053", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "a71d3979738f52e256f720c25d702037d0494c2a", class: "tree-navigation-item__label" }, e("span", { key: "6362059d9f038e2ed803b83d4880dec85edf972c", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "1755c3b88acf2425654dc0df5c53b8d98138b82b", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "80b11b8a90e30f348f9aa4455f7df5344792ee25", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "b8115edfd7441106155eac1d437df2b98ab669ad", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "d9b73eabb0dd3542770e930073b7d93f54379b52", size: 16, role: "img", "aria-label": "External link" }))))), this.hasChildren && e("ul", { key: "8d2b2ee76af6eecf3b554e9d052359fb8481bba4", 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: "47065da9845983ab52e0794a67e45af43d017cc0" }))));
+  }
+  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.3148108c.js

@@ -0,0 +1,15 @@
+import { r, h as e, H as t } from "./index.796bc882.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: "07f68d74e7496180ecbb80c8089e73a6294fa697" }, e("ul", { key: "f237754e19f460a9e666508375b1f5cc3ef9f735", "aria-label": this.label, class: "tree-navigation", role: "tree" }, e("slot", { key: "8318a59de0428180149e927a7228ba8eac7f270f" })));
+  }
+};
+s.style = i;
+export {
+  s as swirl_tree_navigation
+};