bromcom-ui-next 0.1.6 → 0.1.7

package/dist/cjs/bcm-accordion.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9a2c5938.js');
 const index$1 = require('./index-310db2a6.js');
 
-const accordionCss = ".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-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)}.transition-all{transition-duration:.15s;transition-property:all;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)}";
+const accordionCss = ".block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.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}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.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-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.bg-\\[--bcm-accordion-bg\\]{background-color:var(--bcm-accordion-bg)}.bg-\\[--bcm-accordion-footer-bg\\]{background-color:var(--bcm-accordion-footer-bg)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\\[--bcm-accordion-text\\]{color:var(--bcm-accordion-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)}.transition-all{transition-duration:.15s;transition-property:all;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)}";
 const BcmAccordionStyle0 = accordionCss;
 
 const BcmAccordion = class {

package/dist/cjs/bcm-accordion.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-accordion.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-accordion.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-avatar_4.cjs.entry.js

@@ -422,7 +422,7 @@ const variantOptions = {
     },
 };
 
-const buttonCss = ".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-button-border\\]{border-color:var(--bcm-button-border)}.bg-\\[--bcm-button-bg\\]{background-color:var(--bcm-button-bg)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.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)}.leading-none{line-height:1}.text-\\[--bcm-button-text\\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-button-bg-hover\\]:hover{background-color:var(--bcm-button-bg-hover)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-button-bg-active\\]:active{background-color:var(--bcm-button-bg-active)}.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}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.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 buttonCss = ".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-button-border\\]{border-color:var(--bcm-button-border)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\\[--bcm-button-bg\\]{background-color:var(--bcm-button-bg)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.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)}.leading-none{line-height:1}.text-\\[--bcm-button-text\\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-button-bg-hover\\]:hover{background-color:var(--bcm-button-bg-hover)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-button-bg-active\\]:active{background-color:var(--bcm-button-bg-active)}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.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)}.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}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}";
 const BcmButtonStyle0 = buttonCss;
 
 const BcmButton = class {

package/dist/cjs/bcm-avatar_4.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-avatar.bcm-badge.bcm-basic-badge.bcm-button.entry.cjs.js","mappings":"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","names":["cs","h","tv","Host"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx","src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx","src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx","src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.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",":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",":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\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.badge-content {\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/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n * \n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n * \n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n    tag: 'bcm-basic-badge',\n    styleUrl: 'basic-badge.css',\n    shadow: true,\n})\nexport class BasicBadge 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     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n        variants: {\n            size: {\n                small: 'px-1 text-size-3',\n                medium: 'py-0.5 px-1.5 text-size-4',\n                large: 'py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\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            blink: false,\n        },\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            <span\n                part=\"base\"\n                role=\"status\"\n                aria-live=\"polite\"\n                style={this.badgeStyle}\n                class={this.classes({\n                    size: this.size,\n                    variant: this.variant,\n                })}\n            >\n                {this.variant === 'text' && (\n                    <span class=\"badge-content\">\n                        <slot></slot>\n                    </span>\n                )}\n            </span>\n        );\n    }\n}\n","export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'reset' | 'submit';\nexport type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type IconPosition = 'prefix' | 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' | 'middle' | 'last' | null;\n\nexport interface VariantOption {\n  text: string;\n  icon?: string;\n  iconPosition?: IconPosition;\n  status?: ButtonStatus;\n  kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n  save: {\n    text: 'Save',\n    status: 'success',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n    kind: 'primary',\n  },\n  ok: {\n    text: 'Ok',\n    status: 'success',\n    icon: 'far fa-check',\n    iconPosition: 'prefix',\n  },\n  new: {\n    text: 'New',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  add: {\n    text: 'Add',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  create: {\n    text: 'Create',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  prev: {\n    text: 'Prev',\n    status: 'default',\n    icon: 'far fa-arrow-left',\n    iconPosition: 'prefix',\n  },\n  next: {\n    text: 'Next',\n    status: 'default',\n    icon: 'far fa-arrow-right',\n    iconPosition: 'suffix',\n  },\n  apply: {\n    text: 'Apply',\n    status: 'default',\n    icon: 'far fa-check-circle',\n    iconPosition: 'prefix',\n  },\n  submit: {\n    text: 'Submit',\n    status: 'default',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n  },\n  send: {\n    text: 'Send',\n    status: 'success',\n    icon: 'far fa-paper-plane',\n    iconPosition: 'prefix',\n  },\n  delete: {\n    text: 'Delete',\n    status: 'error',\n    icon: 'far fa-trash',\n    iconPosition: 'prefix',\n  },\n  cancel: {\n    text: 'Cancel',\n    status: 'error',\n    icon: 'far fa-times',\n    iconPosition: 'prefix',\n  },\n  decline: {\n    text: 'Decline',\n    status: 'error',\n    icon: 'far fa-ban',\n    iconPosition: 'prefix',\n  },\n  close: {\n    text: 'Close',\n    status: 'error',\n    icon: 'far fa-times-circle',\n    iconPosition: 'prefix',\n  },\n  archive: {\n    text: 'Archive',\n    status: 'error',\n    icon: 'far fa-folder-open',\n    iconPosition: 'prefix',\n  },\n  remove: {\n    text: 'Remove',\n    status: 'error',\n    icon: 'far fa-minus-circle',\n    iconPosition: 'prefix',\n  },\n  edit: {\n    text: 'Edit',\n    status: 'default',\n    icon: 'far fa-edit',\n    iconPosition: 'prefix',\n  },\n  export: {\n    text: 'Export',\n    status: 'default',\n    icon: 'far fa-sign-out',\n    iconPosition: 'prefix',\n  },\n  import: {\n    text: 'Import',\n    status: 'default',\n    icon: 'far fa-sign-in',\n    iconPosition: 'prefix',\n  },\n  filter: {\n    text: 'Filter',\n    status: 'default',\n    icon: 'far fa-filter',\n    iconPosition: 'prefix',\n  },\n  update: {\n    text: 'Update',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  reset: {\n    text: 'Reset',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  download: {\n    text: 'Download',\n    status: 'default',\n    icon: 'far fa-download',\n    iconPosition: 'prefix',\n  },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n\n    return kindStyleMap[this.kind];\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',\n            'hover:bg-[--bcm-button-bg-hover]',\n            'active:bg-[--bcm-button-bg-active]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-avatar.bcm-badge.bcm-basic-badge.bcm-button.entry.cjs.js","mappings":"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","names":["cs","h","tv","Host"],"sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx","src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx","src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx","src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.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",":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",":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\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.badge-content {\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/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n * \n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n * \n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n    tag: 'bcm-basic-badge',\n    styleUrl: 'basic-badge.css',\n    shadow: true,\n})\nexport class BasicBadge 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     * Text to be displayed inside the badge.\n     * Used when variant is set to 'text'.\n     * @type {string}\n     * @optional\n     */\n    @Prop()\n    text?: string;\n\n    private classes = tv({\n        base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n        variants: {\n            size: {\n                small: 'px-1 text-size-3',\n                medium: 'py-0.5 px-1.5 text-size-4',\n                large: 'py-1 px-2 text-size-5',\n            },\n            variant: {\n                dot: 'gap-0 p-0 text-[0px] leading-none',\n                text: '',\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            blink: false,\n        },\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            <span\n                part=\"base\"\n                role=\"status\"\n                aria-live=\"polite\"\n                style={this.badgeStyle}\n                class={this.classes({\n                    size: this.size,\n                    variant: this.variant,\n                })}\n            >\n                {this.variant === 'text' && (\n                    <span class=\"badge-content\">\n                        <slot></slot>\n                    </span>\n                )}\n            </span>\n        );\n    }\n}\n","export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'reset' | 'submit';\nexport type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type IconPosition = 'prefix' | 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' | 'middle' | 'last' | null;\n\nexport interface VariantOption {\n  text: string;\n  icon?: string;\n  iconPosition?: IconPosition;\n  status?: ButtonStatus;\n  kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n  save: {\n    text: 'Save',\n    status: 'success',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n    kind: 'primary',\n  },\n  ok: {\n    text: 'Ok',\n    status: 'success',\n    icon: 'far fa-check',\n    iconPosition: 'prefix',\n  },\n  new: {\n    text: 'New',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  add: {\n    text: 'Add',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  create: {\n    text: 'Create',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  prev: {\n    text: 'Prev',\n    status: 'default',\n    icon: 'far fa-arrow-left',\n    iconPosition: 'prefix',\n  },\n  next: {\n    text: 'Next',\n    status: 'default',\n    icon: 'far fa-arrow-right',\n    iconPosition: 'suffix',\n  },\n  apply: {\n    text: 'Apply',\n    status: 'default',\n    icon: 'far fa-check-circle',\n    iconPosition: 'prefix',\n  },\n  submit: {\n    text: 'Submit',\n    status: 'default',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n  },\n  send: {\n    text: 'Send',\n    status: 'success',\n    icon: 'far fa-paper-plane',\n    iconPosition: 'prefix',\n  },\n  delete: {\n    text: 'Delete',\n    status: 'error',\n    icon: 'far fa-trash',\n    iconPosition: 'prefix',\n  },\n  cancel: {\n    text: 'Cancel',\n    status: 'error',\n    icon: 'far fa-times',\n    iconPosition: 'prefix',\n  },\n  decline: {\n    text: 'Decline',\n    status: 'error',\n    icon: 'far fa-ban',\n    iconPosition: 'prefix',\n  },\n  close: {\n    text: 'Close',\n    status: 'error',\n    icon: 'far fa-times-circle',\n    iconPosition: 'prefix',\n  },\n  archive: {\n    text: 'Archive',\n    status: 'error',\n    icon: 'far fa-folder-open',\n    iconPosition: 'prefix',\n  },\n  remove: {\n    text: 'Remove',\n    status: 'error',\n    icon: 'far fa-minus-circle',\n    iconPosition: 'prefix',\n  },\n  edit: {\n    text: 'Edit',\n    status: 'default',\n    icon: 'far fa-edit',\n    iconPosition: 'prefix',\n  },\n  export: {\n    text: 'Export',\n    status: 'default',\n    icon: 'far fa-sign-out',\n    iconPosition: 'prefix',\n  },\n  import: {\n    text: 'Import',\n    status: 'default',\n    icon: 'far fa-sign-in',\n    iconPosition: 'prefix',\n  },\n  filter: {\n    text: 'Filter',\n    status: 'default',\n    icon: 'far fa-filter',\n    iconPosition: 'prefix',\n  },\n  update: {\n    text: 'Update',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  reset: {\n    text: 'Reset',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  download: {\n    text: 'Download',\n    status: 'default',\n    icon: 'far fa-download',\n    iconPosition: 'prefix',\n  },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n\n    return kindStyleMap[this.kind];\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',\n            'hover:bg-[--bcm-button-bg-hover]',\n            'active:bg-[--bcm-button-bg-active]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-9a2c5938.js');
 const index$1 = require('./index-310db2a6.js');
 const generateId = require('./generate-id-f6982042.js');
 
-const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color{color:var(--bcm-ui-color-text-default)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
+const checkboxCss = ".relative{position:relative}.block{display:block}:host{align-self:center;display:block;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-3{height:.75rem;width:.75rem}.size-4{height:1rem;width:1rem}.size-\\[10px\\]{height:10px;width:10px}.size-\\[18px\\]{height:18px;width:18px}.h-0{height:0}.w-0{width:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--border-color\\]{border-color:var(--border-color)}.bg-\\[--unchecked-color\\]{background-color:var(--unchecked-color)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-color-base{color:var(--bcm-ui-color-text-base)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:border-\\[--border-color\\]:hover{border-color:var(--border-color)}.hover\\:border-\\[--hover-border-color\\]:hover{border-color:var(--hover-border-color)}.hover\\:bg-\\[--unchecked-color\\]:hover{background-color:var(--unchecked-color)}.peer:checked~.peer-checked\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:checked~.peer-checked\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:checked~.hover\\:peer-checked\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}.peer:indeterminate~.peer-indeterminate\\:border-\\[--checked-color\\]{border-color:var(--checked-color)}.peer:indeterminate~.peer-indeterminate\\:bg-\\[--checked-color\\]{background-color:var(--checked-color)}.peer:indeterminate~.hover\\:peer-indeterminate\\:bg-\\[--hover-color\\]:hover{background-color:var(--hover-color)}";
 const BcmCheckboxStyle0 = checkboxCss;
 
 const Checkbox = class {

package/dist/cjs/bcm-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-checkbox.entry.cjs.js","mappings":"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","names":["generateId","tv","h"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n    tag: 'bcm-checkbox',\n    styleUrl: 'checkbox.css',\n    shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() el: HTMLElement;\n\n    /**\n     * Unique ID for the component. Automatically generated if not specified.\n     */\n    @Prop({ attribute: 'id', reflect: true })\n    _id?: string = generateId('bcm-checkbox');\n\n    /**\n     * Label text to display next to the checkbox\n     */\n    @Prop()\n    label?: string;\n\n    /**\n     * Name attribute for the checkbox when used in a form\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * Determines if the checkbox is in an indeterminate state.\n     * This is useful when some items in a group of checkboxes are selected and others are not.\n     */\n    @Prop({ mutable: true })\n    indeterminate: boolean = false;\n\n    /**\n     * Size variant of the checkbox\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Determines if the checkbox is checked\n     */\n    @Prop({ mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Indicates if the checkbox is in an error state.\n     * This affects the visual styling of the component.\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * Determines if the checkbox is disabled\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Controls the position of the label relative to the checkbox\n     */\n    @Prop()\n    labelPosition: 'left' | 'right' = 'right';\n\n    /**\n     * Internal state to track checked status\n     */\n    @State() internalChecked: boolean;\n\n    /**\n     * Event emitted when the checked state changes\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmCheckboxChange',\n    })\n    bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n    /** Reference to the underlying input element */\n    private inputElement: HTMLInputElement;\n\n    /**\n     * Lifecycle method that runs before the component first renders.\n     * Initializes the internal checked state.\n     */\n    componentWillLoad() {\n        this.internalChecked = this.checked !== undefined ? this.checked : false;\n    }\n\n    /**\n     * Lifecycle method that runs after the component has rendered.\n     * Updates the indeterminate state of the input element.\n     */\n    componentDidLoad() {\n        this.updateIndeterminateState();\n    }\n\n    /**\n     * Watches for changes to the checked prop and updates the internal state\n     * @param newValue The new checked value\n     */\n    @Watch('checked')\n    syncCheckedProp(newValue: boolean | undefined) {\n        if (newValue !== undefined) {\n            this.internalChecked = newValue;\n        }\n    }\n\n    /**\n     * Watches for changes to indeterminate and internalChecked states\n     * Updates the input element accordingly\n     */\n    @Watch('indeterminate')\n    @Watch('internalChecked')\n    updateIndeterminateState() {\n        if (this.inputElement) {\n            this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n        }\n    }\n\n    /**\n     * Handles change events on the checkbox\n     * Updates state and emits the change event\n     */\n    private handleChange = () => {\n        if (this.disabled) return;\n        if (this.inputElement) {\n            this.inputElement.indeterminate = false;\n            this.indeterminate = false;\n            this.internalChecked = !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n            this.bcmCheckboxChange.emit({\n                element: this.inputElement,\n                checked: this.internalChecked,\n            });\n        }\n    };\n\n    /**\n     * Returns the CSS custom properties based on component state\n     * @returns Object with CSS custom properties\n     */\n    private getStyles() {\n        const defaultStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n            '--border-color': 'var(--bcm-ui-color-border-default)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n            '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n        };\n\n        const errorStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-color': 'var(--bcm-ui-color-border-error)',\n        };\n\n        const disabledStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--border-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n        };\n\n        return {\n            ...defaultStyles,\n            ...(this.error ? errorStyles : {}),\n            ...(this.disabled ? disabledStyles : {}),\n        };\n    }\n\n    /**\n     * Tailwind Variants definition for the component\n     * Configures styling based on component props\n     */\n    private classes = tv(\n        {\n            slots: {\n                container: 'flex items-center bcm-ui-element bcm-checkbox',\n                checkbox: [\n                    'flex items-center justify-center rounded',\n                    'border border-solid border-[--border-color]',\n                    'bg-[--unchecked-color]',\n                    'transition-colors duration-200 ease-out',\n                    'peer-checked:bg-[--checked-color]',\n                    'peer-checked:border-[--checked-color]',\n                    'peer-indeterminate:bg-[--checked-color]',\n                    'peer-indeterminate:border-[--checked-color]',\n                    'hover:border-[--hover-border-color]',\n                    'hover:peer-checked:bg-[--hover-color]',\n                    'hover:peer-indeterminate:bg-[--hover-color]',\n                ],\n                iconContainer: 'flex items-center justify-center',\n                label: 'select-none text-color',\n                hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        checkbox: 'size-3',\n                        iconContainer: 'size-2 text-size-2',\n                        label: 'text-size-4',\n                        hiddenInput: 'size-3',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        checkbox: 'size-4',\n                        iconContainer: 'size-[10px] text-size-3',\n                        label: 'text-size-5',\n                        hiddenInput: 'size-4',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        checkbox: 'size-[18px]',\n                        iconContainer: 'size-4 text-size-4',\n                        label: 'text-size-6',\n                        hiddenInput: 'size-[18px]',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                        checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n                        label: 'cursor-not-allowed text-color-disabled',\n                        iconContainer: 'text-color-disabled',\n                        hiddenInput: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer',\n                        checkbox: 'cursor-pointer',\n                        label: 'cursor-pointer text-color',\n                        iconContainer: 'text-color-base',\n                        hiddenInput: 'cursor-pointer',\n                    },\n                },\n                labelPosition: {\n                    left: {\n                        container: 'flex-row-reverse',\n                    },\n                    right: {\n                        container: 'flex-row',\n                    },\n                },\n            },\n            defaultVariants: {\n                size: 'medium',\n                checked: false,\n                disabled: false,\n                error: false,\n                labelPosition: 'right',\n            },\n        },\n        { twMerge: false },\n    );\n\n    /**\n     * Renders the checkbox component\n     */\n    render() {\n        const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n        const internalId = this._id + '-internal-checkbox' || this.name;\n\n        return (\n            <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n                <div class=\"relative inline-flex\">\n                    <input\n                        type=\"checkbox\"\n                        role=\"checkbox\"\n                        id={internalId}\n                        name={this.name}\n                        checked={this.internalChecked}\n                        indeterminate={this.indeterminate}\n                        disabled={this.disabled}\n                        class={hiddenInput()}\n                        aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n                        aria-invalid={this.error}\n                        aria-label={this.label || 'Checkbox'}\n                        onChange={this.handleChange}\n                        ref={el => (this.inputElement = el as HTMLInputElement)}\n                    />\n                    <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n                        {this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n                            </div>\n                        )}\n                        {this.indeterminate && !this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n                            </div>\n                        )}\n                    </div>\n                </div>\n                <label htmlFor={internalId} class={label()} part=\"label\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n}"],"version":3}
+{"file":"bcm-checkbox.entry.cjs.js","mappings":"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","names":["generateId","tv","h"],"sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n    tag: 'bcm-checkbox',\n    styleUrl: 'checkbox.css',\n    shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() el: HTMLElement;\n\n    /**\n     * Unique ID for the component. Automatically generated if not specified.\n     */\n    @Prop({ attribute: 'id', reflect: true })\n    _id?: string = generateId('bcm-checkbox');\n\n    /**\n     * Label text to display next to the checkbox\n     */\n    @Prop()\n    label?: string;\n\n    /**\n     * Name attribute for the checkbox when used in a form\n     */\n    @Prop()\n    name: string;\n\n    /**\n     * Determines if the checkbox is in an indeterminate state.\n     * This is useful when some items in a group of checkboxes are selected and others are not.\n     */\n    @Prop({ mutable: true })\n    indeterminate: boolean = false;\n\n    /**\n     * Size variant of the checkbox\n     */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /**\n     * Determines if the checkbox is checked\n     */\n    @Prop({ mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Indicates if the checkbox is in an error state.\n     * This affects the visual styling of the component.\n     */\n    @Prop()\n    error: boolean = false;\n\n    /**\n     * Determines if the checkbox is disabled\n     */\n    @Prop()\n    disabled: boolean = false;\n\n    /**\n     * Controls the position of the label relative to the checkbox\n     */\n    @Prop()\n    labelPosition: 'left' | 'right' = 'right';\n\n    /**\n     * Internal state to track checked status\n     */\n    @State() internalChecked: boolean;\n\n    /**\n     * Event emitted when the checked state changes\n     */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmCheckboxChange',\n    })\n    bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n    /** Reference to the underlying input element */\n    private inputElement: HTMLInputElement;\n\n    /**\n     * Lifecycle method that runs before the component first renders.\n     * Initializes the internal checked state.\n     */\n    componentWillLoad() {\n        this.internalChecked = this.checked !== undefined ? this.checked : false;\n    }\n\n    /**\n     * Lifecycle method that runs after the component has rendered.\n     * Updates the indeterminate state of the input element.\n     */\n    componentDidLoad() {\n        this.updateIndeterminateState();\n    }\n\n    /**\n     * Watches for changes to the checked prop and updates the internal state\n     * @param newValue The new checked value\n     */\n    @Watch('checked')\n    syncCheckedProp(newValue: boolean | undefined) {\n        if (newValue !== undefined) {\n            this.internalChecked = newValue;\n        }\n    }\n\n    /**\n     * Watches for changes to indeterminate and internalChecked states\n     * Updates the input element accordingly\n     */\n    @Watch('indeterminate')\n    @Watch('internalChecked')\n    updateIndeterminateState() {\n        if (this.inputElement) {\n            this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n        }\n    }\n\n    /**\n     * Handles change events on the checkbox\n     * Updates state and emits the change event\n     */\n    private handleChange = () => {\n        if (this.disabled) return;\n        if (this.inputElement) {\n            this.inputElement.indeterminate = false;\n            this.indeterminate = false;\n            this.internalChecked = !this.internalChecked;\n            this.inputElement.checked = this.internalChecked;\n            this.bcmCheckboxChange.emit({\n                element: this.inputElement,\n                checked: this.internalChecked,\n            });\n        }\n    };\n\n    /**\n     * Returns the CSS custom properties based on component state\n     * @returns Object with CSS custom properties\n     */\n    private getStyles() {\n        const defaultStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n            '--border-color': 'var(--bcm-ui-color-border-default)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n            '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n        };\n\n        const errorStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n            '--border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n            '--hover-color': 'var(--bcm-ui-color-border-error)',\n        };\n\n        const disabledStyles = {\n            '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n            '--border-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n            '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n        };\n\n        return {\n            ...defaultStyles,\n            ...(this.error ? errorStyles : {}),\n            ...(this.disabled ? disabledStyles : {}),\n        };\n    }\n\n    /**\n     * Tailwind Variants definition for the component\n     * Configures styling based on component props\n     */\n    private classes = tv(\n        {\n            slots: {\n                container: 'flex items-center bcm-ui-element bcm-checkbox',\n                checkbox: [\n                    'flex items-center justify-center rounded',\n                    'border border-solid border-[--border-color]',\n                    'bg-[--unchecked-color]',\n                    'transition-colors duration-200 ease-out',\n                    'peer-checked:bg-[--checked-color]',\n                    'peer-checked:border-[--checked-color]',\n                    'peer-indeterminate:bg-[--checked-color]',\n                    'peer-indeterminate:border-[--checked-color]',\n                    'hover:border-[--hover-border-color]',\n                    'hover:peer-checked:bg-[--hover-color]',\n                    'hover:peer-indeterminate:bg-[--hover-color]',\n                ],\n                iconContainer: 'flex items-center justify-center',\n                label: 'select-none text-color',\n                hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n            },\n            variants: {\n                size: {\n                    small: {\n                        container: 'gap-2',\n                        checkbox: 'size-3',\n                        iconContainer: 'size-2 text-size-2',\n                        label: 'text-size-4',\n                        hiddenInput: 'size-3',\n                    },\n                    medium: {\n                        container: 'gap-2.5',\n                        checkbox: 'size-4',\n                        iconContainer: 'size-[10px] text-size-3',\n                        label: 'text-size-5',\n                        hiddenInput: 'size-4',\n                    },\n                    large: {\n                        container: 'gap-3',\n                        checkbox: 'size-[18px]',\n                        iconContainer: 'size-4 text-size-4',\n                        label: 'text-size-6',\n                        hiddenInput: 'size-[18px]',\n                    },\n                },\n                disabled: {\n                    true: {\n                        container: 'cursor-not-allowed',\n                        checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n                        label: 'cursor-not-allowed text-color-disabled',\n                        iconContainer: 'text-color-disabled',\n                        hiddenInput: 'cursor-not-allowed',\n                    },\n                    false: {\n                        container: 'cursor-pointer',\n                        checkbox: 'cursor-pointer',\n                        label: 'cursor-pointer text-color',\n                        iconContainer: 'text-color-base',\n                        hiddenInput: 'cursor-pointer',\n                    },\n                },\n                labelPosition: {\n                    left: {\n                        container: 'flex-row-reverse',\n                    },\n                    right: {\n                        container: 'flex-row',\n                    },\n                },\n            },\n            defaultVariants: {\n                size: 'medium',\n                checked: false,\n                disabled: false,\n                error: false,\n                labelPosition: 'right',\n            },\n        },\n        { twMerge: false },\n    );\n\n    /**\n     * Renders the checkbox component\n     */\n    render() {\n        const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n        const internalId = this._id + '-internal-checkbox' || this.name;\n\n        return (\n            <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n                <div class=\"relative inline-flex\">\n                    <input\n                        type=\"checkbox\"\n                        role=\"checkbox\"\n                        id={internalId}\n                        name={this.name}\n                        checked={this.internalChecked}\n                        indeterminate={this.indeterminate}\n                        disabled={this.disabled}\n                        class={hiddenInput()}\n                        aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n                        aria-invalid={this.error}\n                        aria-label={this.label || 'Checkbox'}\n                        onChange={this.handleChange}\n                        ref={el => (this.inputElement = el as HTMLInputElement)}\n                    />\n                    <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n                        {this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n                            </div>\n                        )}\n                        {this.indeterminate && !this.internalChecked && (\n                            <div class={iconContainer()} part=\"icon\">\n                                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n                            </div>\n                        )}\n                    </div>\n                </div>\n                <label htmlFor={internalId} class={label()} part=\"label\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n}"],"version":3}

package/dist/cjs/bcm-chip.cjs.entry.js

@@ -12,7 +12,7 @@ const STATUS_COLORS = {
     success: 'green',
 };
 
-const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.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}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-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)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
+const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.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}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-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)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
 const BcmChipStyle0 = chipCss;
 
 const BcmChip = class {

package/dist/cjs/bcm-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-chip.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      ><slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-chip.entry.cjs.js","mappings":"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","names":["tv","h"],"sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      ><slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bcm-dropdown-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-9a2c5938.js');
 const index$1 = require('./index-310db2a6.js');
 
-const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-color{color:var(--bcm-ui-color-text-default)}.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)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
+const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.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)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
 const BcmDropdownItemStyle0 = dropdownItemCss;
 
 const DropdownItem = class {

package/dist/cjs/bcm-dropdown-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-dropdown-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,i+CAAi+C,CAAC;AAC1/C,8BAAe,eAAe;;MCOjB,YAAY;IALzB;;;QAU6B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAmB3C,sBAAiB,GAAGA,UAAE,CAC1B;YACI,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACN,QAAQ,EAAE;oBACN,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAChE;gBACD,KAAK,EAAE;oBACH,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACZ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE,EAAE;oBACR,KAAK,EAAE,EAAE;iBACZ;aACJ;YACD,eAAe,EAAE;gBACb,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAwBL;IA1DW,WAAW;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;KACN;IA8BD,MAAM;;QACF,QACIC,kFACkB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjCA,mEAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAIA,oFAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,kEAAK,KAAK,EAAC,kCAAkC,IACzCA,qEAAO,IAAI,CAAC,IAAI,CAAQ,CACtB,EACNA,mEAAM,IAAI,EAAC,eAAe,IACrB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,KACtBA,mCAAqB,IAAI,GAAa,CACzC,CAAC,CACC,CACL,EACR;KACL;;;;;;;","names":["tv","h"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown-item',\n    styleUrl: 'dropdown-item.css',\n    shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n    @Element() host: HTMLElement;\n    @Prop() text: string;\n    @Prop() icon: string;\n    @Prop() rightIcons: string[];\n    @Prop({ reflect: true }) selected: boolean = false;\n    @Prop({ reflect: true }) error: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropDownItemChange',\n    })\n    bcmDropDownItemChange: EventEmitter<any>;\n\n\n    private handleClick() {\n        this.selected = true;\n        this.bcmDropDownItemChange.emit({\n            element: this.host,\n            selected: this.selected,\n        });\n    }\n\n    private dropdownItemClass = tv(\n        {\n            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n            variants: {\n                selected: {\n                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n                },\n                error: {\n                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n                    false: '',\n                },\n                disabled: {\n                    true: '', // should be discuss with ux team\n                    false: '',\n                },\n            },\n            defaultVariants: {\n                selected: false,\n                error: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        return (\n            <div\n                aria-checked={this.selected}\n                class={this.dropdownItemClass({\n                    selected: this.selected,\n                    error: this.error,\n                })}\n                onClick={() => this.handleClick()}\n            >\n                <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n                <div class=\"flex flex-row text-pretty w-full\">\n                    <slot>{this.text}</slot>\n                </div>\n                <slot name=\"right-content\">\n                    {this.rightIcons?.map(icon => (\n                        <bcm-icon icon-name={icon}></bcm-icon>\n                    ))}\n                </slot>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"bcm-dropdown-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,86CAA86C,CAAC;AACv8C,8BAAe,eAAe;;MCOjB,YAAY;IALzB;;;QAU6B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAmB3C,sBAAiB,GAAGA,UAAE,CAC1B;YACI,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACN,QAAQ,EAAE;oBACN,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAChE;gBACD,KAAK,EAAE;oBACH,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACZ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE,EAAE;oBACR,KAAK,EAAE,EAAE;iBACZ;aACJ;YACD,eAAe,EAAE;gBACb,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAwBL;IA1DW,WAAW;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;KACN;IA8BD,MAAM;;QACF,QACIC,kFACkB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjCA,mEAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAIA,oFAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3FA,kEAAK,KAAK,EAAC,kCAAkC,IACzCA,qEAAO,IAAI,CAAC,IAAI,CAAQ,CACtB,EACNA,mEAAM,IAAI,EAAC,eAAe,IACrB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,KACtBA,mCAAqB,IAAI,GAAa,CACzC,CAAC,CACC,CACL,EACR;KACL;;;;;;;","names":["tv","h"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown-item',\n    styleUrl: 'dropdown-item.css',\n    shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n    @Element() host: HTMLElement;\n    @Prop() text: string;\n    @Prop() icon: string;\n    @Prop() rightIcons: string[];\n    @Prop({ reflect: true }) selected: boolean = false;\n    @Prop({ reflect: true }) error: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropDownItemChange',\n    })\n    bcmDropDownItemChange: EventEmitter<any>;\n\n\n    private handleClick() {\n        this.selected = true;\n        this.bcmDropDownItemChange.emit({\n            element: this.host,\n            selected: this.selected,\n        });\n    }\n\n    private dropdownItemClass = tv(\n        {\n            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n            variants: {\n                selected: {\n                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n                },\n                error: {\n                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n                    false: '',\n                },\n                disabled: {\n                    true: '', // should be discuss with ux team\n                    false: '',\n                },\n            },\n            defaultVariants: {\n                selected: false,\n                error: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        return (\n            <div\n                aria-checked={this.selected}\n                class={this.dropdownItemClass({\n                    selected: this.selected,\n                    error: this.error,\n                })}\n                onClick={() => this.handleClick()}\n            >\n                <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n                <div class=\"flex flex-row text-pretty w-full\">\n                    <slot>{this.text}</slot>\n                </div>\n                <slot name=\"right-content\">\n                    {this.rightIcons?.map(icon => (\n                        <bcm-icon icon-name={icon}></bcm-icon>\n                    ))}\n                </slot>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/bcm-popover.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-9a2c5938.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-3ec8404c.js');
 const index$1 = require('./index-310db2a6.js');
 
-const popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-color{color:var(--bcm-ui-color-text-default)}.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 popoverCss = ":host{--popover-bg:var(--bcm-ui-color-background-base-default);display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-\\[9999\\]{z-index:9999}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.w-4{width:1rem}.min-w-max{min-width:max-content}.rotate-45{--tw-rotate:45deg}.rotate-45,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-1\\.5{gap:.375rem}.rounded-md{border-radius:var(--bcm-ui-border-radius-md,6px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-3{padding:.75rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
 const BcmPopoverStyle0 = popoverCss;
 
 const Popover = class {