bromcom-ui-next 0.1.21 → 0.1.22

package/dist/components/bcm-accordion.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.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)}.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$1 = /*@__PURE__*/ proxyCustomElement(class BcmAccordion extends H {
     constructor() {
@@ -118,8 +117,8 @@ const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class BcmAccordion exten
             }, onClick: () => this.toggle() }, h("slot", { key: '01e61987be9466b4d7cd9f32f8f7489e0bcca9a2', name: "title" }, this.headerTitle), h("div", { key: 'b1557c7ae2bbd3eddcca2288652064a15b328e86', class: rightSection() }, h("span", { key: '2e77fd024a2d40a39fb45328cfd262326125c90d', onClick: e => e.stopPropagation() }, h("slot", { key: '861ab5b233b0f8486cdc15ae38016932ea322495', name: "actions" })), h("bcm-icon", { key: 'bbdc38622b7ce2855d192a7a23bbfccd8bae1a9a', name: "fa-regular fa-chevron-down", class: icon() }))), h("div", { key: 'adf600fa94f37031eb2033bf7defe561d670207c', class: content(), style: { maxHeight: this.expanded ? 'auto' : '0px' }, ref: el => (this.contentEl = el) }, h("div", { key: '4b4548c327040379072a990e9c8f88f27a842dcd', class: "px-4 py-2" }, h("slot", { key: '75991bdc295857e4b8ebcaefb3133942284ace78' })), h("footer", { key: 'dc068b7abb0ce9599b6ff398d2be93b6b9cab0bf', class: footer() }, h("slot", { key: '7c7099d0f20fa7fddc653bb7d6aa2814b6e81cd0', name: "footer", onSlotchange: this.handleFooterSlotChange }, this.hintText)))));
     }
     get host() { return this; }
-    static get style() { return BcmAccordionStyle0; }
-}, [1, "bcm-accordion", {
+    static get style() { return accordionCss; }
+}, [257, "bcm-accordion", {
         "expanded": [1540],
         "headerTitle": [1, "header-title"],
         "group": [516],
@@ -148,5 +147,6 @@ const BcmAccordion = BcmAccordion$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmAccordion, defineCustomElement };
+//# sourceMappingURL=bcm-accordion.js.map
 
 //# sourceMappingURL=bcm-accordion.js.map

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

@@ -1 +1 @@
-{"file":"bcm-accordion.js","mappings":"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","names":["BcmAccordion"],"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 '@utils/tv';\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.js","mappings":"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","names":["BcmAccordion","__stencil_proxyCustomElement","HTMLElement"],"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 '@utils/tv';\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/components/bcm-alert.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const alertCss = ":host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\\[--bcm-alert-radius\\]{border-radius:var(--bcm-alert-radius)}.bg-\\[--bcm-alert-bg\\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-alert-text\\]{color:var(--bcm-alert-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmAlertStyle0 = alertCss;
 
 const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class BcmAlert extends H {
     constructor() {
@@ -89,8 +88,8 @@ const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class BcmAlert extends H {
         const { base, section } = this.alertClass({ size: this.size });
         return (h("div", { key: 'e1318bdead531e9fbc41b6655a2ccc7dabc238b4', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: base(), style: this.alertStyles }, h("div", { key: '091e10560ea4e0303a0aa5bf44781bc1ec9142f5', class: section() }, this.showStatusIcon && h("bcm-icon", { key: 'cc291efafeaa6c3c13540beabf2a342aae8c55f9', "icon-name": this.getStatusIcon() }), h("slot", { key: '20ffe11a6e67e63b7fe1e3ca6480d0b961a0c73a' })), h("div", { key: '12036534877bd9995b865de5a4035967774e906b', class: section() }, h("div", { key: '99eca0bc5b73ea918669668aa90b441b516dc58d', part: "action" }, h("slot", { key: '9f7b36b8ec6082cbaeef9f098fdc84518168368e', name: "action" })), h("span", { key: '1eb45ae11c771500e37c84587ab0048ccd3ab85c', part: "icon" }, this.dismissible && h("bcm-icon", { key: '9b77f9a8921fa4e84b50a5b9ca242b0c4b73935a', onClick: () => this.onDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark" })))));
     }
-    static get style() { return BcmAlertStyle0; }
-}, [1, "bcm-alert", {
+    static get style() { return alertCss; }
+}, [257, "bcm-alert", {
         "status": [1],
         "size": [1],
         "kind": [1],
@@ -116,5 +115,6 @@ const BcmAlert = BcmAlert$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmAlert, defineCustomElement };
+//# sourceMappingURL=bcm-alert.js.map
 
 //# sourceMappingURL=bcm-alert.js.map

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

@@ -1 +1 @@
-{"file":"bcm-alert.js","mappings":"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","names":["BcmAlert"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n  tag: 'bcm-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n  /** Alert status type */\n  @Prop()\n  status?: AlertStatus = 'default';\n\n  /** Alert size variant */\n  @Prop()\n  size?: AlertSize = 'medium';\n\n  /** Alert style variant */\n  @Prop()\n  kind?: AlertKind = 'filled';\n\n  /** Whether alert can be dismissed */\n  @Prop()\n  dismissible?: boolean = true;\n\n  /** Whether to show status icon */\n  @Prop()\n  showStatusIcon?: boolean = true;\n\n  @Event() bcmDismiss: EventEmitter<void>;\n\n  /**\n   * Handles alert dismissal\n   * @private\n   */\n  private onDismiss() {\n    this.bcmDismiss.emit();\n  }\n\n  private getStatusIcon() {\n    const statusIcon = {\n      info: 'fa-regular fa-info-circle',\n      error: 'fa-regular fa-exclamation-circle',\n      warning: 'fa-regular fa-exclamation-triangle',\n      success: 'fa-regular fa-check-circle',\n    };\n    return statusIcon[this.status];\n  }\n\n  private get alertClass() {\n    return tv(\n      {\n        slots: {\n          base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n          section: 'flex items-center gap-2',\n        },\n        variants: {\n          size: {\n            small: {\n              base: 'py-1.5 text-size-4',\n            },\n            medium: {\n              base: 'py-2 text-size-5',\n            },\n            large: {\n              base: 'py-2.5 text-size-6',\n            },\n          },\n        },\n      },\n      {\n        twMerge: false,\n      },\n    );\n  }\n\n  private get alertStyles() {\n    let colorStatus = {\n      info: 'var(--bcm-ui-color-background-palette-blue-default)',\n      error: 'var(--bcm-ui-color-background-palette-red-default)',\n      warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n      success: 'var(--bcm-ui-color-background-palette-green-default)',\n      default: 'var(--bcm-ui-color-background-palette-gray-default)',\n    };\n\n    let textStatusColor = {\n      info: 'var(--bcm-ui-color-text-info)',\n      error: 'var(--bcm-ui-color-text-error)',\n      warning: 'var(--bcm-ui-color-text-warning)',\n      success: 'var(--bcm-ui-color-text-success)',\n      default: 'var(--bcm-ui-color-text-default)',\n    };\n\n    let filleStyle = {\n      '--bcm-alert-bg': colorStatus[this.status],\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    let textStyle = {\n      '--bcm-alert-bg': 'transparent',\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    return this.kind === 'filled' ? filleStyle : textStyle;\n  }\n\n  render() {\n    const { base, section } = this.alertClass({ size: this.size });\n    return (\n      <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n        <div class={section()}>\n          {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n          <slot></slot>\n        </div>\n        <div class={section()}>\n          <div part=\"action\">\n            <slot name=\"action\"></slot>\n          </div>\n          <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-alert.js","mappings":"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","names":["BcmAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n  tag: 'bcm-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n  /** Alert status type */\n  @Prop()\n  status?: AlertStatus = 'default';\n\n  /** Alert size variant */\n  @Prop()\n  size?: AlertSize = 'medium';\n\n  /** Alert style variant */\n  @Prop()\n  kind?: AlertKind = 'filled';\n\n  /** Whether alert can be dismissed */\n  @Prop()\n  dismissible?: boolean = true;\n\n  /** Whether to show status icon */\n  @Prop()\n  showStatusIcon?: boolean = true;\n\n  @Event() bcmDismiss: EventEmitter<void>;\n\n  /**\n   * Handles alert dismissal\n   * @private\n   */\n  private onDismiss() {\n    this.bcmDismiss.emit();\n  }\n\n  private getStatusIcon() {\n    const statusIcon = {\n      info: 'fa-regular fa-info-circle',\n      error: 'fa-regular fa-exclamation-circle',\n      warning: 'fa-regular fa-exclamation-triangle',\n      success: 'fa-regular fa-check-circle',\n    };\n    return statusIcon[this.status];\n  }\n\n  private get alertClass() {\n    return tv(\n      {\n        slots: {\n          base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n          section: 'flex items-center gap-2',\n        },\n        variants: {\n          size: {\n            small: {\n              base: 'py-1.5 text-size-4',\n            },\n            medium: {\n              base: 'py-2 text-size-5',\n            },\n            large: {\n              base: 'py-2.5 text-size-6',\n            },\n          },\n        },\n      },\n      {\n        twMerge: false,\n      },\n    );\n  }\n\n  private get alertStyles() {\n    let colorStatus = {\n      info: 'var(--bcm-ui-color-background-palette-blue-default)',\n      error: 'var(--bcm-ui-color-background-palette-red-default)',\n      warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n      success: 'var(--bcm-ui-color-background-palette-green-default)',\n      default: 'var(--bcm-ui-color-background-palette-gray-default)',\n    };\n\n    let textStatusColor = {\n      info: 'var(--bcm-ui-color-text-info)',\n      error: 'var(--bcm-ui-color-text-error)',\n      warning: 'var(--bcm-ui-color-text-warning)',\n      success: 'var(--bcm-ui-color-text-success)',\n      default: 'var(--bcm-ui-color-text-default)',\n    };\n\n    let filleStyle = {\n      '--bcm-alert-bg': colorStatus[this.status],\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    let textStyle = {\n      '--bcm-alert-bg': 'transparent',\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    return this.kind === 'filled' ? filleStyle : textStyle;\n  }\n\n  render() {\n    const { base, section } = this.alertClass({ size: this.size });\n    return (\n      <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n        <div class={section()}>\n          {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n          <slot></slot>\n        </div>\n        <div class={section()}>\n          <div part=\"action\">\n            <slot name=\"action\"></slot>\n          </div>\n          <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-avatar.js

@@ -1,9 +1,8 @@
-import { p as proxyCustomElement, H, h } from './p-30135590.js';
-import { c as classNames } from './p-12360e4c.js';
-import { d as defineCustomElement$2 } from './p-bf273460.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { d as defineCustomElement$2 } from './p-A70Ppz6C.js';
 
 const avatarCss = ":host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\\[--bcm-ui-radius\\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-avatar-bg\\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmAvatarStyle0 = avatarCss;
 
 const BcmAvatar$1 = /*@__PURE__*/ proxyCustomElement(class BcmAvatar extends H {
     constructor() {
@@ -80,8 +79,8 @@ const BcmAvatar$1 = /*@__PURE__*/ proxyCustomElement(class BcmAvatar extends H {
         };
         return (h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, h(RenderContent, null), this.status && h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), h("slot", null)));
     }
-    static get style() { return BcmAvatarStyle0; }
-}, [1, "bcm-avatar", {
+    static get style() { return avatarCss; }
+}, [257, "bcm-avatar", {
         "image": [1],
         "alt": [1],
         "shape": [1],
@@ -117,5 +116,6 @@ const BcmAvatar = BcmAvatar$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmAvatar, defineCustomElement };
+//# sourceMappingURL=bcm-avatar.js.map
 
 //# sourceMappingURL=bcm-avatar.js.map

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

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

package/dist/components/bcm-badge.js

@@ -1,8 +1,9 @@
-import { B as Badge, d as defineCustomElement$1 } from './p-bf273460.js';
+import { B as Badge, d as defineCustomElement$1 } from './p-A70Ppz6C.js';
 
 const BcmBadge = Badge;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmBadge, defineCustomElement };
+//# sourceMappingURL=bcm-badge.js.map
 
 //# sourceMappingURL=bcm-badge.js.map

package/dist/components/bcm-basic-badge.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, h } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
-const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmBasicBadgeStyle0 = basicBadgeCss;
+const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
 
 const BasicBadge = /*@__PURE__*/ proxyCustomElement(class BasicBadge extends H {
     constructor() {
@@ -82,8 +81,8 @@ const BasicBadge = /*@__PURE__*/ proxyCustomElement(class BasicBadge extends H {
                 variant: this.variant,
             }) }, this.variant === 'text' && (h("span", { key: '7f752ae67fe7eff49c9e95fb2fd5043223e1beb8', class: "badge-content" }, h("slot", { key: '25cc949858b1c39614be77f4f06cd98a7ce5a62a' })))));
     }
-    static get style() { return BcmBasicBadgeStyle0; }
-}, [1, "bcm-basic-badge", {
+    static get style() { return basicBadgeCss; }
+}, [257, "bcm-basic-badge", {
         "size": [1],
         "variant": [1],
         "color": [1],
@@ -109,5 +108,6 @@ const BcmBasicBadge = BasicBadge;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmBasicBadge, defineCustomElement };
+//# sourceMappingURL=bcm-basic-badge.js.map
 
 //# sourceMappingURL=bcm-basic-badge.js.map

package/dist/components/bcm-basic-badge.js.map

@@ -1 +1 @@
-{"file":"bcm-basic-badge.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,4tDAA4tD,CAAC;AACnvD,4BAAe,aAAa;;MCqBf,UAAU;IALvB;;;;;;;;;QAYE,SAAI,GAAiC,QAAQ,CAAC;;;;;;;;QAU9C,YAAO,GAAmB,MAAM,CAAC;;;;;;;QAkBjC,SAAI,GAAY,KAAK,CAAC;QAWd,YAAO,GAAG,EAAE,CAAC;YACnB,IAAI,EAAE,iLAAiL;YACvL,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,kBAAkB;oBACzB,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,uBAAuB;iBAC/B;gBACD,OAAO,EAAE;oBACP,GAAG,EAAE,mCAAmC;oBACxC,IAAI,EAAE,EAAE;iBACT;aACF;YACD,gBAAgB,EAAE;gBAChB;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,UAAU;iBAClB;gBACD;oBACE,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,QAAQ;iBAChB;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAC;KAgCJ;IA9BC,IAAY,UAAU;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC;QAEpD,OAAO;YACL,gBAAgB,EAAE,iCAAiC,WAAW,IAAI,IAAI,CAAC,KAAK,WAAW;YACvF,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,mCAAmC,IAAI,CAAC,KAAK,GAAG,GAAG,+BAA+B;SACnH,CAAC;KACH;IAED,MAAM;QACJ,QACE,6DACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,eACH,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,IAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtB,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAa,CACR,CACR,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":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 '@utils/tv';\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 ? 'palette' : '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"],"version":3}
+{"file":"bcm-basic-badge.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ovDAAovD;;MCsB7vD,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;AAME;;;;AAIG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAE7C;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAmB,MAAM;AAWhC;;;;;AAKG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAWb,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;AACnB,YAAA,IAAI,EAAE,iLAAiL;AACvL,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,kBAAkB;AACzB,oBAAA,MAAM,EAAE,2BAA2B;AACnC,oBAAA,KAAK,EAAE,uBAAuB;AAC/B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,GAAG,EAAE,mCAAmC;AACxC,oBAAA,IAAI,EAAE,EAAE;AACT,iBAAA;AACF,aAAA;AACD,YAAA,gBAAgB,EAAE;AAChB,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,QAAQ;AACd,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACF,SAAA,CAAC;AAgCH;AA9BC,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO;QAEnD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,6DACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,EAAA,EAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":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 '@utils/tv';\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 ? 'palette' : '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"],"version":3}

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

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const buttonGroupCss = ".block{display:block}.flex{display:flex}:host{display:block}.bcm-button-group{display:flex}.static{position:static}.w-full{width:100%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmButtonGroupStyle0 = buttonGroupCss;
 
 const BcmButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmButtonGroup extends H {
     constructor() {
@@ -87,8 +86,8 @@ const BcmButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class BcmButtonGroup e
             }) }, h("slot", { key: 'dc17cdcd5d5c1ce5084f7739dcb954d4e58ee4fb' }))));
     }
     get host() { return this; }
-    static get style() { return BcmButtonGroupStyle0; }
-}, [1, "bcm-button-group", {
+    static get style() { return buttonGroupCss; }
+}, [257, "bcm-button-group", {
         "kind": [1],
         "size": [1],
         "status": [1],
@@ -116,5 +115,6 @@ const BcmButtonGroup = BcmButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmButtonGroup, defineCustomElement };
+//# sourceMappingURL=bcm-button-group.js.map
 
 //# sourceMappingURL=bcm-button-group.js.map

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

@@ -1 +1 @@
-{"file":"bcm-button-group.js","mappings":"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","names":["BcmButtonGroup"],"sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-button-group.js","mappings":"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","names":["BcmButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-button.js

@@ -1,8 +1,9 @@
-import { B as BcmButton$1, d as defineCustomElement$1 } from './p-c491a7c9.js';
+import { B as BcmButton$1, d as defineCustomElement$1 } from './p-BdGAZ8M0.js';
 
 const BcmButton = BcmButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmButton, defineCustomElement };
+//# sourceMappingURL=bcm-button.js.map
 
 //# sourceMappingURL=bcm-button.js.map

package/dist/components/bcm-checkbox.js

@@ -1,9 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
-import { g as generateId } from './p-ba2410ef.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
+import { g as generateId } from './p-IBjzkjef.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-sm{border-radius:var(--bcm-ui-border-radius-sm,4px)}.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 = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
     constructor() {
@@ -216,8 +215,8 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
         "indeterminate": ["updateIndeterminateState"],
         "internalChecked": ["updateIndeterminateState"]
     }; }
-    static get style() { return BcmCheckboxStyle0; }
-}, [1, "bcm-checkbox", {
+    static get style() { return checkboxCss; }
+}, [257, "bcm-checkbox", {
         "_id": [513, "id"],
         "label": [1],
         "name": [1],
@@ -252,5 +251,6 @@ const BcmCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmCheckbox, defineCustomElement };
+//# sourceMappingURL=bcm-checkbox.js.map
 
 //# sourceMappingURL=bcm-checkbox.js.map

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

@@ -1 +1 @@
-{"file":"bcm-checkbox.js","mappings":"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","names":[],"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 '@utils/tv';\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-sm',\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}\n"],"version":3}
+{"file":"bcm-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 '@utils/tv';\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-sm',\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}\n"],"version":3}

package/dist/components/bcm-chip.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-30135590.js';
-import { t as tv } from './p-2c58fcb7.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
 
 const STATUS_COLORS = {
     info: 'blue',
@@ -9,7 +9,6 @@ const STATUS_COLORS = {
 };
 
 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 BcmChipStyle0 = chipCss;
 
 const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class BcmChip extends H {
     constructor() {
@@ -120,8 +119,8 @@ const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class BcmChip extends H {
     render() {
         return (h("div", { key: '0c57684b2042bcbc6b5950c8a51412eea46bf9e7', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '5eef26442dbe670cfa317998b349fa1794c845f8' }), this.dismissible && h("bcm-icon", { key: '5ca7c5b1dfb83db893772208ea792d9272cea649', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
-    static get style() { return BcmChipStyle0; }
-}, [1, "bcm-chip", {
+    static get style() { return chipCss; }
+}, [257, "bcm-chip", {
         "size": [1],
         "kind": [1],
         "status": [1],
@@ -148,5 +147,6 @@ const BcmChip = BcmChip$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { BcmChip, defineCustomElement };
+//# sourceMappingURL=bcm-chip.js.map
 
 //# sourceMappingURL=bcm-chip.js.map