npm - bromcom-ui-next - Versions diffs - 0.1.18 → 0.1.20 - Mend

bromcom-ui-next 0.1.18 → 0.1.20

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 (78) hide show

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

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

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-30135590.js';
-const tabsContentCss = ".block{display:block}:host{display:block;padding:10px 0;width:100%}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const tabsContentCss = ".block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 const BcmTabsContentStyle0 = tabsContentCss;
 const BcmTabsContent$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsContent extends H {

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

	@@ -1 +1 @@
1	- {"file":"bcm-tabs-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~kRAAkR~~,CAAC;~~AAC1S~~,6BAAe,cAAc;;MCUhBA,gBAAc;;;;;;IAOvB,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACjB,8DAAa,CACV,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsContent"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/*\n @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n /\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /\n Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"bcm-tabs-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0SAA0S,CAAC;AAClU,6BAAe,cAAc;;MCUhBA,gBAAc;;;;;;IAOvB,MAAM;QACF,QACI,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IACjB,8DAAa,CACV,EACT;KACL;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTabsContent"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n display: block;\n padding: 10px 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/*\n @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n /\n@Component({\n tag: 'bcm-tabs-content',\n styleUrl: 'tabs-content.css',\n shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n /\n Unique identifier that matches a tab trigger's value\n * Used to associate this content with its corresponding tab\n */\n @Prop({ reflect: true }) value: string;\n\n render() {\n return (\n <Host role=\"tabpanel\">\n <slot></slot>\n </Host>\n );\n }\n}"],"version":3}

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
+const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
 const BcmTabsTriggerStyle0 = tabsTriggerCss;
 const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger extends H {
@@ -28,7 +28,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
         this.class = ce({
             slots: {
                 tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',
-                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] bg-color-primary transition-all duration-200 ease-in-out',
+                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',
             },
             variants: {
                 size: {
@@ -41,7 +41,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
                         tab: 'text-color-primary',
                     },
                     false: {
-                        tab: 'text-color',
+                        tab: 'text-color-default',
                     },
                 },
                 disabled: {
@@ -79,7 +79,7 @@ const BcmTabsTrigger$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabsTrigger e
             active: this.active,
             disabled: this.disabled,
         });
-        return (h(Host, { key: 'e9d6b6e77d982ea2cbba1e7f928f9515d10be52d', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'faf87a5db1212dd5ebbccba186e83d26934a8b41', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'a3426148118f555159c9bd355dbfb52c035e082a' })), h("div", { key: '32bbc55e43775f2369b01879f93183b29a1659b3', class: borderLine() })));
+        return (h(Host, { key: '97d1b4ff2e0d097843b57bf33e3afc337de12812', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'f8474ad1ccc08bb6985c4754546111cc5a1d7ef5', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: 'fd94dcc67f10ae7df1217b2545f2621d62906cdc' })), h("div", { key: '93f31a04c031061d929e3ca38758986775bac1ad', class: borderLine() })));
     }
     get el() { return this; }
     static get style() { return BcmTabsTriggerStyle0; }

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

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

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

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h } from './p-30135590.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 tooltipCss = ":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.absolute{position:absolute}.relative{position:relative}.z-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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-medium{font-weight:500}.text-color-base{color:var(--bcm-ui-color-text-base)}.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)}";
+const tooltipCss = ":host{--tooltip-bg:var(--bcm-ui-color-background-default-dark-default)}.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-\\[-1\\]{z-index:-1}.z-\\[9999\\]{z-index:9999}.block{display:block}.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))}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--tooltip-bg\\]{background-color:var(--tooltip-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.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-medium{font-weight:500}.text-color-base{color:var(--bcm-ui-color-text-base)}.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)}";
 const BcmTooltipStyle0 = tooltipCss;
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {

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

	@@ -1 +1 @@
1	- {"file":"bcm-tooltip.js","mappings":"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","names":["tv"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.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 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]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-tooltip.js","mappings":"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","names":["tv"],"sources":["src/components/tooltip/tooltip.css?tag=bcm-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.component.tsx"],"sourcesContent":[":host {\n --tooltip-bg: var(--bcm-ui-color-background-default-dark-default);\n}\n","import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, ComponentInterface, h, Element, Prop, State, Method } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmTooltip\n * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n \n @example Basic Hover Tooltip\n * <bcm-tooltip trigger=\"hover\" size=\"medium\" placement=\"top\" message=\"This is a tooltip.\">\n * <bcm-button>Hover Me</bcm-button>\n * </bcm-tooltip>\n \n @example Click Tooltip with Programmatic Control\n * <bcm-tooltip id=\"my-tooltip\" trigger=\"click\" message=\"Controlled tooltip.\">\n * <bcm-button>Click Me</bcm-button>\n * </bcm-tooltip>\n * <script>\n * const tooltip = document.querySelector('#my-tooltip');\n * tooltip.openTooltip(); // Opens the tooltip\n * tooltip.closeTooltip(); // Closes the tooltip\n * </script>\n \n @slot - Default slot for the target element that triggers the tooltip\n * @slot tooltip - Slot for custom tooltip content\n \n @csspart tooltip - The root tooltip container element, stylable for the entire tooltip\n * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow\n /\n\n@Component({\n tag: 'bcm-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip implements ComponentInterface {\n @Element() el: HTMLElement;\n\n /\n @prop {('click' \| 'hover')} trigger - Defines the interaction type to show/hide the tooltip.\n * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n * Default: 'hover'\n /\n @Prop()\n trigger: 'click' \| 'hover' = 'hover';\n\n /\n @prop {('top' \| 'right' \| 'bottom' \| 'left')} placement - Defines the position of the tooltip relative to the target element.\n * Default: 'top'\n /\n @Prop()\n placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /\n @prop {('small' \| 'medium' \| 'large')} size - Defines the size of the tooltip.\n * Controls the text size and padding of the tooltip content.\n * Default: 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n @prop {string} message - Custom text for the tooltip content.\n * Used as fallback content if the 'tooltip' slot is not provided.\n /\n @Prop()\n message: string;\n\n /\n @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.\n * Helps prevent flickering on quick mouse movements.\n * Default: 150\n /\n @Prop()\n showDelay: number = 150;\n\n @State() open = false;\n\n private tooltipElement: HTMLElement;\n private arrowElement: HTMLElement;\n private targetElement: HTMLElement;\n private hoverTimeout: any;\n private cleanupAutoUpdate: () => void;\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n }\n this.cleanupAutoUpdate?.();\n this.cleanupAutoUpdate = null;\n clearTimeout(this.hoverTimeout);\n }\n\n private updateOutsideClickListener() {\n if (this.open) {\n document.addEventListener('click', this.handleOutsideClick);\n } else {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n }\n\n private toggleTooltip = () => {\n this.open = !this.open;\n this.updateOutsideClickListener();\n };\n\n private showTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = true;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.hoverTimeout);\n this.hoverTimeout = setTimeout(() => {\n this.open = false;\n this.updateOutsideClickListener();\n }, this.showDelay);\n };\n\n /\n @method {Promise<void>} openTooltip - Programmatically opens the tooltip.\n * Triggers the showTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is opened.\n /\n @Method()\n async openTooltip() {\n this.showTooltip();\n }\n\n /\n @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.\n * Triggers the hideTooltip logic with the specified delay.\n * @returns {Promise<void>} A promise that resolves when the tooltip is closed.\n */\n @Method()\n async closeTooltip() {\n this.hideTooltip();\n }\n\n private handleSlotChange = () => {\n const slot = this.el.shadowRoot.querySelector('slot');\n const elements = slot.assignedElements();\n this.targetElement = elements[0] as HTMLElement;\n\n if (this.targetElement) {\n this.targetElement.removeEventListener('click', this.toggleTooltip);\n this.targetElement.removeEventListener('mouseenter', this.showTooltip);\n this.targetElement.removeEventListener('mouseleave', this.hideTooltip);\n\n if (this.trigger === 'click') {\n this.targetElement.addEventListener('click', this.toggleTooltip);\n this.targetElement.setAttribute('aria-expanded', this.open.toString());\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.trigger === 'hover') {\n this.targetElement.addEventListener('mouseenter', this.showTooltip);\n this.targetElement.addEventListener('mouseleave', this.hideTooltip);\n this.targetElement.setAttribute('aria-describedby', 'tooltip');\n }\n\n if (this.tooltipElement && !this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate = autoUpdate(\n this.targetElement,\n this.tooltipElement,\n () => this.updatePosition(),\n { animationFrame: false }\n );\n }\n }\n };\n\n private handleOutsideClick = (event: Event) => {\n if (!this.el.contains(event.target as Node) && this.open) {\n this.open = false;\n this.updateOutsideClickListener();\n }\n };\n\n private updatePosition = async () => {\n if (!this.targetElement \|\| !this.tooltipElement \|\| !this.arrowElement) return;\n\n const { x, y, placement, middlewareData } = await computePosition(\n this.targetElement,\n this.tooltipElement,\n {\n placement: this.placement,\n middleware: [\n offset(12),\n flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }),\n shift({ padding: 8 }),\n arrow({ element: this.arrowElement }),\n ],\n }\n );\n\n Object.assign(this.tooltipElement.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 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]: '-4px',\n });\n };\n\n private tooltipClass = tv({\n slots: {\n tooltip:\n 'bcm-ui-element bcm-tooltip absolute bg-[--tooltip-bg] rounded-md shadow-3 py-1 px-3 min-w-max z-[9999] text-color-base font-medium',\n arrow: 'absolute w-4 h-4 bg-[--tooltip-bg] transform rotate-45 z-[-1]',\n },\n variants: {\n size: {\n small: { tooltip: 'text-size-3' },\n medium: { tooltip: 'text-size-4' },\n large: { tooltip: 'text-size-5' },\n },\n isOpen: {\n true: { tooltip: 'block' },\n false: { tooltip: 'hidden' },\n },\n },\n defaultVariants: {\n size: 'medium',\n isOpen: false,\n },\n }, { twMerge: false });\n\n render() {\n const { tooltip, arrow } = this.tooltipClass({\n size: this.size,\n isOpen: this.open,\n });\n return (\n <div class=\"relative\">\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n <div role=\"tooltip\" class={tooltip()} ref={(el) => (this.tooltipElement = el)} part=\"tooltip\">\n <div class={arrow()} ref={(el) => (this.arrowElement = el)} part=\"arrow\"></div>\n <slot name=\"tooltip\">{this.message}</slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-4cc3e4d7.js → p-d54398ea.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-30135590.js';
 import { c as ce } from './p-5fcf77f9.js';
-const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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)}.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-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}";
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.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)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
 const BcmBadgeStyle0 = badgeCss;
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends H {
@@ -142,4 +142,4 @@ defineCustomElement();
 export { Badge as B, defineCustomElement as d };
-//# sourceMappingURL=p-4cc3e4d7.js.map
+//# sourceMappingURL=p-d54398ea.js.map

package/dist/components/{p-4cc3e4d7.js.map → p-d54398ea.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~4cc3e4d7~~.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~8hHAA8hH~~,CAAC;~~AAChjH~~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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d54398ea.js","mappings":"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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-alert.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-18b75a47.js';
 import { c as ce } from './index-f3b17e60.js';
-const alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-alert-text\\]{color:var(--bcm-alert-text)}.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 alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-alert-text\\]{color:var(--bcm-alert-text)}.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 BcmAlertStyle0 = alertCss;
 const BcmAlert = class {

package/dist/esm/bcm-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~y4CAAy4C~~,CAAC;~~AAC35C~~,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/*\n Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n /\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /* Alert status type /\n @Prop()\n status?: AlertStatus = 'default';\n\n /* Alert size variant /\n @Prop()\n size?: AlertSize = 'medium';\n\n /* Alert style variant /\n @Prop()\n kind?: AlertKind = 'filled';\n\n /* Whether alert can be dismissed /\n @Prop()\n dismissible?: boolean = true;\n\n /* Whether to show status icon /\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /\n Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,i3CAAi3C,CAAC;AACn4C,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 100%;\n --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n --bcm-alert-text: var(--bcm-ui-color-text-default);\n --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\n\n/*\n Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n /\n@Component({\n tag: 'bcm-alert',\n styleUrl: 'alert.css',\n shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n /* Alert status type /\n @Prop()\n status?: AlertStatus = 'default';\n\n /* Alert size variant /\n @Prop()\n size?: AlertSize = 'medium';\n\n /* Alert style variant /\n @Prop()\n kind?: AlertKind = 'filled';\n\n /* Whether alert can be dismissed /\n @Prop()\n dismissible?: boolean = true;\n\n /* Whether to show status icon /\n @Prop()\n showStatusIcon?: boolean = true;\n\n @Event() bcmDismiss: EventEmitter<void>;\n\n\n /\n Handles alert dismissal\n * @private\n */\n private onDismiss() {\n this.bcmDismiss.emit();\n }\n\n private getStatusIcon() {\n const statusIcon = {\n info: 'fa-regular fa-info-circle',\n error: 'fa-regular fa-exclamation-circle',\n warning: 'fa-regular fa-exclamation-triangle',\n success: 'fa-regular fa-check-circle',\n };\n return statusIcon[this.status];\n }\n\n private get alertClass() {\n return tv(\n {\n slots: {\n base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n section: 'flex items-center gap-2',\n },\n variants: {\n size: {\n small: {\n base: 'py-1.5 text-size-4',\n },\n medium: {\n base: 'py-2 text-size-5',\n },\n large: {\n base: 'py-2.5 text-size-6',\n },\n },\n },\n },\n {\n twMerge: false,\n },\n );\n }\n\n private get alertStyles() {\n let colorStatus = {\n info: 'var(--bcm-ui-color-background-palette-blue-default)',\n error: 'var(--bcm-ui-color-background-palette-red-default)',\n warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n success: 'var(--bcm-ui-color-background-palette-green-default)',\n default: 'var(--bcm-ui-color-background-palette-gray-default)',\n };\n\n let textStatusColor = {\n info: 'var(--bcm-ui-color-text-info)',\n error: 'var(--bcm-ui-color-text-error)',\n warning: 'var(--bcm-ui-color-text-warning)',\n success: 'var(--bcm-ui-color-text-success)',\n default: 'var(--bcm-ui-color-text-default)',\n };\n\n let filleStyle = {\n '--bcm-alert-bg': colorStatus[this.status],\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n let textStyle = {\n '--bcm-alert-bg': 'transparent',\n '--bcm-alert-text': textStatusColor[this.status],\n };\n\n return this.kind === 'filled' ? filleStyle : textStyle;\n }\n\n render() {\n const { base, section } = this.alertClass({ size: this.size });\n return (\n <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n <div class={section()}>\n {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n <slot></slot>\n </div>\n <div class={section()}>\n <div part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-avatar.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
 import { c as classNames } from './index-097075ad.js';
-const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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 avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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 BcmAvatarStyle0 = avatarCss;
 const BcmAvatar = class {

package/dist/esm/bcm-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-avatar.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,~~q6CAAq6C~~,CAAC;~~AACx7C~~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","names":["cs"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image /\n @Prop()\n image: string;\n\n /* Alternative text for image /\n @Prop()\n alt: string;\n\n /* Shape of the avatar (ellipse/square) /\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /* Size of the avatar /\n @Prop()\n size: AvatarSize = 'medium';\n\n /* Custom background color /\n @Prop()\n color: string;\n\n /* Fallback icon class /\n @Prop()\n icon: string = 'fas fa-user';\n\n /* Status indicator type /\n @Prop()\n status: AvatarStatus;\n\n /* Status indicator animation /\n @Prop()\n blink = false;\n\n /* Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt \|\| this.name \|\| 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt \|\| this.name \|\| 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-avatar.entry.js","mappings":"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","names":["cs"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n --bcm-avatar-text: var(--bcm-ui-color-text-default);\n --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n tag: 'bcm-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class BcmAvatar {\n /** Source URL for avatar image /\n @Prop()\n image: string;\n\n /* Alternative text for image /\n @Prop()\n alt: string;\n\n /* Shape of the avatar (ellipse/square) /\n @Prop()\n shape: AvatarShape = 'ellipse';\n\n /* Size of the avatar /\n @Prop()\n size: AvatarSize = 'medium';\n\n /* Custom background color /\n @Prop()\n color: string;\n\n /* Fallback icon class /\n @Prop()\n icon: string = 'fas fa-user';\n\n /* Status indicator type /\n @Prop()\n status: AvatarStatus;\n\n /* Status indicator animation /\n @Prop()\n blink = false;\n\n /* Display name (used for initials) */\n @Prop()\n name: string;\n\n @State() isFallback: boolean = false;\n\n private getFirstLetters(name: string): string {\n const words = name.split(' ');\n const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n return initials.substring(0, 2);\n }\n\n render() {\n const baseClass = cs(\n 'bcm-avatar bcm-ui-element bcm-ui-content-display',\n 'uppercase font-medium',\n 'inline-flex items-center justify-center',\n 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n {\n 'shape-ellipse rounded-full': this.shape === 'ellipse',\n 'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n 'size-small text-size-4 w-6 h-6': this.size === 'small',\n 'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n 'size-large text-size-6 w-10 h-10': this.size === 'large',\n },\n );\n\n const badgeClass = cs('badge', {\n 'top-0 right-0': this.shape === 'ellipse',\n '-top-0.5 -right-0.5': this.shape === 'square',\n });\n\n const imageClass = cs('image w-full h-full', {\n 'rounded-full': this.shape === 'ellipse',\n 'rounded-[--bcm-ui-radius]': this.shape === 'square',\n });\n\n let style = {};\n\n if (this.color) {\n const isColorTone = this.color.includes('-');\n const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n style = {\n '--bcm-avatar-bg': bgColor,\n '--bcm-avatar-text': textColor,\n };\n }\n\n const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n ? {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${+this.size / 2}px`,\n }\n : {};\n\n const RenderContent = () => {\n if (this.isFallback) {\n if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n } else if (this.image) {\n return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt \|\| this.name \|\| 'Avatar'} />;\n } else if (this.name) {\n return this.getFirstLetters(this.name);\n } else {\n return <i class={this.icon}></i>;\n }\n };\n\n return (\n <div role=\"img\" aria-label={this.alt \|\| this.name \|\| 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n <RenderContent />\n {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/bcm-badge.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-18b75a47.js';
 import { c as ce } from './index-f3b17e60.js';
-const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.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}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.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)}.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-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}";
+const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.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-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.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)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
 const BcmBadgeStyle0 = badgeCss;
 const Badge = class {

package/dist/esm/bcm-badge.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bcm-badge.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~8hHAA8hH~~,CAAC;~~AAChjH~~,uBAAe,QAAQ;;MCwBV,KAAK;IALlB;;;;;;;QAYI,SAAI,GAAiC,QAAQ,CAAC;;;;;;;;QAU9C,YAAO,GAAmB,MAAM,CAAC;;;;;;;QAkBjC,SAAI,GAAY,KAAK,CAAC;;;;;;;QAStB,UAAK,GAAY,KAAK,CAAC;;;;;;QAiBvB,aAAQ,GAA8D,WAAW,CAAC;QAqB1E,YAAO,GAAGA,EAAE,CAAC;YACjB,IAAI,EAAE,iKAAiK;YACvK,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,wBAAwB;oBAC/B,MAAM,EAAE,iCAAiC;oBACzC,KAAK,EAAE,6BAA6B;iBACvC;gBACD,OAAO,EAAE;oBACL,GAAG,EAAE,mCAAmC;oBACxC,IAAI,EAAE,EAAE;iBACX;gBACD,QAAQ,EAAE;oBACN,WAAW,EAAE,iBAAiB;oBAC9B,UAAU,EAAE,gBAAgB;oBAC5B,cAAc,EAAE,oBAAoB;oBACpC,aAAa,EAAE,mBAAmB;iBACrC;gBACD,KAAK,EAAE;oBACH,IAAI,EAAE,+HAA+H;iBACxI;aACJ;YACD,gBAAgB,EAAE;gBACd;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAClB;gBACD;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU;iBACpB;gBACD;oBACI,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAClB;aACJ;YACD,eAAe,EAAE;gBACb,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,WAAW;gBACrB,KAAK,EAAE,KAAK;aACf;SACJ,CAAC,CAAC;KA0CN;IAxCG,IAAY,WAAW;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QAC5B,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QACrE,OAAO,EAAE,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACrD;IAED,IAAY,UAAU;QAClB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC;QAEjD,OAAO;YACH,gBAAgB,EAAE,iCAAiC,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW;YACvF,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,mCAAmC,IAAI,CAAC,KAAK,GAAG,GAAG,+BAA+B;SACrH,CAAC;KACL;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,sBAAsB,IAC7B,8DAAa,EACb,4DACI,IAAI,EAAC,QAAQ,eACH,QAAQ,gBACN,IAAI,CAAC,MAAM,GAAG,WAAW,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,EACF,KAAK,kCACE,IAAI,CAAC,UAAU,GACf,IAAI,CAAC,WAAW,KAGtB,IAAI,CAAC,OAAO,IAAI,MAAM,IAAI,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC9D,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bcm-badge.entry.js","mappings":"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","names":["tv"],"sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n --bcm-badge-text: var(--bcm-ui-color-text-default);\n --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n color: var(--bcm-badge-text);\n font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/*\n @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n \n @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n * <div>Container Content</div>\n * <span slot=\"badge\">New</span>\n * </bcm-badge>\n \n @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n * <div>User Profile</div>\n * </bcm-badge>\n /\n@Component({\n tag: 'bcm-badge',\n styleUrl: 'badge.css',\n shadow: true,\n})\nexport class Badge implements ComponentInterface {\n /\n Determines the size of the badge.\n * @type {'small' \| 'medium' \| 'large'}\n * @default 'medium'\n /\n @Prop()\n size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Sets the visual variant of the badge.\n * 'dot': Appears as a small dot indicator\n * 'text': Displays content as text\n * @type {'dot' \| 'text'}\n * @default 'text'\n /\n @Prop()\n variant: 'dot' \| 'text' = 'text';\n\n /\n Defines the color of the badge.\n * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n * @type {string}\n * @optional\n /\n @Prop()\n color?: string;\n\n /\n Enables soft color mode for the badge.\n * When true, uses lighter tones and pastel colors.\n * @type {boolean}\n * @default false\n /\n @Prop()\n soft: boolean = false;\n\n /\n Enables blinking animation for the badge.\n * Useful for drawing attention or indicating active status.\n * @type {boolean}\n * @default false\n /\n @Prop()\n blink: boolean = false;\n\n /\n Status message for accessibility purposes.\n * Will be read by screen readers.\n * @type {string}\n * @optional\n /\n @Prop()\n status?: string;\n\n /\n Sets the position of the badge relative to its container.\n * @type {'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'}\n * @default 'top-right'\n /\n @Prop()\n position: 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' = 'top-right';\n\n /\n Fine-tune the badge position with custom offset.\n * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n * @type {string}\n * @optional\n /\n @Prop()\n offset: string;\n\n /\n Text to be displayed inside the badge.\n * Used when variant is set to 'text'.\n * Can be overridden using the \"badge\" slot.\n * @type {string}\n * @optional\n */\n @Prop()\n text?: string;\n\n private classes = tv({\n base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n variants: {\n size: {\n small: 'gap-1 px-1 text-size-3',\n medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n large: 'gap-2 py-1 px-2 text-size-5',\n },\n variant: {\n dot: 'gap-0 p-0 text-[0px] leading-none',\n text: '',\n },\n position: {\n 'top-right': '-top-1 -right-1',\n 'top-left': '-top-1 -left-1',\n 'bottom-right': '-bottom-1 -right-1',\n 'bottom-left': '-bottom-1 -left-1',\n },\n blink: {\n true: 'after:content-[\"\"] after:absolute after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n },\n },\n compoundVariants: [\n {\n variant: 'dot',\n size: 'small',\n class: 'size-1',\n },\n {\n variant: 'dot',\n size: 'medium',\n class: 'size-1.5',\n },\n {\n variant: 'dot',\n size: 'large',\n class: 'size-2',\n },\n ],\n defaultVariants: {\n variant: 'text',\n size: 'medium',\n position: 'top-right',\n blink: false,\n },\n });\n\n private get offsetStyle() {\n if (!this.offset) return {};\n const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n return { transform: `translate(${x}px, ${y}px)` };\n }\n\n private get badgeStyle() {\n if (!this.color) return {};\n const variantType = this.soft ? 'soft' : 'vivid';\n\n return {\n '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n };\n }\n\n render() {\n return (\n <div class=\"relative inline-flex\">\n <slot></slot>\n <div\n role=\"status\"\n aria-live=\"polite\"\n aria-label={this.status ? `Status: ${this.status}` : undefined}\n class={this.classes({\n size: this.size,\n variant: this.variant,\n position: this.position,\n blink: this.blink,\n })}\n style={{\n ...this.badgeStyle,\n ...this.offsetStyle,\n }}\n >\n {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -313,7 +313,7 @@ const BcmButton = class {
 };
 BcmButton.style = BcmButtonStyle0;
-const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
+const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
 const BcmDrawerStyle0 = drawerCss;
 const BcmDrawer = class {
@@ -332,9 +332,9 @@ const BcmDrawer = class {
             slots: {
                 backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
                 wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-center bg-color-default',
-                title: 'font-semibold text-size-6 m-0',
-                closeButton: 'text-color-default bg-transparent appearance-none border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
+                header: 'flex justify-between items-center bg-color-default text-color-default',
+                title: 'font-semibold m-0 text-size-6',
+                closeButton: 'text-size-5 text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
                 content: 'overflow-y-auto flex-grow',
             },
             variants: {
@@ -424,6 +424,8 @@ const BcmDrawer = class {
                     },
                 },
             ],
+        }, {
+            twMerge: false,
         });
     }
     handleOpenChange(isOpen) {
@@ -502,7 +504,7 @@ const BcmDrawer = class {
             size: this.size,
             noHeader: this.noHeader,
         });
-        return (h("div", { key: '4432db26aee1f6bd99b068ea4bdcce1598566e34', part: "base" }, h("div", { key: '4ffab0356a2e10d834bcc7d289fa7d7e75bfe0ed', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '30a072303c0f37aa302e9fb710fc108dec4118b7', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: '9c96428392739375c14c3f0d43686c1fc4c76dad', part: "header", class: header() }, h("h2", { key: 'e5e97af67578ac5d6decbaae87f258374ce46a71', part: "title", class: title() }, h("slot", { key: '023760bf63b5bb31f931fef734b5157ad5ad5eaa', name: "header" }, this.headerText)), h("button", { key: '787ae47852969e29e3164668c20acfd684d03bd0', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'c4590f8f9cf838bc274800f8cd9baa093e1debb0', name: "fa-solid fa-xmark" }))), h("div", { key: '76c9d7302a725ba798201176ab6bb9186d3a81e7', part: "content", class: content() }, h("slot", { key: '8422d3ae70d855538760c2e0a0a658e29ee74654' })), h("div", { key: 'ce8e4ee5ecf0ed61d559a259b58714a01f914d50', part: "footer" }, h("slot", { key: '61826c516851892de0ce2690baf3a64b5c51a41a', name: "footer" })))));
+        return (h("div", { key: '6311b0bed989d41cf504487545f414ce5b881749', part: "base" }, h("div", { key: '5aa597edf8d0d5523570fbb326072c2e02c813b0', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '736cc10ae7341ad5139bc37ee9265801e0da6a6c', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: 'ddaf3499e8709f0ad8a58891baacfa9c5a595973', part: "header", class: header() }, h("h2", { key: '0124009ad323dfb4fca18618d750789a0c805ebd', part: "title", class: title() }, h("slot", { key: '95813a9ea32872ab5cd00f5d641cdaef8d43504d', name: "header" }, this.headerText)), h("button", { key: '7b7b0e998a01f29b96d0029eac9e2b87cceb0b1d', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: 'd61996a289c3a0727475a3e7798866b874292885', name: "fa-solid fa-xmark" }))), h("div", { key: '6650b5e079d31b2bd372f80a648256761bc78a14', part: "content", class: content() }, h("slot", { key: '8858d3e8e12eeeb0745a3aee54507f104bd6506f' })), h("div", { key: '97c1aca7d7ba509aa0d1e5c2f5e28b1c3da56b80', part: "footer" }, h("slot", { key: 'ee90d5b261eef5e435d8247717e5fa79593893f3', name: "footer" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {