@luisrodonccs/simplest-ui 0.0.0-stage → 0.1.0

package/dist/dropdown.js

@@ -0,0 +1,278 @@
+import { css as h, LitElement as p, html as m } from "lit";
+import { property as b, state as d, query as c, customElement as v } from "lit/decorators.js";
+import { c as g } from "./chunks/position-BdzQ8shu.js";
+var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? k(t, s) : t, n = e.length - 1, u; n >= 0; n--)
+    (u = e[n]) && (r = (o ? u(t, s, r) : u(r)) || r);
+  return o && r && f(t, s, r), r;
+};
+const l = '[role="menuitem"], button, a';
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.uid = ++i.instanceCount, this.open = !1, this.align = "start", this.side = "bottom", this.startFromEnd = !1, this.handleTriggerClick = (e) => {
+      e.stopPropagation(), this.toggle();
+    }, this.handleTriggerKeydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+        case "Enter":
+        case " ":
+          e.preventDefault(), this.startFromEnd = !1, this.setOpen(!0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.startFromEnd = !0, this.setOpen(!0);
+          break;
+      }
+    }, this.handleMenuKeydown = (e) => {
+      const t = this.enabledItems;
+      if (!t.length) return;
+      const s = t.indexOf(document.activeElement);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this.focusItem(s + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.focusItem(s < 0 ? -1 : s - 1);
+          break;
+        case "Home":
+          e.preventDefault(), this.focusItem(0);
+          break;
+        case "End":
+          e.preventDefault(), this.focusItem(t.length - 1);
+          break;
+        case "Escape":
+          e.preventDefault(), e.stopPropagation(), this.setOpen(!1, !0);
+          break;
+        case "Tab":
+          this.setOpen(!1);
+          break;
+      }
+    }, this.handleDocumentClick = (e) => {
+      this.open && !e.composedPath().includes(this) && this.setOpen(!1);
+    }, this.handleFocusOut = (e) => {
+      const t = e.relatedTarget;
+      this.open && t && !this.contains(t) && this.setOpen(!1);
+    }, this.handleMenuClick = (e) => {
+      var r, n;
+      const t = e.composedPath()[0], s = (r = t == null ? void 0 : t.closest) == null ? void 0 : r.call(t, l);
+      if (!s || s.hasAttribute("disabled") || s.getAttribute("aria-disabled") === "true")
+        return;
+      const o = s.getAttribute("data-value") ?? ((n = s.textContent) == null ? void 0 : n.trim()) ?? "";
+      this.setOpen(!1, !0), this.dispatchEvent(
+        new CustomEvent("sui-select", { detail: { value: o }, bubbles: !0, composed: !0 })
+      );
+    }, this.handleSlotChange = () => {
+      this.open && this.prepareItems();
+    };
+  }
+  get triggerId() {
+    return `sui-dropdown-trigger-${this.uid}`;
+  }
+  get menuId() {
+    return `sui-dropdown-menu-${this.uid}`;
+  }
+  get enabledItems() {
+    return this.allItems.filter(
+      (e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true"
+    );
+  }
+  get allItems() {
+    return Array.from(this.querySelectorAll(l)).filter(
+      (e) => !e.closest('[slot="trigger"]')
+    );
+  }
+  updated(e) {
+    e.has("open") && (this.dispatchEvent(
+      new CustomEvent("sui-toggle", {
+        detail: { open: this.open },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.open ? (this.prepareItems(), this.dispatchEvent(new CustomEvent("sui-open", { bubbles: !0, composed: !0 })), this.updateComplete.then(() => {
+      this.measure(), this.focusItem(this.startFromEnd ? this.enabledItems.length - 1 : 0);
+    })) : this.dispatchEvent(new CustomEvent("sui-close", { bubbles: !0, composed: !0 })));
+  }
+  prepareItems() {
+    for (const e of this.allItems)
+      e.hasAttribute("role") || e.setAttribute("role", "menuitem"), e.setAttribute("tabindex", "-1");
+  }
+  measure() {
+    var o, r;
+    const e = (o = this.trigger) == null ? void 0 : o.getBoundingClientRect(), t = (r = this.menu) == null ? void 0 : r.getBoundingClientRect();
+    if (!e || !t) return;
+    const s = g(e, t);
+    this.side = s.side, this.align = s.align;
+  }
+  focusItem(e) {
+    const t = this.enabledItems;
+    if (!t.length) return;
+    t[(e % t.length + t.length) % t.length].focus();
+  }
+  setOpen(e, t = !1) {
+    var s;
+    this.open !== e && (this.open = e, !e && t && ((s = this.trigger) == null || s.focus()));
+  }
+  toggle(e = !1) {
+    this.startFromEnd = !1, this.setOpen(!this.open, e);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick), this.addEventListener("click", this.handleMenuClick), this.addEventListener("keydown", this.handleMenuKeydown), this.addEventListener("focusout", this.handleFocusOut);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick), this.removeEventListener("click", this.handleMenuClick), this.removeEventListener("keydown", this.handleMenuKeydown), this.removeEventListener("focusout", this.handleFocusOut);
+  }
+  render() {
+    const e = [
+      "menu",
+      this.side === "top" ? "menu--top" : "",
+      this.align === "end" ? "menu--end" : ""
+    ].filter(Boolean).join(" ");
+    return m`
+      <button
+        class="trigger"
+        id=${this.triggerId}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.menuId}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeydown}
+      >
+        <slot name="trigger">Opciones</slot>
+      </button>
+      <div
+        class=${e}
+        id=${this.menuId}
+        role="menu"
+        aria-labelledby=${this.triggerId}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+i.instanceCount = 0;
+i.styles = h`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+    :host([open]) {
+      z-index: var(--sui-z-dropdown);
+    }
+    .trigger {
+      background: var(--sui-color-surface-raised);
+      border: 1px solid var(--sui-color-border);
+      border-radius: var(--sui-radius-full);
+      height: var(--sui-control-height-md);
+      padding: 0 var(--sui-space-3);
+      font-size: var(--sui-font-size-sm);
+      color: var(--sui-color-text);
+      backdrop-filter: blur(var(--sui-blur-sm));
+      -webkit-backdrop-filter: blur(var(--sui-blur-sm));
+      cursor: pointer;
+      transition: background var(--sui-duration-fast) var(--sui-easing-standard),
+                  border-color var(--sui-duration-fast) var(--sui-easing-standard),
+                  color var(--sui-duration-fast) var(--sui-easing-standard);
+    }
+    .trigger:hover {
+      background: var(--sui-color-surface-muted);
+      border-color: var(--sui-color-primary-hover);
+      color: var(--sui-color-primary-hover);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: var(--sui-focus-ring);
+    }
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--sui-space-1-5));
+      left: 0;
+      min-width: var(--sui-dropdown-min-width, 170px);
+      max-height: min(var(--sui-dropdown-max-height, 320px), 60vh);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      background: var(--sui-color-surface-raised);
+      border: 1px solid var(--sui-color-border);
+      border-radius: var(--sui-radius-xl);
+      box-shadow: var(--sui-shadow-menu);
+      backdrop-filter: blur(var(--sui-blur-md));
+      -webkit-backdrop-filter: blur(var(--sui-blur-md));
+      padding: var(--sui-space-1-5);
+      z-index: var(--sui-z-dropdown);
+      display: none;
+    }
+    .menu--top {
+      top: auto;
+      bottom: calc(100% + var(--sui-space-1-5));
+    }
+    .menu--end {
+      left: auto;
+      right: 0;
+    }
+    :host([open]) .menu {
+      display: block;
+      animation: sui-dropdown-in var(--sui-duration-fast) var(--sui-easing-standard);
+    }
+    ::slotted(button),
+    ::slotted(a),
+    ::slotted([role="menuitem"]) {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: var(--sui-space-1-5) var(--sui-space-2-5);
+      border: 0;
+      background: transparent;
+      border-radius: var(--sui-radius-sm);
+      font-size: var(--sui-font-size-sm);
+      color: var(--sui-color-text);
+      cursor: pointer;
+      text-decoration: none;
+      transition: background var(--sui-duration-fast) var(--sui-easing-standard),
+                  color var(--sui-duration-fast) var(--sui-easing-standard);
+    }
+    ::slotted(button:hover),
+    ::slotted(a:hover),
+    ::slotted([role="menuitem"]:hover),
+    ::slotted(button:focus-visible),
+    ::slotted(a:focus-visible),
+    ::slotted([role="menuitem"]:focus-visible) {
+      background: var(--sui-color-surface-muted);
+      color: var(--sui-color-primary-hover);
+      outline: none;
+    }
+    ::slotted(button:disabled),
+    ::slotted([aria-disabled="true"]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    @keyframes sui-dropdown-in {
+      from { opacity: 0; transform: translateY(-4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([open]) .menu {
+        animation: none;
+      }
+    }
+  `;
+a([
+  b({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+a([
+  d()
+], i.prototype, "align", 2);
+a([
+  d()
+], i.prototype, "side", 2);
+a([
+  c(".trigger")
+], i.prototype, "trigger", 2);
+a([
+  c(".menu")
+], i.prototype, "menu", 2);
+i = a([
+  v("sui-dropdown")
+], i);
+export {
+  i as SuiDropdown
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import "./components/index";
+export { SuiModal } from "./components/modal";
+export { SuiDrawer } from "./components/drawer";
+export { SuiDropdown } from "./components/dropdown";
+export { SuiTabs } from "./components/tabs";
+export { SuiAccordion } from "./components/accordion";
+export { SuiPopover } from "./components/popover";
+export { SuiTooltip } from "./components/tooltip";
+export { SuiToast, SuiToastContainer } from "./components/toast";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+import { SuiModal as i } from "./modal.js";
+import { SuiDrawer as e } from "./drawer.js";
+import { SuiDropdown as u } from "./dropdown.js";
+import { SuiTabs as f } from "./tabs.js";
+import { SuiAccordion as x } from "./accordion.js";
+import { SuiPopover as n } from "./popover.js";
+import { SuiTooltip as d } from "./tooltip.js";
+import { SuiToast as c, SuiToastContainer as l } from "./toast.js";
+export {
+  x as SuiAccordion,
+  e as SuiDrawer,
+  u as SuiDropdown,
+  i as SuiModal,
+  n as SuiPopover,
+  f as SuiTabs,
+  c as SuiToast,
+  l as SuiToastContainer,
+  d as SuiTooltip
+};

package/dist/modal.js

@@ -0,0 +1,199 @@
+import { css as p, LitElement as b, nothing as d, html as h } from "lit";
+import { property as a, customElement as f } from "lit/decorators.js";
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (e, t, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? m(t, l) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (s = (i ? c(t, l, s) : c(s)) || s);
+  return i && s && v(t, l, s), s;
+};
+const u = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let o = class extends b {
+  constructor() {
+    super(...arguments), this.uid = ++o.instanceCount, this.open = !1, this.label = "", this.closeLabel = "Close", this.disableBackdropClose = !1, this.previouslyFocused = null, this.holdsScrollLock = !1, this.handleKeydown = (e) => {
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        e.preventDefault(), this.close();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const t = this.getFocusable();
+      if (!t.length) {
+        e.preventDefault();
+        return;
+      }
+      const l = t[0], i = t[t.length - 1], s = this.getDeepActiveElement();
+      e.shiftKey && (s === l || !this.contains(s)) ? (e.preventDefault(), i.focus()) : !e.shiftKey && (s === i || !this.contains(s)) && (e.preventDefault(), l.focus());
+    }, this.handleBackdropClick = (e) => {
+      e.target !== e.currentTarget || this.disableBackdropClose || this.close();
+    };
+  }
+  get titleId() {
+    return `sui-modal-title-${this.uid}`;
+  }
+  get bodyId() {
+    return `sui-modal-body-${this.uid}`;
+  }
+  updated(e) {
+    var t, l;
+    e.has("open") && (this.open ? (this.previouslyFocused = document.activeElement, o.lockScroll(), this.holdsScrollLock = !0, this.dispatchEvent(new CustomEvent("sui-open", { bubbles: !0, composed: !0 })), this.updateComplete.then(() => this.focusInitial())) : (this.releaseScrollLock(), this.dispatchEvent(new CustomEvent("sui-close", { bubbles: !0, composed: !0 })), (l = (t = this.previouslyFocused) == null ? void 0 : t.focus) == null || l.call(t), this.previouslyFocused = null));
+  }
+  static lockScroll() {
+    o.scrollLocks++ > 0 || (o.previousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden");
+  }
+  static unlockScroll() {
+    o.scrollLocks !== 0 && (o.scrollLocks--, o.scrollLocks === 0 && (document.body.style.overflow = o.previousOverflow));
+  }
+  getFocusable() {
+    const e = Array.from(this.renderRoot.querySelectorAll(u)), t = Array.from(this.querySelectorAll(u));
+    return [...e, ...t].filter((l) => !l.hasAttribute("disabled"));
+  }
+  focusInitial() {
+    var t;
+    const e = this.getFocusable();
+    if (e.length) {
+      e[0].focus();
+      return;
+    }
+    (t = this.renderRoot.querySelector(".panel")) == null || t.focus();
+  }
+  getDeepActiveElement() {
+    var t;
+    let e = document.activeElement;
+    for (; (t = e == null ? void 0 : e.shadowRoot) != null && t.activeElement; )
+      e = e.shadowRoot.activeElement;
+    return e;
+  }
+  openModal() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeydown), this.releaseScrollLock();
+  }
+  releaseScrollLock() {
+    this.holdsScrollLock && (o.unlockScroll(), this.holdsScrollLock = !1);
+  }
+  render() {
+    if (!this.open) return d;
+    const e = this.label ? d : this.titleId;
+    return h`
+      <div class="backdrop" @click=${this.handleBackdropClick}>
+        <div
+          class="panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.label || d}
+          aria-labelledby=${e}
+          aria-describedby=${this.bodyId}
+          tabindex="-1"
+        >
+          <div class="header">
+            <div class="title" id=${this.titleId}><slot name="title"></slot></div>
+            <button class="close" type="button" aria-label=${this.closeLabel} @click=${() => this.close()}>×</button>
+          </div>
+          <div class="body" id=${this.bodyId}><slot></slot></div>
+          <div class="footer"><slot name="footer"></slot></div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.instanceCount = 0;
+o.scrollLocks = 0;
+o.previousOverflow = "";
+o.styles = p`
+    :host {
+      display: none;
+    }
+    :host([open]) {
+      display: block;
+    }
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: var(--sui-color-backdrop);
+      backdrop-filter: blur(var(--sui-blur-backdrop));
+      -webkit-backdrop-filter: blur(var(--sui-blur-backdrop));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--sui-z-modal);
+      padding: var(--sui-space-4);
+    }
+    .panel {
+      background: var(--sui-color-surface-raised);
+      color: var(--sui-color-text);
+      border: 1px solid var(--sui-color-border);
+      border-radius: var(--sui-radius-xl);
+      box-shadow: var(--sui-shadow-modal);
+      backdrop-filter: blur(var(--sui-blur-lg));
+      -webkit-backdrop-filter: blur(var(--sui-blur-lg));
+      width: var(--sui-modal-width, 380px);
+      max-width: 100%;
+      max-height: 90vh;
+      overflow: auto;
+      padding: var(--sui-space-5-5);
+      outline: none;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--sui-space-3);
+      margin-bottom: var(--sui-space-2);
+    }
+    .title {
+      font-size: var(--sui-font-size-base);
+      font-weight: var(--sui-font-weight-semibold);
+      margin: 0;
+    }
+    .close {
+      background: transparent;
+      border: 0;
+      font-size: var(--sui-font-size-xl);
+      line-height: 1;
+      color: var(--sui-color-text-muted);
+      padding: var(--sui-space-0-5);
+      border-radius: var(--sui-radius-xs);
+      cursor: pointer;
+    }
+    .close:hover {
+      color: var(--sui-color-text);
+    }
+    .close:focus-visible {
+      outline: none;
+      box-shadow: var(--sui-focus-ring);
+    }
+    .body {
+      font-size: var(--sui-font-size-sm);
+      color: var(--sui-color-text-muted);
+      margin-bottom: var(--sui-space-4-5);
+    }
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--sui-space-2);
+    }
+  `;
+r([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+r([
+  a({ type: String })
+], o.prototype, "label", 2);
+r([
+  a({ type: String, attribute: "close-label" })
+], o.prototype, "closeLabel", 2);
+r([
+  a({ type: Boolean, attribute: "disable-backdrop-close" })
+], o.prototype, "disableBackdropClose", 2);
+o = r([
+  f("sui-modal")
+], o);
+export {
+  o as SuiModal
+};

package/dist/popover.js

@@ -0,0 +1,83 @@
+import { c, i as h } from "./chunks/a11y-BYNN9rH7.js";
+import { c as u } from "./chunks/position-BdzQ8shu.js";
+const s = class s extends HTMLElement {
+  constructor() {
+    super(...arguments), this.uid = ++s.instanceCount, this.observer = new MutationObserver(() => this.upgrade()), this.previousOpen = !1, this.hasSynced = !1, this.handleClick = (e) => {
+      const t = this.trigger, i = e.target.closest("[slot='trigger'], button, [data-popover-trigger]");
+      !t || i !== t || (e.preventDefault(), this.open = !this.open);
+    }, this.handleDocumentClick = (e) => {
+      this.open && !e.composedPath().includes(this) && this.close();
+    }, this.handleKeydown = (e) => {
+      if (e.key === "Escape" && this.open) {
+        e.preventDefault(), this.close(!0);
+        return;
+      }
+      if (e.key === "Tab" && this.open) {
+        queueMicrotask(() => {
+          c(this, document.activeElement) || this.close();
+        });
+        return;
+      }
+      (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && e.target === this.trigger && (e.preventDefault(), this.open = !0, requestAnimationFrame(() => {
+        var t;
+        return this.panel && ((t = Array.from(this.panel.querySelectorAll("*")).find(h)) == null ? void 0 : t.focus());
+      }));
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "label"];
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(e) {
+    this.toggleAttribute("open", e);
+  }
+  get label() {
+    return this.getAttribute("label") ?? "";
+  }
+  connectedCallback() {
+    this.classList.add("ui-popover"), this.upgrade(), this.observer.observe(this, { childList: !0, subtree: !0 }), queueMicrotask(() => this.upgrade()), this.addEventListener("click", this.handleClick), document.addEventListener("click", this.handleDocumentClick), document.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect(), this.removeEventListener("click", this.handleClick), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeydown);
+  }
+  attributeChangedCallback() {
+    this.isConnected && this.sync();
+  }
+  get trigger() {
+    return this.querySelector("[slot='trigger'], button, [data-popover-trigger]");
+  }
+  get panel() {
+    return this.querySelector("[slot='content'], .ui-popover__content, [data-popover-content]");
+  }
+  upgrade() {
+    var i;
+    const e = this.trigger, t = this.panel;
+    !e || !t || (e.type = e.type || "button", t.classList.add("ui-popover__content"), t.id || (t.id = `sui-popover-${this.uid}`), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-controls", t.id), t.setAttribute("role", "dialog"), t.setAttribute("aria-label", this.label || ((i = e.textContent) == null ? void 0 : i.trim()) || "Popover"), this.sync());
+  }
+  sync() {
+    const e = this.trigger, t = this.panel;
+    if (!e || !t) return;
+    this.classList.toggle("open", this.open), e.setAttribute("aria-expanded", String(this.open)), t.hidden = !this.open;
+    const i = this.hasSynced && this.open !== this.previousOpen;
+    this.previousOpen = this.open, this.hasSynced = !0, this.open ? (requestAnimationFrame(() => this.measure()), i && this.dispatchEvent(new CustomEvent("sui-open", { bubbles: !0, composed: !0 }))) : (this.classList.remove("ui-popover--top", "ui-popover--end"), i && this.dispatchEvent(new CustomEvent("sui-close", { bubbles: !0, composed: !0 })));
+  }
+  measure() {
+    var r, o;
+    const e = (r = this.trigger) == null ? void 0 : r.getBoundingClientRect(), t = (o = this.panel) == null ? void 0 : o.getBoundingClientRect();
+    if (!this.open || !e || !t) return;
+    const { side: i, align: a } = u(e, t);
+    this.classList.toggle("ui-popover--top", i === "top"), this.classList.toggle("ui-popover--end", a === "end");
+  }
+  close(e = !1) {
+    var t;
+    this.open && (this.open = !1, e && ((t = this.trigger) == null || t.focus()));
+  }
+};
+s.instanceCount = 0;
+let n = s;
+customElements.get("sui-popover") || customElements.define("sui-popover", n);
+export {
+  n as SuiPopover
+};

package/dist/reset.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{min-height:100vh;font-family:var(--sui-font-family);font-size:var(--sui-font-size-base);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background-color:var(--sui-color-bg);background-image:var(--sui-gradient-page);background-attachment:fixed;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer}[hidden]{display:none!important}:focus-visible{outline:none;box-shadow:var(--sui-focus-ring)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/styles.css

@@ -0,0 +1 @@
+@layer sui.reset,sui.base,sui.components;@layer sui.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{min-height:100vh;font-family:var(--sui-font-family);font-size:var(--sui-font-size-base);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background-color:var(--sui-color-bg);background-image:var(--sui-gradient-page);background-attachment:fixed;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}button{cursor:pointer}[hidden]{display:none!important}:focus-visible{outline:none;box-shadow:var(--sui-focus-ring)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}@layer sui.base{h1,h2,h3,h4,h5,h6{line-height:var(--sui-line-height-tight);font-weight:var(--sui-font-weight-semibold)}*{scrollbar-width:thin;scrollbar-color:var(--sui-scrollbar-thumb) var(--sui-scrollbar-track)}*::-webkit-scrollbar{width:var(--sui-scrollbar-size);height:var(--sui-scrollbar-size)}*::-webkit-scrollbar-track{background:var(--sui-scrollbar-track)}*::-webkit-scrollbar-thumb{background:var(--sui-scrollbar-thumb);border:2px solid transparent;border-radius:var(--sui-radius-full);background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:var(--sui-scrollbar-thumb-hover);background-clip:content-box}p{margin-bottom:var(--sui-space-3)}a{color:var(--sui-color-primary);text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:var(--sui-font-family-mono)}hr{border:0;border-top:1px solid var(--sui-color-border);margin:var(--sui-space-4) 0}.ui-stack{display:flex;flex-direction:column;gap:var(--ui-stack-gap, var(--sui-space-4))}.ui-cluster{display:flex;flex-wrap:wrap;gap:var(--ui-cluster-gap, var(--sui-space-2));align-items:center}.ui-container{width:100%;max-width:var(--ui-container-max, var(--sui-container-lg));margin-inline:auto;padding-inline:var(--sui-space-4)}.ui-grid{display:grid;gap:var(--ui-grid-gap, var(--sui-space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1),minmax(0,1fr))}.ui-skip-link{position:fixed;top:var(--sui-space-3);left:var(--sui-space-3);z-index:calc(var(--sui-z-toast) + 1);padding:var(--sui-space-2) var(--sui-space-3);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-medium);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border-strong);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-menu);transform:translateY(calc(-100% - var(--sui-space-6)))}.ui-skip-link:focus{transform:translateY(0);text-decoration:none}@media (min-width: 768px){.ui-grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}.ui-app-shell{display:grid;grid-template-columns:var(--sui-sidebar-width) 1fr;min-height:100vh}.ui-app-shell--contained{min-height:400px;border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);overflow:hidden;background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));box-shadow:var(--sui-shadow-card)}.ui-app-shell__sidebar{border-right:1px solid var(--sui-color-border);padding:var(--sui-space-4) var(--sui-space-3);background:var(--sui-gradient-sidebar)}.ui-app-shell__brand{margin-bottom:var(--sui-space-3);font-size:var(--sui-font-size-md);font-weight:var(--sui-font-weight-semibold);color:var(--sui-color-text)}.ui-app-shell__content{display:flex;flex-direction:column;min-width:0}.ui-app-shell__header{position:relative;z-index:var(--sui-z-dropdown);border-bottom:1px solid var(--sui-color-border);padding:var(--sui-space-3) var(--sui-space-4-5);background:var(--sui-color-surface-raised);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));display:flex;align-items:center;justify-content:space-between}.ui-app-shell__title{font-size:var(--sui-font-size-md);font-weight:var(--sui-font-weight-semibold);line-height:var(--sui-line-height-tight)}.ui-app-shell__main{padding:var(--sui-space-4-5);flex:1;display:flex;flex-direction:column;gap:var(--sui-space-3-5)}@media (max-width: 767px){.ui-app-shell{grid-template-columns:1fr}.ui-app-shell__sidebar{border-right:0;border-bottom:1px solid var(--sui-color-border)}}}@layer sui.components;@layer sui.components{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sui-space-1-5);height:var(--sui-control-height-md);padding:0 var(--sui-space-4);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-medium);line-height:1;border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));transition:background var(--sui-duration-fast) var(--sui-easing-standard),border-color var(--sui-duration-fast) var(--sui-easing-standard),color var(--sui-duration-fast) var(--sui-easing-standard);cursor:pointer}.ui-button:hover,.ui-button:focus-visible{background:var(--sui-color-surface-muted);border-color:var(--sui-color-primary-hover);color:var(--sui-color-text)}.ui-button:active{border-color:var(--sui-color-primary-active)}.ui-button--primary{background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);border:0}.ui-button--primary:hover,.ui-button--primary:focus-visible{filter:brightness(1.05);color:var(--sui-color-text);border:1px solid transparent;background-image:linear-gradient(var(--sui-color-surface-raised),var(--sui-color-surface-raised)),var(--sui-gradient-primary);background-origin:border-box;background-clip:padding-box,border-box}.ui-button--primary:active{filter:brightness(.95)}.ui-button--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:var(--sui-color-danger-border)}.ui-button--danger:hover{background:var(--sui-color-danger-surface-hover);border-color:var(--sui-color-danger);color:var(--sui-color-danger-text)}.ui-button--ghost{background:transparent;border-color:transparent}.ui-button--ghost:hover{background:var(--sui-color-surface-muted);border-color:var(--sui-color-border)}.ui-button--sm{height:var(--sui-control-height-sm);padding:0 var(--sui-space-3);font-size:var(--sui-font-size-xs)}.ui-button:disabled{opacity:.5;cursor:not-allowed}}@layer sui.components{.ui-input{display:block;width:100%;height:var(--sui-field-height);padding:0 var(--sui-space-3);font-size:var(--sui-font-size-sm);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard);outline:none}.ui-input::placeholder{color:var(--sui-color-text-subtle)}.ui-input:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-input:disabled{background:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-input--invalid{border-color:var(--sui-color-danger-border)}.ui-input--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}.ui-label{display:block;margin-bottom:var(--sui-space-1);font-size:var(--sui-font-size-xs);font-weight:var(--sui-font-weight-medium);color:var(--sui-color-text)}.ui-field{margin-bottom:var(--sui-space-3-5)}.ui-help{margin-top:var(--sui-space-1);font-size:var(--sui-font-size-2xs);color:var(--sui-color-text-muted)}.ui-error{margin-top:var(--sui-space-1);font-size:var(--sui-font-size-2xs);color:var(--sui-color-danger)}}@layer sui.components{.ui-textarea{display:block;width:100%;min-height:var(--sui-textarea-min-height, 96px);padding:var(--sui-space-2-5) var(--sui-space-3);font-size:var(--sui-font-size-sm);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));resize:vertical;outline:none;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-textarea:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-textarea:disabled{background:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-textarea--invalid{border-color:var(--sui-color-danger-border)}.ui-textarea--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}}@layer sui.components{.ui-select{display:block;width:100%;height:var(--sui-field-height);padding:0 var(--sui-space-8) 0 var(--sui-space-3);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sui-space-2-5) center;cursor:pointer;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-select:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-select:disabled{background-color:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-select--invalid{border-color:var(--sui-color-danger-border)}.ui-select--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}}@layer sui.components{.ui-checkbox{display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox input{width:var(--sui-check-size);height:var(--sui-check-size);accent-color:var(--sui-color-primary);cursor:pointer}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed}}@layer sui.components{.ui-radio{display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-radio input{width:var(--sui-check-size);height:var(--sui-check-size);accent-color:var(--sui-color-primary);cursor:pointer}.ui-radio input:disabled{cursor:not-allowed}.ui-radio--disabled{opacity:.5;cursor:not-allowed}.ui-radio-group{display:flex;flex-direction:column;gap:var(--sui-space-2)}}@layer sui.components{.ui-switch{position:relative;display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-switch__track{position:relative;width:var(--sui-switch-width, 36px);height:var(--sui-switch-height, 20px);border-radius:var(--sui-radius-full);background:var(--sui-color-border-strong);transition:background var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch__track:after{content:"";position:absolute;top:var(--sui-switch-offset, 2px);left:var(--sui-switch-offset, 2px);width:var(--sui-switch-knob, 16px);height:var(--sui-switch-knob, 16px);border-radius:var(--sui-radius-full);background:var(--sui-color-control-knob);transition:transform var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch input:checked+.ui-switch__track{background:var(--sui-gradient-primary)}.ui-switch input:checked+.ui-switch__track:after{transform:translate(calc(var(--sui-switch-width, 36px) - var(--sui-switch-knob, 16px) - var(--sui-switch-offset, 2px) - var(--sui-switch-offset, 2px)))}.ui-switch input:focus-visible+.ui-switch__track{box-shadow:var(--sui-focus-ring)}.ui-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.ui-switch:has(input:disabled){opacity:.5;cursor:not-allowed}}@layer sui.components{.ui-card{background:var(--sui-color-surface);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);box-shadow:var(--sui-shadow-card);padding:var(--sui-space-5);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));transition:transform var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard)}.ui-card:hover{transform:translateY(-2px);box-shadow:var(--sui-shadow-card-hover)}.ui-card--raised{background:var(--sui-color-surface-raised)}.ui-card--glass{background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg));box-shadow:var(--sui-shadow-card)}.ui-card--glass:hover{box-shadow:var(--sui-shadow-card-hover)}.ui-card__header{margin-bottom:var(--sui-space-2)}.ui-card__title{font-size:var(--sui-font-size-md);font-weight:var(--sui-font-weight-semibold)}.ui-card__body{color:var(--sui-color-text-muted);font-size:var(--sui-font-size-sm)}.ui-card__footer{margin-top:var(--sui-space-3);padding-top:var(--sui-space-3);border-top:1px solid var(--sui-color-border);display:flex;gap:var(--sui-space-1-5)}}@layer sui.components{.ui-badge{display:inline-flex;align-items:center;height:var(--sui-badge-height, 22px);padding:0 var(--sui-space-2);font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-medium);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text);border:1px solid var(--sui-color-border);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm))}.ui-badge--primary{background:var(--sui-color-info-surface);color:var(--sui-color-primary-text);border-color:transparent}.ui-badge--success{background:var(--sui-color-success-surface);color:var(--sui-color-success-text);border-color:transparent}.ui-badge--warning{background:var(--sui-color-warning-surface);color:var(--sui-color-warning-text);border-color:transparent}.ui-badge--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:transparent}.ui-badge--info{background:var(--sui-color-info-surface);color:var(--sui-color-info-text);border-color:transparent}.ui-badge--outline{background:transparent;color:var(--sui-color-text)}.ui-chip{display:inline-flex;align-items:center;gap:var(--sui-space-1-5);height:var(--sui-chip-height, 26px);padding:0 var(--sui-space-2-5);font-size:var(--sui-font-size-xs);font-weight:var(--sui-font-weight-medium);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text-muted);border:1px solid var(--sui-color-border);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm))}}@layer sui.components{.ui-alert{display:flex;gap:var(--sui-space-3);padding:var(--sui-space-3-5) var(--sui-space-4);border:1px solid transparent;border-left:3px solid var(--sui-color-primary);border-radius:var(--sui-radius-xl);font-size:var(--sui-font-size-sm);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-alert--success{background:var(--sui-color-success-surface);color:var(--sui-color-success-text);border-color:var(--sui-color-success-border);border-left-color:var(--sui-color-success)}.ui-alert--warning{background:var(--sui-color-warning-surface);color:var(--sui-color-warning-text);border-color:var(--sui-color-warning-border);border-left-color:var(--sui-color-warning)}.ui-alert--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:var(--sui-color-danger-border);border-left-color:var(--sui-color-danger)}.ui-alert--info{background:var(--sui-color-info-surface);color:var(--sui-color-info-text);border-color:var(--sui-color-info-border);border-left-color:var(--sui-color-info)}.ui-alert__title{font-weight:var(--sui-font-weight-semibold);margin-bottom:var(--sui-space-0-5)}.ui-alert__body{opacity:.85}.ui-alert__close{background:transparent;border:0;color:inherit;font-size:var(--sui-font-size-lg);line-height:1;padding:0;opacity:.6}}@layer sui.components{.ui-spinner{display:inline-block;width:var(--sui-spinner-size, 16px);height:var(--sui-spinner-size, 16px);border:var(--sui-spinner-border, 2px) solid var(--sui-color-border);border-top-color:var(--sui-color-primary);border-radius:50%;animation:sui-spin var(--sui-duration-spinner) linear infinite}.ui-spinner--sm{--sui-spinner-size: 12px;--sui-spinner-border: 1.5px}.ui-spinner--lg{--sui-spinner-size: 24px;--sui-spinner-border: 3px}@keyframes sui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation:none}}}@layer sui.components{.ui-skeleton{background:linear-gradient(90deg,var(--sui-color-surface-muted) 25%,var(--sui-color-surface-raised) 50%,var(--sui-color-surface-muted) 75%);background-size:200% 100%;animation:sui-shimmer var(--sui-duration-shimmer) ease infinite;border-radius:var(--sui-radius-sm)}.ui-skeleton--text{height:var(--sui-space-3);width:100%;margin-bottom:var(--sui-space-1-5)}.ui-skeleton--title{height:var(--sui-space-4-5);width:60%;margin-bottom:var(--sui-space-2-5)}.ui-skeleton--avatar{width:var(--sui-space-10);height:var(--sui-space-10);border-radius:var(--sui-radius-full)}.ui-skeleton--block{height:var(--sui-skeleton-block-height, 120px);width:100%}@keyframes sui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.ui-skeleton{animation:none}}}@layer sui.components{.ui-progress{width:100%;height:var(--sui-progress-height, 6px);background:var(--sui-color-surface-muted);border-radius:var(--sui-radius-full);overflow:hidden}.ui-progress__bar{height:100%;background:var(--sui-gradient-primary);border-radius:var(--sui-radius-full);transition:width var(--sui-duration-normal) var(--sui-easing-standard)}.ui-progress--indeterminate .ui-progress__bar{width:40%;animation:sui-progress var(--sui-duration-progress) ease-in-out infinite}@keyframes sui-progress{0%{transform:translate(-100%)}to{transform:translate(300%)}}[data-theme=light] .ui-progress{background:#0f172a1a}[data-theme=dark] .ui-progress{background:#94a3b838}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{width:100%;animation:none}}}@layer sui.components{.ui-toast-container{position:fixed;top:var(--sui-space-4);right:var(--sui-space-4);display:flex;flex-direction:column;gap:var(--sui-space-2);z-index:var(--sui-z-toast);max-width:var(--sui-toast-max-width, 360px)}.ui-toast{display:flex;gap:var(--sui-space-2-5);padding:var(--sui-space-3) var(--sui-space-3-5);border:1px solid var(--sui-color-border);border-left:3px solid var(--sui-color-primary);border-radius:var(--sui-radius-lg);background:var(--sui-color-surface-raised);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));font-size:var(--sui-font-size-sm);box-shadow:var(--sui-shadow-floating);animation:sui-toast-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-toast--success{border-left-color:var(--sui-color-success)}.ui-toast--warning{border-left-color:var(--sui-color-warning)}.ui-toast--danger{border-left-color:var(--sui-color-danger)}.ui-toast__title{font-weight:var(--sui-font-weight-semibold);margin-bottom:var(--sui-space-0-5)}.ui-toast__body{color:var(--sui-color-text-muted)}@keyframes sui-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-toast{animation:none}}}@layer sui.components{.ui-tooltip{position:relative;display:inline-block}.ui-tooltip__content{position:absolute;bottom:calc(100% + var(--sui-space-1-5));left:50%;transform:translate(-50%);padding:var(--sui-space-1-5) var(--sui-space-2-5);font-size:var(--sui-font-size-xs);color:var(--sui-color-inverse-text);background:var(--sui-color-inverse-surface);border-radius:var(--sui-radius-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--sui-duration-fast) var(--sui-easing-standard);z-index:var(--sui-z-popover)}.ui-tooltip:hover .ui-tooltip__content,.ui-tooltip:focus-within .ui-tooltip__content{opacity:1}}@layer sui.components{.ui-popover{position:relative;display:inline-block}.ui-popover__content{position:absolute;top:calc(100% + var(--sui-space-2));left:0;min-width:var(--sui-popover-min-width, 220px);padding:var(--sui-space-3);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-floating);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));display:none;z-index:var(--sui-z-popover)}.ui-popover.open .ui-popover__content{display:block;animation:sui-popover-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-popover--top .ui-popover__content{top:auto;bottom:calc(100% + var(--sui-space-2))}.ui-popover--end .ui-popover__content{left:auto;right:0}@keyframes sui-popover-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-popover.open .ui-popover__content{animation:none}}}@layer sui.components{.ui-accordion{display:block;border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-lg);overflow:hidden;background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-accordion__item+.ui-accordion__item{border-top:1px solid var(--sui-color-border)}.ui-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--sui-space-3) var(--sui-space-4);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-medium);color:var(--sui-color-text);background:transparent;border:0;cursor:pointer;text-align:left}.ui-accordion__trigger:hover{background:var(--sui-color-surface-muted)}.ui-accordion__trigger:disabled,.ui-accordion__item[aria-disabled=true] .ui-accordion__trigger{opacity:.5;cursor:not-allowed}.ui-accordion__item[aria-disabled=true]{opacity:.6}.ui-accordion__content{padding:0 var(--sui-space-4) var(--sui-space-3);font-size:var(--sui-font-size-sm);color:var(--sui-color-text-muted);display:none}.ui-accordion__item.open .ui-accordion__content{display:block}}@layer sui.components{.ui-nav{display:flex;flex-direction:column;gap:var(--sui-space-0-5)}.ui-nav__item{display:flex;align-items:center;gap:var(--sui-space-2);padding:var(--sui-space-2) var(--sui-space-2-5);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);text-decoration:none;border-radius:var(--sui-radius-sm);transition:background var(--sui-duration-fast) var(--sui-easing-standard),color var(--sui-duration-fast) var(--sui-easing-standard);cursor:pointer;border:0;background:transparent;width:100%;text-align:left}.ui-nav__item:not(.ui-nav__item--active):hover{background:var(--sui-color-surface-muted);text-decoration:none}.ui-nav__item--active{background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);font-weight:var(--sui-font-weight-medium)}.ui-nav__item[aria-disabled=true],.ui-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-nav__item--active:hover,.ui-nav__item--active:focus-visible{color:var(--sui-color-text);border:1px solid transparent;background-image:linear-gradient(var(--sui-color-surface-raised),var(--sui-color-surface-raised)),var(--sui-gradient-primary);background-origin:border-box;background-clip:padding-box,border-box;filter:brightness(1.05);text-decoration:none}.ui-nav__group-title{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);padding:0 var(--sui-space-2-5);margin:var(--sui-space-2-5) 0 var(--sui-space-1)}}@layer sui.components{.ui-table-wrap{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-radius:var(--sui-radius-lg)}.ui-table-wrap:focus-visible{outline:none;box-shadow:var(--sui-focus-ring)}.ui-table-wrap .ui-table{min-width:var(--sui-table-min-width, 36rem)}.ui-table{width:100%;border-collapse:collapse;font-size:var(--sui-font-size-sm);background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));border-radius:var(--sui-radius-lg);overflow:hidden;border:1px solid var(--sui-color-border)}.ui-table th,.ui-table td{padding:var(--sui-space-2-5) var(--sui-space-3-5);text-align:left;border-bottom:1px solid var(--sui-color-border)}.ui-table th{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);background:var(--sui-color-surface-muted)}.ui-table tbody tr:hover{background:var(--sui-color-surface-muted)}.ui-table tbody tr:last-child td{border-bottom:0}}@layer sui.components{.ui-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sui-avatar-size, 36px);height:var(--sui-avatar-size, 36px);border-radius:var(--sui-radius-full);background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-semibold);overflow:hidden;flex-shrink:0}.ui-avatar img{width:100%;height:100%;object-fit:cover}.ui-avatar--sm{--sui-avatar-size: 24px;font-size:var(--sui-font-size-3xs)}.ui-avatar--lg{--sui-avatar-size: 48px;font-size:var(--sui-font-size-base)}.ui-avatar-group{display:flex;align-items:center}.ui-avatar-group .ui-avatar{margin-left:calc(var(--sui-space-2) * -1);border:2px solid var(--sui-color-surface-raised)}.ui-avatar-group .ui-avatar:first-child{margin-left:0}}@layer sui.components{.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sui-space-10) var(--sui-space-5);color:var(--sui-color-text-muted);background:var(--sui-color-surface);border:1px dashed var(--sui-color-border-strong);border-radius:var(--sui-radius-xl);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-empty__title{font-size:var(--sui-font-size-base);font-weight:var(--sui-font-weight-semibold);color:var(--sui-color-text);margin-bottom:var(--sui-space-1)}.ui-empty__body{font-size:var(--sui-font-size-sm);max-width:36ch;margin-bottom:var(--sui-space-3)}}@layer sui.components{.ui-stat{background:var(--sui-color-surface);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);padding:var(--sui-space-4) var(--sui-space-4-5);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-stat__label{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);margin-bottom:var(--sui-space-1)}.ui-stat__value{font-size:var(--sui-font-size-2xl);font-weight:var(--sui-font-weight-bold);letter-spacing:var(--sui-letter-spacing-tight);background:var(--sui-gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}.ui-stat__hint{font-size:var(--sui-font-size-xs);color:var(--sui-color-text-muted);margin-top:var(--sui-space-1)}}@layer sui.components{.ui-topbar{position:sticky;top:var(--sui-space-3);z-index:var(--sui-z-popover);display:flex;align-items:center;justify-content:space-between;gap:var(--sui-space-3);padding:var(--sui-space-2) var(--sui-space-2) var(--sui-space-2) var(--sui-space-4);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);box-shadow:var(--sui-shadow-card);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}.ui-topbar__brand{display:inline-flex;align-items:center;gap:var(--sui-space-2);color:var(--sui-color-text);font-weight:var(--sui-font-weight-semibold);text-decoration:none}.ui-topbar__mark{display:grid;width:1.8rem;height:1.8rem;place-items:center;color:var(--sui-color-primary-contrast);background:var(--sui-gradient-primary);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-sm)}.ui-topbar__controls{display:flex;align-items:center;gap:var(--sui-space-2)}.ui-topbar--glass{background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}@media (max-width: 620px){.ui-topbar{top:var(--sui-space-1);padding-left:var(--sui-space-2)}.ui-topbar__brand span:last-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}}