bromcom-ui-next 0.1.3 → 0.1.5

package/dist/collection/components/button/button.component.js

@@ -130,13 +130,13 @@ export class BcmButton {
     }
     render() {
         const { icon, position } = this.buttonIcon;
-        return (h(Host, { key: '72bb1d2567880894e0c4c7667670e267faa9a6dd' }, h("button", { key: 'a1101e3c0846c6bf1c7059a8992b0b46fce74f8b', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
+        return (h(Host, { key: 'b1188fbe4439c4878a3306020097d07913b2212d' }, h("button", { key: 'eae7a80a19ea54120102d93127f55b039833bc54', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
                 size: this.size,
                 kind: this.kind,
                 fullWidth: this.fullWidth,
                 disabled: this.disabled,
                 loading: this.loading,
-            }) }, this.loading && h("slot", { key: 'c8a58aac8903477638cec974e32cdcd728e1ee8d', name: "loading" }), h("span", { key: '9690dfa5a312885da070ff90036b898c06f69621' }, h("slot", { key: '66eed1efbf522aec86d32ddbf0e9e8e68cbbb592', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'b0f91818830bd7e74d3d5cb6f957fa05f15b29a5', class: ' leading-none ' + icon }))), h("slot", { key: '7dbb0221b6119d61bc94c67355659e99a5bc75f5' }, this.buttonText), h("span", { key: 'd7547cc65575eef30ee8816b40de4485b0286b83' }, h("slot", { key: '32bd079256e6ca4a74572a726d459a3cb691a3ed', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '66c307ec0637537986cb454f5cf718afc5715529', class: ' leading-none ' + icon }))))));
+            }) }, this.loading && h("slot", { key: 'c231e6995ec417011a833b86668be0226855df26', name: "loading" }), h("span", { key: '0398204b65ab60a2061b78cedd61c1fc934f9946' }, h("slot", { key: '664f13b119445486a1185bb009581cc64d1c0b3e', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'c06367c640065ef5255a89c3d3c9db08a88659d1', class: ' leading-none ' + icon }))), h("slot", { key: 'f8fc4f7eaae1ad869af95a6990a53def07678cd7' }, this.buttonText), h("span", { key: 'b1b7dc15d8090bb057b6b237d65c17ac328ee380' }, h("slot", { key: '43539884f514d7bb365e10e06bf1119b5c60a2b3', name: "suffix" }, position === 'suffix' && icon && h("i", { key: 'bf9ad3dc22fc11ca218c28e1a00e9e5a8cef80f2', class: ' leading-none ' + icon }))))));
     }
     static get is() { return "bcm-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.css

@@ -1 +1 @@
-:host{display:inline-block}:host([full-width]){width:100%}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-button-border\]{border-color:var(--bcm-button-border)}.bg-\[--bcm-button-bg\]{background-color:var(--bcm-button-bg)}.bg-\[--bcm-ui-color-background-disabled-default\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\[--bcm-button-text\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-button-bg-hover\]:hover{background-color:var(--bcm-button-bg-hover)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-\[--bcm-button-bg-active\]:active{background-color:var(--bcm-button-bg-active)}
+.relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-width:1px}.border-solid{border-style:solid}.border-\[--bcm-button-border\]{border-color:var(--bcm-button-border)}.bg-\[--bcm-button-bg\]{background-color:var(--bcm-button-bg)}.bg-\[--bcm-ui-color-background-disabled-default\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\[--bcm-button-text\]{color:var(--bcm-button-text)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\:bg-\[--bcm-button-bg-hover\]:hover{background-color:var(--bcm-button-bg-hover)}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-\[--bcm-button-bg-active\]:active{background-color:var(--bcm-button-bg-active)}.flex{display:flex}.max-h-\[--dropdown-box-max-height\]{max-height:var(--dropdown-box-max-height)}.min-w-\[--dropdown-box-min-weight\]{min-width:var(--dropdown-box-min-weight)}.max-w-\[--dropdown-box-max-weight\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.rounded-lg{border-radius:.5rem}.bg-\[--dropdown-box-background-color\]{background-color:var(--dropdown-box-background-color)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}

package/dist/collection/components/chip/chip.component.js

@@ -42,7 +42,7 @@ export class BcmChip {
         this.disabled = false;
         this.chipClass = tv({
             base: [
-                'chip bcm-ui-element font-normal flex items-center px-2 gap-1 w-full border',
+                'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',
                 'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',
                 'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',
             ],
@@ -131,7 +131,7 @@ export class BcmChip {
         }
     }
     render() {
-        return (h("div", { key: '83c822b736059446f9f19c9112ab8b11a1aa17b9', 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: 'ef139f27de5b6f3d1c0077a08882fd965b0745c8' }), this.dismissible && h("bcm-icon", { key: '7ac646b4641eb8bd8db9df3e25895bf5b45231c5', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
+        return (h("div", { key: '1bcc941d68f13e8d57ffb0621911b585b3909d5a', 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: '3a2dc016ac80905bfa38f16f50417700c854a421' }), this.dismissible && h("bcm-icon", { key: '9176d4a57accdcc9b814293d441fa12ba2065c9b', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
     }
     static get is() { return "bcm-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.component.js.map

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

package/dist/collection/components/chip/chip.css

@@ -1 +1 @@
-: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}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items: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:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);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)}
+: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)}

package/dist/collection/components/divider/divider.component.js

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @component BCM Divider
+ * @description
+ * A versatile divider component that creates a visual separation between content.
+ * It supports horizontal or vertical orientation with customizable styles and sizes.
+ * The component uses CSS variables for theming and Tailwind for styling.
+ */
+export class Divider {
+    constructor() {
+        /**
+         * @prop {('horizontal'|'vertical')} direction
+         * @description Determines the orientation of the divider
+         * @default 'horizontal'
+         * @example
+         * <bcm-divider direction="vertical" />
+         */
+        this.direction = 'horizontal';
+        /**
+         * @prop {('solid'|'dashed'|'dotted')} variant
+         * @description Sets the border style of the divider
+         * @default 'solid'
+         * @example
+         * <bcm-divider variant="dashed" />
+         */
+        this.variant = 'solid';
+        /**
+         * @prop {('small'|'medium'|'large')} size
+         * @description Controls the thickness of the divider
+         * @default 'medium'
+         * @values
+         * - small: 1px border
+         * - medium: 2px border
+         * - large: 4px border
+         * @example
+         * <bcm-divider size="large" />
+         */
+        this.size = 'medium';
+        this.dividerClass = tv({
+            base: 'border-[--bcm-divider-border]',
+            variants: {
+                direction: {
+                    horizontal: 'w-full border-t',
+                    vertical: 'h-full border-l',
+                },
+                variant: {
+                    solid: 'border-solid',
+                    dashed: 'border-dashed',
+                    dotted: 'border-dotted',
+                },
+                size: {
+                    small: 'border-[1px]',
+                    medium: 'border-2',
+                    large: 'border-4',
+                },
+            },
+            defaultVariants: {
+                direction: 'horizontal',
+                variant: 'solid',
+                size: 'medium',
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    render() {
+        return (h("div", { key: '92fe4c3cf2ae2824759a643912fcbb9bc7e426f8', role: "separator", "aria-orientation": this.direction, class: this.dividerClass({
+                direction: this.direction,
+                variant: this.variant,
+                size: this.size,
+            }) }));
+    }
+    static get is() { return "bcm-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('horizontal'|'vertical')} direction"
+                        }, {
+                            "name": "description",
+                            "text": "Determines the orientation of the divider"
+                        }, {
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }, {
+                            "name": "example",
+                            "text": "<bcm-divider direction=\"vertical\" />"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'dashed' | 'dotted'",
+                    "resolved": "\"dashed\" | \"dotted\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('solid'|'dashed'|'dotted')} variant"
+                        }, {
+                            "name": "description",
+                            "text": "Sets the border style of the divider"
+                        }, {
+                            "name": "default",
+                            "text": "'solid'"
+                        }, {
+                            "name": "example",
+                            "text": "<bcm-divider variant=\"dashed\" />"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "prop",
+                            "text": "{('small'|'medium'|'large')} size"
+                        }, {
+                            "name": "description",
+                            "text": "Controls the thickness of the divider"
+                        }, {
+                            "name": "default",
+                            "text": "'medium'"
+                        }, {
+                            "name": "values",
+                            "text": "- small: 1px border\n- medium: 2px border\n- large: 4px border"
+                        }, {
+                            "name": "example",
+                            "text": "<bcm-divider size=\"large\" />"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=divider.component.js.map

package/dist/collection/components/divider/divider.component.js.map

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

package/dist/collection/components/divider/divider.css

@@ -0,0 +1 @@
+.block{display:block}:host{--bcm-divider-border:var(--bcm-ui-color-border-default);display:block}.static{position:static}.h-full{height:100%}.w-full{width:100%}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-\[1px\]{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-\[--bcm-divider-border\]{border-color:var(--bcm-divider-border)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/dist/collection/components/dropdown/dropdown.component.js

@@ -0,0 +1,110 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class Dropdown {
+    constructor() {
+        this.isReady = false;
+        this.dropdownItems = [];
+        this.dropdownClass = tv({
+            base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',
+        });
+        this.handleSlotChange = () => {
+            this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
+            if (this.dropdownItems.length === 0) {
+                console.warn('No dropdown items found in dropdown component');
+            }
+        };
+    }
+    componentDidLoad() {
+        const button = this.host.shadowRoot.querySelector('bcm-button');
+        if (button) {
+            this.buttonRef = button;
+            this.isReady = true;
+        }
+    }
+    handleDropdownItemChange(event) {
+        var _a;
+        const { element, selected } = event === null || event === void 0 ? void 0 : event.detail;
+        (_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.forEach(item => {
+            if (item != element) {
+                item.selected = false;
+            }
+        });
+        this.bcmDropdownChange.emit({
+            element: element,
+            selected,
+        });
+    }
+    render() {
+        return (h(Host, { key: 'b11ebb72b3edcdfb390e0db6670f4529be9c68fb' }, h("bcm-button", { key: 'ed882535b16ddbc4125a1fc0dc99da8c09b6ee08', kind: "outline" }, h("span", { key: '6bbbaf7e987dda4cab9871bdf05f2b1563c88f76', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '0baaf5b767cb1be7fd88fac88d721b672f9a3fce', targetElement: this.buttonRef }, h("div", { key: 'c5548264d4ab84019eeac053317d210898320d01', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '7484957ffd0d7997e8acea90c56291eb0d036003', onSlotchange: this.handleSlotChange }))))));
+    }
+    static get is() { return "bcm-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isReady": {},
+            "dropdownItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmDropdownChange",
+                "name": "bcmDropdownChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "bcmDropDownItemChange",
+                "method": "handleDropdownItemChange",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=dropdown.component.js.map

package/dist/collection/components/dropdown/dropdown.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC1H,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAOvC,MAAM,OAAO,QAAQ;IALrB;QAUa,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAG,EAAE,CAAC;YACvB,IAAI,EAAE,yNAAyN;SAClO,CAAC,CAAC;QAEK,qBAAgB,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAClC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;YAClE,CAAC;QACL,CAAC,CAAC;KAkBL;IApDG,gBAAgB;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC;IACL,CAAC;IAGD,wBAAwB,CAAC,KAAkB;;QACvC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YAC/B,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC1B,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YACxB,OAAO,EAAE,OAAO;YAChB,QAAQ;SACX,CAAC,CAAC;IACP,CAAC;IAcD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,mEAAY,IAAI,EAAC,SAAS;gBACtB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC3B;YACZ,IAAI,CAAC,OAAO,IAAI,CACb,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS;gBACrC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACtD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,CACG,CAChB,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown',\n    styleUrl: 'dropdown.css',\n    shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop() text?: string;\n\n    @State() isReady: boolean = false;\n\n    @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n    protected buttonRef?: HTMLBcmButtonElement;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropdownChange',\n    })\n    bcmDropdownChange: EventEmitter<any>;\n\n    componentDidLoad() {\n        const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n        if (button) {\n            this.buttonRef = button;\n            this.isReady = true;\n        }\n    }\n\n    @Listen('bcmDropDownItemChange', { capture: true })\n    handleDropdownItemChange(event: CustomEvent) {\n        const { element, selected } = event?.detail;\n\n        this.dropdownItems?.forEach(item => {\n            if (item != element) {\n                item.selected = false;\n            }\n        });\n\n        this.bcmDropdownChange.emit({\n            element: element,\n            selected,\n        });\n    }\n\n    private dropdownClass = tv({\n        base: 'dropdown flex flex-col items-center min-w-[--dropdown-box-min-weight] shadow-3 max-w-[--dropdown-box-max-weight] max-h-[--dropdown-box-max-height] w-full bg-[--dropdown-box-background-color] rounded-lg py-1.5 scroll',\n    });\n\n    private handleSlotChange = () => {\n        this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n        if (this.dropdownItems.length === 0) {\n            console.warn('No dropdown items found in dropdown component');\n        }\n    };\n\n    render() {\n        return (\n            <Host>\n                <bcm-button kind=\"outline\">\n                    <span part=\"text\">{this.text}</span>\n                </bcm-button>\n                {this.isReady && (\n                    <bcm-linked targetElement={this.buttonRef}>\n                        <div part=\"dropdown-container\" class={this.dropdownClass()}>\n                            <slot onSlotchange={this.handleSlotChange}></slot>\n                        </div>\n                    </bcm-linked>\n                )}\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/dropdown/dropdown.css

@@ -0,0 +1 @@
+.visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var("--bcm-ui-color-background-base-default")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\[--dropdown-box-max-height\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\[--dropdown-box-min-weight\]{min-width:var(--dropdown-box-min-weight)}.max-w-\[--dropdown-box-max-weight\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:.5rem}.bg-\[--dropdown-box-background-color\]{background-color:var(--dropdown-box-background-color)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}