bromcom-ui-next 0.1.30 → 0.1.31

package/dist/components/bcm-radio.js

@@ -1,5 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { t as tv } from './p-CEcVC0yX.js';
+import { g as getValidationMessage } from './p-nf_HKsGq.js';
+import { g as generateId } from './p-IBjzkjef.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)}";
 
@@ -13,115 +15,166 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
         this.bcmRadioChange = createEvent(this, "bcmRadioChange", 1);
         this.bcmBlur = createEvent(this, "bcmBlur", 1);
         this.bcmFocus = 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({
-            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,
-        });
+        this.internals = this.attachInternals();
+    }
+    get host() { return this; }
+    internals;
+    _id = 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 }, getValidationMessage ? 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)',
@@ -151,30 +204,110 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
             '--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({
+        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 (h("label", { key: '08ec0c4fc58c644ea64f5a555a28d85e3a461d20', class: container(), style: this.getRadioStyle() }, 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) }), h("div", { key: '59822922a1e3c29f3e91b18c06d52d0a21ac981d', class: dotContainer() }, h("div", { key: '0bf638ed15145e2359d54fb1fb013dbcf19cdbb6', class: dot() })), h("span", { key: '86b95c35426abd26f800f4509f3a996f58865263', class: labelClass() }, h("slot", { key: 'e55448e4009dfaee59d056237e67e5a548013db0' }, this.label))));
+        const inputId = this._id + '-input';
+        return (h("label", { key: '0833a3d2521764dd8d82f9d8eab381c28b9b12fa', class: container(), style: this.getRadioStyle(), htmlFor: inputId }, 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) }), h("div", { key: '5393c76f1ff89afa5d0160e68f809603dd3e610d', class: dotContainer() }, h("div", { key: 'af362f3307977227a2f314dfcd2cf9d770bc30df', class: dot() })), h("span", { key: 'e911baf861c579b193f56e216225acbcde0a23da', class: labelClass() }, h("slot", { key: '18af978c84f9213a2a382e198a6b3bd9b775a7ea' }, this.label))));
     }
-    get host() { return this; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"],
+        "internalChecked": ["onInternalCheckedChange"]
+    }; }
     static get style() { return radioCss; }
-}, [257, "bcm-radio", {
+}, [321, "bcm-radio", {
+        "_id": [513, "id"],
         "label": [1],
         "name": [1],
         "value": [1],
-        "checked": [516],
+        "checked": [1540],
         "size": [1],
         "disabled": [4],
         "readonly": [4],
         "labelPosition": [1, "label-position"],
-        "error": [4]
+        "error": [4],
+        "required": [4],
+        "internalChecked": [32]
+    }, undefined, {
+        "checked": ["onCheckedChange"],
+        "internalChecked": ["onInternalCheckedChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/bcm-radio.js.map

@@ -1 +1 @@
-{"file":"bcm-radio.js","mappings":"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","names":["BcmRadio","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"bcm-radio.js","mappings":"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","names":["BcmRadio","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/{bcm-tabs-list.d.ts → bcm-segment.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface BcmTabsList extends Components.BcmTabsList, HTMLElement {}
-export const BcmTabsList: {
-    prototype: BcmTabsList;
-    new (): BcmTabsList;
+interface BcmSegment extends Components.BcmSegment, HTMLElement {}
+export const BcmSegment: {
+    prototype: BcmSegment;
+    new (): BcmSegment;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/bcm-segment.js

@@ -0,0 +1,110 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
+
+const segmentCss = ".absolute{position:absolute}.relative{position:relative}.flex{display:flex}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.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)}:host{align-items:center;display:flex;position:relative;width:100%}.segment{flex:1;white-space:nowrap;width:100%}.divider{background-color:var(--bcm-ui-color-border-default);height:20px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%);transition:opacity .8s cubic-bezier(.4,0,.2,1);width:1px}.divider-hidden{opacity:0}.static{position:static}.z-20{z-index:20}.hidden{display:none}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.border-none{border-style:none}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.text-center{text-align:center}.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-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-header:hover{color:var(--bcm-ui-color-text-header)}";
+
+const BcmSegment$1 = /*@__PURE__*/ proxyCustomElement(class BcmSegment extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bcmSegmentClick = createEvent(this, "bcmSegmentClick", 5);
+    }
+    get el() { return this; }
+    /**
+     * Unique identifier for this segment
+     */
+    value;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Selected state (controlled by parent)
+     */
+    selected = false;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size = 'medium';
+    /**
+     * Index of this segment (inherited from parent)
+     */
+    index = 0;
+    /**
+     * Index of currently active segment (inherited from parent)
+     */
+    activeIndex = 0;
+    /**
+     * Internal event emitted when segment is clicked
+     */
+    bcmSegmentClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bcmSegmentClick.emit(this.value);
+        }
+    };
+    /**
+     * Tailwind class configuration
+     */
+    segmentClass = tv({
+        base: 'segment relative z-20 px-3 text-center font-medium transition-colors border-none bg-transparent select-none',
+        variants: {
+            size: {
+                small: 'text-size-4 py-px',
+                medium: 'text-size-5 py-1',
+                large: 'text-size-6 py-2',
+            },
+            selected: {
+                true: 'text-color-header',
+                false: 'text-color-helper',
+            },
+            disabled: {
+                true: 'cursor-not-allowed opacity-50',
+                false: 'cursor-pointer hover:text-color-header',
+            },
+        },
+    });
+    render() {
+        // Determine if divider should be hidden
+        // Hide divider if this segment or the next segment is active
+        const hideDivider = this.selected || this.index === this.activeIndex - 1;
+        return (h(Host, { key: 'fd8cc62e6cc3a1ad5eb40390c47907cc3c97a7b9', role: "radio", "aria-checked": this.selected.toString() }, h("button", { key: '17c5b00494a44939ec6556df9ee11b4fdf8d12e2', class: this.segmentClass({
+                size: this.size,
+                selected: this.selected,
+                disabled: this.disabled,
+            }), onClick: this.handleClick, disabled: this.disabled, type: "button" }, h("slot", { key: '20d275dcee6f951825facb6a171a57d96ec73f00' })), h("div", { key: '88fc43e25f3967569dbc5e56a5837fbedc3407e8', class: `divider ${hideDivider ? 'divider-hidden' : ''}` })));
+    }
+    static get style() { return segmentCss; }
+}, [257, "bcm-segment", {
+        "value": [513],
+        "disabled": [516],
+        "selected": [1540],
+        "size": [1025],
+        "index": [1026],
+        "activeIndex": [1026, "active-index"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-segment"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-segment":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmSegment$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmSegment = BcmSegment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmSegment, defineCustomElement };
+//# sourceMappingURL=bcm-segment.js.map
+
+//# sourceMappingURL=bcm-segment.js.map

package/dist/components/bcm-segment.js.map

@@ -0,0 +1 @@
+{"file":"bcm-segment.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,wrEAAwrE;;MCY9rEA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAGrB;;AAEG;AAEH,IAAA,KAAK;AAEL;;AAEG;IAEH,QAAQ,GAAY,KAAK;AAEzB;;AAEG;IAEH,QAAQ,GAAY,KAAK;AAEzB;;AAEG;IAEH,IAAI,GAAiC,QAAQ;AAE7C;;AAEG;IAEH,KAAK,GAAW,CAAC;AAEjB;;AAEG;IAEH,WAAW,GAAW,CAAC;AAEvB;;AAEG;AAOH,IAAA,eAAe;IAEP,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;AAEzC,KAAC;AAED;;AAEG;IACK,YAAY,GAAG,EAAE,CAAC;AACxB,QAAA,IAAI,EAAE,6GAA6G;AACnH,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,mBAAmB;AAC1B,gBAAA,MAAM,EAAE,kBAAkB;AAC1B,gBAAA,KAAK,EAAE,kBAAkB;AAC1B,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE,mBAAmB;AACzB,gBAAA,KAAK,EAAE,mBAAmB;AAC3B,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE,+BAA+B;AACrC,gBAAA,KAAK,EAAE,wCAAwC;AAChD,aAAA;AACF,SAAA;AACF,KAAA,CAAC;IAEF,MAAM,GAAA;;;AAGJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC;AAExE,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,cAAA,EAAe,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,EACvD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EAET,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,WAAW,GAAG,gBAAgB,GAAG,EAAE,CAAA,CAAE,EAAI,CAAA,CAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmSegment","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/segmented-picker/segment.css?tag=bcm-segment&encapsulation=shadow","src/components/segmented-picker/segment.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"],"version":3}