@sekiui/elements 0.1.5 → 0.1.6

package/dist/cdn/p-B4SOpX_A.js

@@ -1,155 +0,0 @@
-/**
- * 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/cdn/p-BNAT-Ecg.js

@@ -1,95 +0,0 @@
-/**
- * Toast utility for triggering toast notifications.
- *
- * @example
- * import { toast } from '@sekiui/elements';
- *
- * // Basic usage
- * toast('Hello world!');
- *
- * // With type
- * toast.success('Event created!');
- * toast.error('Something went wrong');
- * toast.warning('Please review your input');
- * toast.info('New version available');
- *
- * // With options
- * toast('Custom toast', {
- *   description: 'This is a description',
- *   duration: 5000,
- *   action: {
- *     label: 'Undo',
- *     onClick: () => console.log('Undo clicked')
- *   }
- * });
- */
-/** Number of connected <seki-toaster> elements currently listening. */
-let activeToasters = 0;
-/** Toasts fired while no toaster was listening; flushed when one connects. */
-let pending = [];
-const MAX_PENDING = 10;
-/** @internal Called by <seki-toaster> when it connects. Returns buffered toasts to replay. */
-function registerToaster() {
-    activeToasters++;
-    const queued = pending;
-    pending = [];
-    return queued;
-}
-/** @internal Called by <seki-toaster> when it disconnects. */
-function unregisterToaster() {
-    activeToasters = Math.max(0, activeToasters - 1);
-}
-function dispatchToast(message, options = {}) {
-    if (activeToasters === 0) {
-        // No toaster is mounted yet (not in the DOM, or its module is still loading).
-        pending.push({ message, options });
-        if (pending.length > MAX_PENDING) {
-            pending.shift();
-        }
-        return;
-    }
-    const event = new CustomEvent('seki-toast', {
-        detail: {
-            message,
-            type: options.type || 'default',
-            description: options.description,
-            duration: options.duration,
-            action: options.action,
-        },
-        bubbles: true,
-        composed: true,
-    });
-    document.dispatchEvent(event);
-}
-/**
- * Show a toast notification
- */
-function toast(message, options) {
-    dispatchToast(message, options);
-}
-/**
- * Show a success toast
- */
-toast.success = (message, options) => {
-    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'success' }));
-};
-/**
- * Show an error toast
- */
-toast.error = (message, options) => {
-    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'error' }));
-};
-/**
- * Show a warning toast
- */
-toast.warning = (message, options) => {
-    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'warning' }));
-};
-/**
- * Show an info toast
- */
-toast.info = (message, options) => {
-    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'info' }));
-};
-
-export { registerToaster as r, toast as t, unregisterToaster as u };

package/dist/cdn/p-BNwS5Hkj.js

@@ -1,207 +0,0 @@
-/* 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 };