bromcom-ui-next 0.1.29 → 0.1.31

package/dist/components/bcm-input.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { t as tv } from './p-CEcVC0yX.js';
 import { c as classNames } from './p-BfTCfPZ1.js';
 import { g as generateId } from './p-IBjzkjef.js';
-import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './p-CUvT12BL.js';
+import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './p-nf_HKsGq.js';
 
 /**
  * Checks if a named slot has any content
@@ -11,8 +11,7 @@ import { s as setValidationMessages, g as getValidationMessage, d as defaultVali
  * @returns boolean indicating if the slot has any assigned nodes
  */
 const checkSlotContent = (element, slotName) => {
-    var _a;
-    const slot = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
+    const slot = element.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
     if (!slot)
         return false;
     const assignedNodes = slot.assignedNodes();
@@ -22,9 +21,11 @@ const checkSlotContent = (element, slotName) => {
 const inputCss = ".visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(92.8% .006 264.531deg);box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}input::placeholder,textarea::placeholder{color:oklch(70.7% .022 261.325deg);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}:host([full-width]){width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.leading-6{line-height:1.5rem}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}";
 
 const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.bcmInput = createEvent(this, "bcmInput", 1);
         this.bcmChange = createEvent(this, "bcmChange", 1);
@@ -32,153 +33,86 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
         this.bcmBlur = createEvent(this, "bcmBlur", 1);
         this.bcmKeyDown = createEvent(this, "bcmKeyDown", 1);
         this.bcmKeyUp = createEvent(this, "bcmKeyUp", 1);
-        this.isFocused = false;
-        this.isValid = true;
-        this.internalStatus = 'default';
-        this.isPasswordVisible = false;
-        /** Input value */
-        this.value = '';
-        /** Input id */
-        this._id = generateId('input');
-        /** Controls the input size */
-        this.size = 'medium';
-        /** Defines the input's status/state */
-        this.status = 'default';
-        /** Full width input */
-        this.fullWidth = false;
-        /** HTML input type */
-        this.type = 'text';
-        /** Whether the input is disabled */
-        this.disabled = false;
-        /** Whether the input is readonly */
-        this.readonly = false;
-        /** Whether the input is required */
-        this.required = false;
-        /** Whether to use native form validation
-         * If false, component will handle validation internally
-         */
-        this.useNativeValidation = true;
-        this.onInput = (event) => {
-            const input = event.target;
-            this.value = input.value;
-            this.bcmInput.emit(event);
-            this.validateInput();
-        };
-        this.onChange = (event) => {
-            this.bcmChange.emit(event);
-        };
-        this.onFocus = (event) => {
-            this.isFocused = true;
-            this.bcmFocus.emit(event);
-        };
-        this.onBlur = (event) => {
-            this.isFocused = false;
-            this.bcmBlur.emit(event);
-            this.validateInput();
-        };
-        this.onKeyDown = (event) => {
-            this.bcmKeyDown.emit(event);
-        };
-        this.onKeyUp = (event) => {
-            this.bcmKeyUp.emit(event);
-        };
-        this.styleClass = tv({
-            slots: {
-                base: [
-                    'bcm-input bcm-input__container',
-                    'bg-[--bcm-ui-color-background-base-default]',
-                    'text-[--bcm-ui-color-text-default]',
-                    'border border-solid rounded',
-                    'flex items-center justify-between',
-                    'transition-colors duration-200',
-                    'px-2',
-                ],
-                inputClass: [
-                    'input',
-                    'w-full flex-1',
-                    'border-0 outline-0 bg-transparent',
-                    'appearance-none text-ellipsis',
-                    'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
-                    'font-sans antialiased font-medium',
-                    'px-1',
-                    '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                ],
-            },
-            variants: {
-                size: {
-                    small: {
-                        base: '',
-                        inputClass: 'text-size-4 py-px',
-                    },
-                    medium: {
-                        base: '',
-                        inputClass: 'text-size-5 leading-6 py-1',
-                    },
-                    large: {
-                        base: '',
-                        inputClass: 'text-size-6 py-2',
-                    },
-                },
-                status: {
-                    default: {
-                        base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
-                    },
-                    error: {
-                        base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
-                    },
-                    success: {
-                        base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
-                    },
-                    warning: {
-                        base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
-                    },
-                    info: {
-                        base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
-                    },
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed',
-                    false: '',
-                },
-                focused: {
-                    true: {
-                        base: '',
-                    },
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                status: 'default',
-                fullWidth: false,
-                disabled: false,
-                focused: false,
-            },
-        }, {
-            twMerge: false,
-        });
-        this.togglePasswordVisibility = () => {
-            this.isPasswordVisible = !this.isPasswordVisible;
-            this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
-        };
-        this.PasswordToggleButton = () => {
-            var _a;
-            if (this.type !== 'password' || this.disabled || this.readonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0)
-                return null;
-            return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
-        };
-        this.iconSize = {
-            small: 14,
-            medium: 16,
-            large: 18,
-        }[this.size];
+        this.internals = this.attachInternals();
     }
+    get el() { return this; }
+    inputRef;
+    isFocused = false;
+    validationMessage;
+    isValid = true;
+    internalStatus = 'default';
+    internalErrorMessage;
+    isPasswordVisible = false;
+    /** Input value */
+    value = '';
+    /** Input placeholder text */
+    placeholder;
+    /** Input name */
+    name;
+    /** Input id */
+    _id = generateId('input');
+    /** Controls the input size */
+    size = 'medium';
+    /** Defines the input's status/state */
+    status = 'default';
+    /** Full width input */
+    fullWidth = false;
+    /** HTML input type */
+    type = 'text';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Whether the input is readonly */
+    readonly = false;
+    /** Whether the input is required */
+    required = false;
+    /** Input autocomplete attribute */
+    autocomplete;
+    /** Min length for text input */
+    minLength;
+    /** Max length for text input */
+    maxLength;
+    /** Min value for number input */
+    min;
+    /** Max value for number input */
+    max;
+    /** Step value for number input */
+    step;
+    /** Pattern for validation */
+    pattern;
+    /** Input label for accessibility */
+    label;
+    /** Error message to display */
+    errorMessage;
+    /** Caption text to display below input */
+    captionText;
+    /** ID of associated label element */
+    labelledby;
+    /** ID of associated caption/error text element */
+    describedby;
+    /** Prefix icon class name */
+    prefixIcon;
+    /** Suffix icon class name */
+    suffixIcon;
+    /** Whether to use native form validation
+     * If false, component will handle validation internally
+     */
+    useNativeValidation = true;
+    /** Custom validation function */
+    validator;
+    internals;
+    bcmInput;
+    bcmChange;
+    bcmFocus;
+    bcmBlur;
+    bcmKeyDown;
+    bcmKeyUp;
     handleValueChange(newValue) {
         if (this.inputRef) {
             this.inputRef.value = newValue;
         }
+        if (this.internals) {
+            this.internals.setFormValue(newValue ?? '');
+        }
     }
     watchStatus(newValue) {
         this.internalStatus = newValue;
@@ -187,31 +121,46 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
         this.internalErrorMessage = newValue;
     }
     async setFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        this.inputRef?.focus();
     }
     async setBlur() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
+        this.inputRef?.blur();
     }
     async select() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+        this.inputRef?.select();
+    }
+    /**
+     * When the parent <form> is reset, reset input state as well.
+     */
+    formResetCallback() {
+        this.value = '';
+        this.isValid = true;
+        this.validationMessage = '';
+        this.internalStatus = 'default';
+        this.internalErrorMessage = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+        }
+        if (this.internals) {
+            this.internals.setFormValue('');
+            this.internals.setValidity({});
+        }
     }
     /** Sets locale and messages for all inputs */
     async setLocale(locale, messages) {
         // Set messages and update validation immediately
         setValidationMessages(locale, messages);
-        // Mevcut validasyon mesajını güncelle
         if (!this.isValid) {
             this.validateInput();
         }
     }
     componentWillLoad() {
-        // I18n için default mesajları set et
         setValidationMessages('en', defaultValidationMessages);
         this.internalStatus = this.status;
         this.internalErrorMessage = this.errorMessage;
+        if (this.internals) {
+            this.internals.setFormValue(this.value ?? '');
+        }
     }
     validateInput() {
         if (!this.inputRef)
@@ -219,34 +168,47 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
         // Reset validation state
         this.isValid = true;
         this.validationMessage = '';
+        let validityFlags = {};
         const value = this.inputRef.value;
+        if (this.validator) {
+            const customError = this.validator(value);
+            if (customError) {
+                this.isValid = false;
+                this.validationMessage = customError;
+                validityFlags = { customError: true };
+            }
+        }
         // Required check
         if (this.required && !value) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('required');
             this.internalStatus = 'error';
             this.internalErrorMessage = this.validationMessage;
-            return;
+            validityFlags = { valueMissing: true };
         }
         // Minimum length check
         else if (this.minLength && value.length < this.minLength) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('minlength', { min: this.minLength });
+            validityFlags = { tooShort: true };
         }
         // Maximum length check
         else if (this.maxLength && value.length > this.maxLength) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });
+            validityFlags = { tooLong: true };
         }
         // Pattern check
         else if (this.pattern && !new RegExp(this.pattern).test(value)) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('pattern');
+            validityFlags = { patternMismatch: true };
         }
         // Email check
         else if (this.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
             this.isValid = false;
             this.validationMessage = getValidationMessage('email');
+            validityFlags = { typeMismatch: true };
         }
         // Number range check
         else if (this.type === 'number' && value) {
@@ -254,23 +216,149 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             if (this.min !== undefined && numValue < this.min) {
                 this.isValid = false;
                 this.validationMessage = getValidationMessage('min', { min: this.min });
+                validityFlags = { rangeUnderflow: true };
             }
             else if (this.max !== undefined && numValue > this.max) {
                 this.isValid = false;
                 this.validationMessage = getValidationMessage('max', { max: this.max });
+                validityFlags = { rangeOverflow: true };
             }
         }
         // Update component state
         this.internalStatus = this.isValid ? 'default' : 'error';
         this.internalErrorMessage = this.validationMessage;
+        if (this.internals) {
+            if (this.isValid) {
+                this.internals.setValidity({});
+            }
+            else {
+                this.internals.setValidity(validityFlags, this.validationMessage || '', this.el);
+            }
+        }
     }
+    onInput = (event) => {
+        const input = event.target;
+        this.value = input.value;
+        this.internals.setFormValue(this.value);
+        this.bcmInput.emit(event);
+        this.validateInput();
+    };
+    onChange = (event) => {
+        this.bcmChange.emit(event);
+    };
+    onFocus = (event) => {
+        this.isFocused = true;
+        this.bcmFocus.emit(event);
+    };
+    onBlur = (event) => {
+        this.isFocused = false;
+        this.bcmBlur.emit(event);
+        this.validateInput();
+    };
+    onKeyDown = (event) => {
+        this.bcmKeyDown.emit(event);
+    };
+    onKeyUp = (event) => {
+        this.bcmKeyUp.emit(event);
+    };
     hasSlotContent(slotName) {
         return checkSlotContent(this.el, slotName);
     }
+    styleClass = tv({
+        slots: {
+            base: [
+                'bcm-input bcm-input__container',
+                'bg-[--bcm-ui-color-background-base-default]',
+                'text-[--bcm-ui-color-text-default]',
+                'border border-solid rounded',
+                'flex items-center justify-between',
+                'transition-colors duration-200',
+                'px-2',
+            ],
+            inputClass: [
+                'input',
+                'w-full flex-1',
+                'border-0 outline-0 bg-transparent',
+                'appearance-none text-ellipsis',
+                'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
+                'font-sans antialiased font-medium',
+                'px-1',
+                '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+            ],
+        },
+        variants: {
+            size: {
+                small: {
+                    base: '',
+                    inputClass: 'text-size-4 py-px',
+                },
+                medium: {
+                    base: '',
+                    inputClass: 'text-size-5 leading-6 py-1',
+                },
+                large: {
+                    base: '',
+                    inputClass: 'text-size-6 py-2',
+                },
+            },
+            status: {
+                default: {
+                    base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
+                },
+                error: {
+                    base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
+                },
+                success: {
+                    base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
+                },
+                warning: {
+                    base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
+                },
+                info: {
+                    base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
+                },
+            },
+            fullWidth: {
+                true: 'full-width w-full',
+            },
+            disabled: {
+                true: 'disabled cursor-not-allowed',
+                false: '',
+            },
+            focused: {
+                true: {
+                    base: '',
+                },
+            },
+        },
+        defaultVariants: {
+            size: 'medium',
+            status: 'default',
+            fullWidth: false,
+            disabled: false,
+            focused: false,
+        },
+    }, {
+        twMerge: false,
+    });
     getDefaultIconForType() {
         return; // TODO: Will be implemented later
         // return defaultIcons[this.type as keyof typeof defaultIcons];
     }
+    togglePasswordVisibility = () => {
+        this.isPasswordVisible = !this.isPasswordVisible;
+        this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
+    };
+    PasswordToggleButton = () => {
+        if (this.type !== 'password' || this.disabled || this.readonly || this.value?.length === 0)
+            return null;
+        return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
+    };
+    iconSize = {
+        small: 14,
+        medium: 16,
+        large: 18,
+    }[this.size];
     render() {
         const inputId = this._id + '-input' || this.name;
         const { base, inputClass } = this.styleClass({
@@ -280,14 +368,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: 'bebead553f477cea82d7671334ee176bca22250c', class: "bcm-ui-element" }, this.label && (h("label", { key: 'a8ca2d85017729ca9ca8ca6761b02376cdee23ae', class: classNames('input-label font-medium', {
+        return (h("div", { key: '9805223519fc955cebe844bea4f2de29401abfb4', class: "bcm-ui-element" }, this.label && (h("label", { key: '6158cc9fc3b9ba147e82c3b43d91f72d0a16514c', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: '25b54c4cfd126b8e2450bb7396af3abbfd4906fb', name: "label" }, this.label), this.required && h("span", { key: 'b47523bcd4ebeb170c508bd7a967794934ad562b' }, "*"))), h("div", { key: '473ad9b656f95c69a350ebc3f92d6bdaba0a580a', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'd96b1d37f19332cd68bab5cd2e76c04b69ffbada', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'd920e309ca7b6db1d78f8bb1b90e963c09614e19', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: 'ca38db90eb5220ab82b8595f113b2536b85733ad', name: "prefix" }))), h("input", { key: 'bbb91c84909876c861a77129270b2bac422ed457', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'be57e9eb42b33dc1027c94a2ef1024feba440448', class: "flex items-center gap-2 px-2" }, h("slot", { key: 'e4b517de820468a179ad65fc496eb47736574845', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '99b7605f0348cc9a1f94c0603ec2a41ccf41d010', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '56c303f282913deb147682366037767c2e7f1942', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '1e1d07f60a73951f3f2b7ad2f832f40239e61aa0', name: "label" }, this.label), this.required && h("span", { key: '8762cc81df533949a71dd5d2e4f9e3c1bd2e7506' }, "*"))), h("div", { key: '3e3c3c64c71a0c5012bfb9f0e1648c6c78dddc73', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '96ee9768f43488f5bc2e69ad640e1fc61f7b942e', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'de7957d76081c5e3e55c61200262eb57435d082a', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: 'f0cd103119e0643d9dd8273ada85ba60b2b79977', name: "prefix" }))), h("input", { key: '386bbfe4619e2066a1958c8ca025ba9d46a81a8a', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '3bcf84cf63a3bd9c3edfcad0bb09e8110013e921', class: "flex items-center gap-2 px-2" }, h("slot", { key: '98a08cb02f2bcc8b4aabd80f42482bf1f610718b', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'c16b246514812f26b2abc34325c0f7ad8e9db429', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '85bd9fcd1f8319b5e95ce32663e61ef7b40cfa27', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
@@ -300,14 +388,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
                 'text-size-5': this.size === 'large',
             }) }, !this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText))));
     }
-    get el() { return this; }
+    static get formAssociated() { return true; }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "status": ["watchStatus"],
         "errorMessage": ["watchErrorMessage"]
     }; }
     static get style() { return inputCss; }
-}, [257, "bcm-input", {
+}, [321, "bcm-input", {
         "value": [1537],
         "placeholder": [1],
         "name": [1],