bromcom-ui-next 0.1.20 → 0.1.21

package/dist/esm/bcm-button_8.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { c as ce } from './index-f3b17e60.js';
+import { t as tv } from './tv-6dcd2224.js';
 import { c as classNames } from './index-097075ad.js';
 import { g as generateId } from './generate-id-3b2fcb93.js';
 import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './validation-messages-af4512f0.js';
@@ -187,7 +187,7 @@ const BcmButton = class {
         this.handleBlur = (event) => {
             this.bcmBlur.emit(event);
         };
-        this.buttonClass = ce({
+        this.buttonClass = tv({
             base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
             variants: {
                 size: {
@@ -301,19 +301,19 @@ const BcmButton = class {
     }
     render() {
         const { icon, position } = this.buttonIcon;
-        return (h(Host, { key: '821f52c3a042fed2dce63e90152aebe3e9f40dc5' }, h("button", { key: '429988208144ebd9b52f1543825860e9fdf6c538', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
+        return (h(Host, { key: '33e438220fdb261ff87289f8dcbaa7e0601d73c1' }, h("button", { key: '4fb4d22a44bac12b3780f9570c734f60fdaba788', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
                 size: this.size,
                 kind: this.kind,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
                 loading: this.loading,
                 position: this.position,
-            }) }, this.loading && h("slot", { key: '525e1f9ffdc301e0bba2939d9fece560b377d9a3', name: "loading" }), h("span", { key: '530f53a3d0f483555752f5ac95d5f029faf03a8d' }, h("slot", { key: '61b27a37dce9588633f45f18d025c207ee9d23f7', name: "prefix" }, position === 'prefix' && icon && h("i", { key: '6b0d757356f94f0d1ed4731175f2340dfdb3ba45', class: ' leading-none ' + icon }))), h("slot", { key: '8b014d1f25d7c8387c6a3b18474207695a911e12' }, this.buttonText), h("span", { key: '9e9c42c69be3891d2720dbd9882ea418a90802b8' }, h("slot", { key: 'fc676b39c8c79225d09c9cd18506087bef811acc', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '0ad46cc5204af2a6525cc0156d828c57bd5078a5', class: ' leading-none ' + icon }))))));
+            }) }, this.loading && h("slot", { key: 'fa8dcbcba338f94700842fd0482d0261c9a1d3e3', name: "loading" }), h("span", { key: '345162b4ad0034d5081dee0438ceeefe4930ecfb' }, h("slot", { key: 'c65c9aa07fd2f159426192fc6239c394ee6ec58d', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'c94e32a5d308ba3ad98ac10239fc9a155f47e2ac', class: ' leading-none ' + icon }))), h("slot", { key: '171402bb9251492c7e5b0cf572fb0e2ae62a6add' }, this.buttonText), h("span", { key: 'ae3c5a885029b3d4c54e5ca21ac22adffa26b013' }, h("slot", { key: 'f80819d122624bb279d19822278c8e651dec27c7', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '69631e99a8b7f47dd1d00984f582ec6e7b5433e8', class: ' leading-none ' + icon }))))));
     }
 };
 BcmButton.style = BcmButtonStyle0;
 
-const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.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))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.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-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
+const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.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))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
 const BcmDrawerStyle0 = drawerCss;
 
 const BcmDrawer = class {
@@ -328,13 +328,13 @@ const BcmDrawer = class {
         this.position = 'right';
         this.fullWidth = false;
         this.noHeader = false;
-        this.drawerClass = ce({
+        this.drawerClass = tv({
             slots: {
                 backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
                 wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
                 header: 'flex justify-between items-center bg-color-default text-color-default',
                 title: 'font-semibold m-0 text-size-6',
-                closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
                 content: 'overflow-y-auto flex-grow',
             },
             variants: {
@@ -424,8 +424,6 @@ const BcmDrawer = class {
                     },
                 },
             ],
-        }, {
-            twMerge: false,
         });
     }
     handleOpenChange(isOpen) {
@@ -504,7 +502,7 @@ const BcmDrawer = class {
             size: this.size,
             noHeader: this.noHeader,
         });
-        return (h("div", { key: '6311b0bed989d41cf504487545f414ce5b881749', part: "base" }, h("div", { key: '5aa597edf8d0d5523570fbb326072c2e02c813b0', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '736cc10ae7341ad5139bc37ee9265801e0da6a6c', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: 'ddaf3499e8709f0ad8a58891baacfa9c5a595973', part: "header", class: header() }, h("h2", { key: '0124009ad323dfb4fca18618d750789a0c805ebd', part: "title", class: title() }, h("slot", { key: '95813a9ea32872ab5cd00f5d641cdaef8d43504d', name: "header" }, this.headerText)), h("button", { key: '7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'd61996a289c3a0727475a3e7798866b874292885', name: "fa-solid fa-xmark" }))), h("div", { key: '6650b5e079d31b2bd372f80a648256761bc78a14', part: "content", class: content() }, h("slot", { key: '8858d3e8e12eeeb0745a3aee54507f104bd6506f' })), h("div", { key: '97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80', part: "footer" }, h("slot", { key: 'ee90d5b261eef5e435d8247717e5fa79593893f3', name: "footer" })))));
+        return (h("div", { key: '44379905f1499a16d625ac4d1ff5e89fc6367d46', part: "base" }, h("div", { key: 'bc53e5322a61cd4af0691905c509d4c5fb765939', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: 'd5a666671d24b2f3b55b7462b5218a3e11358982', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: '5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a', part: "header", class: header() }, h("h2", { key: '8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15', part: "title", class: title() }, h("slot", { key: '949ae8f65d13e9e1c973c16a9f90205ac7e7042f', name: "header" }, this.headerText)), h("button", { key: 'a0c42761ee859e87dee5c267ea7245dde4fb8756', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: '2df273d63da93eda2280759a909906fe4ae0c493', name: "fa-solid fa-xmark" }))), h("div", { key: 'b2532537d10f9aa0dcfa2fca8ac806577363e05b', part: "content", class: content() }, h("slot", { key: 'bfec5cff35a7bf7bf1d9801ba89559501e6f301f' })), h("div", { key: '4d44fdba62c74fd5c893c5296f998754228cf961', part: "footer" }, h("slot", { key: 'fd0a58127fd2f0ba0955cef629e55700142a8f32', name: "footer" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -522,7 +520,7 @@ const Dropdown = class {
         this.bcmDropdownChange = createEvent(this, "bcmDropdownChange", 1);
         this.isReady = false;
         this.dropdownItems = [];
-        this.dropdownClass = ce({
+        this.dropdownClass = tv({
             base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
         });
         this.handleSlotChange = () => {
@@ -553,7 +551,7 @@ const Dropdown = class {
         });
     }
     render() {
-        return (h(Host, { key: '7c13b65d8c966a4a2de522aa9d765cb7933bcd81' }, h("bcm-button", { key: '7511bf043370dd8360c458800c1518205c35ac3c', kind: "outline" }, h("span", { key: '1a67377235ffe4b5989adab0b185585e9e4d1080', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '78a528e16b5c76409a9546e7f2523b9535d47276', targetElement: this.buttonRef }, h("div", { key: 'afec0593ed669692ab2e97e58a2e918689fc9175', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '4f94568837c8c32619aa6c586b35c8d8bb60a74c', onSlotchange: this.handleSlotChange }))))));
+        return (h(Host, { key: '6aaff12c84d38c32df5bc8dccb83421afb315eef' }, h("bcm-button", { key: '5612cef7303a6b839531e125c895a4e7b8d32282', kind: "outline" }, h("span", { key: '951418845cb1ec71fe6dc5bbbc33c49934447640', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: 'd594359d6a9b7c673307c6a92e6d69cc47be3e1a', targetElement: this.buttonRef }, h("div", { key: '9badba5b1e99af6a5d58b02e849cb0923e49dfd8', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'c8191f215600170475d514bb6b4056047e6442d2', onSlotchange: this.handleSlotChange }))))));
     }
     get host() { return getElement(this); }
 };
@@ -569,7 +567,7 @@ const DropdownItem = class {
         this.selected = false;
         this.error = false;
         this.disabled = false;
-        this.dropdownItemClass = ce({
+        this.dropdownItemClass = tv({
             base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
             variants: {
                 selected: {
@@ -603,10 +601,10 @@ const DropdownItem = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '3c989e05b18e183481b760f24d3d37bae4a68eea', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: '69beaac4c9225bc7803b4002f1543c18e76e36cc', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '9edf937944435ae070541bd5952fbbda1ffe5d9d', name: "left-content" }, this.icon && h("bcm-icon", { key: '1b452c2a57af6d3a7c85bd9e48107f24224eae4b', "icon-name": this.icon })), h("div", { key: 'd4114f8e306accdc373e753d02870ad21e65c8b1', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '0f1a8d78b7c91f117d5389d8bdf1efb894168df4' }, this.text)), h("slot", { key: 'e428dadc7ca757302c47431a3dda05895387a9f5', 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: 'ca2712023285689a1774b5869d982e87d3add46a', name: "left-content" }, this.icon && h("bcm-icon", { key: 'bef7483a47c823ed746c39ae37acc3a2360f0c59', "icon-name": this.icon })), h("div", { key: 'a9bdddf97d4a4e07e601599a4adb11354227dd0f', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '51c488350d2daabc32fc9693211a4e89d8cce16f' }, this.text)), h("slot", { key: '9bf3f8b4affa41ea72f181a073aea8cd56f8a2df', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     get host() { return getElement(this); }
 };
@@ -689,7 +687,7 @@ const BcmInput = class {
         this.onKeyUp = (event) => {
             this.bcmKeyUp.emit(event);
         };
-        this.styleClass = ce({
+        this.styleClass = tv({
             slots: {
                 base: [
                     'bcm-input bcm-input__container',
@@ -887,14 +885,14 @@ const BcmInput = class {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: '77a0be85ac2a3749e95bedafc01134a5a6a9f655', class: "bcm-ui-element" }, this.label && (h("label", { key: 'a202e383e92085bed836777a5484f306d73638dd', class: classNames('input-label font-medium', {
+        return (h("div", { key: '2b470d6a8d48e3867345a1baaf038f464167bd8c', class: "bcm-ui-element" }, this.label && (h("label", { key: '65aa7f333c4cc7deb68dec12ac25fd953d03e5a9', 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: '204121e272f4a168db119322aaba8c4ed2e5c125', name: "label" }, this.label), this.required && h("span", { key: 'eb658a88419adb4003525dc711676628b832a3c4' }, "*"))), h("div", { key: '584edbfd2e49a4e37e45781d7844ce8b850532ff', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '0cbc9f42756c643cc5277fe1e7a7636a4fd490be', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'a6c0dd258d7c28f2c8d5876fc703fa230ee3ce1a', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '9f8ff60b443210f0f3fd68e43ac73248bd3c4b35', name: "prefix" }))), h("input", { key: 'd811a67abb5727f2f2d3051d5dded8d5d78564ec', 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: 'c10515b9f3a9fb8d87e8c0f0abd383220ba5554c', class: "flex items-center gap-2 px-2" }, h("slot", { key: '5902fa399e7fad8a82e1deaf6bc45f9a5ba8b94a', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '46721b1a002b2b0a04686e2e8968b2c0b51c1061', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '46f3360446fe8c40aab58d1d4047c4f1bb010fff', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '5507aaf837e03b059b5ee37270406519e3460d84', name: "label" }, this.label), this.required && h("span", { key: 'ae92e270cf66574dd511403df99ce6f0172f7cf0' }, "*"))), h("div", { key: 'c562649dbb4085830f2229af20b450de50af18ab', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '8e53088d990111325fad2c78c99818761e729e80', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '0dd292f047e02ce75051b8a271ffcedb35036631', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '6dd835e17b66f29681232748a9cc8fd04ef8365e', name: "prefix" }))), h("input", { key: '965fa5a5d2188a8608ae997973c792708fd986bf', 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: 'f0f78deaa350963ff31b07c2076a405bb4560fc5', class: "flex items-center gap-2 px-2" }, h("slot", { key: '6b6afb6088fa96b9c1daa97641e70bd9d1a8f044', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '9f33e74c6629341ba5cc447af1b4ba9237997138', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '416b4a6c586ebd6e722a68181ca4dc1125fc5e7d', 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',