bromcom-ui-next 0.1.29 → 0.1.31

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: DrawerSize = 'medium';\n  @Prop() position: DrawerPosition = 'right';\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop() headerText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n      wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-center bg-color-default text-color-default',\n      title: 'font-semibold m-0 text-size-6',\n      closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',\n      content: 'overflow-y-auto flex-grow',\n    },\n    variants: {\n      open: {\n        true: {\n          backdrop: 'opacity-100 visible',\n        },\n        false: {\n          backdrop: 'opacity-0 invisible',\n        },\n      },\n      position: {\n        left: {\n          wrapper: 'top-0 left-0 bottom-0',\n        },\n        right: {\n          wrapper: 'top-0 right-0 bottom-0',\n        },\n        top: {\n          wrapper: 'top-0 left-0 right-0',\n        },\n        bottom: {\n          wrapper: 'bottom-0 left-0 right-0',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        medium: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        large: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        open: true,\n        position: ['left', 'right'],\n        class: {\n          wrapper: 'translate-x-0',\n        },\n      },\n      {\n        open: true,\n        position: ['top', 'bottom'],\n        class: {\n          wrapper: 'translate-y-0',\n        },\n      },\n      {\n        open: false,\n        position: 'left',\n        class: {\n          wrapper: '-translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'right',\n        class: {\n          wrapper: 'translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'top',\n        class: {\n          wrapper: '-translate-y-full',\n        },\n      },\n      {\n        open: false,\n        position: 'bottom',\n        class: {\n          wrapper: 'translate-y-full',\n        },\n      },\n    ],\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n      this.bcmOpen.emit();\n    } else {\n      document.body.style.overflow = '';\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    const event = this.bcmBeforeOpen.emit();\n    if (!event.defaultPrevented) {\n      this.open = true;\n    }\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    const event = this.bcmBeforeClose.emit();\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private getWrapperStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    if (this.position === 'left' || this.position === 'right') {\n      switch (this.size) {\n        case 'small':\n          style.width = '320px';\n          break;\n        case 'medium':\n          style.width = '480px';\n          break;\n        case 'large':\n          style.width = '1064px';\n          break;\n      }\n    } else {\n      switch (this.size) {\n        case 'small':\n          style.height = '40vh';\n          break;\n        case 'medium':\n          style.height = '60vh';\n          break;\n        case 'large':\n          style.height = '90vh';\n          break;\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n      open: this.open,\n      position: this.position,\n      size: this.size,\n      noHeader: this.noHeader,\n    });\n\n    return (\n      <div part=\"base\">\n        <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n        <div\n          part=\"wrapper\"\n          class={wrapper()}\n          style={this.getWrapperStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-label={this.headerText}\n        >\n          <div part=\"header\" class={header()}>\n            <h2 part=\"title\" class={title()}>\n              <slot name=\"header\">{this.headerText}</slot>\n            </h2>\n            <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n              <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n            </button>\n          </div>\n          <div part=\"content\" class={content()}>\n            <slot />\n          </div>\n          <div part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"drawer.component.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n/**\n * @component BcmDrawer\n * @description A slide-in panel component built on the native HTML Dialog API.\n * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.\n *\n * @slot - Main content area of the drawer\n * @slot header - Custom header content (overrides headerText prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for positioning\n * @part drawer - The main drawer panel\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-drawer open header-text=\"Menu\" position=\"left\">\n *   <nav>\n *     <a href=\"/home\">Home</a>\n *     <a href=\"/about\">About</a>\n *   </nav>\n * </bcm-drawer>\n *\n * <!-- Custom size and position -->\n * <bcm-drawer size=\"large\" position=\"right\">\n *   <div slot=\"header\">Settings</div>\n *   <form>...</form>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Cancel</button>\n *     <button>Save</button>\n *   </div>\n * </bcm-drawer>\n *\n * <!-- Custom size with CSS units -->\n * <bcm-drawer size=\"600px\" position=\"bottom\">\n *   <p>Custom height drawer</p>\n * </bcm-drawer>\n *\n * <!-- Programmatic usage -->\n * <bcm-drawer id=\"myDrawer\">Content</bcm-drawer>\n * <script>\n *   document.getElementById('myDrawer').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLBcmDrawerElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the drawer is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the drawer. Can be a preset value or a custom CSS size\n   * - For left/right drawers:\n   *   - 'small': 320px\n   *   - 'medium': 480px\n   *   - 'large': 1064px\n   * - For top/bottom drawers:\n   *   - 'small': 40vh\n   *   - 'medium': 60vh\n   *   - 'large': 90vh\n   * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')\n   */\n  @Prop() size: DrawerSize = 'medium';\n\n  /**\n   * The position where the drawer slides in from\n   * - 'left': Slides from the left edge\n   * - 'right': Slides from the right edge\n   * - 'top': Slides from the top edge\n   * - 'bottom': Slides from the bottom edge\n   */\n  @Prop({ reflect: true }) position: DrawerPosition = 'right';\n\n  /**\n   * Makes the drawer take full width (for left/right) or full height (for top/bottom)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the drawer take the full screen (100vw x 100vh)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, drawer can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Text to display in the drawer header\n   */\n  @Prop() headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the drawer by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the drawer by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the drawer has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the drawer has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      dialog:\n        'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50',\n      container: 'fixed inset-0 flex overflow-hidden',\n      drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring',\n      content: 'flex-grow overflow-y-auto p-4',\n      footer: 'flex items-center justify-end gap-2 py-3 px-4',\n    },\n    variants: {\n      position: {\n        left: {\n          container: 'justify-start',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        right: {\n          container: 'justify-end',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        top: {\n          container: 'items-start',\n          drawer: 'w-full',\n          header: 'border-b',\n        },\n        bottom: {\n          container: 'items-end',\n          drawer: 'w-full',\n          header: 'border-t',\n        },\n      },\n      fullScreen: {\n        true: {\n          drawer: 'w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          drawer: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      if (this.dialogRef) {\n        if (!this.dialogRef.open) {\n          this.dialogRef.showModal();\n        }\n      }\n\n      this.bcmOpen.emit();\n    } else {\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      if (this.dialogRef && this.dialogRef.open) {\n        this.dialogRef.close();\n      }\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n\n  /**\n   * Programmatically opens the drawer\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the drawer\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the drawer open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeDrawer() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on drawer content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeDrawer();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.backdrop === 'static') {\n      this.shakeDrawer();\n      // Force dialog to stay open for static backdrop\n      requestAnimationFrame(() => {\n        if (this.dialogRef && !this.dialogRef.open && this.open) {\n          this.dialogRef.showModal();\n        }\n      });\n    } else if (this.closeOnEscape) {\n      this.hide();\n    }\n  };\n\n  private handleDrawerClick = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  private getDrawerStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullScreen) {\n      style.width = '100vw';\n      style.height = '100vh';\n      style.maxWidth = 'none';\n      style.maxHeight = 'none';\n      return style;\n    }\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    // Check if size is a custom value (contains px, %, rem, etc.)\n    const isCustomSize = this.size && (this.size.includes('px') || this.size.includes('%') || this.size.includes('rem') || this.size.includes('em') || this.size.includes('vw') || this.size.includes('vh'));\n\n    if (this.position === 'left' || this.position === 'right') {\n      if (isCustomSize) {\n        style.width = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.width = '320px';\n            break;\n          case 'medium':\n            style.width = '480px';\n            break;\n          case 'large':\n            style.width = '1064px';\n            break;\n        }\n      }\n    } else {\n      if (isCustomSize) {\n        style.height = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.height = '40vh';\n            break;\n          case 'medium':\n            style.height = '60vh';\n            break;\n          case 'large':\n            style.height = '90vh';\n            break;\n        }\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({\n      position: this.position,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"drawer-title\"\n        aria-describedby={this.helperText ? 'drawer-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"drawer\" class={drawer()} style={this.getDrawerStyle()} role=\"document\" onClick={this.handleDrawerClick}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"drawer-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"drawer-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close drawer\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"]}

package/dist/collection/components/drawer/drawer.css

@@ -1 +1 @@
-.contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}
+.contents{display:contents}.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))}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:contents}[part=dialog]::backdrop{animation:backdrop-fade-in .2s ease-out}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:.5}}[part=drawer]{transition:transform .2s ease-out}:host([position=left]) [part=drawer]{transform:translateX(-20px)}:host([position=left][open]) [part=drawer]{transform:translateX(0)}:host([position=right]) [part=drawer]{transform:translateX(20px)}:host([position=right][open]) [part=drawer]{transform:translateX(0)}:host([position=top]) [part=drawer]{transform:translateY(-20px)}:host([position=top][open]) [part=drawer]{transform:translateY(0)}:host([position=bottom]) [part=drawer]{transform:translateY(20px)}:host([position=bottom][open]) [part=drawer]{transform:translateY(0)}.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}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.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)}.backdrop\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\:opacity-50::backdrop{opacity:.5}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-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)}

package/dist/collection/components/drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/drawer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type DrawerSize = 'small' | 'medium' | 'large';\nexport type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/drawer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type DrawerSize = 'small' | 'medium' | 'large' | string;\nexport type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';\n"]}

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

@@ -1,30 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { tv } from "../../utils/tv";
 export class Dropdown {
-    constructor() {
-        this.isReady = false;
-        this.dropdownItems = [];
-        this.dropdownClass = tv({
-            base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
-        });
-        this.handleSlotChange = () => {
-            this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
-            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;
-        }
-    }
+    host;
+    text;
+    dropdownItems = [];
+    bcmDropdownChange;
     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 => {
+        const { element, selected } = event?.detail;
+        this.dropdownItems?.forEach(item => {
             if (item != element) {
                 item.selected = false;
             }
@@ -34,8 +17,17 @@ export class Dropdown {
             selected,
         });
     }
+    dropdownClass = tv({
+        base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
+    });
+    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');
+        }
+    };
     render() {
-        return (h(Host, { key: '4bbcd189c404f57d7ac411eb98da8dbd2b6d3b30' }, h("bcm-button", { key: '7e571fa321148576cd191a16ffc5bc6c03cdbcd7', kind: "outline" }, h("span", { key: '769d43e0dee2c9a0e5b639d1150da63f9f7ff8fd', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: '220d1c248fee2365150ba58de5065c3f748fe15b', targetElement: this.buttonRef }, h("div", { key: '8579fa56fb51741071f646412c5fffd069ba557e', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'a94646e1a3f85f9c305d0dd01c8f70467b759fe8', onSlotchange: this.handleSlotChange }))))));
+        return (h(Host, { key: 'a573b6ba000722dc455d75f5085fe0b9b08eb4f8' }, h("bcm-linked", { key: '5dbbcfce9d6b3be30696a5efd0f06020331d4e0f', trigger: "click", placement: "bottom-start" }, h("bcm-button", { key: 'd8bdcbb9990ef903cccc837db5cb97aeb00e8807', kind: "outline", slot: "trigger" }, h("span", { key: '4694ae4aa91429e6a3da676e3228cd6463d17174', part: "text" }, this.text)), h("div", { key: '4fdb37f07ca1652f9fd5fcf586516ae42d45b201', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: '6b4386fe543c67a1ac3fe91dffc0e27d986d368b', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bcm-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -53,7 +45,6 @@ export class Dropdown {
         return {
             "text": {
                 "type": "string",
-                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -68,13 +59,13 @@ export class Dropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "text"
             }
         };
     }
     static get states() {
         return {
-            "isReady": {},
             "dropdownItems": {}
         };
     }

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

@@ -1 +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,WAAW,CAAC;AAO/B,MAAM,OAAO,QAAQ;IALrB;QAUW,YAAO,GAAY,KAAK,CAAC;QAEzB,kBAAa,GAAiC,EAAE,CAAC;QAoClD,kBAAa,GAAG,EAAE,CAAC;YACzB,IAAI,EAAE,uIAAuI;SAC9I,CAAC,CAAC;QAEK,qBAAgB,GAAG,GAAG,EAAE;YAC9B,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;gBACpC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;YAChE,CAAC;QACH,CAAC,CAAC;KAkBH;IApDC,gBAAgB;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;QACxF,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,KAAkB;;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE5C,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAcD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mEAAY,IAAI,EAAC,SAAS;gBACxB,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB;YACZ,IAAI,CAAC,OAAO,IAAI,CACf,mEAAY,aAAa,EAAE,IAAI,CAAC,SAAS;gBACvC,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACd,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  @Prop() text?: string;\n\n  @State() isReady: boolean = false;\n\n  @State() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  protected buttonRef?: HTMLBcmButtonElement;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  componentDidLoad() {\n    const button = this.host.shadowRoot.querySelector('bcm-button') as HTMLBcmButtonElement;\n    if (button) {\n      this.buttonRef = button;\n      this.isReady = true;\n    }\n  }\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-button kind=\"outline\">\n          <span part=\"text\">{this.text}</span>\n        </bcm-button>\n        {this.isReady && (\n          <bcm-linked targetElement={this.buttonRef}>\n            <div part=\"dropdown-container\" class={this.dropdownClass()}>\n              <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n          </bcm-linked>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"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,WAAW,CAAC;AAO/B,MAAM,OAAO,QAAQ;IACR,IAAI,CAAc;IAErB,IAAI,CAAU;IAEb,aAAa,GAAiC,EAAE,CAAC;IAQ1D,iBAAiB,CAAoB;IAGrC,wBAAwB,CAAC,KAAkB;QACzC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,MAAM,CAAC;QAE5C,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;YACjC,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,OAAO;YAChB,QAAQ;SACT,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,GAAG,EAAE,CAAC;QACzB,IAAI,EAAE,uIAAuI;KAC9I,CAAC,CAAC;IAEK,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEjF,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,mEAAY,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc;gBAClD,mEAAY,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACvC,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACzB;gBACb,4DAAK,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;oBACxD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACK,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, State, Element, Host, Event, EventEmitter, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\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() dropdownItems: HTMLBcmDropdownItemElement[] = [];\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropdownChange',\n  })\n  bcmDropdownChange: EventEmitter<any>;\n\n  @Listen('bcmDropDownItemChange', { capture: true })\n  handleDropdownItemChange(event: CustomEvent) {\n    const { element, selected } = event?.detail;\n\n    this.dropdownItems?.forEach(item => {\n      if (item != element) {\n        item.selected = false;\n      }\n    });\n\n    this.bcmDropdownChange.emit({\n      element: element,\n      selected,\n    });\n  }\n\n  private dropdownClass = tv({\n    base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',\n  });\n\n  private handleSlotChange = () => {\n    this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));\n\n    if (this.dropdownItems.length === 0) {\n      console.warn('No dropdown items found in dropdown component');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <bcm-linked trigger=\"click\" placement=\"bottom-start\">\n          <bcm-button kind=\"outline\" slot=\"trigger\">\n            <span part=\"text\">{this.text}</span>\n          </bcm-button>\n          <div part=\"dropdown-container\" class={this.dropdownClass()}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </bcm-linked>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,35 +1,14 @@
 import { h } from "@stencil/core";
 import { tv } from "../../utils/tv";
 export class DropdownItem {
-    constructor() {
-        this.selected = false;
-        this.error = false;
-        this.disabled = false;
-        this.dropdownItemClass = tv({
-            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
-            variants: {
-                selected: {
-                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
-                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
-                },
-                error: {
-                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
-                    false: '',
-                },
-                disabled: {
-                    true: '', // should be discuss with ux team
-                    false: '',
-                },
-            },
-            defaultVariants: {
-                selected: false,
-                error: false,
-                disabled: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
+    host;
+    text;
+    icon;
+    rightIcons;
+    selected = false;
+    error = false;
+    disabled = false;
+    bcmDropDownItemChange;
     handleClick() {
         this.selected = true;
         this.bcmDropDownItemChange.emit({
@@ -37,12 +16,35 @@ export class DropdownItem {
             selected: this.selected,
         });
     }
+    dropdownItemClass = tv({
+        base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
+        variants: {
+            selected: {
+                true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
+                false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
+            },
+            error: {
+                true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
+                false: '',
+            },
+            disabled: {
+                true: '', // should be discuss with ux team
+                false: '',
+            },
+        },
+        defaultVariants: {
+            selected: false,
+            error: false,
+            disabled: false,
+        },
+    }, {
+        twMerge: false,
+    });
     render() {
-        var _a;
-        return (h("div", { key: 'a7711d8f7d3b825e14ed5caf3546c7ddc839d099', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: 'f17e6b4ad9aaf91370da88fa0913c6eb2e227b1b', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '1d262e43a2600450e76220121fc309e31e254940', name: "left-content" }, this.icon && h("bcm-icon", { key: 'cac088e6752681d3187f7d4896a9097589e6e2b9', "icon-name": this.icon })), h("div", { key: '90012594c1a377543673e3aaa4883cd97e4c6d8b', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '511aeda759e51451d57a4b5f80fc95080dc48239' }, this.text)), h("slot", { key: '9297f69765be0a666189cf6c4f73c6819de87d62', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: '2d645ab61ee21e1c85a0f9fbb12c456922c8ca3b', name: "left-content" }, this.icon && h("bcm-icon", { key: '654afa8ac72f92b5bd7c64e247de0884b91b04ca', "icon-name": this.icon })), h("div", { key: '9885ed60b496e2096b1e203ba27e83f76bacd57e', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '8a8d7ab8236d652114be728906e9f079438a0b6a' }, this.text)), h("slot", { key: '62e1450b43e8a407d9e4ef284c72dd34950a6e7c', name: "right-content" }, this.rightIcons?.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     static get is() { return "bcm-dropdown-item"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +62,6 @@ export class DropdownItem {
         return {
             "text": {
                 "type": "string",
-                "attribute": "text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +76,11 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "text"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -94,11 +95,11 @@ export class DropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "rightIcons": {
                 "type": "unknown",
-                "attribute": "right-icons",
                 "mutable": false,
                 "complexType": {
                     "original": "string[]",
@@ -116,7 +117,6 @@ export class DropdownItem {
             },
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -132,11 +132,11 @@ export class DropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -152,11 +152,11 @@ export class DropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -172,6 +172,7 @@ export class DropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IALzB;QAU2B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAkB3C,sBAAiB,GAAG,EAAE,CAC5B;YACE,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACR,QAAQ,EAAE;oBACR,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAC9D;gBACD,KAAK,EAAE;oBACL,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACV;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,EAAE;iBACV;aACF;YACD,eAAe,EAAE;gBACf,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAwBH;IA1DS,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IA8BD,MAAM;;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAO/B,MAAM,OAAO,YAAY;IACZ,IAAI,CAAc;IACrB,IAAI,CAAS;IACb,IAAI,CAAS;IACb,UAAU,CAAW;IACJ,QAAQ,GAAY,KAAK,CAAC;IAC1B,KAAK,GAAY,KAAK,CAAC;IACvB,QAAQ,GAAY,KAAK,CAAC;IAQnD,qBAAqB,CAAoB;IAEjC,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,GAAG,EAAE,CAC5B;QACE,IAAI,EAAE,6GAA6G;QACnH,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,IAAI,EAAE,uGAAuG;gBAC7G,KAAK,EAAE,sDAAsD;aAC9D;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,uHAAuH;gBAC7H,KAAK,EAAE,EAAE;aACV;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,EAAE,EAAE,iCAAiC;gBAC3C,KAAK,EAAE,EAAE;aACV;SACF;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;SAChB;KACF,EACD;QACE,OAAO,EAAE,KAAK;KACf,CACF,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4EACgB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBAC3C,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB;YACN,6DAAM,IAAI,EAAC,eAAe,IACvB,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,6BAAqB,IAAI,GAAa,CACvC,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-.flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}
+.flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}