@sekiui/elements 0.1.3 → 0.1.5

package/dist/components/p-BNAT-Ecg.js

@@ -0,0 +1,95 @@
+/**
+ * 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/components/{p-0LlBr1rV.js → p-Bchnf7an.js}

@@ -11,7 +11,7 @@ const SekiSidebarGroupLabel = /*@__PURE__*/ proxyCustomElement(class SekiSidebar
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'bf9489c5a1fc64ec51a3f5f1b1d464f83f677b14', class: "sidebar-group-label" }, h("slot", { key: '6a996782b24a511b2923f035bbd9e1fbb694a181' })));
+        return (h("div", { key: 'd370c5f6d3d11d192d4fb79e6b1f516a1b62ac9f', class: "sidebar-group-label" }, h("slot", { key: 'dab9ad78f2cf62236db031d07b8e9701caf7ae13' })));
     }
     get el() { return this; }
     static get style() { return sekiSidebarGroupCss; }

package/dist/components/{p-B7jKUvZz.js → p-C3WFySZp.js}

@@ -1,4 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-jMliCqbB.js';
+import { L as LabelBinding } from './p-COBvV3Rw.js';
 
 const sekiLabelCss = ":host{--seki-label-font-size:var(--seki-font-size-sm, 12px);--seki-label-font-weight:var(--seki-font-weight-medium, 500);--seki-label-font-family:var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);--seki-label-line-height:var(--seki-line-height-tight, 1.25);--seki-label-color:var(--seki-foreground, #1f2937);--seki-label-muted-color:var(--seki-muted-foreground, #6b7280);--seki-label-required-color:var(--seki-destructive, #ef4444);display:inline-block}.seki-label{display:inline-flex;align-items:center;font-family:var(--seki-label-font-family);font-size:var(--seki-label-font-size);font-weight:var(--seki-label-font-weight);line-height:var(--seki-label-line-height);color:var(--seki-label-color);cursor:default;user-select:none}.seki-label--disabled{color:var(--seki-label-muted-color);cursor:not-allowed;opacity:0.7}.seki-label__required{color:var(--seki-label-required-color);font-weight:var(--seki-font-weight-bold, 700);margin-inline-start:var(--seki-spacing-0-5, 0.125rem)}@media (prefers-contrast: more){.seki-label__required{font-weight:var(--seki-font-weight-bold, 700);text-decoration:underline}}@media (prefers-reduced-motion: reduce){.seki-label{transition:none}}";
 
@@ -20,19 +21,44 @@ const SekiLabel = /*@__PURE__*/ proxyCustomElement(class SekiLabel extends H {
          */
         this.disabled = false;
     }
+    onForChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event) {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.handleClick(event);
+    }
+    connectedCallback() {
+        this.binding = new LabelBinding(this.el, () => this.for);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+        (_b = this.binding) === null || _b === void 0 ? void 0 : _b.observe();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: 'df80b45752def839bec876b26d32861f31404f55', part: "label" }, labelProps, { class: {
+        return (h("label", { key: '1aa6ed2ae6c1c16812dd07aa81b88c0df0790b02', part: "label", class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: '2ce1883422648de0ca9da12706a55c9749c5407f' }), this.required && h("span", { key: '2e89edc35b776623fb0f9203744c6a1adb8cd20f', class: "seki-label__required" }, " *")));
+            } }, h("slot", { key: 'a2da93efc7cca1b92d6001b071f5bfa3971f2a8d', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: '81a2056abc5499c86d889ece899797b2fdea437e', class: "seki-label__required" }, " *")));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "for": ["onForChange"]
+    }; }
     static get style() { return sekiLabelCss; }
 }, [257, "seki-label", {
         "for": [1],
         "required": [4],
         "disabled": [4]
+    }, [[0, "click", "onClick"]], {
+        "for": ["onForChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-Dh9pvFzL.js → p-CM1qYW9i.js}

@@ -134,7 +134,7 @@ const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '983eb8c2197906c08015b1ba03c990ba45d63b50', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '4cf34435488f7dc545572a8d20509d9c12e08f06', class: "switch", ref: el => (this.switchEl = el), part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: 'f637e58d2af875cac10ef3b2dc073c4deb8e574f', class: "thumb", part: "thumb" }))));
+        return (h(Host, { key: '1710cdafc415bf5180f6ebbe81e366e2ab923961', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '313f6e13aba4f32ca4681d125b28c34b505188cb', class: "switch", ref: el => (this.switchEl = el), part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-description": this.ariaDescription || undefined, "aria-invalid": this.ariaInvalid === 'true' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '7e4b0bad5b4822ef94226e3bf6677149d1004560', class: "thumb", part: "thumb" }))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -153,6 +153,8 @@ const SekiSwitch = /*@__PURE__*/ proxyCustomElement(class SekiSwitch extends H {
         "name": [1],
         "value": [1],
         "ariaLabel": [1, "aria-label"],
+        "ariaDescription": [1, "aria-description"],
+        "ariaInvalid": [1, "aria-invalid"],
         "internalChecked": [32]
     }, [[0, "keydown", "handleKeyDown"]], {
         "disabled": ["handleFormStateChange"],

package/dist/components/p-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 };