@sekiui/elements 0.1.2 → 0.1.4

package/dist/esm/context-bridge-B4SOpX_A.js

@@ -0,0 +1,155 @@
+/**
+ * Context Bridge Utility
+ *
+ * Generalizes the "parent publishes state onto its host element + child
+ * subscribes via closest()" pattern used by compound components (select,
+ * 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
+ * for select (#244/#253), toggle-group (#255/#257), and combobox (#258/#259).
+ */
+/**
+ * One event name shared by every compound-component family. Stencil's
+ * @Event() emits with { bubbles: true, composed: true } by default, so a
+ * nested compound (e.g. a toggle-group rendered inside a select) can cause an
+ * inner parent's event to bubble past an outer parent's own children. This is
+ * harmless today only because subscribeToContextChange()'s callback takes no
+ * payload and every handler re-reads its own closest() parent's live context
+ * rather than trusting event.detail — do not add a payload to this event or
+ * that bubbling becomes a real cross-family bug.
+ */
+const SEKI_CONTEXT_CHANGE_EVENT = 'sekiContextChange';
+/**
+ * Parent-side: publish a fresh context object onto the host element and
+ * notify subscribed children. Must assign a plain property, not a class
+ * accessor of the same name — in the dist-custom-elements build the class
+ * IS the host element, so an accessor collision throws (#254).
+ */
+function publishContext(el, propertyName, context, emitter) {
+    el[propertyName] = context;
+    emitter.emit();
+}
+/**
+ * Child-side: find the nearest ancestor matching parentSelector and listen
+ * for context-change notifications. onChange is called with no payload by
+ * design — children re-read the live context property via closest() rather
+ * than trusting a stale event.detail snapshot. No-ops safely (null parent,
+ * no-op unsubscribe) if no matching parent is found.
+ */
+function subscribeToContextChange(el, parentSelector, onChange) {
+    const parent = el.closest(parentSelector);
+    if (parent) {
+        parent.addEventListener(SEKI_CONTEXT_CHANGE_EVENT, onChange);
+    }
+    return {
+        parent,
+        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.
+ */
+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.
+ */
+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.
+ */
+function readContext(parent, propertyName) {
+    var _a;
+    if (!parent)
+        return null;
+    return ((_a = parent[propertyName]) !== null && _a !== void 0 ? _a : null);
+}
+
+export { ContextConsumer as C, publishContext as p, subscribeToContextChange as s };

package/dist/esm/form-control-BNwS5Hkj.js

@@ -0,0 +1,207 @@
+/* global File, ValidityState, ValidityStateFlags, HTMLFormElement */
+/**
+ * Shared form participation for every `formAssociated` SekiUI control.
+ *
+ * One `FormControl` per component instance owns the four things that kept
+ * drifting apart between components:
+ *
+ *  1. the submitted value          -> `internals.setFormValue(...)`
+ *  2. constraint validation        -> `internals.setValidity(...)`
+ *  3. the validity API on the host -> `validity`, `validationMessage`,
+ *                                     `willValidate`, `checkValidity()`,
+ *                                     `reportValidity()`
+ *  4. lifecycle callbacks          -> reset (back to the value captured at
+ *                                     load), disabled, state restore
+ *
+ * Usage inside a component:
+ *
+ * ```ts
+ * private form!: FormControl<string>;
+ *
+ * componentWillLoad() {
+ *   this.form = new FormControl(this.el, this.internals, { ...options });
+ *   this.form.captureInitial(this.value);
+ *   this.form.sync();
+ * }
+ * formResetCallback() { this.form?.reset(); }
+ * formDisabledCallback(d: boolean) { this.form?.setFieldsetDisabled(d); }
+ * formStateRestoreCallback(s: FormControlState) { this.form?.restoreState(s); }
+ * ```
+ *
+ * ## Why plain host members and not `@Method()`
+ *
+ * Stencil `@Method()`s are always async: `el.checkValidity()` would return a
+ * `Promise`, which is truthy, so the idiomatic `if (!el.checkValidity())` would
+ * silently never fire. Native parity (`validity`, `willValidate` and
+ * `validationMessage` are synchronous reads) matters more than Stencil's method
+ * proxy, so the helper defines the members directly on the host element. That
+ * works in every build target (lazy loader, CDN and custom-elements) because the
+ * host is a real `HTMLElement` instance. The one limitation is that, like any
+ * Stencil API, the members exist once the component has loaded, not before the
+ * lazy loader has hydrated the element; `form.checkValidity()` and form
+ * submission go through `ElementInternals` and are always correct.
+ */
+const FLAG_KEYS = [
+    'valueMissing',
+    'typeMismatch',
+    'patternMismatch',
+    'tooLong',
+    'tooShort',
+    'rangeUnderflow',
+    'rangeOverflow',
+    'stepMismatch',
+    'badInput',
+    'customError',
+];
+function flagsOf(validity) {
+    const flags = {};
+    for (const key of FLAG_KEYS) {
+        if (validity[key])
+            flags[key] = true;
+    }
+    return flags;
+}
+class FormControl {
+    constructor(host, internals, opts) {
+        this.host = host;
+        this.internals = internals;
+        this.opts = opts;
+        this.hasInitial = false;
+        this.fieldsetDisabled = false;
+        this.installHostApi();
+    }
+    /** Remember the value the control has at load time; `reset()` restores it. */
+    captureInitial(value) {
+        this.initial = value;
+        this.hasInitial = true;
+    }
+    /** Push the current value and validity to the form. Call after any state change. */
+    sync() {
+        const internals = this.internals;
+        if (!internals)
+            return;
+        const disabled = this.disabled;
+        if (typeof internals.setFormValue === 'function') {
+            internals.setFormValue(disabled ? null : this.opts.getFormValue());
+        }
+        if (typeof internals.setValidity === 'function') {
+            this.applyValidity(internals);
+        }
+    }
+    /** Body of `formResetCallback`: restore the initial value, then re-sync. */
+    reset() {
+        if (this.hasInitial)
+            this.opts.restore(this.initial);
+        this.sync();
+    }
+    /** Body of `formDisabledCallback` (a `<fieldset disabled>` ancestor or the host attribute). */
+    setFieldsetDisabled(disabled) {
+        this.fieldsetDisabled = disabled;
+        this.sync();
+    }
+    /** Body of `formStateRestoreCallback`. */
+    restoreState(state) {
+        var _a, _b;
+        (_b = (_a = this.opts).restoreState) === null || _b === void 0 ? void 0 : _b.call(_a, state);
+        this.sync();
+    }
+    get disabled() {
+        var _a, _b;
+        return this.fieldsetDisabled || !!((_b = (_a = this.opts).isDisabled) === null || _b === void 0 ? void 0 : _b.call(_a));
+    }
+    applyValidity(internals) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const o = this.opts;
+        if (this.disabled || ((_a = o.isReadonly) === null || _a === void 0 ? void 0 : _a.call(o))) {
+            internals.setValidity({});
+            return;
+        }
+        const native = (_b = o.getNativeControl) === null || _b === void 0 ? void 0 : _b.call(o);
+        let flags = {};
+        let message = '';
+        if (native) {
+            if (!native.validity.valid) {
+                flags = flagsOf(native.validity);
+                message = native.validationMessage;
+            }
+        }
+        else if (((_c = o.isRequired) === null || _c === void 0 ? void 0 : _c.call(o)) && o.isEmpty()) {
+            flags = { valueMissing: true };
+            message = (_d = o.requiredMessage) !== null && _d !== void 0 ? _d : 'Please fill out this field.';
+        }
+        else if (!o.isEmpty()) {
+            const extra = (_e = o.getConstraints) === null || _e === void 0 ? void 0 : _e.call(o);
+            if (extra) {
+                flags = extra.flags;
+                message = extra.message;
+            }
+        }
+        if (!FLAG_KEYS.some(k => flags[k])) {
+            internals.setValidity({});
+            return;
+        }
+        if (!message)
+            message = 'Please enter a valid value.';
+        const anchor = (_h = (_g = (_f = o.getAnchor) === null || _f === void 0 ? void 0 : _f.call(o)) !== null && _g !== void 0 ? _g : native) !== null && _h !== void 0 ? _h : undefined;
+        try {
+            internals.setValidity(flags, message, anchor !== null && anchor !== void 0 ? anchor : undefined);
+        }
+        catch (_j) {
+            // The anchor must be a shadow-including descendant of the host; if it is
+            // not (yet) attached, the validity itself still has to be recorded.
+            internals.setValidity(flags, message);
+        }
+    }
+    /**
+     * Define the native validity members on the host. They delegate to
+     * `ElementInternals`, so the browser fires `invalid`, matches `:invalid` and
+     * shows its bubble exactly as for a built-in control.
+     */
+    installHostApi() {
+        const host = this.host;
+        const internals = this.internals;
+        const define = (name, descriptor) => Object.defineProperty(host, name, Object.assign({ configurable: true, enumerable: false }, descriptor));
+        define('validity', { get: () => internals === null || internals === void 0 ? void 0 : internals.validity });
+        define('validationMessage', { get: () => { var _a; return (_a = internals === null || internals === void 0 ? void 0 : internals.validationMessage) !== null && _a !== void 0 ? _a : ''; } });
+        define('willValidate', { get: () => !!internals && !this.disabled && internals.willValidate });
+        define('checkValidity', { value: () => (internals ? internals.checkValidity() : true) });
+        define('reportValidity', { value: () => (internals ? internals.reportValidity() : true) });
+    }
+}
+/**
+ * Activation behaviour for a form-associated *button* host (`seki-button`,
+ * `seki-attachment-action`). The real `<button>` lives in a shadow root, so its
+ * form owner is null and the browser never submits or resets anything for it.
+ * The host is form-associated instead, so we act on `internals.form` ourselves:
+ *
+ *  - `submit` -> `form.requestSubmit()` (keeps the `submit` event and constraint
+ *    validation, unlike `form.submit()`)
+ *  - `reset`  -> `form.reset()`
+ *
+ * Native buttons run their activation behaviour *after* the click event has
+ * finished dispatching, and skip it when a listener called `preventDefault()`.
+ * To match, the action is deferred one task so consumer click listeners (which
+ * run after ours while the event bubbles) can still cancel it.
+ *
+ * Limitation: `SubmitEvent.submitter` is `null`, because `requestSubmit()` only
+ * accepts a native submit button as the submitter.
+ */
+function activateFormButton(event, type, internals, disabled) {
+    if (disabled || type === 'button' || !internals)
+        return;
+    setTimeout(() => {
+        if (event.defaultPrevented)
+            return;
+        const form = internals.form;
+        if (!form)
+            return;
+        // Call through the prototype: a control named/id'd "reset" or "requestSubmit"
+        // shadows the method on the form element (named property access).
+        if (type === 'submit')
+            HTMLFormElement.prototype.requestSubmit.call(form);
+        else
+            HTMLFormElement.prototype.reset.call(form);
+    }, 0);
+}
+
+export { FormControl as F, activateFormButton as a };

package/dist/esm/index.js

@@ -2,6 +2,8 @@ export { seki_switch as SekiSwitch } from './seki-switch.entry.js';
 export { seki_label as SekiLabel } from './seki-label.entry.js';
 export { a as SekiSonner, S as SekiSonnerElement } from './seki-sonner-CoMlL86x.js';
 import './index-CwIa7pBQ.js';
+import './form-control-BNwS5Hkj.js';
+import './label-association-COBvV3Rw.js';
 
 /**
  * Keyboard Service

package/dist/esm/label-association-COBvV3Rw.js

@@ -0,0 +1,201 @@
+/**
+ * Label association for `seki-label` and `seki-field-label`.
+ *
+ * ## Why this exists
+ *
+ * Both labels render their text inside a shadow root. A native `<label for>`
+ * resolves its `for` id inside the tree the `<label>` lives in, so a `<label>`
+ * in our shadow root can never reach a control in the page's light DOM: clicks
+ * did nothing and the control had no accessible name (#329).
+ *
+ * The host element (`<seki-label>`) *does* live in the consumer's tree, so the
+ * wiring is done from the host in script, resolving the id against
+ * `host.getRootNode()` (the label's own root, which is where an author expects
+ * `for` to point, also when the label sits inside another component's shadow
+ * root together with its control).
+ *
+ * ## Behaviour
+ *
+ * - **Activation**: a click on the label forwards to the target the way a native
+ *   label would. Toggles (checkbox, switch, radio) are clicked, text-like
+ *   controls are focused. A click that originated on the control itself (the
+ *   wrapping form `<seki-label><seki-checkbox/> Text</seki-label>`) is ignored so
+ *   the control never toggles twice.
+ * - **Accessible name**: a shadow-DOM control hides its real focusable element
+ *   (`<button role="checkbox">`, `<input>`, ...) inside its own shadow root, and
+ *   an `aria-labelledby` id reference cannot cross a shadow boundary, so
+ *   pointing the host at the label would not name the inner element. SekiUI
+ *   controls all forward their `aria-label` attribute to that inner element, so
+ *   for them the label text is passed through as `aria-label`. For native
+ *   elements the reference does resolve, so we use `aria-labelledby` and the
+ *   name tracks the label's live content.
+ *   Anything the author set explicitly (`aria-label`, `aria-labelledby`) is
+ *   never overwritten; we only manage values we wrote ourselves, tracked with a
+ *   marker attribute so they can be updated and cleaned up.
+ *   `ElementInternals.ariaLabelledByElements` is deliberately not used: it is
+ *   unavailable in Firefox and older Safari, and cannot reach the inner element
+ *   of a shadow-DOM control either.
+ */
+/* global Document */
+const MANAGED_ATTR = 'data-seki-label-managed';
+/** SekiUI form controls that render their focusable element in a shadow root. */
+const SEKI_CONTROLS = [
+    'seki-input',
+    'seki-textarea',
+    'seki-checkbox',
+    'seki-switch',
+    'seki-select',
+    'seki-slider',
+    'seki-radio-group',
+    'seki-input-otp',
+    'seki-date-picker',
+    'seki-combobox',
+].join(',');
+const NATIVE_CONTROLS = 'input:not([type="hidden"]), select, textarea, button';
+let uid = 0;
+function focusInside(target) {
+    var _a, _b, _c;
+    const inner = (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
+    (_c = (_b = (inner !== null && inner !== void 0 ? inner : target)).focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+}
+class LabelBinding {
+    constructor(host, getFor) {
+        this.host = host;
+        this.getFor = getFor;
+        this.target = null;
+    }
+    /** Resolve the control this label is for, in the label's own root. */
+    resolveTarget() {
+        var _a, _b, _c;
+        const id = this.getFor();
+        if (id) {
+            const root = this.host.getRootNode();
+            return (_b = (_a = root.getElementById) === null || _a === void 0 ? void 0 : _a.call(root, id)) !== null && _b !== void 0 ? _b : null;
+        }
+        const controls = `${SEKI_CONTROLS}, ${NATIVE_CONTROLS}`;
+        // Implicit association: <seki-label><seki-checkbox></seki-checkbox> Text</seki-label>
+        const nested = this.host.querySelector(controls);
+        if (nested)
+            return nested;
+        // Inside <seki-field>, a label without `for` names the field's control.
+        if (this.host.getAttribute('slot') === 'label') {
+            const field = this.host.closest('seki-field');
+            return (_c = field === null || field === void 0 ? void 0 : field.querySelector(`:scope > :not([slot]):is(${controls})`)) !== null && _c !== void 0 ? _c : null;
+        }
+        return null;
+    }
+    /** Label text, without the text of a control nested inside the label. */
+    labelText(skip) {
+        const parts = [];
+        const walk = (node) => {
+            var _a;
+            if (node === skip)
+                return;
+            if (node.nodeType === Node.TEXT_NODE)
+                parts.push((_a = node.textContent) !== null && _a !== void 0 ? _a : '');
+            else
+                node.childNodes.forEach(walk);
+        };
+        this.host.childNodes.forEach(walk);
+        return parts.join(' ').replace(/\s+/g, ' ').trim();
+    }
+    /** (Re)apply the accessible name. Call on load, `for` change and slot change. */
+    sync() {
+        const next = this.resolveTarget();
+        if (next !== this.target) {
+            this.release();
+            this.target = next;
+        }
+        const target = this.target;
+        if (!target)
+            return;
+        const managed = target.getAttribute(MANAGED_ATTR);
+        const authored = (name) => target.hasAttribute(name) && managed !== name;
+        if (target.tagName.includes('-')) {
+            if (authored('aria-label'))
+                return;
+            const text = this.labelText(this.host.contains(target) ? target : null);
+            if (text) {
+                target.setAttribute('aria-label', text);
+                target.setAttribute(MANAGED_ATTR, 'aria-label');
+            }
+            return;
+        }
+        if (authored('aria-labelledby') || authored('aria-label'))
+            return;
+        if (!this.host.id)
+            this.host.id = `seki-label-${++uid}`;
+        target.setAttribute('aria-labelledby', this.host.id);
+        target.setAttribute(MANAGED_ATTR, 'aria-labelledby');
+    }
+    /** Remove anything this binding wrote on the current target. */
+    release() {
+        const target = this.target;
+        const managed = target === null || target === void 0 ? void 0 : target.getAttribute(MANAGED_ATTR);
+        if (target && managed) {
+            target.removeAttribute(managed);
+            target.removeAttribute(MANAGED_ATTR);
+        }
+        this.target = null;
+    }
+    /** Re-sync when the control is added after the label (async rendering). */
+    observe() {
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => {
+            if (this.resolveTarget() !== this.target)
+                this.sync();
+        });
+        this.observer.observe(this.host.getRootNode(), { childList: true, subtree: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+        this.release();
+    }
+    /** Forward a click on the label to its control, as a native label would. */
+    handleClick(event) {
+        var _a, _b;
+        if (event.defaultPrevented)
+            return;
+        const target = this.resolveTarget();
+        if (!target)
+            return;
+        const path = event.composedPath();
+        // The click came from the control itself: it already handled it.
+        if (path.includes(target))
+            return;
+        // Don't hijack clicks on other interactive content placed inside the label.
+        for (const node of path) {
+            if (node === this.host)
+                break;
+            if (node instanceof HTMLElement && node.matches('a[href], button, input, select, textarea'))
+                return;
+        }
+        if (target.hasAttribute('disabled') || target.getAttribute('aria-disabled') === 'true')
+            return;
+        const toggle = (_a = target.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[role="checkbox"], [role="switch"]');
+        if (toggle) {
+            toggle.focus();
+            toggle.click();
+            return;
+        }
+        if (target instanceof HTMLInputElement &&
+            ['checkbox', 'radio', 'button', 'submit', 'reset'].includes(target.type)) {
+            target.focus();
+            target.click();
+            return;
+        }
+        if (target instanceof HTMLButtonElement) {
+            target.click();
+            return;
+        }
+        if (target.shadowRoot)
+            focusInside(target);
+        else
+            (_b = target.focus) === null || _b === void 0 ? void 0 : _b.call(target);
+    }
+}
+
+export { LabelBinding as L };