le-kit 0.1.14 → 0.1.16

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

@@ -0,0 +1,445 @@
+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: '0bd6c571955af391aa13fd5096cb86f96d1715d9', class: `overflow-${this.overflow}` }, h("le-component", { key: 'cfdcd825987830613c99947731039222bffa710c', component: "le-segmented-control" }, h("div", { key: '80828925d12a2da95764b41b926bd048de409e99', 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

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

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

@@ -0,0 +1,121 @@
+/**
+ * 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);
+}