@sekiui/elements 0.0.82 → 0.0.84

package/dist/components/seki-popover-content.js

@@ -1,4 +1,5 @@
 import { p as proxyCustomElement, H, d as registerThemeSync, u as unregisterThemeSync, h, e as Host } from './p-CmYbI_bV.js';
+import { c as computeAnchoredPosition } from './p-DuJp0Kp6.js';
 
 const sekiPopoverContentCss = ":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{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--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:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.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:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}: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:hsl(0, 0%, 9%, 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:hsl(0, 0%, 96.1%, 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)}: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;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--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([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}: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}}:host{display:contents}:host(:not([data-state=\"open\"])){display:none}.popover-content{z-index:50;width:18rem;padding:1rem;background-color:var(--seki-background, hsl(0 0% 100%));border:1px solid var(--seki-border, hsl(240 5.9% 90%));border-radius:var(--seki-radius-md, 0.375rem);box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);outline:none;animation:seki-popover-in var(--seki-animation-fast, 150ms) ease-out}@keyframes seki-popover-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}:host([data-theme='dark']) .popover-content{background-color:var(--seki-background, hsl(240 10% 3.9%));border-color:var(--seki-border, hsl(240 3.7% 15.9%))}";
 
@@ -9,6 +10,14 @@ const SekiPopoverContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopoverC
             this.__registerHost();
         }
         this.__attachShadow();
+        this.onPopoverOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (this._isOpen) {
+                requestAnimationFrame(() => this.updatePosition());
+            }
+        };
         /**
          * Offset from trigger
          */
@@ -32,18 +41,10 @@ const SekiPopoverContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopoverC
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for open changes
-        const popover = this.el.closest('seki-popover');
-        if (popover) {
-            popover.addEventListener('sekiOpenChange', () => {
-                var _a;
-                const context = this.getContext();
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (this._isOpen) {
-                    requestAnimationFrame(() => this.updatePosition());
-                }
-            });
-        }
+        this.popoverEl = (_a = this.el.closest('seki-popover')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.popoverEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -58,63 +59,15 @@ const SekiPopoverContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopoverC
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const contentRect = this.contentRef.getBoundingClientRect();
-        const viewport = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
         const context = this.getContext();
         const side = (_b = (_a = this.side) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.side) !== null && _b !== void 0 ? _b : 'bottom';
         const align = (_d = (_c = this.align) !== null && _c !== void 0 ? _c : context === null || context === void 0 ? void 0 : context.align) !== null && _d !== void 0 ? _d : 'center';
-        const offset = this.sideOffset;
-        // Calculate base position
-        let top = 0;
-        let left = 0;
-        // Side positioning
-        switch (side) {
-            case 'top':
-                top = triggerRect.top - contentRect.height - offset;
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + offset;
-                break;
-            case 'left':
-                left = triggerRect.left - contentRect.width - offset;
-                break;
-            case 'right':
-                left = triggerRect.right + offset;
-                break;
-        }
-        // Align positioning
-        if (side === 'top' || side === 'bottom') {
-            switch (align) {
-                case 'start':
-                    left = triggerRect.left + this.alignOffset;
-                    break;
-                case 'center':
-                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    left = triggerRect.right - contentRect.width + this.alignOffset;
-                    break;
-            }
-        }
-        else {
-            switch (align) {
-                case 'start':
-                    top = triggerRect.top + this.alignOffset;
-                    break;
-                case 'center':
-                    top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + this.alignOffset;
-                    break;
-                case 'end':
-                    top = triggerRect.bottom - contentRect.height + this.alignOffset;
-                    break;
-            }
-        }
-        // Viewport clamping
-        const margin = 8;
-        left = Math.max(margin, Math.min(left, viewport.width - contentRect.width - margin));
-        top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
+        const { top, left } = computeAnchoredPosition(triggerRect, contentRect, {
+            side,
+            align,
+            sideOffset: this.sideOffset,
+            alignOffset: this.alignOffset,
+        });
         this._position = { top: `${top}px`, left: `${left}px` };
         this._actualSide = side;
     }
@@ -122,7 +75,9 @@ const SekiPopoverContent$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopoverC
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onPopoverOpenChange);
     }
     render() {
         if (!this._isOpen) {

package/dist/components/seki-popover-trigger.js

@@ -22,7 +22,7 @@ const SekiPopoverTrigger$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopoverT
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: '5319e1dae174db072fcf0bd62e136f527e12be88' }, h("span", { key: 'a60281f22833faeb0a830f2204828b50827e8b87', part: "trigger", class: "popover-trigger" }, h("slot", { key: '10e40070717c60fec8eebb12619330639275d41d' }))));
+        return (h(Host, { key: '65d97401bc0769ccf29613a90d250c1246976f96' }, h("span", { key: '5e36207444878ed24c8a20ee7f4d8f3203fdd8a7', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'a5d75e85123ce48feee9ed291e9cfab29859c34b' }))));
     }
     get el() { return this; }
     static get style() { return sekiPopoverTriggerCss; }

package/dist/components/seki-popover.js

@@ -107,8 +107,13 @@ const SekiPopover$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopover extends
     setupClickOutside() {
         if (!this.closeOnOutsideClick)
             return;
-        // Use setTimeout to avoid immediate close from the same click that opened it
-        setTimeout(() => {
+        // Clear any pending timeout/handler first so a rapid open→close→open cannot
+        // leave a leaked listener or double-schedule.
+        this.removeClickOutside();
+        // Defer registration so the same click that opened the popover doesn't
+        // immediately close it.
+        this.clickOutsideTimeout = setTimeout(() => {
+            this.clickOutsideTimeout = undefined;
             this.clickOutsideHandler = (e) => {
                 const path = e.composedPath();
                 if (!path.includes(this.el)) {
@@ -119,6 +124,11 @@ const SekiPopover$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopover extends
         }, 0);
     }
     removeClickOutside() {
+        // Cancel a still-pending registration so it can't fire after close/disconnect.
+        if (this.clickOutsideTimeout !== undefined) {
+            clearTimeout(this.clickOutsideTimeout);
+            this.clickOutsideTimeout = undefined;
+        }
         if (this.clickOutsideHandler) {
             document.removeEventListener('click', this.clickOutsideHandler, { capture: true });
             this.clickOutsideHandler = undefined;
@@ -153,7 +163,7 @@ const SekiPopover$1 = /*@__PURE__*/ proxyCustomElement(class SekiPopover extends
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '7b968558f37aa4a7afae25a7d4dccf819157884b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b92504499e50da2607d298f295c6cbe48f582577', part: "popover", class: "popover" }, h("slot", { key: 'a130d9a553ce561c9dc64a3be26d890ed8f8271b' }))));
+        return (h(Host, { key: '31974618c7383783980511b55823a55bfe2dae1e', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f6bc040f29ba0ae30783407550928d3733ec1113', part: "popover", class: "popover" }, h("slot", { key: 'ffbb6edae291c99b941642f81ff8c7862d59525a' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/seki-progress.js

@@ -66,7 +66,7 @@ const SekiProgress$1 = /*@__PURE__*/ proxyCustomElement(class SekiProgress exten
         const state = this.getState();
         const percentage = this.getPercentage();
         const isIndeterminate = state === 'indeterminate';
-        return (h("div", { key: '0191aa314387c1b184879b543477ea71eea94bb9', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: 'ad9c6549def836c9c259fd82c7cd5ea1b4b5df20', class: {
+        return (h("div", { key: '44a502b524adfa60846b3d3bf5bf3e9cb02a90d1', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '42daaa7585cbb00b0557797da677c85546939b5a', class: {
                 'seki-progress__indicator': true,
                 'seki-progress__indicator--indeterminate': isIndeterminate,
             }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {

package/dist/components/seki-radio-group-item.js

@@ -56,7 +56,7 @@ const SekiRadioGroupItem$1 = /*@__PURE__*/ proxyCustomElement(class SekiRadioGro
     }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '0b2ab32e27817990e2560eafa34c212c33bb4726', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '26beadb59f436fe3fd62d854e430f17665c9b295', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '06e0bd11080abd9ad21463c081754022a5d53da6', class: "indicator", part: "indicator" })))));
+        return (h(Host, { key: '32474c3a959d8dd5e3a03d9c754e3c5293d1f7b7', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '4e46f66134f531e61477ba07fdfee5ff6f997202', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '8b75b8b3c20c82fa490e5f456118d75ffd40fd90', class: "indicator", part: "indicator" })))));
     }
     get el() { return this; }
     static get style() { return sekiRadioGroupItemCss; }

package/dist/components/seki-radio-group.js

@@ -128,7 +128,7 @@ const SekiRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiRadioGroup e
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'e4d04a777cb2d6fa16df1aedf057126a2d4a36b8', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '4448c52431658200df9288b54b2f7c5129e44f7b' }), this.name && this.selectedValue && (h("input", { key: '2f456e66d4de15ff980eb642f176e3fb62bc7f29', type: "hidden", name: this.name, value: this.selectedValue }))));
+        return (h(Host, { key: '5ce2f8187be4b8c6b38cedce5650080eff0336b2', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '4051f3d8f08ebc679a867eff91e180a35b659eae' }), this.name && this.selectedValue && (h("input", { key: '21a6d632e39c05600d9c553bd1f2ac558f422f22', type: "hidden", name: this.name, value: this.selectedValue }))));
     }
     get el() { return this; }
     static get style() { return sekiRadioGroupCss; }

package/dist/components/seki-resizable-handle.js

@@ -158,13 +158,13 @@ const SekiResizableHandle$1 = /*@__PURE__*/ proxyCustomElement(class SekiResizab
     }
     render() {
         const isHorizontal = this._direction === 'horizontal';
-        return (h(Host, { key: 'cb5f4decb4f2fac72c380274ff2b98ec92891616' }, h("div", { key: '2e095395aa467fd9e7b5ab902fcc81bbd8ba80ff', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
+        return (h(Host, { key: '3602233af1a09633d52dc41b076716452b32240a' }, h("div", { key: 'e54ae0019acc4202d0bffc6f96a4f025ea0d9e7e', part: "handle", role: "separator", tabindex: this.disabled ? -1 : 0, "aria-valuenow": this.getAriaValue(), "aria-valuemin": 0, "aria-valuemax": 100, "aria-orientation": isHorizontal ? 'vertical' : 'horizontal', "aria-label": "Resize handle", class: {
                 'resizable-handle': true,
                 'resizable-handle--horizontal': isHorizontal,
                 'resizable-handle--vertical': !isHorizontal,
                 'resizable-handle--disabled': this.disabled,
                 'resizable-handle--dragging': this._isDragging,
-            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'd6e8f35a5943d4d80c107bab556e0fbd3a6b8145', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '1512111aea3914eacd697b71c59ba1dbe2556314', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: 'f83309597497caeabe5a970a4577f7730d8d4cd3', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '9d9668605c0855263fadda258cbe7ba3d7ab030f', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: 'eb0a48669ed9ef90c16941c7a59e8f024db49a99', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '785a354841ac8a9deb2af85bb96e312784a2d4e0', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '88998ec4045ec3002fc9e4380dfa60db588b789e', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'bbb9e2c07ea072e9f4c12c3f8c04e7c3cfee1172', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: '7376ca0927fead3181d0af8168a1281dcd0d20dc', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '22f2e6b9ffa7d35a4636774d1ebe78fa564df9df', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
+            }, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp }, this.withHandle && (h("div", { key: 'a4aaa33a41c36f93cf060bbf8294e7736d43be39', part: "grip", class: "resizable-handle__grip" }, h("svg", { key: '437252ff1fd788e541e7618ed55a4a858c5696db', class: "resizable-handle__grip-icon", viewBox: "0 0 6 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '500b72ba51d82c2f64377520e73ebf1005084d2d', cx: "1.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '96971e03e66e1d3a3492a84be646832c592d570c', cx: "4.5", cy: "2", r: "1", fill: "currentColor" }), h("circle", { key: '0cb829c89f7d52d4fd6f4b848fde280b35f095bf', cx: "1.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: '54dbc4b6c925a6db684efd82291897f1ea39ff01', cx: "4.5", cy: "6", r: "1", fill: "currentColor" }), h("circle", { key: 'be7b25f2d1d046eb75051a6fe61c831492b3d539', cx: "1.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'b7d3af0b09fb28defc25feb45420a3d87bf475cc', cx: "4.5", cy: "10", r: "1", fill: "currentColor" }), h("circle", { key: 'dd1510bb802d8c9b3de1f59dea4515a2c54ef269', cx: "1.5", cy: "14", r: "1", fill: "currentColor" }), h("circle", { key: '308e1efb992f81d519a1e7fa1ccbd95ab2bfa393', cx: "4.5", cy: "14", r: "1", fill: "currentColor" })))))));
     }
     get el() { return this; }
     static get style() { return sekiResizableHandleCss; }

package/dist/components/seki-resizable-panel-group.js

@@ -315,11 +315,11 @@ const SekiResizablePanelGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiRes
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'f33a7b0e0e2f1f8ca57cb86c4d152e22cac7e439' }, h("div", { key: 'fe7db4fcbd5ba76e9bb4f69be847bae08cbbc8e2', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '71bf3149ec0d18ebcbef51183c84fbc467e81e1e' }, h("div", { key: 'defdfa9d2c6df5ff4f56660abdf4b06a8fcc0e98', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: 'bec902b69980078e4bfc59b8e852df31f4f10f1e' }))));
+            } }, h("slot", { key: '0be341ba65f40a058e0947a77b6b2399813f718e' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/seki-resizable-panel.js

@@ -147,14 +147,14 @@ const SekiResizablePanel$1 = /*@__PURE__*/ proxyCustomElement(class SekiResizabl
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: '944c452b9992b1c78076c06c973e96adac983e48', style: {
+        return (h(Host, { key: 'c3e439cda1225fc4a1e16c8be83afa8d6316647c', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: 'fc56fa12fac5db2defcc62c3e50252bf47f298a1', part: "panel", role: "region", class: {
+            } }, h("div", { key: '6f3f143cafe7e69a69fb22b9c5179b8a62c826ab', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '07b96ce86a594dbc83c49a39c355c7de898b5f87' }))));
+            } }, h("slot", { key: '4085d9053af3462a0a050ff911bf73a9c1e5f15e' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/seki-scroll-area.js

@@ -148,7 +148,7 @@ const SekiScrollArea$1 = /*@__PURE__*/ proxyCustomElement(class SekiScrollArea e
     render() {
         const hasVerticalOverflow = this.scrollState.scrollHeight > this.scrollState.clientHeight;
         const hasHorizontalOverflow = this.scrollState.scrollWidth > this.scrollState.clientWidth;
-        return (h(Host, { key: 'def86be8b0d683ab38059dafe419a943aef4bc3e', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '822ae07cf076b30836dfbbff95f4a1d633f7427b', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '3af528d35870259becba2123016c3a85b4ceedee', class: "content" }, h("slot", { key: 'f61939ce0323bf089b1c6b7c58d29d5a567b7e71' }))), h("slot", { key: '001452bcd3ff2f061ee1ae97326ec961cfe94d58', name: "scrollbar" })));
+        return (h(Host, { key: 'b6856576a408c14295e8083fd4801e9b160c2dbf', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '51fcde9d949099bcdbeef40e4d982c6c04199b68', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '9b25bd4555ad6481b7fa2d6be88ea4456a0fd571', class: "content" }, h("slot", { key: '965dd88e318a5f19c4f9645b089b9f9465a071d8' }))), h("slot", { key: '8b4180062e625237314269e4a55bbe903745240b', name: "scrollbar" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/seki-scroll-bar.js

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, d as registerThemeSync, u as unregisterThemeSync, h, e as Host } from './p-CmYbI_bV.js';
+import { m as mirrorAncestorAttributes } from './p-BgtjDG0h.js';
 
-const sekiScrollBarCss = ":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{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--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:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.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:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}: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:hsl(0, 0%, 9%, 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:hsl(0, 0%, 96.1%, 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)}: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;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--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([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}: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}}:host{display:block;position:absolute;z-index:1}:host([orientation=\"vertical\"]){top:0;right:0;width:12px;height:100%;padding:2px}:host([orientation=\"horizontal\"]){bottom:0;left:0;height:12px;width:100%;padding:2px}:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation=\"vertical\"]){height:calc(100% - 12px)}:host-context([data-has-vertical-overflow][data-has-horizontal-overflow]):host([orientation=\"horizontal\"]){width:calc(100% - 12px)}.scrollbar{position:relative;width:100%;height:100%;border-radius:var(--seki-radius-full, 9999px);background:transparent;transition:background 150ms ease}.scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 96.1%))}.thumb{position:absolute;border-radius:var(--seki-radius-full, 9999px);background:var(--seki-border, hsl(0, 0%, 89.8%));opacity:0.7;transition:opacity 150ms ease, background 150ms ease;cursor:pointer}[data-orientation=\"vertical\"] .thumb{width:100%;min-height:20px}[data-orientation=\"horizontal\"] .thumb{height:100%;min-width:20px}.thumb:hover,.thumb:active{background:var(--seki-neutral-400, hsl(0, 0%, 63.9%));opacity:1}:host([data-theme='dark']) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb:hover,:host([data-theme='dark']) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}:host([data-theme='dark']) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb:hover,:host([data-theme='dark']) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}@media (prefers-color-scheme: dark){:host(:not([data-theme=\"light\"])) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host(:not([data-theme=\"light\"])) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host(:not([data-theme=\"light\"])) .thumb:hover,:host(:not([data-theme=\"light\"])) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}}:host-context([data-state=\"hidden\"]){opacity:0;pointer-events:none;transition:opacity 200ms ease-out}:host-context([data-state=\"visible\"]){opacity:1;pointer-events:auto;transition:opacity 150ms ease-in}:host-context(:hover){opacity:1;pointer-events:auto}@media (prefers-reduced-motion: reduce){.scrollbar,.thumb,:host{transition:none}}";
+const sekiScrollBarCss = ":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{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--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:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.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:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}: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:hsl(0, 0%, 9%, 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:hsl(0, 0%, 96.1%, 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)}: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;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--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([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}: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}}:host{display:block;position:absolute;z-index:1}:host([orientation=\"vertical\"]){top:0;right:0;width:12px;height:100%;padding:2px}:host([orientation=\"horizontal\"]){bottom:0;left:0;height:12px;width:100%;padding:2px}:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation=\"vertical\"]){height:calc(100% - 12px)}:host([data-has-vertical-overflow][data-has-horizontal-overflow][orientation=\"horizontal\"]){width:calc(100% - 12px)}.scrollbar{position:relative;width:100%;height:100%;border-radius:var(--seki-radius-full, 9999px);background:transparent;transition:background 150ms ease}.scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 96.1%))}.thumb{position:absolute;border-radius:var(--seki-radius-full, 9999px);background:var(--seki-border, hsl(0, 0%, 89.8%));opacity:0.7;transition:opacity 150ms ease, background 150ms ease;cursor:pointer}[data-orientation=\"vertical\"] .thumb{width:100%;min-height:20px}[data-orientation=\"horizontal\"] .thumb{height:100%;min-width:20px}.thumb:hover,.thumb:active{background:var(--seki-neutral-400, hsl(0, 0%, 63.9%));opacity:1}:host([data-theme='dark']) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb:hover,:host([data-theme='dark']) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}:host([data-theme='dark']) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host([data-theme='dark']) .thumb:hover,:host([data-theme='dark']) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}@media (prefers-color-scheme: dark){:host(:not([data-theme=\"light\"])) .scrollbar:hover{background:var(--seki-muted, hsl(0, 0%, 14.9%))}:host(:not([data-theme=\"light\"])) .thumb{background:var(--seki-border, hsl(0, 0%, 14.9%))}:host(:not([data-theme=\"light\"])) .thumb:hover,:host(:not([data-theme=\"light\"])) .thumb:active{background:var(--seki-neutral-500, hsl(0, 0%, 45.1%))}}:host([data-state=\"hidden\"]){opacity:0;pointer-events:none;transition:opacity 200ms ease-out}:host([data-state=\"visible\"]){opacity:1;pointer-events:auto;transition:opacity 150ms ease-in}:host([data-parent-hover]){opacity:1;pointer-events:auto}@media (prefers-reduced-motion: reduce){.scrollbar,.thumb,:host{transition:none}}";
 
 const SekiScrollBar$1 = /*@__PURE__*/ proxyCustomElement(class SekiScrollBar extends H {
     constructor(registerHost) {
@@ -103,9 +104,10 @@ const SekiScrollBar$1 = /*@__PURE__*/ proxyCustomElement(class SekiScrollBar ext
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-scroll-area', ['data-state', 'data-has-vertical-overflow', 'data-has-horizontal-overflow'], { trackHover: true });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         unregisterThemeSync(this.el);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
@@ -113,6 +115,8 @@ const SekiScrollBar$1 = /*@__PURE__*/ proxyCustomElement(class SekiScrollBar ext
         document.removeEventListener('touchend', this.handleTouchEnd);
         (_a = this.scrollAreaRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiScroll', this.scrollHandler);
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.attrMirror) === null || _c === void 0 ? void 0 : _c.disconnect();
+        this.attrMirror = undefined;
     }
     updateFromContext() {
         const context = this.getContext();

package/dist/components/seki-select-group.js

@@ -21,7 +21,7 @@ const SekiSelectGroup$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectGroup
         unregisterThemeSync(this.el);
     }
     render() {
-        return (h(Host, { key: 'e351318be0e30d57db2ae560dbc7feb719ffeb9a' }, h("div", { key: 'a0974589692fa7a337011bfe7d25e64bbe5e872b', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '48d45cee86d3a0ef56cea3891691e682dd04e2c6', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '3cfd23915eb4a2d704975aef8749786645426079', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'dab4b40a32f9e23cbc94085a5d75162704fa01a8', name: "label" }, this.label)), h("div", { key: 'd3ac276b85ca1e2e5d9bc7c212620bcce6cafc35', class: "group-options" }, h("slot", { key: 'b7746d8cb39704b38b798a694a28f3ed42eab856' })))));
+        return (h(Host, { key: '7867d34d43e681de3888de3eeb2031924a43dd6f' }, h("div", { key: 'e3b8189016809b3c1efb046cff1a472d6d5c59da', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '24fb1871c80afdc7e0d3f656e95d11d40cbfc269', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '5219a007eb3abddea08b2ecb7d0b4c84985e50e9', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'ab8a8a1e12404c9c808020cc51bbb34d48eb7ecf', name: "label" }, this.label)), h("div", { key: '324e7941e25fb1f91542ad0c28f9753aba24f6e1', class: "group-options" }, h("slot", { key: '42069f7464d8cdd1b1c7fb868e8d4e2a24fae48f' })))));
     }
     get el() { return this; }
     static get style() { return sekiSelectGroupCss; }

package/dist/components/seki-select-option.js

@@ -14,9 +14,9 @@ const SekiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectOpti
         /** Whether the option is disabled */
         this.disabled = false;
         // ===========================
-        // State
+        // Lifecycle
         // ===========================
-        this.optionId = `option-${Math.random().toString(36).substr(2, 9)}`;
+        this.hasRegistered = false;
         // ===========================
         // Event Handlers
         // ===========================
@@ -49,21 +49,26 @@ const SekiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectOpti
         };
     }
     // ===========================
-    // Lifecycle
+    // State
     // ===========================
+    // Deterministic id so it matches the `option-${value}` reference that
+    // seki-select-trigger emits as aria-activedescendant. (Note: full
+    // cross-shadow IDREF resolution still requires the trigger and options to
+    // share a tree scope — see seki-select-trigger for the known limitation.)
+    get optionId() {
+        return `option-${this.value}`;
+    }
     componentDidLoad() {
-        var _a;
-        // Register this option with parent select
-        const selectContext = this.getSelectContext();
-        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
-            value: this.value,
-            label: displayLabel,
-            disabled: this.disabled,
-        });
+        this.registerWithParent();
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        // Re-register on reconnect (after a DOM move). componentDidLoad fires only
+        // once, so without this the option would stay unregistered after being moved.
+        // Parent registration is idempotent, so this never duplicates.
+        if (this.hasRegistered) {
+            this.registerWithParent();
+        }
     }
     disconnectedCallback() {
         unregisterThemeSync(this.el);
@@ -71,6 +76,17 @@ const SekiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectOpti
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
     }
+    registerWithParent() {
+        var _a;
+        const selectContext = this.getSelectContext();
+        const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
+            value: this.value,
+            label: displayLabel,
+            disabled: this.disabled,
+        });
+        this.hasRegistered = true;
+    }
     // ===========================
     // Helpers
     // ===========================
@@ -85,7 +101,7 @@ const SekiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class SekiSelectOpti
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '8ba7a9bd8c4423bdc87237421bfed49ed485de7f' }, h("div", { key: 'cdeedf3061b3de0a12a56faccd56121fbcd4c7e3', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '902d9c4caa962efa60eeb697a0595764ca82d822', class: "option-label" }, h("slot", { key: 'd15a6dfa001e33df302e17847aeb4b63ef2ca9fa' })), isSelected && (h("span", { key: '708d5a9eaea23837e6a75df3ae86ae484367b477', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: 'c170f9b1a743ce16aeee0ced9b3b67836c4e2677', name: "selected-indicator" }, h("svg", { key: '230c202c463fbf5912ab900595135e5df69fd6ee', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cad9198c5e438617c840b1e8e97db69e1b5a5a85', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '9d4d802e1b193bf95d139ceffd512756be470779' }, h("div", { key: '28df50bb268b156ebd469525ea24436e3c3004c2', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '7cf7de57d19d17e2ec48117da0e4315d47b5d8a0', class: "option-label" }, h("slot", { key: '4085971b6c43e6f5e60e3df35e71ead8b67ad14e' })), isSelected && (h("span", { key: '6fc629d0160e5099a7fb2c716a456df083c828ac', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '81e1a764e87689248b2830ef57fe4257905a6545', name: "selected-indicator" }, h("svg", { key: 'e465bc7c15d93ac9a5f457222462c331fff12ca3', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3e1f8d96113cf57df17b9090f5c926201b4e0c4d', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     get el() { return this; }
     static get style() { return sekiSelectOptionCss; }