@sekiui/elements 0.1.4 → 0.1.5

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();
+    }
+}

package/dist/collection/utils/overlay.js

@@ -0,0 +1,304 @@
+/**
+ * Overlay layer stack, modal focus handling and body scroll lock, shared by
+ * every component that floats above the page and closes on Escape.
+ *
+ * ## Why this exists (#332)
+ *
+ * Each overlay used to listen for Escape on `window` by itself. All of those
+ * listeners run for the same key press, so a popover inside a dialog closed
+ * together with the dialog, and `stopPropagation()` in one handler did not stop
+ * the others. Sheet and drawer also rendered `aria-modal="true"` without any
+ * of the modal behaviour dialog had (focus moved in, Tab trapped, focus
+ * restored, page scroll locked).
+ *
+ * ## Model (matches Radix DismissableLayer / FocusScope)
+ *
+ * - Every open overlay is an {@link OverlayLayer} on one document-wide stack,
+ *   in the order the layers opened.
+ * - One pair of `window` keydown listeners handles Escape: the layer that was
+ *   on top when the key went down gets the key, nothing below it does. If an
+ *   element-level handler inside that layer already closed it (a combobox input
+ *   closing its list, a submenu calling `stopPropagation()`), the key is spent
+ *   and no other layer closes.
+ * - The topmost *modal* layer traps Tab inside its container. Modal layers
+ *   also move focus in when they open, return it to the element that had it
+ *   when they close, and lock body scroll. The lock is reference-counted, so a
+ *   dialog closing inside an open sheet leaves the page locked.
+ */
+import { focusFirst, getFocusableElements, trapFocus } from "./dialog/focus-trap";
+import { getDeepActiveElement } from "./menu-navigation";
+// ---------------------------------------------------------------------------
+// Body scroll lock (reference-counted so stacked modals don't unlock early).
+// ---------------------------------------------------------------------------
+let scrollLockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+/**
+ * Lock body scroll. Safe to nest: the lock is applied on the first call and
+ * the original inline styles come back on the matching last 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++;
+}
+/** Release one lock taken with lockBodyScroll(). */
+export function unlockBodyScroll() {
+    if (scrollLockCount === 0)
+        return;
+    scrollLockCount--;
+    if (scrollLockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+    }
+}
+// ---------------------------------------------------------------------------
+// Layer stack
+// ---------------------------------------------------------------------------
+/**
+ * Whether `node` is inside `ancestor` in the flat tree: follows slot
+ * assignment (content projected into a panel's `<slot>`) and shadow hosts.
+ */
+function flatTreeContains(ancestor, node) {
+    var _a, _b, _c;
+    let current = node;
+    while (current) {
+        if (current === ancestor)
+            return true;
+        current =
+            (_c = (_b = (_a = current.assignedSlot) !== null && _a !== void 0 ? _a : current.parentNode) !== null && _b !== void 0 ? _b : current.host) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+}
+const stack = [];
+/** The layer that was on top when an Escape keydown started dispatching. */
+const escapeTarget = new WeakMap();
+function topLayer() {
+    return stack.length > 0 ? stack[stack.length - 1] : null;
+}
+function onKeydownCapture(event) {
+    if (event.key === 'Escape') {
+        escapeTarget.set(event, topLayer());
+    }
+}
+function onKeydownBubble(event) {
+    if (event.key === 'Escape') {
+        // Prefer the layer recorded before any element-level handler ran. If that
+        // layer has closed since, an inner handler consumed the key.
+        const layer = escapeTarget.has(event) ? escapeTarget.get(event) : topLayer();
+        if (layer && layer.isActive) {
+            layer.handleEscape(event);
+        }
+        return;
+    }
+    if (event.key === 'Tab') {
+        for (let i = stack.length - 1; i >= 0; i--) {
+            if (stack[i].isModal) {
+                stack[i].handleTab(event);
+                return;
+            }
+        }
+    }
+}
+/** Listen only while at least one layer is open. */
+function syncListeners() {
+    if (typeof window === 'undefined')
+        return;
+    if (stack.length > 0) {
+        // Adding the same listener twice is a no-op.
+        window.addEventListener('keydown', onKeydownCapture, true);
+        window.addEventListener('keydown', onKeydownBubble);
+    }
+    else {
+        window.removeEventListener('keydown', onKeydownCapture, true);
+        window.removeEventListener('keydown', onKeydownBubble);
+    }
+}
+/**
+ * One overlay's place on the layer stack.
+ *
+ *   private layer = new OverlayLayer({ onEscape: () => this.close() });
+ *   componentDidRender() { this.layer.setActive(this._isOpen); }
+ *   disconnectedCallback() { this.layer.setActive(false); }
+ *
+ * Modal content parts call `setActive()` from the code path that sees the
+ * open state change (so focus is captured before anything moves it) and
+ * `didRender()` from componentDidRender, which moves focus in once the
+ * container exists.
+ */
+export class OverlayLayer {
+    constructor(options = {}) {
+        this.options = options;
+        this.active = false;
+        this.modalActive = false;
+        this.returnFocusTo = null;
+        this.focusPending = false;
+    }
+    get isActive() {
+        return this.active;
+    }
+    /** Whether this layer is open and modal (traps focus, locks scroll). */
+    get isModal() {
+        return this.active && this.modalActive;
+    }
+    /** Activate or deactivate; idempotent, so it can be called on every render. */
+    setActive(active) {
+        if (active)
+            this.activate();
+        else
+            this.deactivate();
+    }
+    activate() {
+        if (this.active)
+            return;
+        this.active = true;
+        stack.push(this);
+        if (stack.length === 1)
+            syncListeners();
+        const modal = this.options.modal;
+        this.modalActive = typeof modal === 'function' ? modal() : !!modal;
+        if (this.modalActive) {
+            lockBodyScroll();
+            this.returnFocusTo = getDeepActiveElement();
+            this.focusPending = true;
+            // The container may already be rendered (e.g. re-activation after a DOM
+            // move); otherwise didRender() picks this up.
+            this.didRender();
+        }
+    }
+    deactivate() {
+        if (!this.active)
+            return;
+        this.active = false;
+        const index = stack.indexOf(this);
+        if (index !== -1)
+            stack.splice(index, 1);
+        if (stack.length === 0)
+            syncListeners();
+        if (this.modalActive) {
+            this.modalActive = false;
+            this.focusPending = false;
+            unlockBodyScroll();
+            this.restoreFocus();
+        }
+    }
+    /** Move focus into a modal layer once its container has rendered. */
+    didRender() {
+        var _a, _b;
+        if (!this.focusPending || !((_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a)))
+            return;
+        this.focusPending = false;
+        const run = () => {
+            var _a, _b, _c;
+            const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!this.active || !container)
+                return;
+            // Something inside (e.g. an autofocus control) already has focus.
+            if (flatTreeContains(container, getDeepActiveElement()))
+                return;
+            if (getFocusableElements(container).length > 0) {
+                focusFirst(container);
+            }
+            else {
+                (_c = container.focus) === null || _c === void 0 ? void 0 : _c.call(container);
+            }
+        };
+        if (typeof requestAnimationFrame === 'function')
+            requestAnimationFrame(run);
+        else
+            run();
+    }
+    handleEscape(event) {
+        var _a, _b;
+        (_b = (_a = this.options).onEscape) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    }
+    handleTab(event) {
+        var _a, _b;
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (container)
+            trapFocus(container, event);
+    }
+    restoreFocus() {
+        var _a, _b;
+        const target = this.returnFocusTo;
+        this.returnFocusTo = null;
+        if (!target || !target.isConnected)
+            return;
+        // Leave focus alone if it already moved somewhere outside this layer on
+        // purpose; return it when it is inside the closing layer or was dropped.
+        const active = getDeepActiveElement();
+        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const dropped = !active || active === document.body;
+        if (dropped || (container && flatTreeContains(container, active))) {
+            target.focus();
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Accessible name / description for dialog-like content parts (#357)
+// ---------------------------------------------------------------------------
+const CONTENT_PARTS = 'seki-dialog-content, seki-alert-dialog-content, seki-sheet-content, seki-drawer-content';
+const TITLE_PARTS = 'seki-dialog-title, seki-sheet-title';
+const DESCRIPTION_PARTS = 'seki-dialog-description, seki-sheet-description';
+function textOf(el) {
+    var _a;
+    return ((_a = el === null || el === void 0 ? void 0 : el.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+}
+/**
+ * Title and description text for a dialog-like content part.
+ *
+ * The `role="dialog"` element lives in the content part's shadow root, while
+ * the title and description are separate custom elements in the light DOM. An
+ * `aria-labelledby` id reference cannot cross that shadow boundary, so the
+ * dialog had no accessible name or description. ARIA element reflection
+ * (`ariaLabelledByElements`) can reach outward, but test tooling and older
+ * engines don't follow it, so the content part mirrors the text into hidden
+ * elements in its own shadow root and references those instead (the approach
+ * `label-association.ts` takes for labels). A MutationObserver keeps the copy
+ * in sync while the content is open.
+ *
+ * Only the title/description that belong to this content part count, not
+ * those of an overlay nested inside it.
+ */
+export class DialogLabelSource {
+    constructor(onChange) {
+        this.onChange = onChange;
+        this.host = null;
+    }
+    find(selector) {
+        const host = this.host;
+        if (!host)
+            return null;
+        for (const el of Array.from(host.querySelectorAll(selector))) {
+            if (el.closest(CONTENT_PARTS) === host)
+                return el;
+        }
+        return null;
+    }
+    sync() {
+        this.onChange(textOf(this.find(TITLE_PARTS)), textOf(this.find(DESCRIPTION_PARTS)));
+    }
+    /** Start tracking the content part `host` (call when it opens). */
+    observe(host) {
+        if (this.host !== host)
+            this.disconnect();
+        this.host = host;
+        this.sync();
+        if (this.observer || typeof MutationObserver === 'undefined')
+            return;
+        this.observer = new MutationObserver(() => this.sync());
+        this.observer.observe(host, { childList: true, subtree: true, characterData: true });
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = undefined;
+    }
+}

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

@@ -18,6 +18,8 @@ export const defaultSelectContext = {
     ariaLabel: undefined,
     ariaLabelledby: undefined,
     ariaDescribedby: undefined,
+    ariaDescription: undefined,
+    ariaInvalid: undefined,
     onValueChange: () => { },
     onOpenChange: () => { },
     onOptionFocus: () => { },

package/dist/components/index.js

@@ -1,8 +1,9 @@
 import { g as globalScripts } from './p-jMliCqbB.js';
 export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './p-jMliCqbB.js';
-export { S as SekiSwitch } from './p-Dh9pvFzL.js';
+export { S as SekiSwitch } from './p-CM1qYW9i.js';
 export { S as SekiLabel } from './p-C3WFySZp.js';
-export { a as SekiSonner, S as SekiSonnerElement } from './p-D4LyQFQp.js';
+export { a as SekiSonner, S as SekiSonnerElement } from './p-DQcofZe0.js';
+export { t as toast } from './p-BNAT-Ecg.js';
 
 /**
  * Keyboard Service

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/{cdn/p-0LlBr1rV.js → components/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/{cdn/p-Dh9pvFzL.js → components/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"],