bromcom-ui-next 0.1.30 → 0.1.31

package/dist/cjs/bcm-checkbox.cjs.entry.js

@@ -1,186 +1,210 @@
 'use strict';
 
-var index = require('./index-CmYzUr-k.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.js');
 var generateId = require('./generate-id-CG_BkTJu.js');
+var baseChoiceControl = require('./base-choice-control-EmA4JRjR.js');
 
-const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.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)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.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)}.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}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
+const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}:host([full-width]){width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.visible{visibility:visible}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.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-normal{font-weight:400}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-error{color:var(--bcm-ui-color-text-error)}.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)}.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}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
 
-const Checkbox = class {
+const Checkbox = class extends baseChoiceControl.BaseChoiceControl {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.bcmCheckboxChange = index.createEvent(this, "bcmCheckboxChange", 1);
-        /**
-         * Unique ID for the component. Automatically generated if not specified.
-         */
-        this._id = generateId.generateId('bcm-checkbox');
-        /**
-         * Determines if the checkbox is in an indeterminate state.
-         * This is useful when some items in a group of checkboxes are selected and others are not.
-         */
-        this.indeterminate = false;
-        /**
-         * Size variant of the checkbox
-         */
-        this.size = 'medium';
-        /**
-         * Determines if the checkbox is checked
-         */
-        this.checked = false;
-        /**
-         * Indicates if the checkbox is in an error state.
-         * This affects the visual styling of the component.
-         */
-        this.error = false;
-        /**
-         * Determines if the checkbox is disabled
-         */
-        this.disabled = false;
-        /**
-         * Controls the position of the label relative to the checkbox
-         */
-        this.labelPosition = 'right';
-        /**
-         * Full width checkbox
-         */
-        this.fullWidth = false;
-        /**
-         * Handles change events on the checkbox
-         * Updates state and emits the change event
-         */
-        this.handleChange = () => {
-            if (this.disabled)
-                return;
-            if (this.inputElement) {
-                this.inputElement.indeterminate = false;
-                this.indeterminate = false;
-                this.internalChecked = !this.internalChecked;
-                this.inputElement.checked = this.internalChecked;
-                this.bcmCheckboxChange.emit({
-                    element: this.inputElement,
-                    checked: this.internalChecked,
-                });
-            }
-        };
-        /**
-         * Tailwind Variants definition for the component
-         * Configures styling based on component props
-         */
-        this.classes = tv.tv({
-            slots: {
-                container: 'flex items-center bcm-ui-element bcm-checkbox',
-                checkbox: [
-                    'flex items-center justify-center rounded-sm',
-                    'border border-solid border-[--border-color]',
-                    'bg-[--unchecked-color]',
-                    'transition-colors duration-200 ease-out',
-                    'peer-checked:bg-[--checked-color]',
-                    'peer-checked:border-[--checked-color]',
-                    'peer-indeterminate:bg-[--checked-color]',
-                    'peer-indeterminate:border-[--checked-color]',
-                    'hover:border-[--hover-border-color]',
-                    'hover:peer-checked:bg-[--hover-color]',
-                    'hover:peer-indeterminate:bg-[--hover-color]',
-                ],
-                iconContainer: 'flex items-center justify-center',
-                label: 'select-none text-color',
-                hiddenInput: 'absolute w-0 h-0 opacity-0 peer',
-            },
-            variants: {
-                size: {
-                    small: {
-                        container: 'gap-2',
-                        checkbox: 'size-3',
-                        iconContainer: 'size-2 text-size-2',
-                        label: 'text-size-4',
-                        hiddenInput: 'size-3',
-                    },
-                    medium: {
-                        container: 'gap-2.5',
-                        checkbox: 'size-4',
-                        iconContainer: 'size-[10px] text-size-3',
-                        label: 'text-size-5',
-                        hiddenInput: 'size-4',
-                    },
-                    large: {
-                        container: 'gap-3',
-                        checkbox: 'size-[18px]',
-                        iconContainer: 'size-4 text-size-4',
-                        label: 'text-size-6',
-                        hiddenInput: 'size-[18px]',
-                    },
-                },
-                disabled: {
-                    true: {
-                        container: 'cursor-not-allowed',
-                        checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',
-                        label: 'cursor-not-allowed text-color-disabled',
-                        iconContainer: 'text-color-disabled',
-                        hiddenInput: 'cursor-not-allowed',
-                    },
-                    false: {
-                        container: 'cursor-pointer',
-                        checkbox: 'cursor-pointer',
-                        label: 'cursor-pointer text-color',
-                        iconContainer: 'text-color-base',
-                        hiddenInput: 'cursor-pointer',
-                    },
-                },
-                labelPosition: {
-                    left: {
-                        container: 'flex-row-reverse',
-                    },
-                    right: {
-                        container: 'flex-row',
-                    },
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                checked: false,
-                disabled: false,
-                error: false,
-                labelPosition: 'right',
-            },
-        }, { twMerge: false });
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    get el() { return index.getElement(this); }
+    /** Form-associated internals (ElementInternals API) */
+    internals;
     /**
-     * Lifecycle method that runs before the component first renders.
-     * Initializes the internal checked state.
+     * Unique ID for the component. Automatically generated if not specified.
+     * Used to bind the visible label to the internal input.
      */
-    componentWillLoad() {
-        this.internalChecked = this.checked !== undefined ? this.checked : false;
-    }
+    _id = generateId.generateId('bcm-checkbox');
+    /** Visible label text (optional). You can also use the default slot. */
+    label;
     /**
-     * Lifecycle method that runs after the component has rendered.
-     * Updates the indeterminate state of the input element.
+     * Indeterminate (mixed) state.
+     * Useful when a group selection is partially selected.
      */
-    componentDidLoad() {
-        this.updateIndeterminateState();
-    }
+    indeterminate = false;
+    /** Size variant (affects control + typography). */
+    size = 'medium';
     /**
-     * Watches for changes to the checked prop and updates the internal state
-     * @param newValue The new checked value
+     * Visual error state.
+     * - In `silent` mode this can be managed internally.
+     * - In other modes you can set it externally as well.
      */
-    syncCheckedProp(newValue) {
-        if (newValue !== undefined) {
-            this.internalChecked = newValue;
-        }
-    }
+    error = false;
+    /** Helper / error caption (silent mode UI) */
+    caption;
+    /** Label position relative to the checkbox control. */
+    labelPosition = 'right';
+    /** Makes checkbox occupy full width (if your styles support it). */
+    fullWidth = false;
     /**
-     * Watches for changes to indeterminate and internalChecked states
-     * Updates the input element accordingly
+     * Mirror state used to keep the native input synced.
+     * `checked` is owned by BaseChoiceControl.
      */
-    updateIndeterminateState() {
-        if (this.inputElement) {
-            this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;
-            this.inputElement.checked = this.internalChecked;
+    internalChecked = false;
+    /** Gate for silent-mode UI */
+    touched = false;
+    /** Gate for silent-mode UI */
+    submitAttempted = false;
+    /** Fired whenever the checked state changes. */
+    bcmCheckboxChange;
+    /** Reference to the underlying native input. */
+    inputElement;
+    // --------------------------------------------------
+    // Lifecycle
+    // --------------------------------------------------
+    componentWillLoad() {
+        this.internalChecked = this.checked;
+        // don't show UI errors on initial render
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    componentDidLoad() {
+        this.syncNativeInput();
+        const form = this.internals?.form;
+        if (form) {
+            form.addEventListener('submit', this.onFormSubmit, true);
         }
     }
-    /**
-     * Returns the CSS custom properties based on component state
-     * @returns Object with CSS custom properties
-     */
+    disconnectedCallback() {
+        const form = this.internals?.form;
+        if (form) {
+            form.removeEventListener('submit', this.onFormSubmit, true);
+        }
+    }
+    onFormSubmit = () => {
+        this.submitAttempted = true;
+        this.updateFormValueAndValidity({ setUi: true });
+    };
+    formResetCallback() {
+        super.formResetCallback();
+        this.internalChecked = false;
+        this.indeterminate = false;
+        // reset gating
+        this.touched = false;
+        this.submitAttempted = false;
+        // reset UI
+        this.error = false;
+        this.caption = undefined;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    // --------------------------------------------------
+    // Watchers
+    // --------------------------------------------------
+    syncFromBase(newValue) {
+        this.internalChecked = newValue;
+        this.indeterminate = false;
+        this.syncNativeInput();
+    }
+    /** Keep native input in sync when indeterminate changes. */
+    onIndeterminateChange() {
+        this.syncNativeInput();
+    }
+    // --------------------------------------------------
+    // Native input syncing
+    // --------------------------------------------------
+    syncNativeInput() {
+        if (!this.inputElement)
+            return;
+        this.inputElement.checked = this.internalChecked;
+        this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;
+        this.inputElement.disabled = this.disabled;
+        // ✅ prevent native bubble in silent/none:
+        // only native mode applies native "required"
+        this.inputElement.required = this.validationMode === 'native' && this.required;
+    }
+    // --------------------------------------------------
+    // Form internals integration
+    // --------------------------------------------------
+    updateFormValueAndValidity(opts) {
+        const setUi = opts?.setUi ?? true;
+        if (!this.internals)
+            return;
+        // Disabled -> no value, no validity, no UI errors
+        if (this.disabled) {
+            this.internals.setFormValue(null);
+            this.internals.setValidity({});
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        // Always set submitted value (even if validation is off)
+        const formValue = this.checked ? this.value ?? 'on' : null;
+        this.internals.setFormValue(formValue);
+        // none -> never invalid
+        if (this.validationMode === 'none') {
+            this.internals.setValidity({});
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        const isMissing = this.required && !this.checked;
+        // silent -> no validity, only gated UI
+        if (this.validationMode === 'silent') {
+            this.internals.setValidity({});
+            if (setUi) {
+                const shouldShow = this.touched || this.submitAttempted;
+                this.error = shouldShow && isMissing;
+                this.caption = shouldShow && isMissing ? 'This field is required' : undefined;
+            }
+            return;
+        }
+        // native -> real validity participation
+        if (isMissing) {
+            this.internals.setValidity({ valueMissing: true }, 'This field is required', this.inputElement ?? undefined);
+            // native mode uses browser UI; don't double-show component UI
+            if (setUi) {
+                this.error = false;
+                this.caption = undefined;
+            }
+            return;
+        }
+        this.internals.setValidity({});
+        if (setUi) {
+            this.error = false;
+            this.caption = undefined;
+        }
+    }
+    // --------------------------------------------------
+    // Interaction
+    // --------------------------------------------------
+    handleChange = () => {
+        if (this.disabled)
+            return;
+        if (!this.touched)
+            this.touched = true;
+        // toggling clears indeterminate
+        this.indeterminate = false;
+        // toggle comes from BaseChoiceControl
+        this.toggleChecked();
+        // keep internal mirror in sync (base updates `checked`)
+        this.internalChecked = !!this.checked;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: true });
+        this.bcmCheckboxChange.emit({
+            element: this.inputElement,
+            checked: this.checked,
+        });
+    };
+    // --------------------------------------------------
+    // Styles
+    // --------------------------------------------------
     getStyles() {
         const defaultStyles = {
             '--checked-color': 'var(--bcm-ui-color-background-primary-default)',
@@ -203,21 +227,107 @@ const Checkbox = class {
             '--hover-color': 'var(--bcm-ui-color-border-disabled)',
             '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',
         };
-        return Object.assign(Object.assign(Object.assign({}, defaultStyles), (this.error ? errorStyles : {})), (this.disabled ? disabledStyles : {}));
+        return {
+            ...defaultStyles,
+            ...(this.error ? errorStyles : {}),
+            ...(this.disabled ? disabledStyles : {}),
+        };
     }
-    /**
-     * Renders the checkbox component
-     */
+    classes = tv.tv({
+        slots: {
+            root: 'bcm-ui-element bcm-checkbox flex flex-col',
+            row: 'flex items-center',
+            checkbox: [
+                'flex items-center justify-center rounded-sm',
+                'border border-solid border-[--border-color]',
+                'bg-[--unchecked-color]',
+                'transition-colors duration-200 ease-out',
+                'peer-checked:bg-[--checked-color]',
+                'peer-checked:border-[--checked-color]',
+                'peer-indeterminate:bg-[--checked-color]',
+                'peer-indeterminate:border-[--checked-color]',
+                'hover:border-[--hover-border-color]',
+                'hover:peer-checked:bg-[--hover-color]',
+                'hover:peer-indeterminate:bg-[--hover-color]',
+            ],
+            iconContainer: 'flex items-center justify-center',
+            label: 'select-none text-color',
+            hiddenInput: 'sr-only peer',
+            caption: 'mt-1 text-color-error font-normal', // ✅ alt satır spacing
+        },
+        variants: {
+            size: {
+                small: {
+                    row: 'gap-2',
+                    checkbox: 'size-3',
+                    iconContainer: 'size-2 text-size-2',
+                    label: 'text-size-4',
+                    hiddenInput: 'size-3',
+                    caption: 'text-size-3',
+                },
+                medium: {
+                    row: 'gap-2.5',
+                    checkbox: 'size-4',
+                    iconContainer: 'size-[10px] text-size-3',
+                    label: 'text-size-5',
+                    hiddenInput: 'size-4',
+                    caption: 'text-size-4',
+                },
+                large: {
+                    row: 'gap-3',
+                    checkbox: 'size-[18px]',
+                    iconContainer: 'size-4 text-size-4',
+                    label: 'text-size-6',
+                    hiddenInput: 'size-[18px]',
+                    caption: 'text-size-5',
+                },
+            },
+            disabled: {
+                true: {
+                    row: 'cursor-not-allowed',
+                    checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',
+                    label: 'cursor-not-allowed text-color-disabled',
+                    iconContainer: 'text-color-disabled',
+                    hiddenInput: 'cursor-not-allowed',
+                },
+                false: {
+                    row: 'cursor-pointer',
+                    checkbox: 'cursor-pointer',
+                    label: 'cursor-pointer text-color',
+                    iconContainer: 'text-color-base',
+                    hiddenInput: 'cursor-pointer',
+                },
+            },
+            labelPosition: {
+                left: { row: 'flex-row-reverse' },
+                right: { row: 'flex-row' },
+            },
+        },
+        defaultVariants: {
+            size: 'medium',
+            disabled: false,
+            labelPosition: 'right',
+        },
+    }, { twMerge: false });
+    // --------------------------------------------------
+    // Render
+    // --------------------------------------------------
     render() {
-        const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });
-        const internalId = this._id + '-internal-checkbox' || this.name;
-        return (index.h("div", { key: 'e52d6948890d9ed3781749636d2d5c4aaf836bd6', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, index.h("div", { key: '768559392f1a74d7f761687a072c4363f02ea1ee', class: "relative inline-flex" }, index.h("input", { key: '48bd969ec3eeac967436103080e20105648b379f', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), index.h("div", { key: '956ddcdc47de3bdb21b38e609411dfcc490f7de0', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (index.h("div", { key: '4fedb057f2020b5120529aae76e525859a2f61c3', class: iconContainer(), part: "icon" }, index.h("bcm-icon", { key: 'b6d2949fa71c1110217f9557daaa490de9f0cf1c', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (index.h("div", { key: '1e7b0480c7ad731875285909d3f6a0dd8ec165f6', class: iconContainer(), part: "icon" }, index.h("bcm-icon", { key: '63e9c4e8458cd7cdd3c206b908596af0304e8699', name: "fa-regular fa-minus" }))))), index.h("label", { key: '4e0a434568e51c474a37dd951fdb599e7a506535', htmlFor: internalId, class: label(), part: "label" }, this.label)));
+        const { root, row, checkbox, iconContainer, label, hiddenInput, caption } = this.classes({
+            size: this.size,
+            disabled: this.disabled,
+            labelPosition: this.labelPosition,
+        });
+        const internalId = (this._id ? `${this._id}-internal-checkbox` : undefined) ?? this.name ?? 'bcm-checkbox';
+        return (index.h("div", { key: '36609b6bd5043081fba0c8ffeea3450825af123e', class: root(), style: this.getStyles(), part: "checkbox" }, index.h("div", { key: '6cf9a1dfd28851b3bf3cbaf7f40abf355b3620aa', class: row() }, index.h("div", { key: '5dc5d14d35ed1bf59916c6c3c730c3a4d20a9273', class: "relative inline-flex" }, index.h("input", { key: 'abd5d0af4e60717dbf633a7d20da7bf2ed905c38', ref: el => (this.inputElement = el), type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-required": this.required, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, part: "input" }), index.h("div", { key: '8d4b32f2b1ff81d31a224ae9dc1447f19f732f7a', class: checkbox(), part: "control", onClick: () => this.inputElement?.click() }, this.internalChecked && (index.h("div", { key: '87b118802cb6cab81a318b9e49ca860e38c7e488', class: iconContainer(), part: "icon" }, index.h("bcm-icon", { key: '2f8534df46ce09902a792c19573295802cc7f831', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (index.h("div", { key: 'f1b9a993d4a92ca679aba71d6f7905ed4b3d806b', class: iconContainer(), part: "icon" }, index.h("bcm-icon", { key: '1a1c4473c91dee7982abd623f135aaa644295e2a', name: "fa-regular fa-minus" }))))), index.h("label", { key: '0b0461fcc3911d25c4f158bcedcd650d6f945d8d', htmlFor: internalId, class: label(), part: "label" }, index.h("slot", { key: 'ef92208e2a217d8fc4a06b260ba5d683018383fc' }, this.label))), this.error && this.caption && (index.h("span", { key: 'fc2ee56f477eeccb2be15468c93d4a8ef2edad37', class: caption(), part: "caption" }, this.caption))));
     }
-    get el() { return index.getElement(this); }
+    static get formAssociated() { return true; }
     static get watchers() { return {
-        "checked": ["syncCheckedProp"],
-        "indeterminate": ["updateIndeterminateState"],
-        "internalChecked": ["updateIndeterminateState"]
+        "checked": ["onStateChange", "syncFromBase"],
+        "required": ["onStateChange"],
+        "disabled": ["onStateChange"],
+        "value": ["onStateChange"],
+        "indeterminate": ["onIndeterminateChange"]
     }; }
 };
 Checkbox.style = checkboxCss;

package/dist/cjs/bcm-checkbox.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-checkbox.entry.cjs.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /**\n   * Label text to display next to the checkbox\n   */\n  @Prop()\n  label?: string;\n\n  /**\n   * Name attribute for the checkbox when used in a form\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * Determines if the checkbox is in an indeterminate state.\n   * This is useful when some items in a group of checkboxes are selected and others are not.\n   */\n  @Prop({ mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Size variant of the checkbox\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Determines if the checkbox is checked\n   */\n  @Prop({ mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates if the checkbox is in an error state.\n   * This affects the visual styling of the component.\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Determines if the checkbox is disabled\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Controls the position of the label relative to the checkbox\n   */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /**\n   * Full width checkbox\n   */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Internal state to track checked status\n   */\n  @State() internalChecked: boolean;\n\n  /**\n   * Event emitted when the checked state changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n  /** Reference to the underlying input element */\n  private inputElement: HTMLInputElement;\n\n  /**\n   * Lifecycle method that runs before the component first renders.\n   * Initializes the internal checked state.\n   */\n  componentWillLoad() {\n    this.internalChecked = this.checked !== undefined ? this.checked : false;\n  }\n\n  /**\n   * Lifecycle method that runs after the component has rendered.\n   * Updates the indeterminate state of the input element.\n   */\n  componentDidLoad() {\n    this.updateIndeterminateState();\n  }\n\n  /**\n   * Watches for changes to the checked prop and updates the internal state\n   * @param newValue The new checked value\n   */\n  @Watch('checked')\n  syncCheckedProp(newValue: boolean | undefined) {\n    if (newValue !== undefined) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  /**\n   * Watches for changes to indeterminate and internalChecked states\n   * Updates the input element accordingly\n   */\n  @Watch('indeterminate')\n  @Watch('internalChecked')\n  updateIndeterminateState() {\n    if (this.inputElement) {\n      this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n    }\n  }\n\n  /**\n   * Handles change events on the checkbox\n   * Updates state and emits the change event\n   */\n  private handleChange = () => {\n    if (this.disabled) return;\n    if (this.inputElement) {\n      this.inputElement.indeterminate = false;\n      this.indeterminate = false;\n      this.internalChecked = !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n      this.bcmCheckboxChange.emit({\n        element: this.inputElement,\n        checked: this.internalChecked,\n      });\n    }\n  };\n\n  /**\n   * Returns the CSS custom properties based on component state\n   * @returns Object with CSS custom properties\n   */\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  /**\n   * Tailwind Variants definition for the component\n   * Configures styling based on component props\n   */\n  private classes = tv(\n    {\n      slots: {\n        container: 'flex items-center bcm-ui-element bcm-checkbox',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n          },\n          medium: {\n            container: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n          },\n          large: {\n            container: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: {\n            container: 'flex-row-reverse',\n          },\n          right: {\n            container: 'flex-row',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        checked: false,\n        disabled: false,\n        error: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n  /**\n   * Renders the checkbox component\n   */\n  render() {\n    const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n    const internalId = this._id + '-internal-checkbox' || this.name;\n\n    return (\n      <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n        <div class=\"relative inline-flex\">\n          <input\n            type=\"checkbox\"\n            role=\"checkbox\"\n            id={internalId}\n            name={this.name}\n            checked={this.internalChecked}\n            indeterminate={this.indeterminate}\n            disabled={this.disabled}\n            class={hiddenInput()}\n            aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n            aria-invalid={this.error}\n            aria-label={this.label || 'Checkbox'}\n            onChange={this.handleChange}\n            ref={el => (this.inputElement = el as HTMLInputElement)}\n          />\n          <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n            {this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n              </div>\n            )}\n            {this.indeterminate && !this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n              </div>\n            )}\n          </div>\n        </div>\n        <label htmlFor={internalId} class={label()} part=\"label\">\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"names":["generateId","tv","h"],"mappings":"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"}
+{"version":3,"file":"bcm-checkbox.entry.cjs.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  ComponentInterface,\n  EventEmitter,\n  Event,\n  Watch,\n  State,\n  AttachInternals\n} from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport { BaseChoiceControl } from '../_shared/form/base-choice-control';\n\n/**\n * @component BcmCheckbox\n * @description\n * A form-associated checkbox component representing a boolean choice.\n * Integrates with native HTML forms via ElementInternals while supporting\n * **three validation strategies** via `validation-mode`:\n *\n * - **`native`**\n *   - Participates in native browser constraint validation.\n *   - Sets the underlying input's `required`.\n *   - Browser may show native validation bubbles when submit/reportValidity happens.\n *\n * - **`silent`**\n *   - Does **not** set native `required` (prevents browser bubble).\n *   - Computes \"missing required\" internally and exposes it via `error` + `caption`.\n *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.\n *\n * - **`none`**\n *   - Value-only mode: submits value but never becomes invalid.\n *\n * ## UI error gating (silent mode)\n * - `touched` becomes true after first user interaction\n * - `submitAttempted` becomes true when the parent form emits `submit`\n *\n * ## Value behavior\n * - When checked → submits `value` (default: `\"on\"`).\n * - When unchecked → submits no value (`null`).\n * - When disabled → no submission and no validity participation.\n *\n * ## Shadow Parts\n * - `checkbox`  → root container\n * - `control`   → visual checkbox box\n * - `icon`      → icon container (check or minus)\n * - `label`     → label text\n * - `caption`   → helper/error text (silent mode UI)\n * - `input`     → hidden native input\n *\n * @example Basic usage\n * <bcm-checkbox name=\"terms\" required>\n *   I agree to the terms and conditions\n * </bcm-checkbox>\n *\n * @example Silent validation (no native bubble)\n * <form>\n *   <bcm-checkbox name=\"newsletter\" required validation-mode=\"silent\">\n *     Subscribe to newsletter\n *   </bcm-checkbox>\n *   <button type=\"submit\">Submit</button>\n * </form>\n *\n * @example Value-only mode\n * <bcm-checkbox name=\"analytics\" validation-mode=\"none\">\n *   Allow analytics\n * </bcm-checkbox>\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox extends BaseChoiceControl implements ComponentInterface {\n  /** Host element */\n  @Element() el!: HTMLElement;\n\n  /** Form-associated internals (ElementInternals API) */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   * Used to bind the visible label to the internal input.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /** Visible label text (optional). You can also use the default slot. */\n  @Prop() label?: string;\n\n  /**\n   * Indeterminate (mixed) state.\n   * Useful when a group selection is partially selected.\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /** Size variant (affects control + typography). */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Visual error state.\n   * - In `silent` mode this can be managed internally.\n   * - In other modes you can set it externally as well.\n   */\n  @Prop({ mutable: true }) error = false;\n\n  /** Helper / error caption (silent mode UI) */\n  @Prop({ mutable: true }) caption?: string;\n\n  /** Label position relative to the checkbox control. */\n  @Prop() labelPosition: 'left' | 'right' = 'right';\n\n  /** Makes checkbox occupy full width (if your styles support it). */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Mirror state used to keep the native input synced.\n   * `checked` is owned by BaseChoiceControl.\n   */\n  @State() internalChecked = false;\n\n  /** Gate for silent-mode UI */\n  @State() private touched = false;\n\n  /** Gate for silent-mode UI */\n  @State() private submitAttempted = false;\n\n  /** Fired whenever the checked state changes. */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange!: EventEmitter<{ element: HTMLInputElement; checked: boolean }>;\n\n  /** Reference to the underlying native input. */\n  private inputElement!: HTMLInputElement;\n\n  // --------------------------------------------------\n  // Lifecycle\n  // --------------------------------------------------\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    // don't show UI errors on initial render\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  componentDidLoad() {\n    this.syncNativeInput();\n\n    const form = this.internals?.form;\n    if (form) {\n      form.addEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  disconnectedCallback() {\n    const form = this.internals?.form;\n    if (form) {\n      form.removeEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  private onFormSubmit = () => {\n    this.submitAttempted = true;\n    this.updateFormValueAndValidity({ setUi: true });\n  };\n\n  formResetCallback() {\n    super.formResetCallback();\n\n    this.internalChecked = false;\n    this.indeterminate = false;\n\n    // reset gating\n    this.touched = false;\n    this.submitAttempted = false;\n\n    // reset UI\n    this.error = false;\n    this.caption = undefined;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  // --------------------------------------------------\n  // Watchers\n  // --------------------------------------------------\n\n  @Watch('checked')\n  protected syncFromBase(newValue: boolean) {\n    this.internalChecked = newValue;\n    this.indeterminate = false;\n    this.syncNativeInput();\n  }\n\n  /** Keep native input in sync when indeterminate changes. */\n  @Watch('indeterminate')\n  protected onIndeterminateChange() {\n    this.syncNativeInput();\n  }\n\n  // --------------------------------------------------\n  // Native input syncing\n  // --------------------------------------------------\n\n  private syncNativeInput() {\n    if (!this.inputElement) return;\n\n    this.inputElement.checked = this.internalChecked;\n    this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n    this.inputElement.disabled = this.disabled;\n\n    // ✅ prevent native bubble in silent/none:\n    // only native mode applies native \"required\"\n    this.inputElement.required = this.validationMode === 'native' && this.required;\n  }\n\n  // --------------------------------------------------\n  // Form internals integration\n  // --------------------------------------------------\n\n  protected updateFormValueAndValidity(opts?: { setUi?: boolean }) {\n    const setUi = opts?.setUi ?? true;\n    if (!this.internals) return;\n\n    // Disabled -> no value, no validity, no UI errors\n    if (this.disabled) {\n      this.internals.setFormValue(null);\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    // Always set submitted value (even if validation is off)\n    const formValue = this.checked ? this.value ?? 'on' : null;\n    this.internals.setFormValue(formValue);\n\n    // none -> never invalid\n    if (this.validationMode === 'none') {\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    const isMissing = this.required && !this.checked;\n\n    // silent -> no validity, only gated UI\n    if (this.validationMode === 'silent') {\n      this.internals.setValidity({});\n\n      if (setUi) {\n        const shouldShow = this.touched || this.submitAttempted;\n        this.error = shouldShow && isMissing;\n        this.caption = shouldShow && isMissing ? 'This field is required' : undefined;\n      }\n      return;\n    }\n\n    // native -> real validity participation\n    if (isMissing) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'This field is required',\n        this.inputElement ?? undefined,\n      );\n\n      // native mode uses browser UI; don't double-show component UI\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    this.internals.setValidity({});\n\n    if (setUi) {\n      this.error = false;\n      this.caption = undefined;\n    }\n  }\n\n  // --------------------------------------------------\n  // Interaction\n  // --------------------------------------------------\n\n  private handleChange = () => {\n    if (this.disabled) return;\n\n    if (!this.touched) this.touched = true;\n\n    // toggling clears indeterminate\n    this.indeterminate = false;\n\n    // toggle comes from BaseChoiceControl\n    this.toggleChecked();\n\n    // keep internal mirror in sync (base updates `checked`)\n    this.internalChecked = !!this.checked;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: true });\n\n    this.bcmCheckboxChange.emit({\n      element: this.inputElement,\n      checked: this.checked,\n    });\n  };\n\n  // --------------------------------------------------\n  // Styles\n  // --------------------------------------------------\n\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  private classes = tv(\n    {\n      slots: {\n        root: 'bcm-ui-element bcm-checkbox flex flex-col',\n        row: 'flex items-center',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'sr-only peer',\n        caption: 'mt-1 text-color-error font-normal',           // ✅ alt satır spacing\n      },\n      variants: {\n        size: {\n          small: {\n            row: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n            caption: 'text-size-3',\n          },\n          medium: {\n            row: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n            caption: 'text-size-4',\n          },\n          large: {\n            row: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n            caption: 'text-size-5',\n          },\n        },\n        disabled: {\n          true: {\n            row: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            row: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: { row: 'flex-row-reverse' },\n          right: { row: 'flex-row' },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        disabled: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n\n  // --------------------------------------------------\n  // Render\n  // --------------------------------------------------\n\n  render() {\n    const { root, row, checkbox, iconContainer, label, hiddenInput, caption } = this.classes({\n      size: this.size,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n    });\n\n    const internalId =\n      (this._id ? `${this._id}-internal-checkbox` : undefined) ?? this.name ?? 'bcm-checkbox';\n\n    return (\n      <div class={root()} style={this.getStyles()} part=\"checkbox\">\n        <div class={row()}>\n          <div class=\"relative inline-flex\">\n            <input\n              ref={el => (this.inputElement = el as HTMLInputElement)}\n              type=\"checkbox\"\n              role=\"checkbox\"\n              id={internalId}\n              name={this.name}\n              checked={this.internalChecked}\n              indeterminate={this.indeterminate}\n              disabled={this.disabled}\n              class={hiddenInput()}\n              aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n              aria-invalid={this.error}\n              aria-required={this.required}\n              aria-label={this.label || 'Checkbox'}\n              onChange={this.handleChange}\n              part=\"input\"\n            />\n\n            <div class={checkbox()} part=\"control\" onClick={() => this.inputElement?.click()}>\n              {this.internalChecked && (\n                <div class={iconContainer()} part=\"icon\">\n                  <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n                </div>\n              )}\n\n              {this.indeterminate && !this.internalChecked && (\n                <div class={iconContainer()} part=\"icon\">\n                  <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n                </div>\n              )}\n            </div>\n          </div>\n\n          <label htmlFor={internalId} class={label()} part=\"label\">\n            <slot>{this.label}</slot>\n          </label>\n        </div>\n\n        {this.error && this.caption && (\n          <span class={caption()} part=\"caption\">\n            {this.caption}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n}\n"],"names":["BaseChoiceControl","generateId","tv","h"],"mappings":"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"}