@sekiui/elements 0.1.3 → 0.1.5

package/dist/components/p-CaV98uQZ.js

@@ -0,0 +1,429 @@
+import { g as getDeepActiveElement$1 } from './p-DI1tqzsG.js';
+
+/**
+ * Focus trap utility for dialog and modal components.
+ *
+ * These helpers walk the *composed* (flattened) tree rather than a single
+ * shadow root. Dialog content is projected through a `<slot>`, so the actual
+ * focusable elements live in the host's light DOM — and custom elements like
+ * `seki-button` keep their focusable `<button>` inside their own shadow root.
+ * A plain `container.querySelectorAll()` never sees either, which is why the
+ * trap previously matched nothing.
+ */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+].join(', ');
+function isFocusableCandidate(el) {
+    return el instanceof HTMLElement && el.matches(FOCUSABLE_SELECTOR);
+}
+function isHidden(el) {
+    return (el.hidden === true ||
+        el.getAttribute('aria-hidden') === 'true');
+}
+/**
+ * Recursively collect focusable elements in composed-tree (DOM) order,
+ * descending through shadow roots and resolving `<slot>` assignments.
+ */
+function collectFocusable(node, out) {
+    // Resolve slots to their assigned (projected) elements.
+    if (node.tagName === 'SLOT') {
+        const assigned = node.assignedElements({ flatten: true });
+        for (const el of assigned) {
+            collectFocusable(el, out);
+        }
+        return;
+    }
+    // Skip hidden subtrees entirely.
+    if (isHidden(node))
+        return;
+    if (isFocusableCandidate(node)) {
+        out.push(node);
+    }
+    // When an element hosts a shadow root, its rendered subtree is the shadow
+    // tree (light children only surface via slots inside it). Otherwise walk
+    // the light children directly.
+    const children = node.shadowRoot
+        ? Array.from(node.shadowRoot.children)
+        : Array.from(node.children);
+    for (const child of children) {
+        collectFocusable(child, out);
+    }
+}
+/**
+ * Get all focusable elements within a container, crossing shadow-DOM and slot
+ * boundaries so projected content and nested web components are included.
+ */
+function getFocusableElements(container) {
+    var _a;
+    const out = [];
+    const root = (_a = container.shadowRoot) !== null && _a !== void 0 ? _a : container;
+    for (const child of Array.from(root.children)) {
+        collectFocusable(child, out);
+    }
+    return out;
+}
+/**
+ * Resolve the deepest active element, descending into nested shadow roots.
+ * `document.activeElement` only reports the outermost shadow host.
+ */
+function getDeepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+}
+/**
+ * Focus the first focusable element in a container.
+ */
+function focusFirst(container) {
+    const focusables = getFocusableElements(container);
+    if (focusables.length > 0) {
+        focusables[0].focus();
+    }
+}
+/**
+ * Trap focus within a container during Tab key navigation.
+ */
+function trapFocus(container, event) {
+    if (event.key !== 'Tab')
+        return;
+    const focusables = getFocusableElements(container);
+    if (focusables.length === 0) {
+        // Nothing focusable inside — keep focus from escaping the modal.
+        event.preventDefault();
+        return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = getDeepActiveElement();
+    // `contains()` does not cross shadow boundaries, so detect "escaped" focus by
+    // membership in the composed focusables list instead.
+    const isInside = active !== null && focusables.indexOf(active) !== -1;
+    if (event.shiftKey) {
+        if (active === first || !isInside) {
+            event.preventDefault();
+            last.focus();
+        }
+    }
+    else {
+        if (active === last || !isInside) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+}
+
+/**
+ * Overlay layer stack, modal focus handling and body scroll lock, shared by
+ * every component that floats above the page and closes on Escape.
+ *
+ * ## Why this exists (#332)
+ *
+ * Each overlay used to listen for Escape on `window` by itself. All of those
+ * listeners run for the same key press, so a popover inside a dialog closed
+ * together with the dialog, and `stopPropagation()` in one handler did not stop
+ * the others. Sheet and drawer also rendered `aria-modal="true"` without any
+ * of the modal behaviour dialog had (focus moved in, Tab trapped, focus
+ * restored, page scroll locked).
+ *
+ * ## Model (matches Radix DismissableLayer / FocusScope)
+ *
+ * - Every open overlay is an {@link OverlayLayer} on one document-wide stack,
+ *   in the order the layers opened.
+ * - One pair of `window` keydown listeners handles Escape: the layer that was
+ *   on top when the key went down gets the key, nothing below it does. If an
+ *   element-level handler inside that layer already closed it (a combobox input
+ *   closing its list, a submenu calling `stopPropagation()`), the key is spent
+ *   and no other layer closes.
+ * - The topmost *modal* layer traps Tab inside its container. Modal layers
+ *   also move focus in when they open, return it to the element that had it
+ *   when they close, and lock body scroll. The lock is reference-counted, so a
+ *   dialog closing inside an open sheet leaves the page locked.
+ */
+// ---------------------------------------------------------------------------
+// Body scroll lock (reference-counted so stacked modals don't unlock early).
+// ---------------------------------------------------------------------------
+let scrollLockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+/**
+ * Lock body scroll. Safe to nest: the lock is applied on the first call and
+ * the original inline styles come back on the matching last unlock.
+ */
+function lockBodyScroll() {
+    if (scrollLockCount === 0) {
+        savedOverflow = document.body.style.overflow;
+        savedPaddingRight = document.body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            document.body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+    }
+    scrollLockCount++;
+}
+/** Release one lock taken with lockBodyScroll(). */
+function unlockBodyScroll() {
+    if (scrollLockCount === 0)
+        return;
+    scrollLockCount--;
+    if (scrollLockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+    }
+}
+// ---------------------------------------------------------------------------
+// Layer stack
+// ---------------------------------------------------------------------------
+/**
+ * Whether `node` is inside `ancestor` in the flat tree: follows slot
+ * assignment (content projected into a panel's `<slot>`) and shadow hosts.
+ */
+function flatTreeContains(ancestor, node) {
+    var _a, _b, _c;
+    let current = node;
+    while (current) {
+        if (current === ancestor)
+            return true;
+        current =
+            (_c = (_b = (_a = current.assignedSlot) !== null && _a !== void 0 ? _a : current.parentNode) !== null && _b !== void 0 ? _b : current.host) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+}
+const stack = [];
+/** The layer that was on top when an Escape keydown started dispatching. */
+const escapeTarget = new WeakMap();
+function topLayer() {
+    return stack.length > 0 ? stack[stack.length - 1] : null;
+}
+function onKeydownCapture(event) {
+    if (event.key === 'Escape') {
+        escapeTarget.set(event, topLayer());
+    }
+}
+function onKeydownBubble(event) {
+    if (event.key === 'Escape') {
+        // Prefer the layer recorded before any element-level handler ran. If that
+        // layer has closed since, an inner handler consumed the key.
+        const layer = escapeTarget.has(event) ? escapeTarget.get(event) : topLayer();
+        if (layer && layer.isActive) {
+            layer.handleEscape(event);
+        }
+        return;
+    }
+    if (event.key === 'Tab') {
+        for (let i = stack.length - 1; i >= 0; i--) {
+            if (stack[i].isModal) {
+                stack[i].handleTab(event);
+                return;
+            }
+        }
+    }
+}
+/** Listen only while at least one layer is open. */
+function syncListeners() {
+    if (typeof window === 'undefined')
+        return;
+    if (stack.length > 0) {
+        // Adding the same listener twice is a no-op.
+        window.addEventListener('keydown', onKeydownCapture, true);
+        window.addEventListener('keydown', onKeydownBubble);
+    }
+    else {
+        window.removeEventListener('keydown', onKeydownCapture, true);
+        window.removeEventListener('keydown', onKeydownBubble);
+    }
+}
+/**
+ * One overlay's place on the layer stack.
+ *
+ *   private layer = new OverlayLayer({ onEscape: () => this.close() });
+ *   componentDidRender() { this.layer.setActive(this._isOpen); }
+ *   disconnectedCallback() { this.layer.setActive(false); }
+ *
+ * Modal content parts call `setActive()` from the code path that sees the
+ * open state change (so focus is captured before anything moves it) and
+ * `didRender()` from componentDidRender, which moves focus in once the
+ * container exists.
+ */
+class OverlayLayer {
+    constructor(options = {}) {
+        this.options = options;
+        this.active = false;
+        this.modalActive = false;
+        this.returnFocusTo = null;
+        this.focusPending = false;
+    }
+    get isActive() {
+        return this.active;
+    }
+    /** Whether this layer is open and modal (traps focus, locks scroll). */
+    get isModal() {
+        return this.active && this.modalActive;
+    }
+    /** Activate or deactivate; idempotent, so it can be called on every render. */
+    setActive(active) {
+        if (active)
+            this.activate();
+        else
+            this.deactivate();
+    }
+    activate() {
+        if (this.active)
+            return;
+        this.active = true;
+        stack.push(this);
+        if (stack.length === 1)
+            syncListeners();
+        const modal = this.options.modal;
+        this.modalActive = typeof modal === 'function' ? modal() : !!modal;
+        if (this.modalActive) {
+            lockBodyScroll();
+            this.returnFocusTo = getDeepActiveElement$1();
+            this.focusPending = true;
+            // The container may already be rendered (e.g. re-activation after a DOM
+            // move); otherwise didRender() picks this up.
+            this.didRender();
+        }
+    }
+    deactivate() {
+        if (!this.active)
+            return;
+        this.active = false;
+        const index = stack.indexOf(this);
+        if (index !== -1)
+            stack.splice(index, 1);
+        if (stack.length === 0)
+            syncListeners();
+        if (this.modalActive) {
+            this.modalActive = false;
+            this.focusPending = false;
+            unlockBodyScroll();
+            this.restoreFocus();
+        }
+    }
+    /** Move focus into a modal layer once its container has rendered. */
+    didRender() {
+        var _a, _b;
+        if (!this.focusPending || !((_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a)))
+            return;
+        this.focusPending = false;
+        const run = () => {
+            var _a, _b, _c;
+            const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!this.active || !container)
+                return;
+            // Something inside (e.g. an autofocus control) already has focus.
+            if (flatTreeContains(container, getDeepActiveElement$1()))
+                return;
+            if (getFocusableElements(container).length > 0) {
+                focusFirst(container);
+            }
+            else {
+                (_c = container.focus) === null || _c === void 0 ? void 0 : _c.call(container);
+            }
+        };
+        if (typeof requestAnimationFrame === 'function')
+            requestAnimationFrame(run);
+        else
+            run();
+    }
+    handleEscape(event) {
+        var _a, _b;
+        (_b = (_a = this.options).onEscape) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    }
+    handleTab(event) {
+        var _a, _b;
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (container)
+            trapFocus(container, event);
+    }
+    restoreFocus() {
+        var _a, _b;
+        const target = this.returnFocusTo;
+        this.returnFocusTo = null;
+        if (!target || !target.isConnected)
+            return;
+        // Leave focus alone if it already moved somewhere outside this layer on
+        // purpose; return it when it is inside the closing layer or was dropped.
+        const active = getDeepActiveElement$1();
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const dropped = !active || active === document.body;
+        if (dropped || (container && flatTreeContains(container, active))) {
+            target.focus();
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Accessible name / description for dialog-like content parts (#357)
+// ---------------------------------------------------------------------------
+const CONTENT_PARTS = 'seki-dialog-content, seki-alert-dialog-content, seki-sheet-content, seki-drawer-content';
+const TITLE_PARTS = 'seki-dialog-title, seki-sheet-title';
+const DESCRIPTION_PARTS = 'seki-dialog-description, seki-sheet-description';
+function textOf(el) {
+    var _a;
+    return ((_a = el === null || el === void 0 ? void 0 : el.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+}
+/**
+ * Title and description text for a dialog-like content part.
+ *
+ * The `role="dialog"` element lives in the content part's shadow root, while
+ * the title and description are separate custom elements in the light DOM. An
+ * `aria-labelledby` id reference cannot cross that shadow boundary, so the
+ * dialog had no accessible name or description. ARIA element reflection
+ * (`ariaLabelledByElements`) can reach outward, but test tooling and older
+ * engines don't follow it, so the content part mirrors the text into hidden
+ * elements in its own shadow root and references those instead (the approach
+ * `label-association.ts` takes for labels). A MutationObserver keeps the copy
+ * in sync while the content is open.
+ *
+ * Only the title/description that belong to this content part count, not
+ * those of an overlay nested inside it.
+ */
+class DialogLabelSource {
+    constructor(onChange) {
+        this.onChange = onChange;
+        this.host = null;
+    }
+    find(selector) {
+        const host = this.host;
+        if (!host)
+            return null;
+        for (const el of Array.from(host.querySelectorAll(selector))) {
+            if (el.closest(CONTENT_PARTS) === host)
+                return el;
+        }
+        return null;
+    }
+    sync() {
+        this.onChange(textOf(this.find(TITLE_PARTS)), textOf(this.find(DESCRIPTION_PARTS)));
+    }
+    /** Start tracking the content part `host` (call when it opens). */
+    observe(host) {
+        if (this.host !== host)
+            this.disconnect();
+        this.host = host;
+        this.sync();
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(host, { childList: true, subtree: true, characterData: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+    }
+}
+
+export { DialogLabelSource as D, OverlayLayer as O };

package/dist/components/{p-ZXDMgoez.js → p-DK0uEs9U.js}

@@ -22318,6 +22318,34 @@ function navigateDay(date, direction) {
 function navigateWeek(date, direction) {
     return direction === 'prev' ? dateFnsExports.subDays(date, 7) : dateFnsExports.addDays(date, 7);
 }
+/**
+ * Parse a user-supplied date. Date-only ISO strings (`YYYY-MM-DD`) are calendar
+ * dates, so they become local midnight; `new Date('2024-01-15')` would be UTC
+ * midnight and display a day early west of UTC. Anything invalid (including an
+ * invalid `Date` instance) yields `null`.
+ */
+function parseDateInput(value) {
+    if (!value)
+        return null;
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    if (typeof value !== 'string')
+        return null;
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (match) {
+        const [y, m, d] = [Number(match[1]), Number(match[2]), Number(match[3])];
+        const date = new Date(y, m - 1, d);
+        // Reject overflow such as 2024-02-31 (would silently roll into March).
+        return date.getFullYear() === y && date.getMonth() === m - 1 && date.getDate() === d ? date : null;
+    }
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+}
+/** Serialize the local calendar day of `date` as `YYYY-MM-DD`. */
+function toISODate(date) {
+    const pad = (n, w = 2) => String(n).padStart(w, '0');
+    return `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
 
 const sekiCalendarCss = ":host{--seki-calendar-bg:var(--seki-background, hsl(0 0% 100%));--seki-calendar-text:var(--seki-foreground, hsl(240 10% 3.9%));--seki-calendar-muted:var(--seki-muted-foreground, hsl(240 3.8% 46.1%));--seki-calendar-border:var(--seki-border, hsl(240 5.9% 90%));--seki-calendar-accent:var(--seki-accent, hsl(240 4.8% 95.9%));--seki-calendar-accent-foreground:var(--seki-accent-foreground, hsl(240 5.9% 10%));--seki-calendar-primary:var(--seki-primary, hsl(240 5.9% 10%));--seki-calendar-primary-foreground:var(--seki-primary-foreground, hsl(0 0% 98%));--seki-calendar-cell-size:36px;--seki-calendar-nav-button-size:28px;--seki-calendar-radius:var(--seki-radius-md, 8px);--seki-calendar-font-size:var(--seki-font-size-sm, 14px);--seki-calendar-font-weight:var(--seki-font-weight-medium, 500);--seki-calendar-font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);display:inline-block}.seki-calendar{padding:0.75rem;background-color:var(--seki-calendar-bg);border-radius:var(--seki-calendar-radius);font-family:var(--seki-calendar-font-family);font-size:var(--seki-calendar-font-size);color:var(--seki-calendar-text)}.seki-calendar__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:0.5rem}.seki-calendar__heading{display:flex;align-items:center;gap:0.25rem;font-weight:var(--seki-calendar-font-weight)}.seki-calendar__month{font-weight:var(--seki-font-weight-medium, 500)}.seki-calendar__year{color:var(--seki-calendar-muted)}.seki-calendar__nav-button{display:inline-flex;align-items:center;justify-content:center;width:var(--seki-calendar-nav-button-size);height:var(--seki-calendar-nav-button-size);padding:0;border:1px solid var(--seki-calendar-border);border-radius:var(--seki-radius-sm, 4px);background-color:transparent;color:var(--seki-calendar-text);cursor:pointer;transition:background-color 150ms ease, border-color 150ms ease}.seki-calendar__nav-button:hover:not(:disabled){background-color:var(--seki-calendar-accent);border-color:var(--seki-calendar-accent)}.seki-calendar__nav-button:focus-visible{outline:2px solid var(--seki-calendar-primary);outline-offset:2px}.seki-calendar__nav-button:disabled{opacity:0.5;cursor:not-allowed}.seki-calendar__table{width:100%;border-collapse:collapse;border-spacing:0}.seki-calendar__weekdays{border-bottom:none}.seki-calendar__weekday{width:var(--seki-calendar-cell-size);height:var(--seki-calendar-cell-size);font-size:var(--seki-font-size-xs, 0.75rem);font-weight:var(--seki-font-weight-normal, 400);color:var(--seki-calendar-muted);text-align:center;vertical-align:middle}.seki-calendar__week{margin-top:0.25rem}.seki-calendar__cell{padding:0;text-align:center;vertical-align:middle;position:relative}.seki-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--seki-calendar-cell-size);height:var(--seki-calendar-cell-size);padding:0;border:none;border-radius:var(--seki-radius-sm, 4px);background-color:transparent;color:var(--seki-calendar-text);font-size:var(--seki-calendar-font-size);font-weight:var(--seki-font-weight-normal, 400);cursor:pointer;transition:background-color 150ms ease, color 150ms ease}.seki-calendar__day:hover:not(:disabled):not(.seki-calendar__day--selected){background-color:var(--seki-calendar-accent);color:var(--seki-calendar-accent-foreground)}.seki-calendar__day:focus-visible{outline:2px solid var(--seki-calendar-primary);outline-offset:2px}.seki-calendar__day--today{background-color:var(--seki-calendar-accent);color:var(--seki-calendar-accent-foreground)}.seki-calendar__day--selected{background-color:var(--seki-calendar-primary);color:var(--seki-calendar-primary-foreground);font-weight:var(--seki-font-weight-medium, 500)}.seki-calendar__day--selected:hover{background-color:var(--seki-calendar-primary);opacity:0.9}.seki-calendar__day--outside{color:var(--seki-calendar-muted);opacity:0.5}.seki-calendar__day--hidden{visibility:hidden}.seki-calendar__day--disabled{color:var(--seki-calendar-muted);opacity:0.5;cursor:not-allowed}.seki-calendar__day--disabled:hover{background-color:transparent}.seki-calendar__day--in-range{background-color:var(--seki-calendar-accent);color:var(--seki-calendar-accent-foreground);border-radius:0}.seki-calendar__day--range-start{background-color:var(--seki-calendar-primary);color:var(--seki-calendar-primary-foreground);border-radius:var(--seki-radius-sm, 4px) 0 0 var(--seki-radius-sm, 4px)}.seki-calendar__day--range-end{background-color:var(--seki-calendar-primary);color:var(--seki-calendar-primary-foreground);border-radius:0 var(--seki-radius-sm, 4px) var(--seki-radius-sm, 4px) 0}.seki-calendar__day--range-start.seki-calendar__day--range-end{border-radius:var(--seki-radius-sm, 4px)}.seki-calendar__day--focused{outline:2px solid var(--seki-calendar-primary);outline-offset:-2px}@media (prefers-contrast: more){.seki-calendar__nav-button{border-width:2px}.seki-calendar__day--selected,.seki-calendar__day--range-start,.seki-calendar__day--range-end{border:2px solid var(--seki-calendar-primary)}}@media (prefers-reduced-motion: reduce){.seki-calendar__day,.seki-calendar__nav-button{transition:none}}";
 
@@ -22469,12 +22497,7 @@ const SekiCalendar = /*@__PURE__*/ proxyCustomElement(class SekiCalendar extends
         this.displayMonth = dateFnsExports.startOfMonth(initialDate);
     }
     parseDate(value) {
-        if (!value)
-            return null;
-        if (value instanceof Date)
-            return value;
-        const parsed = new Date(value);
-        return isNaN(parsed.getTime()) ? null : parsed;
+        return parseDateInput(value);
     }
     parseDateArray(dates) {
         if (!dates)
@@ -22530,7 +22553,7 @@ const SekiCalendar = /*@__PURE__*/ proxyCustomElement(class SekiCalendar extends
         });
         const monthLabel = getMonthLabel(this.displayMonth);
         const yearLabel = getYearLabel(this.displayMonth);
-        return (h("div", { key: 'bfd52fe9a40150228e283122449538b673dd9d40', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: 'bbbe52488a17a40ed1a41ebb4cc0261550f4ac88', class: "seki-calendar__header" }, h("button", { key: 'ae848c1f4422f635f76c8fce932faa3472073f11', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: '5b46a7d52c1d905161c2865971f3ead1fff9de2b', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '767d60a0aaac74df2a52ac064ecba59e49ea37aa', d: "m15 18-6-6 6-6" }))), h("div", { key: '692c0981eee9a295a35d1e3b1679550651cee4fa', class: "seki-calendar__heading" }, h("span", { key: 'b318a0caa0f3699c3965d199a5a700a1e5d6adbb', class: "seki-calendar__month" }, monthLabel), h("span", { key: 'b9c73d56c8cb4bf19e6afe4c09e25c8064629170', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '2e50c8c1cf8afa89ee733b8d0057d0a632121c03', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: 'c14a4ed0fad328fc682769176a86281f6c193a06', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '7d31a25948a7e78b59641c09c5061de163bfb39b', d: "m9 18 6-6-6-6" })))), h("table", { key: '942705b3d825c4f304836ef62fcf98570b37029b', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '32d440a879b18d1cd0e9d2a175c96735f1ccdad1' }, h("tr", { key: 'b7fbe7e6545a3fe06acc8374670099973f1ec2d3', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: '2ab4013c03c6542ee37dca0f65edef2d4278f889' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
+        return (h("div", { key: '3ff942c12f873de967174bc08ef9eb1d039d169d', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: 'fa44c715cf38fafcd7bb3d92cb7218b79c3e72a7', class: "seki-calendar__header" }, h("button", { key: 'ef30d1647481bca3a0d675ae2730d6aa53504e76', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: 'b4607305a9f1c866f66a53c61768b4a39ceb4b2a', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '186e5f8b730dc3003b78d55ff042ba146c846f4d', d: "m15 18-6-6 6-6" }))), h("div", { key: '7c4d3a8f4fd1ae47fd12c7126bb0998ab0bb554b', class: "seki-calendar__heading" }, h("span", { key: '99c96d66a64aa795cb83b530b8822fd884076b8a', class: "seki-calendar__month" }, monthLabel), h("span", { key: '48b762d3e20423a38dbc7be0a31c2b91ac02cef0', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '755f3f94902b33a002a7e64c8fc2fc0760c6f14d', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: '4cb0a5b2b406af723992f02f189b95488d61901b', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'd53a06afb459668bb5ac7be07caab1a42903638e', d: "m9 18 6-6-6-6" })))), h("table", { key: 'a1033e6d6fd7659b1317d98e639b8e31f0c84745', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '624f63ec98140e820f2ddb53f6e9bbcf71f64c2a' }, h("tr", { key: '79cdd33088fcf7793ec20f81784087de8db9199c', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: 'dcfd82edcce5b87df9e2c077e510daca812ab2ed' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -22569,4 +22592,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { SekiCalendar as S, dateFnsExports as a, defineCustomElement as d };
+export { SekiCalendar as S, dateFnsExports as a, defineCustomElement as d, parseDateInput as p, toISODate as t };

package/dist/{cdn/p-D4LyQFQp.js → components/p-DQcofZe0.js}

@@ -1,27 +1,51 @@
 import { p as proxyCustomElement, H, h, e as Host } from './p-jMliCqbB.js';
 
+/** Max toasts buffered while no <seki-sonner> is mounted; oldest are dropped first. */
+const MAX_PENDING = 10;
+let toastCounter = 0;
+function nextSonnerToastId() {
+    return `seki-toast-${++toastCounter}`;
+}
 class SekiSonner {
     static _register(el) {
         SekiSonner._instance = el;
+        const queued = SekiSonner._pending;
+        SekiSonner._pending = [];
+        queued.forEach(p => SekiSonner._deliver(el, p));
     }
     static _unregister(_el) {
-        if (!_el || SekiSonner._instance === _el) {
+        if (!_el) {
+            // Test/reset helper: forget the instance and anything buffered.
+            SekiSonner._instance = null;
+            SekiSonner._pending = [];
+        }
+        else if (SekiSonner._instance === _el) {
             SekiSonner._instance = null;
         }
     }
+    static _deliver(el, p) {
+        var _a, _b, _c, _d;
+        el.addToast({
+            message: p.message,
+            variant: p.variant,
+            duration: (_b = (_a = p.options) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : el.duration,
+            description: (_c = p.options) === null || _c === void 0 ? void 0 : _c.description,
+            action: (_d = p.options) === null || _d === void 0 ? void 0 : _d.action,
+        }, p.id);
+    }
     static _show(message, variant, options) {
-        var _a;
+        const pending = { id: nextSonnerToastId(), message, variant, options };
         if (!SekiSonner._instance) {
-            console.warn('seki-sonner: No <seki-sonner> element found in the document. Add <seki-sonner> to your app layout.');
-            return '';
+            // The element may not be in the DOM yet, or its module may still be loading
+            // (lazy / per-tag loading). Buffer and deliver when it registers.
+            SekiSonner._pending.push(pending);
+            if (SekiSonner._pending.length > MAX_PENDING) {
+                SekiSonner._pending.shift();
+            }
+            return pending.id;
         }
-        return SekiSonner._instance.addToast({
-            message,
-            variant,
-            duration: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : SekiSonner._instance.duration,
-            description: options === null || options === void 0 ? void 0 : options.description,
-            action: options === null || options === void 0 ? void 0 : options.action,
-        });
+        SekiSonner._deliver(SekiSonner._instance, pending);
+        return pending.id;
     }
     static success(message, options) {
         return SekiSonner._show(message, 'success', options);
@@ -42,6 +66,8 @@ class SekiSonner {
         return SekiSonner._show(message, 'default', options);
     }
     static dismiss(id) {
+        // Toasts still buffered never reached the screen; drop them.
+        SekiSonner._pending = id ? SekiSonner._pending.filter(p => p.id !== id) : [];
         if (!SekiSonner._instance) {
             return;
         }
@@ -55,11 +81,12 @@ class SekiSonner {
     }
 }
 SekiSonner._instance = null;
+/** Toasts fired before any <seki-sonner> was mounted; flushed on _register. */
+SekiSonner._pending = [];
 
 const sekiSonnerCss = ":host{--seki-sonner-font-size:var(--seki-font-size-base, 14px);--seki-sonner-font-weight:var(--seki-font-weight-normal, 400);--seki-sonner-font-weight-medium:var(--seki-font-weight-medium, 500);--seki-sonner-font-weight-semibold:var(--seki-font-weight-semibold, 600);--seki-sonner-font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);--seki-sonner-line-height:var(--seki-line-height-normal, 1.5);--seki-sonner-description-font-size:var(--seki-font-size-sm, 12px);--seki-sonner-bg:var(--seki-background, #ffffff);--seki-sonner-fg:var(--seki-foreground, #1f2937);--seki-sonner-border:var(--seki-border, #e5e7eb);--seki-sonner-description-color:var(--seki-muted-foreground, #6b7280);--seki-sonner-success:var(--seki-success, #22c55e);--seki-sonner-error:var(--seki-destructive, #ef4444);--seki-sonner-warning:var(--seki-warning, #f59e0b);--seki-sonner-info:var(--seki-info, #2563eb);--seki-sonner-padding:var(--seki-spacing-4, 16px);--seki-sonner-gap:var(--seki-spacing-3, 12px);--seki-sonner-radius:var(--seki-radius-lg, 0.5rem);--seki-sonner-shadow:0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), 0 1px 3px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2));--seki-sonner-width:356px;--seki-sonner-offset:24px;display:contents}.seki-sonner{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;width:var(--seki-sonner-width);max-width:calc(100vw - var(--seki-sonner-offset) * 2);pointer-events:none}.seki-sonner--bottom-right{bottom:var(--seki-sonner-offset);right:var(--seki-sonner-offset)}.seki-sonner--bottom-left{bottom:var(--seki-sonner-offset);left:var(--seki-sonner-offset)}.seki-sonner--bottom-center{bottom:var(--seki-sonner-offset);left:50%;transform:translateX(-50%)}.seki-sonner--top-right{top:var(--seki-sonner-offset);right:var(--seki-sonner-offset)}.seki-sonner--top-left{top:var(--seki-sonner-offset);left:var(--seki-sonner-offset)}.seki-sonner--top-center{top:var(--seki-sonner-offset);left:50%;transform:translateX(-50%)}.seki-sonner__toast{--offset:calc(var(--index, 0) * 8px);display:flex;align-items:flex-start;gap:var(--seki-sonner-gap);padding:var(--seki-sonner-padding);background:var(--seki-sonner-bg);color:var(--seki-sonner-fg);border:1px solid var(--seki-sonner-border);border-radius:var(--seki-sonner-radius);box-shadow:var(--seki-sonner-shadow);font-family:var(--seki-sonner-font-family);font-size:var(--seki-sonner-font-size);font-weight:var(--seki-sonner-font-weight);line-height:var(--seki-sonner-line-height);pointer-events:auto;box-sizing:border-box;width:100%;transform:translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05));opacity:calc(1 - var(--index, 0) * 0.15);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.seki-sonner__toast--entering{animation:seki-sonner-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards}.seki-sonner__toast--exiting{animation:seki-sonner-exit 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards}@keyframes seki-sonner-enter{from{opacity:0;transform:translateY(calc(var(--offset) + 16px)) scale(calc(1 - var(--index, 0) * 0.05))}to{opacity:calc(1 - var(--index, 0) * 0.15);transform:translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05))}}@keyframes seki-sonner-exit{from{opacity:calc(1 - var(--index, 0) * 0.15);transform:translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05))}to{opacity:0;transform:translateY(calc(var(--offset) - 16px)) scale(calc(1 - var(--index, 0) * 0.05 - 0.05))}}@media (prefers-reduced-motion: reduce){.seki-sonner__toast{transition:none}.seki-sonner__toast--entering{animation:none;opacity:calc(1 - var(--index, 0) * 0.15);transform:translateY(var(--offset)) scale(calc(1 - var(--index, 0) * 0.05))}.seki-sonner__toast--exiting{animation:none;opacity:0}}.seki-sonner__toast--success{border-left:4px solid var(--seki-sonner-success)}.seki-sonner__toast--success .seki-sonner__icon{color:var(--seki-sonner-success)}.seki-sonner__toast--error{border-left:4px solid var(--seki-sonner-error)}.seki-sonner__toast--error .seki-sonner__icon{color:var(--seki-sonner-error)}.seki-sonner__toast--warning{border-left:4px solid var(--seki-sonner-warning)}.seki-sonner__toast--warning .seki-sonner__icon{color:var(--seki-sonner-warning)}.seki-sonner__toast--info{border-left:4px solid var(--seki-sonner-info)}.seki-sonner__toast--info .seki-sonner__icon{color:var(--seki-sonner-info)}.seki-sonner__toast--loading .seki-sonner__icon{color:var(--seki-sonner-description-color)}.seki-sonner__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.seki-sonner__spinner{animation:seki-sonner-spin 1s linear infinite}@keyframes seki-sonner-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.seki-sonner__spinner{animation-duration:2s}}.seki-sonner__content{flex:1;min-width:0}.seki-sonner__message{font-weight:var(--seki-sonner-font-weight-medium);line-height:var(--seki-sonner-line-height);word-break:break-word}.seki-sonner__description{margin-top:4px;font-size:var(--seki-sonner-description-font-size);color:var(--seki-sonner-description-color);line-height:var(--seki-sonner-line-height);word-break:break-word}.seki-sonner__actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.seki-sonner__action-btn{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border:1px solid var(--seki-sonner-border);border-radius:var(--seki-radius-sm, 0.25rem);background:transparent;color:var(--seki-sonner-fg);font-family:var(--seki-sonner-font-family);font-size:var(--seki-sonner-description-font-size);font-weight:var(--seki-sonner-font-weight-medium);line-height:var(--seki-sonner-line-height);cursor:pointer;white-space:nowrap;transition:background 150ms cubic-bezier(0.4, 0, 0.2, 1)}.seki-sonner__action-btn:hover{background:var(--seki-muted, #f3f4f6)}.seki-sonner__action-btn:focus-visible{outline:2px solid var(--seki-sonner-info);outline-offset:2px}.seki-sonner__dismiss{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--seki-radius-sm, 0.25rem);background:transparent;color:var(--seki-sonner-description-color);cursor:pointer;flex-shrink:0;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n              background 150ms cubic-bezier(0.4, 0, 0.2, 1)}.seki-sonner__dismiss:hover{color:var(--seki-sonner-fg);background:var(--seki-muted, #f3f4f6)}.seki-sonner__dismiss:focus-visible{outline:2px solid var(--seki-sonner-info);outline-offset:2px}@media (prefers-contrast: more){.seki-sonner__toast{border-width:2px}.seki-sonner__toast--success,.seki-sonner__toast--error,.seki-sonner__toast--warning,.seki-sonner__toast--info{border-left-width:4px}}";
 
 const MAX_VISIBLE = 3;
-let toastCounter = 0;
 const SekiSonnerElement = /*@__PURE__*/ proxyCustomElement(class SekiSonnerElement extends H {
     constructor(registerHost) {
         super();
@@ -73,25 +100,34 @@ const SekiSonnerElement = /*@__PURE__*/ proxyCustomElement(class SekiSonnerEleme
         this.duration = 4000;
         this.toasts = [];
         this.timers = new Map();
+        /** Exit-animation timers; tracked so they cannot fire after disconnect. */
+        this.removalTimers = new Map();
     }
     connectedCallback() {
+        // On a DOM move the element reconnects with toasts still in state, but
+        // disconnectedCallback cleared their timers: finish exits, restart auto-dismiss.
+        if (this.toasts.some(t => t.removing)) {
+            this.toasts = this.toasts.filter(t => !t.removing);
+        }
+        this.toasts.forEach(t => this.startTimer(t));
         SekiSonner._register(this);
     }
     disconnectedCallback() {
         SekiSonner._unregister(this);
         this.timers.forEach(t => clearTimeout(t));
         this.timers.clear();
+        this.removalTimers.forEach(t => clearTimeout(t));
+        this.removalTimers.clear();
+    }
+    startTimer(toast) {
+        if (toast.duration > 0 && !this.timers.has(toast.id)) {
+            this.timers.set(toast.id, setTimeout(() => this.removeToast(toast.id), toast.duration));
+        }
     }
-    addToast(data) {
-        const id = `seki-toast-${++toastCounter}`;
+    addToast(data, id = nextSonnerToastId()) {
         const toast = Object.assign(Object.assign({}, data), { id });
         this.toasts = [toast, ...this.toasts];
-        if (toast.duration > 0) {
-            const timer = setTimeout(() => {
-                this.removeToast(id);
-            }, toast.duration);
-            this.timers.set(id, timer);
-        }
+        this.startTimer(toast);
         return id;
     }
     removeToast(id) {
@@ -104,9 +140,13 @@ const SekiSonnerElement = /*@__PURE__*/ proxyCustomElement(class SekiSonnerEleme
         // Mark as removing for exit animation
         this.toasts = this.toasts.map(t => t.id === id ? Object.assign(Object.assign({}, t), { removing: true }) : t);
         // Remove after animation completes
-        setTimeout(() => {
+        if (this.removalTimers.has(id)) {
+            return;
+        }
+        this.removalTimers.set(id, setTimeout(() => {
+            this.removalTimers.delete(id);
             this.toasts = this.toasts.filter(t => t.id !== id);
-        }, 200);
+        }, 200));
     }
     handleDismiss(id) {
         this.removeToast(id);
@@ -136,7 +176,7 @@ const SekiSonnerElement = /*@__PURE__*/ proxyCustomElement(class SekiSonnerEleme
     }
     render() {
         const visibleToasts = this.toasts.slice(0, MAX_VISIBLE);
-        return (h(Host, { key: '54fe4b0586a7bf12555fc91a81b20d438efa9ffe' }, h("div", { key: '42769c29e0f135b6f1c49b169b2abacf0fa179aa', class: `seki-sonner seki-sonner--${this.position}`, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, visibleToasts.map((toast, index) => (h("div", { key: toast.id, class: {
+        return (h(Host, { key: 'ecf65ee2602127c167ded85807aed8f5b92686b8' }, h("div", { key: 'c504e8ba64b1a60db816616c130d8d4da756452f', class: `seki-sonner seki-sonner--${this.position}`, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, visibleToasts.map((toast, index) => (h("div", { key: toast.id, class: {
                 'seki-sonner__toast': true,
                 [`seki-sonner__toast--${toast.variant}`]: true,
                 'seki-sonner__toast--entering': !toast.removing,