@sekiui/elements 0.0.41 → 0.0.45

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */
@@ -364,7 +364,7 @@
 }
 
 /* Vertical orientation (default) */
-.field[data-orientation="vertical"] {
+:host([data-orientation="vertical"]) .field {
   grid-template-columns: 1fr;
   grid-template-areas:
     "label"
@@ -374,7 +374,7 @@
 }
 
 /* Horizontal orientation */
-.field[data-orientation="horizontal"] {
+:host([data-orientation="horizontal"]) .field {
   grid-template-columns: auto 1fr;
   grid-template-areas:
     "label control"
@@ -384,12 +384,12 @@
   align-items: start;
 }
 
-.field[data-orientation="horizontal"] .field-label {
+:host([data-orientation="horizontal"]) .field-label {
   padding-top: 0.25rem; /* Align with input */
 }
 
 /* Responsive orientation - uses container queries */
-.field[data-orientation="responsive"] {
+:host([data-orientation="responsive"]) .field {
   container-type: inline-size;
   grid-template-columns: 1fr;
   grid-template-areas:
@@ -400,7 +400,7 @@
 }
 
 @container (min-width: 600px) {
-  .field[data-orientation="responsive"] {
+  :host([data-orientation="responsive"]) .field {
     grid-template-columns: auto 1fr;
     grid-template-areas:
       "label control"
@@ -409,7 +409,7 @@
     gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);
   }
 
-  .field[data-orientation="responsive"] .field-label {
+  :host([data-orientation="responsive"]) .field-label {
     padding-top: 0.25rem;
   }
 }
@@ -439,7 +439,7 @@
 }
 
 /* Invalid state styling */
-.field[data-invalid] {
+:host([data-invalid]) .field {
   /* Visual indicator for invalid state (handled by individual components) */
 }
 

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -15,7 +15,7 @@
    PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)
    ============================================================================= */
 
-:root {
+:host {
   /* Neutral Scale (50-950) - shadcn/ui inspired */
   --seki-neutral-50: hsl(0, 0%, 98%);
   --seki-neutral-100: hsl(0, 0%, 96.1%);
@@ -55,7 +55,7 @@
    SEMANTIC TOKENS (Layer 2: shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Base */
   --seki-background: hsl(0, 0%, 100%);
   --seki-foreground: hsl(0, 0%, 3.9%);
@@ -107,7 +107,7 @@
 }
 
 /* Dark Mode Semantic Tokens */
-:root[data-theme='dark'] {
+:host([data-theme='dark']) {
   /* Base */
   --seki-background: hsl(0, 0%, 3.9%);
   --seki-foreground: hsl(0, 0%, 98%);
@@ -166,7 +166,7 @@
    COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)
    ============================================================================= */
 
-:root {
+:host {
   /* Button Variant: Primary (default in shadcn/ui) */
   --seki-button-primary-bg: var(--seki-primary);
   --seki-button-primary-text: var(--seki-primary-foreground);
@@ -264,7 +264,7 @@
  * 4px base unit, rem-based scale
  */
 
-:root {
+:host {
   /* Spacing Scale (4px base unit) */
   --seki-spacing-0: 0;
   --seki-spacing-0-5: 0.125rem;  /* 2px */
@@ -299,7 +299,7 @@
  * Subtle elevation system
  */
 
-:root {
+:host {
   /* 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);
@@ -311,7 +311,7 @@
  * System font stacks, sizes, weights, line heights
  */
 
-:root {
+:host {
   /* Font Families */
   --seki-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
@@ -344,7 +344,7 @@
  * Four-level radius system
  */
 
-:root {
+:host {
   /* Border Radius Levels */
   --seki-radius-sm: 0.25rem;   /* 4px */
   --seki-radius-md: 0.375rem;  /* 6px */

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

@@ -32,11 +32,19 @@ export class SekiInput {
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
+            // Only call setFormValue if internals is available (not in test environment)
+            if (this.internals && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(this.value);
+            }
             this.sekiInput.emit({ value: this.value, nativeEvent: event });
         };
         this.handleChange = (event) => {
             const target = event.target;
             this.value = target.value;
+            // Only call setFormValue if internals is available (not in test environment)
+            if (this.internals && typeof this.internals.setFormValue === 'function') {
+                this.internals.setFormValue(this.value);
+            }
             this.sekiChange.emit({ value: this.value, nativeEvent: event });
         };
         this.handleFocus = (event) => {
@@ -47,11 +55,31 @@ export class SekiInput {
             this.sekiBlur.emit({ value: target.value, nativeEvent: event });
         };
     }
+    // Form-associated lifecycle callbacks
+    formResetCallback() {
+        this.value = '';
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue('');
+        }
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(state);
+        }
+    }
+    componentWillLoad() {
+        // Set initial form value
+        if (this.internals && typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.value || '');
+        }
+    }
     render() {
-        return (h("input", { key: '95dc9689258f013b3eeda42f2d0df353cc3d0edc', 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 (h("input", { key: '064e47b431dd96aeaace5092ff3e7fe3ebf9b6c1', 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 is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-input.css"]
@@ -500,4 +528,5 @@ export class SekiInput {
                 }
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }