bromcom-ui-next 0.1.13 → 0.1.14

package/dist/components/bcm-dropdown.js

@@ -1,9 +1,9 @@
 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-d600acb5.js';
-import { d as defineCustomElement$2 } from './p-a83859ff.js';
+import { d as defineCustomElement$3 } from './p-b5bee06c.js';
+import { d as defineCustomElement$2 } from './p-41d34b15.js';
 
-const dropdownCss = ".visible{visibility:visible}.hidden{display:none}.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}";
+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}";
 const BcmDropdownStyle0 = dropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
@@ -45,7 +45,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         });
     }
     render() {
-        return (h(Host, { key: 'bbbe833906ad9261f0e186a73c38838895b4163a' }, h("bcm-button", { key: 'bc658a949cd8d65b92ec8458d6f7fc310a72ef4f', kind: "outline" }, h("span", { key: '3ff8e4e6765ea6bc1c8b41094ea7b7d928027d49', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: 'c625fa0a88c0e88d8ee4b8a9e76e04d2feabb34c', targetElement: this.buttonRef }, h("div", { key: 'e45943e172eef094f9009123c8267b74641d5087', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'd6b7558138785231877ab570b3e345b3deae008b', onSlotchange: this.handleSlotChange }))))));
+        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 }))))));
     }
     get host() { return this; }
     static get style() { return BcmDropdownStyle0; }

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

@@ -1 +1 @@
-{"file":"bcm-dropdown.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,2yBAA2yB,CAAC;AACh0B,0BAAe,WAAW;;MCOb,QAAQ;IALrB;;;;;QAUW,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAGA,EAAE,CAAC;YACzB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEK,qBAAgB,GAAG;YACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;aAC/D;SACF,CAAC;KAkBH;IApDC,gBAAgB;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAGD,wBAAwB,CAAC,KAAkB;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI;YAC9B,IAAI,IAAI,IAAI,OAAO,EAAE;gBACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;KACJ;IAcD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,mEAAY,IAAI,EAAC,SAAS,IACxB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACZ,IAAI,CAAC,OAAO,KACX,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,IACvC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-dropdown.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,m0BAAm0B,CAAC;AACx1B,0BAAe,WAAW;;MCOb,QAAQ;IALrB;;;;;QAUW,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAGA,EAAE,CAAC;YACzB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEK,qBAAgB,GAAG;YACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;aAC/D;SACF,CAAC;KAkBH;IApDC,gBAAgB;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;IAGD,wBAAwB,CAAC,KAAkB;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI;YAC9B,IAAI,IAAI,IAAI,OAAO,EAAE;gBACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;KACJ;IAcD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,mEAAY,IAAI,EAAC,SAAS,IACxB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB,EACZ,IAAI,CAAC,OAAO,KACX,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS,IACvC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACd,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/dropdown/dropdown.css?tag=bcm-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.component.tsx"],"sourcesContent":["/* :host {\n  --dropdown-box-min-weight: 32px;\n  --dropdown-box-max-width: 384px;\n  --dropdown-box-max-height: 384px;\n  --dropdown-box-background-color: var(--bcm-ui-color-background-basic-panel);\n} */\n/* \n.scroll {\n  height: 140px;\n  width: 140px;\n  overflow-y: auto;\n}\n\n.scroll:active::-webkit-scrollbar-thumb,\n.scroll:focus::-webkit-scrollbar-thumb,\n.scroll:hover::-webkit-scrollbar-thumb {\n  visibility: visible;\n}\n.scroll::-webkit-scrollbar-thumb {\n  background-color: darkgrey;\n  visibility: hidden;\n}\n\n.scroll::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n} */\n","import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-input.js

@@ -281,14 +281,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: '2ffb8fb2258052afb9a1be11c412f7ec2a77674a', class: "bcm-ui-element" }, this.label && (h("label", { key: '077c5815c06b749f8e65f05c0d71da7dec1350a9', class: classNames('input-label font-medium', {
+        return (h("div", { key: 'c17134d11d06c7310b672dfa948d6c6a4542fceb', class: "bcm-ui-element" }, this.label && (h("label", { key: '39772b19eaa57a1031b8a0c428ce95054928614b', 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: '7642829eb05ddbb9144a46f635c96bdf1c9ec826', name: "label" }, this.label), this.required && h("span", { key: '37e63e0fca75c432750797617ecdca1ef400365d' }, "*"))), h("div", { key: '6db34371d3c3694d9bfd9b5f7660bda0c381c27d', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '1fe5041c83183798eb81f895e7e8eb4c1f487e77', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'adf3a9c5517b8ea547b8758612cad7bae3f1ce06', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '827685ff7970556c419da213816a3fd7170d5412', name: "prefix" }))), h("input", { key: '620916eef85c0491c7ce8c315ed30c4509452008', 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: 'd4a6920200111d0c93719750db59f49c7e32e171', class: "flex items-center gap-2 px-2" }, h("slot", { key: '4d3879324fc478fef659acd21eefaefe5b2c9b9e', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '04ffae44189d3a0bc20e08bc1759c318d8552a06', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '81e317ab588b7bf2de6e19145d81665c1e4331fd', class: classNames('input-caption-text font-regular mt-1', {
+            }), 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', {
                 '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-linked.js

@@ -1,4 +1,4 @@
-import { B as BcmLinked$1, d as defineCustomElement$1 } from './p-a83859ff.js';
+import { B as BcmLinked$1, d as defineCustomElement$1 } from './p-41d34b15.js';
 
 const BcmLinked = BcmLinked$1;
 const defineCustomElement = defineCustomElement$1;

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-d600acb5.js';
+import { d as defineCustomElement$2 } from './p-b5bee06c.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: '7b36300911850336644ba3ff88625afe74252704' }, this.isOpen && (h("div", { key: '8877e265e8906847f79ab1474dc5cdda5fcb5a36', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: 'cf72deb7da9369bb25490412589047393a155e82', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: '394e3debd4b344a2cee594e523367c65d1223611', class: header() }, h("div", { key: 'bd1d8116a3674874e21ea6715eb368e9d96af7ff', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '7d27d912058563abac4a8935a0d04156931d9ad4', "icon-name": statusIcons[this.status] }), h("span", { key: '71330a33d4ad0b04aa61d41f14a93d3394e11be2', class: titleContainer() }, this.headerText), h("slot", { key: '4c28d74220496d5f351b9e6883d9da6b443c5364', name: "header" })), h("div", { key: '40e6b5af9cdfa38c15c82f9392330e3ec632faf4', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: 'b1e26bb4fa8cf8e9ca09e214115a77b483f02f8f', "icon-name": "far fa-times" }))), h("main", { key: '6ce63640ada28d460f5790922d58ab048bad6500', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '77e00cb3b6fcb6d2a3220e9e988e74731f40f224', name: "body" }, this.description)), h("footer", { key: '9794cd084e225fbcbd5c9845948a1006f2344356', class: footer() }, h("bcm-button", { key: 'c57ea7283d08ecc7d4892e0a917afe639ed6c5d9', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: '285cd19cbc84e0bbc7b20d194ace52e56fc0e1aa', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: 'b3fea375a0c9de678df8df1243b9643ec60dc375', name: "footer" }))))));
+        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" }))))));
     }
     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: 'cfb8fcaac724dbf87b41e30d8ab26e4b49907fff', class: "relative" }, h("slot", { key: '1d689d5f325edb3a29d20f530f70ce2323350e58', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '37c62feb962dee80af7c4f3c2b7877f47aa3cd54', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'cdd1de6298605a22871c859700899e32900c2d12', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'ed362d0b80dbbd004eaa2e173c7524e30feab7a6', class: header(), part: "header" }, h("slot", { key: 'ff230c25357b5fd4b5fa74fadb46c9434d4857c4', name: "header" }, this.headerText)), h("div", { key: '241c361c4ba6eb63899efabe3267f5c3e26002cc', class: content(), part: "content" }, h("slot", { key: '84c5da369d4108866aea942cb18180aaf2d51e02', name: "content" }, this.message)))));
+        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)))));
     }
     get el() { return this; }
     static get style() { return BcmPopoverStyle0; }

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

@@ -140,14 +140,14 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '959d1478174e39ed3d2e3c7d62b755baa5e4fc0c', class: host() }, this.label && (h("label", { key: 'bef009315a9a7cf5035df47b8eac802bace0a947', class: classNames('input-label font-medium', {
+        return (h("div", { key: '3a67eb56fe53467719a805529acd8ef98568d91e', class: host() }, this.label && (h("label", { key: '67e7e83b6ac7ecf852a7843fba71ba05cd8196f4', 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',
-            }) }, h("slot", { key: '14592ffb93e5dcd8c571db4ffbb98c06978463f5', name: "label" }, this.label), this.required && h("span", { key: 'e94a4292ffc92a2c74368969d6832096347a53d2' }, "*"))), h("div", { key: 'ab2c2d6acab6e1135d38ee048442c2830cc61a31', class: container() }, h("slot", { key: 'c28f130aa2110c089a5bbcf6d229b8d36006ab49', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: 'cf29817b625d5a3e5582ae70ecb8df41e8d3d9c0', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, h("slot", { key: 'aa3163d3a62c4f1be539cc292b324d543ea8447f', name: "label" }, this.label), this.required && h("span", { key: 'f11d9fd05bc09f2a01a1772b79a8146c392bf5dd' }, "*"))), h("div", { key: '6628dbe32507445ce01d430bd1cebdf2ec9cb83a', class: container() }, h("slot", { key: '692aeb2f866bceec5e8b0ff0b31914f98ff03dc2', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: 'fe024fbd773a8a43ddd79e60a66c09334b882c96', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled,
                 'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,
                 'text-[--bcm-ui-color-text-disabled]': this.disabled,

package/dist/components/bcm-radio.js

@@ -160,7 +160,7 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: 'f6f440b9016742847b3141ecabfd7faaea4cc76f', class: container(), style: this.getRadioStyle() }, h("input", { key: 'c172c0ebfd8b8a8cfdba8dd73adf70d423d99327', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '4c5c10f6c923bf9fa3199af85b42c190966afbec', class: dotContainer() }, h("div", { key: '65b26f7d04b3e60ebdace9f07764f8169efbbb45', class: dot() })), h("span", { key: '611739192522bf8b9b46c0c33baeeae77c78315f', class: labelClass() }, h("slot", { key: '734b2a5800edd753c72580ada7eb0e8e1f5661f1' }, this.label))));
+        return (h("label", { key: '49fcb622640b201f52dd9f39aaae789803a85c73', class: container(), style: this.getRadioStyle() }, h("input", { key: '2c9bb12a06d535504439f8c72524103a109107e7', "aria-label": this.label, role: "radio", "aria-checked": this.checked.toString(), type: "radio", name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, checked: this.checked, class: "appearance-none sr-only", onClick: () => this.handleClick(), onFocus: e => this.bcmFocus.emit(e), onBlur: e => this.bcmBlur.emit(e) }), h("div", { key: '879d950b3885ef9e5a155086869efa5c037e7b1b', class: dotContainer() }, h("div", { key: '62c61bce309b364dbc3dce3d2159210d56249889', class: dot() })), h("span", { key: '277221257d5dc646a195e8361893a83886bbbcef', class: labelClass() }, h("slot", { key: 'bc348844c8722e7c8f119bebd1e726fab50fa650' }, this.label))));
     }
     get host() { return this; }
     static get style() { return BcmRadioStyle0; }

package/dist/components/bcm-segmented-picker-option.js

@@ -92,11 +92,11 @@ const BcmSegmentedPickerOption$1 = /*@__PURE__*/ proxyCustomElement(class BcmSeg
     render() {
         const size = this.size || this.getSizeFromParent();
         const disabled = this.isDisabled();
-        return (h(Host, { key: '081d1426a5901622f55c00fee4f69af367ab526b' }, h("button", { key: 'ec6d3c49be26a259b75ecb5f8b22077f94079f78', class: this.optionClass({
+        return (h(Host, { key: '1dbccef734760bfce79b3349e3443edc81eb18c8' }, h("button", { key: 'bd45f4fe085df93346f1c471ee25f41f3d1f599c', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: 'cf285bbdfa6f4db8d32eb804f35e24b8b3b182af' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: '138c4b9ab99a738ec8b69726a44961ba2aaf0cdc' }, this.label))));
     }
     get host() { return this; }
     static get style() { return BcmSegmentedPickerOptionStyle0; }

package/dist/components/bcm-segmented-picker.js

@@ -126,11 +126,11 @@ const BcmSegmentedPicker$1 = /*@__PURE__*/ proxyCustomElement(class BcmSegmented
         }, 10);
     }
     render() {
-        return (h(Host, { key: '33ad6f1c1113585b5cb8705edefa9753e59536bb' }, h("div", { key: '04ea007f13a439b9168ca50581ccae383fcd2e48', class: this.segmentedClass({
+        return (h(Host, { key: '571801e9cda644fdeefdf11f33789051c0f70145' }, h("div", { key: '0dde275a03d67eab8acfe4fab419f59bbabcf0f2', class: this.segmentedClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
-            }) }, h("div", { key: '5b2c42c0c4b7e82bbdd9a6d7f164cc15d448a280', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '2fce9ee1453724152283a048091440f1ec330458', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '9441b713b3496cfa6b216bab0aee4769d01121f0' })))));
+            }) }, h("div", { key: '87a53fc461965d4fc29b16e20585b0db2c4fe459', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: 'a803b9207b514760ba16c004aa33836379797fd9', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '7b5df35c4d424ab84cfebac564a50b96dcbd933b' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/bcm-switch.js

@@ -170,12 +170,12 @@ const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class BcmSwitch extends H {
         });
         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: '1301508344227ab292f8847c1202676830568534', class: base() }, h("label", { key: 'ced1bb0bea6a6204d8e2f569dc3071f116732647', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: 'a432f7aed823ccc8cc7f008f6422f5c0bcd4f542', 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: '51ff936fdc0d0d77eb32bda235425d3d26d0c0aa', class: label() }, h("slot", { key: 'f1411fe2f3da9b7f9f606afd3852e33284a53b53' }, this.label)), h("label", Object.assign({ key: 'e005835f2e22c03713b3d7732d6c33e622429551', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        return (h("div", { key: '78be11da3cff01c755620ffc913a1acf714ff04d', class: base() }, h("label", { key: '9eeecd62889eb6c2aa5b3184682bda4b0d36f04a', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '9b22c1f3dcddbf24db21fd86347773f739abc731', 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: '829c07905b163187b5802be3145e02976b8b8fcc', class: label() }, h("slot", { key: '45e44bdba10ea0695d5ce346283827dfe9f8575d' }, this.label)), h("label", Object.assign({ key: '3b918162f05b833c339b46bc3d3bc07f4e86c8bd', 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: 'cac7f8bcb004fe7bf958ad9d1c30006db78868a2', class: dot() }))), this.error && this.caption && h("span", { key: '7a560b8e5192f6c184bcc0cf67cc453d3d4fa4d0', class: caption() }, this.caption), h("slot", { key: '8ebde4cddd169ca14f6c6a8ba2ad637799ea34fd', name: "caption" })));
+            } }), h("div", { key: 'c77f5b63686eeebe72dab50b2e00d5cfec7ddecf', class: dot() }))), this.error && this.caption && h("span", { key: 'c872a7d7fba3a650341cb230c7377b32f43c937d', class: caption() }, this.caption), h("slot", { key: '36c8458eefd92f6889951c36f46d84f3675ba193', name: "caption" })));
     }
     get el() { return this; }
     static get style() { return BcmSwitchStyle0; }

package/dist/components/bcm-tabs-content.js

@@ -10,7 +10,7 @@ const BcmTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsContent e
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'f30427db9357eb5a862beb46ba58226cf9bffed3', role: "tabpanel" }, h("slot", { key: '7359b3ea816b8d8f8f8f3d1934d76cf8a618d985' })));
+        return (h(Host, { key: '99de2fdc1c528dd7287d0e49858cc04b7207c244', role: "tabpanel" }, h("slot", { key: '48fe2edf256c352892714aba90468e43e7deff4a' })));
     }
     static get style() { return BcmTabsContentStyle0; }
 }, [1, "bcm-tabs-content", {

package/dist/components/bcm-tabs-list.js

@@ -31,7 +31,7 @@ const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends
     }
     render() {
         const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: '408657315efff43f37390048c24a4687d3ee81c2', class: container(), slot: "tabs-list" }, h("div", { key: 'fe184cc505a321c0b46228e66ce2182bff57397f', class: inkbar() }), h("div", { key: '671e17c08b201c15573f7cf6f57537949e1480a8', class: tabList(), role: "tablist" }, h("slot", { key: 'adcdd52b940fd3e2fbfad8cd626a41d56d8abb6f' }))));
+        return (h("div", { key: '8965018c5da77378a119c889044088caf1ff2659', class: container(), slot: "tabs-list" }, h("div", { key: '83b1220210909270e5b9b30e827bade4ddf7059f', class: inkbar() }), h("div", { key: '0a8c25220e73a2a2054dad1395e557fb5eadea5c', class: tabList(), role: "tablist" }, h("slot", { key: '4c5574f602a3721b9d1437b39b1b1ff54e735daf' }))));
     }
     static get style() { return BcmTabsListStyle0; }
 }, [1, "bcm-tabs-list"]);

package/dist/components/bcm-tabs-trigger.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
 
-const tabsTriggerCss = ".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)}";
+const tabsTriggerCss = ".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)}";
 const BcmTabsTriggerStyle0 = tabsTriggerCss;
 
 const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger extends H {
@@ -79,7 +79,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
             active: this.active,
             disabled: this.disabled,
         });
-        return (h(Host, { key: '737dae93f86d0f7ae35c290439488c6266cf5ed9', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '1ba4064730d5b2503a5d30f21542ae4669ddc9cd', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '071b435af12f5196249d277681b8a32736dbd88d' })), h("div", { key: 'b5c3a7ce4ead271443224dfb34baaa24f3964587', class: borderLine() })));
+        return (h(Host, { key: '2d8e6c966162facbc2c34aeecdd32d0b69024a3a', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '258b41f80ef9ab8b258e27aca6f44f1888dc7da7', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '2d98c9a3e6c85e9bbb9803c47934cc0b31b5a736' })), h("div", { key: 'bd48f01c90894e1a1553e1de2bb16c24239ec9fd', class: borderLine() })));
     }
     get el() { return this; }
     static get style() { return BcmTabsTriggerStyle0; }

package/dist/components/bcm-tabs-trigger.js.map

@@ -1 +1 @@
-{"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,+8DAA+8D,CAAC;AACv+D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBI,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGC,EAAE,CACd;YACI,KAAK,EAAE;gBACH,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,iGAAiG;aAChH;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACtC;gBACD,MAAM,EAAE;oBACJ,IAAI,EAAE;wBACF,GAAG,EAAE,oBAAoB;qBAC5B;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,YAAY;qBACpB;iBACJ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE;wBACF,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAClD;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBACjD;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAiBL;;;;;IAjEW,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;IA+CD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAChF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACvF,8DAAQ,CACH,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsTrigger","tv"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n    tag: 'bcm-tabs-trigger',\n    styleUrl: 'tabs-trigger.css',\n    shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n    /**\n     * Reference to the host element\n     */\n    @Element() el: HTMLElement;\n\n    /**\n     * Unique identifier value for the tab\n     */\n    @Prop({ reflect: true })\n    value: string;\n\n    /**\n     * Whether the tab is currently active\n     */\n    @Prop({ reflect: true })\n    active: boolean = false;\n\n    /**\n     * Size of the tab\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Whether the tab is disabled\n     */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Event emitted when this tab is selected\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmTabSelected',\n    })\n    bcmTabSelected: EventEmitter<string>;\n\n    /**\n     * Handles click events on the tab\n     * Emits bcmTabSelected event with tab value if not disabled\n     */\n    private handleClick() {\n        if (this.disabled) return;\n        this.bcmTabSelected.emit(this.value);\n    }\n\n    /**\n     * Tailwind variants configuration for styling\n     */\n    private class = tv(\n        {\n            slots: {\n                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out',\n            },\n            variants: {\n                size: {\n                    small: { tab: 'text-size-4 gap-2' },\n                    medium: { tab: 'text-size-5 gap-2.5' },\n                    large: { tab: 'text-size-6 gap-3' },\n                },\n                active: {\n                    true: {\n                        tab: 'text-color-primary',\n                    },\n                    false: {\n                        tab: 'text-color',\n                    },\n                },\n                disabled: {\n                    true: {\n                        tab: 'cursor-not-allowed text-color-disabled',\n                        borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n                    },\n                    false: {\n                        tab: 'cursor-pointer text-color hover:text-color-primary',\n                        borderLine: 'bg-[--bcm-ui-color-text-default]',\n                    },\n                },\n            },\n            defaultVariants: {\n                size: 'medium',\n                active: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        const { tab, borderLine } = this.class({\n            size: this.size,\n            active: this.active,\n            disabled: this.disabled,\n        });\n        return (\n            <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n                <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n                    <slot />\n                </button>\n                <div class={borderLine()}></div>\n            </Host>\n        );\n    }\n}"],"version":3}
+{"file":"bcm-tabs-trigger.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,u+DAAu+D,CAAC;AAC//D,6BAAe,cAAc;;MCWhBA,gBAAc;IAL3B;;;;;;;;QAqBI,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGC,EAAE,CACd;YACI,KAAK,EAAE;gBACH,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,iGAAiG;aAChH;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACtC;gBACD,MAAM,EAAE;oBACJ,IAAI,EAAE;wBACF,GAAG,EAAE,oBAAoB;qBAC5B;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,YAAY;qBACpB;iBACJ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE;wBACF,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAClD;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBACjD;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAiBL;;;;;IAjEW,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;IA+CD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAChF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACvF,8DAAQ,CACH,EACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsTrigger","tv"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n    tag: 'bcm-tabs-trigger',\n    styleUrl: 'tabs-trigger.css',\n    shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n    /**\n     * Reference to the host element\n     */\n    @Element() el: HTMLElement;\n\n    /**\n     * Unique identifier value for the tab\n     */\n    @Prop({ reflect: true })\n    value: string;\n\n    /**\n     * Whether the tab is currently active\n     */\n    @Prop({ reflect: true })\n    active: boolean = false;\n\n    /**\n     * Size of the tab\n     */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Whether the tab is disabled\n     */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Event emitted when this tab is selected\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmTabSelected',\n    })\n    bcmTabSelected: EventEmitter<string>;\n\n    /**\n     * Handles click events on the tab\n     * Emits bcmTabSelected event with tab value if not disabled\n     */\n    private handleClick() {\n        if (this.disabled) return;\n        this.bcmTabSelected.emit(this.value);\n    }\n\n    /**\n     * Tailwind variants configuration for styling\n     */\n    private class = tv(\n        {\n            slots: {\n                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out',\n            },\n            variants: {\n                size: {\n                    small: { tab: 'text-size-4 gap-2' },\n                    medium: { tab: 'text-size-5 gap-2.5' },\n                    large: { tab: 'text-size-6 gap-3' },\n                },\n                active: {\n                    true: {\n                        tab: 'text-color-primary',\n                    },\n                    false: {\n                        tab: 'text-color',\n                    },\n                },\n                disabled: {\n                    true: {\n                        tab: 'cursor-not-allowed text-color-disabled',\n                        borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n                    },\n                    false: {\n                        tab: 'cursor-pointer text-color hover:text-color-primary',\n                        borderLine: 'bg-[--bcm-ui-color-text-default]',\n                    },\n                },\n            },\n            defaultVariants: {\n                size: 'medium',\n                active: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        const { tab, borderLine } = this.class({\n            size: this.size,\n            active: this.active,\n            disabled: this.disabled,\n        });\n        return (\n            <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n                <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n                    <slot />\n                </button>\n                <div class={borderLine()}></div>\n            </Host>\n        );\n    }\n}"],"version":3}

package/dist/components/bcm-tabs.js

@@ -195,7 +195,7 @@ const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'b79579d373af5caf1b4e8afec360f5ab860b490b' }, h("div", { key: '875e76a3553e4612a21b0eb3cf236354b089c455', class: this.tabClass() }, h("slot", { key: '583eddad715730b58a158233da59e82834a6669a', name: "tabs-list" }), h("slot", { key: 'd1522bf0aaca569d639c2c2ee44a6bb4877b52db' }))));
+        return (h(Host, { key: '90a1296c412a53c936691176b1d1e4feb1459a4d' }, h("div", { key: 'bfb23bf3b9bdb94aefab65541a0b3eb0423b726b', class: this.tabClass() }, h("slot", { key: 'fd4a8809d06c9c155f2d2f87caa1c55087f423f7', name: "tabs-list" }), h("slot", { key: '218450d64bd1cf715581e0a17070b88211e81d9f' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/bcm-text.js

@@ -114,7 +114,7 @@ const BcmText$1 = /*@__PURE__*/ proxyCustomElement(class BcmText extends H {
         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: '0c9e834dbe47309b7ec41c7c79bf07bf7d825f26', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'c947db45b7b7147c0780bbb3294802cd0f1be268' }, this.text)));
+        return (h(Tag, { key: 'ef2836e00bfbb1dd406179f403720e013eeb6239', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'b707cba3afdcb3892a4fa0d3ea22daefa4b7952a' }, this.text)));
     }
     static get style() { return BcmTextStyle0; }
 }, [1, "bcm-text", {

package/dist/components/bcm-textarea.js

@@ -273,14 +273,14 @@ const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class BcmTextarea extends
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: '2c0921598e0a33a92660a3d4fecd428c78beead9', class: "bcm-ui-element" }, this.label && (h("label", { key: '7fc9122c49f11aff7de68d4aef855ab6cf68285c', class: classNames('textarea-label font-medium', {
+        return (h("div", { key: '84e5a1c974ab1998170232ef63f58a1cf967beee', class: "bcm-ui-element" }, this.label && (h("label", { key: '3d3bd4c4d65307917aeb5f4175cd3e09e7acd2d3', 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: '9a3a55b0f24060e9996e42aa93efe806cb871618', name: "label" }, this.label), this.required && h("span", { key: 'bfef43587667f26d6cd97052c0ff127765044d42' }, "*"))), h("div", { key: '5b12ae013624349f9ca905394dd16f0247f5cf4f', class: base() }, h("textarea", { key: 'abbad89db5f36716bc39118d62644e79300e103f', 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: '5262a6ebe929e326355e4cf18e47db49e8350b05', name: "label" }, this.label), this.required && h("span", { key: '42205548abefadd715eaafdcad4031effc71a4c4' }, "*"))), h("div", { key: 'e7305ad7b923e27b63b518a45bd21470214db4d2', class: base() }, h("textarea", { key: '276dbfa0caea27960607f29ced885ca557519e95', 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);
@@ -288,7 +288,7 @@ const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class BcmTextarea extends
                 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: '192f21a7e5704625356b0c27d86d7cc699a3b9db', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '969597cab284f83fa5c9721b9e8f8b2fbe9aad4c', 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: 'ec27b73083d38acf3a7814c0ad6dfa3d48972302', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '34bea9b1ba9edf75f569668b0ea93796d517f312', 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/components/bcm-tooltip.js

@@ -174,7 +174,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
             size: this.size,
             isOpen: this.open,
         });
-        return (h("div", { key: 'cc38e1ce7b446a135f1d2597cf8086aaf8af8a07', class: "relative" }, h("slot", { key: 'd3c279eec1c236635dab757f1a65f7d6a4e11f8d', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'e5bc2f9aed8a287ea79f21c7b66de5393689f732', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: '0634cb44cbcef4597de4f274a0a40af8885363cd', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '89182355e0cf7c39da2a69e9e1dd5ca0d51537a9', name: "tooltip" }, this.message))));
+        return (h("div", { key: '5a1c6f133d30fa10beac54fafd9f890cf359ff9c', class: "relative" }, h("slot", { key: '5f6b49c72c789a214b506c653205757b3b331913', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '0c91d8ed31a3ca64dd2ae3f15a89438083fcad17', role: "tooltip", class: tooltip(), ref: (el) => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: 'a0f68b67b517b4890d9774d117a54722119916f5', class: arrow(), ref: (el) => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '3ae9d5e6694faf19712bb8eb58452a48df49d382', name: "tooltip" }, this.message))));
     }
     get el() { return this; }
     static get style() { return BcmTooltipStyle0; }

package/dist/components/{p-a83859ff.js → p-41d34b15.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { a as autoUpdate, o as offset, f as flip, s as shift, c as computePosition } from './p-50133556.js';
 
-const linkedCss = ".absolute{position:absolute}.relative{position:relative}.block{display:block}.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))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:block;position:relative}.floating-content{min-width:-moz-max-content;min-width:max-content;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;will-change:transform,opacity}.floating-visible{animation:fadeInScale .2s ease-out}.floating-hidden{pointer-events:none}.floating-wrapper{position:relative;z-index:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.floating-arrow{z-index:-1}.floating-arrow,.floating-arrow:before{height:10px;position:absolute;width:10px}.floating-arrow:before{background:#fff;border:1px solid #e2e8f0;content:\"\";transform:rotate(45deg)}.arrow-top{bottom:-5px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{top:-5px}.arrow-left{right:-5px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{left:-5px}.arrow-top:before{border-bottom:0;border-right:0}.arrow-bottom:before{border-left:0;border-top:0}.arrow-left:before{border-right:0;border-top:0}.arrow-right:before{border-bottom:0;border-left:0}@media (max-width:768px){.floating-content{max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.hidden{display:none}.resize{resize:both}.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)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.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,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
+const linkedCss = ".absolute{position:absolute}.relative{position:relative}.block{display:block}.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))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}bcm-linked{display:block;position:relative}bcm-linked[append-to-body]{display:none}.floating-content{min-width:-moz-max-content;min-width:max-content;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;will-change:transform,opacity}.floating-visible{animation:fadeInScale .2s ease-out}.floating-hidden{display:none!important;pointer-events:none}.floating-wrapper{position:relative;z-index:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.floating-arrow{z-index:-1}.floating-arrow,.floating-arrow:before{height:10px;position:absolute;width:10px}.floating-arrow:before{background:#fff;border:1px solid #e2e8f0;content:\"\";transform:rotate(45deg)}.arrow-top{bottom:-5px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{top:-5px}.arrow-left{right:-5px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{left:-5px}.arrow-top:before{border-bottom:0;border-right:0}.arrow-bottom:before{border-left:0;border-top:0}.arrow-left:before{border-right:0;border-top:0}.arrow-right:before{border-bottom:0;border-left:0}@media (max-width:768px){.floating-content{max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.hidden{display:none}.resize{resize:both}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.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}";
 const BcmLinkedStyle0 = linkedCss;
 
 const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
@@ -24,7 +24,6 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
         this.disabled = false;
         // Style configuration
         this.zIndex = 1000;
-        this.appendToBody = false;
         this.destroyOnHide = false;
         // State
         this.isVisible = false;
@@ -84,12 +83,19 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
             this.bcmHidden.emit();
         }
     }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.floatingEl = this.host.querySelector('.floating-content');
+    async componentDidLoad() {
+        // Wait for render
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        this.floatingEl = this.host.querySelector('.floating-content');
+        if (this.floatingEl) {
             this.isReady = true;
             this.connectTarget();
-        });
+            this.setupFloatingObserver();
+            console.log('✅ bcm-linked initialized successfully');
+        }
+        else {
+            console.error('❌ Could not find .floating-content element');
+        }
     }
     disconnectedCallback() {
         var _a, _b;
@@ -97,17 +103,6 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
         this.clearTimeouts();
         (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
         (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        // Restore any portal elements before cleanup
-        if (this.appendToBody && this.floatingEl && this.floatingEl.hasAttribute('data-floating-portal')) {
-            if (this.originalParent) {
-                if (this.originalNextSibling) {
-                    this.originalParent.insertBefore(this.floatingEl, this.originalNextSibling);
-                }
-                else {
-                    this.originalParent.appendChild(this.floatingEl);
-                }
-            }
-        }
     }
     connectTarget() {
         if (!this.isReady)
@@ -208,12 +203,23 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
     async updatePosition() {
         if (!this.targetEl || !this.floatingEl || !this.isVisible)
             return;
+        // Use autoPlacement only for bottom-start (dropdown default)
+        // For other placements, respect the manual placement with flip fallback
+        // const useAutoPlacement = this.placement === 'bottom-start';
         const middleware = [
             offset(this.offset),
+            // useAutoPlacement
+            //   ? autoPlacement({
+            //       allowedPlacements: ['bottom-start', 'bottom-end', 'bottom', 'top-start', 'top-end', 'top', 'right-start', 'right-end', 'right', 'left-start', 'left-end', 'left'],
+            //       boundary: document.body,
+            //     })
+            //   :
             flip({
-                fallbackPlacements: ['top-start', 'bottom-start', 'right-start', 'left-start'],
+                fallbackPlacements: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'],
+            }),
+            shift({
+                padding: 8,
             }),
-            shift({ padding: 8 }),
         ];
         const { x, y, placement } = await computePosition(this.targetEl, this.floatingEl, {
             placement: this.placement,
@@ -246,15 +252,8 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
             return;
         this.bcmShow.emit();
         this.isVisible = true;
-        // Move to body if appendToBody is enabled - now much simpler without shadow DOM
-        if (this.appendToBody && this.floatingEl && !document.body.contains(this.floatingEl)) {
-            // Store original position for restoration
-            this.originalParent = this.floatingEl.parentElement;
-            this.originalNextSibling = this.floatingEl.nextElementSibling;
-            // Move the actual element to body (preserves all content including Angular components)
-            this.floatingEl.setAttribute('data-floating-portal', 'true');
-            document.body.appendChild(this.floatingEl);
-        }
+        // Use requestAnimationFrame to ensure the element is visible before positioning
+        await new Promise(resolve => requestAnimationFrame(resolve));
         await this.updatePosition();
     }
     async hide() {
@@ -262,21 +261,6 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
             return;
         this.bcmHide.emit();
         this.isVisible = false;
-        // Restore element to original position if it was moved to body
-        if (this.appendToBody && this.floatingEl && this.floatingEl.hasAttribute('data-floating-portal')) {
-            this.floatingEl.removeAttribute('data-floating-portal');
-            if (this.originalParent) {
-                if (this.originalNextSibling) {
-                    this.originalParent.insertBefore(this.floatingEl, this.originalNextSibling);
-                }
-                else {
-                    this.originalParent.appendChild(this.floatingEl);
-                }
-            }
-            // Clear stored references
-            this.originalParent = null;
-            this.originalNextSibling = null;
-        }
         if (this.destroyOnHide && this.floatingEl && this.floatingEl.parentNode) {
             this.floatingEl.parentNode.removeChild(this.floatingEl);
         }
@@ -292,6 +276,17 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
     async updatePositioning() {
         await this.updatePosition();
     }
+    setupFloatingObserver() {
+        if (!this.floatingEl)
+            return;
+        // Observe floating element size changes for position updates
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.isVisible) {
+                this.updatePosition();
+            }
+        });
+        this.resizeObserver.observe(this.floatingEl);
+    }
     render() {
         const floatingClasses = {
             'floating-content': true,
@@ -300,20 +295,16 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
             'floating-with-arrow': this.arrow,
             'floating-destroy-on-hide': this.destroyOnHide,
         };
-        return [
-            // Portal div to body for positioning, but keep slot in shadow DOM
-            h("div", { key: '2fa1273f3f92b1904f8316b8aaea45d84ac5f023', class: floatingClasses, style: {
-                    position: 'fixed',
-                    top: '0px',
-                    left: '0px',
-                    zIndex: this.zIndex.toString(),
-                    visibility: this.isVisible ? 'visible' : 'hidden',
-                    opacity: this.isVisible ? '1' : '0',
-                    pointerEvents: this.isVisible ? 'auto' : 'none',
-                } }, this.arrow && h("div", { key: '6a25f85392fd3031a52f3f3be53263917adb61c8', class: "floating-arrow" }), h("div", { key: '0e1295e4f9b9764971689d94fa21e9c2b0dcefea', class: "floating-wrapper" }, h("slot", { key: '0b5d6e6cf9ffa8262a6fd9cc7c1b9bd46029c220' }))),
-            // Hidden content holder for slot fallback
-            h("div", { key: '66f2dd9882f4b1870214db30c8026073c86ad137', style: { display: 'none' } }, h("slot", { key: 'ea0c9eb10e96a65a3af21a615f5c7df939f2717c', name: "fallback" })),
-        ];
+        return (h(Host, { key: '5b5ac35aeef8091a7aa19eb6c88c4b6960b88b64' }, h("div", { key: '4900d17e38cd87537f5214ca665ea291b29c2c04', class: floatingClasses, style: {
+                position: 'fixed',
+                top: '0px',
+                left: '0px',
+                zIndex: this.zIndex.toString(),
+                display: this.isVisible ? 'block' : 'none',
+                visibility: this.isVisible ? 'visible' : 'hidden',
+                opacity: this.isVisible ? '1' : '0',
+                pointerEvents: this.isVisible ? 'auto' : 'none',
+            } }, this.arrow && h("div", { key: '47ad1103b19971976bff54dadd2d35c6ef9f42d9', class: "floating-arrow" }), h("div", { key: 'd3a8f745ea4f057801aea8662274d5bff2598a3a', class: "floating-wrapper" }, h("slot", { key: 'f09ac0ac103d5625e0fe3a495bdc4bcbed77a44e' }))), h("div", { key: '5fe779426e04d11fff0ab268d044aaf8b36b8d57', style: { display: 'none' } }, h("slot", { key: 'f3ff0b596b1a6eb7389679dfd42b3df25bd30138', name: "fallback" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -333,7 +324,6 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class BcmLinked extends H {
         "arrow": [4],
         "disabled": [4],
         "zIndex": [2, "z-index"],
-        "appendToBody": [4, "append-to-body"],
         "destroyOnHide": [4, "destroy-on-hide"],
         "isVisible": [32],
         "isReady": [32],
@@ -363,4 +353,4 @@ defineCustomElement();
 
 export { BcmLinked as B, defineCustomElement as d };
 
-//# sourceMappingURL=p-a83859ff.js.map
+//# sourceMappingURL=p-41d34b15.js.map