npm - bromcom-ui-next - Versions diffs - 0.1.9 → 0.1.11 - Mend

bromcom-ui-next 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (255) hide show

package/dist/components/bcm-divider.js CHANGED Viewed

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

package/dist/components/bcm-divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-divider.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,~~yrBAAyrB~~,CAAC;~~AAC7sB~~,yBAAe,UAAU;;MCcZ,OAAO;IALpB;;;;;;;;;;;QAcI,cAAS,GAA8B,YAAY,CAAC;;;;;;;;QAUpD,YAAO,GAAkC,OAAO,CAAC;;;;;;;;;;;;QAcjD,SAAI,GAAiC,QAAQ,CAAC;QAEtC,iBAAY,GAAGA,EAAE,CACrB;YACI,IAAI,EAAE,+BAA+B;YACrC,QAAQ,EAAE;gBACN,SAAS,EAAE;oBACP,UAAU,EAAE,iBAAiB;oBAC7B,QAAQ,EAAE,iBAAiB;iBAC9B;gBACD,OAAO,EAAE;oBACL,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,eAAe;oBACvB,MAAM,EAAE,eAAe;iBAC1B;gBACD,IAAI,EAAE;oBACF,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,UAAU;iBACpB;aACJ;YACD,eAAe,EAAE;gBACb,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,QAAQ;aACjB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAeL;IAbG,MAAM;QACF,QACI,4DACI,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAClB,CAAC,GACC,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-divider.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,itBAAitB,CAAC;AACruB,yBAAe,UAAU;;MCcZ,OAAO;IALpB;;;;;;;;;;;QAcI,cAAS,GAA8B,YAAY,CAAC;;;;;;;;QAUpD,YAAO,GAAkC,OAAO,CAAC;;;;;;;;;;;;QAcjD,SAAI,GAAiC,QAAQ,CAAC;QAEtC,iBAAY,GAAGA,EAAE,CACrB;YACI,IAAI,EAAE,+BAA+B;YACrC,QAAQ,EAAE;gBACN,SAAS,EAAE;oBACP,UAAU,EAAE,iBAAiB;oBAC7B,QAAQ,EAAE,iBAAiB;iBAC9B;gBACD,OAAO,EAAE;oBACL,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,eAAe;oBACvB,MAAM,EAAE,eAAe;iBAC1B;gBACD,IAAI,EAAE;oBACF,KAAK,EAAE,cAAc;oBACrB,MAAM,EAAE,UAAU;oBAClB,KAAK,EAAE,UAAU;iBACpB;aACJ;YACD,eAAe,EAAE;gBACb,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,QAAQ;aACjB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAeL;IAbG,MAAM;QACF,QACI,4DACI,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAClB,CAAC,GACC,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n display: block;\n --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n /\n@Component({\n tag: 'bcm-divider',\n styleUrl: 'divider.css',\n shadow: true,\n})\nexport class Divider implements ComponentInterface {\n /\n @prop {('horizontal'\|'vertical')} direction\n * @description Determines the orientation of the divider\n * @default 'horizontal'\n * @example\n * <bcm-divider direction=\"vertical\" />\n /\n @Prop()\n direction: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n @prop {('solid'\|'dashed'\|'dotted')} variant\n * @description Sets the border style of the divider\n * @default 'solid'\n * @example\n * <bcm-divider variant=\"dashed\" />\n /\n @Prop()\n variant: 'solid' \| 'dashed' \| 'dotted' = 'solid';\n\n /\n @prop {('small'\|'medium'\|'large')} size\n * @description Controls the thickness of the divider\n * @default 'medium'\n * @values\n * - small: 1px border\n * - medium: 2px border\n * - large: 4px border\n * @example\n * <bcm-divider size=\"large\" />\n */\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n private dividerClass = tv(\n {\n base: 'border-[--bcm-divider-border]',\n variants: {\n direction: {\n horizontal: 'w-full border-t',\n vertical: 'h-full border-l',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n size: {\n small: 'border-[1px]',\n medium: 'border-2',\n large: 'border-4',\n },\n },\n defaultVariants: {\n direction: 'horizontal',\n variant: 'solid',\n size: 'medium',\n },\n },\n {\n twMerge: false,\n },\n );\n\n render() {\n return (\n <div\n role=\"separator\"\n aria-orientation={this.direction}\n class={this.dividerClass({\n direction: this.direction,\n variant: this.variant,\n size: this.size,\n })}\n ></div>\n );\n }\n}\n"],"version":3}

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

@@ -47,10 +47,10 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         var _a;
-        return (h("div", { key: '210f1b6277e07eeabd5da39d63a332ae84bed898', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: 'dab286a93e70df2389820986b12dbb099686a949', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '4edc3ba20bd9b7f0bcb456178c72c3050e391e31', name: "left-content" }, this.icon && h("bcm-icon", { key: '867366e7d2491d1d59613f1ada4b5355ea1f67f9', "icon-name": this.icon })), h("div", { key: '845b630b0865d7e73dec69f00819105c7447fac8', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'ad70e94c42c8ee3bf01e8e14ee9d21909cacc204' }, this.text)), h("slot", { key: 'dfd1dd09b8c0c2f8927e8804087b32254fc7a05d', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: 'd8b3f85acfa5f9744cdcd7aac41cce576123ff2b', name: "left-content" }, this.icon && h("bcm-icon", { key: '4a8908b05d48832b5758fa430f8d188b2bcb2caf', "icon-name": this.icon })), h("div", { key: '233863671bd28de9c5bc45f7221398f04297dcaa', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'b2cf533aff90f2bff5328d26b964f00664d42473' }, this.text)), h("slot", { key: '3f423b125ba32fe7d593a0cb5d000b7a6db8f172', 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 CHANGED Viewed

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

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

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

@@ -281,14 +281,14 @@ const BcmInput$1 = /*@__PURE__*/ proxyCustomElement(class BcmInput extends H {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: '329961819a0b1206c3d63b9c243ff7a40ed804af', class: "bcm-ui-element" }, this.label && (h("label", { key: 'aaf17bea9b4b76e377688a09ffc6b3c03802dd0a', class: classNames('input-label font-medium', {
+        return (h("div", { key: '2ffb8fb2258052afb9a1be11c412f7ec2a77674a', class: "bcm-ui-element" }, this.label && (h("label", { key: '077c5815c06b749f8e65f05c0d71da7dec1350a9', 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: 'dcd71580ffeb1d551b44bbf5855c58a0fd894df7', name: "label" }, this.label), this.required && h("span", { key: '76cd1eba6895c9764de8bd5d920ece61378a6ccf' }, "*"))), h("div", { key: 'd9b6a175dc8b3489ebb48aa56baa8808fdffec55', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '5557b58dba9ccfe42b04bb29169dfce72a460423', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '7f2e74230b52334ca860fda49e5ffd78b3b5f7f6', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '74bad4cd327a1f3b40f793073b4e842915438ad3', name: "prefix" }))), h("input", { key: 'bef941d6c710a5f62a7fc8b6c92dd4a7970dba25', 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: '000769fffb5af147a41919393b527b36158b9471', class: "flex items-center gap-2 px-2" }, h("slot", { key: '0064416ee9905b16508b10892e2eb00b7bc3923a', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'b7dd33c6c1c6b5dff32206d493b9c76b927dd535', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '307629a3cb19870c5e32cb2fa7124278ae273b97', class: classNames('input-caption-text font-regular mt-1', {
+            }), 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', {
                 '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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BcmLinked$1, d as defineCustomElement$1 } from './p-5f7a0d0d.js';
+import { B as BcmLinked$1, d as defineCustomElement$1 } from './p-65ffc29a.js';
 const BcmLinked = BcmLinked$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-5377117d.js';
-import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-9594cebb.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-434bf03a.js';
+import { d as defineCustomElement$2 } from './p-f6176f29.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 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}.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;
 // Status icons for different states
@@ -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: '9c275c728ff7cabce1a564cf1f062b65c732c2f7' }, this.isOpen && (h("div", { key: '04b20e5773d7c2ce6a2bb4fbe2801bb0d775a425', role: "dialog", "aria-labelledby": "pop-confirm-title", style: this.popoverStyle, class: container(), ref: el => (this.popoverElement = el) }, h("div", { key: 'bff8a3617e2615efdfe24ff9e73bcad4b55e54ea', ref: el => (this.arrowElement = el), class: `arrow w-4 h-2 ${(_a = this.currentPlacement) !== null && _a !== void 0 ? _a : 'top'}` }), h("header", { key: 'fb7c440f138f4950dbfd0c6e473ab769d37e5e20', class: header() }, h("div", { key: 'ed166db8cf2ced87a0442af476037f0706ad5f67', class: headerLeftContent() }, this.statusIcon && h("bcm-icon", { key: '077dd2de165608062c49ad831c0d67488e5270de', "icon-name": statusIcons[this.status] }), h("span", { key: '4be735274dad1742b9cd956da5520eb922a9a817', class: titleContainer() }, this.headerText), h("slot", { key: '59cec868d0e73e3d8f0577fc7528a6332998b93a', name: "header" })), h("div", { key: '225623a00d44c07bfdd6611b7ee98a7fb49ba008', class: closeIconArea(), onClick: this.handleCancel }, h("bcm-icon", { key: '6b096f888794673d678d8edae338edc50485df57', "icon-name": "far fa-times" }))), h("main", { key: '4ff8930d218641bb7f3a722ca5a065f7df73a40e', class: "flex-1 mx-auto font-sans text-pretty" }, h("slot", { key: '0058d440b9e703ff30d2c41aee14d4122d82aeaa', name: "body" }, this.description)), h("footer", { key: '6ffcd9df426bf280b77d2cfb39552647115253ec', class: footer() }, h("bcm-button", { key: '997610d1ca83cf3357d0a8d3f1102e25d2966240', kind: "outline", size: this.size, onClick: this.handleCancel }, this.cancelText), h("bcm-button", { key: 'c1f633f3e8837b724dd9e26580a3c7260543e8b4', size: this.size, status: this.status, kind: "primary", onClick: this.handleConfirm }, this.confirmText), h("slot", { key: '2f9d5ab32c2e62bcdad247ab4ce93df53358f843', name: "footer" }))))));
+        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" }))))));
     }
     get el() { return this; }
     static get style() { return BcmPopConfirmStyle0; }

package/dist/components/bcm-pop-confirm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-pop-confirm.js","mappings":"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","names":["tv"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from 'tailwind-variants';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-pop-confirm.js","mappings":"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","names":["tv"],"sources":["src/components/pop-confirm/pop-confirm.css?tag=bcm-pop-confirm&encapsulation=shadow","src/components/pop-confirm/pop-confirm.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --popover-bg: var(--bcm-ui-color-background-basic-panel);\n --popover-radius: 6px;\n --popover-text-color: var(--bcm-ui-color-text-basic);\n}\n\n.arrow {\n position: absolute;\n background: var(--arrow-color);\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n z-index: 1;\n}\n\n.arrow.top {\n transform: rotate(180deg);\n}\n\n.arrow.bottom {\n transform: rotate(0deg);\n}\n\n.arrow.right {\n transform: rotate(-90deg);\n}\n\n.arrow.left {\n transform: rotate(90deg);\n}\n\n::slotted([slot='body']) {\n font-family: 'Inter', sans-serif;\n text-wrap: pretty;\n}\n","import { Component, Prop, State, h, Event, EventEmitter, Element, ComponentInterface, Fragment, Method } from '@stencil/core';\nimport { computePosition, flip, shift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { tv } from 'tailwind-variants';\n\n// Status icons for different states\nconst statusIcons = {\n info: 'fa-solid fa-circle-info',\n success: 'fa-solid fa-circle-check',\n warning: 'fa-solid fa-triangle-exclamation',\n error: 'fa-solid fa-circle-x',\n};\n\n/*\n @component BcmPopConfirm\n * @description A floating confirmation pop-up component that prompts users for action confirmation, triggered by click or hover events.\n * Offers customizable header, body content, and footer areas through slots, with accessibility and positioning features.\n \n @example Basic usage\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"right\" header-text=\"Confirm Action\" description=\"Are you sure?\" confirm-text=\"Yes\" cancel-text=\"No\" status=\"warning\"></bcm-pop-confirm>\n \n @example With all slots and custom styling\n * <bcm-pop-confirm target-id=\"trigger-btn\" placement=\"left\" header-text=\"Delete Item\" description=\"Are you sure you want to delete this item?\" confirm-text=\"Delete\" cancel-text=\"Cancel\" status=\"error\" arrow-color=\"#ffffff\">\n * <span slot=\"header\">Custom Header Text</span>\n * <span slot=\"body\">Additional details here</span>\n * <span slot=\"footer\">Custom Footer Action</span>\n * </bcm-pop-confirm>\n \n @example Event handling\n * // Listen to confirmation events\n * const popConfirm = document.querySelector('bcm-pop-confirm');\n * popConfirm.addEventListener('bcmConfirm', () => {\n * console.log('User confirmed the action!');\n * });\n * popConfirm.addEventListener('bcmCancel', () => {\n * console.log('User canceled the action!');\n * });\n \n // Programmatically control pop-up\n * await popConfirm.show(); // Show the pop-up\n * await popConfirm.hide(); // Hide the pop-up\n \n @prop {string} arrowColor - The color of the arrow pointing to the trigger element (default: 'var(--bcm-ui-color-background-basic-panel)')\n * @prop {string} cancelText - Text displayed on the cancel button (default: 'Cancel')\n * @prop {string} confirmText - Text displayed on the confirm button (default: 'Yes')\n * @prop {string} description - The description or body content of the pop-up (default: '')\n * @prop {string} headerText - The header text displayed at the top of the pop-up (default: '')\n * @prop {Placement} placement - The placement position of the pop-up relative to the trigger (default: 'right')\n * @prop {('small' \| 'medium' \| 'large')} size - The size of the pop-up, determining its dimensions (default: 'medium')\n * @prop {('info' \| 'error' \| 'warning' \| 'success' \| 'default')} status - The status of the pop-up, affecting its icon and color (default: 'info')\n * @prop {boolean} statusIcon - Whether to display a status icon based on the `status` prop (default: true)\n * @prop {string} targetId - The ID of the trigger element (e.g., a button) that opens the pop-up\n \n @slot header - Custom content for the header area (optional)\n * @slot body - Custom content for the main body area (optional, falls back to `description`)\n * @slot footer - Custom content for the footer area (optional)\n \n @event {EventEmitter<void>} bcmConfirm - Emitted when the user confirms the action in the pop-up\n * @event {EventEmitter<void>} bcmCancel - Emitted when the user cancels the action in the pop-up\n \n @csspart container - The root container element of the pop-up\n * @csspart header - The header section with title and close icon\n * @csspart content - The main content section of the pop-up\n * @csspart footer - The footer section with confirm/cancel buttons\n * @csspart arrow - The positioning arrow pointing to the trigger\n \n @css {string} --popover-radius - Border radius of the pop-up (default: defined in CSS)\n * @css {string} --popover-bg - Background color of the pop-up\n * @css {string} --text-color - Text color of the pop-up based on status\n \n @methods\n * show() - Programmatically shows the pop-up\n * hide() - Programmatically hides the pop-up\n /\n@Component({\n tag: 'bcm-pop-confirm',\n styleUrl: 'pop-confirm.css',\n shadow: true,\n})\nexport class PopConfirm implements ComponentInterface {\n // DOM element reference\n @Element() el: HTMLElement;\n\n /\n The color of the arrow pointing to the trigger element.\n * Can be a CSS custom property or a specific color value.\n * @default 'var(--bcm-ui-color-background-basic-panel)'\n /\n @Prop()\n arrowColor: string = 'var(--bcm-ui-color-background-basic-panel)'; // Default color\n\n /\n The text displayed on the cancel button.\n * @default 'Cancel'\n /\n @Prop()\n cancelText: string = 'Cancel';\n\n /\n The text displayed on the confirm button.\n * @default 'Yes'\n /\n @Prop()\n confirmText: string = 'Yes';\n\n /\n The description or body content of the pop-up.\n * @default ''\n /\n @Prop()\n description: string = '';\n\n /\n The header text displayed at the top of the pop-up.\n * @default ''\n /\n @Prop()\n headerText: string = '';\n\n /\n The placement position of the pop-up relative to the trigger element.\n * @default 'bottom'\n /\n @Prop()\n placement: Placement = 'bottom';\n\n /\n The size of the pop-up, determining its dimensions and padding.\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n The status of the pop-up, affecting its icon and color scheme.\n * @default 'info'\n /\n @Prop()\n status: 'info' \| 'error' \| 'warning' \| 'success' = 'info';\n\n /\n Whether to display a status icon based on the `status` prop.\n * @default true\n /\n @Prop()\n statusIcon: boolean = true;\n\n /\n The ID of the trigger element (e.g., a button) that opens the pop-up.\n /\n @Prop()\n targetId: string;\n\n // State variables\n /\n Indicates whether the pop-up is currently open or closed.\n * @default false\n /\n @State()\n isOpen: boolean = false;\n\n /\n The current placement position of the pop-up after computation.\n /\n @State()\n currentPlacement: 'top' \| 'bottom' \| 'left' \| 'right';\n\n // Event Emitters\n /\n Emits an event when the user confirms the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmConfirm: EventEmitter<void>;\n\n /\n Emits an event when the user cancels the action in the pop-up.\n /\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmCancel: EventEmitter<void>;\n\n // Element references\n private triggerElement: HTMLElement;\n private popoverElement: HTMLElement;\n private arrowElement: HTMLElement;\n\n /\n Lifecycle method called when the component is loaded.\n * Initializes the trigger element and attaches a click event listener.\n /\n componentDidLoad() {\n this.triggerElement = document.getElementById(this.targetId);\n if (!this.triggerElement) {\n console.warn(`Target element with ID '${this.targetId}' not found.`);\n return;\n }\n this.triggerElement.addEventListener('click', this.handleTriggerClick);\n }\n\n\n /\n Handles the click event on the trigger element to open the pop-up.\n * Prevents default behavior and propagation, then opens the pop-up if it's closed.\n * @param event The mouse event triggering the action.\n /\n private handleTriggerClick = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.isOpen) {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n };\n\n /\n Handles the confirm button click, closing the pop-up and emitting the confirm event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleConfirm = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmConfirm.emit();\n };\n\n /\n Handles the cancel button click, closing the pop-up and emitting the cancel event.\n * Prevents default behavior and propagation.\n * @param event The mouse event triggering the action.\n /\n private handleCancel = (event: Event) => {\n event.preventDefault();\n event.stopPropagation();\n this.isOpen = false;\n this.bcmCancel.emit();\n };\n\n /\n Programmatically shows the pop-up by setting `isOpen` to true and updating its position.\n * @returns A promise that resolves when the pop-up is shown.\n /\n @Method()\n async show() {\n this.isOpen = true;\n requestAnimationFrame(() => {\n this.updatePosition();\n });\n }\n\n /\n Programmatically hides the pop-up by setting `isOpen` to false.\n * @returns A promise that resolves when the pop-up is hidden.\n /\n @Method()\n async hide() {\n this.isOpen = false;\n }\n\n /\n Updates the position of the pop-up relative to the trigger element using Floating UI.\n * Ensures the pop-up stays within viewport bounds and positions the arrow correctly.\n /\n private updatePosition = async () => {\n if (!this.triggerElement \|\| !this.popoverElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(this.triggerElement, this.popoverElement, {\n placement: this.placement,\n middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n });\n\n this.currentPlacement = placement as any;\n\n Object.assign(this.popoverElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow \|\| { x: 0, y: 0 };\n const basePlacement = placement.split('-')[0] as 'top' \| 'right' \| 'bottom' \| 'left';\n\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[basePlacement];\n\n Object.assign(this.arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n [staticSide]: ['top', 'bottom'].includes(basePlacement) ? '-8px' : '-12px',\n });\n };\n\n /\n Returns the dynamic styles for the pop-up, including text and arrow colors.\n * @returns An object containing CSS custom properties.\n /\n private get popoverStyle() {\n return {\n '--text-color': `var(--bcm-ui-color-text-${this.status})`,\n '--arrow-color': this.arrowColor,\n };\n }\n\n /\n Lifecycle method called when the component is removed from the DOM.\n * Cleans up the event listener to prevent memory leaks.\n /\n disconnectedCallback() {\n if (this.triggerElement) {\n this.triggerElement.removeEventListener('click', this.handleTriggerClick);\n }\n }\n\n /\n Defines Tailwind Variants classes for the pop-up's structure and styling.\n * Supports different sizes and generates dynamic class names.\n /\n private classes = tv({\n slots: {\n container: 'absolute bcm-ui-element flex flex-col shadow-2 rounded-[--popover-radius] bg-[--popover-bg] z-[9999] w-full',\n header: 'flex justify-between items-center',\n headerLeftContent: 'flex items-center gap-2 text-size-inherit text-[--text-color]',\n closeIconArea: 'flex flex-row gap-2 size-6 items-center justify-center hover:bg-gray-100 rounded-full cursor-pointer text-size-inherit',\n titleContainer: '!text-color-header font-semibold',\n footer: 'flex flex-row justify-end gap-2',\n },\n variants: {\n size: {\n small: {\n container: 'text-size-4 max-w-64 p-4 gap-4',\n header: 'text-size-4',\n footer: 'text-size-4',\n titleContainer: 'text-size-5',\n headerLeftContent: 'gap-2',\n },\n medium: {\n container: 'text-size-5 max-w-80 gap-6 p-6',\n header: 'text-size-5',\n footer: 'text-size-5',\n titleContainer: 'text-size-6',\n headerLeftContent: 'gap-2.5',\n },\n large: {\n container: 'text-size-6 max-w-96 p-8 gap-8',\n header: 'text-size-6',\n footer: 'text-size-6',\n titleContainer: 'text-size-7',\n headerLeftContent: 'gap-3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n });\n\n /\n Renders the pop-up component, showing it only when `isOpen` is true.\n * Includes header, main content, and footer sections with dynamic styling and slots for customization.\n * @returns JSX.Element representing the pop-up or an empty fragment if closed.\n /\n render() {\n const { container, header, footer, headerLeftContent, closeIconArea, titleContainer } = this.classes({\n size: this.size,\n });\n return (\n <Fragment>\n {this.isOpen && (\n <div role=\"dialog\" aria-labelledby=\"pop-confirm-title\" style={this.popoverStyle} class={container()} ref={el => (this.popoverElement = el)}>\n {/ Arrow /}\n <div ref={el => (this.arrowElement = el)} class={`arrow w-4 h-2 ${this.currentPlacement ?? 'top'}`}></div>\n\n {/ Header Content /}\n <header class={header()}>\n <div class={headerLeftContent()}>\n {this.statusIcon && <bcm-icon icon-name={statusIcons[this.status]}></bcm-icon>}\n <span class={titleContainer()}>{this.headerText}</span>\n <slot name=\"header\"></slot>\n </div>\n <div class={closeIconArea()} onClick={this.handleCancel}>\n <bcm-icon icon-name=\"far fa-times\"></bcm-icon>\n </div>\n </header>\n\n {/ Main Content /}\n <main class=\"flex-1 mx-auto font-sans text-pretty\">\n <slot name=\"body\">{this.description}</slot>\n </main>\n\n {/ Footer Content */}\n <footer class={footer()}>\n <bcm-button kind=\"outline\" size={this.size} onClick={this.handleCancel}>\n {this.cancelText}\n </bcm-button>\n <bcm-button size={this.size} status={this.status} kind=\"primary\" onClick={this.handleConfirm}>\n {this.confirmText}\n </bcm-button>\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n )}\n </Fragment>\n );\n }\n}\n"],"version":3}

package/dist/components/bcm-popover.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js';
-import { b as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-9594cebb.js';
+import { a as autoUpdate, 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';
 const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.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))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.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)}";
@@ -178,7 +178,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends H {
             isOpen: this.open,
             size: this.size,
         });
-        return (h("div", { key: '665229a272b741f98b8f2a6afdbfcd381c570139', class: "relative" }, h("slot", { key: '4ea3bf8f4a1ea77814c2356e81edbe405eceb7d4', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '00c49e72fa5803d9999639918ba30dcd0714c4d4', part: "popover", class: box(), role: "dialog", "aria-hidden": !this.open ? 'true' : 'false', ref: el => (this.popoverElement = el) }, h("div", { key: 'f293355d74a3b5420368cdda0ddd0f2fd5f42010', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("div", { key: 'c2ac22ed51b5a01a8832467ee717e6bf35ccbb69', class: header(), part: "header" }, h("slot", { key: '434a1f3f4a013222935ee681feae058c7bbfd993', name: "header" }, this.headerText)), h("div", { key: '950d3aa73579ae246f43aaa3d6101da1d6a7a601', class: content(), part: "content" }, h("slot", { key: 'fa43adb4816dae231c92d5de93432d0a76f211f9', name: "content" }, this.message)))));
+        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)))));
     }
     get el() { return this; }
     static get style() { return BcmPopoverStyle0; }

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

@@ -140,14 +140,14 @@ const BcmRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadioGroup ext
             size: this.size,
             direction: this.direction,
         });
-        return (h("div", { key: '067e086951f511d9a15f0cf7dbaef97744615356', class: host() }, this.label && (h("label", { key: '912ab77a4b270dfd25bbc362932b6914af1cac6c', class: classNames('input-label font-medium', {
+        return (h("div", { key: '959d1478174e39ed3d2e3c7d62b755baa5e4fc0c', class: host() }, this.label && (h("label", { key: 'bef009315a9a7cf5035df47b8eac802bace0a947', 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: '93b8053888f906617b84a94a84fad525cbb5ea34', name: "label" }, this.label), this.required && h("span", { key: '654320a556ff7e0aa49c929af349c57ec9a8a59a' }, "*"))), h("div", { key: '722366cd4a7f7cebddf8151fcc935025bf12b5d6', class: container() }, h("slot", { key: '420447424d1e450911355ab4cd6b2ee51c1b2839', onSlotchange: this.handleSlotChange })), this.captionText && (h("div", { key: '38dcc2233985bdcaaefe62b072ef9b55d1e1908d', class: classNames('input-caption-text font-regular mt-1', {
+            }) }, 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', {
                 '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 CHANGED Viewed

@@ -160,7 +160,7 @@ const BcmRadio$1 = /*@__PURE__*/ proxyCustomElement(class BcmRadio extends H {
             readonly: this.readonly,
             labelPosition: this.labelPosition,
         });
-        return (h("label", { key: '2a95bd2335f3ecc987bcdd378225967837e55df9', class: container(), style: this.getRadioStyle() }, h("input", { key: '782735ff733b1d373803c3a1c6f56c16b745a159', "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: '638f0fe8ffab984b459c0b5f11f0a929b105de2a', class: dotContainer() }, h("div", { key: '65f618afcd4c1d0101961b6c6642ba146a37d6ef', class: dot() })), h("span", { key: 'a4690721cbe1c99ba47c572a9b354bdebac20a5e', class: labelClass() }, h("slot", { key: '2af90a0ab77da5b63a25fef3edbd0e14fc87516d' }, this.label))));
+        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))));
     }
     get host() { return this; }
     static get style() { return BcmRadioStyle0; }

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

@@ -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: '753ba2aeeb51583c312798ef3bc7dfa00203548d' }, h("button", { key: '403c1a1c2fb28894ae9b9c93f2b50b958bfe4657', class: this.optionClass({
+        return (h(Host, { key: '081d1426a5901622f55c00fee4f69af367ab526b' }, h("button", { key: 'ec6d3c49be26a259b75ecb5f8b22077f94079f78', class: this.optionClass({
                 size,
                 selected: this.selected,
                 disabled,
-            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: 'effebfd8ea1a412483c1f6789eec1d2736dc5e97' }, this.label))));
+            }), onClick: this.handleClick, disabled: disabled, type: "button" }, h("slot", { key: 'cf285bbdfa6f4db8d32eb804f35e24b8b3b182af' }, this.label))));
     }
     get host() { return this; }
     static get style() { return BcmSegmentedPickerOptionStyle0; }

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

@@ -126,11 +126,11 @@ const BcmSegmentedPicker$1 = /*@__PURE__*/ proxyCustomElement(class BcmSegmented
         }, 10);
     }
     render() {
-        return (h(Host, { key: 'c82527ac7d8fb0d1d66005eb82431b0f951cad97' }, h("div", { key: 'c32f4c59d6c843eef0d20a72d21304f3eeaebab6', class: this.segmentedClass({
+        return (h(Host, { key: '33ad6f1c1113585b5cb8705edefa9753e59536bb' }, h("div", { key: '04ea007f13a439b9168ca50581ccae383fcd2e48', class: this.segmentedClass({
                 size: this.size,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
-            }) }, h("div", { key: 'b5c38f756af549436dabaadfb49aac8f30afad41', class: "segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded", style: this.indicatorStyles }), h("div", { key: '6a0f9c7d6d2dbc6a8b5ea43e19e2c9b902613812', class: "segmented-options flex relative z-10 w-full" }, h("slot", { key: '2ae6718da8ddb236648e120ae769f21eb6434b31' })))));
+            }) }, 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' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/bcm-switch.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-5377117d.js
 import { g as generateId } from './p-ba2410ef.js';
 import { c as ce } from './p-5fcf77f9.js';
-const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
+const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
 const BcmSwitchStyle0 = switchCss;
 const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class BcmSwitch extends H {
@@ -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: '6fe3f5b93d46367c73bac4711f5eb5ee93be0fb1', class: base() }, h("label", { key: 'ec4101b02f81f6e43e6f4279c893d08b710eb892', class: switchWrapper(), style: this.switchStyle() }, h("input", { key: '0ac5fbd5415b4f7c988fed8746c7cd4709de6931', 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: '1712d6a86427e0667f7ff393a570f1d5d1386494', class: label() }, h("slot", { key: 'a81c09316f27b86ace52436f26872c0626b642af' }, this.label)), h("label", Object.assign({ key: 'bd77f8a8a7528aa0aee70730db772f789c90d910', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+        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 => {
                 if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
                     event.preventDefault();
                     this.toggleSwitch();
                 }
-            } }), h("div", { key: '91a5d3ca25f67953b6beb8456976bbc7ad2876da', class: dot() }))), this.error && this.caption && h("span", { key: '2a01e0e40041aa00938e714c22e6a8d241bac222', class: caption() }, this.caption), h("slot", { key: '4417057a08368eee0f06ca4fe86a620ea46f31ee', name: "caption" })));
+            } }), h("div", { key: 'cac7f8bcb004fe7bf958ad9d1c30006db78868a2', class: dot() }))), this.error && this.caption && h("span", { key: '7a560b8e5192f6c184bcc0cf67cc453d3d4fa4d0', class: caption() }, this.caption), h("slot", { key: '8ebde4cddd169ca14f6c6a8ba2ad637799ea34fd', name: "caption" })));
     }
     get el() { return this; }
     static get style() { return BcmSwitchStyle0; }

package/dist/components/bcm-switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-switch.js","mappings":"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","names":["BcmSwitch","tv"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-switch.js","mappings":"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","names":["BcmSwitch","tv"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n \n @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n \n @example With error state\n * <bcm-switch\n * label=\"Accept terms\"\n * error={true}\n * caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n \n @example Disabled state\n * <bcm-switch\n * label=\"Advanced features\"\n * disabled={true}>\n * </bcm-switch>\n \n @example With custom size and label position\n * <bcm-switch\n * label=\"Dark mode\"\n * size=\"large\"\n * labelPosition=\"left\">\n * </bcm-switch>\n /\n@Component({\n tag: 'bcm-switch',\n styleUrl: 'switch.css',\n shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n /* Reference to the host element /\n @Element()\n el: HTMLElement;\n\n /* Whether the switch is checked or not /\n @Prop({ reflect: true, mutable: true })\n checked: boolean = false;\n\n /* Whether the switch is disabled /\n @Prop()\n disabled: boolean = false;\n\n /* The name attribute for the hidden input element /\n @Prop()\n name: string;\n\n /* The value attribute for the hidden input element /\n @Prop()\n value: string;\n\n /* Text label for the switch /\n @Prop()\n label: string;\n\n /* Position of the label relative to the switch /\n @Prop()\n labelPosition: 'left' \| 'right' = 'right';\n\n /* Whether to display the switch in an error state /\n @Prop()\n error: boolean = false;\n\n /* Text to display as an error message when error is true /\n @Prop()\n caption?: string;\n\n /* Size variant of the switch /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Whether the switch is in readonly mode /\n @Prop()\n readonly: boolean = false;\n\n /* Whether the switch is required in a form /\n @Prop()\n required: boolean = false;\n\n /* Emitted when the switch state changes */\n @Event({\n composed: false,\n bubbles: false,\n cancelable: true,\n })\n bcmSwitchChange: EventEmitter<boolean>;\n\n private switchId = generateId('switch');\n\n private toggleSwitch(): void {\n if (this.disabled \|\| this.readonly) return;\n this.checked = !this.checked;\n this.bcmSwitchChange.emit(this.checked);\n }\n\n private switchStyle = () => {\n const defaultStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n };\n\n const checkedStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n };\n\n const errorStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n };\n\n const readonlyStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n };\n\n const disabledStyle = {\n '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n };\n\n return {\n ...defaultStyle,\n ...(this.checked && checkedStyle),\n ...(this.error && errorStyle),\n ...(this.readonly && readonlyStyle),\n ...(this.disabled && disabledStyle),\n };\n };\n\n private switchClass = tv({\n slots: {\n base: 'bcm-ui-element flex flex-col',\n switchWrapper: 'flex items-center group',\n dotContainer:\n 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n caption: '!text-color-error font-normal',\n label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n },\n variants: {\n size: {\n small: {\n dotContainer: 'w-8 h-4',\n dot: 'size-3',\n label: 'text-size-4',\n caption: 'text-size-3',\n switchWrapper: 'gap-2',\n base: 'gap-0.5',\n },\n medium: {\n dotContainer: 'w-9 h-[18px]',\n dot: 'size-3.5',\n label: 'text-size-5',\n caption: 'text-size-4',\n switchWrapper: 'gap-2.5',\n base: 'gap-1',\n },\n large: {\n dotContainer: 'w-10 h-5',\n dot: 'size-4',\n label: 'text-size-6',\n caption: 'text-size-5',\n switchWrapper: 'gap-3',\n base: 'gap-2',\n },\n },\n labelPosition: {\n left: {\n label: '',\n },\n right: {\n label: 'order-2',\n },\n },\n checked: {\n true: {\n dot: '',\n },\n false: {\n dot: 'left-0.5',\n },\n },\n disabled: {\n true: '',\n false: {\n switchWrapper: '',\n },\n },\n readonly: {\n true: {\n switchWrapper: 'cursor-default',\n dotContainer: 'cursor-default',\n dot: 'cursor-default',\n },\n false: {\n switchWrapper: 'cursor-pointer',\n dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n checked: true,\n class: {\n dot: 'left-[18px]',\n },\n },\n {\n size: 'medium',\n checked: true,\n class: {\n dot: 'left-[20px]',\n },\n },\n {\n size: 'large',\n checked: true,\n class: {\n dot: 'left-[22px]',\n },\n },\n {\n readonly: false,\n disabled: false,\n class: {\n dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n },\n },\n ],\n });\n\n render() {\n const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n size: this.size,\n checked: this.checked,\n disabled: this.disabled,\n labelPosition: this.labelPosition,\n readonly: this.readonly,\n });\n\n const ariaAttributes = {\n 'role': 'switch',\n 'aria-checked': this.checked.toString(),\n 'aria-disabled': this.disabled.toString(),\n 'aria-readonly': this.readonly.toString(),\n ...(this.required && { 'aria-required': 'true' }),\n };\n\n const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n return (\n <div class={base()}>\n <label class={switchWrapper()} style={this.switchStyle()}>\n <input\n id={this.switchId}\n type=\"checkbox\"\n class=\"hidden peer\"\n checked={this.checked}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n onChange={() => this.toggleSwitch()}\n />\n\n {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n <label\n htmlFor={this.switchId}\n class={dotContainer()}\n {...tabIndexAttr}\n {...ariaAttributes}\n onKeyDown={event => {\n if ((event.key === 'Enter' \|\| event.key === ' ') && !this.readonly && !this.disabled) {\n event.preventDefault();\n this.toggleSwitch();\n }\n }}\n >\n <div class={dot()}></div>\n </label>\n </label>\n\n {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n <slot name=\"caption\"></slot>\n </div>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-5377117d.js';
 import { c as ce } from './p-5fcf77f9.js';
-const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.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}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-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)}";
+const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.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}}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-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)}";
 const BcmTabsListStyle0 = tabsListCss;
 const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends H {
@@ -31,7 +31,7 @@ const BcmTabsList$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsList extends
     }
     render() {
         const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: '46066c8510c684347428f5a03f094fa857e40f57', class: container(), slot: "tabs-list" }, h("div", { key: 'c038e78bb7da88ece01600ff656ff820d2d8a4eb', class: inkbar() }), h("div", { key: '4db7e8f301c7a0e863492fcd784fbcb6b5799709', class: tabList(), role: "tablist" }, h("slot", { key: 'ed29b088e1c19a455046804fcc5a090435351299' }))));
+        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' }))));
     }
     static get style() { return BcmTabsListStyle0; }
 }, [1, "bcm-tabs-list"]);