le-kit 0.1.13 → 0.1.15

package/dist/collection/components/le-button/{le-button.default.css → le-button.css}

@@ -7,19 +7,22 @@
   
   /* Component-specific tokens */
   --le-button-border-radius: var(--le-radius-md);
-  --le-button-padding-x: 0.4rem;
-  --le-button-padding-y: 0.4rem;
+  --le-button-padding-x: var(--le-spacing-3);
+  --le-button-padding-y: var(--le-spacing-1);
+  --le-button-padding: var(--le-button-padding-y) var(--le-button-padding-x);
   --le-button-small-padding: 0.25rem;
   --le-button-font-size: var(--le-font-size-md);
   --le-button-font-weight: var(--le-font-weight-medium);
   --le-button-transition: var(--le-transition-fast);
+  --le-transition-easing: ease-in-out;
   --le-button-icon-aspect-ratio: 1;
+  --le-button-color: var(--le-color-primary-contrast);
   
   /* Internal state variables - set by color classes */
   --_btn-bg: var(--le-color-primary);
   --_btn-bg-hover: var(--le-color-primary-dark);
   --_btn-bg-system: var(--le-color-black);
-  --_btn-color: var(--le-color-primary-contrast);
+  --_btn-color: var(--le-button-color);
   --_btn-border-color: var(--le-color-primary);
 }
 
@@ -28,13 +31,14 @@
   width: 100%;
 }
 
-.button {
+.le-button-container {
   display: inline-flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: var(--le-spacing-3);
   width: 100%;
-  padding: var(--le-button-padding-y) var(--le-button-padding-x);
+  padding: var(--le-button-padding);
   border: 1px solid var(--_btn-border-color);
   border-radius: var(--le-button-border-radius);
   background: var(--_btn-bg);
@@ -52,25 +56,33 @@
     transform var(--le-button-transition) var(--le-transition-easing);
 }
 
-.button:hover:not(:disabled) {
+.le-button-container:hover:not(:disabled) {
   background: var(--_btn-bg-hover);
   border-color: var(--_btn-bg-hover);
 }
 
-.button:active:not(:disabled) {
-  transform: translateY(1px);
+.le-button-container:active:not(:disabled) {
+  box-shadow: inset 0 0 6px var(--le-color-shadow);
 }
 
-.button:focus-visible {
+.le-button-container:focus-visible {
   outline: 2px solid var(--le-color-focus);
   outline-offset: 2px;
 }
 
-.button:disabled {
+.le-button-container:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.le-button-label {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--le-spacing-2);
+}
+
 /* ===========================================
  * COLOR VARIANTS - Use theme semantic colors
  * =========================================== */
@@ -79,7 +91,7 @@
 :host > le-component.color-primary {
   --_btn-bg: var(--le-color-primary);
   --_btn-bg-hover: var(--le-color-primary-dark);
-  --_btn-color: var(--le-color-primary-contrast);
+  --_btn-color: var(--le-button-color);
   --_btn-border-color: var(--le-color-primary);
 }
 
@@ -128,40 +140,39 @@
  * =========================================== */
 
 /* Solid (default) - already styled by color classes */
-:host > le-component.variant-solid .button {
+:host > le-component.variant-solid .le-button-container {
   box-shadow: var(--le-shadow-sm);
 }
 
-:host > le-component.variant-solid .button:hover:not(:disabled) {
+:host > le-component.variant-solid .le-button-container:hover:not(:disabled) {
   box-shadow: var(--le-shadow-md);
 }
 
 /* Outlined */
-:host > le-component.variant-outlined .button {
+:host > le-component.variant-outlined .le-button-container {
   background: transparent;
   color: var(--_btn-bg);
-  border-color: var(--_btn-border-color);
+  border-color: color-mix(in srgb, var(--_btn-border-color) 33%, transparent);
 }
 
-:host > le-component.variant-outlined .button:hover:not(:disabled) {
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
+:host > le-component.variant-outlined .le-button-container:hover:not(:disabled) {
+  border-color: var(--_btn-border-color);
 }
 
 /* Clear (ghost) */
-:host > le-component.variant-clear .button {
+:host > le-component.variant-clear .le-button-container {
   background: transparent;
   color: var(--_btn-bg);
   border-color: transparent;
 }
 
-:host > le-component.variant-clear .button:hover:not(:disabled) {
+:host > le-component.variant-clear .le-button-container:hover:not(:disabled) {
   background: var(--le-color-gray-100);
   border-color: transparent;
 }
 
 /* System (controls without access) */
-:host > le-component.variant-system .button {
+:host > le-component.variant-system .le-button-container {
   background: transparent;
   color: var(--_btn-bg-system);
   border-color: transparent;
@@ -170,14 +181,14 @@
 /* ===========================================
  * SIZES
  * =========================================== */
-:host > le-component.size-small .button {
+:host > le-component.size-small .le-button-container {
   --le-button-padding-x: 0.4rem;
   --le-button-padding-y: 0.3rem;
   --le-button-padding-top: 0.35rem;
   --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));
 }
 
-:host > le-component.size-large .button {
+:host > le-component.size-large .le-button-container {
   --le-button-padding-x: 0.9rem;
   --le-button-padding-y: 0.6rem;
   --le-button-font-size: var(--le-font-size-xl);
@@ -194,28 +205,28 @@
 }
 
 /* Selected state */
-:host > le-component.selected .button {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+:host > le-component.selected .le-button-container {
+  box-shadow: inset 0 0 4px var(--le-color-shadow);
 }
 
-:host > le-component.variant-outlined.selected .button,
-:host > le-component.variant-clear.selected .button {
+:host > le-component.variant-outlined.selected .le-button-container,
+:host > le-component.variant-clear.selected .le-button-container {
   background: var(--_btn-bg);
   color: var(--_btn-color);
 }
 
 /* Icon only */
-:host > le-component.icon-only .button {
+:host > le-component.icon-only .le-button-container {
   padding: 0.5rem;
   padding-bottom: 0.6rem;
   aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
 }
 
-:host > le-component.icon-only.size-small .button {
+:host > le-component.icon-only.size-small .le-button-container {
   padding: var(--le-button-small-padding, 0.25rem);
 }
 
-:host > le-component.icon-only.size-large .button {
+:host > le-component.icon-only.size-large .le-button-container {
   padding: 0.75rem;
 }
 
@@ -261,3 +272,19 @@
   width: 1.125em;
   height: 1.125em;
 }
+
+/* ===========================================
+ * ALIGNMENT MODIFIERS
+ * =========================================== */
+.le-button-align-start {
+  justify-content: flex-start;
+}
+.le-button-align-center {
+  justify-content: center;
+}
+.le-button-align-space-between {
+  justify-content: space-between;
+}
+.le-button-align-end {
+  justify-content: flex-end;
+}

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

@@ -4,8 +4,7 @@ import { classnames } from "../../utils/utils";
  * A flexible button component with multiple variants and states.
  *
  * @slot - Button text content
- * @slot icon-start - Icon before the text
- * @slot icon-end - Icon after the text
+ * @slot icon-only - Icon for icon-only buttons
  *
  * @cssprop --le-button-bg - Button background color
  * @cssprop --le-button-color - Button text color
@@ -15,6 +14,8 @@ import { classnames } from "../../utils/utils";
  *
  * @csspart button - The native button element
  * @csspart content - The button content wrapper
+ * @csspart icon-start - The start icon slot
+ * @csspart icon-end - The end icon slot
  *
  * @cmsEditable true
  * @cmsCategory Actions
@@ -49,9 +50,18 @@ export class LeButton {
      */
     fullWidth = false;
     /**
-     * Whether the button displays only an icon (square aspect ratio)
+     * Icon only button image or emoji
+     * if this prop is set, the button will render only the icon slot
      */
-    iconOnly = false;
+    iconOnly;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd;
     /**
      * Whether the button is disabled
      */
@@ -69,6 +79,11 @@ export class LeButton {
      * Link target when href is set
      */
     target;
+    /**
+     * Alignment of the button label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align = 'center';
     /**
      * Emitted when the button is clicked.
      * This is a custom event that wraps the native click but ensures the target is the le-button.
@@ -93,18 +108,18 @@ export class LeButton {
         });
         const TagType = this.href ? 'a' : 'button';
         const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
-        return (h("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+        return (h("le-component", { key: 'bf247365c4ceeaccdb05cbbb17604265f1608fa4', component: "le-button", hostClass: classes }, h(TagType, { key: 'a01540b86ace35d55b5635e2e5ce1049f480a788', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd)))))));
     }
     static get is() { return "le-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["le-button.default.css"]
+            "$": ["le-button.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["le-button.default.css"]
+            "$": ["le-button.css"]
         };
     }
     static get properties() {
@@ -238,24 +253,76 @@ export class LeButton {
                 "defaultValue": "false"
             },
             "iconOnly": {
-                "type": "boolean",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the button displays only an icon (square aspect ratio)"
+                    "text": "Icon only button image or emoji\nif this prop is set, the button will render only the icon slot"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-only",
-                "defaultValue": "false"
+                "attribute": "icon-only"
+            },
+            "iconStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Start icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-start"
+            },
+            "iconEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "End icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-end"
             },
             "disabled": {
                 "type": "boolean",
@@ -337,6 +404,29 @@ export class LeButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "target"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'space-between' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"space-between\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | space-between | end"
+                        }],
+                    "text": "Alignment of the button label without the end icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-start - Icon before the text\n * @slot icon-end - Icon after the text\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.default.css',\n  shadow: true,\n})\nexport class LeButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Whether the button displays only an icon (square aspect ratio)\n   */\n  @Prop() iconOnly: boolean = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    \n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {\n      'selected': this.selected,\n      'full-width': this.fullWidth,\n      'icon-only': this.iconOnly,\n      'disabled': this.disabled,\n    });\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };\n\n    return (\n      <le-component component=\"le-button\" hostClass={classes}>\n        <TagType class=\"button\" part=\"button\" {...attrs} onClick={this.handleClick}>\n          {this.iconOnly ? (\n            <span class=\"icon-start\">\n              <slot name=\"icon-only\"></slot>\n            </span>\n          ) : (\n            <Fragment>\n              <span class=\"icon-start\">\n                <slot name=\"icon-start\"></slot>\n              </span>\n              <le-slot name=\"\" description=\"Button text\" type=\"text\" class=\"content\" part=\"content\">\n                <slot></slot>\n              </le-slot>\n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </le-component>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-only - Icon for icon-only buttons\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.css',\n  shadow: true,\n})\nexport class LeButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Icon only button image or emoji\n   * if this prop is set, the button will render only the icon slot\n   */\n  @Prop() iconOnly?: string | Node;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Alignment of the button label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {\n      'selected': this.selected,\n      'full-width': this.fullWidth,\n      'icon-only': this.iconOnly,\n      'disabled': this.disabled,\n    });\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };\n\n    return (\n      <le-component component=\"le-button\" hostClass={classes}>\n        <TagType class={classnames('le-button-container', `le-button-align-${this.align}`)} part=\"button\" {...attrs} onClick={this.handleClick}>\n          {this.iconOnly !== undefined ? (\n            <slot name=\"icon-only\">{typeof this.iconOnly === 'string' ? this.iconOnly : null}</slot>\n          ) : (\n            <Fragment>\n              <span class=\"le-button-label\">\n                {this.iconStart && (\n                  <span class=\"icon-start\" part=\"icon-start\">\n                    {this.iconStart}\n                  </span>\n                )}\n                <le-slot name=\"\" description=\"Button text\" type=\"text\" class=\"content\" part=\"content\">\n                  <slot></slot>\n                </le-slot>\n              </span>\n              {this.iconEnd && (\n                <span class=\"icon-end\" part=\"icon-end\">\n                  {this.iconEnd}\n                </span>\n              )}\n            </Fragment>\n          )}\n        </TagType>\n      </le-component>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,144 @@
+/**
+ * le-combobox component styles
+ *
+ * CSS Custom Properties:
+ * --le-combobox-padding-x
+ * --le-combobox-font-size
+ * --le-combobox-border-radius
+ * --le-combobox-border-color
+ * --le-combobox-bg
+ * --le-combobox-color
+ */
+
+:host {
+  display: inline-block;
+  min-width: 200px;
+  --le-combobox-border-color: var(--le-color-primary, #3b82f6);
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+/* Trigger wrapper */
+.combobox-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: var(--le-combobox-bg, var(--le-color-surface, #fff));
+  border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);
+  border-radius: var(--le-combobox-border-radius, 0.375rem);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.combobox-trigger:hover:not(.is-disabled),
+:host(:focus-within) .combobox-trigger:not(.is-disabled) {
+  border-color: var(--le-combobox-border-color);
+}
+
+.combobox-trigger:focus-within {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.combobox-trigger.is-open {
+  border-color: var(--le-color-primary, #3b82f6);
+}
+
+/* Input */
+.combobox-input {
+  flex: 1;
+  border: none;
+  outline: none;
+}
+.combobox-input::part(container) {
+  border: none;
+}
+.combobox-input::part(container):focus-within {
+  outline: none !important;
+}
+
+.combobox-input::placeholder {
+  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);
+}
+
+.combobox-trigger.is-disabled {
+  cursor: not-allowed;
+  background: var(--le-color-surface-disabled, #f9fafb);
+}
+.combobox-input:disabled {
+  cursor: not-allowed;
+}
+
+/* Clear button */
+.combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin-right: 0.25rem;
+  color: var(--le-color-primary, #3b82f6);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.combobox-clear:hover {
+  opacity: 1;
+  background: var(--le-color-surface-hover, #f3f4f6);
+}
+
+.combobox-clear svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Arrow icon */
+.combobox-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 100%;
+  color: var(--le-color-primary, #3b82f6);
+  transition: transform 0.2s ease;
+}
+
+.combobox-arrow svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.combobox-trigger.is-open .combobox-arrow {
+  transform: rotate(180deg);
+}
+
+/* Size variants */
+:host([size='small']) .combobox-trigger {
+  --le-combobox-height: 2rem;
+}
+
+:host([size='small']) .combobox-input {
+  --le-combobox-padding-x: 0.5rem;
+  --le-combobox-font-size: 0.75rem;
+}
+
+:host([size='large']) .combobox-trigger {
+  --le-combobox-height: 3rem;
+}
+
+:host([size='large']) .combobox-input {
+  --le-combobox-padding-x: 1rem;
+  --le-combobox-font-size: 1rem;
+}