bromcom-ui-next 0.1.21 → 0.1.22

package/dist/esm/bcm-popover.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-popover.entry.js","mappings":"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","names":[],"sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n *   <bcm-button>Click Me</bcm-button>\n *   <span slot=\"header\">Header</span>\n *   <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n *   <bcm-button>Toggle Me</bcm-button>\n *   <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n *   const popover = document.querySelector('#my-popover');\n *   popover.openPopup(); // Opens the popover\n *   popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n  tag: 'bcm-popover',\n  styleUrl: 'popover.css',\n  shadow: true,\n})\nexport class Popover implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private targetElement: HTMLElement;\n  private popoverElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private hoverTimeout: any;\n  private cleanupAutoUpdate: () => void;\n  /**\n   * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n   * Controls the text size and padding of the popover content.\n   * Default: 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n   * Determines where the popover appears around the trigger element.\n   * Default: 'top'\n   */\n  @Prop()\n  placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n  /**\n   * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n   * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n   * Default: 'click'\n   */\n  @Prop()\n  trigger: 'click' | 'hover' = 'click';\n  /**\n   * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n   * Adds a delay to prevent flickering on quick mouse movements.\n   * Default: 150\n   */\n  @Prop()\n  hoverDelay: number = 150;\n  /**\n   * @prop {boolean} open - Indicates whether the popover is currently open.\n   * Can be set programmatically or toggled by user interaction. Mutable.\n   * Default: false\n   */\n  @Prop({ mutable: true })\n  open: boolean = false;\n  /**\n   * @prop {string} headerText - Custom text for the popover header.\n   * Used as fallback content if the 'header' slot is not provided.\n   */\n  @Prop()\n  headerText: string;\n  /**\n   * @prop {string} message - Custom text for the popover content.\n   * Used as fallback content if the 'content' slot is not provided.\n   */\n  @Prop()\n  message: string;\n  /**\n   * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n   * Useful for tracking when the popover becomes visible.\n   */\n  @Event({ composed: false, bubbles: false, cancelable: true })\n  bcmPopoverOpen: EventEmitter<void>;\n\n  /**\n   * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n   * Useful for tracking when the popover is hidden.\n   */\n  @Event({ composed: false, bubbles: false, cancelable: true })\n  bcmPopoverClose: EventEmitter<void>;\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.togglePopover);\n      this.targetElement.removeEventListener('mouseenter', this.showPopover);\n      this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n    }\n    this.cleanupAutoUpdate?.();\n    this.cleanupAutoUpdate = null;\n    clearTimeout(this.hoverTimeout);\n  }\n\n  private togglePopover = () => {\n    this.open = !this.open;\n    if (this.open) {\n      this.bcmPopoverOpen.emit();\n    } else {\n      this.bcmPopoverClose.emit();\n    }\n    this.updatePosition();\n  };\n\n  private showPopover = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = true;\n      this.bcmPopoverOpen.emit();\n      this.updatePosition();\n    }, this.hoverDelay);\n  };\n\n  private hidePopover = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = false;\n      this.bcmPopoverClose.emit();\n    }, this.hoverDelay);\n  };\n\n  /**\n   * @method {Promise<void>} openPopup - Programmatically opens the popover.\n   * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n   * @returns {Promise<void>} A promise that resolves when the popover is opened.\n   */\n  @Method()\n  async openPopup() {\n    this.showPopover();\n  }\n\n  /**\n   * @method {Promise<void>} closePopup - Programmatically closes the popover.\n   * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n   * @returns {Promise<void>} A promise that resolves when the popover is closed.\n   */\n  @Method()\n  async closePopup() {\n    this.hidePopover();\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const elements = slot.assignedElements();\n    this.targetElement = elements[0] as HTMLElement;\n\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.togglePopover);\n      this.targetElement.removeEventListener('mouseenter', this.showPopover);\n      this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n      if (this.trigger === 'click') {\n        this.targetElement.addEventListener('click', this.togglePopover);\n        this.targetElement.setAttribute('aria-expanded', this.open.toString());\n      }\n\n      if (this.trigger === 'hover') {\n        this.targetElement.addEventListener('mouseenter', this.showPopover);\n        this.targetElement.addEventListener('mouseleave', this.hidePopover);\n      }\n\n      if (this.popoverElement && !this.cleanupAutoUpdate) {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n      }\n    }\n  };\n\n  private handleOutsideClick = (event: Event) => {\n    if (!this.el.contains(event.target as Node) && this.open) {\n      this.open = false;\n    }\n  };\n\n  private updatePosition = async () => {\n    if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n    });\n\n    Object.assign(this.popoverElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSide = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    }[basePlacement];\n\n    Object.assign(this.arrowElement.style, {\n      left: arrowX != null ? `${arrowX}px` : '',\n      top: arrowY != null ? `${arrowY}px` : '',\n      [staticSide]: '-4px',\n    });\n  };\n\n  private popoverClass = tv({\n    slots: {\n      box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n      header: 'font-semibold text-color',\n      content: 'font-normal text-color',\n      arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n    },\n    variants: {\n      size: {\n        small: { box: 'text-size-3' },\n        medium: { box: 'text-size-4' },\n        large: { box: 'text-size-5' },\n      },\n      isOpen: {\n        true: { box: 'flex' },\n        false: { box: 'hidden' },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n      isOpen: false,\n    },\n  });\n\n  render() {\n    const { box, header, content, arrow } = this.popoverClass({\n      isOpen: this.open,\n      size: this.size,\n    });\n\n    return (\n      <div class=\"relative\">\n        <slot onSlotchange={() => this.handleSlotChange()}></slot>\n        <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n          <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n          <div class={header()} part=\"header\">\n            <slot name=\"header\">{this.headerText}</slot>\n          </div>\n          <div class={content()} part=\"content\">\n            <slot name=\"content\">{this.message}</slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-popover.entry.js","sources":["src/components/popover/popover.css?tag=bcm-popover&encapsulation=shadow","src/components/popover/popover.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --popover-bg: var(--bcm-ui-color-background-base-default);\n}\n","import { arrow, computePosition, flip, offset, shift, autoUpdate } from '@floating-ui/dom';\nimport { Component, ComponentInterface, Element, Prop, Event, EventEmitter, h, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmPopover\n * @description A flexible popover component that displays contextual information or content relative to a target element.\n * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.\n *\n * @example Basic Click Popover\n * <bcm-popover trigger=\"click\" size=\"medium\" placement=\"top\">\n *   <bcm-button>Click Me</bcm-button>\n *   <span slot=\"header\">Header</span>\n *   <span slot=\"content\">This is a simple popover content.</span>\n * </bcm-popover>\n *\n * @example Hover Popover with Props\n * <bcm-popover trigger=\"hover\" hover-delay=\"200\" size=\"large\" placement=\"right\" header-text=\"Prop Header\" message=\"This is a hover popover with props.\">\n *   <bcm-button>Hover Me</bcm-button>\n * </bcm-popover>\n *\n * @example Programmatic Control\n * <bcm-popover id=\"my-popover\" trigger=\"click\">\n *   <bcm-button>Toggle Me</bcm-button>\n *   <span slot=\"content\">Controlled popover</span>\n * </bcm-popover>\n * <script>\n *   const popover = document.querySelector('#my-popover');\n *   popover.openPopup(); // Opens the popover\n *   popover.closePopup(); // Closes the popover\n * </script>\n *\n * @slot - Default slot for the target element that triggers the popover\n * @slot header - Slot for custom header content\n * @slot content - Slot for custom popover content\n *\n * @csspart popover - The root popover container element, stylable for the entire popover\n * @csspart header - The header section of the popover, stylable for the title area\n * @csspart content - The content section of the popover, stylable for the main content area\n * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow\n */\n\n@Component({\n  tag: 'bcm-popover',\n  styleUrl: 'popover.css',\n  shadow: true,\n})\nexport class Popover implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private targetElement: HTMLElement;\n  private popoverElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private hoverTimeout: any;\n  private cleanupAutoUpdate: () => void;\n  /**\n   * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.\n   * Controls the text size and padding of the popover content.\n   * Default: 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the popover relative to the target element.\n   * Determines where the popover appears around the trigger element.\n   * Default: 'top'\n   */\n  @Prop()\n  placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n  /**\n   * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.\n   * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.\n   * Default: 'click'\n   */\n  @Prop()\n  trigger: 'click' | 'hover' = 'click';\n  /**\n   * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.\n   * Adds a delay to prevent flickering on quick mouse movements.\n   * Default: 150\n   */\n  @Prop()\n  hoverDelay: number = 150;\n  /**\n   * @prop {boolean} open - Indicates whether the popover is currently open.\n   * Can be set programmatically or toggled by user interaction. Mutable.\n   * Default: false\n   */\n  @Prop({ mutable: true })\n  open: boolean = false;\n  /**\n   * @prop {string} headerText - Custom text for the popover header.\n   * Used as fallback content if the 'header' slot is not provided.\n   */\n  @Prop()\n  headerText: string;\n  /**\n   * @prop {string} message - Custom text for the popover content.\n   * Used as fallback content if the 'content' slot is not provided.\n   */\n  @Prop()\n  message: string;\n  /**\n   * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.\n   * Useful for tracking when the popover becomes visible.\n   */\n  @Event({ composed: false, bubbles: false, cancelable: true })\n  bcmPopoverOpen: EventEmitter<void>;\n\n  /**\n   * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.\n   * Useful for tracking when the popover is hidden.\n   */\n  @Event({ composed: false, bubbles: false, cancelable: true })\n  bcmPopoverClose: EventEmitter<void>;\n\n  connectedCallback() {\n    document.addEventListener('click', this.handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleOutsideClick);\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.togglePopover);\n      this.targetElement.removeEventListener('mouseenter', this.showPopover);\n      this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n    }\n    this.cleanupAutoUpdate?.();\n    this.cleanupAutoUpdate = null;\n    clearTimeout(this.hoverTimeout);\n  }\n\n  private togglePopover = () => {\n    this.open = !this.open;\n    if (this.open) {\n      this.bcmPopoverOpen.emit();\n    } else {\n      this.bcmPopoverClose.emit();\n    }\n    this.updatePosition();\n  };\n\n  private showPopover = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = true;\n      this.bcmPopoverOpen.emit();\n      this.updatePosition();\n    }, this.hoverDelay);\n  };\n\n  private hidePopover = () => {\n    clearTimeout(this.hoverTimeout);\n    this.hoverTimeout = setTimeout(() => {\n      this.open = false;\n      this.bcmPopoverClose.emit();\n    }, this.hoverDelay);\n  };\n\n  /**\n   * @method {Promise<void>} openPopup - Programmatically opens the popover.\n   * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).\n   * @returns {Promise<void>} A promise that resolves when the popover is opened.\n   */\n  @Method()\n  async openPopup() {\n    this.showPopover();\n  }\n\n  /**\n   * @method {Promise<void>} closePopup - Programmatically closes the popover.\n   * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).\n   * @returns {Promise<void>} A promise that resolves when the popover is closed.\n   */\n  @Method()\n  async closePopup() {\n    this.hidePopover();\n  }\n\n  private handleSlotChange = () => {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const elements = slot.assignedElements();\n    this.targetElement = elements[0] as HTMLElement;\n\n    if (this.targetElement) {\n      this.targetElement.removeEventListener('click', this.togglePopover);\n      this.targetElement.removeEventListener('mouseenter', this.showPopover);\n      this.targetElement.removeEventListener('mouseleave', this.hidePopover);\n\n      if (this.trigger === 'click') {\n        this.targetElement.addEventListener('click', this.togglePopover);\n        this.targetElement.setAttribute('aria-expanded', this.open.toString());\n      }\n\n      if (this.trigger === 'hover') {\n        this.targetElement.addEventListener('mouseenter', this.showPopover);\n        this.targetElement.addEventListener('mouseleave', this.hidePopover);\n      }\n\n      if (this.popoverElement && !this.cleanupAutoUpdate) {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverElement, () => this.updatePosition());\n      }\n    }\n  };\n\n  private handleOutsideClick = (event: Event) => {\n    if (!this.el.contains(event.target as Node) && this.open) {\n      this.open = false;\n    }\n  };\n\n  private updatePosition = async () => {\n    if (!this.targetElement || !this.popoverElement || !this.arrowElement) return;\n\n    const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [offset(12), flip({ fallbackPlacements: ['top', 'left', 'bottom', 'right'] }), shift({ padding: 8 }), arrow({ element: this.arrowElement })],\n    });\n\n    Object.assign(this.popoverElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const { x: arrowX, y: arrowY } = middlewareData.arrow || { x: 0, y: 0 };\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSide = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    }[basePlacement];\n\n    Object.assign(this.arrowElement.style, {\n      left: arrowX != null ? `${arrowX}px` : '',\n      top: arrowY != null ? `${arrowY}px` : '',\n      [staticSide]: '-4px',\n    });\n  };\n\n  private popoverClass = tv({\n    slots: {\n      box: 'bcm-ui-element bcm-popover absolute flex flex-col bg-[--popover-bg] rounded-md shadow-3 p-3 gap-1.5 min-w-max z-[9999]',\n      header: 'font-semibold text-color',\n      content: 'font-normal text-color',\n      arrow: 'absolute w-4 h-4 bg-[--popover-bg] transform rotate-45',\n    },\n    variants: {\n      size: {\n        small: { box: 'text-size-3' },\n        medium: { box: 'text-size-4' },\n        large: { box: 'text-size-5' },\n      },\n      isOpen: {\n        true: { box: 'flex' },\n        false: { box: 'hidden' },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n      isOpen: false,\n    },\n  });\n\n  render() {\n    const { box, header, content, arrow } = this.popoverClass({\n      isOpen: this.open,\n      size: this.size,\n    });\n\n    return (\n      <div class=\"relative\">\n        <slot onSlotchange={() => this.handleSlotChange()}></slot>\n        <div part=\"popover\" class={box()} role=\"dialog\" aria-hidden={!this.open ? 'true' : 'false'} ref={el => (this.popoverElement = el)}>\n          <div class={arrow()} ref={el => (this.arrowElement = el)} part=\"arrow\"></div>\n          <div class={header()} part=\"header\">\n            <slot name=\"header\">{this.headerText}</slot>\n          </div>\n          <div class={content()} part=\"content\">\n            <slot name=\"content\">{this.message}</slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-radio-group.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
-import { t as tv } from './tv-6dcd2224.js';
-import { g as generateId } from './generate-id-3b2fcb93.js';
-import { c as classNames } from './index-097075ad.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
+import { t as tv } from './tv-CEcVC0yX.js';
+import { g as generateId } from './generate-id-IBjzkjef.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
 
 const radioGroupCss = ".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}.mt-1{margin-top:.25rem}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmRadioGroupStyle0 = radioGroupCss;
 
 const BcmRadioGroup = class {
     constructor(hostRef) {
@@ -160,8 +159,9 @@ const BcmRadioGroup = class {
         "value": ["handleValueChange"]
     }; }
 };
-BcmRadioGroup.style = BcmRadioGroupStyle0;
+BcmRadioGroup.style = radioGroupCss;
 
 export { BcmRadioGroup as bcm_radio_group };
+//# sourceMappingURL=bcm-radio-group.entry.js.map
 
 //# sourceMappingURL=bcm-radio-group.entry.js.map

package/dist/esm/bcm-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'bcm-radio-group',\n  styleUrl: 'radio-group.css',\n  shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n  @Element() host: HTMLBcmRadioGroupElement;\n\n  /**\n   * The name attribute for the radio group, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The currently selected value of the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio group and its radio buttons are disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Whether the radio group is required in a form.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  required: boolean = false;\n\n  /**\n   * Whether the radio group is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * The label text to display above the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n   * @prop\n   * @defaultValue 'vertical'\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Optional caption text to display below the radio group, often used for error messages or hints.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  captionText?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioGroupChange',\n  })\n  bcmRadioGroupChange: EventEmitter<any>;\n\n  private readonly radioGroupName = generateId('radio-group-name');\n\n  get radios() {\n    return this.host.querySelectorAll('bcm-radio');\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.updateRadios(this.value);\n    }\n  }\n\n  /**\n   * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n   * @method\n   */\n  @Method()\n  async setClear() {\n    this.value = '';\n    this.radios?.forEach(radio => {\n      radio.checked = false;\n    });\n  }\n\n  /**\n   * Resets the error state and caption.\n   * @method\n   */\n  @Method()\n  async resetCaption() {\n    this.error = false;\n    this.captionText = undefined;\n  }\n\n  private handleSlotChange = () => {\n    this.radios.forEach(radio => {\n      radio.size = this.size;\n      radio.name = this.name ?? this.radioGroupName;\n      radio.disabled = this.disabled;\n      radio.error = this.error;\n    });\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.updateRadios(newValue);\n  }\n\n  @Listen('bcmRadioChange', { capture: true })\n  handleRadioChange(event: CustomEvent) {\n    const radio = event.target as HTMLBcmRadioElement;\n    const radios = this.host.querySelectorAll('bcm-radio');\n    radios.forEach(r => {\n      if (r !== radio) {\n        r.checked = false;\n      }\n    });\n    this.bcmRadioGroupChange.emit({\n      value: radio.value,\n      element: radio,\n    });\n  }\n\n  private updateRadios(value: string) {\n    this.radios.forEach(radio => {\n      radio.checked = radio.value === value;\n    });\n  }\n\n  private radioGroupClass = tv({\n    slots: {\n      host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n      container: ['flex'],\n    },\n    variants: {\n      size: {\n        small: {\n          host: 'gap-1.5',\n          container: 'gap-1.5',\n        },\n        medium: {\n          host: 'gap-2',\n          container: 'gap-2',\n        },\n        large: {\n          host: 'gap-2.5',\n          container: 'gap-2.5',\n        },\n      },\n      direction: {\n        horizontal: {\n          container: ['flex-row flex-wrap'],\n        },\n        vertical: {\n          container: ['flex-col'],\n        },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n      direction: 'vertical',\n    },\n  });\n\n  render() {\n    const { host, container } = this.radioGroupClass({\n      size: this.size,\n      direction: this.direction,\n    });\n    return (\n      <div class={host()}>\n        {this.label && (\n          <label\n            class={classNames(\n              'input-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n        <div class={container()}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n\n        {this.captionText && (\n          <div\n            class={classNames(\n              'input-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-radio-group.entry.js","sources":["src/components/radio-group/radio-group.css?tag=bcm-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.component.tsx"],"sourcesContent":["","/**\n * @component BcmRadioGroup\n * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.\n * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.\n *\n * @example\n * <bcm-radio-group name=\"group1\" size=\"medium\" direction=\"vertical\" label=\"Select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @example Radio group with error state and caption\n * <bcm-radio-group name=\"group1\" error={true} caption-text=\"Please select an option\">\n *   <bcm-radio label=\"Option 1\" value=\"1\"></bcm-radio>\n *   <bcm-radio label=\"Option 2\" value=\"2\"></bcm-radio>\n * </bcm-radio-group>\n *\n * @prop {string} name - The name attribute for the radio group, used to group radio buttons.\n * @defaultValue undefined\n * @prop {string} value - The currently selected value of the radio group.\n * @defaultValue undefined\n * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.\n * @defaultValue false\n * @prop {boolean} required - Whether the radio group is required in a form.\n * @defaultValue false\n * @prop {boolean} error - Whether the radio group is in an error state.\n * @defaultValue false\n * @prop {string} label - The label text to display above the radio group.\n * @defaultValue undefined\n * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n * @defaultValue 'vertical'\n * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.\n * @defaultValue undefined\n *\n * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.\n *\n * @method setClear - Clears the selected value and unchecks all radio buttons.\n * @method resetCaption - Resets the error state and caption.\n *\n * @csspart host - The root element of the radio group.\n * @csspart container - The container for the radio buttons.\n * @csspart label - The label element above the radio group.\n * @csspart caption - The caption text below the radio group.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Listen, Event, EventEmitter, Method, Watch } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'bcm-radio-group',\n  styleUrl: 'radio-group.css',\n  shadow: true,\n})\nexport class BcmRadioGroup implements ComponentInterface {\n  @Element() host: HTMLBcmRadioGroupElement;\n\n  /**\n   * The name attribute for the radio group, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The currently selected value of the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio group and its radio buttons are disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Whether the radio group is required in a form.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  required: boolean = false;\n\n  /**\n   * Whether the radio group is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * The label text to display above the radio group.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The layout direction of the radio buttons: 'horizontal' | 'vertical'.\n   * @prop\n   * @defaultValue 'vertical'\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Optional caption text to display below the radio group, often used for error messages or hints.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  captionText?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioGroupChange',\n  })\n  bcmRadioGroupChange: EventEmitter<any>;\n\n  private readonly radioGroupName = generateId('radio-group-name');\n\n  get radios() {\n    return this.host.querySelectorAll('bcm-radio');\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.updateRadios(this.value);\n    }\n  }\n\n  /**\n   * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.\n   * @method\n   */\n  @Method()\n  async setClear() {\n    this.value = '';\n    this.radios?.forEach(radio => {\n      radio.checked = false;\n    });\n  }\n\n  /**\n   * Resets the error state and caption.\n   * @method\n   */\n  @Method()\n  async resetCaption() {\n    this.error = false;\n    this.captionText = undefined;\n  }\n\n  private handleSlotChange = () => {\n    this.radios.forEach(radio => {\n      radio.size = this.size;\n      radio.name = this.name ?? this.radioGroupName;\n      radio.disabled = this.disabled;\n      radio.error = this.error;\n    });\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.updateRadios(newValue);\n  }\n\n  @Listen('bcmRadioChange', { capture: true })\n  handleRadioChange(event: CustomEvent) {\n    const radio = event.target as HTMLBcmRadioElement;\n    const radios = this.host.querySelectorAll('bcm-radio');\n    radios.forEach(r => {\n      if (r !== radio) {\n        r.checked = false;\n      }\n    });\n    this.bcmRadioGroupChange.emit({\n      value: radio.value,\n      element: radio,\n    });\n  }\n\n  private updateRadios(value: string) {\n    this.radios.forEach(radio => {\n      radio.checked = radio.value === value;\n    });\n  }\n\n  private radioGroupClass = tv({\n    slots: {\n      host: ['bcm-ui-element bcm-radio-group flex flex-col'],\n      container: ['flex'],\n    },\n    variants: {\n      size: {\n        small: {\n          host: 'gap-1.5',\n          container: 'gap-1.5',\n        },\n        medium: {\n          host: 'gap-2',\n          container: 'gap-2',\n        },\n        large: {\n          host: 'gap-2.5',\n          container: 'gap-2.5',\n        },\n      },\n      direction: {\n        horizontal: {\n          container: ['flex-row flex-wrap'],\n        },\n        vertical: {\n          container: ['flex-col'],\n        },\n      },\n    },\n    defaultVariants: {\n      size: 'medium',\n      direction: 'vertical',\n    },\n  });\n\n  render() {\n    const { host, container } = this.radioGroupClass({\n      size: this.size,\n      direction: this.direction,\n    });\n    return (\n      <div class={host()}>\n        {this.label && (\n          <label\n            class={classNames(\n              'input-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n        <div class={container()}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n\n        {this.captionText && (\n          <div\n            class={classNames(\n              'input-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled,\n                'text-[--bcm-ui-color-text-error]': !this.disabled && this.error,\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-radio.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
-import { t as tv } from './tv-6dcd2224.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
+import { t as tv } from './tv-CEcVC0yX.js';
 
 const radioCss = ".block{display:block}:host{display:block}.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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.size-2{height:.5rem;width:.5rem}.size-2\\.5{height:.625rem;width:.625rem}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{height:1rem;width:1rem}.size-\\[18px\\]{height:18px;width:18px}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--bcm-radio-bg\\]{background-color:var(--bcm-radio-bg)}.bg-\\[--bcm-radio-checked\\]{background-color:var(--bcm-radio-checked)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-radio-text-color\\]{color:var(--bcm-radio-text-color)}.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)}.shadow,.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)}.shadow-\\[inset_0_0_0_3px_var\\(--bcm-radio-border\\)\\]{--tw-shadow:inset 0 0 0 3px var(--bcm-radio-border);--tw-shadow-colored:inset 0 0 0 3px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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)}.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)}.group:hover .group-hover\\:shadow-\\[inset_0_0_0_1px_var\\(--bcm-radio-border-hover\\)\\]{--tw-shadow:inset 0 0 0 1px var(--bcm-radio-border-hover);--tw-shadow-colored:inset 0 0 0 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)}";
-const BcmRadioStyle0 = radioCss;
 
 const BcmRadio = class {
     constructor(hostRef) {
@@ -162,8 +161,9 @@ const BcmRadio = class {
     }
     get host() { return getElement(this); }
 };
-BcmRadio.style = BcmRadioStyle0;
+BcmRadio.style = radioCss;
 
 export { BcmRadio as bcm_radio };
+//# sourceMappingURL=bcm-radio.entry.js.map
 
 //# sourceMappingURL=bcm-radio.entry.js.map

package/dist/esm/bcm-radio.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-radio.entry.js","mappings":"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","names":[],"sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n  @Element() host: HTMLBcmRadioElement;\n\n  /**\n   * The text label to display next to the radio button.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The name attribute for the radio input, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The value of the radio button, submitted with the form.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio button is selected.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the radio button is disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Whether the radio button is readonly.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  readonly = false;\n\n  /**\n   * Position of the label relative to the radio button: 'right' | 'left'.\n   * @prop\n   * @defaultValue 'right'\n   */\n  @Prop()\n  labelPosition: 'right' | 'left' = 'right';\n\n  /**\n   * Whether the radio button is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioChange',\n  })\n  bcmRadioChange: EventEmitter<void>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  private handleClick(): void {\n    if (this.readonly || this.disabled) return;\n    if (!this.checked) {\n      this.checked = true;\n      this.bcmRadioChange.emit();\n    }\n  }\n\n  private getRadioStyle() {\n    const defaultStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const errorStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const disabledStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n    };\n\n    const readonlyStyle = {\n      '--bcm-radio-bg': 'transparent',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.error && errorStyle),\n      ...(this.disabled && disabledStyle),\n      ...(this.readonly && readonlyStyle),\n    };\n  }\n\n  private getRadioClass = tv(\n    {\n      slots: {\n        container: 'bcm-ui-element bcm-radio group',\n        dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n        dotContainer:\n          'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n        labelClass: 'font-medium text-[--bcm-radio-text-color]',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            dotContainer: 'size-3.5',\n            dot: 'size-2',\n            labelClass: 'text-size-4',\n          },\n          medium: {\n            container: 'gap-2.5',\n            dotContainer: 'size-4',\n            dot: 'size-2.5',\n            labelClass: 'text-size-5',\n          },\n          large: {\n            container: 'gap-3',\n            dotContainer: 'size-[18px]',\n            dot: 'size-3',\n            labelClass: 'text-size-6',\n          },\n        },\n        checked: {\n          true: {\n            dot: 'opacity-100',\n          },\n          false: {\n            dot: 'opacity-0',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer focus-visible:ring',\n          },\n        },\n        readonly: {\n          true: {\n            container: 'cursor-default pointer-events-none',\n            dot: 'opacity-100',\n            dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n          },\n          false: '',\n        },\n        labelPosition: {\n          left: {\n            container: 'inline-flex flex-row-reverse items-center',\n          },\n          right: {\n            container: 'inline-flex flex-row items-center',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      labelPosition: this.labelPosition,\n    });\n\n    return (\n      <label class={container()} style={this.getRadioStyle()}>\n        <input\n          aria-label={this.label}\n          role=\"radio\"\n          aria-checked={this.checked.toString()}\n          type=\"radio\"\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          checked={this.checked}\n          class=\"appearance-none sr-only\"\n          onClick={() => this.handleClick()}\n          onFocus={e => this.bcmFocus.emit(e)}\n          onBlur={e => this.bcmBlur.emit(e)}\n        ></input>\n        <div class={dotContainer()}>\n          <div class={dot()}></div>\n        </div>\n        <span class={labelClass()}>\n          <slot>{this.label}</slot>\n        </span>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-radio.entry.js","sources":["src/components/radio/radio.css?tag=bcm-radio&encapsulation=shadow","src/components/radio/radio.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","/**\n * @component BcmRadio\n * @description A customizable radio button component for forms, supporting various sizes, states, and label positioning.\n * It can be used to select a single option from a group of choices, with support for error, disabled, and readonly states.\n *\n * @example\n * <bcm-radio label=\"Option 1\" name=\"group1\" value=\"1\" size=\"medium\" label-position=\"right\">\n *   Option 1\n * </bcm-radio>\n *\n * @example Radio with error state\n * <bcm-radio label=\"Error Option\" name=\"group1\" value=\"2\" error={true}>\n *   Error Option\n * </bcm-radio>\n *\n * @prop {string} label - The text label to display next to the radio button.\n * @prop {string} name - The name attribute for the radio input, used to group radio buttons.\n * @prop {string} value - The value of the radio button, submitted with the form.\n * @prop {boolean} checked - Whether the radio button is selected.\n * @defaultValue false\n * @prop {RadioSize} size - Defines the size of the radio button: 'small' | 'medium' | 'large'.\n * @defaultValue 'medium'\n * @prop {boolean} disabled - Whether the radio button is disabled.\n * @defaultValue false\n * @prop {boolean} readonly - Whether the radio button is readonly.\n * @defaultValue false\n * @prop {LabelPosition} labelPosition - Position of the label relative to the radio button: 'right' | 'left'.\n * @defaultValue 'right'\n * @prop {boolean} error - Whether the radio button is in an error state.\n * @defaultValue false\n *\n * @event {EventEmitter<void>} bcmRadioChange - Emitted when the radio button's checked state changes.\n * @event {EventEmitter<FocusEvent>} bcmFocus - Emitted when the radio button gains focus.\n * @event {EventEmitter<FocusEvent>} bcmBlur - Emitted when the radio button loses focus.\n *\n * @csspart container - The root label element wrapping the radio button and label.\n * @csspart dotContainer - The container for the radio button dot.\n * @csspart dot - The inner dot of the radio button.\n * @csspart label - The label text element.\n */\n\nimport { Component, ComponentInterface, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class BcmRadio implements ComponentInterface {\n  @Element() host: HTMLBcmRadioElement;\n\n  /**\n   * The text label to display next to the radio button.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The name attribute for the radio input, used to group radio buttons.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * The value of the radio button, submitted with the form.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  value: string;\n\n  /**\n   * Whether the radio button is selected.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Defines the size of the radio button: 'small' | 'medium' | 'large'.\n   * @prop\n   * @defaultValue 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the radio button is disabled.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Whether the radio button is readonly.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  readonly = false;\n\n  /**\n   * Position of the label relative to the radio button: 'right' | 'left'.\n   * @prop\n   * @defaultValue 'right'\n   */\n  @Prop()\n  labelPosition: 'right' | 'left' = 'right';\n\n  /**\n   * Whether the radio button is in an error state.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop()\n  error: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmRadioChange',\n  })\n  bcmRadioChange: EventEmitter<void>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  private handleClick(): void {\n    if (this.readonly || this.disabled) return;\n    if (!this.checked) {\n      this.checked = true;\n      this.bcmRadioChange.emit();\n    }\n  }\n\n  private getRadioStyle() {\n    const defaultStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-primary)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-primary-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const errorStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-error)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-error-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    const disabledStyle = {\n      '--bcm-radio-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-disabled-default)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-disabled)',\n    };\n\n    const readonlyStyle = {\n      '--bcm-radio-bg': 'transparent',\n      '--bcm-radio-border': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-checked': 'var(--bcm-ui-color-background-default-default)',\n      '--bcm-radio-border-hover': 'var(--bcm-ui-color-border-disabled)',\n      '--bcm-radio-text-color': 'var(--bcm-ui-color-text-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.error && errorStyle),\n      ...(this.disabled && disabledStyle),\n      ...(this.readonly && readonlyStyle),\n    };\n  }\n\n  private getRadioClass = tv(\n    {\n      slots: {\n        container: 'bcm-ui-element bcm-radio group',\n        dot: 'absolute rounded-full transition bg-[--bcm-radio-checked]',\n        dotContainer:\n          'relative rounded-full flex items-center justify-center shadow-[inset_0_0_0_1px_var(--bcm-radio-border)] bg-[--bcm-radio-bg] transition group-hover:shadow-[inset_0_0_0_1px_var(--bcm-radio-border-hover)]',\n        labelClass: 'font-medium text-[--bcm-radio-text-color]',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            dotContainer: 'size-3.5',\n            dot: 'size-2',\n            labelClass: 'text-size-4',\n          },\n          medium: {\n            container: 'gap-2.5',\n            dotContainer: 'size-4',\n            dot: 'size-2.5',\n            labelClass: 'text-size-5',\n          },\n          large: {\n            container: 'gap-3',\n            dotContainer: 'size-[18px]',\n            dot: 'size-3',\n            labelClass: 'text-size-6',\n          },\n        },\n        checked: {\n          true: {\n            dot: 'opacity-100',\n          },\n          false: {\n            dot: 'opacity-0',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer focus-visible:ring',\n          },\n        },\n        readonly: {\n          true: {\n            container: 'cursor-default pointer-events-none',\n            dot: 'opacity-100',\n            dotContainer: 'shadow-[inset_0_0_0_3px_var(--bcm-radio-border)]',\n          },\n          false: '',\n        },\n        labelPosition: {\n          left: {\n            container: 'inline-flex flex-row-reverse items-center',\n          },\n          right: {\n            container: 'inline-flex flex-row items-center',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, dot, dotContainer, labelClass } = this.getRadioClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      labelPosition: this.labelPosition,\n    });\n\n    return (\n      <label class={container()} style={this.getRadioStyle()}>\n        <input\n          aria-label={this.label}\n          role=\"radio\"\n          aria-checked={this.checked.toString()}\n          type=\"radio\"\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          checked={this.checked}\n          class=\"appearance-none sr-only\"\n          onClick={() => this.handleClick()}\n          onFocus={e => this.bcmFocus.emit(e)}\n          onBlur={e => this.bcmBlur.emit(e)}\n        ></input>\n        <div class={dotContainer()}>\n          <div class={dot()}></div>\n        </div>\n        <span class={labelClass()}>\n          <slot>{this.label}</slot>\n        </span>\n      </label>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-segmented-picker-option.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { t as tv } from './tv-6dcd2224.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CrZxEeDA.js';
+import { t as tv } from './tv-CEcVC0yX.js';
 
 const segmentedPickerOptionCss = ".relative{position:relative}.flex{display:flex}.outline{outline-style:solid}:host{display:inline-block;flex:1}.segmented-option{background:transparent;height:100%;outline:none;position:relative;width:100%;z-index:1}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.border-0{border-width:0}.px-3{padding-left:.75rem;padding-right:.75rem}.py-\\[1px\\]{padding-bottom:1px;padding-top:1px}.py-\\[3px\\]{padding-bottom:3px;padding-top:3px}.py-\\[6px\\]{padding-bottom:6px;padding-top:6px}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-\\[--bcm-ui-color-text-header\\]{color:var(--bcm-ui-color-text-header)}.text-\\[--bcm-ui-color-text-helper\\]{color:var(--bcm-ui-color-text-helper)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
-const BcmSegmentedPickerOptionStyle0 = segmentedPickerOptionCss;
 
 const BcmSegmentedPickerOption = class {
     constructor(hostRef) {
@@ -98,8 +97,9 @@ const BcmSegmentedPickerOption = class {
     }
     get host() { return getElement(this); }
 };
-BcmSegmentedPickerOption.style = BcmSegmentedPickerOptionStyle0;
+BcmSegmentedPickerOption.style = segmentedPickerOptionCss;
 
 export { BcmSegmentedPickerOption as bcm_segmented_picker_option };
+//# sourceMappingURL=bcm-segmented-picker-option.entry.js.map
 
 //# sourceMappingURL=bcm-segmented-picker-option.entry.js.map

package/dist/esm/bcm-segmented-picker-option.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-segmented-picker-option.entry.js","mappings":"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","names":[],"sources":["src/components/segmented-picker/segmented-picker-option.css?tag=bcm-segmented-picker-option&encapsulation=shadow","src/components/segmented-picker/segmented-picker-option.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  flex: 1;\n}\n\n.segmented-option {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  position: relative;\n  z-index: 1;\n  outline: none;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-segmented-picker-option',\n  styleUrl: 'segmented-picker-option.css',\n  shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n  @Element() host: HTMLElement;\n\n  /** Option value */\n  @Prop()\n  value!: string;\n\n  /** Option display label */\n  @Prop()\n  label?: string;\n\n  /** Controls the option size */\n  @Prop()\n  size?: SegmentedPickerSize;\n\n  /** Whether this option is selected */\n  @Prop({ mutable: true })\n  selected = false;\n\n  /** Whether this option is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Click event */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n  })\n  bcmOptionClick: EventEmitter<string>;\n\n  private parentValueObserver: MutationObserver;\n  private parentRef: HTMLElement | null = null;\n\n  componentWillLoad() {\n    // Parent referansını al\n    this.parentRef = this.host.closest('bcm-segmented-picker');\n\n    // İlk yüklemede selected durumu\n    if (this.parentRef) {\n      this.selected = this.parentRef.getAttribute('value') === this.value;\n    }\n  }\n\n  componentDidLoad() {\n    // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n    // Burada artık prop değişikliği yok\n    this.setupValueObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.parentValueObserver) {\n      this.parentValueObserver.disconnect();\n    }\n  }\n\n  private setupValueObserver() {\n    if (this.parentRef) {\n      this.parentValueObserver = new MutationObserver(() => {\n        this.selected = this.isValueSelected();\n      });\n      this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n    }\n  }\n\n  private isValueSelected(): boolean {\n    return this.parentRef?.getAttribute('value') === this.value;\n  }\n\n  private getSizeFromParent(): SegmentedPickerSize {\n    return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) || 'medium';\n  }\n\n  private isDisabled(): boolean {\n    return this.disabled || this.parentRef?.hasAttribute('disabled') || false;\n  }\n\n  private handleClick = () => {\n    if (this.isDisabled()) return;\n    this.bcmOptionClick.emit(this.value);\n  };\n\n  @Method()\n  async getWidth(): Promise<number> {\n    const element = this.host.shadowRoot?.querySelector('.segmented-option');\n    return element?.getBoundingClientRect().width || 0;\n  }\n\n  private optionClass = tv(\n    {\n      base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n      variants: {\n        size: {\n          small: 'py-[1px] px-3 text-size-4',\n          medium: 'py-[3px] px-3 text-size-5',\n          large: 'py-[6px] px-3 text-size-6',\n        },\n        selected: {\n          true: 'text-[--bcm-ui-color-text-header]',\n          false: 'text-[--bcm-ui-color-text-helper]',\n        },\n        disabled: {\n          true: 'cursor-not-allowed opacity-50',\n          false: '',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        selected: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const size = this.size || this.getSizeFromParent();\n    const disabled = this.isDisabled();\n\n    return (\n      <Host>\n        <button\n          class={this.optionClass({\n            size,\n            selected: this.selected,\n            disabled,\n          })}\n          onClick={this.handleClick}\n          disabled={disabled}\n          type=\"button\"\n        >\n          <slot>{this.label}</slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-segmented-picker-option.entry.js","sources":["src/components/segmented-picker/segmented-picker-option.css?tag=bcm-segmented-picker-option&encapsulation=shadow","src/components/segmented-picker/segmented-picker-option.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  flex: 1;\n}\n\n.segmented-option {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  position: relative;\n  z-index: 1;\n  outline: none;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SegmentedPickerSize } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-segmented-picker-option',\n  styleUrl: 'segmented-picker-option.css',\n  shadow: true,\n})\nexport class BcmSegmentedPickerOption {\n  @Element() host: HTMLElement;\n\n  /** Option value */\n  @Prop()\n  value!: string;\n\n  /** Option display label */\n  @Prop()\n  label?: string;\n\n  /** Controls the option size */\n  @Prop()\n  size?: SegmentedPickerSize;\n\n  /** Whether this option is selected */\n  @Prop({ mutable: true })\n  selected = false;\n\n  /** Whether this option is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Click event */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n  })\n  bcmOptionClick: EventEmitter<string>;\n\n  private parentValueObserver: MutationObserver;\n  private parentRef: HTMLElement | null = null;\n\n  componentWillLoad() {\n    // Parent referansını al\n    this.parentRef = this.host.closest('bcm-segmented-picker');\n\n    // İlk yüklemede selected durumu\n    if (this.parentRef) {\n      this.selected = this.parentRef.getAttribute('value') === this.value;\n    }\n  }\n\n  componentDidLoad() {\n    // DOM yüklendikten sonra sadece parent değer değişikliklerini gözlemeye başla\n    // Burada artık prop değişikliği yok\n    this.setupValueObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.parentValueObserver) {\n      this.parentValueObserver.disconnect();\n    }\n  }\n\n  private setupValueObserver() {\n    if (this.parentRef) {\n      this.parentValueObserver = new MutationObserver(() => {\n        this.selected = this.isValueSelected();\n      });\n      this.parentValueObserver.observe(this.parentRef, { attributes: true, attributeFilter: ['value'] });\n    }\n  }\n\n  private isValueSelected(): boolean {\n    return this.parentRef?.getAttribute('value') === this.value;\n  }\n\n  private getSizeFromParent(): SegmentedPickerSize {\n    return (this.parentRef?.getAttribute('size') as SegmentedPickerSize) || 'medium';\n  }\n\n  private isDisabled(): boolean {\n    return this.disabled || this.parentRef?.hasAttribute('disabled') || false;\n  }\n\n  private handleClick = () => {\n    if (this.isDisabled()) return;\n    this.bcmOptionClick.emit(this.value);\n  };\n\n  @Method()\n  async getWidth(): Promise<number> {\n    const element = this.host.shadowRoot?.querySelector('.segmented-option');\n    return element?.getBoundingClientRect().width || 0;\n  }\n\n  private optionClass = tv(\n    {\n      base: 'segmented-option bcm-ui-element inline-flex items-center justify-center text-center border-0 cursor-pointer select-none',\n      variants: {\n        size: {\n          small: 'py-[1px] px-3 text-size-4',\n          medium: 'py-[3px] px-3 text-size-5',\n          large: 'py-[6px] px-3 text-size-6',\n        },\n        selected: {\n          true: 'text-[--bcm-ui-color-text-header]',\n          false: 'text-[--bcm-ui-color-text-helper]',\n        },\n        disabled: {\n          true: 'cursor-not-allowed opacity-50',\n          false: '',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        selected: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const size = this.size || this.getSizeFromParent();\n    const disabled = this.isDisabled();\n\n    return (\n      <Host>\n        <button\n          class={this.optionClass({\n            size,\n            selected: this.selected,\n            disabled,\n          })}\n          onClick={this.handleClick}\n          disabled={disabled}\n          type=\"button\"\n        >\n          <slot>{this.label}</slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-segmented-picker.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { t as tv } from './tv-6dcd2224.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CrZxEeDA.js';
+import { t as tv } from './tv-CEcVC0yX.js';
 
 const segmentedPickerCss = ".relative{position:relative}.flex{display:flex}.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:inline-block;position:relative}:host([full-width]){width:100%}.segmented-container{border-radius:var(--bcm-ui-border-radius,4px)}.segmented-indicator{border-radius:var(--bcm-ui-border-radius-md,2px);height:100%;top:0;transition:left .2s ease-in-out,width .2s ease-in-out}.segmented-options{display:flex}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.z-0{z-index:0}.z-10{z-index:10}.inline-flex{display:inline-flex}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-\\[--bcm-ui-color-background-default-default\\]{background-color:var(--bcm-ui-color-background-default-default)}.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)}.opacity-50{opacity:.5}.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)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
-const BcmSegmentedPickerStyle0 = segmentedPickerCss;
 
 const BcmSegmentedPicker = class {
     constructor(hostRef) {
@@ -135,8 +134,9 @@ const BcmSegmentedPicker = class {
         "value": ["valueChanged"]
     }; }
 };
-BcmSegmentedPicker.style = BcmSegmentedPickerStyle0;
+BcmSegmentedPicker.style = segmentedPickerCss;
 
 export { BcmSegmentedPicker as bcm_segmented_picker };
+//# sourceMappingURL=bcm-segmented-picker.entry.js.map
 
 //# sourceMappingURL=bcm-segmented-picker.entry.js.map

package/dist/esm/bcm-segmented-picker.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-segmented-picker.entry.js","mappings":"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","names":[],"sources":["src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n.segmented-container {\n  border-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n.segmented-indicator {\n  height: 100%;\n  top: 0;\n  border-radius: var(--bcm-ui-border-radius-md, 2px);\n  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n\n.segmented-options {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { SegmentedPickerSize } from './types';\n\n@Component({\n  tag: 'bcm-segmented-picker',\n  styleUrl: 'segmented-picker.css',\n  shadow: true,\n})\nexport class BcmSegmentedPicker {\n  @Element() host: HTMLElement;\n\n  /** Controls the component size */\n  @Prop()\n  size: SegmentedPickerSize = 'medium';\n\n  /** The selected option value */\n  @Prop({ mutable: true, reflect: true })\n  value?: string;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Full width component */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Change event */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<{ value: string }>;\n\n  @State() options: Array<{ value: string; label: string }> = [];\n  @State() indicatorStyles: { left: string; width: string; transition: string } = {\n    left: '0',\n    width: '0',\n    transition: 'none',\n  };\n\n  componentWillLoad() {\n    // İlk yüklemede options'ları belirle\n    this.parseOptions();\n\n    // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç\n    if (!this.value && this.options.length > 0) {\n      this.value = this.options[0].value;\n    }\n  }\n\n  componentDidLoad() {\n    // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle\n    this.updateIndicatorPosition(false);\n  }\n\n  componentDidUpdate() {\n    this.updateIndicatorPosition();\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen('bcmOptionClick')\n  handleOptionClick(event: CustomEvent<string>) {\n    if (this.disabled) return;\n\n    const value = event.detail;\n    if (this.value !== value) {\n      this.value = value;\n      this.bcmChange.emit({ value });\n    }\n  }\n\n  private parseOptions() {\n    const slotNodes = Array.from(this.host.children);\n    this.options = slotNodes\n      .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')\n      .map(option => ({\n        value: option.getAttribute('value') || '',\n        label: option.getAttribute('label') || option.textContent || '',\n      }));\n  }\n\n  private updateIndicatorPosition(animate = true) {\n    // Seçili option elemanını bul\n    const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value=\"${this.value}\"]`) as HTMLElement;\n    if (!selectedOption) return;\n\n    // Tüm option'ları seç\n    const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');\n\n    // Seçili option'ın indeksini bul\n    let selectedIndex = -1;\n    for (let i = 0; i < allOptions.length; i++) {\n      if (allOptions[i].getAttribute('value') === this.value) {\n        selectedIndex = i;\n        break;\n      }\n    }\n\n    if (selectedIndex === -1) return;\n\n    // DOM manipülasyonu asenkron olarak yap\n    setTimeout(() => {\n      try {\n        // Seçili option'a kadar olan genişliği hesapla\n        let leftPosition = 0;\n\n        for (let i = 0; i < selectedIndex; i++) {\n          const optionElement = allOptions[i] as HTMLElement;\n          if (optionElement) {\n            leftPosition += optionElement.offsetWidth;\n          }\n        }\n\n        // Seçili option'ın genişliği\n        const selectedWidth = (allOptions[selectedIndex] as HTMLElement).offsetWidth;\n\n        // İndikatör stillerini güncelle\n        this.indicatorStyles = {\n          left: `${leftPosition}px`,\n          width: `${selectedWidth}px`,\n          transition: animate ? 'all 0.2s ease-in-out' : 'none',\n        };\n      } catch (error) {\n        console.error('Error updating indicator position:', error);\n      }\n    }, 10);\n  }\n\n  private segmentedClass = tv(\n    {\n      base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',\n      variants: {\n        size: {\n          small: 'text-size-4',\n          medium: 'text-size-5',\n          large: 'text-size-6',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n        disabled: {\n          true: 'opacity-50 cursor-not-allowed',\n          false: 'cursor-pointer',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        fullWidth: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.segmentedClass({\n            size: this.size,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n          })}\n        >\n          <div class=\"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded\" style={this.indicatorStyles}></div>\n          <div class=\"segmented-options flex relative z-10 w-full\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-segmented-picker.entry.js","sources":["src/components/segmented-picker/segmented-picker.css?tag=bcm-segmented-picker&encapsulation=shadow","src/components/segmented-picker/segmented-picker.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n.segmented-container {\n  border-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n.segmented-indicator {\n  height: 100%;\n  top: 0;\n  border-radius: var(--bcm-ui-border-radius-md, 2px);\n  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n\n.segmented-options {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { SegmentedPickerSize } from './types';\n\n@Component({\n  tag: 'bcm-segmented-picker',\n  styleUrl: 'segmented-picker.css',\n  shadow: true,\n})\nexport class BcmSegmentedPicker {\n  @Element() host: HTMLElement;\n\n  /** Controls the component size */\n  @Prop()\n  size: SegmentedPickerSize = 'medium';\n\n  /** The selected option value */\n  @Prop({ mutable: true, reflect: true })\n  value?: string;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Full width component */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Change event */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<{ value: string }>;\n\n  @State() options: Array<{ value: string; label: string }> = [];\n  @State() indicatorStyles: { left: string; width: string; transition: string } = {\n    left: '0',\n    width: '0',\n    transition: 'none',\n  };\n\n  componentWillLoad() {\n    // İlk yüklemede options'ları belirle\n    this.parseOptions();\n\n    // Eğer value belirtilmemişse ve options varsa, ilk option'ı seç\n    if (!this.value && this.options.length > 0) {\n      this.value = this.options[0].value;\n    }\n  }\n\n  componentDidLoad() {\n    // DOM yüklendikten sonra sadece gösterge pozisyonunu güncelle\n    this.updateIndicatorPosition(false);\n  }\n\n  componentDidUpdate() {\n    this.updateIndicatorPosition();\n  }\n\n  @Watch('value')\n  valueChanged() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen('bcmOptionClick')\n  handleOptionClick(event: CustomEvent<string>) {\n    if (this.disabled) return;\n\n    const value = event.detail;\n    if (this.value !== value) {\n      this.value = value;\n      this.bcmChange.emit({ value });\n    }\n  }\n\n  private parseOptions() {\n    const slotNodes = Array.from(this.host.children);\n    this.options = slotNodes\n      .filter(node => node.nodeName.toLowerCase() === 'bcm-segmented-picker-option')\n      .map(option => ({\n        value: option.getAttribute('value') || '',\n        label: option.getAttribute('label') || option.textContent || '',\n      }));\n  }\n\n  private updateIndicatorPosition(animate = true) {\n    // Seçili option elemanını bul\n    const selectedOption = this.host.querySelector(`bcm-segmented-picker-option[value=\"${this.value}\"]`) as HTMLElement;\n    if (!selectedOption) return;\n\n    // Tüm option'ları seç\n    const allOptions = this.host.querySelectorAll('bcm-segmented-picker-option');\n\n    // Seçili option'ın indeksini bul\n    let selectedIndex = -1;\n    for (let i = 0; i < allOptions.length; i++) {\n      if (allOptions[i].getAttribute('value') === this.value) {\n        selectedIndex = i;\n        break;\n      }\n    }\n\n    if (selectedIndex === -1) return;\n\n    // DOM manipülasyonu asenkron olarak yap\n    setTimeout(() => {\n      try {\n        // Seçili option'a kadar olan genişliği hesapla\n        let leftPosition = 0;\n\n        for (let i = 0; i < selectedIndex; i++) {\n          const optionElement = allOptions[i] as HTMLElement;\n          if (optionElement) {\n            leftPosition += optionElement.offsetWidth;\n          }\n        }\n\n        // Seçili option'ın genişliği\n        const selectedWidth = (allOptions[selectedIndex] as HTMLElement).offsetWidth;\n\n        // İndikatör stillerini güncelle\n        this.indicatorStyles = {\n          left: `${leftPosition}px`,\n          width: `${selectedWidth}px`,\n          transition: animate ? 'all 0.2s ease-in-out' : 'none',\n        };\n      } catch (error) {\n        console.error('Error updating indicator position:', error);\n      }\n    }, 10);\n  }\n\n  private segmentedClass = tv(\n    {\n      base: 'segmented-container bcm-ui-element inline-flex relative bg-[--bcm-ui-color-background-default-default] border border-solid border-[--bcm-ui-color-border-default] rounded overflow-hidden',\n      variants: {\n        size: {\n          small: 'text-size-4',\n          medium: 'text-size-5',\n          large: 'text-size-6',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n        disabled: {\n          true: 'opacity-50 cursor-not-allowed',\n          false: 'cursor-pointer',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        fullWidth: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.segmentedClass({\n            size: this.size,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n          })}\n        >\n          <div class=\"segmented-indicator absolute bg-[--bcm-ui-color-background-base-default] z-0 rounded\" style={this.indicatorStyles}></div>\n          <div class=\"segmented-options flex relative z-10 w-full\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-shortcut.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h } from './index-CrZxEeDA.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+
+const shortcutCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.block{display:block}.h-fit{height:fit-content}.w-fit{width:fit-content}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.text-color-default{color:var(--bcm-ui-color-text-default)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+
+const osKeys = {
+    ctrl: '⌘',
+    alt: '⌥',
+    shift: '⇧',
+    del: '⌫',
+    delete: '⌫',
+    backspace: '⌦',
+    enter: '⏎',
+    return: '⏎',
+};
+const BcmShortcut = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 'small';
+        this.isMac = /Mac/.test(window.navigator.userAgent);
+    }
+    getHotkey(key) {
+        if (!key) {
+            return '';
+        }
+        if (this.isMac && (key.includes(' ') || key.includes('+'))) {
+            const keys = key.split(/[\s+]+/);
+            return keys.map(k => osKeys[k] || k).join('');
+        }
+        else {
+            return key;
+        }
+    }
+    render() {
+        const { size, hotkey } = this;
+        return (h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
+                'text-size-2': size === 'small',
+                'text-size-3': size === 'medium',
+                'text-size-4': size === 'large',
+            }) }, this.getHotkey(hotkey)));
+    }
+};
+BcmShortcut.style = shortcutCss;
+
+export { BcmShortcut as bcm_shortcut };
+//# sourceMappingURL=bcm-shortcut.entry.js.map
+
+//# sourceMappingURL=bcm-shortcut.entry.js.map

package/dist/esm/bcm-shortcut.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-shortcut.entry.js","sources":["src/components/shortcut/shortcut.css?tag=bcm-shortcut&encapsulation=shadow","src/components/shortcut/shortcut.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport cs from 'classnames';\n\nconst osKeys = {\n  ctrl: '⌘',\n  alt: '⌥',\n  shift: '⇧',\n  del: '⌫',\n  delete: '⌫',\n  backspace: '⌦',\n  enter: '⏎',\n  return: '⏎',\n};\n\n@Component({\n  tag: 'bcm-shortcut',\n  styleUrl: './shortcut.css',\n  shadow: true,\n})\nexport class BcmShortcut implements ComponentInterface {\n  @Prop() hotkey: string;\n  @Prop() size: 'small' | 'medium' | 'large' = 'small';\n\n  private readonly isMac = /Mac/.test(window.navigator.userAgent);\n\n  getHotkey(key: string): string {\n    if (!key) {\n      return '';\n    }\n    if (this.isMac && (key.includes(' ') || key.includes('+'))) {\n      const keys = key.split(/[\\s+]+/);\n      return keys.map(k => osKeys[k] || k).join('');\n    } else {\n      return key;\n    }\n  }\n\n  render() {\n    const { size, hotkey } = this;\n\n    return (\n      <div\n        class={cs(\n          'bcm-ui-element bcm-ui-content-display',\n          'block h-fit w-fit rounded border border-solid px-1',\n          'border-color-default bg-color-default text-color-default',\n          'text-center font-medium capitalize',\n          {\n            'text-size-2': size === 'small',\n            'text-size-3': size === 'medium',\n            'text-size-4': size === 'large',\n          },\n        )}\n      >\n        {this.getHotkey(hotkey)}\n      </div>\n    );\n  }\n}\n"],"names":["cs"],"mappings":";;;AAAA,MAAM,WAAW,GAAG,ksCAAksC;;ACGttC,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;CACZ;MAOY,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAiC,OAAO;AAEnC,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC;AAmChE;AAjCC,IAAA,SAAS,CAAC,GAAW,EAAA;QACnB,IAAI,CAAC,GAAG,EAAE;AACR,YAAA,OAAO,EAAE;;QAEX,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;YAC1D,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;aACxC;AACL,YAAA,OAAO,GAAG;;;IAId,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;QAE7B,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAEA,UAAE,CACP,uCAAuC,EACvC,oDAAoD,EACpD,0DAA0D,EAC1D,oCAAoC,EACpC;gBACE,aAAa,EAAE,IAAI,KAAK,OAAO;gBAC/B,aAAa,EAAE,IAAI,KAAK,QAAQ;gBAChC,aAAa,EAAE,IAAI,KAAK,OAAO;aAChC,CACF,EAAA,EAEA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CACnB;;;;;;;"}

package/dist/esm/bcm-switch.entry.js

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-18b75a47.js';
-import { g as generateId } from './generate-id-3b2fcb93.js';
-import { t as tv } from './tv-6dcd2224.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrZxEeDA.js';
+import { g as generateId } from './generate-id-IBjzkjef.js';
+import { t as tv } from './tv-CEcVC0yX.js';
 
 const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--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)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
-const BcmSwitchStyle0 = switchCss;
 
 const BcmSwitch = class {
     constructor(hostRef) {
@@ -177,8 +176,9 @@ const BcmSwitch = class {
     }
     get el() { return getElement(this); }
 };
-BcmSwitch.style = BcmSwitchStyle0;
+BcmSwitch.style = switchCss;
 
 export { BcmSwitch as bcm_switch };
+//# sourceMappingURL=bcm-switch.entry.js.map
 
 //# sourceMappingURL=bcm-switch.entry.js.map

package/dist/esm/bcm-switch.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n  /** Reference to the host element */\n  @Element()\n  el: HTMLElement;\n\n  /** Whether the switch is checked or not */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Whether the switch is disabled */\n  @Prop()\n  disabled: boolean = false;\n\n  /** The name attribute for the hidden input element */\n  @Prop()\n  name: string;\n\n  /** The value attribute for the hidden input element */\n  @Prop()\n  value: string;\n\n  /** Text label for the switch */\n  @Prop()\n  label: string;\n\n  /** Position of the label relative to the switch */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /** Whether to display the switch in an error state */\n  @Prop()\n  error: boolean = false;\n\n  /** Text to display as an error message when error is true */\n  @Prop()\n  caption?: string;\n\n  /** Size variant of the switch */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Whether the switch is in readonly mode */\n  @Prop()\n  readonly: boolean = false;\n\n  /** Whether the switch is required in a form */\n  @Prop()\n  required: boolean = false;\n\n  /** Emitted when the switch state changes */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmSwitchChange: EventEmitter<boolean>;\n\n  private switchId = generateId('switch');\n\n  private toggleSwitch(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.bcmSwitchChange.emit(this.checked);\n  }\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.checked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[18px]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: {\n          label: '',\n        },\n        right: {\n          label: 'order-2',\n        },\n      },\n      checked: {\n        true: {\n          dot: '',\n        },\n        false: {\n          dot: 'left-0.5',\n        },\n      },\n      disabled: {\n        true: '',\n        false: {\n          switchWrapper: '',\n        },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        size: 'small',\n        checked: true,\n        class: {\n          dot: 'left-[18px]',\n        },\n      },\n      {\n        size: 'medium',\n        checked: true,\n        class: {\n          dot: 'left-[20px]',\n        },\n      },\n      {\n        size: 'large',\n        checked: true,\n        class: {\n          dot: 'left-[22px]',\n        },\n      },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      'role': 'switch',\n      'aria-checked': this.checked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()}>\n        <label class={switchWrapper()} style={this.switchStyle()}>\n          <input\n            id={this.switchId}\n            type=\"checkbox\"\n            class=\"hidden peer\"\n            checked={this.checked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            onChange={() => this.toggleSwitch()}\n          />\n\n          {this.label && (\n            <span class={label()}>\n              <slot>{this.label}</slot>\n            </span>\n          )}\n          <label\n            htmlFor={this.switchId}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()}></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"bcm-switch.entry.js","sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n  tag: 'bcm-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n  /** Reference to the host element */\n  @Element()\n  el: HTMLElement;\n\n  /** Whether the switch is checked or not */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /** Whether the switch is disabled */\n  @Prop()\n  disabled: boolean = false;\n\n  /** The name attribute for the hidden input element */\n  @Prop()\n  name: string;\n\n  /** The value attribute for the hidden input element */\n  @Prop()\n  value: string;\n\n  /** Text label for the switch */\n  @Prop()\n  label: string;\n\n  /** Position of the label relative to the switch */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /** Whether to display the switch in an error state */\n  @Prop()\n  error: boolean = false;\n\n  /** Text to display as an error message when error is true */\n  @Prop()\n  caption?: string;\n\n  /** Size variant of the switch */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Whether the switch is in readonly mode */\n  @Prop()\n  readonly: boolean = false;\n\n  /** Whether the switch is required in a form */\n  @Prop()\n  required: boolean = false;\n\n  /** Emitted when the switch state changes */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmSwitchChange: EventEmitter<boolean>;\n\n  private switchId = generateId('switch');\n\n  private toggleSwitch(): void {\n    if (this.disabled || this.readonly) return;\n    this.checked = !this.checked;\n    this.bcmSwitchChange.emit(this.checked);\n  }\n\n  private switchStyle = () => {\n    const defaultStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n    };\n\n    const checkedStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n    };\n\n    const readonlyStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n    };\n\n    const disabledStyle = {\n      '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n      '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n    };\n\n    return {\n      ...defaultStyle,\n      ...(this.checked && checkedStyle),\n      ...(this.error && errorStyle),\n      ...(this.readonly && readonlyStyle),\n      ...(this.disabled && disabledStyle),\n    };\n  };\n\n  private switchClass = tv({\n    slots: {\n      base: 'bcm-ui-element flex flex-col',\n      switchWrapper: 'flex items-center group',\n      dotContainer:\n        'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n      dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n      caption: '!text-color-error font-normal',\n      label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n    },\n    variants: {\n      size: {\n        small: {\n          dotContainer: 'w-8 h-4',\n          dot: 'size-3',\n          label: 'text-size-4',\n          caption: 'text-size-3',\n          switchWrapper: 'gap-2',\n          base: 'gap-0.5',\n        },\n        medium: {\n          dotContainer: 'w-9 h-[18px]',\n          dot: 'size-3.5',\n          label: 'text-size-5',\n          caption: 'text-size-4',\n          switchWrapper: 'gap-2.5',\n          base: 'gap-1',\n        },\n        large: {\n          dotContainer: 'w-10 h-5',\n          dot: 'size-4',\n          label: 'text-size-6',\n          caption: 'text-size-5',\n          switchWrapper: 'gap-3',\n          base: 'gap-2',\n        },\n      },\n      labelPosition: {\n        left: {\n          label: '',\n        },\n        right: {\n          label: 'order-2',\n        },\n      },\n      checked: {\n        true: {\n          dot: '',\n        },\n        false: {\n          dot: 'left-0.5',\n        },\n      },\n      disabled: {\n        true: '',\n        false: {\n          switchWrapper: '',\n        },\n      },\n      readonly: {\n        true: {\n          switchWrapper: 'cursor-default',\n          dotContainer: 'cursor-default',\n          dot: 'cursor-default',\n        },\n        false: {\n          switchWrapper: 'cursor-pointer',\n          dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        size: 'small',\n        checked: true,\n        class: {\n          dot: 'left-[18px]',\n        },\n      },\n      {\n        size: 'medium',\n        checked: true,\n        class: {\n          dot: 'left-[20px]',\n        },\n      },\n      {\n        size: 'large',\n        checked: true,\n        class: {\n          dot: 'left-[22px]',\n        },\n      },\n      {\n        readonly: false,\n        disabled: false,\n        class: {\n          dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n        },\n      },\n    ],\n  });\n\n  render() {\n    const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n      size: this.size,\n      checked: this.checked,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n      readonly: this.readonly,\n    });\n\n    const ariaAttributes = {\n      'role': 'switch',\n      'aria-checked': this.checked.toString(),\n      'aria-disabled': this.disabled.toString(),\n      'aria-readonly': this.readonly.toString(),\n      ...(this.required && { 'aria-required': 'true' }),\n    };\n\n    const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n    return (\n      <div class={base()}>\n        <label class={switchWrapper()} style={this.switchStyle()}>\n          <input\n            id={this.switchId}\n            type=\"checkbox\"\n            class=\"hidden peer\"\n            checked={this.checked}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            onChange={() => this.toggleSwitch()}\n          />\n\n          {this.label && (\n            <span class={label()}>\n              <slot>{this.label}</slot>\n            </span>\n          )}\n          <label\n            htmlFor={this.switchId}\n            class={dotContainer()}\n            {...tabIndexAttr}\n            {...ariaAttributes}\n            onKeyDown={event => {\n              if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                event.preventDefault();\n                this.toggleSwitch();\n              }\n            }}\n          >\n            <div class={dot()}></div>\n          </label>\n        </label>\n\n        {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n        <slot name=\"caption\"></slot>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}