@sekiui/elements 0.0.57 → 0.0.59

package/dist/sekiui/{p-042ec460.entry.js → p-f1ffc3fa.entry.js}

@@ -1 +1 @@
-import{r as e,c as i,h as s}from"./p-Dfzpqq0a.js";const t=class{constructor(s){e(this,s),this.sekiInput=i(this,"sekiInput"),this.sekiChange=i(this,"sekiChange"),this.sekiFocus=i(this,"sekiFocus"),this.sekiBlur=i(this,"sekiBlur"),s.$hostElement$["s-ei"]?this.internals=s.$hostElement$["s-ei"]:(this.internals=s.$hostElement$.attachInternals(),s.$hostElement$["s-ei"]=this.internals),this.type="text",this.value="",this.disabled=!1,this.readonly=!1,this.required=!1,this.size="md",this.invalid=!1,this.handleInput=e=>{this.value=e.target.value,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value),this.sekiInput.emit({value:this.value,nativeEvent:e})},this.handleChange=e=>{this.value=e.target.value,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value),this.sekiChange.emit({value:this.value,nativeEvent:e})},this.handleFocus=e=>{this.sekiFocus.emit({nativeEvent:e})},this.handleBlur=e=>{this.sekiBlur.emit({value:e.target.value,nativeEvent:e})}}formResetCallback(){this.value="",this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(e)}componentWillLoad(){this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value||"")}render(){return s("input",{key:"a45cad3b7568ea245c39cbc972ff01afd601cf72",type:this.type,value:this.value,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,name:this.name,autocomplete:this.autocomplete,min:this.min,max:this.max,step:this.step,pattern:this.pattern,minlength:this.minlength,maxlength:this.maxlength,class:`input input--${this.size}${this.invalid?" input--invalid":""}`,"aria-label":this.ariaLabel,"aria-describedby":this.ariaDescribedby,"aria-invalid":this.invalid?"true":null,"aria-disabled":this.disabled?"true":null,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})}static get formAssociated(){return!0}};t.style=":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%)}: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-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{display:inline-block;width:100%}.input{box-sizing:border-box;width:100%;font-family:var(--seki-font-sans);font-size:var(--seki-input-font-size, var(--seki-font-size-base));font-weight:var(--seki-font-normal);line-height:var(--seki-leading-normal);border-radius:var(--seki-input-radius);border:1px solid var(--seki-input-border);background:var(--seki-input-bg);color:var(--seki-input-text);padding:var(--seki-input-padding-y) var(--seki-input-padding-x);transition:border-color 0.2s ease, box-shadow 0.2s ease}.input::placeholder{color:var(--seki-input-placeholder)}.input:focus-visible{outline:2px solid var(--seki-input-ring);outline-offset:var(--seki-input-ring-offset);border-color:var(--seki-input-ring)}.input:disabled{cursor:not-allowed;opacity:var(--seki-input-disabled-opacity)}.input:read-only{background:var(--seki-muted)}.input--invalid{border-color:var(--seki-input-invalid-border)}.input--invalid:focus-visible{outline-color:var(--seki-input-invalid-ring);border-color:var(--seki-input-invalid-border)}.input--sm{height:var(--seki-input-height-sm);font-size:var(--seki-font-size-sm);padding:calc(var(--seki-input-padding-y) * 0.75) calc(var(--seki-input-padding-x) * 0.875)}.input--md{height:var(--seki-input-height-md);font-size:var(--seki-font-size-base)}.input--lg{height:var(--seki-input-height-lg);font-size:var(--seki-font-size-lg);padding:calc(var(--seki-input-padding-y) * 1.25) calc(var(--seki-input-padding-x) * 1.125)}.input[type=\"file\"]::file-selector-button{border:0;background:transparent;font-size:var(--seki-input-font-size);font-weight:500;margin-right:0.75rem;cursor:pointer;color:var(--seki-input-text)}.input[type=\"file\"]::file-selector-button:hover{text-decoration:underline}@media (prefers-reduced-motion: reduce){.input{transition:none}}";export{t as seki_input}
+import{r as e,c as i,h as s}from"./p-DI_YjzRi.js";const t=class{constructor(s){e(this,s),this.sekiInput=i(this,"sekiInput"),this.sekiChange=i(this,"sekiChange"),this.sekiFocus=i(this,"sekiFocus"),this.sekiBlur=i(this,"sekiBlur"),s.$hostElement$["s-ei"]?this.internals=s.$hostElement$["s-ei"]:(this.internals=s.$hostElement$.attachInternals(),s.$hostElement$["s-ei"]=this.internals),this.type="text",this.value="",this.disabled=!1,this.readonly=!1,this.required=!1,this.size="md",this.invalid=!1,this.handleInput=e=>{this.value=e.target.value,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value),this.sekiInput.emit({value:this.value,nativeEvent:e})},this.handleChange=e=>{this.value=e.target.value,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value),this.sekiChange.emit({value:this.value,nativeEvent:e})},this.handleFocus=e=>{this.sekiFocus.emit({nativeEvent:e})},this.handleBlur=e=>{this.sekiBlur.emit({value:e.target.value,nativeEvent:e})}}formResetCallback(){this.value="",this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(e)}componentWillLoad(){this.internals&&"function"==typeof this.internals.setFormValue&&this.internals.setFormValue(this.value||"")}render(){return s("input",{key:"a45cad3b7568ea245c39cbc972ff01afd601cf72",type:this.type,value:this.value,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,name:this.name,autocomplete:this.autocomplete,min:this.min,max:this.max,step:this.step,pattern:this.pattern,minlength:this.minlength,maxlength:this.maxlength,class:`input input--${this.size}${this.invalid?" input--invalid":""}`,"aria-label":this.ariaLabel,"aria-describedby":this.ariaDescribedby,"aria-invalid":this.invalid?"true":null,"aria-disabled":this.disabled?"true":null,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})}static get formAssociated(){return!0}};t.style=":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%)}: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-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{display:inline-block;width:100%}.input{box-sizing:border-box;width:100%;font-family:var(--seki-font-sans);font-size:var(--seki-input-font-size, var(--seki-font-size-base));font-weight:var(--seki-font-normal);line-height:var(--seki-leading-normal);border-radius:var(--seki-input-radius);border:1px solid var(--seki-input-border);background:var(--seki-input-bg);color:var(--seki-input-text);padding:var(--seki-input-padding-y) var(--seki-input-padding-x);transition:border-color 0.2s ease, box-shadow 0.2s ease}.input::placeholder{color:var(--seki-input-placeholder)}.input:focus-visible{outline:2px solid var(--seki-input-ring);outline-offset:var(--seki-input-ring-offset);border-color:var(--seki-input-ring)}.input:disabled{cursor:not-allowed;opacity:var(--seki-input-disabled-opacity)}.input:read-only{background:var(--seki-muted)}.input--invalid{border-color:var(--seki-input-invalid-border)}.input--invalid:focus-visible{outline-color:var(--seki-input-invalid-ring);border-color:var(--seki-input-invalid-border)}.input--sm{height:var(--seki-input-height-sm);font-size:var(--seki-font-size-sm);padding:calc(var(--seki-input-padding-y) * 0.75) calc(var(--seki-input-padding-x) * 0.875)}.input--md{height:var(--seki-input-height-md);font-size:var(--seki-font-size-base)}.input--lg{height:var(--seki-input-height-lg);font-size:var(--seki-font-size-lg);padding:calc(var(--seki-input-padding-y) * 1.25) calc(var(--seki-input-padding-x) * 1.125)}.input[type=\"file\"]::file-selector-button{border:0;background:transparent;font-size:var(--seki-input-font-size);font-weight:500;margin-right:0.75rem;cursor:pointer;color:var(--seki-input-text)}.input[type=\"file\"]::file-selector-button:hover{text-decoration:underline}@media (prefers-reduced-motion: reduce){.input{transition:none}}";export{t as seki_input}

package/dist/sekiui/{p-743fc6d9.entry.js → p-f863f36b.entry.js}

@@ -1 +1 @@
-import{r as e,h as n,H as i,a as s}from"./p-Dfzpqq0a.js";const r=class{constructor(n){e(this,n),this.orientation="vertical",this.invalid=!1}hasMultipleControls(){const e=this.el.querySelectorAll(":not([slot])");return Array.from(e).filter((e=>{if(e.nodeType!==Node.ELEMENT_NODE)return!1;const n=e.tagName.toLowerCase();return["input","select","textarea","button"].includes(n)||n.startsWith("seki-")})).length>1}render(){const e=this.hasMultipleControls();return n(i,{key:"4d4811ebe41e0ac3103d3c2e6057679556d9ea8f","data-orientation":this.orientation,"data-invalid":this.invalid?"":void 0,role:e?"group":void 0},n("div",{key:"de3078e15975b74d5daf8a898906eac941859a28",class:"field"},n("div",{key:"654fa59185f2e28a41ac17b41f3bccbeeddeaeeb",class:"field-label"},n("slot",{key:"0e5d795106bcbd6741894d384c2458bd5835c9f2",name:"label"})),n("div",{key:"9389fbfe76438bfc9de827608369463415cfe813",class:"field-control"},n("slot",{key:"df767c630d1c5d74a70e602106280af19359becd"})),n("div",{key:"9c1f633ffd2baddfc3a35218a2c6556bdc2408e3",class:"field-description"},n("slot",{key:"b25d944acc695145a7aac0df0e0ea9ba229c950d",name:"description"})),n("div",{key:"e620012a73cffa6e7e555d43f48c3f2dddf0e84b",class:"field-error"},n("slot",{key:"e09a83a71f180f74e981333f9516c6652e8e1751",name:"error"}))))}get el(){return s(this)}};r.style='/**\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\n/* =============================================================================\n   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)\n   ============================================================================= */\n\n:host {\n  /* Base */\n  --seki-background: hsl(0, 0%, 100%);\n  --seki-foreground: hsl(0, 0%, 3.9%);\n\n  /* Muted */\n  --seki-muted: hsl(0, 0%, 96.1%);\n  --seki-muted-foreground: hsl(0, 0%, 45.1%);\n\n  /* Card */\n  --seki-card: hsl(0, 0%, 100%);\n  --seki-card-foreground: hsl(0, 0%, 3.9%);\n\n  /* Popover */\n  --seki-popover: hsl(0, 0%, 100%);\n  --seki-popover-foreground: hsl(0, 0%, 3.9%);\n\n  /* Border */\n  --seki-border: hsl(0, 0%, 89.8%);\n  --seki-input: hsl(0, 0%, 89.8%);\n\n  /* Primary */\n  --seki-primary: hsl(0, 0%, 9%);\n  --seki-primary-foreground: hsl(0, 0%, 98%);\n\n  /* Secondary */\n  --seki-secondary: hsl(0, 0%, 96.1%);\n  --seki-secondary-foreground: hsl(0, 0%, 9%);\n\n  /* Accent */\n  --seki-accent: hsl(0, 0%, 96.1%);\n  --seki-accent-foreground: hsl(0, 0%, 9%);\n\n  /* Destructive */\n  --seki-destructive: hsl(0, 84.2%, 60.2%);\n  --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n  /* Ring */\n  --seki-ring: hsl(0, 0%, 3.9%);\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: var(--seki-neutral-400);\n  --seki-border-default: var(--seki-border);\n  --seki-border-emphasis: var(--seki-neutral-300);\n}\n\n/* Dark Mode Semantic Tokens */\n:host([data-theme=\'dark\']) {\n  /* Base */\n  --seki-background: hsl(0, 0%, 3.9%);\n  --seki-foreground: hsl(0, 0%, 98%);\n\n  /* Muted */\n  --seki-muted: hsl(0, 0%, 14.9%);\n  --seki-muted-foreground: hsl(0, 0%, 63.9%);\n\n  /* Card */\n  --seki-card: hsl(0, 0%, 3.9%);\n  --seki-card-foreground: hsl(0, 0%, 98%);\n\n  /* Popover */\n  --seki-popover: hsl(0, 0%, 3.9%);\n  --seki-popover-foreground: hsl(0, 0%, 98%);\n\n  /* Border */\n  --seki-border: hsl(0, 0%, 14.9%);\n  --seki-input: hsl(0, 0%, 14.9%);\n\n  /* Primary */\n  --seki-primary: hsl(0, 0%, 98%);\n  --seki-primary-foreground: hsl(0, 0%, 9%);\n\n  /* Secondary */\n  --seki-secondary: hsl(0, 0%, 14.9%);\n  --seki-secondary-foreground: hsl(0, 0%, 98%);\n\n  /* Accent */\n  --seki-accent: hsl(0, 0%, 14.9%);\n  --seki-accent-foreground: hsl(0, 0%, 98%);\n\n  /* Destructive */\n  --seki-destructive: hsl(0, 62.8%, 30.6%);\n  --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n  /* Ring */\n  --seki-ring: hsl(0, 0%, 83.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: var(--seki-neutral-600);\n  --seki-border-default: var(--seki-border);\n  --seki-border-emphasis: var(--seki-neutral-700);\n\n  /* Button overrides for dark mode */\n  --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);\n  --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);\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: hsl(0, 0%, 9%, 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: hsl(0, 0%, 96.1%, 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}\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-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}\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';export{r as seki_field}
+import{r as e,h as n,H as i,a as s}from"./p-DI_YjzRi.js";const r=class{constructor(n){e(this,n),this.orientation="vertical",this.invalid=!1}hasMultipleControls(){const e=this.el.querySelectorAll(":not([slot])");return Array.from(e).filter((e=>{if(e.nodeType!==Node.ELEMENT_NODE)return!1;const n=e.tagName.toLowerCase();return["input","select","textarea","button"].includes(n)||n.startsWith("seki-")})).length>1}render(){const e=this.hasMultipleControls();return n(i,{key:"4d4811ebe41e0ac3103d3c2e6057679556d9ea8f","data-orientation":this.orientation,"data-invalid":this.invalid?"":void 0,role:e?"group":void 0},n("div",{key:"de3078e15975b74d5daf8a898906eac941859a28",class:"field"},n("div",{key:"654fa59185f2e28a41ac17b41f3bccbeeddeaeeb",class:"field-label"},n("slot",{key:"0e5d795106bcbd6741894d384c2458bd5835c9f2",name:"label"})),n("div",{key:"9389fbfe76438bfc9de827608369463415cfe813",class:"field-control"},n("slot",{key:"df767c630d1c5d74a70e602106280af19359becd"})),n("div",{key:"9c1f633ffd2baddfc3a35218a2c6556bdc2408e3",class:"field-description"},n("slot",{key:"b25d944acc695145a7aac0df0e0ea9ba229c950d",name:"description"})),n("div",{key:"e620012a73cffa6e7e555d43f48c3f2dddf0e84b",class:"field-error"},n("slot",{key:"e09a83a71f180f74e981333f9516c6652e8e1751",name:"error"}))))}get el(){return s(this)}};r.style='/**\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\n/* =============================================================================\n   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)\n   ============================================================================= */\n\n:host {\n  /* Base */\n  --seki-background: hsl(0, 0%, 100%);\n  --seki-foreground: hsl(0, 0%, 3.9%);\n\n  /* Muted */\n  --seki-muted: hsl(0, 0%, 96.1%);\n  --seki-muted-foreground: hsl(0, 0%, 45.1%);\n\n  /* Card */\n  --seki-card: hsl(0, 0%, 100%);\n  --seki-card-foreground: hsl(0, 0%, 3.9%);\n\n  /* Popover */\n  --seki-popover: hsl(0, 0%, 100%);\n  --seki-popover-foreground: hsl(0, 0%, 3.9%);\n\n  /* Border */\n  --seki-border: hsl(0, 0%, 89.8%);\n  --seki-input: hsl(0, 0%, 89.8%);\n\n  /* Primary */\n  --seki-primary: hsl(0, 0%, 9%);\n  --seki-primary-foreground: hsl(0, 0%, 98%);\n\n  /* Secondary */\n  --seki-secondary: hsl(0, 0%, 96.1%);\n  --seki-secondary-foreground: hsl(0, 0%, 9%);\n\n  /* Accent */\n  --seki-accent: hsl(0, 0%, 96.1%);\n  --seki-accent-foreground: hsl(0, 0%, 9%);\n\n  /* Destructive */\n  --seki-destructive: hsl(0, 84.2%, 60.2%);\n  --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n  /* Ring */\n  --seki-ring: hsl(0, 0%, 3.9%);\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: var(--seki-neutral-400);\n  --seki-border-default: var(--seki-border);\n  --seki-border-emphasis: var(--seki-neutral-300);\n}\n\n/* Dark Mode Semantic Tokens */\n:host([data-theme=\'dark\']) {\n  /* Base */\n  --seki-background: hsl(0, 0%, 3.9%);\n  --seki-foreground: hsl(0, 0%, 98%);\n\n  /* Muted */\n  --seki-muted: hsl(0, 0%, 14.9%);\n  --seki-muted-foreground: hsl(0, 0%, 63.9%);\n\n  /* Card */\n  --seki-card: hsl(0, 0%, 3.9%);\n  --seki-card-foreground: hsl(0, 0%, 98%);\n\n  /* Popover */\n  --seki-popover: hsl(0, 0%, 3.9%);\n  --seki-popover-foreground: hsl(0, 0%, 98%);\n\n  /* Border */\n  --seki-border: hsl(0, 0%, 14.9%);\n  --seki-input: hsl(0, 0%, 14.9%);\n\n  /* Primary */\n  --seki-primary: hsl(0, 0%, 98%);\n  --seki-primary-foreground: hsl(0, 0%, 9%);\n\n  /* Secondary */\n  --seki-secondary: hsl(0, 0%, 14.9%);\n  --seki-secondary-foreground: hsl(0, 0%, 98%);\n\n  /* Accent */\n  --seki-accent: hsl(0, 0%, 14.9%);\n  --seki-accent-foreground: hsl(0, 0%, 98%);\n\n  /* Destructive */\n  --seki-destructive: hsl(0, 62.8%, 30.6%);\n  --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n  /* Ring */\n  --seki-ring: hsl(0, 0%, 83.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: var(--seki-neutral-600);\n  --seki-border-default: var(--seki-border);\n  --seki-border-emphasis: var(--seki-neutral-700);\n\n  /* Button overrides for dark mode */\n  --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);\n  --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);\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: hsl(0, 0%, 9%, 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: hsl(0, 0%, 96.1%, 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}\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-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}\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';export{r as seki_field}

package/dist/sekiui/sekiui.esm.js

@@ -1 +1 @@
-import{p as e,g as a,b as i}from"./p-Dfzpqq0a.js";export{s as setNonce}from"./p-Dfzpqq0a.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await a(),i([["p-b387a2a5",[[257,"seki-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-6164cd8a",[[257,"seki-card",{class:[1],dataTestid:[1,"data-testid"]}]]],["p-a1a71958",[[257,"seki-card-action",{class:[1]}]]],["p-c98b6d6a",[[257,"seki-card-content",{class:[1]}]]],["p-352bd295",[[257,"seki-card-description",{class:[1]}]]],["p-8d9a4878",[[257,"seki-card-footer",{alignment:[1],class:[1]}]]],["p-5bc0f5aa",[[257,"seki-card-header",{class:[1]}]]],["p-ff636955",[[257,"seki-card-title",{level:[1],class:[1]}]]],["p-743fc6d9",[[257,"seki-field",{orientation:[1],invalid:[4]}]]],["p-4636588f",[[257,"seki-field-description",{descriptorId:[1,"descriptor-id"],componentId:[32],getId:[64]}]]],["p-56f0d754",[[257,"seki-field-error",{errorId:[1,"error-id"],visible:[4],componentId:[32],previousVisible:[32],getId:[64],setVisible:[64]},null,{visible:["handleVisibleChange"]}]]],["p-d73cdb9a",[[257,"seki-field-group",{gap:[1]}]]],["p-635f4098",[[257,"seki-field-label",{htmlFor:[1,"html-for"],required:[4]}]]],["p-e7bb140c",[[257,"seki-field-legend"]]],["p-b365f5fb",[[257,"seki-fieldset",{disabled:[4]}]]],["p-042ec460",[[321,"seki-input",{type:[1],value:[1537],placeholder:[1],disabled:[4],readonly:[4],required:[4],name:[1],autocomplete:[1],min:[8],max:[8],step:[8],pattern:[1],minlength:[2],maxlength:[2],size:[1],invalid:[4],ariaLabel:[1,"aria-label"],ariaDescribedby:[1,"aria-describedby"]}]]],["p-ae227955",[[257,"seki-select",{value:[1032],defaultValue:[8,"default-value"],multiple:[4],placeholder:[1],disabled:[4],required:[4],open:[1028],defaultOpen:[4,"default-open"],name:[1],maxVisiblePills:[2,"max-visible-pills"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],placement:[1],maxHeight:[1,"max-height"],internalValue:[32],isOpen:[32],focusedOptionValue:[32],registeredOptions:[32],hasBeenActivated:[32],searchBuffer:[32],searchActive:[32],openDropdown:[64],closeDropdown:[64],focusTrigger:[64],clearSelection:[64],handleKeyboard:[64]},null,{value:["handleValuePropChange"],open:["handleOpenPropChange"],isOpen:["handleIsOpenChange"],internalValue:["handleInternalValueChange"]}]]],["p-eecc18f3",[[257,"seki-select-content",{forceUpdate:[32],scrollToOption:[64]}]]],["p-a71e0c55",[[257,"seki-select-group",{label:[1]}]]],["p-d96e770e",[[257,"seki-select-option",{value:[8],label:[1],disabled:[4]}]]],["p-44191aed",[[257,"seki-select-trigger",{forceUpdate:[32]}]]],["p-471b97a5",[[257,"seki-sidebar",{variant:[1],collapseMode:[1,"collapse-mode"],defaultOpen:[516,"default-open"],persistent:[516],mobileBreakpoint:[514,"mobile-breakpoint"],side:[1],persistenceKey:[1,"persistence-key"],onOpenChange:[16],isOpen:[32],isMobile:[32],open:[64],close:[64],toggle:[64],getState:[64],setState:[64]},[[0,"variant","onVariantChange"],[0,"collapseMode","onCollapseModeChange"]],{variant:["watchVariant"],collapseMode:["watchCollapseMode"]}]]],["p-40fb71d6",[[262,"seki-sidebar-content"]]],["p-9f2d95d7",[[262,"seki-sidebar-footer"]]],["p-b8590f4d",[[262,"seki-sidebar-group",{title:[1],collapsible:[516],defaultCollapsed:[516,"default-collapsed"],action:[16],isCollapsed:[32],isCollapsedState:[64],setCollapsed:[64]}]]],["p-e62dd89b",[[262,"seki-sidebar-header"]]],["p-9cb9cdfe",[[262,"seki-sidebar-menu"]]],["p-83e65cbe",[[262,"seki-sidebar-menu-item",{href:[1],target:[1],disabled:[516],isActive:[516,"is-active"],badge:[16],ariaLabel:[1,"aria-label"],ariaCurrentValue:[1,"aria-current-value"]}]]],["p-8b7bd061",[[262,"seki-sidebar-menu-sub",{label:[1],defaultCollapsed:[516,"default-collapsed"],isCollapsed:[32],isCollapsedState:[64],setCollapsed:[64]}]]],["p-01cfb4e7",[[257,"seki-sidebar-trigger",{ariaLabel:[1,"aria-label"],icon:[1],isOpen:[32]},[[16,"openChange","handleOpenChange"]]]]],["p-10c008fc",[[257,"seki-skeleton",{ariaLabel:[1,"aria-label"]}]]],["p-37c5f4d9",[[257,"seki-switch",{checked:[4],defaultChecked:[4,"default-checked"],disabled:[4],required:[4],name:[1],value:[1],ariaLabel:[1,"aria-label"],internalChecked:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-4423d621",[[257,"seki-tooltip",{delay:[2],side:[1],disabled:[4],offset:[2],isVisible:[32],currentPosition:[32],show:[64],hide:[64],updatePosition:[64]}]]]],e))));
+import{p as e,g as a,b as i}from"./p-DI_YjzRi.js";export{s as setNonce}from"./p-DI_YjzRi.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await a(),i([["p-ab9d1ba5",[[257,"seki-badge",{variant:[1],rounded:[4],number:[2],max:[2]}]]],["p-40ba3ad6",[[257,"seki-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-e6d5f56e",[[257,"seki-card",{class:[1],dataTestid:[1,"data-testid"]}]]],["p-cf552ff9",[[257,"seki-card-action",{class:[1]}]]],["p-84d47cab",[[257,"seki-card-content",{class:[1]}]]],["p-b64e7007",[[257,"seki-card-description",{class:[1]}]]],["p-c642ab55",[[257,"seki-card-footer",{alignment:[1],class:[1]}]]],["p-6a922121",[[257,"seki-card-header",{class:[1]}]]],["p-6f5bf5af",[[257,"seki-card-title",{level:[1],class:[1]}]]],["p-f863f36b",[[257,"seki-field",{orientation:[1],invalid:[4]}]]],["p-68b1fa1a",[[257,"seki-field-description",{descriptorId:[1,"descriptor-id"],componentId:[32],getId:[64]}]]],["p-27deb555",[[257,"seki-field-error",{errorId:[1,"error-id"],visible:[4],componentId:[32],previousVisible:[32],getId:[64],setVisible:[64]},null,{visible:["handleVisibleChange"]}]]],["p-1685e673",[[257,"seki-field-group",{gap:[1]}]]],["p-dfa2f8cd",[[257,"seki-field-label",{htmlFor:[1,"html-for"],required:[4]}]]],["p-4867d02d",[[257,"seki-field-legend"]]],["p-1480b41a",[[257,"seki-fieldset",{disabled:[4]}]]],["p-f1ffc3fa",[[321,"seki-input",{type:[1],value:[1537],placeholder:[1],disabled:[4],readonly:[4],required:[4],name:[1],autocomplete:[1],min:[8],max:[8],step:[8],pattern:[1],minlength:[2],maxlength:[2],size:[1],invalid:[4],ariaLabel:[1,"aria-label"],ariaDescribedby:[1,"aria-describedby"]}]]],["p-402a5db6",[[257,"seki-select",{value:[1032],defaultValue:[8,"default-value"],multiple:[4],placeholder:[1],disabled:[4],required:[4],open:[1028],defaultOpen:[4,"default-open"],name:[1],maxVisiblePills:[2,"max-visible-pills"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],placement:[1],maxHeight:[1,"max-height"],internalValue:[32],isOpen:[32],focusedOptionValue:[32],registeredOptions:[32],hasBeenActivated:[32],searchBuffer:[32],searchActive:[32],openDropdown:[64],closeDropdown:[64],focusTrigger:[64],clearSelection:[64],handleKeyboard:[64]},null,{value:["handleValuePropChange"],open:["handleOpenPropChange"],isOpen:["handleIsOpenChange"],internalValue:["handleInternalValueChange"]}]]],["p-b7f2b568",[[257,"seki-select-content",{forceUpdate:[32],scrollToOption:[64]}]]],["p-161be4d4",[[257,"seki-select-group",{label:[1]}]]],["p-587fd313",[[257,"seki-select-option",{value:[8],label:[1],disabled:[4]}]]],["p-c74bd925",[[257,"seki-select-trigger",{forceUpdate:[32]}]]],["p-0ca6b9f0",[[257,"seki-sidebar",{variant:[1],collapseMode:[1,"collapse-mode"],defaultOpen:[516,"default-open"],persistent:[516],mobileBreakpoint:[514,"mobile-breakpoint"],side:[1],persistenceKey:[1,"persistence-key"],onOpenChange:[16],isOpen:[32],isMobile:[32],open:[64],close:[64],toggle:[64],getState:[64],setState:[64]},[[0,"variant","onVariantChange"],[0,"collapseMode","onCollapseModeChange"]],{variant:["watchVariant"],collapseMode:["watchCollapseMode"]}]]],["p-9dcd07b2",[[262,"seki-sidebar-content"]]],["p-c83d94c4",[[262,"seki-sidebar-footer"]]],["p-37fa684c",[[262,"seki-sidebar-group",{title:[1],collapsible:[516],defaultCollapsed:[516,"default-collapsed"],action:[16],isCollapsed:[32],isCollapsedState:[64],setCollapsed:[64]}]]],["p-60ff3543",[[262,"seki-sidebar-header"]]],["p-b525d85a",[[262,"seki-sidebar-menu"]]],["p-26b629bc",[[262,"seki-sidebar-menu-item",{href:[1],target:[1],disabled:[516],isActive:[516,"is-active"],badge:[16],ariaLabel:[1,"aria-label"],ariaCurrentValue:[1,"aria-current-value"]}]]],["p-4b29dbda",[[262,"seki-sidebar-menu-sub",{label:[1],defaultCollapsed:[516,"default-collapsed"],isCollapsed:[32],isCollapsedState:[64],setCollapsed:[64]}]]],["p-0af1b81a",[[257,"seki-sidebar-trigger",{ariaLabel:[1,"aria-label"],icon:[1],isOpen:[32]},[[16,"openChange","handleOpenChange"]]]]],["p-58ab95eb",[[257,"seki-skeleton",{ariaLabel:[1,"aria-label"]}]]],["p-ce1bbe04",[[257,"seki-switch",{checked:[4],defaultChecked:[4,"default-checked"],disabled:[4],required:[4],name:[1],value:[1],ariaLabel:[1,"aria-label"],internalChecked:[32]},[[0,"keydown","handleKeyDown"]]]]],["p-d194caf1",[[257,"seki-tooltip",{delay:[2],side:[1],disabled:[4],offset:[2],isVisible:[32],currentPosition:[32],show:[64],hide:[64],updatePosition:[64]}]]]],e))));

package/dist/types/components/badge/seki-badge.d.ts

@@ -0,0 +1,43 @@
+import { BadgeVariant } from './seki-badge.interface';
+/**
+ * seki-badge: Presentational badge component for displaying small pieces of information
+ *
+ * @component Badge
+ * @example
+ * <seki-badge variant="default">Label</seki-badge>
+ * <seki-badge variant="secondary">
+ *   <span slot="icon">ℹ</span>
+ *   Secondary
+ * </seki-badge>
+ */
+export declare class SekiBadge {
+    el: HTMLElement;
+    /**
+     * Visual variant of the badge
+     * @default 'default'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Enable rounded pill styling
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Number to display in the badge
+     * When set, displays the number instead of text content
+     * @default undefined
+     */
+    number?: number;
+    /**
+     * Maximum limit for number badge
+     * If number exceeds this, shows "max+" instead
+     * Only used when number prop is set
+     * @default undefined
+     */
+    max?: number;
+    componentWillLoad(): void;
+    render(): any;
+    private renderNumberBadge;
+    private renderTextBadge;
+    private hasSlot;
+}

package/dist/types/components/badge/seki-badge.interface.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Badge Component Props Interface
+ * Defines all configurable properties for the seki-badge Web Component
+ */
+/**
+ * Variant types for badge styling
+ * - default: Standard badge with primary color
+ * - secondary: Muted appearance for secondary information
+ * - destructive: Warning/error state with red tones
+ * - outline: Border-only variant without background fill
+ */
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+/**
+ * Props interface for seki-badge component
+ *
+ * @example
+ * ```tsx
+ * const props: SekiBadgeProps = {
+ *   variant: 'default',
+ *   rounded: true,
+ *   className: 'custom-badge'
+ * }
+ * ```
+ *
+ * @example Number badge
+ * ```tsx
+ * const props: SekiBadgeProps = {
+ *   number: 21,
+ *   max: 20  // Shows "20+"
+ * }
+ * ```
+ */
+export interface SekiBadgeProps {
+    /**
+     * Visual variant of the badge
+     * @default 'default'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Enable rounded pill styling
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Additional CSS class names to apply
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * Number to display in the badge
+     * When set, displays the number instead of text content
+     * @default undefined
+     */
+    number?: number;
+    /**
+     * Maximum limit for number badge
+     * If number exceeds this, shows "max+" instead
+     * Only used when number prop is set
+     * @default undefined
+     */
+    max?: number;
+}
+/**
+ * Badge component interface for TypeScript consumers
+ * Extends HTMLElement with badge-specific properties
+ */
+export interface SekiBadgeElement extends HTMLElement {
+    /**
+     * Visual variant of the badge
+     */
+    variant?: BadgeVariant;
+    /**
+     * Enable rounded pill styling
+     */
+    rounded?: boolean;
+    /**
+     * Number to display in the badge
+     */
+    number?: number;
+    /**
+     * Maximum limit for number badge
+     */
+    max?: number;
+    /**
+     * Additional CSS classes (inherited from HTMLElement)
+     */
+    className: string;
+}

package/dist/types/components.d.ts

@@ -5,15 +5,48 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { BadgeVariant } from "./components/badge/seki-badge.interface";
 import { Event } from "./stencil-public-runtime";
 import { SelectChangeEventDetail, SelectOpenChangeEventDetail, SelectPlacement, SelectValidateEventDetail, SelectValue } from "./utils/select";
 import { CollapsedChangeDetail, CollapseModeChangeDetail, MobileStateChangeDetail, NavigateDetail, OpenChangeDetail, SidebarGroupProps, SidebarMenuItemProps, SidebarMenuSubProps, SidebarProps, SidebarState, SidebarTriggerProps, VariantChangeDetail } from "./components/sidebar/types";
 import { TooltipHideDetail, TooltipPositionedDetail, TooltipShowDetail, TooltipSide } from "./components/tooltip/seki-tooltip";
+export { BadgeVariant } from "./components/badge/seki-badge.interface";
 export { Event } from "./stencil-public-runtime";
 export { SelectChangeEventDetail, SelectOpenChangeEventDetail, SelectPlacement, SelectValidateEventDetail, SelectValue } from "./utils/select";
 export { CollapsedChangeDetail, CollapseModeChangeDetail, MobileStateChangeDetail, NavigateDetail, OpenChangeDetail, SidebarGroupProps, SidebarMenuItemProps, SidebarMenuSubProps, SidebarProps, SidebarState, SidebarTriggerProps, VariantChangeDetail } from "./components/sidebar/types";
 export { TooltipHideDetail, TooltipPositionedDetail, TooltipShowDetail, TooltipSide } from "./components/tooltip/seki-tooltip";
 export namespace Components {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface SekiBadge {
+        /**
+          * Maximum limit for number badge If number exceeds this, shows "max+" instead Only used when number prop is set
+          * @default undefined
+         */
+        "max"?: number;
+        /**
+          * Number to display in the badge When set, displays the number instead of text content
+          * @default undefined
+         */
+        "number"?: number;
+        /**
+          * Enable rounded pill styling
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * Visual variant of the badge
+          * @default 'default'
+         */
+        "variant"?: BadgeVariant;
+    }
     interface SekiButton {
         /**
           * Accessible label for screen readers. Required for icon-only buttons.
@@ -749,6 +782,21 @@ export interface SekiTooltipCustomEvent<T> extends CustomEvent<T> {
     target: HTMLSekiTooltipElement;
 }
 declare global {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface HTMLSekiBadgeElement extends Components.SekiBadge, HTMLStencilElement {
+    }
+    var HTMLSekiBadgeElement: {
+        prototype: HTMLSekiBadgeElement;
+        new (): HTMLSekiBadgeElement;
+    };
     interface HTMLSekiButtonElement extends Components.SekiButton, HTMLStencilElement {
     }
     var HTMLSekiButtonElement: {
@@ -1137,6 +1185,7 @@ declare global {
         new (): HTMLSekiTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "seki-badge": HTMLSekiBadgeElement;
         "seki-button": HTMLSekiButtonElement;
         "seki-card": HTMLSekiCardElement;
         "seki-card-action": HTMLSekiCardActionElement;
@@ -1173,6 +1222,37 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * seki-badge: Presentational badge component for displaying small pieces of information
+     * @component Badge
+     * @example <seki-badge variant="default">Label</seki-badge>
+     * <seki-badge variant="secondary">
+     *   <span slot="icon">ℹ</span>
+     *   Secondary
+     * </seki-badge>
+     */
+    interface SekiBadge {
+        /**
+          * Maximum limit for number badge If number exceeds this, shows "max+" instead Only used when number prop is set
+          * @default undefined
+         */
+        "max"?: number;
+        /**
+          * Number to display in the badge When set, displays the number instead of text content
+          * @default undefined
+         */
+        "number"?: number;
+        /**
+          * Enable rounded pill styling
+          * @default false
+         */
+        "rounded"?: boolean;
+        /**
+          * Visual variant of the badge
+          * @default 'default'
+         */
+        "variant"?: BadgeVariant;
+    }
     interface SekiButton {
         /**
           * Accessible label for screen readers. Required for icon-only buttons.
@@ -1859,6 +1939,7 @@ declare namespace LocalJSX {
         "side"?: TooltipSide;
     }
     interface IntrinsicElements {
+        "seki-badge": SekiBadge;
         "seki-button": SekiButton;
         "seki-card": SekiCard;
         "seki-card-action": SekiCardAction;
@@ -1898,6 +1979,16 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * seki-badge: Presentational badge component for displaying small pieces of information
+             * @component Badge
+             * @example <seki-badge variant="default">Label</seki-badge>
+             * <seki-badge variant="secondary">
+             *   <span slot="icon">ℹ</span>
+             *   Secondary
+             * </seki-badge>
+             */
+            "seki-badge": LocalJSX.SekiBadge & JSXBase.HTMLAttributes<HTMLSekiBadgeElement>;
             "seki-button": LocalJSX.SekiButton & JSXBase.HTMLAttributes<HTMLSekiButtonElement>;
             /**
              * Flexible container for organizing related content with optional header,

package/dist/types/services/media-query.d.ts

@@ -46,7 +46,7 @@ export declare class MediaQueryService {
      * @param type - Type of match: 'min' (mobile-first) or 'max' (desktop-first)
      * @param handler - Callback when breakpoint matches
      */
-    registerBreakpoint(id: string, breakpoint: keyof BreakpointConfig, type: ("min" | "max") | undefined, handler: (match: boolean) => void): void;
+    registerBreakpoint(id: string, breakpoint: keyof BreakpointConfig, type: "min" | "max" | undefined, handler: (match: boolean) => void): void;
     /**
      * Unregister a media query listener
      */

package/dist/types/stencil-public-runtime.d.ts

@@ -1,5 +1,6 @@
 type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
-type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -364,18 +365,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
-export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
 /**
  * Compose multiple mixin classes into a single constructor.
  * The resulting class has the combined instance types of all mixed-in classes.
  *
  * Example:
- * ```
- * import { Mixin, MixinFactory } from '@stencil/core';
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
  *
- * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
- * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
- * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
  *
  * class X extends Mixin(AWrap, BWrap, CWrap) {
  *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
@@ -383,9 +393,9 @@ export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBa
  * ```
  *
  * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
- * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
  */
-export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.0.57",
+  "version": "0.0.59",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -47,6 +47,7 @@
     "@typescript-eslint/eslint-plugin": "^8.46.0",
     "@typescript-eslint/parser": "^8.46.0",
     "axe-core": "^4.10.3",
+    "babel-plugin-istanbul": "^7.0.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "9.1.10",
@@ -54,10 +55,16 @@
     "jest-cli": "^29.7.0",
     "lit": "^3.3.1",
     "prettier": "^3.6.2",
-    "puppeteer": "^20.9.0",
-    "storybook": "^9.1.10"
+    "puppeteer": "^24.29.0",
+    "storybook": "^9.1.10",
+    "test-exclude": "^7.0.1"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4"
+  },
+  "overrides": {
+    "glob": ">=10.0.0",
+    "inflight": "npm:lru-cache@^10.0.0",
+    "test-exclude": "^7.0.1"
   }
 }