le-kit 0.5.2 → 0.5.4

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

@@ -1,445 +0,0 @@
-import { h, Host, } from "@stencil/core";
-/**
- * A segmented control component (iOS-style toggle buttons).
- *
- * Perfect for toggling between a small set of related options.
- *
- * @cssprop --le-segmented-bg - Background color of the control
- * @cssprop --le-segmented-padding - Padding around segments
- * @cssprop --le-segmented-gap - Gap between segments
- * @cssprop --le-segmented-radius - Border radius of the control
- *
- * @csspart container - The main container
- * @csspart segment - Individual segment buttons
- * @csspart segment-active - The currently active segment
- *
- * @cmsEditable true
- * @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;
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildSegmentsConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildSegmentsConfigs();
-    }
-    componentWillLoad() {
-        this.buildSegmentsConfigs();
-        if (this.value === undefined && this.options.length > 0) {
-            const firstEnabled = this.options.find(opt => !opt.disabled);
-            if (firstEnabled) {
-                this.value = this.getOptionValue(firstEnabled);
-            }
-        }
-        if (this.value !== undefined) {
-            const index = this.getOptionIndex(this.value);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    connectedCallback() {
-        // Watch for dynamic changes to children
-        this.mutationObserver = new MutationObserver(() => {
-            this.buildSegmentsConfigs();
-        });
-        this.mutationObserver.observe(this.el, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    async buildSegmentsConfigs() {
-        // Check for le-tab children
-        const segments = Array.from(this.el.querySelectorAll(':scope > le-tab'));
-        if (segments.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const segment of segments) {
-                const config = await segment.getTabConfig();
-                configs.push({ ...config });
-            }
-            this.segmentConfigs = configs;
-        }
-        else if (this.options.length > 0) {
-            // Programmatic mode - use options prop
-            this.isDeclarativeMode = false;
-            this.segmentConfigs = this.options.map(option => ({
-                label: option.label,
-                value: (option.value !== undefined ? option.value : option.label),
-                iconStart: option.iconStart,
-                iconEnd: option.iconEnd,
-                disabled: option.disabled ?? false,
-            }));
-        }
-        else {
-            this.segmentConfigs = [];
-        }
-        // Set default selected
-        if (this.value === undefined && this.segmentConfigs.length > 0) {
-            const firstEnabled = this.segmentConfigs.find(t => !t.disabled);
-            if (firstEnabled) {
-                this.value = firstEnabled.value;
-            }
-        }
-        // Initialize focused index
-        if (this.value !== undefined) {
-            const index = this.segmentConfigs.findIndex(t => t.value === this.value);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    getOptionValue(option) {
-        return option.value !== undefined ? option.value : option.label;
-    }
-    getOptionIndex(value) {
-        return this.options.findIndex(opt => this.getOptionValue(opt) === value);
-    }
-    selectOption(option) {
-        if (option.disabled || this.disabled)
-            return;
-        const value = this.getOptionValue(option);
-        this.value = value;
-        // update focused index
-        const index = this.segmentConfigs.findIndex(seg => seg.value === value);
-        if (index >= 0) {
-            this.focusedIndex = index;
-        }
-        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;
-        const length = segmentConfigs.length;
-        for (let i = 0; i < length; i++) {
-            index = (index + direction + length) % length;
-            if (!segmentConfigs[index].disabled) {
-                return index;
-            }
-        }
-        return this.focusedIndex;
-    }
-    findFirstEnabled() {
-        return this.segmentConfigs.findIndex(opt => !opt.disabled);
-    }
-    findLastEnabled() {
-        for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {
-            if (!this.segmentConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    focusSegment(index) {
-        const container = this.containerRef;
-        const segment = container?.querySelectorAll('.segment')[index];
-        segment?.focus();
-    }
-    render() {
-        const { segmentConfigs, value, size, fullWidth, disabled } = this;
-        const classes = {
-            'le-segmented-control': true,
-            [`size-${size}`]: true,
-            [`overflow-${this.overflow}`]: true,
-            '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 => {
-            const optValue = this.getOptionValue(option);
-            const isSelected = optValue === value;
-            const isDisabled = option.disabled || disabled;
-            return (h("le-tab", { key: optValue, class: "segment", role: "radio", variant: "enclosed", selected: isSelected, disabled: isDisabled, focusable: false, size: size, part: isSelected ? 'segment segment-active' : 'segment', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, onClick: () => this.handleClick(option), iconStart: option.iconStart, iconEnd: option.iconEnd }, h("span", { class: "segment-label" }, option.label)));
-        })))));
-    }
-    static get is() { return "le-segmented-control"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-segmented-control.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-segmented-control.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeOption[]",
-                    "resolved": "LeOption[]",
-                    "references": {
-                        "LeOption": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Array of options for the segmented control."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "value": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "LeOptionValue",
-                    "resolved": "number | string",
-                    "references": {
-                        "LeOptionValue": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionValue"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the currently selected option."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "small | medium | large"
-                        }],
-                    "text": "Size of the control."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
-            "overflow": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'auto' | 'hidden' | 'visible' | 'scroll'",
-                    "resolved": "\"auto\" | \"hidden\" | \"scroll\" | \"visible\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "auto | hidden | visible | scroll"
-                        }],
-                    "text": "Scroll behavior for overflowing tabs."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "overflow",
-                "defaultValue": "'auto'"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the control should take full width."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "full-width",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the control is disabled."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "segmentConfigs": {},
-            "focusedIndex": {},
-            "isDeclarativeMode": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leChange",
-                "name": "leChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the selection changes."
-                },
-                "complexType": {
-                    "original": "LeOptionSelectDetail",
-                    "resolved": "LeOptionSelectDetail",
-                    "references": {
-                        "LeOptionSelectDetail": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionSelectDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "options",
-                "methodName": "tabsChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "slotchange",
-                "method": "handleSlotChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=le-segmented-control.js.map

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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,121 +0,0 @@
-/**
- * le-select component styles
- *
- * CSS Custom Properties:
- * --le-select-height
- * --le-select-padding-x
- * --le-select-font-size
- * --le-select-border-radius
- * --le-select-border-color
- * --le-select-bg
- * --le-select-color
- */
-
-: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%;
-}
-
-/* Trigger button */
-.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;
-}
-
-/* Placeholder state */
-.select-trigger:not(.has-value) .trigger-label {
-  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);
-}
-
-/* Trigger icon */
-.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 */
-.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);
-}
-
-/* Arrow icon */
-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 in dropdown */
-.search-input::part(container):focus-within {
-  outline: none !important;
-}
-.search-input {
-  --le-input-radius: var(--le-radius-md);
-}