bromcom-ui-next 0.1.17 → 0.1.18

package/dist/collection/components/shortcut/shortcut.js

@@ -29,7 +29,7 @@ export class BcmShortcut {
     }
     render() {
         const { size, hotkey } = this;
-        return (h("div", { key: 'fef9dd56a5a60fb51b8cd4d56b43ab6b39d81f59', class: cs('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
+        return (h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: cs('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
                 'text-size-2': size === 'small',
                 'text-size-3': size === 'medium',
                 'text-size-4': size === 'large',

package/dist/collection/components/switch/switch.component.js

@@ -190,12 +190,12 @@ export class BcmSwitch {
         });
         const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
         const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
-        return (h("div", { key: '96910c5e31e73cdab75c123694aa4118be00131b', class: base() }, h("label", { key: 'c303a3b755cab3e5d5839d9c2355aabdf907b043', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'e602dd17e60b47fb594223f5f489a843fc6ce67c', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && h("span", { key: '6f919ac2d870ef1c809d2323a5cac24386aadbf1', class: label() }, h("slot", { key: '79a2ac78ac55be608d8ece594f2883eaa9700747' }, this.label)), h("label", Object.assign({ key: '9341db4afa747e3b6fd45d65d86c4b042ce3aa26', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: 'd18db7b849420ad3c416efa4e7d4eddef524afa0', class: base() }, h("label", { key: 'c7d35ad070759d134a4d4aa3b07144407b3f412a', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '0690f7e509de7093f513bca1819c30370f720f40', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && h("span", { key: 'fbb5d10e306c5d6b97dcfc9fc3ed2f075a2e2869', class: label() }, h("slot", { key: 'b9cd0cb2b0a95420fcd146b326865f9b030fea3d' }, this.label)), h("label", Object.assign({ key: 'f04c6cf35a56b203d96776b26e4a167b6b81e748', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: '1bdf6e396fc0f90727226b392a899eee433d00b4', class: dot() }))), this.error && this.caption && h("span", { key: 'eed9de039c7713bb6ea0d9c1c61548d45fc64404', class: caption() }, this.caption), h("slot", { key: 'ce7dc08d6aa9ac46dc8b0f027d9dfa5362ca49b8', name: "caption" })));
+            } }), h("div", { key: '5ec215b19c3772cdf2f2bd9213ea5583786b07f7', class: dot() }))), this.error && this.caption && h("span", { key: '0ed49573afdfa297ec8930b0408c8e8ec3bdc384', class: caption() }, this.caption), h("slot", { key: 'ead6fd77bd9bd97b14e69367fd90e1c474b5d4c3', name: "caption" })));
     }
     static get is() { return "bcm-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs-content.component.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class BcmTabsContent {
     render() {
-        return (h(Host, { key: '91cc8f8cd972614bb656ae728b09c949b44c7f97', role: "tabpanel" }, h("slot", { key: '8b0691000f509405236f40110f0975270c7caeb5' })));
+        return (h(Host, { key: 'e12d04d682726a70c9a7cd4ce091cb64b067ce32', role: "tabpanel" }, h("slot", { key: 'c947677586826f8702472107a43d92235aca84ef' })));
     }
     static get is() { return "bcm-tabs-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs-content.css

@@ -1 +1 @@
-.block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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)}
+.block{display:block}:host{display:block;padding:10px 0;width:100%}.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)}

package/dist/collection/components/tabs/tabs-list.component.js

@@ -28,7 +28,7 @@ export class BcmTabsList {
     }
     render() {
         const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: 'd51ed58a8226f7dbb84a31fb5c30d94dbe6daa5b', class: container(), slot: "tabs-list" }, h("div", { key: '152bdc9642655ba245c50afc0121850712779799', class: inkbar() }), h("div", { key: '6a9084708753909fae7f0d3fb05092a97e34a468', class: tabList(), role: "tablist" }, h("slot", { key: '06e7f1b37f8256fe06fa47d7cea6ed71edb296b4' }))));
+        return (h("div", { key: '4dbd9f1b18b6529d8b772a27a6f6ab0cbf789b48', class: container(), slot: "tabs-list" }, h("div", { key: 'f7bc6bb41afb0d76f66cb7a7af70875cf5359da8', class: inkbar() }), h("div", { key: '95aa03b5f1955517c9f3fce41ce3b525bfb56ac0', class: tabList(), role: "tablist" }, h("slot", { key: 'a3d0a910a2f7a07dd2f1e25b0d14d2c0d830e5fb' }))));
     }
     static get is() { return "bcm-tabs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs-trigger.component.js

@@ -75,7 +75,7 @@ export class BcmTabsTrigger {
             active: this.active,
             disabled: this.disabled,
         });
-        return (h(Host, { key: 'e4292727769fe24c7c641bab8ff6b0679417ed1f', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '55559c92fca5ace99577546b636aab0e510fbb33', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '3181eb41c4230d8b1dd11642bf78cac7f9bd9108' })), h("div", { key: 'c2ebba392dbf862392da829dd7090975d24ff396', class: borderLine() })));
+        return (h(Host, { key: 'e9d6b6e77d982ea2cbba1e7f928f9515d10be52d', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'faf87a5db1212dd5ebbccba186e83d26934a8b41', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'a3426148118f555159c9bd355dbfb52c035e082a' })), h("div", { key: '32bbc55e43775f2369b01879f93183b29a1659b3', class: borderLine() })));
     }
     static get is() { return "bcm-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs-trigger.css

@@ -1 +1 @@
-.relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\[2px\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\[--bcm-ui-color-text-default\]{background-color:var(--bcm-ui-color-text-default)}.bg-\[--bcm-ui-color-text-disabled\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}
+.relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\[2px\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\[--bcm-ui-color-text-default\]{background-color:var(--bcm-ui-color-text-default)}.bg-\[--bcm-ui-color-text-disabled\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.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-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}

package/dist/collection/components/tabs/tabs.component.js

@@ -192,7 +192,7 @@ export class BcmTabs {
         }
     }
     render() {
-        return (h(Host, { key: '264825cc76ddf17cf6f00ef98c54e0f3deb7e015' }, h("div", { key: 'c906a1096c6c406fc46e86f6d7a0dcaa5f1a16d6', class: this.tabClass() }, h("slot", { key: '1c63757229d307796fa44bdc13be6f936963417e', name: "tabs-list" }), h("slot", { key: '0083630bdfbc0c5d5c377e2ab10e36155ef21832' }))));
+        return (h(Host, { key: '0afd825b3df8017a0a5bc88a341430fec848d7ad' }, h("div", { key: 'e0ee72418f290849a68e4286ee91b3abceb668f3', class: this.tabClass() }, h("slot", { key: 'e9e032f474872ef1fe32a23b3feb0e75303f9c12', name: "tabs-list" }), h("slot", { key: 'cc22e3ac81914ecd88016a7033c135c52a99deed' }))));
     }
     static get is() { return "bcm-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.component.js

@@ -90,7 +90,7 @@ export class BcmText {
         const Tag = variantTagMap[this.variant];
         const variantClass = this.getTextClass(this.variant, this.size);
         const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
-        return (h(Tag, { key: 'dae1711991c3a2b4081166453a06b501cfa75cca', class: cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: '5fbee8437056e353e5beff8e33c9958951e7d30d' }, this.text)));
+        return (h(Tag, { key: '152d737752eea962ac3c5086011da69578ef0920', class: cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
     }
     static get is() { return "bcm-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.component.js

@@ -261,14 +261,14 @@ export class BcmTextarea {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: 'e6310414ab5837691b0a1fe6112c2315e322cc3e', class: "bcm-ui-element" }, this.label && (h("label", { key: '1130ae9423a6c0b11939b40305888fcc254a478f', class: classNames('textarea-label font-medium', {
+        return (h("div", { key: 'c5ee75be5fde297e23772b7c40d5c1232f3b89da', class: "bcm-ui-element" }, this.label && (h("label", { key: '49b338bdfdc5475c8219fb752200cf897a57f79d', class: classNames('textarea-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: textareaId }, h("slot", { key: '14fbb3460f9e2235d330c8751a4582cb53a0b6eb', name: "label" }, this.label), this.required && h("span", { key: 'd5c31c6358ac10f1d24c665e4a81f3f4faf18e3b' }, "*"))), h("div", { key: 'c1b53969edd14f59ab0184d5bbe7b2fc2ede54f2', class: base() }, h("textarea", { key: 'cf712c4bc84836505367230fa2f4a219dafb8773', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
+            }), htmlFor: textareaId }, h("slot", { key: '01a450616f08255ad6c593cfdee6bfe8c806a139', name: "label" }, this.label), this.required && h("span", { key: 'e2da2bfd03978deae44f3b1fc80171bd17092a94' }, "*"))), h("div", { key: '24508ff98ece95297f3c90f415b9c1231771de96', class: base() }, h("textarea", { key: 'abd2eb66e02a271626246f7634d3bad6ca569bf5', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
                 const target = event.target;
                 this.value = target.value;
                 this.bcmInput.emit(event);
@@ -276,7 +276,7 @@ export class BcmTextarea {
                 if (this.autoGrow) {
                     this.adjustHeight();
                 }
-            }, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '15c18cfac852247feff36f95bd3f51bcabb0b045', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '476b9901f68f4c4b7507412ea99d33aa9af28653', class: classNames('textarea-caption-text font-regular mt-1', {
+            }, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '2678f8f9ad6d2fdb42691b9609d6a73c696b90ec', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '03c87e206c3c683d503bf8bc0fb33f0e3657857f', class: classNames('textarea-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',

package/dist/collection/components/tooltip/tooltip.component.js

@@ -193,7 +193,7 @@ export class Tooltip {
             size: this.size,
             isOpen: this.open,
         });
-        return (h("div", { key: '92d31c6ef824472a2c2c1ae2db9d7c21f501638e', class: "relative" }, h("slot", { key: '3a741be92ce91b1ae015bca036129ea0dfe36776', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'f3d77c2c86c1e533d0a48123a637648b8ba4e651', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: 'a58792b897728f9d8962eebeb38ec398c46412bd', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '67eab4ac36aba3fda0f0dd56a4f838962dea7acb', name: "tooltip" }, this.message))));
+        return (h("div", { key: '04196e7e3ed7405ff4c3e4870d6cbec968e07f4d', class: "relative" }, h("slot", { key: '0a1043e46fa3e88cf667432d44a57a5268a1d61b', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'fb5474a83b621875831bdbb9a066519fdaae88f0', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: '17b8cc92d03e75f4dba6759c74febba8953bc711', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '60a42381139cc4b1f630441795a2b9b59c6660b6', name: "tooltip" }, this.message))));
     }
     static get is() { return "bcm-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/bcm-accordion-group.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
 
-const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-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)}.filter{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)}";
+const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-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)}.filter{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)}";
 const BcmAccordionGroupStyle0 = accordionGroupCss;
 
 const BcmAccordionGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmAccordionGroup extends H {

package/dist/components/bcm-accordion-group.js.map

@@ -1 +1 @@
-{"file":"bcm-accordion-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+7BAA+7B,CAAC;AAC19B,gCAAe,iBAAiB;;MCmEnBA,mBAAiB;IAL9B;;;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmAccordionGroup"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}
+{"file":"bcm-accordion-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B,CAAC;AACl/B,gCAAe,iBAAiB;;MCmEnBA,mBAAiB;IAL9B;;;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmAccordionGroup"],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}

package/dist/components/bcm-button.js

@@ -1,4 +1,4 @@
-import { B as BcmButton$1, d as defineCustomElement$1 } from './p-b5bee06c.js';
+import { B as BcmButton$1, d as defineCustomElement$1 } from './p-d56f8a26.js';
 
 const BcmButton = BcmButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/bcm-drawer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmDrawer extends Components.BcmDrawer, HTMLElement {}
+export const BcmDrawer: {
+    prototype: BcmDrawer;
+    new (): BcmDrawer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-drawer.js

@@ -0,0 +1,234 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
+import { c as ce } from './p-5fcf77f9.js';
+
+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}.appearance-none{appearance:none}.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-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 BcmDrawerStyle0 = drawerCss;
+
+const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmOpen = createEvent(this, "bcmOpen", 7);
+        this.bcmClose = createEvent(this, "bcmClose", 7);
+        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
+        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
+        this.open = false;
+        this.size = 'medium';
+        this.position = 'right';
+        this.fullWidth = false;
+        this.noHeader = false;
+        this.drawerClass = ce({
+            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',
+                title: 'font-semibold text-size-6 m-0',
+                closeButton: 'text-color-default bg-transparent appearance-none 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: {
+                open: {
+                    true: {
+                        backdrop: 'opacity-100 visible',
+                    },
+                    false: {
+                        backdrop: 'opacity-0 invisible',
+                    },
+                },
+                position: {
+                    left: {
+                        wrapper: 'top-0 left-0 bottom-0',
+                    },
+                    right: {
+                        wrapper: 'top-0 right-0 bottom-0',
+                    },
+                    top: {
+                        wrapper: 'top-0 left-0 right-0',
+                    },
+                    bottom: {
+                        wrapper: 'bottom-0 left-0 right-0',
+                    },
+                },
+                size: {
+                    small: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                    medium: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                    large: {
+                        header: 'py-3 px-4',
+                        content: 'p-4',
+                    },
+                },
+                noHeader: {
+                    true: {
+                        header: 'hidden',
+                    },
+                },
+            },
+            compoundVariants: [
+                {
+                    open: true,
+                    position: ['left', 'right'],
+                    class: {
+                        wrapper: 'translate-x-0',
+                    },
+                },
+                {
+                    open: true,
+                    position: ['top', 'bottom'],
+                    class: {
+                        wrapper: 'translate-y-0',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'left',
+                    class: {
+                        wrapper: '-translate-x-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'right',
+                    class: {
+                        wrapper: 'translate-x-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'top',
+                    class: {
+                        wrapper: '-translate-y-full',
+                    },
+                },
+                {
+                    open: false,
+                    position: 'bottom',
+                    class: {
+                        wrapper: 'translate-y-full',
+                    },
+                },
+            ],
+        });
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            this.bcmOpen.emit();
+        }
+        else {
+            document.body.style.overflow = '';
+            this.bcmClose.emit();
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.open) {
+            this.hide();
+        }
+    }
+    async show() {
+        const event = this.bcmBeforeOpen.emit();
+        if (!event.defaultPrevented) {
+            this.open = true;
+        }
+    }
+    async hide() {
+        const event = this.bcmBeforeClose.emit();
+        if (!event.defaultPrevented) {
+            this.open = false;
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    getWrapperStyle() {
+        const style = {};
+        if (this.fullWidth) {
+            if (this.position === 'left' || this.position === 'right') {
+                style.width = '100vw';
+            }
+            else {
+                style.height = '100vh';
+            }
+            return style;
+        }
+        if (this.position === 'left' || this.position === 'right') {
+            switch (this.size) {
+                case 'small':
+                    style.width = '320px';
+                    break;
+                case 'medium':
+                    style.width = '480px';
+                    break;
+                case 'large':
+                    style.width = '1064px';
+                    break;
+            }
+        }
+        else {
+            switch (this.size) {
+                case 'small':
+                    style.height = '40vh';
+                    break;
+                case 'medium':
+                    style.height = '60vh';
+                    break;
+                case 'large':
+                    style.height = '90vh';
+                    break;
+            }
+        }
+        return style;
+    }
+    render() {
+        const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({
+            open: this.open,
+            position: this.position,
+            size: this.size,
+            noHeader: this.noHeader,
+        });
+        return (h("div", { key: '4432db26aee1f6bd99b068ea4bdcce1598566e34', part: "base" }, h("div", { key: '4ffab0356a2e10d834bcc7d289fa7d7e75bfe0ed', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '30a072303c0f37aa302e9fb710fc108dec4118b7', 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: '9c96428392739375c14c3f0d43686c1fc4c76dad', part: "header", class: header() }, h("h2", { key: 'e5e97af67578ac5d6decbaae87f258374ce46a71', part: "title", class: title() }, h("slot", { key: '023760bf63b5bb31f931fef734b5157ad5ad5eaa', name: "header" }, this.headerText)), h("button", { key: '787ae47852969e29e3164668c20acfd684d03bd0', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'c4590f8f9cf838bc274800f8cd9baa093e1debb0', name: "fa-solid fa-xmark" }))), h("div", { key: '76c9d7302a725ba798201176ab6bb9186d3a81e7', part: "content", class: content() }, h("slot", { key: '8422d3ae70d855538760c2e0a0a658e29ee74654' })), h("div", { key: 'ce8e4ee5ecf0ed61d559a259b58714a01f914d50', part: "footer" }, h("slot", { key: '61826c516851892de0ce2690baf3a64b5c51a41a', name: "footer" })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return BcmDrawerStyle0; }
+}, [1, "bcm-drawer", {
+        "open": [1540],
+        "size": [1],
+        "position": [1],
+        "fullWidth": [4, "full-width"],
+        "headerText": [1, "header-text"],
+        "noHeader": [4, "no-header"],
+        "show": [64],
+        "hide": [64]
+    }, [[8, "keydown", "handleKeyDown"]], {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-drawer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-drawer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmDrawer$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmDrawer = BcmDrawer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmDrawer, defineCustomElement };
+
+//# sourceMappingURL=bcm-drawer.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-drawer.js","mappings":"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","names":["BcmDrawer","tv"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: DrawerSize = 'medium';\n  @Prop() position: DrawerPosition = 'right';\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop() headerText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n      wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-center bg-color-default',\n      title: 'font-semibold text-size-6 m-0',\n      closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n      content: 'overflow-y-auto flex-grow',\n    },\n    variants: {\n      open: {\n        true: {\n          backdrop: 'opacity-100 visible',\n        },\n        false: {\n          backdrop: 'opacity-0 invisible',\n        },\n      },\n      position: {\n        left: {\n          wrapper: 'top-0 left-0 bottom-0',\n        },\n        right: {\n          wrapper: 'top-0 right-0 bottom-0',\n        },\n        top: {\n          wrapper: 'top-0 left-0 right-0',\n        },\n        bottom: {\n          wrapper: 'bottom-0 left-0 right-0',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        medium: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        large: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        open: true,\n        position: ['left', 'right'],\n        class: {\n          wrapper: 'translate-x-0',\n        },\n      },\n      {\n        open: true,\n        position: ['top', 'bottom'],\n        class: {\n          wrapper: 'translate-y-0',\n        },\n      },\n      {\n        open: false,\n        position: 'left',\n        class: {\n          wrapper: '-translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'right',\n        class: {\n          wrapper: 'translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'top',\n        class: {\n          wrapper: '-translate-y-full',\n        },\n      },\n      {\n        open: false,\n        position: 'bottom',\n        class: {\n          wrapper: 'translate-y-full',\n        },\n      },\n    ],\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n      this.bcmOpen.emit();\n    } else {\n      document.body.style.overflow = '';\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    const event = this.bcmBeforeOpen.emit();\n    if (!event.defaultPrevented) {\n      this.open = true;\n    }\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    const event = this.bcmBeforeClose.emit();\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private getWrapperStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    if (this.position === 'left' || this.position === 'right') {\n      switch (this.size) {\n        case 'small':\n          style.width = '320px';\n          break;\n        case 'medium':\n          style.width = '480px';\n          break;\n        case 'large':\n          style.width = '1064px';\n          break;\n      }\n    } else {\n      switch (this.size) {\n        case 'small':\n          style.height = '40vh';\n          break;\n        case 'medium':\n          style.height = '60vh';\n          break;\n        case 'large':\n          style.height = '90vh';\n          break;\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n      open: this.open,\n      position: this.position,\n      size: this.size,\n      noHeader: this.noHeader,\n    });\n\n    return (\n      <div part=\"base\">\n        <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n        <div\n          part=\"wrapper\"\n          class={wrapper()}\n          style={this.getWrapperStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-label={this.headerText}\n        >\n          <div part=\"header\" class={header()}>\n            <h2 part=\"title\" class={title()}>\n              <slot name=\"header\">{this.headerText}</slot>\n            </h2>\n            <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n              <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n            </button>\n          </div>\n          <div part=\"content\" class={content()}>\n            <slot />\n          </div>\n          <div part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -47,10 +47,10 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         var _a;
-        return (h("div", { key: '7756e6fcd9beabda721d735faf5088ab388a3fad', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: '3c989e05b18e183481b760f24d3d37bae4a68eea', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: 'c82e58e2cc676b3e3beaf21d60e704a082e24abf', name: "left-content" }, this.icon && h("bcm-icon", { key: '86abc6f0530b2325ba8a9c008cca8a52af15c1b1', "icon-name": this.icon })), h("div", { key: '0b15cbe969408e6687447d9e5057f9c4087a564c', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '23a8ed4de54995f6c9d2570346fdfca67116f0d5' }, this.text)), h("slot", { key: '3245adefb4fc7ad2e64ba0193779d0ba7133b2a0', 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: '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 }))))));
     }
     get host() { return this; }
     static get style() { return BcmDropdownItemStyle0; }

package/dist/components/bcm-dropdown.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-import { d as defineCustomElement$3 } from './p-b5bee06c.js';
+import { d as defineCustomElement$3 } from './p-d56f8a26.js';
 import { d as defineCustomElement$2 } from './p-39872cdf.js';
 
 const dropdownCss = ".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.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}";
@@ -45,7 +45,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         });
     }
     render() {
-        return (h(Host, { key: 'b6b172a832d1201797fe65cc567a19d3a9410538' }, h("bcm-button", { key: '38b60aa6646c366bfb9e94437eadeb31cd5a41c3', kind: "outline" }, h("span", { key: 'dd6bdafb5aa97037657213d82471f118db894732', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: 'c39b67e2b57278d1255051a1673ee91ee98732a5', targetElement: this.buttonRef }, h("div", { key: '17b8c82f492834cded9f38aceaa985d26466dbb5', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'daad86fab6fd40e7fcc7a7a78ad761ca805c8331', onSlotchange: this.handleSlotChange }))))));
+        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 }))))));
     }
     get host() { return this; }
     static get style() { return BcmDropdownStyle0; }

package/dist/components/bcm-input.js

@@ -281,14 +281,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: 'c17134d11d06c7310b672dfa948d6c6a4542fceb', class: "bcm-ui-element" }, this.label && (h("label", { key: '39772b19eaa57a1031b8a0c428ce95054928614b', class: classNames('input-label font-medium', {
+        return (h("div", { key: '77a0be85ac2a3749e95bedafc01134a5a6a9f655', class: "bcm-ui-element" }, this.label && (h("label", { key: 'a202e383e92085bed836777a5484f306d73638dd', 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: '9ece8cc33ca08a96ac190fbe983ddb2a71fadecc', name: "label" }, this.label), this.required && h("span", { key: 'cf029a113a5f3678da630fff91693cc857e3abe9' }, "*"))), h("div", { key: '4d188bf08d969bfbfbd243d2de5f6ef5b5c1f801', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '001619ee5de15ab4b8766b9719a5c87b31aae76a', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'ee23648e869430e26246aa0d4416ca04af2d58eb', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '09c7e351668fe05c0e04dd3d8e9887555b6a577d', name: "prefix" }))), h("input", { key: 'fd939fe5075e636bf63e114f2fca7440e52a4e7d', 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: 'd4c4f57c0e54b2c426c30d865a6a06364c88a029', class: "flex items-center gap-2 px-2" }, h("slot", { key: '9c023618b136d254fb85932e3d927111fc7cf118', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'edfcc8deb2b15fe5a5941fbbfa7f64715b15309b', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '3389f4478d078f07256dbbcc018338116dc08ecc', class: classNames('input-caption-text font-regular mt-1', {
+            }), 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', {
                 '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',

package/dist/components/bcm-pop-confirm.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-30135590.js';
 import { c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './p-50133556.js';
 import { c as ce } from './p-5fcf77f9.js';
-import { d as defineCustomElement$2 } from './p-b5bee06c.js';
+import { d as defineCustomElement$2 } from './p-d56f8a26.js';
 
 const popConfirmCss = ".absolute{position:absolute}.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))}.text-wrap{text-wrap:wrap}:host{--popover-bg:var(--bcm-ui-color-background-basic-panel);--popover-radius:6px;--popover-text-color:var(--bcm-ui-color-text-basic);display:inline-block}.arrow{background:var(--arrow-color);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:1}.arrow.top{transform:rotate(180deg)}.arrow.bottom{transform:rotate(0deg)}.arrow.right{transform:rotate(-90deg)}.arrow.left{transform:rotate(90deg)}::slotted([slot=body]){text-wrap:pretty;font-family:Inter,sans-serif}.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}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.w-full{width:100%}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.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-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.outline{outline-style:solid}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
 const BcmPopConfirmStyle0 = popConfirmCss;
@@ -240,7 +240,7 @@ const PopConfirm = /*@__PURE__*/ proxyCustomElement(class PopConfirm extends H {
         const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({
             size: this.size,
         });
-        return (h(Fragment, { key: '0abaad2e0e0912b8642b53ba5a43e55343a91fe5' }, this.isOpen && (h("div", { key: '381f0661d0ad5cbbba8fef39f4818b8f9e6c6d49', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '197786b5df0ed7d1a36e874f4b18a0ad076854cc', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'bef48d54efbcacee930e9ea452825ca5442014e7', class: header() }, h("div", { key: '942363a2f8c8b9d7cc992d7a4a1a27303cbc5d72', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: 'ab80812609cfe35b24ef116592d3a8ca5e7ed8ba', "icon-name": statusIcons[this.status] }), h("span", { key: 'e062b7cdf8aaefb456d1aced97a7578395a558c2', class: titleContainer() }, this.headerText), h("slot", { key: '3d9c6a4e54edad6dd6f9c62106a04a44a7ed2642', name: "header" })), h("div", { key: 'be9ba74f85af483cd34586b1e3446244fdce25b3', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: 'a72472ceccbc938f540351dc94e67876ac08badb', "icon-name": "far fa-times" }))), h("main", { key: 'eef82569fa631d7d18181a14fcd593274cb36ca9', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '972e9635e16de25b6b0e71303cdbd2914384ea26', name: "body" }, this.description)), h("footer", { key: '9727ecff0b5a79d98c0eb6a285877aee4bfd2bfc', class: footer() }, h("bcm-button", { key: '8c550771942f0b3c992eac30d13a2fd159962e78', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '3bc99d1199382178f92185e3d4061b0539466b41', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: '1132d6f89e8b8363cb8ddbcc608cfa0de948be85', name: "footer" }))))));
+        return (h(Fragment, { key: '8910f368da993572cb4725dcbb74235ec50348e8' }, this.isOpen && (h("div", { key: '4ded121b7e121f8bb0dd1fe76b2921fd2a487fe8', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: '94a78199e0e90cec5ba905db17d3a9c48a28a9a7', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'd21596aa10c8128c2d9921b3bc6c4b93002877d4', class: header() }, h("div", { key: 'e0a91a6031f59630cfeea3ef5e35a32e973c6006', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '9f184b3caf099697d4139a6a9efd276618b0f818', "icon-name": statusIcons[this.status] }), h("span", { key: '50fd578631061127dd49d00600a4d83d645f4f76', class: titleContainer() }, this.headerText), h("slot", { key: '8c29cbde0194fa1ff1ca82286b57b34532162d8b', name: "header" })), h("div", { key: '6ef68d637bbfd3cf2fd2c1a8650c222d5970cf64', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: 'c017286c2604e18e8ad47c889092fa727a01a18f', "icon-name": "far fa-times" }))), h("main", { key: '5f9255fd563714b7eb842900010e8d1c51417172', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: 'a7ca7e568776da834bc7fe44993c32f219522a1a', name: "body" }, this.description)), h("footer", { key: '1172e51992183b617d6d5ce53a4a09a09be12ae8', class: footer() }, h("bcm-button", { key: 'e99da377988d0be710e5ce6d47c84cc65298aa1f', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '8154b716f4bf1b5ed272a3b53be7ddaf151ae0cf', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'ad182d00fc2925d7b403f70250cd1e9687432a46', name: "footer" }))))));
     }
     get el() { return this; }
     static get style() { return BcmPopConfirmStyle0; }

package/dist/components/bcm-popover.js

@@ -178,7 +178,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
             isOpen: this.open,
             size: this.size,
         });
-        return (h("div", { key: '083ef2273d093e2f28655eeb51af968cf81d5f4f', class: "relative" }, h("slot", { key: 'd585cf566cd6f83285799c9ff7bcd9af68906565', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '5a2765cd44fba885ae4f15db90b40c10c7ae412a', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'e166c38a3034dd0da20a3dc283f24a258912eb0b', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'cc0adf878938a0822fe4b406fe4c7aa9e4cd934f', class: header(), part: "header" }, h("slot", { key: '8150657d1b921868f605d62e4b4f0e67b1c346f5', name: "header" }, this.headerText)), h("div", { key: '524337a641cff5d3e95aeb97760909d06ad8d50d', class: content(), part: "content" }, h("slot", { key: '8d270fdb690f7ea65abcb346698d41f018df5117', name: "content" }, this.message)))));
+        return (h("div", { key: '3fe47e7ebc4fb9f9fad0fda8dedf11f2ea8e904f', class: "relative" }, h("slot", { key: '8dd0e99a839b2c9c0ad6df67356bf616dae407f1', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'b4339c24996ec4666ffb731f7908513ade8cb5d8', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f94ca6625dac67dd16f625398c007a274e677ac7', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'd64bf52940bef06b04ec2c13f3116652a7b6b8d6', class: header(), part: "header" }, h("slot", { key: 'be1ee83453f9b159297e6e7e73d5451f21fbb873', name: "header" }, this.headerText)), h("div", { key: '9838c02e51fac40992a34fdfcaecb8d48fba48c8', class: content(), part: "content" }, h("slot", { key: '0f01f42280a5058d4a4aacca035111e8990c194a', name: "content" }, this.message)))));
     }
     get el() { return this; }
     static get style() { return BcmPopoverStyle0; }