@sekiui/elements 0.1.4 → 0.1.5

package/dist/types/utils/calendar/date-utils.d.ts

@@ -74,4 +74,13 @@ export declare function navigateWeek(date: Date, direction: 'prev' | 'next'): Da
  * Get the day of week index
  */
 export declare function getDayOfWeek(date: Date): number;
+/**
+ * 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`.
+ */
+export declare function parseDateInput(value?: Date | string | null): Date | null;
+/** Serialize the local calendar day of `date` as `YYYY-MM-DD`. */
+export declare function toISODate(date: Date): string;
 export { isSameDay, isSameMonth, isToday, startOfMonth, startOfDay, format, };

package/dist/types/utils/dialog/focus-trap.d.ts

@@ -25,14 +25,3 @@ export declare function focusLast(container: HTMLElement): void;
  * Trap focus within a container during Tab key navigation.
  */
 export declare function trapFocus(container: HTMLElement, event: KeyboardEvent): void;
-/**
- * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
- * on the first call and the original inline styles are restored on the last
- * matching unlock.
- */
-export declare function lockBodyScroll(): void;
-/**
- * Unlock body scroll when a modal closes. Only the final unlock restores the
- * original inline styles.
- */
-export declare function unlockBodyScroll(): void;

package/dist/types/utils/field-description.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Description and error association for `seki-field` (#358).
+ *
+ * ## Why this exists
+ *
+ * `seki-field` renders its description and error text in slots, but nothing
+ * told assistive technology that the control is described by them. An
+ * `aria-describedby` id on a SekiUI control's host cannot reach the real
+ * `<input>` / `<button>` inside the control's own shadow root, so (exactly as
+ * for labels, see `label-association.ts`) the wiring depends on the kind of
+ * control:
+ *
+ * - **Native controls** and SekiUI controls whose role lives on the host
+ *   (`seki-radio-group`, `seki-combobox`): the field and the control share a
+ *   tree, so `aria-describedby` / `aria-errormessage` id references resolve.
+ * - **Other SekiUI controls** (input, textarea, checkbox, switch, slider,
+ *   select, date-picker, input-otp) keep their focusable element in a shadow
+ *   root. They forward the plain-text `aria-description` and `aria-invalid`
+ *   attributes inward, so the description (and, when invalid, the error text)
+ *   is passed through as text.
+ * - **Several controls in one field**: the field host is the `role="group"`,
+ *   and it is the element that gets described.
+ *
+ * When the field is `invalid`, the control gets `aria-invalid="true"`, and the
+ * error is exposed both through `aria-errormessage` (where an id reference
+ * works) and by being appended to the description, since screen reader support
+ * for `aria-errormessage` is still uneven.
+ *
+ * Anything the author set explicitly is never overwritten. We only manage
+ * values we wrote ourselves, tracked with a marker attribute so they can be
+ * updated and cleaned up.
+ */
+export declare class FieldDescriptionBinding {
+    private readonly host;
+    private readonly isInvalid;
+    private target;
+    private observer?;
+    constructor(host: HTMLElement, isInvalid: () => boolean);
+    /** Direct children placed in (or, by tag, belonging to) the given part. */
+    private parts;
+    private controls;
+    private resolveTarget;
+    private text;
+    private ids;
+    /** (Re)apply the description. Call on load, on `invalid` change and on slot change. */
+    sync(): void;
+    /** Remove anything this binding wrote on the current target. */
+    release(): void;
+    /** Re-sync when the description, error or control changes after load. */
+    observe(): void;
+    disconnect(): void;
+}

package/dist/types/utils/overlay.d.ts

@@ -0,0 +1,109 @@
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+export declare function lockBodyScroll(): void;
+/** Release one lock taken with lockBodyScroll(). */
+export declare function unlockBodyScroll(): void;
+export interface OverlayLayerOptions {
+    /**
+     * Called when Escape is pressed while this layer is the topmost one. The
+     * handler decides whether to close (e.g. `closeOnEscape`); either way the
+     * key does not reach the layers below.
+     */
+    onEscape?: (event: KeyboardEvent) => void;
+    /**
+     * Modal layers trap Tab inside `container`, move focus into it on open,
+     * restore focus on close and lock body scroll. A function is read on every
+     * activation (dialog's `modal` prop can change).
+     */
+    modal?: boolean | (() => boolean);
+    /** The element focus is moved into and trapped in (modal layers). */
+    container?: () => HTMLElement | null | undefined;
+}
+/**
+ * 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.
+ */
+export declare class OverlayLayer {
+    private readonly options;
+    private active;
+    private modalActive;
+    private returnFocusTo;
+    private focusPending;
+    constructor(options?: OverlayLayerOptions);
+    get isActive(): boolean;
+    /** Whether this layer is open and modal (traps focus, locks scroll). */
+    get isModal(): boolean;
+    /** Activate or deactivate; idempotent, so it can be called on every render. */
+    setActive(active: boolean): void;
+    activate(): void;
+    deactivate(): void;
+    /** Move focus into a modal layer once its container has rendered. */
+    didRender(): void;
+    handleEscape(event: KeyboardEvent): void;
+    handleTab(event: KeyboardEvent): void;
+    private restoreFocus;
+}
+/**
+ * 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.
+ */
+export declare class DialogLabelSource {
+    private readonly onChange;
+    private observer?;
+    private host;
+    constructor(onChange: (label: string, description: string) => void);
+    private find;
+    private sync;
+    /** Start tracking the content part `host` (call when it opens). */
+    observe(host: HTMLElement): void;
+    disconnect(): void;
+}

package/dist/types/utils/select/types.d.ts

@@ -72,6 +72,10 @@ export interface SelectContext {
     ariaLabelledby?: string;
     /** ID of element that describes this select */
     ariaDescribedby?: string;
+    /** Text that describes this select (set by seki-field; ids can't cross the trigger's shadow root) */
+    ariaDescription?: string;
+    /** 'true' when the select is invalid (set by seki-field) */
+    ariaInvalid?: string;
     /** Handler for value changes */
     onValueChange: (value: SelectValue) => void;
     /** Handler for open state changes */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cdn/p-D50kwTtW.js

@@ -1,160 +0,0 @@
-/**
- * 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();
-        }
-    }
-}
-// ---------------------------------------------------------------------------
-// Body scroll lock (reference-counted so stacked modals don't unlock early).
-// ---------------------------------------------------------------------------
-let scrollLockCount = 0;
-let savedOverflow = '';
-let savedPaddingRight = '';
-/**
- * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
- * on the first call and the original inline styles are restored on the last
- * matching 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++;
-}
-/**
- * Unlock body scroll when a modal closes. Only the final unlock restores the
- * original inline styles.
- */
-function unlockBodyScroll() {
-    if (scrollLockCount === 0)
-        return;
-    scrollLockCount--;
-    if (scrollLockCount === 0) {
-        document.body.style.overflow = savedOverflow;
-        document.body.style.paddingRight = savedPaddingRight;
-    }
-}
-
-export { focusFirst as f, lockBodyScroll as l, trapFocus as t, unlockBodyScroll as u };

package/dist/cjs/focus-trap-CFl79SjZ.js

@@ -1,165 +0,0 @@
-'use strict';
-
-/**
- * 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();
-        }
-    }
-}
-// ---------------------------------------------------------------------------
-// Body scroll lock (reference-counted so stacked modals don't unlock early).
-// ---------------------------------------------------------------------------
-let scrollLockCount = 0;
-let savedOverflow = '';
-let savedPaddingRight = '';
-/**
- * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
- * on the first call and the original inline styles are restored on the last
- * matching 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++;
-}
-/**
- * Unlock body scroll when a modal closes. Only the final unlock restores the
- * original inline styles.
- */
-function unlockBodyScroll() {
-    if (scrollLockCount === 0)
-        return;
-    scrollLockCount--;
-    if (scrollLockCount === 0) {
-        document.body.style.overflow = savedOverflow;
-        document.body.style.paddingRight = savedPaddingRight;
-    }
-}
-
-exports.focusFirst = focusFirst;
-exports.lockBodyScroll = lockBodyScroll;
-exports.trapFocus = trapFocus;
-exports.unlockBodyScroll = unlockBodyScroll;