@sekiui/elements 0.1.2 → 0.1.4

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-textarea
  * @description A multi-line text input field with full form integration, accessibility support,
@@ -38,19 +39,17 @@ export class SekiTextarea {
          */
         this.invalid = false;
         this.handleInput = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiInput.emit({ value: this.value, nativeEvent: event });
         };
         this.handleChange = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ value: this.value, nativeEvent: event });
         };
         this.handleFocus = (event) => {
@@ -61,27 +60,58 @@ export class SekiTextarea {
             this.sekiBlur.emit({ value: target.value, nativeEvent: event });
         };
     }
-    // Form-associated lifecycle callbacks
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
     formResetCallback() {
-        this.value = '';
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue('');
-        }
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
     }
     formStateRestoreCallback(state) {
-        this.value = state;
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(state);
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
+    /**
+     * Keep the inner textareaEl and the form in step with a programmatic `el.value = x`
+     * without waiting for the next render, so `form.checkValidity()` and FormData
+     * read the new value immediately.
+     */
+    handleFormStateChange() {
+        var _a, _b, _c;
+        if (this.textareaEl && this.textareaEl.value !== ((_a = this.value) !== null && _a !== void 0 ? _a : '')) {
+            this.textareaEl.value = (_b = this.value) !== null && _b !== void 0 ? _b : '';
         }
+        (_c = this.formControl) === null || _c === void 0 ? void 0 : _c.sync();
     }
     componentWillLoad() {
-        // Set initial form value
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.value || '');
-        }
+        var _a;
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : ''; },
+            isEmpty: () => !this.value,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            isReadonly: () => this.readonly,
+            restore: initial => {
+                this.value = initial;
+            },
+            restoreState: state => {
+                this.value = typeof state === 'string' ? state : '';
+            },
+            // Mirror the inner control's own validity (required, minlength, ...) onto the host.
+            getNativeControl: () => this.textareaEl,
+        });
+        this.formControl.captureInitial((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        this.formControl.sync();
+    }
+    componentDidRender() {
+        var _a;
+        // The inner control's constraint attributes were just updated by this render.
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        return (h("textarea", { key: 'b9c35f868ac2a4e26cc2e53576e4925e55672f99', value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("textarea", { key: '575577a2754c1721b3dc01a0e513a4e3f93b3830', ref: el => (this.textareaEl = el), value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, rows: this.rows, cols: this.cols, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autocomplete, class: `textarea textarea--resize-${this.resize}${this.invalid ? ' textarea--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -478,5 +508,17 @@ export class SekiTextarea {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleFormStateChange"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -864,3 +864,9 @@
 ::slotted([slot='trigger']) {
   cursor: help;
 }
+
+/* The trigger slot lives in an inline wrapper so a slotted trigger renders in place
+   (the host is display: contents and has no box of its own). */
+.trigger-wrapper {
+  display: inline-block;
+}

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * Tooltip Component
  *
@@ -63,6 +63,7 @@ export class SekiTooltip {
         this.showTimer = null;
         this.hideTimer = null;
         this.triggerEl = null;
+        this.boundTrigger = null;
         this.longPressTimer = null;
         this.touchStartX = 0;
         this.touchStartY = 0;
@@ -185,6 +186,13 @@ export class SekiTooltip {
                 }
             }
         };
+        /**
+         * The trigger slot's assigned content changed (trigger added/replaced/removed):
+         * move the listeners over to the new trigger.
+         */
+        this.onTriggerSlotChange = () => {
+            this.attachTriggerListeners();
+        };
     }
     /**
      * Show tooltip programmatically
@@ -308,12 +316,20 @@ export class SekiTooltip {
         tooltip.style.zIndex = '1000';
     }
     /**
-     * Attach event listeners to trigger
+     * Bind listeners to the element currently assigned to the trigger slot.
+     * Idempotent: if the trigger is unchanged nothing is re-bound; if it was
+     * replaced, the old element is detached first.
      */
     attachTriggerListeners() {
         const trigger = this.el.querySelector('[slot="trigger"]');
+        if (this.boundTrigger && this.boundTrigger !== trigger) {
+            this.removeTriggerListeners(this.boundTrigger);
+            this.boundTrigger = null;
+        }
         if (!trigger)
             return;
+        this.boundTrigger = trigger;
+        this.triggerEl = trigger;
         // Mouse events
         trigger.addEventListener('mouseenter', this.onTriggerMouseEnter);
         trigger.addEventListener('mouseleave', this.onTriggerMouseLeave);
@@ -335,13 +351,7 @@ export class SekiTooltip {
             trigger.setAttribute('aria-describedby', contentId);
         }
     }
-    /**
-     * Remove event listeners from trigger
-     */
-    detachTriggerListeners() {
-        const trigger = this.el.querySelector('[slot="trigger"]');
-        if (!trigger)
-            return;
+    removeTriggerListeners(trigger) {
         trigger.removeEventListener('mouseenter', this.onTriggerMouseEnter);
         trigger.removeEventListener('mouseleave', this.onTriggerMouseLeave);
         trigger.removeEventListener('focus', this.onTriggerFocus);
@@ -349,6 +359,15 @@ export class SekiTooltip {
         trigger.removeEventListener('touchstart', this.onTriggerTouchStart);
         trigger.removeEventListener('touchmove', this.onTriggerTouchMove);
         trigger.removeEventListener('touchend', this.onTriggerTouchEnd);
+    }
+    /**
+     * Remove event listeners from the bound trigger
+     */
+    detachTriggerListeners() {
+        if (this.boundTrigger) {
+            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);
@@ -399,7 +418,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h("div", { key: '34e42900e4cbb8d0d6f712cb830f5a8b0bd36bb0', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '7f0fe164ee6e6daec300b398aef5a738b8fcf72e', name: "content" }), h("div", { key: '7a9d1335442cc2f2eece9e57d779fc58b5d3349d', class: "tooltip-arrow" })));
+        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" }))));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }

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/form-control.js

@@ -0,0 +1,205 @@
+/* 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;
+}
+export 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.
+ */
+export 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);
+}