bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -1,182 +1,315 @@
 'use strict';
 
-var index = require('./index-CmYzUr-k.js');
+var index = require('./index-1Qal-onT.js');
 var generateId = require('./generate-id-CG_BkTJu.js');
 var tv = require('./tv-ngpIbGlG.js');
+var baseChoiceControl = require('./base-choice-control-EmA4JRjR.js');
 
-const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[1\\.125rem\\]{left:1.125rem}.left-\\[1\\.25rem\\]{left:1.25rem}.left-\\[1\\.375rem\\]{left:1.375rem}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[1\\.125rem\\]{height:1.125rem}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.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}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
+const switchCss = ":host{display:inline-block}.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}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[1\\.125rem\\]{left:1.125rem}.left-\\[1\\.25rem\\]{left:1.25rem}.left-\\[1\\.375rem\\]{left:1.375rem}.order-2{order:2}.flex{display:flex}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[1\\.125rem\\]{height:1.125rem}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.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}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
 
-const BcmSwitch = class {
+const BcmSwitch = class extends baseChoiceControl.BaseChoiceControl {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.bcmSwitchChange = index.createEvent(this, "bcmSwitchChange", 1);
-        /** Whether the switch is checked or not */
-        this.checked = false;
-        /** Whether the switch is disabled */
-        this.disabled = false;
-        /** Position of the label relative to the switch */
-        this.labelPosition = 'right';
-        /** Whether to display the switch in an error state */
+        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); }
+    internals;
+    /** Unique id (optional). Generated by default. */
+    _id = generateId.generateId('bcm-switch');
+    /** Visible label text */
+    label;
+    /** Position of the label relative to the switch */
+    labelPosition = 'right';
+    /** Visual error state (manual/external). In silent mode this can be auto-managed. */
+    error = false;
+    /** Helper / error text shown under the switch */
+    caption;
+    /** Size variant */
+    size = 'medium';
+    /** Internal checked mirror for UI (kept to preserve old DOM/class behavior) */
+    internalChecked = false;
+    /** Gate for silent-mode error UI */
+    touched = false;
+    /** Gate for silent-mode error UI */
+    submitAttempted = false;
+    /** Emitted when the switch toggles */
+    bcmSwitchChange;
+    inputEl;
+    // --------------------------------------------------
+    // Lifecycle
+    // --------------------------------------------------
+    componentWillLoad() {
+        this.internalChecked = !!this.checked;
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    componentDidLoad() {
+        this.syncNativeInput();
+        const form = this.internals?.form;
+        if (form) {
+            // capture = true: ensures we hear submit early
+            form.addEventListener('submit', this.onFormSubmit, true);
+        }
+    }
+    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;
+        // reset gating
+        this.touched = false;
+        this.submitAttempted = false;
+        // reset UI
         this.error = false;
-        /** Size variant of the switch */
-        this.size = 'medium';
-        /** Whether the switch is in readonly mode */
-        this.readonly = false;
-        /** Whether the switch is required in a form */
-        this.required = false;
-        this.switchId = generateId.generateId('switch');
-        this.switchStyle = () => {
-            const defaultStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',
-            };
-            const checkedStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-info-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',
-            };
-            const errorStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-error-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',
-            };
-            const readonlyStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',
-            };
-            const disabledStyle = {
-                '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',
-                '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',
-                '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',
-            };
-            return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.checked && checkedStyle)), (this.error && errorStyle)), (this.readonly && readonlyStyle)), (this.disabled && disabledStyle));
+        this.caption = undefined;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: false });
+    }
+    // --------------------------------------------------
+    // Watchers
+    // --------------------------------------------------
+    onBaseCheckedChange(newVal) {
+        this.internalChecked = !!newVal;
+        this.syncNativeInput();
+    }
+    // --------------------------------------------------
+    // Native sync
+    // --------------------------------------------------
+    syncNativeInput() {
+        if (!this.inputEl)
+            return;
+        this.inputEl.checked = this.internalChecked;
+        this.inputEl.disabled = this.disabled;
+        // ✅ Prevent native validation bubble in silent/none:
+        // only native mode applies native "required"
+        this.inputEl.required = this.validationMode === 'native' && this.required;
+    }
+    // --------------------------------------------------
+    // Form internals
+    // --------------------------------------------------
+    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.inputEl ?? 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
+    // --------------------------------------------------
+    toggleSwitch = () => {
+        if (this.disabled || this.readonly)
+            return;
+        if (!this.touched)
+            this.touched = true;
+        this.toggleChecked(); // base toggler updates `checked`
+        this.internalChecked = !!this.checked;
+        this.syncNativeInput();
+        this.updateFormValueAndValidity({ setUi: true });
+        this.bcmSwitchChange.emit(this.checked);
+    };
+    // --------------------------------------------------
+    // Styles
+    // --------------------------------------------------
+    switchStyle = () => {
+        const defaultStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',
         };
-        this.switchClass = tv.tv({
-            slots: {
-                base: 'bcm-ui-element flex flex-col',
-                switchWrapper: 'flex items-center group',
-                dotContainer: 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',
-                dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',
-                caption: '!text-color-error font-normal',
-                label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',
-            },
-            variants: {
-                size: {
-                    small: {
-                        dotContainer: 'w-8 h-4',
-                        dot: 'size-3',
-                        label: 'text-size-4',
-                        caption: 'text-size-3',
-                        switchWrapper: 'gap-2',
-                        base: 'gap-0.5',
-                    },
-                    medium: {
-                        dotContainer: 'w-9 h-[1.125rem]',
-                        dot: 'size-3.5',
-                        label: 'text-size-5',
-                        caption: 'text-size-4',
-                        switchWrapper: 'gap-2.5',
-                        base: 'gap-1',
-                    },
-                    large: {
-                        dotContainer: 'w-10 h-5',
-                        dot: 'size-4',
-                        label: 'text-size-6',
-                        caption: 'text-size-5',
-                        switchWrapper: 'gap-3',
-                        base: 'gap-2',
-                    },
-                },
-                labelPosition: {
-                    left: {
-                        label: '',
-                    },
-                    right: {
-                        label: 'order-2',
-                    },
-                },
-                checked: {
-                    true: {
-                        dot: '',
-                    },
-                    false: {
-                        dot: 'left-0.5',
-                    },
+        const checkedStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-info-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',
+        };
+        const errorStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-error-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',
+        };
+        const readonlyStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',
+        };
+        const disabledStyle = {
+            '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',
+            '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',
+            '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',
+        };
+        return {
+            ...defaultStyle,
+            ...(this.internalChecked && checkedStyle),
+            ...(this.error && errorStyle),
+            ...(this.readonly && readonlyStyle),
+            ...(this.disabled && disabledStyle),
+        };
+    };
+    switchClass = tv.tv({
+        slots: {
+            base: 'bcm-ui-element flex flex-col',
+            switchWrapper: 'flex items-center group',
+            dotContainer: 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',
+            dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',
+            caption: '!text-color-error font-normal',
+            label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',
+        },
+        variants: {
+            size: {
+                small: {
+                    dotContainer: 'w-8 h-4',
+                    dot: 'size-3',
+                    label: 'text-size-4',
+                    caption: 'text-size-3',
+                    switchWrapper: 'gap-2',
+                    base: 'gap-0.5',
                 },
-                disabled: {
-                    true: '',
-                    false: {
-                        switchWrapper: '',
-                    },
+                medium: {
+                    dotContainer: 'w-9 h-[1.125rem]',
+                    dot: 'size-3.5',
+                    label: 'text-size-5',
+                    caption: 'text-size-4',
+                    switchWrapper: 'gap-2.5',
+                    base: 'gap-1',
                 },
-                readonly: {
-                    true: {
-                        switchWrapper: 'cursor-default',
-                        dotContainer: 'cursor-default',
-                        dot: 'cursor-default',
-                    },
-                    false: {
-                        switchWrapper: 'cursor-pointer',
-                        dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',
-                    },
+                large: {
+                    dotContainer: 'w-10 h-5',
+                    dot: 'size-4',
+                    label: 'text-size-6',
+                    caption: 'text-size-5',
+                    switchWrapper: 'gap-3',
+                    base: 'gap-2',
                 },
             },
-            compoundVariants: [
-                {
-                    size: 'small',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.125rem]',
-                    },
-                },
-                {
-                    size: 'medium',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.25rem]',
-                    },
+            labelPosition: {
+                left: { label: '' },
+                right: { label: 'order-2' },
+            },
+            checked: {
+                true: { dot: '' },
+                false: { dot: 'left-0.5' },
+            },
+            disabled: {
+                true: '',
+                false: { switchWrapper: '' },
+            },
+            readonly: {
+                true: {
+                    switchWrapper: 'cursor-default',
+                    dotContainer: 'cursor-default',
+                    dot: 'cursor-default',
                 },
-                {
-                    size: 'large',
-                    checked: true,
-                    class: {
-                        dot: 'left-[1.375rem]',
-                    },
+                false: {
+                    switchWrapper: 'cursor-pointer',
+                    dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',
                 },
-                {
-                    readonly: false,
-                    disabled: false,
-                    class: {
-                        dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',
-                    },
+            },
+        },
+        compoundVariants: [
+            { size: 'small', checked: true, class: { dot: 'left-[1.125rem]' } },
+            { size: 'medium', checked: true, class: { dot: 'left-[1.25rem]' } },
+            { size: 'large', checked: true, class: { dot: 'left-[1.375rem]' } },
+            {
+                readonly: false,
+                disabled: false,
+                class: {
+                    dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',
                 },
-            ],
-        });
-    }
-    toggleSwitch() {
-        if (this.disabled || this.readonly)
-            return;
-        this.checked = !this.checked;
-        this.bcmSwitchChange.emit(this.checked);
-    }
+            },
+        ],
+    });
+    // --------------------------------------------------
+    // Render
+    // --------------------------------------------------
     render() {
         const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({
             size: this.size,
-            checked: this.checked,
+            checked: this.internalChecked,
             disabled: this.disabled,
             labelPosition: this.labelPosition,
             readonly: this.readonly,
         });
-        const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
+        const ariaAttributes = {
+            role: 'switch',
+            'aria-checked': this.internalChecked.toString(),
+            'aria-disabled': this.disabled.toString(),
+            'aria-readonly': this.readonly.toString(),
+            ...(this.required && { 'aria-required': 'true' }),
+        };
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (index.h("div", { key: 'fb166766caeeff5f9ab5f88930d0deed0e125bf6', class: base() }, index.h("label", { key: 'f5623967ff1828476d6db15fa3778ec93e406992', class: switchWrapper(), style: this.switchStyle() }, index.h("input", { key: '446679ab211ccf8900b5dda214c8845173d42472', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && (index.h("span", { key: '53cea44dd7b6f8f60ae0ea5e4f96c23b195ea64c', class: label() }, index.h("slot", { key: 'e0301547e7a05e5c7732b1298074f58ea15f3324' }, this.label))), index.h("label", Object.assign({ key: '47e019c900dc70707dea78af6e06c92e576b63a0', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (index.h("div", { key: '7398b102be2bf2ec21819e5db830472fc52da2c3', class: base(), part: "base" }, index.h("label", { key: 'd5e1062eb9481fdd57c5ef3484ad12a87f576fc8', class: switchWrapper(), style: this.switchStyle(), part: "switch-wrapper" }, index.h("input", { key: '0e64cc95da9426452b49a1d0b5c18643c6d4653d', id: this._id, type: "checkbox", class: "sr-only peer", checked: this.internalChecked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, onChange: this.toggleSwitch, ref: el => (this.inputEl = el), part: "input" }), this.label && (index.h("span", { key: '975eb8f7f61105f7597b991a340c16cef4c7ac16', class: label(), part: "label" }, index.h("slot", { key: 'a1b3f8c8b070fe22496f0db969a1a769be5b96f1' }, this.label))), index.h("label", { key: 'f2c720d7ba6715b6d91a821832bae9cb95bbebd8', htmlFor: this._id, class: dotContainer(), ...tabIndexAttr, ...ariaAttributes, part: "dot-container", onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), index.h("div", { key: '15399fd45101fa234a217c4fb792014d028b6fd4', class: dot() }))), this.error && this.caption && index.h("span", { key: '22058c9e2f72b3e5f337e24776cfd59732b1e270', class: caption() }, this.caption), index.h("slot", { key: '0d39f12b1531ed47727f4cd8fe79d0c48544d44c', name: "caption" })));
+            } }, index.h("div", { key: 'd51e6ddadff6854ebcc3b403e457c354d552dc60', class: dot(), part: "dot" }))), this.error && this.caption && (index.h("span", { key: '36529b1bbbe322247244e87b281d86076de75be7', class: caption(), part: "caption" }, this.caption)), index.h("slot", { key: '0f5b474e11fc93fddb3ff84c616c19fe57959e4b', name: "caption" })));
     }
-    get el() { return index.getElement(this); }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": ["onStateChange", "onBaseCheckedChange"],
+        "required": ["onStateChange"],
+        "disabled": ["onStateChange"],
+        "value": ["onStateChange"]
+    }; }
 };
 BcmSwitch.style = switchCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n  /** Reference to the host element */\n  @Element()\n  el: HTMLElement;\n\n  /** Whether the switch is checked or not */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Whether the switch is disabled */\n  @Prop()\n  disabled: boolean = false;\n\n  /** The name attribute for the hidden input element */\n  @Prop()\n  name: string;\n\n  /** The value attribute for the hidden input element */\n  @Prop()\n  value: string;\n\n  /** Text label for the switch */\n  @Prop()\n  label: string;\n\n  /** Position of the label relative to the switch */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /** Whether to display the switch in an error state */\n  @Prop()\n  error: boolean = false;\n\n  /** Text to display as an error message when error is true */\n  @Prop()\n  caption?: string;\n\n  /** Size variant of the switch */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Whether the switch is in readonly mode */\n  @Prop()\n  readonly: boolean = false;\n\n  /** Whether the switch is required in a form */\n  @Prop()\n  required: boolean = false;\n\n  /** Emitted when the switch state changes */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmSwitchChange: EventEmitter<boolean>;\n\n  private switchId = generateId('switch');\n\n  private toggleSwitch(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.bcmSwitchChange.emit(this.checked);\n  }\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.checked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[1.125rem]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: {\n          label: '',\n        },\n        right: {\n          label: 'order-2',\n        },\n      },\n      checked: {\n        true: {\n          dot: '',\n        },\n        false: {\n          dot: 'left-0.5',\n        },\n      },\n      disabled: {\n        true: '',\n        false: {\n          switchWrapper: '',\n        },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        size: 'small',\n        checked: true,\n        class: {\n          dot: 'left-[1.125rem]',\n        },\n      },\n      {\n        size: 'medium',\n        checked: true,\n        class: {\n          dot: 'left-[1.25rem]',\n        },\n      },\n      {\n        size: 'large',\n        checked: true,\n        class: {\n          dot: 'left-[1.375rem]',\n        },\n      },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      'role': 'switch',\n      'aria-checked': this.checked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()}>\n        <label class={switchWrapper()} style={this.switchStyle()}>\n          <input\n            id={this.switchId}\n            type=\"checkbox\"\n            class=\"hidden peer\"\n            checked={this.checked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            onChange={() => this.toggleSwitch()}\n          />\n\n          {this.label && (\n            <span class={label()}>\n              <slot>{this.label}</slot>\n            </span>\n          )}\n          <label\n            htmlFor={this.switchId}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()}></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"],"names":["generateId","tv","h"],"mappings":"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"}
+{"version":3,"file":"bcm-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  AttachInternals,\n} from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\nimport { BaseChoiceControl } from '../_shared/form/base-choice-control';\n\n/**\n * @component BcmSwitch\n * @description\n * A form-associated toggle switch component representing a boolean choice.\n * It behaves like a checkbox and integrates with native HTML forms via ElementInternals.\n *\n * This component supports **three validation strategies** via `validation-mode`:\n *\n * - **`native`**:\n *   - Uses native browser constraint validation.\n *   - Sets the underlying input's `required` attribute.\n *   - Browser may show the native validation bubble when the form calls `reportValidity()` / submit validation runs.\n *\n * - **`silent`**:\n *   - Does **not** rely on native `required` (prevents the browser bubble).\n *   - Computes the \"missing required\" state internally and exposes it via `error` + `caption`.\n *   - UI errors are **gated**: they appear only after the control is touched or after a submit attempt.\n *\n * - **`none`**:\n *   - Value-only mode (headless): participates in form value submission but never becomes invalid.\n *\n * ## UI error gating (silent mode)\n * To avoid showing errors on initial render, the component tracks:\n * - `touched`: set after the first user interaction\n * - `submitAttempted`: set when the parent form emits `submit`\n *\n * Only when `touched || submitAttempted` the component will show `error/caption` in `silent` mode.\n *\n * ## Value behavior\n * - When checked, the component submits its `value` (default: `\"on\"`).\n * - When unchecked, no value is submitted.\n * - When disabled, the component does not participate in submission or validity.\n *\n * @example Basic usage\n * <bcm-switch name=\"newsletter\" label=\"Receive newsletter?\" />\n *\n * @example Required with silent validation (no native bubble)\n * <form>\n *   <bcm-switch\n *     name=\"terms\"\n *     label=\"Accept terms\"\n *     required\n *     validation-mode=\"silent\">\n *   </bcm-switch>\n *   <button type=\"submit\">Submit</button>\n * </form>\n *\n * @example Native validation mode (may show native bubble)\n * <bcm-switch name=\"terms\" label=\"Accept terms\" required validation-mode=\"native\" />\n *\n * @example Value-only mode (no validation)\n * <bcm-switch name=\"analytics\" label=\"Allow analytics\" validation-mode=\"none\" />\n *\n * @csspart base - Root container\n * @csspart switch-wrapper - Wrapper containing label + track\n * @csspart input - Hidden native input\n * @csspart label - Text label\n * @csspart dot-container - Switch track\n * @csspart dot - Switch knob\n * @csspart caption - Helper/error text\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BcmSwitch extends BaseChoiceControl implements ComponentInterface {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Unique id (optional). Generated by default. */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-switch');\n\n  /** Visible label text */\n  @Prop() label!: string;\n\n  /** Position of the label relative to the switch */\n  @Prop() labelPosition: 'left' | 'right' = 'right';\n\n  /** Visual error state (manual/external). In silent mode this can be auto-managed. */\n  @Prop({ mutable: true }) error = false;\n\n  /** Helper / error text shown under the switch */\n  @Prop({ mutable: true }) caption?: string;\n\n  /** Size variant */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Internal checked mirror for UI (kept to preserve old DOM/class behavior) */\n  @State() internalChecked = false;\n\n  /** Gate for silent-mode error UI */\n  @State() private touched = false;\n\n  /** Gate for silent-mode error UI */\n  @State() private submitAttempted = false;\n\n  /** Emitted when the switch toggles */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmSwitchChange',\n  })\n  bcmSwitchChange!: EventEmitter<boolean>;\n\n  private inputEl!: HTMLInputElement;\n\n  // --------------------------------------------------\n  // Lifecycle\n  // --------------------------------------------------\n\n  componentWillLoad() {\n    this.internalChecked = !!this.checked;\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  componentDidLoad() {\n    this.syncNativeInput();\n\n    const form = this.internals?.form;\n    if (form) {\n      // capture = true: ensures we hear submit early\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    this.internalChecked = 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 onBaseCheckedChange(newVal: boolean) {\n    this.internalChecked = !!newVal;\n    this.syncNativeInput();\n  }\n\n  // --------------------------------------------------\n  // Native sync\n  // --------------------------------------------------\n\n  private syncNativeInput() {\n    if (!this.inputEl) return;\n\n    this.inputEl.checked = this.internalChecked;\n    this.inputEl.disabled = this.disabled;\n\n    // ✅ Prevent native validation bubble in silent/none:\n    // only native mode applies native \"required\"\n    this.inputEl.required = this.validationMode === 'native' && this.required;\n  }\n\n  // --------------------------------------------------\n  // Form internals\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      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.inputEl ?? 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  // --------------------------------------------------\n  // Interaction\n  // --------------------------------------------------\n\n  private toggleSwitch = (): void => {\n    if (this.disabled || this.readonly) return;\n\n    if (!this.touched) this.touched = true;\n\n    this.toggleChecked(); // base toggler updates `checked`\n    this.internalChecked = !!this.checked;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: true });\n\n    this.bcmSwitchChange.emit(this.checked);\n  };\n\n  // --------------------------------------------------\n  // Styles\n  // --------------------------------------------------\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.internalChecked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[1.125rem]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: { label: '' },\n        right: { label: 'order-2' },\n      },\n      checked: {\n        true: { dot: '' },\n        false: { dot: 'left-0.5' },\n      },\n      disabled: {\n        true: '',\n        false: { switchWrapper: '' },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      { size: 'small', checked: true, class: { dot: 'left-[1.125rem]' } },\n      { size: 'medium', checked: true, class: { dot: 'left-[1.25rem]' } },\n      { size: 'large', checked: true, class: { dot: 'left-[1.375rem]' } },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  // --------------------------------------------------\n  // Render\n  // --------------------------------------------------\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.internalChecked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      role: 'switch',\n      'aria-checked': this.internalChecked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()} part=\"base\">\n        <label class={switchWrapper()} style={this.switchStyle()} part=\"switch-wrapper\">\n          <input\n            id={this._id}\n            type=\"checkbox\"\n            class=\"sr-only peer\"\n            checked={this.internalChecked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            onChange={this.toggleSwitch}\n            ref={el => (this.inputEl = el as HTMLInputElement)}\n            part=\"input\"\n          />\n\n          {this.label && (\n            <span class={label()} part=\"label\">\n              <slot>{this.label}</slot>\n            </span>\n          )}\n\n          <label\n            htmlFor={this._id}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            part=\"dot-container\"\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()} part=\"dot\"></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && (\n          <span class={caption()} part=\"caption\">\n            {this.caption}\n          </span>\n        )}\n\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"],"names":["BaseChoiceControl","generateId","tv","h"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-1Qal-onT.js');
+
+const bcmTabCss = ".block{display:block}:host{display:none}:host([active]){display:block}.tab-panel{animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.static{position:static}.p-4{padding:1rem}.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)}";
+
+const BcmTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmTabClick = index.createEvent(this, "bcmTabClick", 5);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Unique identifier for this tab
+     */
+    value;
+    /**
+     * Label text to display in tab button
+     */
+    label;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Active state (controlled by parent)
+     */
+    active = false;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size = 'md';
+    /**
+     * Internal event emitted when tab button is clicked
+     */
+    bcmTabClick;
+    render() {
+        return (index.h(index.Host, { key: '738093c7bae97cdbf80ad64431777a017797437e', role: "tabpanel", "aria-labelledby": `tab-${this.value}`, id: `panel-${this.value}`, "aria-hidden": (!this.active).toString(), style: { display: this.active ? 'block' : 'none' } }, index.h("div", { key: 'f19a9b3fed8c388b368cd411f429d9f01fb704bc', class: "tab-panel p-4" }, index.h("slot", { key: '6087e6a56403adff89b34d7ac1bd8419d9fc1895' }))));
+    }
+};
+BcmTab.style = bcmTabCss;
+
+exports.bcm_tab = BcmTab;
+//# sourceMappingURL=bcm-tab.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-tab.entry.cjs.js","sources":["src/components/tabs/bcm-tab.css?tag=bcm-tab&encapsulation=shadow","src/components/tabs/tab.component.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n\n:host([active]) {\n  display: block;\n}\n\n.tab-panel {\n  animation: fadeIn 200ms ease-in-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Individual tab component - self-contained with label and content panel\n * @slot - Default slot for tab content\n */\n@Component({\n  tag: 'bcm-tab',\n  styleUrl: 'bcm-tab.css',\n  shadow: true,\n})\nexport class BcmTab {\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier for this tab\n   */\n  @Prop({ reflect: true })\n  value!: string;\n\n  /**\n   * Label text to display in tab button\n   */\n  @Prop({ reflect: true })\n  label!: string;\n\n  /**\n   * Disabled state\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Active state (controlled by parent)\n   */\n  @Prop({ mutable: true, reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size variant (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Internal event emitted when tab button is clicked\n   */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n    eventName: 'bcmTabClick',\n  })\n  bcmTabClick: EventEmitter<string>;\n\n  render() {\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-labelledby={`tab-${this.value}`}\n        id={`panel-${this.value}`}\n        aria-hidden={(!this.active).toString()}\n        style={{ display: this.active ? 'block' : 'none' }}\n      >\n        <div class=\"tab-panel p-4\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,wZAAwZ;;MCW7Z,MAAM,GAAA,MAAA;;;;;;AAGjB;;AAEG;AAEH,IAAA,KAAK;AAEL;;AAEG;AAEH,IAAA,KAAK;AAEL;;AAEG;IAEH,QAAQ,GAAY,KAAK;AAEzB;;AAEG;IAEH,MAAM,GAAY,KAAK;AAEvB;;AAEG;IAEH,IAAI,GAAuB,IAAI;AAE/B;;AAEG;AAOH,IAAA,WAAW;IAEX,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACE,iBAAA,EAAA,CAAO,IAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EACpC,EAAE,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,aAAA,EACZ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,EACtC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EAElDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}