npm - @sekiui/elements - Versions diffs - 0.1.4 → 0.1.5 - Mend

@sekiui/elements 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1311) hide show

package/dist/cjs/seki-dropdown-menu.cjs.entry.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var index = require('./index-VnD8dsXW.js');
 var menuNavigation = require('./menu-navigation-oVu9oqtS.js');
+var overlay = require('./overlay-Dy8TLF7-.js');
 const sekiDropdownMenuCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host([data-theme='dark']){color-scheme:dark}:host([data-theme='light']){color-scheme:light}:host{--seki-background:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-muted:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-muted-foreground:light-dark(hsl(0, 0%, 42%), hsl(0, 0%, 63.9%));--seki-card:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-card-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-popover:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-popover-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-border:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-input:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-primary:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 9%));--seki-primary-tint:light-dark(hsl(0, 0%, 9%, 0.06), hsl(0, 0%, 98%, 0.1));--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-secondary-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-accent:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-accent-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-destructive:light-dark(hsl(0, 84.2%, 60.2%), hsl(0, 62.8%, 30.6%));--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:light-dark(hsl(0, 86%, 97%), rgba(239, 68, 68, 0.1));--seki-destructive-soft-foreground:light-dark(hsl(0, 63%, 31%), hsl(0, 91%, 71%));--seki-success:light-dark(hsl(142, 71%, 45%), hsl(142, 69%, 58%));--seki-success-foreground:light-dark(hsl(142, 64%, 24%), hsl(142, 69%, 58%));--seki-success-bg:light-dark(hsl(142, 76%, 97%), rgba(34, 197, 94, 0.1));--seki-warning:light-dark(hsl(38, 92%, 50%), hsl(43, 96%, 56%));--seki-warning-foreground:light-dark(hsl(21, 77%, 27%), hsl(43, 96%, 56%));--seki-warning-bg:light-dark(hsl(48, 96%, 96%), rgba(245, 158, 11, 0.1));--seki-info:light-dark(hsl(217, 91%, 60%), hsl(217, 92%, 68%));--seki-info-foreground:light-dark(hsl(224, 64%, 33%), hsl(217, 92%, 68%));--seki-info-bg:light-dark(hsl(214, 100%, 97%), rgba(59, 130, 246, 0.1));--seki-ring:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 83.1%));--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:light-dark(var(--seki-neutral-400), var(--seki-neutral-600));--seki-border-default:var(--seki-border);--seki-border-emphasis:light-dark(var(--seki-neutral-300), var(--seki-neutral-700))}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:light-dark(hsl(0, 0%, 9%, 0.9), hsl(0, 0%, 98%, 0.9));--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:light-dark(hsl(0, 0%, 96.1%, 0.8), hsl(0, 0%, 14.9%, 0.8));--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-foreground:light-dark(hsl(240, 5.3%, 26.1%), hsl(240, 4.8%, 95.9%));--seki-sidebar-primary:light-dark(hsl(240, 5.9%, 10%), hsl(0, 0%, 98%));--seki-sidebar-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-accent:light-dark(hsl(240, 4.8%, 95.9%), hsl(240, 3.7%, 15.9%));--seki-sidebar-accent-foreground:light-dark(hsl(240, 5.9%, 10%), hsl(240, 4.8%, 95.9%));--seki-sidebar-border:light-dark(hsl(220, 13%, 91%), hsl(240, 3.7%, 15.9%));--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:light-dark(hsl(240, 3.8%, 46.1%), hsl(240, 5%, 64.9%));--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}[data-theme='dark']{color-scheme:dark}[data-theme='light']{color-scheme:light}:host{display:inline-block;position:relative}.dropdown-menu{display:contents}";
@@ -34,6 +35,19 @@ const SekiDropdownMenu = class {
          * Internal open state
          */
         this._isOpen = false;
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new overlay.OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+            },
+        });
     }
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
@@ -97,12 +111,6 @@ const SekiDropdownMenu = class {
         this.sekiSelect.emit(event.detail);
         this.closeMenu();
     }
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeMenu();
-        }
-    }
     /**
      * Return focus to the trigger (or whatever had focus when the menu opened)
      * after the menu closes. Skipped when focus already moved somewhere outside
@@ -172,11 +180,15 @@ const SekiDropdownMenu = class {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.el._dropdownMenuContext = this.getContext();
     }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
+    }
     disconnectedCallback() {
         this.removeClickOutside();
+        this.layer.setActive(false);
     }
     render() {
-        return (index.h(index.Host, { key: '5aa46bca99cbd85e5502c003931f26e36b612790', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: 'e7a528864da3024287324a32c85d15d52c23220e', part: "dropdown-menu", class: "dropdown-menu" }, index.h("slot", { key: 'c199df3c379535822edb7cf20a73da64f2f9b5c4' }))));
+        return (index.h(index.Host, { key: '6ff61abf4391bf30cbda771351eec17c6e4849bc', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: 'a27b1fe18d83d7a34bed20c4fda6c3e0de6f25e2', part: "dropdown-menu", class: "dropdown-menu" }, index.h("slot", { key: '30eb41187d2deaec7c6b4d92d83d94ce3c0f4fd2' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-empty.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SekiEmpty = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5f412cfece32e3d1f8e0cdf36b5230665704bd05' }, index.h("div", { key: '8baf34fe27a7418bc25354fe982220615207bbcf', class: "seki-empty", part: "empty", role: "status" }, index.h("div", { key: '486918a0a49740a1c55ce2cb9afc793584eee26c', class: "seki-empty__icon", part: "icon" }, index.h("slot", { key: '875da7a7a3f9d9eb036f443c05da874612f25bd6', name: "icon" })), this.heading && (index.h("h3", { key: 'cb0e52fbe2f3b4f4059faa394064db432fefbc2a', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (index.h("p", { key: '2be58514722b58bd79074c68ffca0117195d792e', class: "seki-empty__description", part: "description" }, this.description)), index.h("div", { key: '0c444d6b558e95eb548a628177a5189a7864954a', class: "seki-empty__content", part: "content" }, index.h("slot", { key: '0ba8cdb879551138e696ed0125de2d7d18481d0b' })), index.h("div", { key: 'fba4f83a754f8175a67eeb8ff27e333dbd698d45', class: "seki-empty__action", part: "action" }, index.h("slot", { key: 'e07313e7c9197d3bfe1532d9d5f8d7817d9b09a3', name: "action" })))));
+        return (index.h(index.Host, { key: '07f038897ee4345d206bd0deb8f326234ef9cc64' }, index.h("div", { key: '1d75a0d827397e224d0b7073d8d493b90052590e', class: "seki-empty", part: "empty", role: "status" }, index.h("div", { key: '56595ea15ac9bdd74b3ccda1d42806f5d04a3cde', class: "seki-empty__icon", part: "icon" }, index.h("slot", { key: '03a1d210eecfdd557f5e0ac74cc4333eca30b2a0', name: "icon" })), this.heading && (index.h("h3", { key: 'c70151a2161b3eb5a6ab993bb3cee03b75782e26', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (index.h("p", { key: 'a2d8606f7ab4a9a4ef1e269e8f5cec57015f79c0', class: "seki-empty__description", part: "description" }, this.description)), index.h("div", { key: '87111b111a8c4e463c05e62bb70faf0509e7a2e8', class: "seki-empty__content", part: "content" }, index.h("slot", { key: 'f5fece88ee5dbf9fde843f797598beb51bed117a' })), index.h("div", { key: '627258fd12d161ec6df3278ae4a63ef5f201ecf7', class: "seki-empty__action", part: "action" }, index.h("slot", { key: 'a07c81e608e9dfa486c95b93b8d8c84f650dcf38', name: "action" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-field-description.cjs.entry.js CHANGED Viewed

@@ -35,7 +35,7 @@ const SekiFieldDescription = class {
         return this.componentId;
     }
     render() {
-        return (index.h("div", { key: '576382295b9ed414e1039bdc342ffee29b2d5531', id: this.componentId, class: "description" }, index.h("slot", { key: 'a5b79dba0790e1b69738889d61a48b44dacc5149' })));
+        return (index.h("div", { key: '1d0ae69c4ef0d62e3a8c838baae3def3c5b40241', id: this.componentId, class: "description" }, index.h("slot", { key: 'b1dedec7a7691d0c6de1334cfe8edbcea50a5e70' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-field-error.cjs.entry.js CHANGED Viewed

@@ -63,7 +63,7 @@ const SekiFieldError = class {
     }
     render() {
         const style = this._visible ? {} : { display: 'none' };
-        return (index.h("div", { key: '44e891a1d8e637906933ece17fee66dec2ffb613', id: this.componentId, class: "error", "aria-live": "polite", style: style }, index.h("slot", { key: '741fe900c84f9fa797ae58e7e8e6c58532fa0495' })));
+        return (index.h("div", { key: '2b32f6a3fcf0f40c656217eb66d91136e59b26dd', id: this.componentId, class: "error", "aria-live": "polite", style: style }, index.h("slot", { key: '679c15ed40b2b09267c85d354db5d129d295ba29' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-field-group.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const SekiFieldGroup = class {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (index.h("div", { key: 'bcf7e18784e4f315bc6b4574ef639c154dcc8a24', class: "field-group", style: style }, index.h("slot", { key: '501913c4d4aa7f6e19f86d593279e439beb4e811' })));
+        return (index.h("div", { key: 'edf85ce8fd761153d58e9ff90149242ceac4882b', class: "field-group", style: style }, index.h("slot", { key: '6198f3a3e815c2c5288f4ccec11604e9f227aced' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-field-label.cjs.entry.js CHANGED Viewed

@@ -36,7 +36,7 @@ const SekiFieldLabel = class {
         (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h("label", { key: '012428a2524290c08330f7e9163c4f040a01c5c4' }, index.h("slot", { key: 'fec4e4466151bf66657c4326fa8978dac8137692', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && index.h("span", { key: 'b21ecf7ad0432714e7160bf0ec911450eb1f7027', class: "required-indicator" }, " *")));
+        return (index.h("label", { key: 'e61bee3d97e492d88d45b6c46e2dc2ee1d0c21f7' }, index.h("slot", { key: '78ce2f61a8e49bbee2eee4aae0d973ba12090bdb', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && index.h("span", { key: '4afad8c8a9912bac396bad34f850d83be20f6786', class: "required-indicator" }, " *")));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-field-legend.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SekiFieldLegend = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("legend", { key: 'c14c84629f3c727c7ad791b12eee95dc858a0755' }, index.h("slot", { key: 'd60f085ed640d10ab60540203c4fedee245c3d7d' })));
+        return (index.h("legend", { key: '8d11800c3ff3408e103f13ccb617911b28855855' }, index.h("slot", { key: '97e7d4e70a738092f708716cf5c9c38ea6155f9f' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-field.cjs.entry.js CHANGED Viewed

@@ -2,6 +2,181 @@
 var index = require('./index-VnD8dsXW.js');
+/**
+ * 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;
+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();
+    }
+}
 const sekiFieldCss = "/**\n * SekiUI Design Tokens - Index\n * Aggregates all design token files into a single entry point\n *\n * Import this file to get access to all design tokens:\n * @import '../tokens/index.css';\n */\n\n/**\n * SekiUI Design Tokens - Colors\n * Based on shadcn/ui color system\n */\n\n/* =============================================================================\n   PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)\n   ============================================================================= */\n\n:host {\n  /* Neutral Scale (50-950) - shadcn/ui inspired */\n  --seki-neutral-50: hsl(0, 0%, 98%);\n  --seki-neutral-100: hsl(0, 0%, 96.1%);\n  --seki-neutral-200: hsl(0, 0%, 89.8%);\n  --seki-neutral-300: hsl(0, 0%, 83.1%);\n  --seki-neutral-400: hsl(0, 0%, 63.9%);\n  --seki-neutral-500: hsl(0, 0%, 45.1%);\n  --seki-neutral-600: hsl(0, 0%, 32.2%);\n  --seki-neutral-700: hsl(0, 0%, 25.1%);\n  --seki-neutral-800: hsl(0, 0%, 14.9%);\n  --seki-neutral-900: hsl(0, 0%, 9%);\n  --seki-neutral-950: hsl(0, 0%, 3.9%);\n\n  /* Primary/Accent Scale (50-950) */\n  --seki-primary-50: hsl(210, 100%, 97%);\n  --seki-primary-100: hsl(210, 95%, 93%);\n  --seki-primary-200: hsl(210, 95%, 85%);\n  --seki-primary-300: hsl(210, 90%, 73%);\n  --seki-primary-400: hsl(210, 85%, 58%);\n  --seki-primary-500: hsl(210, 80%, 48%);\n  --seki-primary-600: hsl(210, 75%, 40%);\n  --seki-primary-700: hsl(210, 70%, 32%);\n  --seki-primary-800: hsl(210, 65%, 25%);\n  --seki-primary-900: hsl(210, 60%, 18%);\n  --seki-primary-950: hsl(210, 55%, 10%);\n\n  /* Semantic Color Primitives */\n  --seki-success-500: hsl(142, 71%, 45%);\n  --seki-success-600: hsl(142, 71%, 35%);\n  --seki-warning-500: hsl(38, 92%, 50%);\n  --seki-warning-600: hsl(38, 92%, 40%);\n  --seki-destructive-500: hsl(0, 84.2%, 60.2%);\n  --seki-destructive-600: hsl(0, 72%, 41%);\n\n  /* Chart Colors (shadcn/ui data visualization) */\n  --seki-chart-1: hsl(12, 76%, 61%);\n  --seki-chart-2: hsl(173, 58%, 39%);\n  --seki-chart-3: hsl(197, 37%, 24%);\n  --seki-chart-4: hsl(43, 74%, 66%);\n  --seki-chart-5: hsl(27, 87%, 67%);\n}\n\n/* =============================================================================\n   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)\n   ============================================================================= */\n\n/* Dark mode: every themed token below is a light-dark() pair. The branch is\n   chosen by the element's inherited `color-scheme`, which crosses shadow\n   boundaries, so the document-level switch (`[data-theme='dark']\n   { color-scheme: dark }`, injected once by src/global/theme.ts) themes every\n   component with no attribute mirroring. These two rules let a data-theme\n   attribute placed directly on a host win over the document, including for\n   hosts rendered inside another component's shadow tree. */\n:host([data-theme='dark']) {\n  color-scheme: dark;\n}\n\n:host([data-theme='light']) {\n  color-scheme: light;\n}\n\n:host {\n  /* Base */\n  --seki-background: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));\n  --seki-foreground: light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));\n\n  /* Muted */\n  --seki-muted: light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));\n  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches\n     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */\n  --seki-muted-foreground: light-dark(hsl(0, 0%, 42%), hsl(0, 0%, 63.9%));\n\n  /* Card */\n  --seki-card: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));\n  --seki-card-foreground: light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));\n\n  /* Popover */\n  --seki-popover: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));\n  --seki-popover-foreground: light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));\n\n  /* Border */\n  --seki-border: light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));\n  --seki-input: light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));\n\n  /* Primary */\n  --seki-primary: light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));\n  --seki-primary-foreground: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 9%));\n\n  /* Primary tint (soft, low-opacity primary surface — e.g. tinted bubbles) */\n  --seki-primary-tint: light-dark(hsl(0, 0%, 9%, 0.06), hsl(0, 0%, 98%, 0.1));\n  --seki-primary-tint-foreground: var(--seki-foreground);\n\n  /* Secondary */\n  --seki-secondary: light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));\n  --seki-secondary-foreground: light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));\n\n  /* Accent */\n  --seki-accent: light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));\n  --seki-accent-foreground: light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));\n\n  /* Destructive */\n  --seki-destructive: light-dark(hsl(0, 84.2%, 60.2%), hsl(0, 62.8%, 30.6%));\n  --seki-destructive-foreground: hsl(0, 0%, 98%);\n  --seki-destructive-bg: light-dark(hsl(0, 86%, 97%), rgba(239, 68, 68, 0.1));\n  --seki-destructive-soft-foreground: light-dark(hsl(0, 63%, 31%), hsl(0, 91%, 71%));\n\n  /* Success (semantic status - toast, alert, badge) */\n  --seki-success: light-dark(hsl(142, 71%, 45%), hsl(142, 69%, 58%));\n  --seki-success-foreground: light-dark(hsl(142, 64%, 24%), hsl(142, 69%, 58%));\n  --seki-success-bg: light-dark(hsl(142, 76%, 97%), rgba(34, 197, 94, 0.1));\n\n  /* Warning (semantic status - toast, alert, badge) */\n  --seki-warning: light-dark(hsl(38, 92%, 50%), hsl(43, 96%, 56%));\n  --seki-warning-foreground: light-dark(hsl(21, 77%, 27%), hsl(43, 96%, 56%));\n  --seki-warning-bg: light-dark(hsl(48, 96%, 96%), rgba(245, 158, 11, 0.1));\n\n  /* Info (semantic status - toast, alert, badge) */\n  --seki-info: light-dark(hsl(217, 91%, 60%), hsl(217, 92%, 68%));\n  --seki-info-foreground: light-dark(hsl(224, 64%, 33%), hsl(217, 92%, 68%));\n  --seki-info-bg: light-dark(hsl(214, 100%, 97%), rgba(59, 130, 246, 0.1));\n\n  /* Ring */\n  --seki-ring: light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 83.1%));\n  --seki-ring-shadow: hsl(0, 0%, 3.9%, 0.1);\n\n  /* Legacy aliases for backward compatibility */\n  --seki-bg-primary: var(--seki-background);\n  --seki-bg-secondary: var(--seki-muted);\n  --seki-bg-tertiary: var(--seki-accent);\n  --seki-text-primary: var(--seki-foreground);\n  --seki-text-secondary: var(--seki-muted-foreground);\n  --seki-text-tertiary: light-dark(var(--seki-neutral-400), var(--seki-neutral-600));\n  --seki-border-default: var(--seki-border);\n  --seki-border-emphasis: light-dark(var(--seki-neutral-300), var(--seki-neutral-700));\n}\n\n/* =============================================================================\n   COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)\n   ============================================================================= */\n\n:host {\n  /* Button Variant: Primary (default in shadcn/ui) */\n  --seki-button-primary-bg: var(--seki-primary);\n  --seki-button-primary-text: var(--seki-primary-foreground);\n  --seki-button-primary-border: transparent;\n  --seki-button-primary-hover-bg: light-dark(hsl(0, 0%, 9%, 0.9), hsl(0, 0%, 98%, 0.9));\n  --seki-button-primary-hover-text: var(--seki-primary-foreground);\n  --seki-button-primary-hover-border: transparent;\n\n  /* Button Variant: Secondary */\n  --seki-button-secondary-bg: var(--seki-secondary);\n  --seki-button-secondary-text: var(--seki-secondary-foreground);\n  --seki-button-secondary-border: transparent;\n  --seki-button-secondary-hover-bg: light-dark(hsl(0, 0%, 96.1%, 0.8), hsl(0, 0%, 14.9%, 0.8));\n  --seki-button-secondary-hover-text: var(--seki-secondary-foreground);\n  --seki-button-secondary-hover-border: transparent;\n\n  /* Button Variant: Outline */\n  --seki-button-outline-bg: transparent;\n  --seki-button-outline-text: var(--seki-foreground);\n  --seki-button-outline-border: var(--seki-input);\n  --seki-button-outline-hover-bg: var(--seki-accent);\n  --seki-button-outline-hover-text: var(--seki-accent-foreground);\n  --seki-button-outline-hover-border: var(--seki-input);\n\n  /* Button Variant: Ghost */\n  --seki-button-ghost-bg: transparent;\n  --seki-button-ghost-text: var(--seki-foreground);\n  --seki-button-ghost-border: transparent;\n  --seki-button-ghost-hover-bg: var(--seki-accent);\n  --seki-button-ghost-hover-text: var(--seki-accent-foreground);\n  --seki-button-ghost-hover-border: transparent;\n\n  /* Button Variant: Destructive */\n  --seki-button-destructive-bg: var(--seki-destructive);\n  --seki-button-destructive-text: var(--seki-destructive-foreground);\n  --seki-button-destructive-border: transparent;\n  --seki-button-destructive-hover-bg: hsl(0, 84.2%, 60.2%, 0.9);\n  --seki-button-destructive-hover-border: transparent;\n\n  /* Button Sizing: Small */\n  --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);\n  --seki-button-sm-padding-y: 0.375rem;\n  --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);\n  --seki-button-sm-height: 2.25rem; /* Updated from 2rem to match shadcn (36px) */\n\n  /* Button Sizing: Medium (default) */\n  --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);\n  --seki-button-md-padding-y: var(--seki-spacing-2, 0.5rem);\n  --seki-button-md-font-size: var(--seki-text-base, 1rem);\n  --seki-button-md-height: 2.5rem;\n\n  /* Button Sizing: Large */\n  --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */\n  --seki-button-lg-padding-y: 0.5rem;\n  --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */\n  --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */\n\n  /* Button Sizing: Icon-only (NEW - shadcn compatibility) */\n  --seki-button-icon-sm-size: 2rem; /* 32x32px square */\n  --seki-button-icon-size: 2.5rem; /* 40x40px square */\n  --seki-button-icon-lg-size: 3rem; /* 48x48px square */\n  --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */\n\n  /* Button Variant: Link (NEW - shadcn compatibility) */\n  --seki-button-link-bg: transparent;\n  --seki-button-link-text: var(--seki-primary);\n  --seki-button-link-border: transparent;\n  --seki-button-link-hover-bg: transparent;\n  --seki-button-link-hover-text: var(--seki-primary);\n  --seki-button-link-hover-border: transparent;\n\n  /* Button Common */\n  --seki-button-radius: var(--seki-radius-md, 0.375rem);\n  --seki-button-font-weight: var(--seki-font-medium, 500);\n  --seki-button-transition-duration: 150ms;\n  --seki-button-transition-timing: ease-in-out;\n  --seki-button-shadow: var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n  --seki-button-shadow-hover: var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n  --seki-button-disabled-opacity: 0.5;\n\n  /* Input Component Colors */\n  --seki-input-bg: var(--seki-background);\n  --seki-input-border: var(--seki-border);\n  --seki-input-text: var(--seki-foreground);\n  --seki-input-placeholder: var(--seki-muted-foreground);\n  --seki-input-ring: var(--seki-ring);\n  --seki-input-invalid-border: var(--seki-destructive);\n  --seki-input-invalid-ring: var(--seki-destructive);\n  --seki-input-disabled-opacity: 0.5;\n  --seki-input-radius: var(--seki-radius-md);\n  --seki-input-ring-offset: 2px;\n\n  /* Select Component Colors */\n  --seki-select-trigger-bg: var(--seki-background);\n  --seki-select-trigger-border: 1px solid var(--seki-border);\n  --seki-select-trigger-bg-hover: var(--seki-muted);\n  --seki-select-trigger-radius: var(--seki-radius-md);\n  --seki-select-trigger-min-height: 2.5rem;\n  --seki-select-trigger-padding: 0.5rem 0.75rem;\n  --seki-select-trigger-gap: 0.5rem;\n\n  /* Select Content/Dropdown */\n  --seki-select-content-bg: var(--seki-popover);\n  --seki-select-content-border: 1px solid var(--seki-border);\n  --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n  --seki-select-content-radius: var(--seki-radius-md);\n  --seki-select-content-padding: 0.5rem 0;\n\n  /* Select Option */\n  --seki-select-option-padding: 0.5rem 0.75rem;\n  --seki-select-option-gap: 0.5rem;\n  --seki-select-option-radius: var(--seki-radius-sm);\n  --seki-select-option-bg-hover: var(--seki-muted);\n  --seki-select-option-bg-selected: var(--seki-muted);\n\n  /* Select Group */\n  --seki-select-group-label-padding: 0.5rem 0.75rem;\n  --seki-select-group-label-font-size: var(--seki-font-size-xs);\n  --seki-select-group-label-font-weight: var(--seki-font-semibold);\n  --seki-select-group-label-color: var(--seki-muted-foreground);\n  --seki-select-group-separator: 1px solid var(--seki-border);\n}\n\n/**\n * SekiUI Design Tokens - Spacing\n * 4px base unit, rem-based scale\n */\n\n:host {\n  /* Spacing Scale (4px base unit) */\n  --seki-spacing-0: 0;\n  --seki-spacing-0-5: 0.125rem;  /* 2px */\n  --seki-spacing-1: 0.25rem;     /* 4px */\n  --seki-spacing-1-5: 0.375rem;  /* 6px */\n  --seki-spacing-2: 0.5rem;      /* 8px */\n  --seki-spacing-2-5: 0.625rem;  /* 10px */\n  --seki-spacing-3: 0.75rem;     /* 12px */\n  --seki-spacing-3-5: 0.875rem;  /* 14px */\n  --seki-spacing-4: 1rem;        /* 16px */\n  --seki-spacing-5: 1.25rem;     /* 20px */\n  --seki-spacing-6: 1.5rem;      /* 24px */\n  --seki-spacing-8: 2rem;        /* 32px */\n  --seki-spacing-10: 2.5rem;     /* 40px */\n  --seki-spacing-12: 3rem;       /* 48px */\n  --seki-spacing-16: 4rem;       /* 64px */\n  --seki-spacing-20: 5rem;       /* 80px */\n  --seki-spacing-24: 6rem;       /* 96px */\n\n  /* Input Component Tokens */\n  --seki-input-height-sm: 2rem;       /* 32px */\n  --seki-input-height-md: 2.5rem;     /* 40px - default */\n  --seki-input-height-lg: 3rem;       /* 48px */\n  --seki-input-padding-x: 0.75rem;    /* 12px */\n  --seki-input-padding-y: 0.5rem;     /* 8px */\n  --seki-input-font-size: 0.875rem;   /* 14px */\n  --seki-input-ring-offset: 2px;\n}\n\n/**\n * SekiUI Design Tokens - Shadows\n * Subtle elevation system\n */\n\n:host {\n  /* Shadow Levels */\n  --seki-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --seki-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --seki-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n}\n\n/**\n * SekiUI Design Tokens - Typography\n * System font stacks, sizes, weights, line heights\n */\n\n:host {\n  /* Font Families */\n  --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;\n  --seki-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n\n  /* Font Sizes (rem-based) */\n  --seki-text-xs: 0.75rem;    /* 12px */\n  --seki-text-sm: 0.875rem;   /* 14px */\n  --seki-text-base: 1rem;     /* 16px */\n  --seki-text-lg: 1.125rem;   /* 18px */\n  --seki-text-xl: 1.25rem;    /* 20px */\n  --seki-text-2xl: 1.5rem;    /* 24px */\n  --seki-text-3xl: 1.875rem;  /* 30px */\n  --seki-text-4xl: 2.25rem;   /* 36px */\n\n  /* Font Weights */\n  --seki-font-normal: 400;\n  --seki-font-medium: 500;\n  --seki-font-semibold: 600;\n  --seki-font-bold: 700;\n\n  /* Line Heights */\n  --seki-leading-none: 1;\n  --seki-leading-tight: 1.25;\n  --seki-leading-normal: 1.5;\n  --seki-leading-relaxed: 1.75;\n}\n\n/**\n * SekiUI Design Tokens - Border Radius\n * Four-level radius system\n */\n\n:host {\n  /* Border Radius Levels */\n  --seki-radius-sm: 0.25rem;   /* 4px */\n  --seki-radius-md: 0.375rem;  /* 6px */\n  --seki-radius-lg: 0.5rem;    /* 8px */\n  --seki-radius-xl: 1rem;      /* 16px */\n  --seki-radius-full: 9999px;  /* pills, dots, circular thumbs */\n}\n\n/**\n * SekiUI Design Tokens - Sidebar\n * Based on shadcn/ui sidebar component\n */\n\n/* =============================================================================\n   SIDEBAR TOKENS (Layer 3: Component-Specific)\n   ============================================================================= */\n\n:host {\n  /* Sidebar Sizing */\n  --seki-sidebar-width: 16rem;\n  --seki-sidebar-width-icon: 3rem;\n  --seki-sidebar-width-mobile: 18rem;\n\n  /* Sidebar Colors - Light Mode (shadcn/ui exact values) */\n  --seki-sidebar-background: light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));\n  --seki-sidebar-foreground: light-dark(hsl(240, 5.3%, 26.1%), hsl(240, 4.8%, 95.9%));\n  --seki-sidebar-primary: light-dark(hsl(240, 5.9%, 10%), hsl(0, 0%, 98%));\n  --seki-sidebar-primary-foreground: light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));\n  --seki-sidebar-accent: light-dark(hsl(240, 4.8%, 95.9%), hsl(240, 3.7%, 15.9%));\n  --seki-sidebar-accent-foreground: light-dark(hsl(240, 5.9%, 10%), hsl(240, 4.8%, 95.9%));\n  --seki-sidebar-border: light-dark(hsl(220, 13%, 91%), hsl(240, 3.7%, 15.9%));\n  --seki-sidebar-ring: hsl(217.2, 91.2%, 59.8%);\n  --seki-sidebar-muted-foreground: light-dark(hsl(240, 3.8%, 46.1%), hsl(240, 5%, 64.9%));\n\n  /* Menu Button Sizing */\n  --seki-sidebar-menu-button-height: 2rem;\n  --seki-sidebar-menu-button-height-lg: 3rem;\n  --seki-sidebar-menu-button-padding: 0.5rem;\n  --seki-sidebar-menu-button-gap: 0.5rem;\n  --seki-sidebar-menu-button-radius: var(--seki-radius-md, 0.375rem);\n\n  /* Menu Sub */\n  --seki-sidebar-menu-sub-padding-left: 1.75rem;\n  --seki-sidebar-menu-sub-border-width: 1px;\n\n  /* Group */\n  --seki-sidebar-group-padding: 0.5rem;\n  --seki-sidebar-group-label-height: 2rem;\n  --seki-sidebar-group-label-padding: 0.5rem;\n\n  /* Header/Footer */\n  --seki-sidebar-header-height: auto;\n  --seki-sidebar-footer-height: auto;\n  --seki-sidebar-header-padding: 0.5rem;\n  --seki-sidebar-footer-padding: 0.5rem;\n\n  /* Content */\n  --seki-sidebar-content-padding: 0.5rem;\n\n  /* Rail */\n  --seki-sidebar-rail-width: 1rem;\n\n  /* Transitions */\n  --seki-sidebar-transition-duration: 200ms;\n  --seki-sidebar-transition-timing: ease-in-out;\n\n  /* Mobile */\n  --seki-sidebar-mobile-breakpoint: 768px;\n  --seki-sidebar-overlay-bg: hsla(0, 0%, 0%, 0.8);\n}\n\n/**\n * SekiUI Design Tokens - Animations\n * Based on Radix UI animation patterns for shadcn/ui compatibility\n */\n\n:host {\n  /* Animation Durations */\n  --seki-animation-fast: 150ms;\n  --seki-animation-normal: 200ms;\n  --seki-animation-slow: 300ms;\n\n  /* Easing Functions (Radix UI defaults) */\n  --seki-ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --seki-ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --seki-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* Content Height Variable (for accordion-like animations) */\n  --seki-accordion-content-height: auto;\n}\n\n/* =============================================================================\n   FADE ANIMATIONS\n   ============================================================================= */\n\n@keyframes seki-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes seki-fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n\n/* =============================================================================\n   SCALE ANIMATIONS (Dialogs, Popovers, Dropdowns)\n   ============================================================================= */\n\n@keyframes seki-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes seki-scale-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n/* =============================================================================\n   SLIDE ANIMATIONS (Sheets, Sidebars, Drawers)\n   ============================================================================= */\n\n@keyframes seki-slide-in-from-top {\n  from { transform: translateY(-100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes seki-slide-out-to-top {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100%); }\n}\n\n@keyframes seki-slide-in-from-bottom {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes seki-slide-out-to-bottom {\n  from { transform: translateY(0); }\n  to { transform: translateY(100%); }\n}\n\n@keyframes seki-slide-in-from-left {\n  from { transform: translateX(-100%); }\n  to { transform: translateX(0); }\n}\n\n@keyframes seki-slide-out-to-left {\n  from { transform: translateX(0); }\n  to { transform: translateX(-100%); }\n}\n\n@keyframes seki-slide-in-from-right {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n@keyframes seki-slide-out-to-right {\n  from { transform: translateX(0); }\n  to { transform: translateX(100%); }\n}\n\n/* =============================================================================\n   ACCORDION ANIMATIONS\n   ============================================================================= */\n\n@keyframes seki-accordion-down {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n  to {\n    height: var(--seki-accordion-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes seki-accordion-up {\n  from {\n    height: var(--seki-accordion-content-height);\n    opacity: 1;\n  }\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n/* =============================================================================\n   ZOOM ANIMATIONS (Tooltips, Menus)\n   ============================================================================= */\n\n@keyframes seki-zoom-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes seki-zoom-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n}\n\n/* =============================================================================\n   SPIN ANIMATION (Loading indicators)\n   ============================================================================= */\n\n@keyframes seki-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* =============================================================================\n   PULSE ANIMATION (Skeleton loaders)\n   ============================================================================= */\n\n@keyframes seki-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n/* =============================================================================\n   BOUNCE ANIMATION (Attention-grabbing)\n   ============================================================================= */\n\n@keyframes seki-bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n  50% {\n    transform: translateY(0);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n}\n\n/* =============================================================================\n   COLLAPSIBLE ANIMATIONS\n   ============================================================================= */\n\n@keyframes seki-collapsible-open {\n  from {\n    height: 0;\n    overflow: hidden;\n  }\n  to {\n    height: var(--seki-collapsible-content-height, auto);\n  }\n}\n\n@keyframes seki-collapsible-close {\n  from {\n    height: var(--seki-collapsible-content-height, auto);\n  }\n  to {\n    height: 0;\n    overflow: hidden;\n  }\n}\n\n/* =============================================================================\n   TOAST/NOTIFICATION ANIMATIONS\n   ============================================================================= */\n\n@keyframes seki-toast-slide-in-right {\n  from {\n    transform: translateX(calc(100% + 1rem));\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes seki-toast-slide-out-right {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(calc(100% + 1rem));\n  }\n}\n\n@keyframes seki-toast-swipe-out {\n  from {\n    transform: translateX(var(--seki-toast-swipe-end-x, 0));\n  }\n  to {\n    transform: translateX(calc(100% + 1rem));\n  }\n}\n\n/* =============================================================================\n   UTILITY ANIMATION CLASSES\n   ============================================================================= */\n\n.seki-animate-fade-in {\n  animation: seki-fade-in var(--seki-animation-normal) var(--seki-ease-out);\n}\n\n.seki-animate-fade-out {\n  animation: seki-fade-out var(--seki-animation-normal) var(--seki-ease-in);\n}\n\n.seki-animate-scale-in {\n  animation: seki-scale-in var(--seki-animation-normal) var(--seki-ease-out);\n}\n\n.seki-animate-scale-out {\n  animation: seki-scale-out var(--seki-animation-normal) var(--seki-ease-in);\n}\n\n.seki-animate-spin {\n  animation: seki-spin 1s linear infinite;\n}\n\n.seki-animate-pulse {\n  animation: seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.seki-animate-bounce {\n  animation: seki-bounce 1s infinite;\n}\n\n/* =============================================================================\n   REDUCED MOTION SUPPORT\n   ============================================================================= */\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n/* Document-level theme switch. Components read it through the inherited\n   `color-scheme` property (see colors.css). src/global/theme.ts injects the\n   same rule at runtime, so this copy only matters for consumers who load the\n   global stylesheet without JavaScript. Keep both in sync. */\n[data-theme='dark'] {\n  color-scheme: dark;\n}\n\n[data-theme='light'] {\n  color-scheme: light;\n}\n\n\n:host {\n  display: block;\n}\n\n.field {\n  display: grid;\n  gap: var(--seki-field-spacing, 0.5rem);\n}\n\n/* Vertical orientation (default) */\n:host([data-orientation=\"vertical\"]) .field {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    \"label\"\n    \"control\"\n    \"description\"\n    \"error\";\n}\n\n/* Horizontal orientation */\n:host([data-orientation=\"horizontal\"]) .field {\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"label control\"\n    \"description description\"\n    \"error error\";\n  gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n  align-items: start;\n}\n\n:host([data-orientation=\"horizontal\"]) .field-label {\n  padding-top: 0.25rem; /* Align with input */\n}\n\n/* Responsive orientation - uses container queries */\n:host([data-orientation=\"responsive\"]) .field {\n  container-type: inline-size;\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    \"label\"\n    \"control\"\n    \"description\"\n    \"error\";\n}\n\n@container (min-width: 600px) {\n  :host([data-orientation=\"responsive\"]) .field {\n    grid-template-columns: auto 1fr;\n    grid-template-areas:\n      \"label control\"\n      \"description description\"\n      \"error error\";\n    gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n  }\n\n  :host([data-orientation=\"responsive\"]) .field-label {\n    padding-top: 0.25rem;\n  }\n}\n\n/* Grid areas */\n.field-label {\n  grid-area: label;\n}\n\n.field-control {\n  grid-area: control;\n}\n\n.field-description {\n  grid-area: description;\n}\n\n.field-error {\n  grid-area: error;\n}\n\n/* Hide empty slots */\n.field-label:empty,\n.field-description:empty,\n.field-error:empty {\n  display: none;\n}\n\n/* Invalid state styling */\n:host([data-invalid]) .field {\n  /* Visual indicator for invalid state (handled by individual components) */\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .field {\n    transition: none;\n  }\n}\n";
 const SekiField = class {
@@ -20,6 +195,23 @@ const SekiField = class {
          */
         this.invalid = false;
     }
+    onInvalidChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    connectedCallback() {
+        this.binding = new FieldDescriptionBinding(this.el, () => this.invalid);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        // Link the description and error text to the control (#358).
+        (_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();
+    }
     /**
      * Check if multiple interactive controls are present in the default slot
      * If true, apply role="group" for accessibility
@@ -38,9 +230,12 @@ const SekiField = class {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (index.h(index.Host, { key: '6d5c0dc39e92ad0783b6755035823a878ac95500', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, index.h("div", { key: '708937237bc63b11a1ba4746351810abb0f6904c', class: "field" }, index.h("div", { key: 'a077c2034ea590b714969c4ad6ebeddd6dfa9a28', class: "field-label" }, index.h("slot", { key: 'ba94a250be531af1be18a9d8ed9d0a145a5e49f0', name: "label" })), index.h("div", { key: '3a032748960267bd4f5919b44c4cd4d01a17fa00', class: "field-control" }, index.h("slot", { key: 'd5632dfb857dcfebe7f9b6f45354903561545be1' })), index.h("div", { key: '02f109075a54d838db01b7b760a8277911517cc2', class: "field-description" }, index.h("slot", { key: '553db4a5434be4277c2507f3af33ea940a8c04a4', name: "description" })), index.h("div", { key: '98941dfeac3b40136e39706595936829f1e94f6d', class: "field-error" }, index.h("slot", { key: 'ffd9f2c146073b12d302bfc026817bcb5b5405ef', name: "error" })))));
+        return (index.h(index.Host, { key: '444ca86afa6f79554b28259910c41b31fe66426b', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, index.h("div", { key: '952774c5752cd941b56fbf006133f7df4fba822a', class: "field" }, index.h("div", { key: '95dbbd3248ab7e2b866dd75b951fdcfa8cb1d77c', class: "field-label" }, index.h("slot", { key: 'efc5a0fcf0ea04812a104c007ca62d6dd794683a', name: "label" })), index.h("div", { key: '78579f8fac8e3b7964aa91a49682bb653d9199c8', class: "field-control" }, index.h("slot", { key: 'fd2333f7c09b98d9119ae9cb66a6619847ca026b', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })), index.h("div", { key: '17402cd9252added366d05b9e4eb51fad4098d88', class: "field-description" }, index.h("slot", { key: 'f7decd19103900466d38eaf90b53f79b23a4fc2a', name: "description", onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })), index.h("div", { key: '5e5c67b6ce1ccb9772c07f907d5ed7354deda22a', class: "field-error" }, index.h("slot", { key: 'ed5793a5c2a2c950ec009e5cda75d0a2826fbde1', name: "error", onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } })))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "invalid": ["onInvalidChange"]
+    }; }
 };
 SekiField.style = sekiFieldCss;

package/dist/cjs/seki-fieldset.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const SekiFieldset = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("fieldset", { key: 'a8dbcc839ed3bd9f0ab171ab7e144259e0e21bb6', disabled: this.disabled, class: "fieldset" }, index.h("slot", { key: '0ecb3a16e59e70f0c2ac7d8bcfaa43da1709c8ea', name: "legend" }), index.h("div", { key: '9cd636d991d0f984f0262cb9c9fcfc4c11319698', class: "fieldset-content" }, index.h("slot", { key: '658de18e7c5f1a19b422be729091c57f475888eb' }))));
+        return (index.h("fieldset", { key: '585d494005fbe79e54a5a7823a0904ca396d4910', disabled: this.disabled, class: "fieldset" }, index.h("slot", { key: '54f8949c4e082781d6cf9ff34c745cedb34269a2', name: "legend" }), index.h("div", { key: '310ef349628daaa64feecf4e366e522bc0d252a0', class: "fieldset-content" }, index.h("slot", { key: '65f973f69f1aabf76d956c143845887cca330d03' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-hover-card-trigger.cjs.entry.js CHANGED Viewed

@@ -116,7 +116,7 @@ const SekiHoverCardTrigger = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9462d58ce8e053ed887f31f1d7ab18741427cde8' }, index.h("span", { key: '5ea522dcfca85f250aef551f9528a455de3204ca', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, index.h("slot", { key: '0d89d77b3ff786f60c7a5fdc12dd052611b4727c' }))));
+        return (index.h(index.Host, { key: '32dae264e134487c7a81bcbc4cf2c4e02fbd2c3c' }, index.h("span", { key: 'b46dda7c7a42086d4f0abd1dced54b4160c55a21', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, index.h("slot", { key: '0d7667574dbb5aebe2bd824b5e68c79e477c9ad1' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-hover-card.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,8 @@
 'use strict';
 var index = require('./index-VnD8dsXW.js');
+var overlay = require('./overlay-Dy8TLF7-.js');
+require('./menu-navigation-oVu9oqtS.js');
 const sekiHoverCardCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host([data-theme='dark']){color-scheme:dark}:host([data-theme='light']){color-scheme:light}:host{--seki-background:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-muted:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-muted-foreground:light-dark(hsl(0, 0%, 42%), hsl(0, 0%, 63.9%));--seki-card:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-card-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-popover:light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 3.9%));--seki-popover-foreground:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 98%));--seki-border:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-input:light-dark(hsl(0, 0%, 89.8%), hsl(0, 0%, 14.9%));--seki-primary:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 9%));--seki-primary-tint:light-dark(hsl(0, 0%, 9%, 0.06), hsl(0, 0%, 98%, 0.1));--seki-primary-tint-foreground:var(--seki-foreground);--seki-secondary:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-secondary-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-accent:light-dark(hsl(0, 0%, 96.1%), hsl(0, 0%, 14.9%));--seki-accent-foreground:light-dark(hsl(0, 0%, 9%), hsl(0, 0%, 98%));--seki-destructive:light-dark(hsl(0, 84.2%, 60.2%), hsl(0, 62.8%, 30.6%));--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-destructive-bg:light-dark(hsl(0, 86%, 97%), rgba(239, 68, 68, 0.1));--seki-destructive-soft-foreground:light-dark(hsl(0, 63%, 31%), hsl(0, 91%, 71%));--seki-success:light-dark(hsl(142, 71%, 45%), hsl(142, 69%, 58%));--seki-success-foreground:light-dark(hsl(142, 64%, 24%), hsl(142, 69%, 58%));--seki-success-bg:light-dark(hsl(142, 76%, 97%), rgba(34, 197, 94, 0.1));--seki-warning:light-dark(hsl(38, 92%, 50%), hsl(43, 96%, 56%));--seki-warning-foreground:light-dark(hsl(21, 77%, 27%), hsl(43, 96%, 56%));--seki-warning-bg:light-dark(hsl(48, 96%, 96%), rgba(245, 158, 11, 0.1));--seki-info:light-dark(hsl(217, 91%, 60%), hsl(217, 92%, 68%));--seki-info-foreground:light-dark(hsl(224, 64%, 33%), hsl(217, 92%, 68%));--seki-info-bg:light-dark(hsl(214, 100%, 97%), rgba(59, 130, 246, 0.1));--seki-ring:light-dark(hsl(0, 0%, 3.9%), hsl(0, 0%, 83.1%));--seki-ring-shadow:hsl(0, 0%, 3.9%, 0.1);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:light-dark(var(--seki-neutral-400), var(--seki-neutral-600));--seki-border-default:var(--seki-border);--seki-border-emphasis:light-dark(var(--seki-neutral-300), var(--seki-neutral-700))}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:light-dark(hsl(0, 0%, 9%, 0.9), hsl(0, 0%, 98%, 0.9));--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:light-dark(hsl(0, 0%, 96.1%, 0.8), hsl(0, 0%, 14.9%, 0.8));--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);--seki-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;--seki-radius-full:9999px;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-foreground:light-dark(hsl(240, 5.3%, 26.1%), hsl(240, 4.8%, 95.9%));--seki-sidebar-primary:light-dark(hsl(240, 5.9%, 10%), hsl(0, 0%, 98%));--seki-sidebar-primary-foreground:light-dark(hsl(0, 0%, 98%), hsl(240, 5.9%, 10%));--seki-sidebar-accent:light-dark(hsl(240, 4.8%, 95.9%), hsl(240, 3.7%, 15.9%));--seki-sidebar-accent-foreground:light-dark(hsl(240, 5.9%, 10%), hsl(240, 4.8%, 95.9%));--seki-sidebar-border:light-dark(hsl(220, 13%, 91%), hsl(240, 3.7%, 15.9%));--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:light-dark(hsl(240, 3.8%, 46.1%), hsl(240, 5%, 64.9%));--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}[data-theme='dark']{color-scheme:dark}[data-theme='light']{color-scheme:light}:host{display:contents}.hover-card{display:contents}";
@@ -103,6 +105,19 @@ const SekiHoverCard = class {
                 this.closeTimer = null;
             }
         };
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new overlay.OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this.closeAndFocusTrigger();
+                }
+            },
+        });
     }
     componentWillLoad() {
         // `disabled` wins over a requested initial open state.
@@ -237,12 +252,8 @@ const SekiHoverCard = class {
     handleCancelClose() {
         this.cancelClose();
     }
-    // Listen for Escape key to close the hover card
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeAndFocusTrigger();
-        }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
     }
     componentDidLoad() {
         this.updateContext();
@@ -256,9 +267,10 @@ const SekiHoverCard = class {
         this.cancelClose();
         // Clean up scroll listener
         this.removeScrollListener();
+        this.layer.setActive(false);
     }
     render() {
-        return (index.h(index.Host, { key: '963edd7c2f5b74e79ae6046a7d99e3e541307382', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: '119ed497c413b30042e2fda8a4eb3e4a7938b55b', class: "hover-card" }, index.h("slot", { key: '8b27c6f348da84239f3fe8b14d90e532d81dafa8' }))));
+        return (index.h(index.Host, { key: '2c9f5dd4788bc39af9881cc5a4d4f4e400347e10', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: '0f8f5ed75e8049fd30df5a312e474cbf40d44e69', class: "hover-card" }, index.h("slot", { key: 'c5d4bf92063b24e49679e49837d11cc96a969f2f' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-input-addon.cjs.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const SekiInputAddon = class {
         this.size = 'md';
     }
     render() {
-        return (index.h(index.Host, { key: 'c7074cb973c31da3445e116e04659984da389a67' }, index.h("div", { key: '91947802b154c0fdea29752dfcb6d8895d60f071', class: `addon addon--${this.size}` }, index.h("slot", { key: '16c554ff314d8bf805022f009dfccb48d8a700b3' }))));
+        return (index.h(index.Host, { key: '675310be4b793bcabb26a9c7a91700c0f552aa0f' }, index.h("div", { key: '452965ce5b41eb9548a71457c1048e75e4008a41', class: `addon addon--${this.size}` }, index.h("slot", { key: '57e2f786b21ee1ca1288634fd6f337f5cc1bdf3d' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-input-group.cjs.entry.js CHANGED Viewed

@@ -59,7 +59,7 @@ const SekiInputGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'fc2a9fb89ce4d35c26d71370e70449ae007876ab' }, index.h("div", { key: '892fda648fcc6ef0ca07be866eef38aedfc4beb3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, index.h("slot", { key: 'f6cb66ed84abcf5eb1113077f6c10cd727c89c73', onSlotchange: () => this.updateChildren() }))));
+        return (index.h(index.Host, { key: '5d80edff320e0cb88756c35b0ea0b46b8bfca5c7' }, index.h("div", { key: '6ebed869c80e654900d3aecb0f4e11deda8ac412', class: "input-group", role: "group", "aria-label": this.ariaLabel }, index.h("slot", { key: '71fcba34ca5c417a36c65b244f0869d04d825658', onSlotchange: () => this.updateChildren() }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-input-otp-group.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SekiInputOtpGroup = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '1f0aeb7a32007269564aeabd2485ce0c2243c0e5', class: "group", role: "group" }, index.h("slot", { key: 'eaf66792fbde8b08fda526f2cae06862a9e3ef97' })));
+        return (index.h("div", { key: 'b9707e74793434783585cf1b1d7536d27f22a214', class: "group", role: "group" }, index.h("slot", { key: 'a51afb10a72e3ba236f43e08198dcd0db6f16c6e' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-input-otp-separator.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const SekiInputOtpSeparator = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '0ba5502fc7bd9b31f971d60a97e3a2918347a9a1', role: "separator", "aria-orientation": "vertical", class: "separator" }, index.h("slot", { key: '110fa0a196358d6f0ffa09234ade3dda4733e4c7' }, index.h("span", { key: '5d20bcb216cea24e89ece238a2504507c4f3bedf', "aria-hidden": "true" }, "-"))));
+        return (index.h("div", { key: '7556636fca1784fbe295e9f73c65d5ebc194f418', role: "separator", "aria-orientation": "vertical", class: "separator" }, index.h("slot", { key: 'e8eee494b70af54552bff03c651d7fc2511f4a08' }, index.h("span", { key: '0b675997a21fd05d73799fef45930ad86af360a6', "aria-hidden": "true" }, "-"))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-input-otp-slot.cjs.entry.js CHANGED Viewed

@@ -70,7 +70,7 @@ const SekiInputOtpSlot = class {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (index.h("div", { key: '3f9f4d541c4c65699899c99be18e17f71ad05cc8', class: classes, "aria-hidden": "true", onClick: this.handleClick }, index.h("span", { key: '5a8b8d160ce2d6a98a9d2f6ed71a81456d29dfb5', class: "char" }, this.getDisplayChar()), this.isActive && index.h("span", { key: 'c1b2a645b973427facb8843d47a24b759dacf881', class: "caret" })));
+        return (index.h("div", { key: '89a73d5cff25eda795d9935c2ee3bfbc1b5f0f99', class: classes, "aria-hidden": "true", onClick: this.handleClick }, index.h("span", { key: '3145766a9ce5f6a680b1025eed1fa62a8fd02d09', class: "char" }, this.getDisplayChar()), this.isActive && index.h("span", { key: 'f73009e536e15654f5c7a758629e60bd19d46724', class: "caret" })));
     }
     get el() { return index.getElement(this); }
 };