le-kit 0.5.2 → 0.5.3

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

@@ -17,51 +17,83 @@ import { h, Host, } from "@stencil/core";
  * @cmsCategory Form
  */
 export class LeSegmentedControl {
-    el;
-    containerRef;
-    /**
-     * Array of options for the segmented control.
-     */
-    options = [];
-    /**
-     * The value of the currently selected option.
-     */
-    value;
-    /**
-     * Size of the control.
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Scroll behavior for overflowing tabs.
-     * @allowedValues auto | hidden | visible | scroll
-     */
-    overflow = 'auto';
-    /**
-     * Whether the control should take full width.
-     */
-    fullWidth = false;
-    /**
-     * Whether the control is disabled.
-     */
-    disabled = false;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    segmentConfigs = [];
-    /**
-     * Internal state for focused index (keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Whether we're using declarative mode (le-tab children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Emitted when the selection changes.
-     */
-    leChange;
-    mutationObserver;
+    constructor() {
+        /**
+         * Array of options for the segmented control.
+         */
+        this.options = [];
+        /**
+         * Size of the control.
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Scroll behavior for overflowing tabs.
+         * @allowedValues auto | hidden | visible | scroll
+         */
+        this.overflow = 'auto';
+        /**
+         * Whether the control should take full width.
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the control is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Internal tab configurations (built from children or tabs prop)
+         */
+        this.segmentConfigs = [];
+        /**
+         * Internal state for focused index (keyboard navigation)
+         */
+        this.focusedIndex = 0;
+        /**
+         * Whether we're using declarative mode (le-tab children)
+         */
+        this.isDeclarativeMode = false;
+        this.handleClick = (option) => {
+            this.selectOption(option);
+        };
+        this.handleKeyDown = (event) => {
+            const { segmentConfigs } = this;
+            let newIndex = this.focusedIndex;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    newIndex = this.findNextEnabled(-1);
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    newIndex = this.findNextEnabled(1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newIndex = this.findFirstEnabled();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newIndex = this.findLastEnabled();
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    if (segmentConfigs[this.focusedIndex]) {
+                        this.selectOption(segmentConfigs[this.focusedIndex]);
+                    }
+                    return;
+                default:
+                    return;
+            }
+            if (newIndex !== this.focusedIndex) {
+                this.focusedIndex = newIndex;
+                this.focusSegment(newIndex);
+                if (segmentConfigs[newIndex]) {
+                    this.selectOption(segmentConfigs[newIndex]);
+                }
+            }
+        };
+    }
     tabsChanged() {
         if (!this.isDeclarativeMode) {
             this.buildSegmentsConfigs();
@@ -159,47 +191,6 @@ export class LeSegmentedControl {
         }
         this.leChange.emit({ value, option });
     }
-    handleClick = (option) => {
-        this.selectOption(option);
-    };
-    handleKeyDown = (event) => {
-        const { segmentConfigs } = this;
-        let newIndex = this.focusedIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                newIndex = this.findNextEnabled(-1);
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                newIndex = this.findNextEnabled(1);
-                break;
-            case 'Home':
-                event.preventDefault();
-                newIndex = this.findFirstEnabled();
-                break;
-            case 'End':
-                event.preventDefault();
-                newIndex = this.findLastEnabled();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (segmentConfigs[this.focusedIndex]) {
-                    this.selectOption(segmentConfigs[this.focusedIndex]);
-                }
-                return;
-            default:
-                return;
-        }
-        if (newIndex !== this.focusedIndex) {
-            this.focusedIndex = newIndex;
-            this.focusSegment(newIndex);
-            if (segmentConfigs[newIndex]) {
-                this.selectOption(segmentConfigs[newIndex]);
-            }
-        }
-    };
     findNextEnabled(direction) {
         const { segmentConfigs } = this;
         let index = this.focusedIndex;
@@ -236,7 +227,7 @@ export class LeSegmentedControl {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (h(Host, { key: 'dfe7d637e07af470756a57e8878e455c472a2790', class: `overflow-${this.overflow}` }, h("le-component", { key: '5ffa309951b8f509fe0b0db09a9273256ec5a1b5', component: "le-segmented-control" }, h("div", { key: 'a448e9be4011230c689a4bab5963f1588496c1ba', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (h(Host, { key: 'dd580b3e3f6ca9fc5d8316978f0fcd77832d562f', class: `overflow-${this.overflow}` }, h("le-component", { key: 'baf3bf0005cdb4678eac78b73f3c7140ba631159', component: "le-segmented-control" }, h("div", { key: 'bc78e64043731781fddb107321c22187314f20c0', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
             const optValue = this.getOptionValue(option);
             const isSelected = optValue === value;
             const isDisabled = option.disabled || disabled;

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

@@ -1 +1 @@
-{"version":3,"file":"le-segmented-control.js","sourceRoot":"","sources":["../../../src/components/le-segmented-control/le-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/le-segmented-control/le-segmented-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EACL,KAAK,EAEL,CAAC,EACD,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAoBvB;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,kBAAkB;IAL/B;QAUE;;WAEG;QACK,YAAO,GAAe,EAAE,CAAC;QAOjC;;;WAGG;QACK,SAAI,GAAiC,QAAQ,CAAC;QAEtD;;;WAGG;QACK,aAAQ,GAA6C,MAAM,CAAC;QAEpE;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACc,mBAAc,GAAoB,EAAE,CAAC;QAEtD;;WAEG;QACc,iBAAY,GAAW,CAAC,CAAC;QAE1C;;WAEG;QACc,sBAAiB,GAAY,KAAK,CAAC;QA+H5C,gBAAW,GAAG,CAAC,MAAgB,EAAE,EAAE;YACzC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;YAChC,IAAI,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;YAEjC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,WAAW;oBACd,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;oBACpC,MAAM;gBACR,KAAK,YAAY;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;oBACnC,MAAM;gBACR,KAAK,MAAM;oBACT,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACnC,MAAM;gBACR,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;oBAClC,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb,KAAK,GAAG;oBACN,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;wBACtC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;oBACvD,CAAC;oBACD,OAAO;gBACT;oBACE,OAAO;YACX,CAAC;YAED,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;gBACnC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;gBAC5B,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC7B,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAsFH;IAtPC,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC7D,IAAI,YAAY,EAAE,CAAC;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,wCAAwC;QACxC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACrC,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAEO,KAAK,CAAC,oBAAoB;QAChC,4BAA4B;QAC5B,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAKtE,CAAC;QAEF,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,yCAAyC;YACzC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,MAAM,OAAO,GAAgB,EAAE,CAAC;YAEhC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;gBAC/B,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,YAAY,EAAE,CAAC;gBAC5C,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;YAC9B,CAAC;YAED,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;QAChC,CAAC;aAAM,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnC,uCAAuC;YACvC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChD,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAW;gBAC3E,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC3B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK;aACnC,CAAC,CAAC,CAAC;QACN,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QAC3B,CAAC;QAED,uBAAuB;QACvB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAChE,IAAI,YAAY,EAAE,CAAC;gBACjB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAClC,CAAC;QACH,CAAC;QAED,2BAA2B;QAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;YACzE,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,MAAgB;QACrC,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAClE,CAAC;IAEO,cAAc,CAAC,KAAoB;QACzC,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;IAC3E,CAAC;IAEO,YAAY,CAAC,MAAgB;QACnC,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE7C,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,uBAAuB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QACxE,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IACxC,CAAC;IA+CO,eAAe,CAAC,SAAiB;QACvC,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;QAErC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;YAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACpC,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAEO,eAAe;QACrB,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,QAAQ;gBAAE,OAAO,CAAC,CAAC;QACjD,CAAC;QACD,OAAO,CAAC,CAAC;IACX,CAAC;IAEO,YAAY,CAAC,KAAa;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QACpC,MAAM,OAAO,GAAG,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,KAAK,CAAgB,CAAC;QAC9E,OAAO,EAAE,KAAK,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAElE,MAAM,OAAO,GAAG;YACd,sBAAsB,EAAE,IAAI;YAC5B,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,IAAI;YACtB,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;YACnC,YAAY,EAAE,SAAS;YACvB,UAAU,EAAE,QAAQ;SACrB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE;YACtC,qEAAc,SAAS,EAAC,sBAAsB;gBAC5C,4DACE,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,CAAC,IAEV,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;oBAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC7C,MAAM,UAAU,GAAG,QAAQ,KAAK,KAAK,CAAC;oBACtC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,IAAI,QAAQ,CAAC;oBAE/C,OAAO,CACL,cACE,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,SAAS,kBACzC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EACvC,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,MAAM,CAAC,OAAO;wBAEvB,YAAM,KAAK,EAAC,eAAe,IAAE,MAAM,CAAC,KAAK,CAAQ,CAC1C,CACV,CAAC;gBACJ,CAAC,CAAC,CACE,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -34,71 +34,92 @@ import { h, } from "@stencil/core";
  * ```
  */
 export class LeSelect {
-    el;
-    /**
-     * 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;
+    constructor() {
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * Placeholder text when no option is selected.
+         */
+        this.placeholder = 'Select an option';
+        /**
+         * Whether the select is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the select should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the select.
+         */
+        this.size = 'medium';
+        /**
+         * Visual variant of the select.
+         */
+        this.variant = 'default';
+        /**
+         * Whether the input is searchable.
+         */
+        this.searchable = false;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.searchQuery = '';
+        this.filterOption = (option, query) => {
+            if (!query)
+                return true;
+            const searchLower = query.toLowerCase();
+            return (option.label.toLowerCase().includes(searchLower) ||
+                (option.description?.toLowerCase().includes(searchLower) ?? false));
+        };
+        this.handleOptionSelect = (e) => {
+            this.value = e.detail.value;
+            this.selectedOption = e.detail.option;
+            this.leChange.emit(e.detail);
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+            // Focus search input if searchable
+            if (this.searchable) {
+                setTimeout(() => {
+                    this.inputEl?.focus();
+                }, 50);
+            }
+        };
+        this.handleDropdownClose = () => {
+            this.open = false;
+            this.leClose.emit();
+        };
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.toggle();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.dropdownEl?.show();
+            }
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
+    }
     handleValueChange() {
         this.updateSelectedOption();
     }
@@ -127,49 +148,6 @@ export class LeSelect {
             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.
      */
@@ -192,13 +170,13 @@ export class LeSelect {
     }
     render() {
         const hasValue = this.selectedOption !== undefined;
-        return (h("le-component", { key: '670430a0ca8f310b7454c7dd93098b6b57f3bb82', component: "le-select" }, h("le-dropdown-base", { key: '58716c031b14513b67a1106b90b6174fa363c8b4', 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: 'b9cb202179c8fbc6dea9bc7af5ccf11deeb7c0f1', variant: this.variant && this.variant !== 'default' ? this.variant : 'outlined', slot: "trigger", align: "space-between", class: {
+        return (h("le-component", { key: 'cd0d10eb7ee1cc6f52fcb32bc3675e2f74219d9b', component: "le-select" }, h("le-dropdown-base", { key: '200e03a079caaa6c091f82d0384134a3e2d0154d', 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: '0fa315cceaf6f18a5e370351027f27167fe64ce0', 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: '592267788f6a02d6b501941863e91bcd68742233', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: 'd4d2611e8b1f7fb243675cc11fa4982331b3c330', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'f2a7e477eaf730173cfbca35b33d263eda860dc2', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: 'bf9dc8141d02c272b0b81557dbc7c24a419ce558', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
+                : 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: 'aae9bb220fb206622dbf6959f125c78adfb13e00', class: "trigger-label" }, hasValue ? this.selectedOption.label : this.placeholder)), this.searchable && this.open && (h("div", { key: '0e7e360672e2e7ce7d32dc726a450ccff245cee0', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'a2a36fc139d4b477d35910541fab6071eddc3de5', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name && h("input", { key: '9555b72d2f433ce9ee3803d0bb3ceb0dae1c37e3', type: "hidden", name: this.name, value: this.value?.toString() ?? '' })));
     }
     static get is() { return "le-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"le-select.js","sourceRoot":"","sources":["../../../src/components/le-select/le-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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({ eventName: 'change' }) 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","sourceRoot":"","sources":["../../../src/components/le-select/le-select.tsx"],"names":[],"mappings":"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","sourcesContent":["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({ eventName: 'change' }) 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"]}

package/dist/collection/components/le-side-panel/le-side-panel.css

@@ -44,6 +44,10 @@
   width: 0;
 }
 
+.inlinePanel.no-transition {
+  transition: none !important;
+}
+
 .inlinePanel .panel {
   transform: translateX(0);
   opacity: 1;
@@ -52,6 +56,10 @@
     opacity var(--le-side-panel-transition, var(--le-transition-normal));
 }
 
+.inlinePanel.no-transition .panel {
+  transition: none !important;
+}
+
 .layout.start .inlinePanel.hidden .panel {
   transform: translateX(-100%);
   opacity: 0;
@@ -73,9 +81,10 @@
 
 .panel {
   position: relative;
+  margin: var(--le-side-panel-margin);
   height: 100%;
   max-height: min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));
-  margin: var(--le-side-panel-margin);
+  width: calc(100% - (var(--le-side-panel-margin) * 2));
   border-radius: var(--le-side-panel-border-radius);
 
   background: var(--le-color-surface, #fff);