le-kit 0.1.15 → 0.1.16

package/dist/components/le-segmented-control.js.map

@@ -1 +1 @@
-{"file":"le-segmented-control.js","mappings":"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","names":["LeSegmentedControl","__stencil_proxyCustomElement"],"sources":["src/components/le-segmented-control/le-segmented-control.css?tag=le-segmented-control&encapsulation=shadow","src/components/le-segmented-control/le-segmented-control.tsx"],"sourcesContent":["/**\n * le-segmented-control - Default mode styles\n */\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  --le-segmented-control-bg: var(--le-color-background-secondary);\n  --le-segmented-control-padding: var(--le-spacing-1);\n}\n:host([full-width]) {\n  width: 100%;\n}\n:host(.overflow-visible) {\n  max-width: none;\n}\n\n.le-segmented-control {\n  flex-direction: row;\n  white-space: nowrap;\n  border: none;\n  gap: 0;\n  background-color: var(--le-segmented-control-bg);\n  border-radius: calc(var(--le-radius-md) + var(--le-segmented-control-padding));\n  padding: var(--le-segmented-control-padding);\n}\n\n.le-segmented-control.overflow-auto {\n  overflow: auto;\n}\n.le-segmented-control.overflow-hidden {\n  overflow: hidden;\n}\n.le-segmented-control.overflow-visible {\n  overflow: visible;\n}\n.le-segmented-control.overflow-scroll {\n  overflow: scroll;\n}\n\n.le-segmented-control.full-width {\n  display: flex;\n  width: 100%;\n  width: calc(100% - var(--le-segmented-control-padding) * 2);\n}\n\n.le-segmented-control.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.le-segmented-control:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n/* ============================================\n * SEGMENT BUTTON\n * ============================================ */\n\n.full-width .segment {\n  flex: 1;\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--le-focus-ring-color, var(--le-color-primary));\n  outline-offset: 2px;\n}\n\n.segment-active {\n  color: var(--le-segmented-text-color-active, var(--le-text-primary));\n}\n\n.segment-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\ninterface SegmentConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n}\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n  panel?: HTMLElement & { setActive: (active: boolean) => Promise<void> };\n}\n\n/**\n * A segmented control component (iOS-style toggle buttons).\n *\n * Perfect for toggling between a small set of related options.\n *\n * @cssprop --le-segmented-bg - Background color of the control\n * @cssprop --le-segmented-padding - Padding around segments\n * @cssprop --le-segmented-gap - Gap between segments\n * @cssprop --le-segmented-radius - Border radius of the control\n *\n * @csspart container - The main container\n * @csspart segment - Individual segment buttons\n * @csspart segment-active - The currently active segment\n *\n * @cmsEditable true\n * @cmsCategory Form\n */\n@Component({\n  tag: 'le-segmented-control',\n  styleUrl: 'le-segmented-control.css',\n  shadow: true,\n})\nexport class LeSegmentedControl {\n  @Element() el: HTMLElement;\n\n  private containerRef?: HTMLElement;\n\n  /**\n   * Array of options for the segmented control.\n   */\n  @Prop() options: LeOption[] = [];\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Size of the control.\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Scroll behavior for overflowing tabs.\n   * @allowedValues auto | hidden | visible | scroll\n   */\n  @Prop() overflow: 'auto' | 'hidden' | 'visible' | 'scroll' = 'auto';\n\n  /**\n   * Whether the control should take full width.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the control is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private segmentConfigs: SegmentConfig[] = [];\n\n  /**\n   * Internal state for focused index (keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Whether we're using declarative mode (le-tab children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\n\n  /**\n   * Emitted when the selection changes.\n   */\n  @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n  private mutationObserver?: MutationObserver;\n\n  @Watch('options')\n  tabsChanged() {\n    if (!this.isDeclarativeMode) {\n      this.buildSegmentsConfigs();\n    }\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.buildSegmentsConfigs();\n  }\n\n  componentWillLoad() {\n    this.buildSegmentsConfigs();\n    if (this.value === undefined && this.options.length > 0) {\n      const firstEnabled = this.options.find(opt => !opt.disabled);\n      if (firstEnabled) {\n        this.value = this.getOptionValue(firstEnabled);\n      }\n    }\n    if (this.value !== undefined) {\n      const index = this.getOptionIndex(this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  connectedCallback() {\n    // Watch for dynamic changes to children\n    this.mutationObserver = new MutationObserver(() => {\n      this.buildSegmentsConfigs();\n    });\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async buildSegmentsConfigs() {\n    // Check for le-tab children\n    const segments = Array.from(this.el.querySelectorAll(':scope > le-tab')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (segments.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const segment of segments) {\n        const config = await segment.getTabConfig();\n        configs.push({ ...config });\n      }\n\n      this.segmentConfigs = configs;\n    } else if (this.options.length > 0) {\n      // Programmatic mode - use options prop\n      this.isDeclarativeMode = false;\n      this.segmentConfigs = this.options.map(option => ({\n        label: option.label,\n        value: (option.value !== undefined ? option.value : option.label) as string,\n        iconStart: option.iconStart,\n        iconEnd: option.iconEnd,\n        disabled: option.disabled ?? false,\n      }));\n    } else {\n      this.segmentConfigs = [];\n    }\n\n    // Set default selected\n    if (this.value === undefined && this.segmentConfigs.length > 0) {\n      const firstEnabled = this.segmentConfigs.find(t => !t.disabled);\n      if (firstEnabled) {\n        this.value = firstEnabled.value;\n      }\n    }\n\n    // Initialize focused index\n    if (this.value !== undefined) {\n      const index = this.segmentConfigs.findIndex(t => t.value === this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  private getOptionValue(option: LeOption): LeOptionValue {\n    return option.value !== undefined ? option.value : option.label;\n  }\n\n  private getOptionIndex(value: LeOptionValue): number {\n    return this.options.findIndex(opt => this.getOptionValue(opt) === value);\n  }\n\n  private selectOption(option: LeOption) {\n    if (option.disabled || this.disabled) return;\n\n    const value = this.getOptionValue(option);\n    this.value = value;\n\n    // update focused index\n    const index = this.segmentConfigs.findIndex(seg => seg.value === value);\n    if (index >= 0) {\n      this.focusedIndex = index;\n    }\n\n    this.leChange.emit({ value, option });\n  }\n\n  private handleClick = (option: LeOption) => {\n    this.selectOption(option);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { segmentConfigs } = this;\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(-1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = this.findFirstEnabled();\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = this.findLastEnabled();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (segmentConfigs[this.focusedIndex]) {\n          this.selectOption(segmentConfigs[this.focusedIndex]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.focusedIndex) {\n      this.focusedIndex = newIndex;\n      this.focusSegment(newIndex);\n      if (segmentConfigs[newIndex]) {\n        this.selectOption(segmentConfigs[newIndex]);\n      }\n    }\n  };\n\n  private findNextEnabled(direction: 1 | -1): number {\n    const { segmentConfigs } = this;\n    let index = this.focusedIndex;\n    const length = segmentConfigs.length;\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length;\n      if (!segmentConfigs[index].disabled) {\n        return index;\n      }\n    }\n    return this.focusedIndex;\n  }\n\n  private findFirstEnabled(): number {\n    return this.segmentConfigs.findIndex(opt => !opt.disabled);\n  }\n\n  private findLastEnabled(): number {\n    for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {\n      if (!this.segmentConfigs[i].disabled) return i;\n    }\n    return 0;\n  }\n\n  private focusSegment(index: number) {\n    const container = this.containerRef;\n    const segment = container?.querySelectorAll('.segment')[index] as HTMLElement;\n    segment?.focus();\n  }\n\n  render() {\n    const { segmentConfigs, value, size, fullWidth, disabled } = this;\n\n    const classes = {\n      'le-segmented-control': true,\n      [`size-${size}`]: true,\n      [`overflow-${this.overflow}`]: true,\n      'full-width': fullWidth,\n      'disabled': disabled,\n    };\n\n    return (\n      <Host class={`overflow-${this.overflow}`}>\n        <le-component component=\"le-segmented-control\">\n          <div\n            class={classes}\n            ref={el => (this.containerRef = el)}\n            role=\"radiogroup\"\n            part=\"container\"\n            onKeyDown={this.handleKeyDown}\n            tabIndex={0}\n          >\n            {segmentConfigs.map(option => {\n              const optValue = this.getOptionValue(option);\n              const isSelected = optValue === value;\n              const isDisabled = option.disabled || disabled;\n\n              return (\n                <le-tab\n                  key={optValue}\n                  class=\"segment\"\n                  role=\"radio\"\n                  variant=\"enclosed\"\n                  selected={isSelected}\n                  disabled={isDisabled}\n                  focusable={false}\n                  size={size}\n                  part={isSelected ? 'segment segment-active' : 'segment'}\n                  aria-checked={isSelected ? 'true' : 'false'}\n                  aria-disabled={isDisabled ? 'true' : undefined}\n                  onClick={() => this.handleClick(option)}\n                  iconStart={option.iconStart}\n                  iconEnd={option.iconEnd}\n                >\n                  <span class=\"segment-label\">{option.label}</span>\n                </le-tab>\n              );\n            })}\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-segmented-control.js","mappings":"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","names":["LeSegmentedControl","__stencil_proxyCustomElement"],"sources":["src/components/le-segmented-control/le-segmented-control.css?tag=le-segmented-control&encapsulation=shadow","src/components/le-segmented-control/le-segmented-control.tsx"],"sourcesContent":["/**\n * le-segmented-control - Default mode styles\n */\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  --le-segmented-control-bg: var(--le-color-background-secondary);\n  --le-segmented-control-padding: var(--le-spacing-1);\n}\n:host([full-width]) {\n  width: 100%;\n}\n:host(.overflow-visible) {\n  max-width: none;\n}\n\n.le-segmented-control {\n  flex-direction: row;\n  white-space: nowrap;\n  border: none;\n  gap: 0;\n  background-color: var(--le-segmented-control-bg);\n  border-radius: calc(var(--le-radius-md) + var(--le-segmented-control-padding));\n  padding: var(--le-segmented-control-padding);\n}\n\n.le-segmented-control.overflow-auto {\n  overflow: auto;\n}\n.le-segmented-control.overflow-hidden {\n  overflow: hidden;\n}\n.le-segmented-control.overflow-visible {\n  overflow: visible;\n}\n.le-segmented-control.overflow-scroll {\n  overflow: scroll;\n}\n\n.le-segmented-control.full-width {\n  display: flex;\n  width: 100%;\n  width: calc(100% - var(--le-segmented-control-padding) * 2);\n}\n\n.le-segmented-control.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.le-segmented-control:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n/* ============================================\n * SEGMENT BUTTON\n * ============================================ */\n\n.full-width .segment {\n  flex: 1;\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--le-focus-ring-color, var(--le-color-primary));\n  outline-offset: 2px;\n}\n\n.segment-active {\n  color: var(--le-segmented-text-color-active, var(--le-text-primary));\n}\n\n.segment-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\ninterface SegmentConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n}\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n  panel?: HTMLElement & { setActive: (active: boolean) => Promise<void> };\n}\n\n/**\n * A segmented control component (iOS-style toggle buttons).\n *\n * Perfect for toggling between a small set of related options.\n *\n * @cssprop --le-segmented-bg - Background color of the control\n * @cssprop --le-segmented-padding - Padding around segments\n * @cssprop --le-segmented-gap - Gap between segments\n * @cssprop --le-segmented-radius - Border radius of the control\n *\n * @csspart container - The main container\n * @csspart segment - Individual segment buttons\n * @csspart segment-active - The currently active segment\n *\n * @cmsEditable true\n * @cmsCategory Form\n */\n@Component({\n  tag: 'le-segmented-control',\n  styleUrl: 'le-segmented-control.css',\n  shadow: true,\n})\nexport class LeSegmentedControl {\n  @Element() el: HTMLElement;\n\n  private containerRef?: HTMLElement;\n\n  /**\n   * Array of options for the segmented control.\n   */\n  @Prop() options: LeOption[] = [];\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Size of the control.\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Scroll behavior for overflowing tabs.\n   * @allowedValues auto | hidden | visible | scroll\n   */\n  @Prop() overflow: 'auto' | 'hidden' | 'visible' | 'scroll' = 'auto';\n\n  /**\n   * Whether the control should take full width.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the control is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private segmentConfigs: SegmentConfig[] = [];\n\n  /**\n   * Internal state for focused index (keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Whether we're using declarative mode (le-tab children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\n\n  /**\n   * Emitted when the selection changes.\n   */\n  @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n  private mutationObserver?: MutationObserver;\n\n  @Watch('options')\n  tabsChanged() {\n    if (!this.isDeclarativeMode) {\n      this.buildSegmentsConfigs();\n    }\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.buildSegmentsConfigs();\n  }\n\n  componentWillLoad() {\n    this.buildSegmentsConfigs();\n    if (this.value === undefined && this.options.length > 0) {\n      const firstEnabled = this.options.find(opt => !opt.disabled);\n      if (firstEnabled) {\n        this.value = this.getOptionValue(firstEnabled);\n      }\n    }\n    if (this.value !== undefined) {\n      const index = this.getOptionIndex(this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  connectedCallback() {\n    // Watch for dynamic changes to children\n    this.mutationObserver = new MutationObserver(() => {\n      this.buildSegmentsConfigs();\n    });\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async buildSegmentsConfigs() {\n    // Check for le-tab children\n    const segments = Array.from(this.el.querySelectorAll(':scope > le-tab')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (segments.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const segment of segments) {\n        const config = await segment.getTabConfig();\n        configs.push({ ...config });\n      }\n\n      this.segmentConfigs = configs;\n    } else if (this.options.length > 0) {\n      // Programmatic mode - use options prop\n      this.isDeclarativeMode = false;\n      this.segmentConfigs = this.options.map(option => ({\n        label: option.label,\n        value: (option.value !== undefined ? option.value : option.label) as string,\n        iconStart: option.iconStart,\n        iconEnd: option.iconEnd,\n        disabled: option.disabled ?? false,\n      }));\n    } else {\n      this.segmentConfigs = [];\n    }\n\n    // Set default selected\n    if (this.value === undefined && this.segmentConfigs.length > 0) {\n      const firstEnabled = this.segmentConfigs.find(t => !t.disabled);\n      if (firstEnabled) {\n        this.value = firstEnabled.value;\n      }\n    }\n\n    // Initialize focused index\n    if (this.value !== undefined) {\n      const index = this.segmentConfigs.findIndex(t => t.value === this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  private getOptionValue(option: LeOption): LeOptionValue {\n    return option.value !== undefined ? option.value : option.label;\n  }\n\n  private getOptionIndex(value: LeOptionValue): number {\n    return this.options.findIndex(opt => this.getOptionValue(opt) === value);\n  }\n\n  private selectOption(option: LeOption) {\n    if (option.disabled || this.disabled) return;\n\n    const value = this.getOptionValue(option);\n    this.value = value;\n\n    // update focused index\n    const index = this.segmentConfigs.findIndex(seg => seg.value === value);\n    if (index >= 0) {\n      this.focusedIndex = index;\n    }\n\n    this.leChange.emit({ value, option });\n  }\n\n  private handleClick = (option: LeOption) => {\n    this.selectOption(option);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { segmentConfigs } = this;\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(-1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = this.findFirstEnabled();\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = this.findLastEnabled();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (segmentConfigs[this.focusedIndex]) {\n          this.selectOption(segmentConfigs[this.focusedIndex]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.focusedIndex) {\n      this.focusedIndex = newIndex;\n      this.focusSegment(newIndex);\n      if (segmentConfigs[newIndex]) {\n        this.selectOption(segmentConfigs[newIndex]);\n      }\n    }\n  };\n\n  private findNextEnabled(direction: 1 | -1): number {\n    const { segmentConfigs } = this;\n    let index = this.focusedIndex;\n    const length = segmentConfigs.length;\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length;\n      if (!segmentConfigs[index].disabled) {\n        return index;\n      }\n    }\n    return this.focusedIndex;\n  }\n\n  private findFirstEnabled(): number {\n    return this.segmentConfigs.findIndex(opt => !opt.disabled);\n  }\n\n  private findLastEnabled(): number {\n    for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {\n      if (!this.segmentConfigs[i].disabled) return i;\n    }\n    return 0;\n  }\n\n  private focusSegment(index: number) {\n    const container = this.containerRef;\n    const segment = container?.querySelectorAll('.segment')[index] as HTMLElement;\n    segment?.focus();\n  }\n\n  render() {\n    const { segmentConfigs, value, size, fullWidth, disabled } = this;\n\n    const classes = {\n      'le-segmented-control': true,\n      [`size-${size}`]: true,\n      [`overflow-${this.overflow}`]: true,\n      'full-width': fullWidth,\n      'disabled': disabled,\n    };\n\n    return (\n      <Host class={`overflow-${this.overflow}`}>\n        <le-component component=\"le-segmented-control\">\n          <div\n            class={classes}\n            ref={el => (this.containerRef = el)}\n            role=\"radiogroup\"\n            part=\"container\"\n            onKeyDown={this.handleKeyDown}\n            tabIndex={0}\n          >\n            {segmentConfigs.map(option => {\n              const optValue = this.getOptionValue(option);\n              const isSelected = optValue === value;\n              const isDisabled = option.disabled || disabled;\n\n              return (\n                <le-tab\n                  key={optValue}\n                  class=\"segment\"\n                  role=\"radio\"\n                  variant=\"enclosed\"\n                  selected={isSelected}\n                  disabled={isDisabled}\n                  focusable={false}\n                  size={size}\n                  part={isSelected ? 'segment segment-active' : 'segment'}\n                  aria-checked={isSelected ? 'true' : 'false'}\n                  aria-disabled={isDisabled ? 'true' : undefined}\n                  onClick={() => this.handleClick(option)}\n                  iconStart={option.iconStart}\n                  iconEnd={option.iconEnd}\n                >\n                  <span class=\"segment-label\">{option.label}</span>\n                </le-tab>\n              );\n            })}\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-select.js

@@ -1,266 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$7, e as defineCustomElement$8, f as defineCustomElement$9 } from './le-button2.js';
-import { d as defineCustomElement$6 } from './le-dropdown-base2.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
-
-const leSelectCss = ":host{display:inline-block;min-width:150px;--le-select-color:var(--le-color-text, #1f2937);--le-select-border-radius:var(--le-radius-md);--le-select-content-padding:var(--le-spacing-2)}:host([disabled]){opacity:0.5;pointer-events:none}:host([full-width]){width:100%}.select-trigger{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0;--le-button-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);font-size:var(--le-select-font-size, 0.875rem);font-family:inherit;line-height:1.4;color:var(--le-select-color);background:var(--le-select-bg, var(--le-color-surface, #fff));border-radius:var(--le-select-border-radius);cursor:pointer;text-align:left;transition:border-color 0.15s ease, box-shadow 0.15s ease}.select-trigger:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.select-trigger:not(.has-value) .trigger-label{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.trigger-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.trigger-icon-end{width:16px;height:16px}.trigger-icon img{width:100%;height:100%;object-fit:contain}.trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--le-color-text)}.trigger-label::not(.has-value){color:var(--le-color-text-disabled, #9ca3af)}le-button::part(icon-end){display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;transition:transform 0.2s ease}le-button::part(icon-end) svg{width:1rem;height:1rem}le-button.is-open::part(icon-end){transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}";
-
-const LeSelect$1 = /*@__PURE__*/ proxyCustomElement(class LeSelect extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.leChange = createEvent(this, "leChange", 7);
-        this.leOpen = createEvent(this, "leOpen", 7);
-        this.leClose = createEvent(this, "leClose", 7);
-    }
-    get el() { return this; }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected value.
-     */
-    value;
-    /**
-     * Placeholder text when no option is selected.
-     */
-    placeholder = 'Select an option';
-    /**
-     * Whether the select is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the select should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the select.
-     */
-    size = 'medium';
-    /**
-     * Visual variant of the select.
-     */
-    variant = 'default';
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * Text to show when no options match the search.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether the dropdown is currently open.
-     */
-    open = false;
-    /**
-     * Emitted when the selected value changes.
-     */
-    leChange;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOption;
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
-    handleValueChange() {
-        this.updateSelectedOption();
-    }
-    handleOptionsChange() {
-        this.updateSelectedOption();
-    }
-    componentWillLoad() {
-        this.updateSelectedOption();
-    }
-    get parsedOptions() {
-        if (typeof this.options === 'string') {
-            try {
-                return JSON.parse(this.options);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.options;
-    }
-    updateSelectedOption() {
-        if (this.value !== undefined) {
-            this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);
-        }
-        else {
-            this.selectedOption = undefined;
-        }
-    }
-    filterOption = (option, query) => {
-        if (!query)
-            return true;
-        const searchLower = query.toLowerCase();
-        return (option.label.toLowerCase().includes(searchLower) ||
-            (option.description?.toLowerCase().includes(searchLower) ?? false));
-    };
-    handleOptionSelect = (e) => {
-        this.value = e.detail.value;
-        this.selectedOption = e.detail.option;
-        this.leChange.emit(e.detail);
-    };
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    /**
-     * Opens the dropdown.
-     */
-    async showDropdown() {
-        await this.dropdownEl?.show();
-    }
-    /**
-     * Closes the dropdown.
-     */
-    async hideDropdown() {
-        await this.dropdownEl?.hide();
-    }
-    renderIcon(icon) {
-        if (!icon)
-            return null;
-        if (icon.startsWith('http') || icon.startsWith('/')) {
-            return h("img", { class: "trigger-icon", src: icon, alt: "" });
-        }
-        return h("span", { class: "trigger-icon" }, icon);
-    }
-    render() {
-        const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: 'c8ce895d257cb8e40f1f4d1181ece5db9c2df9f5', component: "le-select" }, h("le-dropdown-base", { key: 'f8ed2326295860fb658cca0eae4c153a2dbcb833', ref: el => (this.dropdownEl = el), options: this.parsedOptions, value: this.value, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose, fullWidth: this.fullWidth }, h("le-button", { key: 'c72c327bfa5874f55defc08fe8057bb109a4b6c3', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
-                'select-trigger': true,
-                'has-value': hasValue,
-                'is-open': this.open,
-            }, mode: "default", size: this.size, disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, fullWidth: this.fullWidth, iconStart: hasValue && this.selectedOption?.iconStart
-                ? this.renderIcon(this.selectedOption.iconStart)
-                : null, iconEnd: h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M4 6l4 4 4-4" })) }, h("span", { key: '717d9ea1dc386f4adf13aba94c82a1d8f8781c37', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '7833ecb5f569e05e04c606117bf87f82ae5a268c', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'd8f4de77eb3079a11e1d707b74dca43f034ef85d', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: 'caa92c54c78af922c471b1cb327969e83dea195b', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
-    }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }; }
-    static get style() { return leSelectCss; }
-}, [769, "le-select", {
-        "options": [1],
-        "value": [1032],
-        "placeholder": [1],
-        "disabled": [516],
-        "required": [4],
-        "name": [1],
-        "fullWidth": [4, "full-width"],
-        "size": [513],
-        "variant": [513],
-        "searchable": [4],
-        "emptyText": [1, "empty-text"],
-        "open": [1540],
-        "selectedOption": [32],
-        "searchQuery": [32],
-        "showDropdown": [64],
-        "hideDropdown": [64]
-    }, undefined, {
-        "value": ["handleValueChange"],
-        "options": ["handleOptionsChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["le-select", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-slot", "le-string-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "le-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, LeSelect$1);
-            }
-            break;
-        case "le-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "le-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "le-component":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "le-dropdown-base":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "le-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "le-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "le-slot":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "le-string-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { k as LeSelect$1, b as defineCustomElement$1 } from './le-button2.js';
 
 const LeSelect = LeSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/le-select.js.map

@@ -1 +1 @@
-{"file":"le-select.js","mappings":"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","names":["LeSelect","__stencil_proxyCustomElement"],"sources":["src/components/le-select/le-select.css?tag=le-select&encapsulation=shadow","src/components/le-select/le-select.tsx"],"sourcesContent":["/**\n * le-select component styles\n *\n * CSS Custom Properties:\n * --le-select-height\n * --le-select-padding-x\n * --le-select-font-size\n * --le-select-border-radius\n * --le-select-border-color\n * --le-select-bg\n * --le-select-color\n */\n\n:host {\n  display: inline-block;\n  min-width: 150px;\n  --le-select-color: var(--le-color-text, #1f2937);\n  --le-select-border-radius: var(--le-radius-md);\n  --le-select-content-padding: var(--le-spacing-2);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n/* Trigger button */\n.select-trigger {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0;\n  --le-button-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n  font-size: var(--le-select-font-size, 0.875rem);\n  font-family: inherit;\n  line-height: 1.4;\n  color: var(--le-select-color);\n  background: var(--le-select-bg, var(--le-color-surface, #fff));\n  border-radius: var(--le-select-border-radius);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.select-trigger:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n/* Placeholder state */\n.select-trigger:not(.has-value) .trigger-label {\n  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Trigger icon */\n.trigger-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.trigger-icon-end {\n  width: 16px;\n  height: 16px;\n}\n\n.trigger-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Trigger label */\n.trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--le-color-text);\n}\n\n.trigger-label::not(.has-value) {\n  color: var(--le-color-text-disabled, #9ca3af);\n}\n\n/* Arrow icon */\nle-button::part(icon-end) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-left: auto;\n  transition: transform 0.2s ease;\n}\n\nle-button::part(icon-end) svg {\n  width: 1rem;\n  height: 1rem;\n}\n\nle-button.is-open::part(icon-end) {\n  transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n  outline: none !important;\n}\n.search-input {\n  --le-input-radius: var(--le-radius-md);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\n/**\n * A select dropdown component for single selection.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic select\n * ```html\n * <le-select\n *   placeholder=\"Choose an option\"\n *   options='[{\"label\": \"Option 1\", \"value\": \"1\"}, {\"label\": \"Option 2\", \"value\": \"2\"}]'\n * ></le-select>\n * ```\n *\n * @example With icons\n * ```html\n * <le-select\n *   options='[\n *     {\"label\": \"Apple\", \"value\": \"apple\", \"iconStart\": \"🍎\"},\n *     {\"label\": \"Banana\", \"value\": \"banana\", \"iconStart\": \"🍌\"}\n *   ]'\n * ></le-select>\n * ```\n *\n * @example Grouped options\n * ```html\n * <le-select\n *   options='[\n *     {\"label\": \"Apple\", \"value\": \"apple\", \"group\": \"Fruits\"},\n *     {\"label\": \"Carrot\", \"value\": \"carrot\", \"group\": \"Vegetables\"}\n *   ]'\n * ></le-select>\n * ```\n */\n@Component({\n  tag: 'le-select',\n  styleUrl: 'le-select.css',\n  shadow: true,\n})\nexport class LeSelect {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected value.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Placeholder text when no option is selected.\n   */\n  @Prop() placeholder: string = 'Select an option';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the select should take full width of its container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Size variant of the select.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Visual variant of the select.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'outlined' | 'solid' = 'default';\n\n  /**\n   * Whether the input is searchable.\n   */\n  @Prop() searchable: boolean = false;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected value changes.\n   */\n  @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @State() private selectedOption?: LeOption;\n\n  @State() private searchQuery: string = '';\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOption();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private updateSelectedOption() {\n    if (this.value !== undefined) {\n      this.selectedOption = this.parsedOptions.find(opt => (opt.value ?? opt.label) === this.value);\n    } else {\n      this.selectedOption = undefined;\n    }\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query) return true;\n\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    this.value = e.detail.value;\n    this.selectedOption = e.detail.option;\n    this.leChange.emit(e.detail);\n  };\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      setTimeout(() => {\n        this.inputEl?.focus();\n      }, 50);\n    }\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.leClose.emit();\n  };\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.toggle();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  private renderIcon(icon: string | undefined) {\n    if (!icon) return null;\n\n    if (icon.startsWith('http') || icon.startsWith('/')) {\n      return <img class=\"trigger-icon\" src={icon} alt=\"\" />;\n    }\n\n    return <span class=\"trigger-icon\">{icon}</span>;\n  }\n\n  render() {\n    const hasValue = this.selectedOption !== undefined;\n\n    return (\n      <le-component component=\"le-select\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.parsedOptions}\n          value={this.value}\n          disabled={this.disabled}\n          filterFn={this.searchable ? this.filterOption : undefined}\n          filterQuery={this.searchQuery}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n          fullWidth={this.fullWidth}\n        >\n          <le-button\n            variant={this.variant && this.variant !== 'default' ? this.variant : 'outlined'}\n            slot=\"trigger\"\n            align=\"space-between\"\n            class={{\n              'select-trigger': true,\n              'has-value': hasValue,\n              'is-open': this.open,\n            }}\n            mode=\"default\"\n            size={this.size}\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeyDown}\n            fullWidth={this.fullWidth}\n            iconStart={\n              hasValue && this.selectedOption?.iconStart\n                ? this.renderIcon(this.selectedOption.iconStart)\n                : null\n            }\n            iconEnd={\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n              >\n                <path d=\"M4 6l4 4 4-4\" />\n              </svg>\n            }\n          >\n            <span class=\"trigger-label\">\n              {hasValue ? this.selectedOption!.label : this.placeholder}\n            </span>\n          </le-button>\n\n          {/* Search input shown in dropdown header */}\n          {this.searchable && this.open && (\n            <div class=\"multiselect-search\" slot=\"header\">\n              <le-string-input\n                mode=\"default\"\n                inputRef={el => (this.inputEl = el)}\n                class=\"search-input\"\n                placeholder=\"Search...\"\n                value={this.searchQuery}\n                onInput={this.handleSearchInput}\n              />\n            </div>\n          )}\n        </le-dropdown-base>\n\n        {/* Hidden input for form submission */}\n        {this.name && <input type=\"hidden\" name={this.name} value={this.value?.toString() ?? ''} />}\n      </le-component>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-select.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-slot.js

@@ -1,4 +1,4 @@
-import { j as LeSlot$1, a as defineCustomElement$1 } from './le-button2.js';
+import { l as LeSlot$1, a as defineCustomElement$1 } from './le-button2.js';
 
 const LeSlot = LeSlot$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/le-stack.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { h as classnames } from './utils.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$6, e as defineCustomElement$7, f as defineCustomElement$8 } from './le-button2.js';
-import { d as defineCustomElement$5 } from './le-popover2.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, c as defineCustomElement$5, e as defineCustomElement$8, f as defineCustomElement$9, g as defineCustomElement$a } from './le-button2.js';
+import { d as defineCustomElement$7 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$6 } from './le-popover2.js';
 
 const leStackDefaultCss = ":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";
 
@@ -130,7 +131,7 @@ const LeStack$1 = /*@__PURE__*/ proxyCustomElement(class LeStack extends HTMLEle
         });
         // Slot style for admin mode - make items display in the same direction
         const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
-        return (h("le-component", { key: '22c1dddc31186f718f637888580dc13b8f38ae70', component: "le-stack", hostClass: hostClass }, h("div", { key: '68265d4b9999b4c5dac9f53432bebf39f0ab6bf3', class: "stack", part: "stack", style: style }, h("le-slot", { key: '01717eb67627d3dba0c48267e14a52d4424659ad', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, h("slot", { key: 'b846cb2b46ee3240b288f9a5c112ffda3fdb26cc' })))));
+        return (h("le-component", { key: '58d38914e8459297766be58844c271aac0f3b0b5', component: "le-stack", hostClass: hostClass }, h("div", { key: '56ceceb3eac3ec5c6647719d0d47766eb7ba7b5d', class: "stack", part: "stack", style: style }, h("le-slot", { key: '9a75e3f6ae8b05dee32a250d3a4607ff2498c533', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, h("slot", { key: 'e0b9d135ce8cc312bee002ef78772f62d6e0d416' })))));
     }
     static get style() { return leStackDefaultCss; }
 }, [769, "le-stack", {
@@ -150,7 +151,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-stack", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input"];
+    const components = ["le-stack", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input"];
     components.forEach(tagName => { switch (tagName) {
         case "le-stack":
             if (!customElements.get(tagName)) {
@@ -159,25 +160,35 @@ function defineCustomElement$1() {
             break;
         case "le-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "le-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "le-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
             }
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/le-stack.js.map

@@ -1 +1 @@
-{"file":"le-stack.js","mappings":"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","names":["LeStack","__stencil_proxyCustomElement"],"sources":["src/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src/components/le-stack/le-stack.tsx"],"sourcesContent":["/**\n * le-stack default styles\n *\n * The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base stack container */\n.stack {\n  gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/* Full width/height variants */\n:host(.full-width) {\n  width: 100%;\n}\n\n:host(.full-height) {\n  height: 100%;\n}\n\n/* Direction-specific defaults */\n:host(.direction-horizontal) .stack {\n  min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n  min-width: 0;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <le-component component=\"le-stack\" hostClass={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          <le-slot\n            name=\"\"\n            description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n            type=\"slot\"\n            allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n            slotStyle={slotStyle}\n          >\n            <slot></slot>\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-stack.js","mappings":"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","names":["LeStack","__stencil_proxyCustomElement"],"sources":["src/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src/components/le-stack/le-stack.tsx"],"sourcesContent":["/**\n * le-stack default styles\n *\n * The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base stack container */\n.stack {\n  gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/* Full width/height variants */\n:host(.full-width) {\n  width: 100%;\n}\n\n:host(.full-height) {\n  height: 100%;\n}\n\n/* Direction-specific defaults */\n:host(.direction-horizontal) .stack {\n  min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n  min-width: 0;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <le-component component=\"le-stack\" hostClass={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          <le-slot\n            name=\"\"\n            description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n            type=\"slot\"\n            allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n            slotStyle={slotStyle}\n          >\n            <slot></slot>\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-string-input.js

@@ -1,4 +1,4 @@
-import { k as LeStringInput$1, d as defineCustomElement$1 } from './le-button2.js';
+import { m as LeStringInput$1, d as defineCustomElement$1 } from './le-button2.js';
 
 const LeStringInput = LeStringInput$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/le-tab-bar.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$7, e as defineCustomElement$8, f as defineCustomElement$9 } from './le-button2.js';
-import { d as defineCustomElement$6 } from './le-popover2.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$6, e as defineCustomElement$9, f as defineCustomElement$a, g as defineCustomElement$b } from './le-button2.js';
+import { d as defineCustomElement$8 } from './le-dropdown-base2.js';
+import { d as defineCustomElement$7 } from './le-popover2.js';
 import { d as defineCustomElement$2 } from './le-tab2.js';
 
 const leTabBarCss = ":host{display:block;--le-tab-bar-background:var(--le-color-surface);--le-tab-bar-border-color:var(--le-color-border);--le-tab-bar-gap:var(--le-spacing-2);--le-tab-bar-padding-y:var(--le-spacing-2);--le-tab-bar-padding-x:var(--le-spacing-1);background:var(--le-tab-bar-background);padding:var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x)}:host([full-width]){width:100%}:host(.bordered.position-top){border-bottom:1px solid var(--le-tab-bar-border-color)}:host(.bordered.position-bottom){border-top:1px solid var(--le-tab-bar-border-color)}.tablist{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-around;gap:var(--le-tab-bar-gap, var(--le-spacing-1));width:100%}.tab{display:inline-flex;align-items:flex-start;justify-content:space-around;gap:var(--le-spacing-2);position:relative;background:transparent;border:none;cursor:pointer}.tab-disabled{opacity:0.5;cursor:not-allowed}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.tab-description{font-size:var(--le-font-size-xs);font-weight:var(--le-font-weight-normal);color:var(--le-text-tertiary);margin-left:var(--le-spacing-1)}";
@@ -230,7 +231,7 @@ const LeTabBar$1 = /*@__PURE__*/ proxyCustomElement(class LeTabBar extends HTMLE
             'position-top': this.position === 'top',
             'position-bottom': this.position === 'bottom',
         };
-        return (h(Host, { key: 'b913efc2f45e99a3583669bd764f479e5a8416c1', class: classes }, h("le-component", { key: '9f92556397b99fdff699e531e68f597da8785681', component: "le-tab-bar" }, h("div", { key: '6eafe2b34e685c20d5c20d8d6889edbb5f930b5a', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, h("le-slot", { key: '24e16c8d60e14830ced461c301700178f1a60f3f', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
+        return (h(Host, { key: 'ab97582e8f936fc6617b1034c325bd6fbbf97f12', class: classes }, h("le-component", { key: '9dcabb60dce5600876ae7cc03afa348adf188cdd', component: "le-tab-bar" }, h("div", { key: 'd38a1ad9942045d3fcd0f5eaf84f221c7e34c21a', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, h("le-slot", { key: 'cd8da212dd2c4baa2beea2168ed6431b8748297f', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
             const value = this.getTabValue(tab);
             const isSelected = value === selected;
             return (h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, h("span", { class: "tab-label" }, tab.label)));
@@ -260,7 +261,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["le-tab-bar", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input", "le-tab"];
+    const components = ["le-tab-bar", "le-button", "le-checkbox", "le-component", "le-dropdown-base", "le-popover", "le-popup", "le-select", "le-slot", "le-string-input", "le-tab"];
     components.forEach(tagName => { switch (tagName) {
         case "le-tab-bar":
             if (!customElements.get(tagName)) {
@@ -269,25 +270,35 @@ function defineCustomElement$1() {
             break;
         case "le-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "le-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "le-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
+            }
+            break;
+        case "le-dropdown-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "le-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }