@sekiui/elements 0.1.6 → 0.1.7

package/dist/components/p-BuvZJ6_r.js

@@ -0,0 +1,39 @@
+import { e as effectiveHostId } from './p-ppXRAghy.js';
+
+let itemIdCounter = 0;
+const itemIds = new WeakMap();
+/**
+ * Generated ids for an accordion item's trigger and content hosts. Derived from
+ * one per-`seki-accordion-item` id, so both hosts agree no matter which renders
+ * first. The ids live on the light-DOM hosts (siblings in the same root)
+ * because IDREFs cannot cross shadow roots.
+ */
+function getAccordionIds(itemEl) {
+    let base = itemEl ? itemIds.get(itemEl) : undefined;
+    if (itemEl && !base) {
+        base = `seki-accordion-item-${++itemIdCounter}`;
+        itemIds.set(itemEl, base);
+    }
+    base = base !== null && base !== void 0 ? base : 'seki-accordion-item-0';
+    return { triggerId: `${base}-trigger`, contentId: `${base}-content` };
+}
+/** The trigger/content host that belongs directly to `itemEl` (not a nested item). */
+function findItemPeer(itemEl, tag) {
+    if (!itemEl)
+        return null;
+    for (const el of Array.from(itemEl.querySelectorAll(tag))) {
+        if (el.closest('seki-accordion-item') === itemEl)
+            return el;
+    }
+    return null;
+}
+/** Ids the two hosts should reference, honouring author-set host ids. */
+function resolveAccordionIds(itemEl) {
+    const gen = getAccordionIds(itemEl);
+    return {
+        triggerId: effectiveHostId(findItemPeer(itemEl, 'seki-accordion-trigger'), gen.triggerId),
+        contentId: effectiveHostId(findItemPeer(itemEl, 'seki-accordion-content'), gen.contentId),
+    };
+}
+
+export { getAccordionIds as g, resolveAccordionIds as r };

package/dist/components/p-DmN32Mrm.js

@@ -0,0 +1,103 @@
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+const EPSILON = 1e-6;
+/**
+ * Scale `sizes` proportionally so they add up to `target`, keeping each one
+ * inside its [min, max]. Space that a clamped panel cannot take is handed to
+ * the panels that still have room. Pure so it can be unit tested.
+ */
+function fitSizesToTotal(items, target) {
+    if (items.length === 0)
+        return [];
+    const sum = items.reduce((acc, item) => acc + item.size, 0);
+    let sizes = items.map((item) => (sum > EPSILON ? (item.size * target) / sum : target / items.length));
+    sizes = sizes.map((size, i) => clamp(size, items[i].min, items[i].max));
+    for (let pass = 0; pass < items.length + 1; pass++) {
+        const residual = target - sizes.reduce((acc, size) => acc + size, 0);
+        if (Math.abs(residual) < EPSILON)
+            break;
+        const room = sizes.map((size, i) => (residual > 0 ? items[i].max - size : size - items[i].min));
+        const totalRoom = room.reduce((acc, r) => acc + r, 0);
+        if (totalRoom < EPSILON)
+            break;
+        sizes = sizes.map((size, i) => size + (residual * room[i]) / totalRoom);
+        sizes = sizes.map((size, i) => clamp(size, items[i].min, items[i].max));
+    }
+    return sizes;
+}
+/** Size a panel can reach on its shrinking side (collapsible panels may reach collapsedSize). */
+function lowerBound(panel) {
+    return panel.constraints.collapsible ? panel.constraints.collapsedSize : panel.constraints.minSize;
+}
+/**
+ * Where a panel ends up when it is asked to be `desired` big. Never leaves
+ * [minSize, maxSize] unless it snaps to its collapsed size.
+ */
+function resolveTarget(panel, desired, allowSnap) {
+    const { minSize, maxSize, collapsible, collapsedSize } = panel.constraints;
+    if (panel.isCollapsed) {
+        // Growing out of the collapsed state jumps to minSize; shrinking is a no-op.
+        return desired > panel.size ? { size: minSize, isCollapsed: false } : { size: panel.size, isCollapsed: true };
+    }
+    if (allowSnap && collapsible && desired < minSize && desired < panel.size) {
+        return { size: collapsedSize, isCollapsed: true };
+    }
+    return { size: clamp(desired, minSize, maxSize), isCollapsed: false };
+}
+/**
+ * Pure arithmetic for moving the handle between `before` and `after` by
+ * `delta` percent (positive grows `before`). Both panels' limits are
+ * honoured: the handle stops when either neighbour hits its min or max, and
+ * the two sizes always change by the same amount so the total is preserved.
+ * Returns null when nothing can move.
+ */
+function computeResize(before, after, delta) {
+    const growing = delta > 0 ? before : after;
+    const shrinking = delta > 0 ? after : before;
+    const amount = Math.abs(delta);
+    // How much the growing side wants to take (more than `amount` when it
+    // leaves the collapsed state, less when it is held back by maxSize).
+    let grow = resolveTarget(growing, growing.size + amount, false);
+    const need = grow.size - growing.size;
+    if (need <= EPSILON)
+        return null;
+    let shrink = resolveTarget(shrinking, shrinking.size - need, true);
+    let shrunk = shrinking.size - shrink.size;
+    if (shrink.isCollapsed && !shrinking.isCollapsed) {
+        // Collapsing frees more than `need`; the growing side must absorb all of it.
+        grow = resolveTarget(growing, growing.size + shrunk, false);
+        if (grow.size - growing.size < shrunk - EPSILON) {
+            shrink = resolveTarget(shrinking, shrinking.size - need, false);
+            shrunk = shrinking.size - shrink.size;
+            grow = resolveTarget(growing, growing.size + need, false);
+        }
+    }
+    const grown = grow.size - growing.size;
+    if (grown <= EPSILON || shrunk <= EPSILON)
+        return null;
+    if (Math.abs(grown - shrunk) > EPSILON) {
+        if (grown < shrunk) {
+            shrink = { size: shrinking.size - grown, isCollapsed: false };
+        }
+        else if (growing.isCollapsed) {
+            // Cannot leave the collapsed state without enough room for minSize.
+            return null;
+        }
+        else {
+            grow = { size: growing.size + shrunk, isCollapsed: false };
+        }
+    }
+    return delta > 0 ? { before: grow, after: shrink } : { before: shrink, after: grow };
+}
+/** Feasible [min, max] for the `before` panel's size, given its neighbour. */
+function computeHandleRange(before, after) {
+    const total = before.size + after.size;
+    const min = Math.max(lowerBound(before), total - after.constraints.maxSize);
+    const max = Math.min(before.constraints.maxSize, total - lowerBound(after));
+    return { now: before.size, min: Math.min(min, before.size), max: Math.max(max, before.size) };
+}
+/** Generated host id for a panel; the handle derives the same id for `aria-controls`. */
+const panelHostId = (panelId) => `seki-resizable-${panelId}`;
+
+export { clamp as a, computeResize as b, computeHandleRange as c, fitSizesToTotal as f, panelHostId as p };

package/dist/components/{p-CmuSriLz.js → p-bxPJJ6k4.js}

@@ -20,5 +20,18 @@ function getTabIds(tabsEl, value) {
     const v = sanitize(value !== null && value !== void 0 ? value : '');
     return { triggerId: `${base}-trigger-${v}`, panelId: `${base}-panel-${v}` };
 }
+/**
+ * The trigger/panel host with the given `value` that belongs to `tabsEl` (not
+ * to a nested `seki-tabs`), or null when the tree has no such peer.
+ */
+function findTabPeer(tabsEl, tag, value) {
+    if (!tabsEl)
+        return null;
+    for (const el of Array.from(tabsEl.querySelectorAll(tag))) {
+        if (el.closest('seki-tabs') === tabsEl && el.getAttribute('value') === value)
+            return el;
+    }
+    return null;
+}
 
-export { getTabIds as g };
+export { findTabPeer as f, getTabIds as g };

package/dist/components/p-ppXRAghy.js

@@ -0,0 +1,29 @@
+/**
+ * Host ids for cross-shadow ARIA wiring (trigger host <-> content host).
+ *
+ * IDREFs cannot cross shadow roots, so components put their ids on the
+ * light-DOM hosts. An id the author wrote on the host must never be
+ * overwritten: `effectiveHostId` returns it when present and falls back to the
+ * generated id otherwise. We remember which id we generated per element so a
+ * generated id that changes later (e.g. the tab `value` changes) is replaced,
+ * while an author id (anything else on the element) is kept.
+ */
+const generated = new WeakMap();
+/** The id `el` actually has (author id, else `fallback`). Does not mutate. */
+function effectiveHostId(el, fallback) {
+    if (el && el.id && el.id !== generated.get(el))
+        return el.id;
+    return fallback;
+}
+/**
+ * Resolve the id to render on `el`: keeps an author-set id, otherwise records
+ * and returns `fallback`.
+ */
+function claimHostId(el, fallback) {
+    const id = effectiveHostId(el, fallback);
+    if (id === fallback)
+        generated.set(el, fallback);
+    return id;
+}
+
+export { claimHostId as c, effectiveHostId as e };

package/dist/components/seki-accordion-content.js

@@ -1,4 +1,7 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-CBBntrZT.js';
+import { g as getAccordionIds, r as resolveAccordionIds } from './p-BuvZJ6_r.js';
+import { c as claimHostId } from './p-ppXRAghy.js';
+import { C as ContextConsumer } from './p-B4SOpX_A.js';
 
 const sekiAccordionContentCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host([data-theme='dark']){color-scheme:dark}:host([data-theme='light']){color-scheme:light}:host{--seki-background:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-muted:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-muted-foreground:light-dark(hsl(0, 0%, 42%), hsl(0, 0%, 63.9%));--seki-card:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-card-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-popover:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-popover-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-border:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-input:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-primary:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 9%));--seki-primary-tint:light-dark(hsl(0, 0%, 9%, 0.06), hsl(0, 0%, 98%, 0.1));--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-secondary-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-accent:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-accent-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-destructive:light-dark(hsl(0, 84.2%, 60.2%), hsl(0, 62.8%, 30.6%));--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:light-dark(hsl(0, 86%, 97%), rgba(239, 68, 68, 0.1));--seki-destructive-soft-foreground:light-dark(hsl(0, 63%, 31%), hsl(0, 91%, 71%));--seki-success:light-dark(hsl(142, 71%, 45%), hsl(142, 69%, 58%));--seki-success-foreground:light-dark(hsl(142, 64%, 24%), hsl(142, 69%, 58%));--seki-success-bg:light-dark(hsl(142, 76%, 97%), rgba(34, 197, 94, 0.1));--seki-warning:light-dark(hsl(38, 92%, 50%), hsl(43, 96%, 56%));--seki-warning-foreground:light-dark(hsl(21, 77%, 27%), hsl(43, 96%, 56%));--seki-warning-bg:light-dark(hsl(48, 96%, 96%), rgba(245, 158, 11, 0.1));--seki-info:light-dark(hsl(217, 91%, 60%), hsl(217, 92%, 68%));--seki-info-foreground:light-dark(hsl(224, 64%, 33%), hsl(217, 92%, 68%));--seki-info-bg:light-dark(hsl(214, 100%, 97%), rgba(59, 130, 246, 0.1));--seki-ring:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 83.1%));--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:light-dark(var(--seki-neutral-400), var(--seki-neutral-600));--seki-border-default:var(--seki-border);--seki-border-emphasis:light-dark(var(--seki-neutral-300), var(--seki-neutral-700))}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:light-dark(hsl(0, 0%, 9%, 0.9), hsl(0, 0%, 98%, 0.9));--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:light-dark(hsl(0, 0%, 96.1%, 0.8), hsl(0, 0%, 14.9%, 0.8));--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}:host{--seki-shadow-xs-plus:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--seki-shadow-card:0 1px 3px 0 rgb(0 0 0 / 0.1);--seki-shadow-card-hover:0 4px 6px 0 rgb(0 0 0 / 0.1);--seki-shadow-thumb-hover:0 2px 6px 0 rgb(0 0 0 / 0.15);--seki-shadow-floating:0 4px 12px 0 rgb(0 0 0 / 0.15);--seki-shadow-floating-sm:0 2px 8px 0 rgb(0 0 0 / 0.1);--seki-shadow-overlay:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-overlay-top:0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);--seki-drop-shadow-up:0 -2px 2px rgb(0 0 0 / 0.05);--seki-overlay:light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));--seki-overlay-strong:rgb(0 0 0 / 0.8)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-foreground:light-dark(hsl(240, 5.3%, 26.1%), hsl(240, 4.8%, 95.9%));--seki-sidebar-primary:light-dark(hsl(240, 5.9%, 10%), hsl(0, 0%, 98%));--seki-sidebar-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-accent:light-dark(hsl(240, 4.8%, 95.9%), hsl(240, 3.7%, 15.9%));--seki-sidebar-accent-foreground:light-dark(hsl(240, 5.9%, 10%), hsl(240, 4.8%, 95.9%));--seki-sidebar-border:light-dark(hsl(220, 13%, 91%), hsl(240, 3.7%, 15.9%));--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:light-dark(hsl(240, 3.8%, 46.1%), hsl(240, 5%, 64.9%));--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}[data-theme='dark']{color-scheme:dark}[data-theme='light']{color-scheme:light}:host{display:block;font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)}.accordion-content{overflow:hidden}.accordion-content--animating{transition:height var(--seki-animation-normal, 200ms) var(--seki-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1))}.accordion-content:not(.accordion-content--open):not(.accordion-content--animating){display:none}.accordion-content-inner{padding-bottom:1rem;font-size:var(--seki-font-size-sm, 0.875rem);line-height:var(--seki-line-height-relaxed, 1.75);color:var(--seki-muted-foreground, hsl(240 3.8% 46.1%))}@media (prefers-reduced-motion: reduce){.accordion-content--animating{transition:none}}";
 
@@ -9,43 +12,41 @@ const SekiAccordionContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccord
             this.__registerHost();
         }
         this.__attachShadow();
-        this.onAccordionValueChange = () => {
+        this.hasLoaded = false;
+        this.accordion = new ContextConsumer('seki-accordion', '_accordionContext', () => {
+            if (!this.hasLoaded) {
+                // Before the first render there is nothing to animate from.
+                this._isOpen = this.isItemOpen();
+                return;
+            }
             this.syncWithContext();
-        };
+        });
         this._isOpen = false;
         this._isAnimating = false;
         this._contentHeight = 0;
     }
-    getItemContext() {
-        const item = this.el.closest('seki-accordion-item');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return item ? item._accordionItemContext : null;
-    }
     // Get isOpen directly from accordion to avoid stale item context
     isItemOpen() {
-        var _a;
         const item = this.el.closest('seki-accordion-item');
-        const accordion = this.el.closest('seki-accordion');
         const value = item === null || item === void 0 ? void 0 : item.getAttribute('value');
-        if (accordion && value) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const ctx = accordion._accordionContext;
-            return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.isItemOpen(value)) !== null && _a !== void 0 ? _a : false;
+        const ctx = this.accordion.context;
+        if (ctx && value) {
+            return ctx.isItemOpen(value);
         }
         return false;
     }
+    connectedCallback() {
+        this.accordion.connect(this.el);
+    }
     componentWillLoad() {
         this._isOpen = this.isItemOpen();
     }
     componentDidLoad() {
-        var _a, _b;
         // Initial height measurement
         if (this.contentRef && this._isOpen) {
             this._contentHeight = this.contentRef.scrollHeight;
         }
-        // Listen for value changes from parent accordion
-        this.accordionEl = (_a = this.el.closest('seki-accordion')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.accordionEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onAccordionValueChange);
+        this.hasLoaded = true;
     }
     syncWithContext() {
         const wasOpen = this._isOpen;
@@ -65,15 +66,16 @@ const SekiAccordionContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccord
         }
     }
     disconnectedCallback() {
-        var _a;
         clearTimeout(this.animationTimer);
-        (_a = this.accordionEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onAccordionValueChange);
+        this.accordion.disconnect();
     }
     render() {
-        var _a, _b;
-        const context = this.getItemContext();
-        const contentId = (_a = context === null || context === void 0 ? void 0 : context.contentId) !== null && _a !== void 0 ? _a : '';
-        const triggerId = (_b = context === null || context === void 0 ? void 0 : context.triggerId) !== null && _b !== void 0 ? _b : '';
+        // IDREFs cannot cross shadow roots, so the id / role / aria-labelledby live
+        // on this light-DOM host and point at the trigger host. An author id on
+        // either host is kept.
+        const item = this.el.closest('seki-accordion-item');
+        const hostId = claimHostId(this.el, getAccordionIds(item).contentId);
+        const { triggerId } = resolveAccordionIds(item);
         // Calculate styles for animation
         const contentStyle = {};
         if (this._isAnimating) {
@@ -85,11 +87,11 @@ const SekiAccordionContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccord
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: 'ea3a71c78711334460516a3ac4c3caf75088921e', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'be7338cc4927a28c0392309928c74793bd31bd32', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: '357d9251d75b163d40c5e205c84ca0ec696a9f5c', id: hostId, "data-state": this._isOpen ? 'open' : 'closed', role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen ? 'true' : undefined }, h("div", { key: 'b9082621ddd047cd87de74423ca4ce1d07216ddd', ref: (el) => (this.contentRef = el), part: "content", class: {
                 'accordion-content': true,
                 'accordion-content--open': this._isOpen,
                 'accordion-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: '2966e47bc4bc67427e03d694ae75bf31ff760b92', class: "accordion-content-inner" }, h("slot", { key: '68e8a9b6ba98e50bf0c49de50742e2036b188887' })))));
+            }, style: contentStyle }, h("div", { key: '01f0978683b8635c7e72203540d687c29e9670a8', class: "accordion-content-inner" }, h("slot", { key: 'dd1aef85264e79d95ca6c70b5fc432eeff1f860e' })))));
     }
     get el() { return this; }
     static get style() { return sekiAccordionContentCss; }

package/dist/components/seki-accordion-item.js

@@ -1,4 +1,6 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-CBBntrZT.js';
+import { r as resolveAccordionIds } from './p-BuvZJ6_r.js';
+import { C as ContextConsumer } from './p-B4SOpX_A.js';
 
 const sekiAccordionItemCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host([data-theme='dark']){color-scheme:dark}:host([data-theme='light']){color-scheme:light}:host{--seki-background:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-muted:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-muted-foreground:light-dark(hsl(0, 0%, 42%), hsl(0, 0%, 63.9%));--seki-card:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-card-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-popover:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-popover-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-border:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-input:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-primary:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 9%));--seki-primary-tint:light-dark(hsl(0, 0%, 9%, 0.06), hsl(0, 0%, 98%, 0.1));--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-secondary-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-accent:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-accent-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-destructive:light-dark(hsl(0, 84.2%, 60.2%), hsl(0, 62.8%, 30.6%));--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:light-dark(hsl(0, 86%, 97%), rgba(239, 68, 68, 0.1));--seki-destructive-soft-foreground:light-dark(hsl(0, 63%, 31%), hsl(0, 91%, 71%));--seki-success:light-dark(hsl(142, 71%, 45%), hsl(142, 69%, 58%));--seki-success-foreground:light-dark(hsl(142, 64%, 24%), hsl(142, 69%, 58%));--seki-success-bg:light-dark(hsl(142, 76%, 97%), rgba(34, 197, 94, 0.1));--seki-warning:light-dark(hsl(38, 92%, 50%), hsl(43, 96%, 56%));--seki-warning-foreground:light-dark(hsl(21, 77%, 27%), hsl(43, 96%, 56%));--seki-warning-bg:light-dark(hsl(48, 96%, 96%), rgba(245, 158, 11, 0.1));--seki-info:light-dark(hsl(217, 91%, 60%), hsl(217, 92%, 68%));--seki-info-foreground:light-dark(hsl(224, 64%, 33%), hsl(217, 92%, 68%));--seki-info-bg:light-dark(hsl(214, 100%, 97%), rgba(59, 130, 246, 0.1));--seki-ring:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 83.1%));--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:light-dark(var(--seki-neutral-400), var(--seki-neutral-600));--seki-border-default:var(--seki-border);--seki-border-emphasis:light-dark(var(--seki-neutral-300), var(--seki-neutral-700))}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:light-dark(hsl(0, 0%, 9%, 0.9), hsl(0, 0%, 98%, 0.9));--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:light-dark(hsl(0, 0%, 96.1%, 0.8), hsl(0, 0%, 14.9%, 0.8));--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}:host{--seki-shadow-xs-plus:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--seki-shadow-card:0 1px 3px 0 rgb(0 0 0 / 0.1);--seki-shadow-card-hover:0 4px 6px 0 rgb(0 0 0 / 0.1);--seki-shadow-thumb-hover:0 2px 6px 0 rgb(0 0 0 / 0.15);--seki-shadow-floating:0 4px 12px 0 rgb(0 0 0 / 0.15);--seki-shadow-floating-sm:0 2px 8px 0 rgb(0 0 0 / 0.1);--seki-shadow-overlay:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-overlay-top:0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);--seki-drop-shadow-up:0 -2px 2px rgb(0 0 0 / 0.05);--seki-overlay:light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));--seki-overlay-strong:rgb(0 0 0 / 0.8)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-foreground:light-dark(hsl(240, 5.3%, 26.1%), hsl(240, 4.8%, 95.9%));--seki-sidebar-primary:light-dark(hsl(240, 5.9%, 10%), hsl(0, 0%, 98%));--seki-sidebar-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-accent:light-dark(hsl(240, 4.8%, 95.9%), hsl(240, 3.7%, 15.9%));--seki-sidebar-accent-foreground:light-dark(hsl(240, 5.9%, 10%), hsl(240, 4.8%, 95.9%));--seki-sidebar-border:light-dark(hsl(220, 13%, 91%), hsl(240, 3.7%, 15.9%));--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:light-dark(hsl(240, 3.8%, 46.1%), hsl(240, 5%, 64.9%));--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}[data-theme='dark']{color-scheme:dark}[data-theme='light']{color-scheme:light}:host{display:block;border-bottom:1px solid var(--seki-border, hsl(240 5.9% 90%))}:host(:last-child){border-bottom:none}:host([data-disabled]){pointer-events:none;opacity:0.5}.accordion-item{display:flex;flex-direction:column}";
 
@@ -14,35 +16,27 @@ const SekiAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccordion
          */
         this.disabled = false;
         this._isOpen = false;
-        this.onAccordionValueChange = () => {
+        this.accordion = new ContextConsumer('seki-accordion', '_accordionContext', () => {
             var _a, _b;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.el._accordionItemContext = this.getItemContext();
             this._isOpen = (_b = (_a = this.getAccordionContext()) === null || _a === void 0 ? void 0 : _a.isItemOpen(this.value)) !== null && _b !== void 0 ? _b : false;
-        };
-        this.instanceId = ++SekiAccordionItem.instanceCount;
+        });
     }
     getAccordionContext() {
-        const accordion = this.el.closest('seki-accordion');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return accordion ? accordion._accordionContext : null;
-    }
-    get contentId() {
-        return `seki-accordion-content-${this.instanceId}`;
-    }
-    get triggerId() {
-        return `seki-accordion-trigger-${this.instanceId}`;
+        return this.accordion.context;
     }
     getItemContext() {
         var _a, _b;
         const accordionContext = this.getAccordionContext();
         const isOpen = (_a = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.isItemOpen(this.value)) !== null && _a !== void 0 ? _a : false;
+        const { contentId, triggerId } = resolveAccordionIds(this.el);
         return {
             value: this.value,
             isOpen,
             disabled: this.disabled || ((_b = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.disabled) !== null && _b !== void 0 ? _b : false),
-            contentId: this.contentId,
-            triggerId: this.triggerId,
+            contentId,
+            triggerId,
             // Look up context dynamically instead of capturing it in closure
             toggle: () => {
                 const ctx = this.getAccordionContext();
@@ -50,27 +44,17 @@ const SekiAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccordion
             },
         };
     }
-    componentDidLoad() {
-        var _a, _b;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._accordionItemContext = this.getItemContext();
-        // Listen for value changes from parent
-        this.accordionEl = (_a = this.el.closest('seki-accordion')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.accordionEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onAccordionValueChange);
-    }
-    componentWillRender() {
-        var _a, _b;
-        this._isOpen = (_b = (_a = this.getAccordionContext()) === null || _a === void 0 ? void 0 : _a.isItemOpen(this.value)) !== null && _b !== void 0 ? _b : false;
+    connectedCallback() {
+        this.accordion.connect(this.el);
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.accordionEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onAccordionValueChange);
+        this.accordion.disconnect();
     }
     render() {
         var _a, _b, _c, _d;
         const isOpen = (_b = (_a = this.getAccordionContext()) === null || _a === void 0 ? void 0 : _a.isItemOpen(this.value)) !== null && _b !== void 0 ? _b : false;
         const isDisabled = this.disabled || ((_d = (_c = this.getAccordionContext()) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : false);
-        return (h(Host, { key: 'f008b7dd03106f3056915a89bd050880261f21b5', "data-state": isOpen ? 'open' : 'closed', "data-disabled": isDisabled ? '' : undefined }, h("div", { key: 'b8f2c46b507fade2e23320e2f9552672fdf1aa9b', part: "item", class: "accordion-item" }, h("slot", { key: 'e70a0832e8e96c625b416071ef2ce8419740df2d' }))));
+        return (h(Host, { key: '05505c45910786a9bedb858d85bd637b2bce69bd', "data-state": isOpen ? 'open' : 'closed', "data-disabled": isDisabled ? '' : undefined }, h("div", { key: '7c55061db0bbe207102cf174b3ee684243f19e14', part: "item", class: "accordion-item" }, h("slot", { key: 'c1707d3a945af4cad1ca000739acf189b5e5cf37' }))));
     }
     get el() { return this; }
     static get style() { return sekiAccordionItemCss; }
@@ -79,7 +63,6 @@ const SekiAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiAccordion
         "disabled": [516],
         "_isOpen": [32]
     }]);
-SekiAccordionItem$1.instanceCount = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;