@sekiui/elements 0.0.35 → 0.0.37

package/dist/cjs/seki-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dzrwTIbP.js');
+var index = require('./index-CQBxP9_b.js');
 
 const sekiInputCss = ":root{--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%)}:root{--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)}:root[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)}:root{--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)}:root{--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}:root{--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)}:root{--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}:root{--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);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:calc(var(--seki-input-font-size) * 0.875);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)}.input--lg{height:var(--seki-input-height-lg);font-size:calc(var(--seki-input-font-size) * 1.125);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}}";
 
@@ -58,7 +58,7 @@ const SekiInput = class {
         };
     }
     render() {
-        return (index.h("input", { key: 'cd99fbb418e453c5af869e9ec6d1f8abd2e17483', 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 }));
+        return (index.h("input", { key: '6850324b28178a320ee55533501fec32dd2c97d7', 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 }));
     }
 };
 SekiInput.style = sekiInputCss;

package/dist/cjs/seki-skeleton.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dzrwTIbP.js');
+var index = require('./index-CQBxP9_b.js');
 
 const sekiSkeletonCss = ":root{--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%)}:root{--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)}:root[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)}:root{--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)}:root{--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}:root{--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)}:root{--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}:root{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:inline-block}.skeleton{background-color:var(--seki-muted);border-radius:var(--seki-skeleton-radius, var(--seki-radius-md, 0.375rem));width:100%;height:100%;animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}";
 
@@ -17,7 +17,7 @@ const SekiSkeleton = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'bec517952ab40cb8ff0eeca29511a2589e1d952a', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
+        return (index.h("div", { key: '12cf6b0b060e26aa0b991890e2667139fa43b507', class: "skeleton", part: "skeleton", role: "status", "aria-busy": "true", "aria-label": this.ariaLabel || undefined }));
     }
 };
 SekiSkeleton.style = sekiSkeletonCss;

package/dist/cjs/seki-switch.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index.cjs.js');
-require('./index-dzrwTIbP.js');
+require('./index-CQBxP9_b.js');
 
 
 

package/dist/cjs/sekiui.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dzrwTIbP.js');
+var index = require('./index-CQBxP9_b.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-input.cjs",[[257,"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"]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[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"]]]]]], options);
+  return index.bootstrapLazy([["seki-button.cjs",[[257,"seki-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["seki-field.cjs",[[257,"seki-field",{"orientation":[1],"invalid":[4]}]]],["seki-field-description.cjs",[[257,"seki-field-description",{"id":[1],"componentId":[32],"getId":[64]}]]],["seki-field-error.cjs",[[257,"seki-field-error",{"id":[1],"visible":[4],"componentId":[32],"previousVisible":[32],"getId":[64],"setVisible":[64]},null,{"visible":["handleVisibleChange"]}]]],["seki-field-group.cjs",[[257,"seki-field-group",{"gap":[1]}]]],["seki-field-label.cjs",[[257,"seki-field-label",{"htmlFor":[1,"html-for"],"required":[4]}]]],["seki-field-legend.cjs",[[257,"seki-field-legend"]]],["seki-fieldset.cjs",[[257,"seki-fieldset",{"disabled":[4]}]]],["seki-input.cjs",[[257,"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"]}]]],["seki-skeleton.cjs",[[257,"seki-skeleton",{"ariaLabel":[1,"aria-label"]}]]],["seki-switch.cjs",[[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"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,13 @@
   "entries": [
     "components/switch/seki-switch.js",
     "components/button/seki-button.js",
+    "components/field/seki-field.js",
+    "components/field-description/seki-field-description.js",
+    "components/field-error/seki-field-error.js",
+    "components/field-group/seki-field-group.js",
+    "components/field-label/seki-field-label.js",
+    "components/field-legend/seki-field-legend.js",
+    "components/fieldset/seki-fieldset.js",
     "components/input/seki-input.js",
     "components/skeleton/seki-skeleton.js"
   ],

package/dist/collection/components/field/seki-field.css

@@ -0,0 +1,451 @@
+/**
+ * SekiUI Design Tokens - Index
+ * Aggregates all design token files into a single entry point
+ *
+ * Import this file to get access to all design tokens:
+ * @import '../tokens/index.css';
+ */
+
+/**
+ * SekiUI Design Tokens - Colors
+ * Based on shadcn/ui color system
+ */
+
+/* =============================================================================
+   PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
+   ============================================================================= */
+
+:root {
+  /* Neutral Scale (50-950) - shadcn/ui inspired */
+  --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%);
+
+  /* Primary/Accent Scale (50-950) */
+  --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%);
+
+  /* Semantic Color Primitives */
+  --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%);
+}
+
+/* =============================================================================
+   SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
+   ============================================================================= */
+
+:root {
+  /* Base */
+  --seki-background: hsl(0, 0%, 100%);
+  --seki-foreground: hsl(0, 0%, 3.9%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 96.1%);
+  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 100%);
+  --seki-card-foreground: hsl(0, 0%, 3.9%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 100%);
+  --seki-popover-foreground: hsl(0, 0%, 3.9%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 89.8%);
+  --seki-input: hsl(0, 0%, 89.8%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 9%);
+  --seki-primary-foreground: hsl(0, 0%, 98%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 96.1%);
+  --seki-secondary-foreground: hsl(0, 0%, 9%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 96.1%);
+  --seki-accent-foreground: hsl(0, 0%, 9%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 84.2%, 60.2%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 3.9%);
+
+  /* Legacy aliases for backward compatibility */
+  --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);
+}
+
+/* Dark Mode Semantic Tokens */
+:root[data-theme='dark'] {
+  /* Base */
+  --seki-background: hsl(0, 0%, 3.9%);
+  --seki-foreground: hsl(0, 0%, 98%);
+
+  /* Muted */
+  --seki-muted: hsl(0, 0%, 14.9%);
+  --seki-muted-foreground: hsl(0, 0%, 63.9%);
+
+  /* Card */
+  --seki-card: hsl(0, 0%, 3.9%);
+  --seki-card-foreground: hsl(0, 0%, 98%);
+
+  /* Popover */
+  --seki-popover: hsl(0, 0%, 3.9%);
+  --seki-popover-foreground: hsl(0, 0%, 98%);
+
+  /* Border */
+  --seki-border: hsl(0, 0%, 14.9%);
+  --seki-input: hsl(0, 0%, 14.9%);
+
+  /* Primary */
+  --seki-primary: hsl(0, 0%, 98%);
+  --seki-primary-foreground: hsl(0, 0%, 9%);
+
+  /* Secondary */
+  --seki-secondary: hsl(0, 0%, 14.9%);
+  --seki-secondary-foreground: hsl(0, 0%, 98%);
+
+  /* Accent */
+  --seki-accent: hsl(0, 0%, 14.9%);
+  --seki-accent-foreground: hsl(0, 0%, 98%);
+
+  /* Destructive */
+  --seki-destructive: hsl(0, 62.8%, 30.6%);
+  --seki-destructive-foreground: hsl(0, 0%, 98%);
+
+  /* Ring */
+  --seki-ring: hsl(0, 0%, 83.1%);
+
+  /* Legacy aliases for backward compatibility */
+  --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);
+
+  /* Button overrides for dark mode */
+  --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);
+  --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);
+}
+
+/* =============================================================================
+   COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
+   ============================================================================= */
+
+:root {
+  /* Button Variant: Primary (default in shadcn/ui) */
+  --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;
+
+  /* Button Variant: Secondary */
+  --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;
+
+  /* Button Variant: Outline */
+  --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);
+
+  /* Button Variant: Ghost */
+  --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;
+
+  /* Button Variant: Destructive */
+  --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;
+
+  /* Button Sizing: Small */
+  --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; /* Updated from 2rem to match shadcn (36px) */
+
+  /* Button Sizing: Medium (default) */
+  --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;
+
+  /* Button Sizing: Large */
+  --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */
+  --seki-button-lg-padding-y: 0.5rem;
+  --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */
+  --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */
+
+  /* Button Sizing: Icon-only (NEW - shadcn compatibility) */
+  --seki-button-icon-sm-size: 2rem; /* 32x32px square */
+  --seki-button-icon-size: 2.5rem; /* 40x40px square */
+  --seki-button-icon-lg-size: 3rem; /* 48x48px square */
+  --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */
+
+  /* Button Variant: Link (NEW - shadcn compatibility) */
+  --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;
+
+  /* Button Common */
+  --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;
+
+  /* Input Component Colors */
+  --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);
+}
+
+/**
+ * SekiUI Design Tokens - Spacing
+ * 4px base unit, rem-based scale
+ */
+
+:root {
+  /* Spacing Scale (4px base unit) */
+  --seki-spacing-0: 0;
+  --seki-spacing-0-5: 0.125rem;  /* 2px */
+  --seki-spacing-1: 0.25rem;     /* 4px */
+  --seki-spacing-1-5: 0.375rem;  /* 6px */
+  --seki-spacing-2: 0.5rem;      /* 8px */
+  --seki-spacing-2-5: 0.625rem;  /* 10px */
+  --seki-spacing-3: 0.75rem;     /* 12px */
+  --seki-spacing-3-5: 0.875rem;  /* 14px */
+  --seki-spacing-4: 1rem;        /* 16px */
+  --seki-spacing-5: 1.25rem;     /* 20px */
+  --seki-spacing-6: 1.5rem;      /* 24px */
+  --seki-spacing-8: 2rem;        /* 32px */
+  --seki-spacing-10: 2.5rem;     /* 40px */
+  --seki-spacing-12: 3rem;       /* 48px */
+  --seki-spacing-16: 4rem;       /* 64px */
+  --seki-spacing-20: 5rem;       /* 80px */
+  --seki-spacing-24: 6rem;       /* 96px */
+
+  /* Input Component Tokens */
+  --seki-input-height-sm: 2rem;       /* 32px */
+  --seki-input-height-md: 2.5rem;     /* 40px - default */
+  --seki-input-height-lg: 3rem;       /* 48px */
+  --seki-input-padding-x: 0.75rem;    /* 12px */
+  --seki-input-padding-y: 0.5rem;     /* 8px */
+  --seki-input-font-size: 0.875rem;   /* 14px */
+  --seki-input-ring-offset: 2px;
+}
+
+/**
+ * SekiUI Design Tokens - Shadows
+ * Subtle elevation system
+ */
+
+:root {
+  /* Shadow Levels */
+  --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);
+}
+
+/**
+ * SekiUI Design Tokens - Typography
+ * System font stacks, sizes, weights, line heights
+ */
+
+:root {
+  /* Font Families */
+  --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
+  --seki-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+  /* Font Sizes (rem-based) */
+  --seki-text-xs: 0.75rem;    /* 12px */
+  --seki-text-sm: 0.875rem;   /* 14px */
+  --seki-text-base: 1rem;     /* 16px */
+  --seki-text-lg: 1.125rem;   /* 18px */
+  --seki-text-xl: 1.25rem;    /* 20px */
+  --seki-text-2xl: 1.5rem;    /* 24px */
+  --seki-text-3xl: 1.875rem;  /* 30px */
+  --seki-text-4xl: 2.25rem;   /* 36px */
+
+  /* Font Weights */
+  --seki-font-normal: 400;
+  --seki-font-medium: 500;
+  --seki-font-semibold: 600;
+  --seki-font-bold: 700;
+
+  /* Line Heights */
+  --seki-leading-tight: 1.25;
+  --seki-leading-normal: 1.5;
+  --seki-leading-relaxed: 1.75;
+}
+
+/**
+ * SekiUI Design Tokens - Border Radius
+ * Four-level radius system
+ */
+
+:root {
+  /* Border Radius Levels */
+  --seki-radius-sm: 0.25rem;   /* 4px */
+  --seki-radius-md: 0.375rem;  /* 6px */
+  --seki-radius-lg: 0.5rem;    /* 8px */
+  --seki-radius-xl: 1rem;      /* 16px */
+}
+
+
+
+:host {
+  display: block;
+}
+
+.field {
+  display: grid;
+  gap: var(--seki-field-spacing, 0.5rem);
+}
+
+/* Vertical orientation (default) */
+.field[data-orientation="vertical"] {
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "label"
+    "control"
+    "description"
+    "error";
+}
+
+/* Horizontal orientation */
+.field[data-orientation="horizontal"] {
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "label control"
+    "description description"
+    "error error";
+  gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);
+  align-items: start;
+}
+
+.field[data-orientation="horizontal"] .field-label {
+  padding-top: 0.25rem; /* Align with input */
+}
+
+/* Responsive orientation - uses container queries */
+.field[data-orientation="responsive"] {
+  container-type: inline-size;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "label"
+    "control"
+    "description"
+    "error";
+}
+
+@container (min-width: 600px) {
+  .field[data-orientation="responsive"] {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "label control"
+      "description description"
+      "error error";
+    gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);
+  }
+
+  .field[data-orientation="responsive"] .field-label {
+    padding-top: 0.25rem;
+  }
+}
+
+/* Grid areas */
+.field-label {
+  grid-area: label;
+}
+
+.field-control {
+  grid-area: control;
+}
+
+.field-description {
+  grid-area: description;
+}
+
+.field-error {
+  grid-area: error;
+}
+
+/* Hide empty slots */
+.field-label:empty,
+.field-description:empty,
+.field-error:empty {
+  display: none;
+}
+
+/* Invalid state styling */
+.field[data-invalid] {
+  /* Visual indicator for invalid state (handled by individual components) */
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .field {
+    transition: none;
+  }
+}

package/dist/collection/components/field/seki-field.js

@@ -0,0 +1,94 @@
+import { h } from "@stencil/core";
+export class SekiField {
+    constructor() {
+        /**
+         * Layout orientation for the field
+         * - vertical: Label above control (default)
+         * - horizontal: Label beside control
+         * - responsive: Horizontal on wide screens, vertical on narrow
+         */
+        this.orientation = 'vertical';
+        /**
+         * Whether the field is in an invalid/error state
+         * Applies data-invalid attribute for styling
+         */
+        this.invalid = false;
+    }
+    /**
+     * Check if multiple interactive controls are present in the default slot
+     * If true, apply role="group" for accessibility
+     */
+    hasMultipleControls() {
+        const defaultSlot = this.el.querySelectorAll(':not([slot])');
+        // Count interactive elements (input, select, textarea, button, etc.)
+        const interactiveElements = Array.from(defaultSlot).filter(node => {
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return false;
+            const tagName = node.tagName.toLowerCase();
+            return ['input', 'select', 'textarea', 'button'].includes(tagName) ||
+                tagName.startsWith('seki-');
+        });
+        return interactiveElements.length > 1;
+    }
+    render() {
+        const hasMultiple = this.hasMultipleControls();
+        return (h("div", { key: '638972e4cb471e4992bb627fe0afe60c3e023722', class: "field", "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '11936b81935c45d94326ba5577b7c1061318912a', class: "field-label" }, h("slot", { key: '49d11484381ca7d492b521896f91fe12665af46d', name: "label" })), h("div", { key: 'f8107be8d181601965076a83fccea9a4567d717d', class: "field-control" }, h("slot", { key: '7be301cfabe2927be9dcb9096a60a304e05380e9' })), h("div", { key: 'af66725a2421a434b3cc4593e2da673ba27e9e87', class: "field-description" }, h("slot", { key: '01c118f9fd8c0a9270eaf3ddf6075801cc905bb0', name: "description" })), h("div", { key: '4616d0e03293b2892093150652559bc04c6b9bfd', class: "field-error" }, h("slot", { key: 'f055388203aa6fed357d3c4eae665fcc1aa0ca14', name: "error" }))));
+    }
+    static get is() { return "seki-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal' | 'responsive'",
+                    "resolved": "\"horizontal\" | \"responsive\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation for the field\n- vertical: Label above control (default)\n- horizontal: Label beside control\n- responsive: Horizontal on wide screens, vertical on narrow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is in an invalid/error state\nApplies data-invalid attribute for styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}