@editora/ui-core 0.1.8 → 0.1.10

package/dist/accordion.esm.js

@@ -0,0 +1,647 @@
+import { E as f } from "./ElementBase-909688f3.mjs";
+const p = `
+  ui-accordion[data-ui-accordion-root="true"] {
+    display: block;
+    overflow-anchor: none;
+    --ui-accordion-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-accordion-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-accordion-border: 1px solid var(--ui-accordion-border-color);
+    --ui-accordion-divider: color-mix(in srgb, var(--ui-accordion-border-color) 78%, transparent);
+    --ui-accordion-surface-base: var(--base-card-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-accordion-surface-alt-base: var(--color-surface, var(--ui-color-surface-alt, #f8fafc));
+    --ui-accordion-surface: var(--ui-accordion-surface-base);
+    --ui-accordion-surface-alt: var(--ui-accordion-surface-alt-base);
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 6%, var(--ui-accordion-surface-alt));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 5%, var(--ui-accordion-surface));
+    --ui-accordion-text: var(--ui-color-text, var(--ui-text, #202020));
+    --ui-accordion-muted: var(--ui-color-muted, var(--ui-muted, #646464));
+    --ui-accordion-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-accordion-shadow: var(--base-card-shadow, var(--shadow-2, none));
+    --ui-accordion-duration: 190ms;
+    --ui-accordion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-accordion-padding-x: 16px;
+    --ui-accordion-padding-y: 14px;
+    --ui-accordion-gap: var(--ui-default-gap, 8px);
+    --ui-accordion-title-size: var(--ui-default-font-size, 14px);
+    --ui-accordion-title-line-height: var(--ui-default-line-height, 20px);
+    --ui-accordion-title-weight: 600;
+    --ui-accordion-description-size: 12px;
+    --ui-accordion-description-line-height: 16px;
+    --ui-accordion-panel-size: 14px;
+    --ui-accordion-panel-line-height: 20px;
+    --ui-accordion-badge-radius: 999px;
+    --ui-accordion-indicator-size: 3px;
+    color-scheme: light dark;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][size="sm"],
+  ui-accordion[data-ui-accordion-root="true"][size="1"] {
+    --ui-accordion-padding-x: 12px;
+    --ui-accordion-padding-y: 10px;
+    --ui-accordion-gap: 6px;
+    --ui-accordion-title-size: 13px;
+    --ui-accordion-title-line-height: 18px;
+    --ui-accordion-description-size: 11px;
+    --ui-accordion-description-line-height: 14px;
+    --ui-accordion-panel-size: 13px;
+    --ui-accordion-panel-line-height: 18px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][size="lg"],
+  ui-accordion[data-ui-accordion-root="true"][size="3"] {
+    --ui-accordion-padding-x: 20px;
+    --ui-accordion-padding-y: 18px;
+    --ui-accordion-gap: 10px;
+    --ui-accordion-title-size: 16px;
+    --ui-accordion-title-line-height: 24px;
+    --ui-accordion-description-size: 13px;
+    --ui-accordion-description-line-height: 18px;
+    --ui-accordion-panel-size: 15px;
+    --ui-accordion-panel-line-height: 24px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="success"] {
+    --ui-accordion-accent: var(--ui-color-success, #16a34a);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="warning"] {
+    --ui-accordion-accent: var(--ui-color-warning, #d97706);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][tone="danger"] {
+    --ui-accordion-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="outline"] {
+    --ui-accordion-shadow: none;
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 18%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 4%, var(--ui-accordion-surface));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, var(--ui-accordion-surface-alt));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="soft"] {
+    --ui-accordion-shadow: none;
+    --ui-accordion-surface: color-mix(in srgb, var(--ui-accordion-accent) 4%, var(--ui-accordion-surface-base));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, var(--ui-accordion-surface-base));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, var(--ui-accordion-surface-alt-base));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 12%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="solid"] {
+    --ui-accordion-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, var(--ui-accordion-surface-base));
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 16%, var(--ui-accordion-surface-base));
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 13%, var(--ui-accordion-surface-alt-base));
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 22%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-accordion-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 18px 36px color-mix(in srgb, var(--ui-accordion-accent) 10%, rgba(15, 23, 42, 0.08));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="ghost"] {
+    --ui-accordion-surface: transparent;
+    --ui-accordion-surface-alt: transparent;
+    --ui-accordion-open-surface: color-mix(in srgb, var(--ui-accordion-accent) 8%, transparent);
+    --ui-accordion-hover-surface: color-mix(in srgb, var(--ui-accordion-accent) 10%, transparent);
+    --ui-accordion-shadow: none;
+    --ui-accordion-border-color: color-mix(in srgb, var(--ui-accordion-accent) 12%, transparent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][variant="glass"] {
+    --ui-accordion-surface: linear-gradient(180deg, color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 88%, #ffffff 12%), color-mix(in srgb, var(--color-panel-solid, var(--ui-color-surface, #ffffff)) 94%, transparent));
+    --ui-accordion-shadow: var(--base-panel-shadow, var(--shadow-4, none));
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="none"] {
+    --ui-accordion-shadow: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="low"] {
+    --ui-accordion-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 22px rgba(15, 23, 42, 0.09);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][elevation="high"] {
+    --ui-accordion-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), 0 30px 58px rgba(15, 23, 42, 0.16);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item] {
+    margin: 0;
+    position: relative;
+    background: var(--ui-accordion-surface);
+    color: var(--ui-accordion-text);
+    border-inline: var(--ui-accordion-border);
+    overflow: clip;
+    transition: background var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]:first-of-type {
+    border-block-start: var(--ui-accordion-border);
+    border-start-start-radius: var(--ui-accordion-radius);
+    border-start-end-radius: var(--ui-accordion-radius);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]:last-of-type {
+    border-block-end: var(--ui-accordion-border);
+    border-end-start-radius: var(--ui-accordion-radius);
+    border-end-end-radius: var(--ui-accordion-radius);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item] + [data-ui-accordion-item] {
+    border-block-start: 1px solid var(--ui-accordion-divider);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item]::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 0;
+    background: linear-gradient(180deg, var(--ui-accordion-accent) 0%, color-mix(in srgb, var(--ui-accordion-accent) 70%, #0f172a 30%) 100%);
+    transition: inline-size var(--ui-accordion-duration) var(--ui-accordion-easing);
+    pointer-events: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] {
+    background: var(--ui-accordion-open-surface);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open]::before {
+    inline-size: var(--ui-accordion-indicator-size);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"][indicator="none"] > [data-ui-accordion-item]::before {
+    display: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][data-disabled="true"] {
+    opacity: 0.62;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger] {
+    inline-size: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ui-accordion-gap);
+    font: inherit;
+    font-size: var(--ui-accordion-title-size);
+    font-weight: var(--ui-accordion-title-weight);
+    letter-spacing: var(--ui-default-letter-spacing, 0em);
+    line-height: var(--ui-accordion-title-line-height);
+    padding: var(--ui-accordion-padding-y) var(--ui-accordion-padding-x);
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--ui-accordion-duration) var(--ui-accordion-easing), color var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:not([disabled]):hover {
+    background: var(--ui-accordion-hover-surface);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
+    color: color-mix(in srgb, var(--ui-accordion-text) 82%, var(--ui-accordion-accent) 18%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger]:focus-visible {
+    outline: 2px solid var(--ui-accordion-focus-ring);
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger][disabled] {
+    opacity: 0.56;
+    cursor: not-allowed;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-item-body] {
+    flex: 1;
+    min-inline-size: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trailing] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    flex: 0 0 auto;
+    min-inline-size: 0;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-badge] {
+    border-radius: var(--ui-accordion-badge-radius);
+    padding: 3px 8px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    line-height: 1.2;
+    background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-accordion-accent) 84%, var(--ui-accordion-text) 16%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {
+    inline-size: 18px;
+    block-size: 18px;
+    min-inline-size: 18px;
+    color: var(--ui-accordion-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    transition: transform var(--ui-accordion-duration) var(--ui-accordion-easing), color var(--ui-accordion-duration) var(--ui-accordion-easing);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-chevron] {
+    transform: rotate(180deg);
+    color: var(--ui-accordion-accent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-description] {
+    display: block;
+    padding: 0 var(--ui-accordion-padding-x) 10px;
+    font-size: var(--ui-accordion-description-size);
+    line-height: var(--ui-accordion-description-line-height);
+    color: color-mix(in srgb, var(--ui-accordion-text) 62%, var(--ui-accordion-muted) 38%);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-generated-description][hidden] {
+    display: none;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    font-size: var(--ui-accordion-panel-size);
+    line-height: var(--ui-accordion-panel-line-height);
+    color: color-mix(in srgb, var(--ui-accordion-text) 88%, var(--ui-accordion-muted) 12%);
+    padding: 0 var(--ui-accordion-padding-x);
+    border-top: 1px solid transparent;
+    transform: translateY(-4px);
+    transition:
+      max-height var(--ui-accordion-duration) var(--ui-accordion-easing),
+      opacity var(--ui-accordion-duration) var(--ui-accordion-easing),
+      transform var(--ui-accordion-duration) var(--ui-accordion-easing),
+      padding var(--ui-accordion-duration) var(--ui-accordion-easing),
+      border-color var(--ui-accordion-duration) var(--ui-accordion-easing);
+    will-change: max-height;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-panel] {
+    max-height: var(--ui-accordion-panel-height, 0px);
+    opacity: 1;
+    transform: translateY(0);
+    padding: 0 var(--ui-accordion-padding-x) 14px;
+    border-top-color: color-mix(in srgb, var(--ui-accordion-accent) 24%, transparent);
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] > :first-child {
+    margin-top: 12px;
+  }
+
+  ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] > :last-child {
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 720px) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-padding-x: 12px;
+      --ui-accordion-padding-y: 12px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-trigger],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron],
+    ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-panel] {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-border: 2px solid var(--ui-color-border, currentColor);
+      --ui-accordion-divider: currentColor;
+      --ui-accordion-focus-ring: currentColor;
+      --ui-accordion-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    ui-accordion[data-ui-accordion-root="true"] {
+      --ui-accordion-surface: Canvas;
+      --ui-accordion-surface-alt: Canvas;
+      --ui-accordion-text: CanvasText;
+      --ui-accordion-muted: CanvasText;
+      --ui-accordion-accent: Highlight;
+      --ui-accordion-border: 1px solid CanvasText;
+      --ui-accordion-divider: CanvasText;
+      --ui-accordion-focus-ring: Highlight;
+      --ui-accordion-shadow: none;
+    }
+
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-trigger] {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    ui-accordion[data-ui-accordion-root="true"] > [data-ui-accordion-item][open] [data-ui-accordion-chevron] {
+      color: HighlightText;
+    }
+  }
+`;
+function u(c) {
+  const i = Number(c);
+  if (!Number.isFinite(i))
+    return -1;
+  const r = Math.trunc(i);
+  return r >= 0 ? r : -1;
+}
+function b(c, i) {
+  if (c == null)
+    return i;
+  const r = c.toLowerCase();
+  return r !== "false" && r !== "0" && r !== "no";
+}
+function m(c, i) {
+  if (!c)
+    return [];
+  if (!i) {
+    const o = u(c);
+    return o >= 0 ? [o] : [];
+  }
+  try {
+    const o = JSON.parse(c);
+    if (Array.isArray(o))
+      return o.map(u).filter((e) => e >= 0);
+  } catch {
+  }
+  const r = u(c);
+  return r >= 0 ? [r] : [];
+}
+function h(c, i) {
+  return i ? JSON.stringify(c) : String(c[0] ?? -1);
+}
+function v(c, i = "var(--base-card-radius, var(--ui-radius, 4px))") {
+  if (!c || !c.trim())
+    return i;
+  const r = c.trim().toLowerCase();
+  return r === "full" || r === "pill" ? "999px" : r === "square" || r === "none" ? "0px" : /^-?\d+(\.\d+)?$/.test(r) ? `${r}px` : c.trim();
+}
+function x(c) {
+  return c instanceof HTMLElement && c.hasAttribute("data-ui-accordion-item");
+}
+class y extends f {
+  constructor() {
+    super(), this._uid = `ui-accordion-${Math.random().toString(36).slice(2, 8)}`, this._observer = null, this._panelResizeObserver = null, this._heightSyncRaf = 0, this._syncingOpenAttr = !1, this._syncingDom = !1, this._syncingDomResetTimer = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onMutations = this._onMutations.bind(this);
+  }
+  static get observedAttributes() {
+    return ["open", "multiple", "collapsible", "headless", "shape", "elevation", "variant", "size", "tone", "radius", "indicator"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("data-ui-accordion-root", "true"), this._syncHostStyles(), this.addEventListener("click", this._onClick), this.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(this._onMutations), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0,
+      attributes: !0
+    }), typeof ResizeObserver < "u" && (this._panelResizeObserver = new ResizeObserver(() => {
+      this._syncPanelHeights();
+    }));
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this._observer && (this._observer.disconnect(), this._observer = null), this._panelResizeObserver && (this._panelResizeObserver.disconnect(), this._panelResizeObserver = null), this._heightSyncRaf && (cancelAnimationFrame(this._heightSyncRaf), this._heightSyncRaf = 0), this._syncingDomResetTimer != null && (clearTimeout(this._syncingDomResetTimer), this._syncingDomResetTimer = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(i, r, o) {
+    if (r !== o) {
+      if (i === "radius" || i === "shape") {
+        this._syncHostStyles();
+        return;
+      }
+      if (this.isConnected) {
+        if (i === "open") {
+          this._applyOpenState();
+          return;
+        }
+        this.requestRender();
+      }
+    }
+  }
+  get multiple() {
+    return this.hasAttribute("multiple");
+  }
+  set multiple(i) {
+    i !== this.multiple && (i ? this.setAttribute("multiple", "") : this.removeAttribute("multiple"));
+  }
+  get collapsible() {
+    return b(this.getAttribute("collapsible"), !0);
+  }
+  set collapsible(i) {
+    this.setAttribute("collapsible", String(!!i));
+  }
+  get open() {
+    const i = this._normalizeOpen(this._sourceItems());
+    return this.multiple ? i : i[0] ?? -1;
+  }
+  set open(i) {
+    const r = Array.isArray(i) ? i : [i];
+    this._commitOpen(r.map(u).filter((o) => o >= 0), !1);
+  }
+  _sourceItems() {
+    return Array.from(this.children).filter(x).map((r, o) => {
+      const e = Array.from(r.children), t = e.find((n) => n.hasAttribute("data-ui-accordion-trigger")) || null, a = e.find((n) => n.hasAttribute("data-ui-accordion-panel")) || null;
+      return {
+        index: o,
+        itemNode: r,
+        trigger: t,
+        panel: a,
+        disabled: r.hasAttribute("disabled") || (t == null ? void 0 : t.hasAttribute("disabled")) || !1,
+        description: r.getAttribute("description") || r.getAttribute("data-description") || "",
+        badge: r.getAttribute("badge") || r.getAttribute("data-badge") || ""
+      };
+    });
+  }
+  _normalizeOpen(i) {
+    const r = m(this.getAttribute("open"), this.multiple), o = Array.from(
+      new Set(r.map(u).filter((t) => {
+        var a;
+        return t >= 0 && t < i.length && !((a = i[t]) != null && a.disabled);
+      }))
+    ).sort((t, a) => t - a), e = i.findIndex((t) => !t.disabled);
+    return this.multiple ? this.collapsible || i.length === 0 || o.length > 0 ? o : e >= 0 ? [e] : [] : o.length > 0 ? [o[0]] : this.collapsible || i.length === 0 ? [] : e >= 0 ? [e] : [];
+  }
+  _normalizeNext(i, r) {
+    const o = Array.from(
+      new Set(i.map(u).filter((t) => {
+        var a;
+        return t >= 0 && t < r.length && !((a = r[t]) != null && a.disabled);
+      }))
+    ).sort((t, a) => t - a), e = r.findIndex((t) => !t.disabled);
+    return this.multiple ? this.collapsible || r.length === 0 || o.length > 0 ? o : e >= 0 ? [e] : [] : o.length > 0 ? [o[0]] : this.collapsible || r.length === 0 ? [] : e >= 0 ? [e] : [];
+  }
+  _commitOpen(i, r) {
+    const o = this._sourceItems(), e = this._normalizeNext(i, o), t = h(e, this.multiple), a = this.getAttribute("open") ?? (this.multiple ? "[]" : "-1");
+    if (t !== a && (this._syncingOpenAttr = !0, this.setAttribute("open", t), this._syncingOpenAttr = !1, this._applyOpenState()), !r)
+      return;
+    const n = this.multiple ? e : e[0] ?? -1;
+    this.dispatchEvent(new CustomEvent("toggle", { detail: { open: n }, bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { open: n }, bubbles: !0 }));
+  }
+  _ensureStyleNode() {
+    let i = this.querySelector(":scope > style[data-ui-accordion-style]");
+    if (!i) {
+      i = document.createElement("style"), i.setAttribute("data-ui-accordion-style", ""), i.textContent = p, this.prepend(i);
+      return;
+    }
+    i.textContent !== p && (i.textContent = p);
+  }
+  _markSyncingDom() {
+    this._syncingDom = !0, this._syncingDomResetTimer != null && clearTimeout(this._syncingDomResetTimer), this._syncingDomResetTimer = window.setTimeout(() => {
+      this._syncingDom = !1, this._syncingDomResetTimer = null;
+    }, 0);
+  }
+  _syncHostStyles() {
+    const i = this.getAttribute("radius"), r = this.getAttribute("shape");
+    if (i && i.trim()) {
+      this.style.setProperty("--ui-accordion-radius", v(i));
+      return;
+    }
+    if (r === "square") {
+      this.style.setProperty("--ui-accordion-radius", "4px");
+      return;
+    }
+    if (r === "pill") {
+      this.style.setProperty("--ui-accordion-radius", "999px");
+      return;
+    }
+    this.style.removeProperty("--ui-accordion-radius");
+  }
+  _ensureGeneratedNodes(i) {
+    const { trigger: r, itemNode: o, description: e, badge: t } = i;
+    if (!r)
+      return;
+    let a = r.querySelector("[data-ui-accordion-trailing]");
+    a || (a = document.createElement("span"), a.setAttribute("data-ui-accordion-trailing", ""), r.appendChild(a));
+    let n = a.querySelector("[data-ui-accordion-generated-badge]");
+    t ? (n || (n = document.createElement("span"), n.setAttribute("data-ui-accordion-generated-badge", ""), a.appendChild(n)), n.textContent = t) : n && n.remove();
+    let d = a.querySelector("[data-ui-accordion-chevron]");
+    d || (d = document.createElement("span"), d.setAttribute("data-ui-accordion-chevron", ""), d.setAttribute("aria-hidden", "true"), d.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 7.5 10 12.5 15 7.5"></path>
+        </svg>
+      `, a.appendChild(d));
+    let s = o.querySelector(":scope > [data-ui-accordion-generated-description]");
+    if (e) {
+      if (!s) {
+        s = document.createElement("div"), s.setAttribute("data-ui-accordion-generated-description", "");
+        const l = i.panel;
+        l ? o.insertBefore(s, l) : o.appendChild(s);
+      }
+      s.textContent = e, s.hidden = !1;
+    } else
+      s && (s.hidden = !0);
+  }
+  _applyOpenState() {
+    this._markSyncingDom();
+    const i = this._sourceItems(), r = this._normalizeOpen(i), o = h(r, this.multiple), e = this.getAttribute("open") ?? (this.multiple ? "[]" : "-1");
+    o !== e && !this._syncingOpenAttr && (this._syncingOpenAttr = !0, this.setAttribute("open", o), this._syncingOpenAttr = !1);
+    const t = new Set(r);
+    i.forEach((a) => {
+      const { itemNode: n, trigger: d, panel: s } = a, l = t.has(a.index);
+      if (n.setAttribute("data-disabled", a.disabled ? "true" : "false"), l ? n.setAttribute("open", "") : n.removeAttribute("open"), d && (d.setAttribute("aria-expanded", l ? "true" : "false"), d.disabled = a.disabled), s) {
+        const g = l ? 32 : 0;
+        s.style.setProperty("--ui-accordion-panel-height", `${s.scrollHeight + g}px`), s.setAttribute("aria-hidden", l ? "false" : "true");
+      }
+    }), this._queuePanelHeightSync();
+  }
+  _observePanels(i) {
+    this._panelResizeObserver && (this._panelResizeObserver.disconnect(), i.forEach((r) => {
+      var o;
+      r.panel && ((o = this._panelResizeObserver) == null || o.observe(r.panel));
+    }));
+  }
+  _syncPanelHeights() {
+    this._sourceItems().forEach((i) => {
+      if (!i.panel)
+        return;
+      const o = i.itemNode.hasAttribute("open") ? 32 : 0;
+      i.panel.style.setProperty("--ui-accordion-panel-height", `${i.panel.scrollHeight + o}px`);
+    });
+  }
+  _queuePanelHeightSync() {
+    this._heightSyncRaf && cancelAnimationFrame(this._heightSyncRaf), this._heightSyncRaf = requestAnimationFrame(() => {
+      this._syncPanelHeights(), this._heightSyncRaf = requestAnimationFrame(() => {
+        this._syncPanelHeights(), this._heightSyncRaf = 0;
+      });
+    });
+  }
+  _syncLightDom() {
+    if (this.hasAttribute("headless"))
+      return;
+    const i = this._sourceItems();
+    this._markSyncingDom(), this.setAttribute("data-ui-accordion-root", "true"), this._syncHostStyles(), this._ensureStyleNode(), i.forEach((r) => {
+      const { itemNode: o, trigger: e, panel: t, index: a, disabled: n } = r;
+      if (o.setAttribute("data-disabled", n ? "true" : "false"), e) {
+        const d = `${this._uid}-trigger-${a}`, s = `${this._uid}-panel-${a}`;
+        e.id || (e.id = d), e.setAttribute("type", "button"), e.setAttribute("aria-controls", s), e.setAttribute("data-index", String(a)), n ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"), this._ensureGeneratedNodes(r);
+      }
+      if (t) {
+        const d = `${this._uid}-panel-${a}`;
+        t.id = d, t.setAttribute("role", "region"), e && t.setAttribute("aria-labelledby", e.id);
+      }
+    }), this._observePanels(i), this._applyOpenState();
+  }
+  _onMutations(i) {
+    this._syncingDom || !i.some((o) => {
+      if (o.target === this && o.type === "attributes") {
+        const e = o.attributeName || "";
+        return !["open", "multiple", "collapsible", "headless", "shape", "elevation", "variant", "size", "tone", "radius", "indicator", "data-ui-accordion-root", "style"].includes(e);
+      }
+      return !(o.target instanceof HTMLStyleElement && o.target.hasAttribute("data-ui-accordion-style"));
+    }) || this.requestRender();
+  }
+  _toggleIndex(i) {
+    const r = this._sourceItems();
+    if (i < 0 || i >= r.length || r[i].disabled)
+      return;
+    const o = this._normalizeOpen(r), e = o.includes(i);
+    let t = [...o];
+    this.multiple ? e ? t = o.filter((a) => a !== i) : t.push(i) : t = e ? [] : [i], this._commitOpen(t, !0);
+  }
+  _onClick(i) {
+    const o = i.target.closest("[data-ui-accordion-trigger]");
+    if (!o || o.disabled || !this.contains(o))
+      return;
+    const e = u(o.getAttribute("data-index"));
+    this._toggleIndex(e);
+  }
+  _onKeyDown(i) {
+    var n;
+    const o = i.target.closest("[data-ui-accordion-trigger]");
+    if (!o || !this.contains(o))
+      return;
+    const e = this._sourceItems().map((d) => d.trigger).filter((d) => !!d && !d.disabled), t = e.indexOf(o);
+    if (t < 0)
+      return;
+    if (i.key === "Enter" || i.key === " ") {
+      i.preventDefault();
+      const d = u(o.getAttribute("data-index"));
+      this._toggleIndex(d);
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key))
+      return;
+    let a = t;
+    i.key === "ArrowDown" && (a = (t + 1) % e.length), i.key === "ArrowUp" && (a = (t - 1 + e.length) % e.length), i.key === "Home" && (a = 0), i.key === "End" && (a = e.length - 1), i.preventDefault(), (n = e[a]) == null || n.focus({ preventScroll: !0 });
+  }
+  render() {
+    this.setContent("<slot></slot>"), this.hasAttribute("headless") || this._syncLightDom();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-accordion") && customElements.define("ui-accordion", y);
+export {
+  y as UIAccordion
+};