bromcom-ui-next 0.1.5 → 0.1.6

package/dist/components/bcm-checkbox.js

@@ -0,0 +1,256 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
+import { c as ce } from './p-5fcf77f9.js';
+import { g as generateId } from './p-ba2410ef.js';
+
+const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color{color:var(--bcm-ui-color-text-default)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
+const BcmCheckboxStyle0 = checkboxCss;
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmCheckboxChange = createEvent(this, "bcmCheckboxChange", 1);
+        /**
+         * Unique ID for the component. Automatically generated if not specified.
+         */
+        this._id = generateId('bcm-checkbox');
+        /**
+         * Determines if the checkbox is in an indeterminate state.
+         * This is useful when some items in a group of checkboxes are selected and others are not.
+         */
+        this.indeterminate = false;
+        /**
+         * Size variant of the checkbox
+         */
+        this.size = 'medium';
+        /**
+         * Determines if the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Indicates if the checkbox is in an error state.
+         * This affects the visual styling of the component.
+         */
+        this.error = false;
+        /**
+         * Determines if the checkbox is disabled
+         */
+        this.disabled = false;
+        /**
+         * Controls the position of the label relative to the checkbox
+         */
+        this.labelPosition = 'right';
+        /**
+         * Handles change events on the checkbox
+         * Updates state and emits the change event
+         */
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            if (this.inputElement) {
+                this.inputElement.indeterminate = false;
+                this.indeterminate = false;
+                this.internalChecked = !this.internalChecked;
+                this.inputElement.checked = this.internalChecked;
+                this.bcmCheckboxChange.emit({
+                    element: this.inputElement,
+                    checked: this.internalChecked,
+                });
+            }
+        };
+        /**
+         * Tailwind Variants definition for the component
+         * Configures styling based on component props
+         */
+        this.classes = ce({
+            slots: {
+                container: 'flex items-center bcm-ui-element bcm-checkbox',
+                checkbox: [
+                    'flex items-center justify-center rounded',
+                    'border border-solid border-[--border-color]',
+                    'bg-[--unchecked-color]',
+                    'transition-colors duration-200 ease-out',
+                    'peer-checked:bg-[--checked-color]',
+                    'peer-checked:border-[--checked-color]',
+                    'peer-indeterminate:bg-[--checked-color]',
+                    'peer-indeterminate:border-[--checked-color]',
+                    'hover:border-[--hover-border-color]',
+                    'hover:peer-checked:bg-[--hover-color]',
+                    'hover:peer-indeterminate:bg-[--hover-color]',
+                ],
+                iconContainer: 'flex items-center justify-center',
+                label: 'select-none text-color',
+                hiddenInput: 'absolute w-0 h-0 opacity-0 peer',
+            },
+            variants: {
+                size: {
+                    small: {
+                        container: 'gap-2',
+                        checkbox: 'size-3',
+                        iconContainer: 'size-2 text-size-2',
+                        label: 'text-size-4',
+                        hiddenInput: 'size-3',
+                    },
+                    medium: {
+                        container: 'gap-2.5',
+                        checkbox: 'size-4',
+                        iconContainer: 'size-[10px] text-size-3',
+                        label: 'text-size-5',
+                        hiddenInput: 'size-4',
+                    },
+                    large: {
+                        container: 'gap-3',
+                        checkbox: 'size-[18px]',
+                        iconContainer: 'size-4 text-size-4',
+                        label: 'text-size-6',
+                        hiddenInput: 'size-[18px]',
+                    },
+                },
+                disabled: {
+                    true: {
+                        container: 'cursor-not-allowed',
+                        checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',
+                        label: 'cursor-not-allowed text-color-disabled',
+                        iconContainer: 'text-color-disabled',
+                        hiddenInput: 'cursor-not-allowed',
+                    },
+                    false: {
+                        container: 'cursor-pointer',
+                        checkbox: 'cursor-pointer',
+                        label: 'cursor-pointer text-color',
+                        iconContainer: 'text-color-base',
+                        hiddenInput: 'cursor-pointer',
+                    },
+                },
+                labelPosition: {
+                    left: {
+                        container: 'flex-row-reverse',
+                    },
+                    right: {
+                        container: 'flex-row',
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                checked: false,
+                disabled: false,
+                error: false,
+                labelPosition: 'right',
+            },
+        }, { twMerge: false });
+    }
+    /**
+     * Lifecycle method that runs before the component first renders.
+     * Initializes the internal checked state.
+     */
+    componentWillLoad() {
+        this.internalChecked = this.checked !== undefined ? this.checked : false;
+    }
+    /**
+     * Lifecycle method that runs after the component has rendered.
+     * Updates the indeterminate state of the input element.
+     */
+    componentDidLoad() {
+        this.updateIndeterminateState();
+    }
+    /**
+     * Watches for changes to the checked prop and updates the internal state
+     * @param newValue The new checked value
+     */
+    syncCheckedProp(newValue) {
+        if (newValue !== undefined) {
+            this.internalChecked = newValue;
+        }
+    }
+    /**
+     * Watches for changes to indeterminate and internalChecked states
+     * Updates the input element accordingly
+     */
+    updateIndeterminateState() {
+        if (this.inputElement) {
+            this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;
+            this.inputElement.checked = this.internalChecked;
+        }
+    }
+    /**
+     * Returns the CSS custom properties based on component state
+     * @returns Object with CSS custom properties
+     */
+    getStyles() {
+        const defaultStyles = {
+            '--checked-color': 'var(--bcm-ui-color-background-primary-default)',
+            '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',
+            '--border-color': 'var(--bcm-ui-color-border-default)',
+            '--hover-border-color': 'var(--bcm-ui-color-border-primary)',
+            '--hover-color': 'var(--bcm-ui-color-background-info-hover)',
+        };
+        const errorStyles = {
+            '--checked-color': 'var(--bcm-ui-color-background-error-default)',
+            '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',
+            '--border-color': 'var(--bcm-ui-color-border-error)',
+            '--hover-border-color': 'var(--bcm-ui-color-border-error)',
+            '--hover-color': 'var(--bcm-ui-color-border-error)',
+        };
+        const disabledStyles = {
+            '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',
+            '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',
+            '--border-color': 'var(--bcm-ui-color-border-disabled)',
+            '--hover-color': 'var(--bcm-ui-color-border-disabled)',
+            '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',
+        };
+        return Object.assign(Object.assign(Object.assign({}, defaultStyles), (this.error ? errorStyles : {})), (this.disabled ? disabledStyles : {}));
+    }
+    /**
+     * Renders the checkbox component
+     */
+    render() {
+        const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });
+        const internalId = this._id + '-internal-checkbox' || this.name;
+        return (h("div", { key: '929811f64a1ff48905b61f227554cccfae903108', class: container(), style: this.getStyles(), part: "checkbox-wrapper" }, h("div", { key: '69dc0ca98a78368e72641152e8fc324b08819fa3', class: "relative inline-flex" }, h("input", { key: '97784b43009500e631190ed82926c64c41ac00a4', type: "checkbox", role: "checkbox", id: internalId, name: this.name, checked: this.internalChecked, indeterminate: this.indeterminate, disabled: this.disabled, class: hiddenInput(), "aria-checked": this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false', "aria-invalid": this.error, "aria-label": this.label || 'Checkbox', onChange: this.handleChange, ref: el => (this.inputElement = el) }), h("div", { key: '8d3d03ab4f96d3393faec1bd5a8feff2160eae27', class: checkbox(), onClick: this.handleChange, part: "checkbox" }, this.internalChecked && (h("div", { key: '4e9043412e09f344da5c019f9c40a1f99e859220', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: 'd041938bee4fb0adb5036846c22662d2bd95ba9b', name: "fa-regular fa-check" }))), this.indeterminate && !this.internalChecked && (h("div", { key: '25091614ed7d86cc27a5799e4358edf58f918192', class: iconContainer(), part: "icon" }, h("bcm-icon", { key: '0aa679bcf957cc272621132a54b76067ce0b90ea', name: "fa-regular fa-minus" }))))), h("label", { key: '44b7e84f1e61febee09baad2a0957172455726e0', htmlFor: internalId, class: label(), part: "label" }, this.label)));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "checked": ["syncCheckedProp"],
+        "indeterminate": ["updateIndeterminateState"],
+        "internalChecked": ["updateIndeterminateState"]
+    }; }
+    static get style() { return BcmCheckboxStyle0; }
+}, [1, "bcm-checkbox", {
+        "_id": [513, "id"],
+        "label": [1],
+        "name": [1],
+        "indeterminate": [1028],
+        "size": [1],
+        "checked": [1028],
+        "error": [4],
+        "disabled": [4],
+        "labelPosition": [1, "label-position"],
+        "internalChecked": [32]
+    }, undefined, {
+        "checked": ["syncCheckedProp"],
+        "indeterminate": ["updateIndeterminateState"],
+        "internalChecked": ["updateIndeterminateState"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Checkbox);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmCheckbox, defineCustomElement };
+
+//# sourceMappingURL=bcm-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-checkbox.js","mappings":"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","names":["tv"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n    tag: 'bcm-checkbox',\n    styleUrl: 'checkbox.css',\n    shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() el: HTMLElement;\n\n    /**\n     * Unique ID for the component. Automatically generated if not specified.\n     */\n    @Prop({ attribute: 'id', reflect: true })\n    _id?: string = generateId('bcm-checkbox');\n\n    /**\n     * Label text to display next to the checkbox\n     */\n    @Prop()\n    label?: string;\n\n    /**\n     * Name attribute for the checkbox when used in a form\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * Determines if the checkbox is in an indeterminate state.\n     * This is useful when some items in a group of checkboxes are selected and others are not.\n     */\n    @Prop({ mutable: true })\n    indeterminate: boolean = false;\n\n    /**\n     * Size variant of the checkbox\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Determines if the checkbox is checked\n     */\n    @Prop({ mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Indicates if the checkbox is in an error state.\n     * This affects the visual styling of the component.\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * Determines if the checkbox is disabled\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Controls the position of the label relative to the checkbox\n     */\n    @Prop()\n    labelPosition: 'left' | 'right' = 'right';\n\n    /**\n     * Internal state to track checked status\n     */\n    @State() internalChecked: boolean;\n\n    /**\n     * Event emitted when the checked state changes\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmCheckboxChange',\n    })\n    bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n    /** Reference to the underlying input element */\n    private inputElement: HTMLInputElement;\n\n    /**\n     * Lifecycle method that runs before the component first renders.\n     * Initializes the internal checked state.\n     */\n    componentWillLoad() {\n        this.internalChecked = this.checked !== undefined ? this.checked : false;\n    }\n\n    /**\n     * Lifecycle method that runs after the component has rendered.\n     * Updates the indeterminate state of the input element.\n     */\n    componentDidLoad() {\n        this.updateIndeterminateState();\n    }\n\n    /**\n     * Watches for changes to the checked prop and updates the internal state\n     * @param newValue The new checked value\n     */\n    @Watch('checked')\n    syncCheckedProp(newValue: boolean | undefined) {\n        if (newValue !== undefined) {\n            this.internalChecked = newValue;\n        }\n    }\n\n    /**\n     * Watches for changes to indeterminate and internalChecked states\n     * Updates the input element accordingly\n     */\n    @Watch('indeterminate')\n    @Watch('internalChecked')\n    updateIndeterminateState() {\n        if (this.inputElement) {\n            this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n        }\n    }\n\n    /**\n     * Handles change events on the checkbox\n     * Updates state and emits the change event\n     */\n    private handleChange = () => {\n        if (this.disabled) return;\n        if (this.inputElement) {\n            this.inputElement.indeterminate = false;\n            this.indeterminate = false;\n            this.internalChecked = !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n            this.bcmCheckboxChange.emit({\n                element: this.inputElement,\n                checked: this.internalChecked,\n            });\n        }\n    };\n\n    /**\n     * Returns the CSS custom properties based on component state\n     * @returns Object with CSS custom properties\n     */\n    private getStyles() {\n        const defaultStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n            '--border-color': 'var(--bcm-ui-color-border-default)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n            '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n        };\n\n        const errorStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-color': 'var(--bcm-ui-color-border-error)',\n        };\n\n        const disabledStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--border-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n        };\n\n        return {\n            ...defaultStyles,\n            ...(this.error ? errorStyles : {}),\n            ...(this.disabled ? disabledStyles : {}),\n        };\n    }\n\n    /**\n     * Tailwind Variants definition for the component\n     * Configures styling based on component props\n     */\n    private classes = tv(\n        {\n            slots: {\n                container: 'flex items-center bcm-ui-element bcm-checkbox',\n                checkbox: [\n                    'flex items-center justify-center rounded',\n                    'border border-solid border-[--border-color]',\n                    'bg-[--unchecked-color]',\n                    'transition-colors duration-200 ease-out',\n                    'peer-checked:bg-[--checked-color]',\n                    'peer-checked:border-[--checked-color]',\n                    'peer-indeterminate:bg-[--checked-color]',\n                    'peer-indeterminate:border-[--checked-color]',\n                    'hover:border-[--hover-border-color]',\n                    'hover:peer-checked:bg-[--hover-color]',\n                    'hover:peer-indeterminate:bg-[--hover-color]',\n                ],\n                iconContainer: 'flex items-center justify-center',\n                label: 'select-none text-color',\n                hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        checkbox: 'size-3',\n                        iconContainer: 'size-2 text-size-2',\n                        label: 'text-size-4',\n                        hiddenInput: 'size-3',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        checkbox: 'size-4',\n                        iconContainer: 'size-[10px] text-size-3',\n                        label: 'text-size-5',\n                        hiddenInput: 'size-4',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        checkbox: 'size-[18px]',\n                        iconContainer: 'size-4 text-size-4',\n                        label: 'text-size-6',\n                        hiddenInput: 'size-[18px]',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                        checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n                        label: 'cursor-not-allowed text-color-disabled',\n                        iconContainer: 'text-color-disabled',\n                        hiddenInput: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer',\n                        checkbox: 'cursor-pointer',\n                        label: 'cursor-pointer text-color',\n                        iconContainer: 'text-color-base',\n                        hiddenInput: 'cursor-pointer',\n                    },\n                },\n                labelPosition: {\n                    left: {\n                        container: 'flex-row-reverse',\n                    },\n                    right: {\n                        container: 'flex-row',\n                    },\n                },\n            },\n            defaultVariants: {\n                size: 'medium',\n                checked: false,\n                disabled: false,\n                error: false,\n                labelPosition: 'right',\n            },\n        },\n        { twMerge: false },\n    );\n\n    /**\n     * Renders the checkbox component\n     */\n    render() {\n        const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n        const internalId = this._id + '-internal-checkbox' || this.name;\n\n        return (\n            <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n                <div class=\"relative inline-flex\">\n                    <input\n                        type=\"checkbox\"\n                        role=\"checkbox\"\n                        id={internalId}\n                        name={this.name}\n                        checked={this.internalChecked}\n                        indeterminate={this.indeterminate}\n                        disabled={this.disabled}\n                        class={hiddenInput()}\n                        aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n                        aria-invalid={this.error}\n                        aria-label={this.label || 'Checkbox'}\n                        onChange={this.handleChange}\n                        ref={el => (this.inputElement = el as HTMLInputElement)}\n                    />\n                    <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n                        {this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n                            </div>\n                        )}\n                        {this.indeterminate && !this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n                            </div>\n                        )}\n                    </div>\n                </div>\n                <label htmlFor={internalId} class={label()} part=\"label\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n}"],"version":3}

package/dist/components/bcm-chip.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-13582168.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
 
 const STATUS_COLORS = {
@@ -118,7 +118,7 @@ const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class BcmChip extends H {
         }
     }
     render() {
-        return (h("div", { key: '1bcc941d68f13e8d57ffb0621911b585b3909d5a', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '3a2dc016ac80905bfa38f16f50417700c854a421' }), this.dismissible && h("bcm-icon", { key: '9176d4a57accdcc9b814293d441fa12ba2065c9b', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
+        return (h("div", { key: '77ad31933acb6e0f5574f3590b2274f61b20caed', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '781811b794a2d89c0ac609e934d6393094c541e8' }), this.dismissible && h("bcm-icon", { key: '08e55b19802624566ae6323c1102257cba784420', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
     static get style() { return BcmChipStyle0; }
 }, [1, "bcm-chip", {

package/dist/components/bcm-divider.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-13582168.js';
+import { p as proxyCustomElement, H, h } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
 
 const dividerCss = ".block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\\[1px\\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\\[--bcm-divider-border\\]{border-color:var(--bcm-divider-border)}.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)}";
@@ -65,7 +65,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
         });
     }
     render() {
-        return (h("div", { key: '92fe4c3cf2ae2824759a643912fcbb9bc7e426f8', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
+        return (h("div", { key: '92749401a2890b85a848d9e1b2c77c12b5f8d410', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
                 direction: this.direction,
                 variant: this.variant,
                 size: this.size,

package/dist/components/bcm-dropdown-item.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-13582168.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
 
 const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-color{color:var(--bcm-ui-color-text-default)}.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)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
@@ -47,10 +47,10 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         var _a;
-        return (h("div", { key: '5fc499042cd981b6edfe3f44550cf198c49af57a', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: '210f1b6277e07eeabd5da39d63a332ae84bed898', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: 'd071c2f932538bfac7db4ba8b2814737f8564d86', name: "left-content" }, this.icon && h("bcm-icon", { key: 'a56ca3229b08765f10b792b0aaa850e15ab6a233', "icon-name": this.icon })), h("div", { key: '69c25567202874fb152f0b01205c79a14f9bb534', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'be46aaf4103f9d9a1f7c1951cabb7523b97a3004' }, this.text)), h("slot", { key: '91067b0910f89d6a77b135c36990ecc14d5b97fe', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: '4edc3ba20bd9b7f0bcb456178c72c3050e391e31', name: "left-content" }, this.icon && h("bcm-icon", { key: '867366e7d2491d1d59613f1ada4b5355ea1f67f9', "icon-name": this.icon })), h("div", { key: '845b630b0865d7e73dec69f00819105c7447fac8', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'ad70e94c42c8ee3bf01e8e14ee9d21909cacc204' }, this.text)), h("slot", { key: 'dfd1dd09b8c0c2f8927e8804087b32254fc7a05d', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     get host() { return this; }
     static get style() { return BcmDropdownItemStyle0; }

package/dist/components/bcm-dropdown.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-13582168.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
-import { d as defineCustomElement$3 } from './p-0063a3d9.js';
-import { d as defineCustomElement$2 } from './p-613ee92d.js';
+import { d as defineCustomElement$3 } from './p-c3a60937.js';
+import { d as defineCustomElement$2 } from './p-5f7a0d0d.js';
 
-const dropdownCss = ".visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var(\"--bcm-ui-color-background-base-default\")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:.5rem}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
+const dropdownCss = ".visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var(\"--bcm-ui-color-background-base-default\")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
 const BcmDropdownStyle0 = dropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
@@ -45,7 +45,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         });
     }
     render() {
-        return (h(Host, { key: 'b11ebb72b3edcdfb390e0db6670f4529be9c68fb' }, h("bcm-button", { key: 'ed882535b16ddbc4125a1fc0dc99da8c09b6ee08', kind: "outline" }, h("span", { key: '6bbbaf7e987dda4cab9871bdf05f2b1563c88f76', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '0baaf5b767cb1be7fd88fac88d721b672f9a3fce', targetElement: this.buttonRef }, h("div", { key: 'c5548264d4ab84019eeac053317d210898320d01', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '7484957ffd0d7997e8acea90c56291eb0d036003', onSlotchange: this.handleSlotChange }))))));
+        return (h(Host, { key: 'f8ebd7ecb5d6383caa178be4e34e64736c482b4a' }, h("bcm-button", { key: 'aab16dd01ce75758f0e075514b0775a679233315', kind: "outline" }, h("span", { key: '1d7842631a451eb6a4230f9e20e34948db642a3d', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '8f41062a05700f373912f300b4002464e4f9655e', targetElement: this.buttonRef }, h("div", { key: '7f9f35fd9cc8bd952794917293de1c4298ef9dec', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '38cc8b4c92c07499bc9471db7749372943b618dd', onSlotchange: this.handleSlotChange }))))));
     }
     get host() { return this; }
     static get style() { return BcmDropdownStyle0; }

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

@@ -1 +1 @@
-{"file":"bcm-dropdown.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,85CAA85C,CAAC;AACn7C,0BAAe,WAAW;;MCOb,QAAQ;IALrB;;;;;QAUa,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAGA,EAAE,CAAC;YACvB,IAAI,EAAE,yNAAyN;SAClO,CAAC,CAAC;QAEK,qBAAgB,GAAG;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBACjC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;aACjE;SACJ,CAAC;KAkBL;IApDG,gBAAgB;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE;YACR,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACvB;KACJ;IAGD,wBAAwB,CAAC,KAAkB;;QACvC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI;YAC5B,IAAI,IAAI,IAAI,OAAO,EAAE;gBACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACzB;SACJ,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,OAAO;YAChB,QAAQ;SACX,CAAC,CAAC;KACN;IAcD,MAAM;QACF,QACI,EAAC,IAAI,uDACD,mEAAY,IAAI,EAAC,SAAS,IACtB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC3B,EACZ,IAAI,CAAC,OAAO,KACT,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,IACrC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACtD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,CACG,CAChB,CACE,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":[":host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var('--bcm-ui-color-background-base-default');\n}\n\n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown',\n    styleUrl: 'dropdown.css',\n    shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop() text?: string;\n\n    @State() isReady: boolean = false;\n\n    @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n    protected buttonRef?: HTMLBcmButtonElement;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropdownChange',\n    })\n    bcmDropdownChange: EventEmitter<any>;\n\n    componentDidLoad() {\n        const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n        if (button) {\n            this.buttonRef = button;\n            this.isReady = true;\n        }\n    }\n\n    @Listen('bcmDropDownItemChange', { capture: true })\n    handleDropdownItemChange(event: CustomEvent) {\n        const { element, selected } = event?.detail;\n\n        this.dropdownItems?.forEach(item => {\n            if (item != element) {\n                item.selected = false;\n            }\n        });\n\n        this.bcmDropdownChange.emit({\n            element: element,\n            selected,\n        });\n    }\n\n    private dropdownClass = tv({\n        base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',\n    });\n\n    private handleSlotChange = () => {\n        this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n        if (this.dropdownItems.length === 0) {\n            console.warn('No dropdown items found in dropdown component');\n        }\n    };\n\n    render() {\n        return (\n            <Host>\n                <bcm-button kind=\"outline\">\n                    <span part=\"text\">{this.text}</span>\n                </bcm-button>\n                {this.isReady && (\n                    <bcm-linked targetElement={this.buttonRef}>\n                        <div part=\"dropdown-container\" class={this.dropdownClass()}>\n                            <slot onSlotchange={this.handleSlotChange}></slot>\n                        </div>\n                    </bcm-linked>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"bcm-dropdown.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,27CAA27C,CAAC;AACh9C,0BAAe,WAAW;;MCOb,QAAQ;IALrB;;;;;QAUa,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAGA,EAAE,CAAC;YACvB,IAAI,EAAE,yNAAyN;SAClO,CAAC,CAAC;QAEK,qBAAgB,GAAG;YACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBACjC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;aACjE;SACJ,CAAC;KAkBL;IApDG,gBAAgB;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE;YACR,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACvB;KACJ;IAGD,wBAAwB,CAAC,KAAkB;;QACvC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI;YAC5B,IAAI,IAAI,IAAI,OAAO,EAAE;gBACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACzB;SACJ,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,OAAO;YAChB,QAAQ;SACX,CAAC,CAAC;KACN;IAcD,MAAM;QACF,QACI,EAAC,IAAI,uDACD,mEAAY,IAAI,EAAC,SAAS,IACtB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC3B,EACZ,IAAI,CAAC,OAAO,KACT,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,IACrC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACtD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,CACG,CAChB,CACE,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":[":host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var('--bcm-ui-color-background-base-default');\n}\n\n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown',\n    styleUrl: 'dropdown.css',\n    shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop() text?: string;\n\n    @State() isReady: boolean = false;\n\n    @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n    protected buttonRef?: HTMLBcmButtonElement;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropdownChange',\n    })\n    bcmDropdownChange: EventEmitter<any>;\n\n    componentDidLoad() {\n        const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n        if (button) {\n            this.buttonRef = button;\n            this.isReady = true;\n        }\n    }\n\n    @Listen('bcmDropDownItemChange', { capture: true })\n    handleDropdownItemChange(event: CustomEvent) {\n        const { element, selected } = event?.detail;\n\n        this.dropdownItems?.forEach(item => {\n            if (item != element) {\n                item.selected = false;\n            }\n        });\n\n        this.bcmDropdownChange.emit({\n            element: element,\n            selected,\n        });\n    }\n\n    private dropdownClass = tv({\n        base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',\n    });\n\n    private handleSlotChange = () => {\n        this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n        if (this.dropdownItems.length === 0) {\n            console.warn('No dropdown items found in dropdown component');\n        }\n    };\n\n    render() {\n        return (\n            <Host>\n                <bcm-button kind=\"outline\">\n                    <span part=\"text\">{this.text}</span>\n                </bcm-button>\n                {this.isReady && (\n                    <bcm-linked targetElement={this.buttonRef}>\n                        <div part=\"dropdown-container\" class={this.dropdownClass()}>\n                            <slot onSlotchange={this.handleSlotChange}></slot>\n                        </div>\n                    </bcm-linked>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/bcm-input.js

@@ -1,7 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-13582168.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
 import { c as classNames } from './p-12360e4c.js';
-import { g as generateId, s as setValidationMessages, a as getValidationMessage, d as defaultValidationMessages } from './p-31354aaa.js';
+import { g as generateId } from './p-ba2410ef.js';
+import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './p-13a245f6.js';
 
 const defaultIcons = {
     'search': 'fa-regular fa-magnifying-glass',
@@ -29,7 +30,7 @@ const checkSlotContent = (element, slotName) => {
     return assignedNodes.length > 0;
 };
 
-const inputCss = ".visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:.25rem}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}";
+const inputCss = ".visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}";
 const BcmInputStyle0 = inputCss;
 
 const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
@@ -277,14 +278,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             medium: 16,
             large: 18,
         }[this.size];
-        return (h("div", { key: '16027ed2f475a50578b117a3683521f85e230679', class: "bcm-ui-element" }, this.label && (h("label", { key: 'c5cc664264a8c4a10a6d76b436bd7d8182c177c0', class: classNames('input-label font-medium', {
+        return (h("div", { key: 'a0fa86f738a07e475cd809c9abe8bd7aa5f50d2e', class: "bcm-ui-element" }, this.label && (h("label", { key: 'b2715f3669bf51b2bc93b29a4ce78fc84d6a8fec', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: '45628e044e789a9b14620d53a4df5474550f359b', name: "label" }, this.label), this.required && h("span", { key: '8e04bc0e5f05e2b4f9061cb4d42c0238bc35130f' }, "*"))), h("div", { key: '7be51bae7a14d41afeb850283a784f6b3f03f543', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '4d1af4117603a1d59fe31046fb6211023d1262cb', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'e24c083434cbc7c434af1b029dd61e8d868e940d', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: 'bb8bde1293d13181732213203b176f19c42d8f4b', name: "prefix" }))), h("input", { key: 'b39040649ad32e6a966fe0828380a5971fba624d', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: '76005ada0408cab0591b96df36126cbf6e97b3c0', class: "flex items-center gap-2 px-2" }, h("slot", { key: '72276115112f969c220a66dee52ab03edf49164a', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'cc29fc8350d49f7b967ad94ee309dfe0c57cfde8', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '9918268a982a1e36f51a1220d6f39f4f111bf3bc', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '26f991e1bad25cc2f074b9259320cc555c3d4bd9', name: "label" }, this.label), this.required && h("span", { key: '0b5a332b842ece285b093b2474e7dd376530d613' }, "*"))), h("div", { key: 'f4b1d4087e2bdfb07c140170e4e59e10c2163535', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'dcc49ae6c4ad4795d1f10f85065e44cb061fce0e', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'c56c06852192dcfc4e7d3df24851afc31804b6b9', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: '29bd74d28492d5e95b4c3155b3c5a9fed3671a2a', name: "prefix" }))), h("input", { key: '21a06d459d5f68be085d46580134ea4718192d89', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'd3852234f0410ed5ceb7df79c2645a97c45afac2', class: "flex items-center gap-2 px-2" }, h("slot", { key: '1e280c327b4791631c3dda4f3ec49706b8a88300', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'd0d14a9d2c7ce1be1de030afb661866b7bf60546', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '4408fc79afa594d8a932898f13573395ae33cccd', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',