bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -1,7 +1,9 @@
 'use strict';
 
-var index = require('./index-CmYzUr-k.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.js');
+var validationMessages = require('./validation-messages-DieKlSG4.js');
+var generateId = require('./generate-id-CG_BkTJu.js');
 
 const radioCss = ".block{display:block}:host{display:block}.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}.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}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance: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-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.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}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.focus-visible\\:ring:focus-visible{--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)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
@@ -11,115 +13,172 @@ const BcmRadio = class {
         this.bcmRadioChange = index.createEvent(this, "bcmRadioChange", 1);
         this.bcmBlur = index.createEvent(this, "bcmBlur", 1);
         this.bcmFocus = index.createEvent(this, "bcmFocus", 1);
-        /**
-         * Whether the radio button is selected.
-         * @prop
-         * @defaultValue false
-         */
-        this.checked = false;
-        /**
-         * Defines the size of the radio button: 'small' | 'medium' | 'large'.
-         * @prop
-         * @defaultValue 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * Whether the radio button is disabled.
-         * @prop
-         * @defaultValue false
-         */
-        this.disabled = false;
-        /**
-         * Whether the radio button is readonly.
-         * @prop
-         * @defaultValue false
-         */
-        this.readonly = false;
-        /**
-         * Position of the label relative to the radio button: 'right' | 'left'.
-         * @prop
-         * @defaultValue 'right'
-         */
-        this.labelPosition = 'right';
-        /**
-         * Whether the radio button is in an error state.
-         * @prop
-         * @defaultValue false
-         */
-        this.error = false;
-        this.getRadioClass = tv.tv({
-            slots: {
-                container: 'bcm-ui-element bcm-radio group',
-                dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',
-                dotContainer: 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',
-                labelClass: 'font-medium text-[--bcm-radio-text-color]',
-            },
-            variants: {
-                size: {
-                    small: {
-                        container: 'gap-2',
-                        dotContainer: 'size-3.5',
-                        dot: 'size-2',
-                        labelClass: 'text-size-4',
-                    },
-                    medium: {
-                        container: 'gap-2.5',
-                        dotContainer: 'size-4',
-                        dot: 'size-2.5',
-                        labelClass: 'text-size-5',
-                    },
-                    large: {
-                        container: 'gap-3',
-                        dotContainer: 'size-[18px]',
-                        dot: 'size-3',
-                        labelClass: 'text-size-6',
-                    },
-                },
-                checked: {
-                    true: {
-                        dot: 'opacity-100',
-                    },
-                    false: {
-                        dot: 'opacity-0',
-                    },
-                },
-                disabled: {
-                    true: {
-                        container: 'cursor-not-allowed',
-                    },
-                    false: {
-                        container: 'cursor-pointer focus-visible:ring',
-                    },
-                },
-                readonly: {
-                    true: {
-                        container: 'cursor-default pointer-events-none',
-                        dot: 'opacity-100',
-                        dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',
-                    },
-                    false: '',
-                },
-                labelPosition: {
-                    left: {
-                        container: 'inline-flex flex-row-reverse items-center',
-                    },
-                    right: {
-                        container: 'inline-flex flex-row items-center',
-                    },
-                },
-            },
-        }, {
-            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 host() { return index.getElement(this); }
+    internals;
+    _id = generateId.generateId('bcm-radio');
+    /**
+     * The text label to display next to the radio button.
+     * @prop
+     * @defaultValue undefined
+     */
+    label;
+    /**
+     * The name attribute for the radio input, used to group radio buttons.
+     * @prop
+     * @defaultValue undefined
+     */
+    name;
+    /**
+     * The value of the radio button, submitted with the form.
+     * @prop
+     * @defaultValue undefined
+     */
+    value;
+    /**
+     * Whether the radio button is selected.
+     * @prop
+     * @defaultValue false
+     */
+    checked = false;
+    /**
+     * Defines the size of the radio button: 'small' | 'medium' | 'large'.
+     * @prop
+     * @defaultValue 'medium'
+     */
+    size = 'medium';
+    /**
+     * Whether the radio button is disabled.
+     * @prop
+     * @defaultValue false
+     */
+    disabled = false;
+    /**
+     * Whether the radio button is readonly.
+     * @prop
+     * @defaultValue false
+     */
+    readonly = false;
+    /**
+     * Position of the label relative to the radio button: 'right' | 'left'.
+     * @prop
+     * @defaultValue 'right'
+     */
+    labelPosition = 'right';
+    /**
+     * Whether the radio button is in an error state.
+     * @prop
+     * @defaultValue false
+     */
+    error = false;
+    /**
+     * Whether at least one radio in this group is required.
+     * (HTML)
+     */
+    required = false;
+    /** Internal checked state to control visuals + form internals */
+    internalChecked = false;
+    bcmRadioChange;
+    bcmBlur;
+    bcmFocus;
+    inputEl;
+    // ---- LIFECYCLE ----
+    componentWillLoad() {
+        this.host.setAttribute('tabindex', '-1');
+        this.internalChecked = !!this.checked;
+        this.updateFormValueAndValidity();
+    }
+    componentDidLoad() {
+        this.syncNativeChecked();
     }
     handleClick() {
         if (this.readonly || this.disabled)
             return;
-        if (!this.checked) {
+        if (!this.internalChecked) {
+            this.internalChecked = true;
             this.checked = true;
+            this.uncheckSiblings();
+            this.updateFormValueAndValidity();
             this.bcmRadioChange.emit();
         }
     }
+    updateFormValueAndValidity() {
+        if (!this.internals)
+            return;
+        const formValue = this.internalChecked ? this.value ?? 'on' : null;
+        this.internals.setFormValue(formValue);
+        const groupRequired = this.isGroupRequired();
+        if (!groupRequired || this.disabled) {
+            this.internals.setValidity({});
+            return;
+        }
+        if (!this.isGroupLeader()) {
+            this.internals.setValidity({});
+            return;
+        }
+        const groupChecked = this.isGroupChecked();
+        if (!groupChecked) {
+            this.internals.setValidity({ valueMissing: true }, validationMessages.getValidationMessage ? validationMessages.getValidationMessage('required') : 'This field is required.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    isGroupRequired() {
+        const root = this.host.getRootNode() || document;
+        const radios = Array.from(root.querySelectorAll(`bcm-radio[name="${this.name}"]`));
+        return radios.some(r => r.required);
+    }
+    isGroupChecked() {
+        const root = this.host.getRootNode() || document;
+        const radios = root.querySelectorAll(`bcm-radio[name="${this.name}"]`);
+        return Array.from(radios).some((el) => el.checked);
+    }
+    isGroupLeader() {
+        const root = this.host.getRootNode() || document;
+        const radios = Array.from(root.querySelectorAll(`bcm-radio[name="${this.name}"]`));
+        return radios[0] === this.host;
+    }
+    formResetCallback() {
+        this.checked = false;
+        this.internalChecked = false;
+        this.syncNativeChecked();
+        this.updateFormValueAndValidity();
+    }
+    // ---- WATCHERS ----
+    onCheckedChange(newVal) {
+        this.internalChecked = !!newVal;
+        this.syncNativeChecked();
+        this.updateFormValueAndValidity();
+    }
+    onInternalCheckedChange() {
+        this.syncNativeChecked();
+        this.updateFormValueAndValidity();
+    }
+    // ---- INTERNAL HELPERS ----
+    syncNativeChecked() {
+        if (this.inputEl) {
+            this.inputEl.checked = this.internalChecked;
+        }
+    }
+    uncheckSiblings() {
+        if (!this.name)
+            return;
+        const root = this.host.getRootNode() || document;
+        const others = root.querySelectorAll ? root.querySelectorAll(`bcm-radio[name="${this.name}"]`) : [];
+        others.forEach((el) => {
+            if (el === this.host)
+                return;
+            el.checked = false;
+        });
+    }
     getRadioStyle() {
         const defaultStyle = {
             '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',
@@ -149,19 +208,93 @@ const BcmRadio = class {
             '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',
             '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',
         };
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.error && errorStyle)), (this.disabled && disabledStyle)), (this.readonly && readonlyStyle));
+        return {
+            ...defaultStyle,
+            ...(this.error && errorStyle),
+            ...(this.disabled && disabledStyle),
+            ...(this.readonly && readonlyStyle),
+        };
     }
+    getRadioClass = tv.tv({
+        slots: {
+            container: 'bcm-ui-element bcm-radio group',
+            dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',
+            dotContainer: 'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',
+            labelClass: 'font-medium text-[--bcm-radio-text-color]',
+        },
+        variants: {
+            size: {
+                small: {
+                    container: 'gap-2',
+                    dotContainer: 'size-3.5',
+                    dot: 'size-2',
+                    labelClass: 'text-size-4',
+                },
+                medium: {
+                    container: 'gap-2.5',
+                    dotContainer: 'size-4',
+                    dot: 'size-2.5',
+                    labelClass: 'text-size-5',
+                },
+                large: {
+                    container: 'gap-3',
+                    dotContainer: 'size-[18px]',
+                    dot: 'size-3',
+                    labelClass: 'text-size-6',
+                },
+            },
+            checked: {
+                true: {
+                    dot: 'opacity-100',
+                },
+                false: {
+                    dot: 'opacity-0',
+                },
+            },
+            disabled: {
+                true: {
+                    container: 'cursor-not-allowed',
+                },
+                false: {
+                    container: 'cursor-pointer focus-visible:ring',
+                },
+            },
+            readonly: {
+                true: {
+                    container: 'cursor-default pointer-events-none',
+                    dot: 'opacity-100',
+                    dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',
+                },
+                false: '',
+            },
+            labelPosition: {
+                left: {
+                    container: 'inline-flex flex-row-reverse items-center',
+                },
+                right: {
+                    container: 'inline-flex flex-row items-center',
+                },
+            },
+        },
+    }, {
+        twMerge: false,
+    });
     render() {
         const { container, dot, dotContainer, labelClass } = this.getRadioClass({
             size: this.size,
-            checked: this.checked,
+            checked: this.internalChecked,
             disabled: this.disabled,
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (index.h("label", { key: '08ec0c4fc58c644ea64f5a555a28d85e3a461d20', class: container(), style: this.getRadioStyle() }, index.h("input", { key: 'e9e151e8bd0d85636a571e3df0da740da9b882ba', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), index.h("div", { key: '59822922a1e3c29f3e91b18c06d52d0a21ac981d', class: dotContainer() }, index.h("div", { key: '0bf638ed15145e2359d54fb1fb013dbcf19cdbb6', class: dot() })), index.h("span", { key: '86b95c35426abd26f800f4509f3a996f58865263', class: labelClass() }, index.h("slot", { key: 'e55448e4009dfaee59d056237e67e5a548013db0' }, this.label))));
+        const inputId = this._id + '-input';
+        return (index.h("label", { key: '0833a3d2521764dd8d82f9d8eab381c28b9b12fa', class: container(), style: this.getRadioStyle(), htmlFor: inputId }, index.h("input", { key: 'cfe8ed382b800b727705c790d3b3b953ed6bc402', id: inputId, "aria-label": this.label, role: "radio", "aria-checked": this.internalChecked.toString(), "aria-invalid": this.error, "aria-required": this.required, type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.internalChecked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e), ref: el => (this.inputEl = el) }), index.h("div", { key: '5393c76f1ff89afa5d0160e68f809603dd3e610d', class: dotContainer() }, index.h("div", { key: 'af362f3307977227a2f314dfcd2cf9d770bc30df', class: dot() })), index.h("span", { key: 'e911baf861c579b193f56e216225acbcde0a23da', class: labelClass() }, index.h("slot", { key: '18af978c84f9213a2a382e198a6b3bd9b775a7ea' }, this.label))));
     }
-    get host() { return index.getElement(this); }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"],
+        "internalChecked": ["onInternalCheckedChange"]
+    }; }
 };
 BcmRadio.style = radioCss;
 

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-radio.entry.cjs.js","sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n  @Element() host: HTMLBcmRadioElement;\n\n  /**\n   * The text label to display next to the radio button.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The name attribute for the radio input, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The value of the radio button, submitted with the form.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio button is selected.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the radio button is disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Whether the radio button is readonly.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  readonly = false;\n\n  /**\n   * Position of the label relative to the radio button: 'right' | 'left'.\n   * @prop\n   * @defaultValue 'right'\n   */\n  @Prop()\n  labelPosition: 'right' | 'left' = 'right';\n\n  /**\n   * Whether the radio button is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioChange',\n  })\n  bcmRadioChange: EventEmitter<void>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  private handleClick(): void {\n    if (this.readonly || this.disabled) return;\n    if (!this.checked) {\n      this.checked = true;\n      this.bcmRadioChange.emit();\n    }\n  }\n\n  private getRadioStyle() {\n    const defaultStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const errorStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const disabledStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n    };\n\n    const readonlyStyle = {\n      '--bcm-radio-bg': 'transparent',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.error && errorStyle),\n      ...(this.disabled && disabledStyle),\n      ...(this.readonly && readonlyStyle),\n    };\n  }\n\n  private getRadioClass = tv(\n    {\n      slots: {\n        container: 'bcm-ui-element bcm-radio group',\n        dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n        dotContainer:\n          'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n        labelClass: 'font-medium text-[--bcm-radio-text-color]',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            dotContainer: 'size-3.5',\n            dot: 'size-2',\n            labelClass: 'text-size-4',\n          },\n          medium: {\n            container: 'gap-2.5',\n            dotContainer: 'size-4',\n            dot: 'size-2.5',\n            labelClass: 'text-size-5',\n          },\n          large: {\n            container: 'gap-3',\n            dotContainer: 'size-[18px]',\n            dot: 'size-3',\n            labelClass: 'text-size-6',\n          },\n        },\n        checked: {\n          true: {\n            dot: 'opacity-100',\n          },\n          false: {\n            dot: 'opacity-0',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer focus-visible:ring',\n          },\n        },\n        readonly: {\n          true: {\n            container: 'cursor-default pointer-events-none',\n            dot: 'opacity-100',\n            dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n          },\n          false: '',\n        },\n        labelPosition: {\n          left: {\n            container: 'inline-flex flex-row-reverse items-center',\n          },\n          right: {\n            container: 'inline-flex flex-row items-center',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      labelPosition: this.labelPosition,\n    });\n\n    return (\n      <label class={container()} style={this.getRadioStyle()}>\n        <input\n          aria-label={this.label}\n          role=\"radio\"\n          aria-checked={this.checked.toString()}\n          type=\"radio\"\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          checked={this.checked}\n          class=\"appearance-none sr-only\"\n          onClick={() => this.handleClick()}\n          onFocus={e => this.bcmFocus.emit(e)}\n          onBlur={e => this.bcmBlur.emit(e)}\n        ></input>\n        <div class={dotContainer()}>\n          <div class={dot()}></div>\n        </div>\n        <span class={labelClass()}>\n          <slot>{this.label}</slot>\n        </span>\n      </label>\n    );\n  }\n}\n"],"names":["tv","h"],"mappings":"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"}
+{"version":3,"file":"bcm-radio.entry.cjs.js","sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter, Watch, State, AttachInternals } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { getValidationMessage } from '../../utils/validation-messages';\nimport { generateId } from '@utils/id/generate-id';\n\n@Component({\n  tag: 'bcm-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BcmRadio implements ComponentInterface {\n  @Element() host: HTMLBcmRadioElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-radio');\n\n  /**\n   * The text label to display next to the radio button.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The name attribute for the radio input, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The value of the radio button, submitted with the form.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio button is selected.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the radio button is disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Whether the radio button is readonly.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  readonly = false;\n\n  /**\n   * Position of the label relative to the radio button: 'right' | 'left'.\n   * @prop\n   * @defaultValue 'right'\n   */\n  @Prop()\n  labelPosition: 'right' | 'left' = 'right';\n\n  /**\n   * Whether the radio button is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Whether at least one radio in this group is required.\n   * (HTML)\n   */\n  @Prop()\n  required: boolean = false;\n\n  /** Internal checked state to control visuals + form internals */\n  @State() internalChecked: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioChange',\n  })\n  bcmRadioChange: EventEmitter<void>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  private inputEl: HTMLInputElement;\n\n  // ---- LIFECYCLE ----\n\n  componentWillLoad() {\n    this.host.setAttribute('tabindex', '-1');\n    this.internalChecked = !!this.checked;\n    this.updateFormValueAndValidity();\n  }\n\n  componentDidLoad() {\n    this.syncNativeChecked();\n  }\n\n  private handleClick(): void {\n    if (this.readonly || this.disabled) return;\n\n    if (!this.internalChecked) {\n      this.internalChecked = true;\n      this.checked = true;\n      this.uncheckSiblings();\n      this.updateFormValueAndValidity();\n      this.bcmRadioChange.emit();\n    }\n  }\n\n  private updateFormValueAndValidity() {\n    if (!this.internals) return;\n\n    const formValue = this.internalChecked ? this.value ?? 'on' : null;\n    this.internals.setFormValue(formValue);\n\n    const groupRequired = this.isGroupRequired();\n\n    if (!groupRequired || this.disabled) {\n      this.internals.setValidity({});\n      return;\n    }\n\n    if (!this.isGroupLeader()) {\n      this.internals.setValidity({});\n      return;\n    }\n\n    const groupChecked = this.isGroupChecked();\n\n    if (!groupChecked) {\n      this.internals.setValidity({ valueMissing: true }, getValidationMessage ? getValidationMessage('required') : 'This field is required.');\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  private isGroupRequired(): boolean {\n    const root = (this.host.getRootNode() as Document | ShadowRoot) || document;\n    const radios = Array.from(root.querySelectorAll(`bcm-radio[name=\"${this.name}\"]`)) as any[];\n    return radios.some(r => r.required);\n  }\n\n  private isGroupChecked(): boolean {\n    const root = (this.host.getRootNode() as Document | ShadowRoot) || document;\n    const radios = root.querySelectorAll(`bcm-radio[name=\"${this.name}\"]`);\n    return Array.from(radios).some((el: any) => el.checked);\n  }\n\n  private isGroupLeader(): boolean {\n    const root = (this.host.getRootNode() as Document | ShadowRoot) || document;\n    const radios = Array.from(root.querySelectorAll(`bcm-radio[name=\"${this.name}\"]`));\n    return radios[0] === this.host;\n  }\n\n  formResetCallback() {\n    this.checked = false;\n    this.internalChecked = false;\n    this.syncNativeChecked();\n    this.updateFormValueAndValidity();\n  }\n\n  // ---- WATCHERS ----\n\n  @Watch('checked')\n  onCheckedChange(newVal: boolean) {\n    this.internalChecked = !!newVal;\n    this.syncNativeChecked();\n    this.updateFormValueAndValidity();\n  }\n\n  @Watch('internalChecked')\n  onInternalCheckedChange() {\n    this.syncNativeChecked();\n    this.updateFormValueAndValidity();\n  }\n\n  // ---- INTERNAL HELPERS ----\n\n  private syncNativeChecked() {\n    if (this.inputEl) {\n      this.inputEl.checked = this.internalChecked;\n    }\n  }\n\n  private uncheckSiblings() {\n    if (!this.name) return;\n\n    const root = (this.host.getRootNode() as Document | ShadowRoot) || document;\n    const others = (root as any).querySelectorAll ? (root as any).querySelectorAll(`bcm-radio[name=\"${this.name}\"]`) : [];\n\n    others.forEach((el: any) => {\n      if (el === this.host) return;\n      el.checked = false;\n    });\n  }\n\n  private getRadioStyle() {\n    const defaultStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const errorStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const disabledStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n    };\n\n    const readonlyStyle = {\n      '--bcm-radio-bg': 'transparent',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.error && errorStyle),\n      ...(this.disabled && disabledStyle),\n      ...(this.readonly && readonlyStyle),\n    };\n  }\n\n  private getRadioClass = tv(\n    {\n      slots: {\n        container: 'bcm-ui-element bcm-radio group',\n        dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n        dotContainer:\n          'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n        labelClass: 'font-medium text-[--bcm-radio-text-color]',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            dotContainer: 'size-3.5',\n            dot: 'size-2',\n            labelClass: 'text-size-4',\n          },\n          medium: {\n            container: 'gap-2.5',\n            dotContainer: 'size-4',\n            dot: 'size-2.5',\n            labelClass: 'text-size-5',\n          },\n          large: {\n            container: 'gap-3',\n            dotContainer: 'size-[18px]',\n            dot: 'size-3',\n            labelClass: 'text-size-6',\n          },\n        },\n        checked: {\n          true: {\n            dot: 'opacity-100',\n          },\n          false: {\n            dot: 'opacity-0',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer focus-visible:ring',\n          },\n        },\n        readonly: {\n          true: {\n            container: 'cursor-default pointer-events-none',\n            dot: 'opacity-100',\n            dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n          },\n          false: '',\n        },\n        labelPosition: {\n          left: {\n            container: 'inline-flex flex-row-reverse items-center',\n          },\n          right: {\n            container: 'inline-flex flex-row items-center',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n      size: this.size,\n      checked: this.internalChecked,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      labelPosition: this.labelPosition,\n    });\n\n    const inputId = this._id + '-input';\n\n    return (\n      <label class={container()} style={this.getRadioStyle()} htmlFor={inputId}>\n        <input\n          id={inputId}\n          aria-label={this.label}\n          role=\"radio\"\n          aria-checked={this.internalChecked.toString()}\n          aria-invalid={this.error}\n          aria-required={this.required}\n          type=\"radio\"\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          checked={this.internalChecked}\n          class=\"appearance-none sr-only\"\n          onClick={() => this.handleClick()}\n          onFocus={e => this.bcmFocus.emit(e)}\n          onBlur={e => this.bcmBlur.emit(e)}\n          ref={el => (this.inputEl = el as HTMLInputElement)}\n        ></input>\n        <div class={dotContainer()}>\n          <div class={dot()}></div>\n        </div>\n        <span class={labelClass()}>\n          <slot>{this.label}</slot>\n        </span>\n      </label>\n    );\n  }\n}\n"],"names":["generateId","getValidationMessage","tv","h"],"mappings":"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"}

package/dist/cjs/bcm-segment.bcm-segmented-picker.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-segment.bcm-segmented-picker.entry.cjs.js","sources":["src/components/segmented-picker/segment.css?tag=bcm-segment&encapsulation=shadow","src/components/segmented-picker/segment.component.tsx","src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.segment {\n  white-space: nowrap;\n  flex: 1;\n  width: 100%;\n}\n\n.divider {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 1px;\n  height: 20px;\n  background-color: var(--bcm-ui-color-border-default);\n  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);\n  pointer-events: none;\n}\n\n.divider-hidden {\n  opacity: 0;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * Individual segment option component\n * @slot - Default slot for segment label content\n */\n@Component({\n  tag: 'bcm-segment',\n  styleUrl: 'segment.css',\n  shadow: true,\n})\nexport class BcmSegment {\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier for this segment\n   */\n  @Prop({ reflect: true })\n  value!: string;\n\n  /**\n   * Disabled state\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Selected state (controlled by parent)\n   */\n  @Prop({ mutable: true, reflect: true })\n  selected: boolean = false;\n\n  /**\n   * Size variant (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Index of this segment (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  index: number = 0;\n\n  /**\n   * Index of currently active segment (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  activeIndex: number = 0;\n\n  /**\n   * Internal event emitted when segment is clicked\n   */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n    eventName: 'bcmSegmentClick',\n  })\n  bcmSegmentClick: EventEmitter<string>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.bcmSegmentClick.emit(this.value);\n    }\n  };\n\n  /**\n   * Tailwind class configuration\n   */\n  private segmentClass = tv({\n    base: 'segment relative z-20 px-3 text-center font-medium transition-colors border-none bg-transparent select-none',\n    variants: {\n      size: {\n        small: 'text-size-4 py-px',\n        medium: 'text-size-5 py-1',\n        large: 'text-size-6 py-2',\n      },\n      selected: {\n        true: 'text-color-header',\n        false: 'text-color-helper',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n        false: 'cursor-pointer hover:text-color-header',\n      },\n    },\n  });\n\n  render() {\n    // Determine if divider should be hidden\n    // Hide divider if this segment or the next segment is active\n    const hideDivider = this.selected || this.index === this.activeIndex - 1;\n\n    return (\n      <Host role=\"radio\" aria-checked={this.selected.toString()}>\n        <button\n          class={this.segmentClass({\n            size: this.size,\n            selected: this.selected,\n            disabled: this.disabled,\n          })}\n          onClick={this.handleClick}\n          disabled={this.disabled}\n          type=\"button\"\n        >\n          <slot />\n        </button>\n        {/* Divider after each segment except the last one */}\n        <div class={`divider ${hideDivider ? 'divider-hidden' : ''}`} />\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.segmented-container {\n  /* CSS Variables for indicator positioning */\n  --indicator-left: 0%;\n  --indicator-width: 0%;\n}\n\n/* Indicator transitions */\n.indicator {\n  left: var(--indicator-left);\n  width: var(--indicator-width);\n  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Grid utilities if not available in Tailwind */\n.grid-auto-flow-col {\n  grid-auto-flow: column;\n}\n\n.grid-auto-columns-fr {\n  grid-auto-columns: minmax(0, 1fr);\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen, Method, AttachInternals } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * Modern Segmented Picker component with CSS Grid-based indicator\n * @slot - Default slot for bcm-segment components\n */\n@Component({\n  tag: 'bcm-segmented-picker',\n  styleUrl: 'segmented-picker.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BcmSegmentedPicker {\n  @Element() el: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Selected segment value\n   */\n  @Prop({ mutable: true, reflect: true })\n  value: string;\n\n  /**\n   * Name attribute for form association\n   */\n  @Prop({ reflect: true })\n  name: string;\n\n  /**\n   * Whether this field is required in a form\n   */\n  @Prop({ reflect: true })\n  required: boolean = false;\n\n  /**\n   * Size variant\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Full width flag\n   */\n  @Prop({ reflect: true, attribute: 'full-width' })\n  fullWidth: boolean = false;\n\n  /**\n   * Disabled state\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Enable shadow on container\n   */\n  @Prop({ reflect: true })\n  shadow: boolean = false;\n\n  /**\n   * Emits when selected segment changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmSegmentChange',\n  })\n  bcmSegmentChange: EventEmitter<{ value: string; previousValue: string }>;\n\n  @State() segments: Array<{ value: string; disabled: boolean }> = [];\n  @State() activeIndex: number = 0;\n\n  private segmentElements: Element[] = [];\n  private hiddenInput: HTMLInputElement;\n\n  componentWillLoad() {\n    this.discoverSegments();\n    // Initialize active index in componentWillLoad to avoid re-render warning\n    this.updateActiveIndex();\n    // Initialize form value\n    this.updateFormValueAndValidity();\n  }\n\n  componentDidLoad() {\n    this.updateSegmentStates();\n    this.updateCSSVariables();\n    this.propagatePropsToSegments();\n  }\n\n  /**\n   * When the parent <form> is reset, reset the segmented picker state\n   */\n  formResetCallback() {\n    // Reset to first enabled segment\n    const firstEnabledSegment = this.segments.find(s => !s.disabled);\n    if (firstEnabledSegment) {\n      this.value = firstEnabledSegment.value;\n    }\n  }\n\n  /**\n   * Discovers all bcm-segment children\n   */\n  private discoverSegments() {\n    this.segmentElements = Array.from(this.el.querySelectorAll('bcm-segment'));\n    this.segments = this.segmentElements.map((segment: any) => ({\n      value: segment.value,\n      disabled: segment.disabled || false,\n    }));\n\n    // Set initial value if not provided\n    if (!this.value && this.segments.length > 0) {\n      const firstEnabledSegment = this.segments.find(s => !s.disabled);\n      if (firstEnabledSegment) {\n        this.value = firstEnabledSegment.value;\n      }\n    }\n  }\n\n  /**\n   * Updates the active index based on current value\n   */\n  private updateActiveIndex() {\n    const index = this.segments.findIndex(s => s.value === this.value);\n    this.activeIndex = index >= 0 ? index : 0;\n  }\n\n  /**\n   * Updates ElementInternals form value and validity\n   */\n  private updateFormValueAndValidity() {\n    if (!this.internals) return;\n\n    // Set form value\n    this.internals.setFormValue(this.value || '');\n\n    // Update hidden input for validation\n    if (this.hiddenInput) {\n      this.hiddenInput.value = this.value || '';\n      this.hiddenInput.required = this.required;\n      this.hiddenInput.disabled = this.disabled;\n\n      const validity = this.hiddenInput.validity;\n      const message = this.hiddenInput.validationMessage;\n\n      this.internals.setValidity(validity, message, this.hiddenInput);\n    }\n  }\n\n  /**\n   * Updates selected state of all segment elements\n   */\n  private updateSegmentStates() {\n    this.segmentElements.forEach((segment: any) => {\n      segment.selected = segment.value === this.value;\n    });\n  }\n\n  /**\n   * Updates CSS custom properties for indicator positioning\n   */\n  private updateCSSVariables() {\n    const container = this.el.shadowRoot?.querySelector('.segmented-container') as HTMLElement;\n    if (container && this.segments.length > 0) {\n      const segmentWidth = 100 / this.segments.length;\n      const leftPosition = this.activeIndex * segmentWidth;\n\n      container.style.setProperty('--indicator-left', `${leftPosition}%`);\n      container.style.setProperty('--indicator-width', `${segmentWidth}%`);\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string) {\n    this.updateActiveIndex();\n    this.updateSegmentStates();\n    this.updateCSSVariables();\n    this.updateFormValueAndValidity();\n\n    if (oldValue !== undefined && oldValue !== newValue) {\n      this.bcmSegmentChange.emit({\n        value: newValue,\n        previousValue: oldValue,\n      });\n    }\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  handleValidationPropsChange() {\n    this.updateFormValueAndValidity();\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.propagatePropsToSegments();\n  }\n\n  /**\n   * Propagates parent props to child segments\n   */\n  private propagatePropsToSegments() {\n    this.segmentElements.forEach((segment: any, index: number) => {\n      segment.size = this.size;\n      segment.index = index;\n      segment.activeIndex = this.activeIndex;\n    });\n  }\n\n  /**\n   * Handles segment click events from children\n   */\n  @Listen('bcmSegmentClick')\n  handleSegmentClick(event: CustomEvent<string>) {\n    const clickedValue = event.detail;\n    const segment = this.segments.find(s => s.value === clickedValue);\n\n    if (segment && !segment.disabled && !this.disabled) {\n      this.value = clickedValue;\n    }\n  }\n\n  /**\n   * Public method to programmatically set active segment\n   */\n  @Method()\n  async setValue(value: string): Promise<void> {\n    const segment = this.segments.find(s => s.value === value);\n    if (segment && !segment.disabled) {\n      this.value = value;\n    }\n  }\n\n  /**\n   * Public method to get active segment value\n   */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.value;\n  }\n\n  /**\n   * Tailwind class configuration\n   */\n  private containerClass = tv({\n    base: 'segmented-container inline-flex relative rounded-lg border border-solid border-color-default bg-color-default overflow-hidden',\n    variants: {\n      size: {\n        small: 'text-size-4',\n        medium: 'text-size-5',\n        large: 'text-size-6',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n      shadow: {\n        true: 'shadow-md',\n        false: '',\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed',\n        false: 'cursor-pointer',\n      },\n    },\n  });\n\n  private indicatorClass = tv({\n    base: 'indicator absolute inset-y-0 bg-color-base rounded shadow-sm z-20',\n    variants: {\n      size: {\n        small: '',\n        medium: '',\n        large: '',\n      },\n    },\n  });\n\n  render() {\n    return (\n      <Host>\n        {/* Hidden input for native form validation */}\n        <input\n          ref={el => (this.hiddenInput = el as HTMLInputElement)}\n          type=\"text\"\n          name={this.name}\n          value={this.value || ''}\n          required={this.required}\n          disabled={this.disabled}\n          tabindex={-1}\n          style={{\n            position: 'absolute',\n            width: '1px',\n            height: '1px',\n            padding: '0',\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            border: '0',\n          }}\n          aria-hidden=\"true\"\n        />\n\n        <div\n          class={this.containerClass({\n            size: this.size,\n            fullWidth: this.fullWidth,\n            shadow: this.shadow,\n            disabled: this.disabled,\n          })}\n          role=\"radiogroup\"\n          aria-required={this.required}\n          aria-disabled={this.disabled}\n        >\n          {/* Sliding indicator - CSS-animated via CSS variables */}\n          <div class={this.indicatorClass({ size: this.size })} />\n\n          {/* Segments grid */}\n          <div class=\"segments-grid grid grid-auto-flow-col grid-auto-columns-fr relative w-full\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["tv","h","Host"],"mappings":"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"}