@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const swirlThemeProviderCss = ".sc-swirl-theme-provider-h{display:block}";
+
+const preferredThemeStorageKey = "swirl-preferred-theme";
+const SwirlThemeProvider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.themeChange = index.createEvent(this, "themeChange", 7);
+    this.setDesignTokens = [];
+    this.config = undefined;
+  }
+  componentWillLoad() {
+    this.resolveConfig();
+    this.determineOSTheme();
+    this.updateAppTheme();
+  }
+  watchConfig() {
+    this.resolveConfig();
+    this.determineOSTheme();
+    this.updateAppTheme();
+  }
+  /**
+   * Returns the active OS theme.
+   * @returns SwirlTheme
+   */
+  async getActiveOSTheme() {
+    return this.appOSTheme;
+  }
+  /**
+   * Returns the user's preferred OS theme stored in local storage.
+   * @returns SwirlTheme
+   */
+  async getPreferredOSTheme() {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    return this.resolvedConfig.storage.getItem(preferredThemeStorageKey);
+  }
+  /**
+   * Sets the user's preferred OS theme and stores it in local storage. Overrides
+   * the system theme.
+   */
+  async setPreferredOSTheme(theme) {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);
+    this.updateAppTheme();
+  }
+  /**
+   * Resets the user's preferred OS theme, using the system theme instead.
+   */
+  async resetPreferredOSTheme() {
+    if (!Boolean(this.resolvedConfig.storage)) {
+      return;
+    }
+    this.resolvedConfig.storage.removeItem(preferredThemeStorageKey);
+    this.updateAppTheme();
+  }
+  resolveConfig() {
+    this.resolvedConfig = {
+      ...(this.config || {}),
+      rootElement: this.config?.rootElement || document.documentElement,
+      storage: this.config?.storage || window?.localStorage,
+    };
+  }
+  determineOSTheme() {
+    if (!Boolean(window.matchMedia)) {
+      this.osTheme = "light";
+      return;
+    }
+    const darkThemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this.osTheme = darkThemeMediaQuery.matches ? "dark" : "light";
+    darkThemeMediaQuery.addEventListener("change", (e) => {
+      this.osTheme = e.matches ? "dark" : "light";
+      this.updateAppTheme();
+    });
+  }
+  async updateAppTheme() {
+    this.appOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
+    if (this.appOSTheme === "dark") {
+      document.documentElement.classList.remove("theme-light");
+      document.documentElement.classList.add("theme-dark");
+    }
+    else {
+      document.documentElement.classList.remove("theme-dark");
+      document.documentElement.classList.add("theme-light");
+    }
+    this.updateTenantVariables();
+    this.updateTenantAssets();
+    const themeChangeEventData = {
+      activeTheme: await this.getActiveOSTheme(),
+      preferredTheme: await this.getPreferredOSTheme(),
+    };
+    if (!Boolean(this.recentOSThemeChangeEventData) ||
+      themeChangeEventData.activeTheme !==
+        this.recentOSThemeChangeEventData.activeTheme ||
+      themeChangeEventData.preferredTheme !==
+        this.recentOSThemeChangeEventData.preferredTheme) {
+      this.recentOSThemeChangeEventData = themeChangeEventData;
+      this.themeChange.emit(this.recentOSThemeChangeEventData);
+    }
+  }
+  updateTenantAssets() {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
+      return;
+    }
+    document.head
+      .querySelector('link[rel="icon"]')
+      ?.setAttribute("href", theme.favicon.link);
+  }
+  updateTenantVariables() {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
+      this.resetTenantVariables();
+      return;
+    }
+    const rootElement = this.resolvedConfig.rootElement;
+    this.setDesignTokens = [];
+    theme.design_tokens.forEach((token) => {
+      const propertyName = `--s-${token.id}`;
+      rootElement.style.setProperty(propertyName, `rgba(${token.color.r}, ${token.color.g}, ${token.color.b}, ${token.color.a})`);
+      this.setDesignTokens.push(propertyName);
+    });
+  }
+  resetTenantVariables() {
+    const rootElement = this.resolvedConfig.rootElement;
+    this.setDesignTokens.forEach((property) => {
+      rootElement.style.removeProperty(property);
+    });
+    this.setDesignTokens = [];
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+  static get watchers() { return {
+    "config": ["watchConfig"]
+  }; }
+};
+SwirlThemeProvider.style = swirlThemeProviderCss;
+
+exports.swirl_theme_provider = SwirlThemeProvider;

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

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const maska = require('./maska-895c9954.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlTimeInputCss = ".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}}";
+
+const internalTimeFormat = "HH:mm:ss";
+const SwirlTimeInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    this.onChange = (event) => {
+      const value = event.target.value;
+      let newValue;
+      if (value === "") {
+        this.value = undefined;
+        this.valueChange.emit(undefined);
+      }
+      const newDate = maska.parse(value, this.format, new Date());
+      const formatRegExp = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
+      if (!Boolean(value.match(formatRegExp))) {
+        return;
+      }
+      if (!maska.isValid(newDate)) {
+        newValue = maska.format(new Date(), internalTimeFormat);
+      }
+      else {
+        newValue = maska.format(newDate, internalTimeFormat);
+      }
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+    };
+    this.onBlur = (event) => {
+      const input = event.target;
+      const dateValue = maska.parse(input.value, this.format, new Date());
+      if (!maska.isValid(dateValue) && Boolean(this.value)) {
+        const currentDateValue = Boolean(this.value)
+          ? maska.parse(this.value, internalTimeFormat, new Date())
+          : undefined;
+        if (!Boolean(currentDateValue) || !maska.isValid(currentDateValue)) {
+          this.value = "";
+        }
+        input.value = maska.format(currentDateValue, this.format);
+      }
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.disabled = undefined;
+    this.format = "HH:mm";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.placeholder = "hh:mm";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const index = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
+    this.id = `swirl-time-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.mask?.destroy();
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  setupMask() {
+    this.mask?.destroy();
+    this.mask = maska.maska.create(`#${this.id}`, {
+      mask: this.format.replace(/[Hhms]/g, "#"),
+    });
+  }
+  render() {
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const dateValue = Boolean(this.value)
+      ? maska.parse(this.value, internalTimeFormat, new Date())
+      : undefined;
+    const displayValue = maska.isValid(dateValue)
+      ? maska.format(dateValue, this.format)
+      : undefined;
+    const className = index$1.classnames("time-input", {
+      "time-input--inline": this.inline,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("span", { class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { size: this.iconSize })))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "format": ["watchFormat"]
+  }; }
+};
+SwirlTimeInput.style = swirlTimeInputCss;
+
+exports.swirl_time_input = SwirlTimeInput;

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

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const SwirlToastProvider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onDismiss = (event) => {
+      this.toasts = [...this.toasts].filter((toast) => toast.toastId !== event.detail);
+    };
+    this.globalDuration = undefined;
+    this.toasts = [];
+  }
+  /**
+   * Clear all toasts
+   * @param newToast
+   * @returns
+   */
+  async clearAll() {
+    this.toasts = [];
+  }
+  /**
+   * Dismiss a toast
+   * @param toastId
+   * @returns
+   */
+  async dismiss(toastId) {
+    this.toasts = [...this.toasts].filter((toast) => toast.toastId !== toastId);
+  }
+  /**
+   * Create a new toast
+   * @param newToast
+   * @returns
+   */
+  async toast(newToast) {
+    if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {
+      return;
+    }
+    let duration = this.globalDuration;
+    if (this.globalDuration === undefined) {
+      duration = newToast.duration;
+    }
+    else if (this.globalDuration === 0) {
+      duration = undefined;
+    }
+    const newToastWithId = {
+      ...newToast,
+      createdAt: new Date(),
+      duration,
+      toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),
+    };
+    this.toasts = [...this.toasts, newToastWithId];
+    return newToastWithId;
+  }
+  render() {
+    return (index.h(index.Host, { role: "status" }, index.h("swirl-stack", { spacing: "12" }, this.toasts.map((toast) => {
+      const props = { ...toast, content: undefined };
+      return (index.h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
+    }))));
+  }
+};
+
+exports.swirl_toast_provider = SwirlToastProvider;

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlToastCss = ":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;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{margin-top:0}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}@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__content ::part(link){color:var(--text-default)}.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)}";
+
+const SwirlToast = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.dismiss = index.createEvent(this, "dismiss", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.onDismiss = () => {
+      this.dismiss.emit(this.toastId);
+    };
+    this.accessibleDismissLabel = "Dismiss";
+    this.content = undefined;
+    this.dismissLabel = undefined;
+    this.duration = undefined;
+    this.icon = undefined;
+    this.intent = "default";
+    this.toastId = undefined;
+  }
+  watchDuration() {
+    this.startTimer();
+  }
+  componentDidLoad() {
+    this.startTimer();
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    const icon = this.iconEl?.children[0];
+    const dismissIcon = this.dismissIconEl;
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+    dismissIcon?.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  startTimer() {
+    this.clearTimer();
+    if (this.duration === undefined) {
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      this.dismiss.emit(this.toastId);
+    }, this.duration);
+  }
+  clearTimer() {
+    if (!Boolean(this.timeout)) {
+      return;
+    }
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+  }
+  render() {
+    const className = index$1.classnames("toast", `toast--intent-${this.intent}`);
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.icon && (index.h("span", { class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", null)), index.h("button", { "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { ref: (el) => (this.dismissIconEl = el) }))))));
+  }
+  static get watchers() { return {
+    "duration": ["watchDuration"]
+  }; }
+};
+SwirlToast.style = swirlToastCss;
+
+exports.swirl_toast = SwirlToast;

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

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlToolbarCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const SwirlToolbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown" || event.code === "ArrowRight") {
+        event.preventDefault();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.focusPreviousItem();
+      }
+    };
+    this.label = undefined;
+    this.orientation = "horizontal";
+  }
+  componentDidLoad() {
+    const items = this.getItems();
+    this.deactivateTabIndexes(items);
+    const firstButton = items[0]?.querySelector("button");
+    if (!Boolean(firstButton)) {
+      return;
+    }
+    firstButton.tabIndex = 0;
+  }
+  getItems() {
+    return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"));
+  }
+  focusNextItem() {
+    const items = this.getItems();
+    const activeItemIndex = this.getActiveItemIndex(items);
+    const newIndex = (activeItemIndex + 1) % items.length;
+    this.focusItem(items[newIndex]);
+  }
+  focusPreviousItem() {
+    const items = this.getItems();
+    const activeItemIndex = this.getActiveItemIndex(items);
+    const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+    this.focusItem(items[newIndex]);
+  }
+  getActiveItemIndex(items) {
+    const activeElement = utils.getActiveElement();
+    return items.findIndex((item) => item === activeElement?.closest("swirl-button, swirl-chip"));
+  }
+  focusItem(item) {
+    const items = this.getItems();
+    this.deactivateTabIndexes(items);
+    if (!Boolean(item)) {
+      return;
+    }
+    const button = item.querySelector("button");
+    if (!Boolean(button)) {
+      return;
+    }
+    button.tabIndex = 0;
+    button.focus();
+  }
+  deactivateTabIndexes(items) {
+    items.forEach((item) => {
+      const button = item.querySelector("button");
+      if (!Boolean(button)) {
+        return;
+      }
+      button.tabIndex = -1;
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("swirl-stack", { align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlToolbar.style = swirlToolbarCss;
+
+exports.swirl_toolbar = SwirlToolbar;

package/dist/cjs/swirl-tooltip.cjs.entry.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-39236b6a.js');
+
+const swirlTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:absolute;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);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);animation:tooltip-fade-in 0.2s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}@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__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+
+const SwirlTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeydown = (event) => {
+      if (event.code === "Escape") {
+        this.hide();
+      }
+    };
+    this.reposition = async () => {
+      if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {
+        return;
+      }
+      this.actualPosition = await floatingUi_dom_esm.computePosition(this.referenceEl, this.popperEl, this.options);
+    };
+    this.show = () => {
+      this.visible = true;
+      requestAnimationFrame(() => {
+        this.reposition();
+        this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(this.referenceEl, this.popperEl, this.reposition.bind(this));
+      });
+    };
+    this.showWithDelay = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.showTimeout = setTimeout(() => {
+        this.show();
+      }, this.delay);
+    };
+    this.hide = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.visible = false;
+      this.disableAutoUpdate?.();
+    };
+    this.updateOptions = () => {
+      const margin = +getComputedStyle(document.documentElement)
+        .getPropertyValue("--s-space-12")
+        .replace("rem", "") * 16;
+      this.options = {
+        middleware: [floatingUi_dom_esm.offset(margin), floatingUi_dom_esm.shift(), floatingUi_dom_esm.flip()],
+        placement: this.position,
+        strategy: "absolute",
+      };
+    };
+    this.getArrowStyles = () => {
+      if (this.actualPosition?.placement === "top") {
+        return {
+          top: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition?.placement === "bottom") {
+        return {
+          bottom: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, 50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition?.placement === "right") {
+        return {
+          top: "50%",
+          right: "100%",
+          transform: "translate3d(50%, -50%, 0) rotate(45deg)",
+        };
+      }
+      if (this.actualPosition?.placement === "left") {
+        return {
+          top: "50%",
+          left: "100%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)",
+        };
+      }
+    };
+    this.content = undefined;
+    this.delay = 300;
+    this.position = "top";
+    this.actualPosition = undefined;
+    this.visible = false;
+  }
+  watchPosition() {
+    this.updateOptions();
+  }
+  onMouseEnter() {
+    this.showWithDelay();
+  }
+  onMouseLeave() {
+    this.hide();
+  }
+  onWindowResize() {
+    this.reposition();
+  }
+  onWindowScroll() {
+    this.reposition();
+  }
+  componentWillLoad() {
+    this.reposition();
+  }
+  componentDidLoad() {
+    this.updateOptions();
+  }
+  render() {
+    const arrowStyles = this.getArrowStyles();
+    return (index.h(index.Host, { onKeydown: this.onKeydown }, index.h("span", { class: "tooltip" }, index.h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (el) => (this.referenceEl = el), tabIndex: 0 }, index.h("slot", null)), index.h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        top: Boolean(this.actualPosition)
+          ? `${this.actualPosition?.y}px`
+          : "",
+        left: Boolean(this.actualPosition)
+          ? `${this.actualPosition?.x}px`
+          : "",
+      } }, this.visible && (index.h("span", { class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { class: "tooltip__content", innerHTML: this.content }), index.h("span", { class: "tooltip__arrow", style: arrowStyles })))))));
+  }
+  static get watchers() { return {
+    "position": ["watchPosition"]
+  }; }
+};
+SwirlTooltip.style = swirlTooltipCss;
+
+exports.swirl_tooltip = SwirlTooltip;

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-8));flex-shrink:0;justify-content:flex-start;align-items:center;color:var(--s-text-default);background-color:transparent;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);cursor:pointer;gap:calc(var(--s-space-8) - var(--s-space-2))}:host(:hover){background-color:var(--s-surface-hovered)}:host(:active){background-color:var(--s-surface-pressed)}:host(:focus){outline:none}:host(:focus-visible) .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}:host(.tree-navigation-item--active){background-color:var(--s-surface-raised-default);box-shadow:inset 0.25rem 0 0 0 var(--s-border-highlight)}:host(.tree-navigation-item--active:hover){background-color:var(--s-surface-raised-hovered)}:host(.tree-navigation-item--active:active){background-color:var(--s-surface-raised-pressed)}:host(.tree-navigation-item--has-icon){padding-left:var(--s-space-16)}:host *{box-sizing:border-box}.tree-navigation-item__icon{display:inline-flex}.tree-navigation-item__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--s-space-2);padding-left:var(--s-space-2)}";
+
+const SwirlTreeNavigationItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeyDown = (event) => {
+      if (event.code === "Enter") {
+        event.preventDefault();
+        this.el.click();
+      }
+    };
+    this.active = undefined;
+    this.icon = undefined;
+    this.label = undefined;
+  }
+  render() {
+    const className = index$1.classnames("tree-navigation-item", {
+      "tree-navigation-item--active": this.active,
+      "tree-navigation-item--has-icon": Boolean(this.icon),
+    });
+    return (index.h(index.Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, this.icon && (index.h("span", { class: "tree-navigation-item__icon", innerHTML: this.icon })), index.h("span", { class: "tree-navigation-item__label" }, this.label)));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlTreeNavigationItem.style = swirlTreeNavigationItemCss;
+
+exports.swirl_tree_navigation_item = SwirlTreeNavigationItem;