@sekiui/elements 0.1.3 → 0.1.5

package/dist/collection/components/toggle-group/seki-toggle-group.js

@@ -147,7 +147,7 @@ export class SekiToggleGroup {
         };
     }
     render() {
-        return (h(Host, { key: '240caaea2c488953ea25fbdd88df793b60af92bd', role: "group", "aria-label": this.ariaLabel, "aria-orientation": this.orientation }, h("slot", { key: '61107f87af8bc991b836cbdd6849ceb38eb108a1' })));
+        return (h(Host, { key: 'e95eb2311e5dfed5948ef8e7bea8e4a61fc471f1', role: "group", "aria-label": this.ariaLabel, "aria-orientation": this.orientation }, h("slot", { key: 'b075eecef5aa7ab7421c79e663d450047e6686e9' })));
     }
     static get is() { return "seki-toggle-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/seki-tooltip.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Tooltip Component
  *
@@ -104,6 +105,25 @@ export class SekiTooltip {
                 this.hide();
             }, 100);
         };
+        /**
+         * Pointer entered the tooltip itself: keep it open (WCAG 1.4.13 "hoverable").
+         * Cancels the grace-period hide started when the pointer left the trigger.
+         */
+        this.onTooltipMouseEnter = () => {
+            if (this.hideTimer) {
+                clearTimeout(this.hideTimer);
+                this.hideTimer = null;
+            }
+        };
+        /**
+         * Pointer left the tooltip: start the same grace-period hide as leaving the
+         * trigger, so moving back onto the trigger keeps it open.
+         */
+        this.onTooltipMouseLeave = () => {
+            if (!this.isVisible)
+                return;
+            this.onTriggerMouseLeave();
+        };
         /**
          * Handle focus on trigger (accessibility)
          */
@@ -172,6 +192,11 @@ export class SekiTooltip {
                 this.longPressTimer = null;
             }
         };
+        /**
+         * A visible tooltip is a layer on the overlay stack (utils/overlay.ts), as
+         * in Radix: Escape hides it first and leaves an enclosing dialog open.
+         */
+        this.layer = new OverlayLayer({ onEscape: (event) => this.onEscapeKey(event) });
         /**
          * Handle Escape key to dismiss tooltip
          */
@@ -192,6 +217,16 @@ export class SekiTooltip {
          */
         this.onTriggerSlotChange = () => {
             this.attachTriggerListeners();
+            if (!this.boundTrigger) {
+                // Trigger removed while open: nothing left to anchor to.
+                this.triggerEl = null;
+                if (this.isVisible)
+                    this.hide();
+            }
+            else if (this.isVisible) {
+                // Trigger swapped while open: re-anchor to the new element.
+                this.calculatePosition();
+            }
         };
     }
     /**
@@ -340,8 +375,6 @@ export class SekiTooltip {
         trigger.addEventListener('touchstart', this.onTriggerTouchStart);
         trigger.addEventListener('touchmove', this.onTriggerTouchMove);
         trigger.addEventListener('touchend', this.onTriggerTouchEnd);
-        // Escape key on document
-        document.addEventListener('keydown', this.onEscapeKey);
         // Apply aria-describedby to trigger (idempotent — keep the existing id so a
         // re-attach after a DOM move doesn't regenerate it).
         const contentSlot = this.el.querySelector('[slot="content"]');
@@ -368,9 +401,6 @@ export class SekiTooltip {
             this.removeTriggerListeners(this.boundTrigger);
             this.boundTrigger = null;
         }
-        // Escape key was registered on document in attachTriggerListeners; remove it
-        // here so it does not leak (and keep firing) after the tooltip is detached.
-        document.removeEventListener('keydown', this.onEscapeKey);
     }
     componentWillLoad() {
         // `disabled` wins over a requested initial open state.
@@ -407,8 +437,12 @@ export class SekiTooltip {
             this.attachTriggerListeners();
         }
     }
+    componentDidRender() {
+        this.layer.setActive(this.isVisible);
+    }
     disconnectedCallback() {
         this.detachTriggerListeners();
+        this.layer.setActive(false);
         // Clean up timers
         if (this.showTimer)
             clearTimeout(this.showTimer);
@@ -418,7 +452,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h(Host, { key: '4904953ae5d7a0d67942898104f81e36bd5d9ab2' }, h("span", { key: '30a69b56ab401b6c28214360feff10c7a246f698', class: "trigger-wrapper" }, h("slot", { key: 'd15e4b6b7a83a462857b8670d1394718f1af688a', name: "trigger", onSlotchange: this.onTriggerSlotChange })), h("div", { key: '817b9ef07ada7e8018250f721e4384d2692559f7', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: 'd4e19072ceaabeb7fadd73f336876b2faedcdba6', name: "content" }), h("div", { key: '76fcd6d32a10202aabae4c3b14b4ba40c415770a', class: "tooltip-arrow" }))));
+        return (h(Host, { key: '7c714fcc3092f4a38990c6bc97e6b02699c204e7' }, h("span", { key: 'ec5b2be8e913e917d70b767de17ce0ddf7a067af', class: "trigger-wrapper" }, h("slot", { key: 'a586b19cbdc1481eb7ddb087662bbcb4a92b8c0e', name: "trigger", onSlotchange: this.onTriggerSlotChange })), h("div", { key: '9a1d43f039edc0b3ed3dda9306cbf425c2f854c0', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip", onMouseEnter: this.onTooltipMouseEnter, onMouseLeave: this.onTooltipMouseLeave }, h("slot", { key: '949262f9a555cec595aa98b1bee3da1b388228f7', name: "content" }), h("div", { key: '221555f0885ace177f03b5d42d48c9cc09128c5c', class: "tooltip-arrow" }))));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -10,3 +10,5 @@ export * from './types';
 // Sonner toast
 export { SekiSonnerElement } from './components/sonner/seki-sonner';
 export { SekiSonner } from './components/sonner/seki-sonner-controller';
+// Toaster (event-based) helper
+export { toast } from './components/toast/toast';

package/dist/collection/utils/calendar/date-utils.js

@@ -137,4 +137,32 @@ export function navigateWeek(date, direction) {
 export function getDayOfWeek(date) {
     return getDay(date);
 }
+/**
+ * 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 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`. */
+export 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())}`;
+}
 export { isSameDay, isSameMonth, isToday, startOfMonth, startOfDay, format, };

package/dist/collection/utils/context-bridge.js

@@ -3,10 +3,25 @@
  *
  * Generalizes the "parent publishes state onto its host element + child
  * subscribes via closest()" pattern used by compound components (select,
- * toggle-group, combobox, ...). Each parent calls publishContext() from its
- * updateContextOnElement()-equivalent method; each child calls
- * subscribeToContextChange() once in componentDidLoad() and the returned
- * unsubscribe() in disconnectedCallback().
+ * toggle-group, combobox, dialog, popover, ...).
+ *
+ * Parent (provider) contract:
+ *   - call publishContext() from componentWillLoad(), so the context exists
+ *     before any child renders for the first time, and
+ *   - call it again on every state change, including changes that arrive as a
+ *     @Prop assignment (@Watch) rather than through a @Method or user input.
+ *
+ * Child (consumer) contract — use a ContextConsumer:
+ *   - call connect(this.el) from connectedCallback() (runs before the first
+ *     render, and again after the element is moved to a new parent), and
+ *   - call disconnect() from disconnectedCallback().
+ *   connect() invokes the callback once immediately, so a child that
+ *   upgrades after its parent already published still starts from the current
+ *   state; a child that upgrades before its parent (one-module-per-tag
+ *   loading, #314) hears the parent's first publish from componentWillLoad().
+ *
+ * subscribeToContextChange() is the older listener-only form (no immediate
+ * read, light-DOM closest() only); prefer ContextConsumer for new code.
  *
  * Extracted after the same bug (child freezes at mount-time state because
  * nothing told it the parent changed) was independently fixed three times
@@ -50,3 +65,89 @@ export function subscribeToContextChange(el, parentSelector, onChange) {
         unsubscribe: () => parent === null || parent === void 0 ? void 0 : parent.removeEventListener(SEKI_CONTEXT_CHANGE_EVENT, onChange),
     };
 }
+/**
+ * Nearest ancestor matching `selector`, continuing past shadow roots: when the
+ * element's own tree has no match, the search resumes from the shadow host.
+ * This lets a part rendered inside another component's shadow tree still find
+ * the provider that wraps that component.
+ */
+export function findContextProvider(el, selector) {
+    var _a;
+    let node = el;
+    while (node) {
+        const match = node.closest(selector);
+        if (match)
+            return match;
+        const root = node.getRootNode();
+        // A shadow root is a document fragment with a host (no global ShadowRoot
+        // reference, so this also runs under mock-doc / hydrate).
+        node = root.nodeType === 11 ? ((_a = root.host) !== null && _a !== void 0 ? _a : null) : null;
+    }
+    return null;
+}
+/**
+ * Child-side: tracks one provider (see findContextProvider) for a part.
+ *
+ *   private dialog = new ContextConsumer<DialogContext>('seki-dialog', '_dialogContext', () => this.sync());
+ *   connectedCallback() { this.dialog.connect(this.el); }
+ *   disconnectedCallback() { this.dialog.disconnect(); }
+ *
+ * connect() finds the provider, starts listening for its context-change
+ * notifications and calls `onChange` once right away, so the part starts from
+ * whatever is already published. `parent` and `context` are already set when
+ * that first call happens. Calling connect() from connectedCallback runs it
+ * before the first render and again after the part is moved to another
+ * provider.
+ *
+ * `onChange` gets no event payload by design (see SEKI_CONTEXT_CHANGE_EVENT):
+ * it reads the live `context`. Notifications bubbling up from a nested
+ * provider are ignored; only events dispatched by this part's own provider
+ * host (or retargeted to it from that host's shadow tree) count.
+ *
+ * Works whether or not the provider element has been upgraded yet: the
+ * listener sits on the element itself, so the provider's first
+ * publishContext() from componentWillLoad() reaches it.
+ */
+export class ContextConsumer {
+    constructor(parentSelector, propertyName, onChange) {
+        this.parentSelector = parentSelector;
+        this.propertyName = propertyName;
+        this.onChange = onChange;
+        this.provider = null;
+        this.handleEvent = (event) => {
+            if (event.target === this.provider) {
+                this.onChange(this.context);
+            }
+        };
+    }
+    /** The provider element found by the last connect(), or null. */
+    get parent() {
+        return this.provider;
+    }
+    /** The provider's current context, or null when there is none yet. */
+    get context() {
+        return readContext(this.provider, this.propertyName);
+    }
+    connect(host) {
+        var _a;
+        this.disconnect();
+        this.provider = findContextProvider(host, this.parentSelector);
+        (_a = this.provider) === null || _a === void 0 ? void 0 : _a.addEventListener(SEKI_CONTEXT_CHANGE_EVENT, this.handleEvent);
+        this.onChange(this.context);
+    }
+    disconnect() {
+        var _a;
+        (_a = this.provider) === null || _a === void 0 ? void 0 : _a.removeEventListener(SEKI_CONTEXT_CHANGE_EVENT, this.handleEvent);
+        this.provider = null;
+    }
+}
+/**
+ * Read a context object a provider published with publishContext(). Returns
+ * null when there is no provider or it has not published yet.
+ */
+export function readContext(parent, propertyName) {
+    var _a;
+    if (!parent)
+        return null;
+    return ((_a = parent[propertyName]) !== null && _a !== void 0 ? _a : null);
+}

package/dist/collection/utils/dialog/focus-trap.js

@@ -129,39 +129,3 @@ export function trapFocus(container, event) {
         }
     }
 }
-// ---------------------------------------------------------------------------
-// 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.
- */
-export 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.
- */
-export function unlockBodyScroll() {
-    if (scrollLockCount === 0)
-        return;
-    scrollLockCount--;
-    if (scrollLockCount === 0) {
-        document.body.style.overflow = savedOverflow;
-        document.body.style.paddingRight = savedPaddingRight;
-    }
-}

package/dist/collection/utils/field-description.js

@@ -0,0 +1,174 @@
+/**
+ * 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.
+ */
+const MANAGED_ATTR = 'data-seki-field-managed';
+/** SekiUI controls whose focusable element sits in a shadow root. */
+const SHADOW_CONTROLS = [
+    'seki-input',
+    'seki-textarea',
+    'seki-checkbox',
+    'seki-switch',
+    'seki-select',
+    'seki-slider',
+    'seki-input-otp',
+    'seki-date-picker',
+];
+/** SekiUI controls that carry their ARIA role on the host element itself. */
+const HOST_ROLE_CONTROLS = ['seki-radio-group', 'seki-combobox'];
+const NATIVE_CONTROLS = ['input:not([type="hidden"])', 'select', 'textarea'];
+const SEKI_CONTROLS = [...SHADOW_CONTROLS, ...HOST_ROLE_CONTROLS].join(',');
+const CONTROLS = [SEKI_CONTROLS, ...NATIVE_CONTROLS].join(',');
+let uid = 0;
+export class FieldDescriptionBinding {
+    constructor(host, isInvalid) {
+        this.host = host;
+        this.isInvalid = isInvalid;
+        this.target = null;
+    }
+    /** Direct children placed in (or, by tag, belonging to) the given part. */
+    parts(slot) {
+        const tag = `seki-field-${slot}`;
+        return Array.from(this.host.children).filter((el) => el instanceof HTMLElement &&
+            (el.getAttribute('slot') === slot || (!el.hasAttribute('slot') && el.localName === tag)));
+    }
+    controls() {
+        const partEls = [this.parts('label'), this.parts('description'), this.parts('error')].flat();
+        return Array.from(this.host.querySelectorAll(CONTROLS)).filter(el => {
+            var _a;
+            if (partEls.some(part => part.contains(el)))
+                return false;
+            // Skip inputs that are an implementation detail of another control
+            // (e.g. a search input slotted inside a combobox).
+            const owner = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.closest(SEKI_CONTROLS);
+            return !owner || !this.host.contains(owner);
+        });
+    }
+    resolveTarget() {
+        const controls = this.controls();
+        if (controls.length === 1)
+            return controls[0];
+        // Several controls: the field is the group, so describe the group.
+        if (controls.length > 1)
+            return this.host;
+        return null;
+    }
+    text(els) {
+        return els
+            .map(el => { var _a; return ((_a = el.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim(); })
+            .filter(Boolean)
+            .join(' ');
+    }
+    ids(els) {
+        return els
+            .filter(el => { var _a; return ((_a = el.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
+            .map(el => {
+            if (!el.id)
+                el.id = `seki-field-part-${++uid}`;
+            return el.id;
+        });
+    }
+    /** (Re)apply the description. Call on load, on `invalid` change and on slot change. */
+    sync() {
+        var _a;
+        const next = this.resolveTarget();
+        if (next !== this.target) {
+            this.release();
+            this.target = next;
+        }
+        const target = this.target;
+        if (!target)
+            return;
+        const invalid = this.isInvalid();
+        const descriptions = this.parts('description');
+        const errors = invalid ? this.parts('error') : [];
+        const managed = ((_a = target.getAttribute(MANAGED_ATTR)) !== null && _a !== void 0 ? _a : '').split(' ').filter(Boolean);
+        const set = (name, value) => {
+            const isManaged = managed.includes(name);
+            if (target.hasAttribute(name) && !isManaged)
+                return; // authored: leave alone
+            if (value) {
+                if (target.getAttribute(name) !== value)
+                    target.setAttribute(name, value);
+                if (!isManaged)
+                    managed.push(name);
+            }
+            else if (isManaged) {
+                target.removeAttribute(name);
+                managed.splice(managed.indexOf(name), 1);
+            }
+        };
+        const isGroup = target === this.host;
+        const useText = SHADOW_CONTROLS.includes(target.localName);
+        if (useText) {
+            set('aria-description', this.text([...descriptions, ...errors]) || null);
+        }
+        else {
+            set('aria-describedby', [...this.ids(descriptions), ...this.ids(errors)].join(' ') || null);
+        }
+        if (!isGroup) {
+            set('aria-invalid', invalid ? 'true' : null);
+            if (!useText)
+                set('aria-errormessage', invalid ? this.ids(errors).join(' ') || null : null);
+        }
+        const value = managed.join(' ');
+        if (value)
+            target.setAttribute(MANAGED_ATTR, value);
+        else
+            target.removeAttribute(MANAGED_ATTR);
+    }
+    /** Remove anything this binding wrote on the current target. */
+    release() {
+        var _a;
+        const target = this.target;
+        if (target) {
+            ((_a = target.getAttribute(MANAGED_ATTR)) !== null && _a !== void 0 ? _a : '')
+                .split(' ')
+                .filter(Boolean)
+                .forEach(name => target.removeAttribute(name));
+            target.removeAttribute(MANAGED_ATTR);
+        }
+        this.target = null;
+    }
+    /** Re-sync when the description, error or control changes after load. */
+    observe() {
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(this.host, { childList: true, subtree: true, characterData: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+        this.release();
+    }
+}