le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-number-input/le-number-input.js

@@ -1,476 +0,0 @@
-import { h } from "@stencil/core";
-import { classnames } from "../../utils/utils";
-/**
- * A number input component with validation, keyboard controls, and custom spinners.
- *
- * @slot - The label text for the input
- * @slot description - Additional description text displayed below the input
- * @slot icon-start - Icon to display at the start of the input
- *
- * @cssprop --le-input-bg - Input background color
- * @cssprop --le-input-color - Input text color
- * @cssprop --le-input-border - Input border style
- * @cssprop --le-input-border-focus - Input border style when focused
- * @cssprop --le-input-border-error - Input border style when invalid
- * @cssprop --le-input-radius - Input border radius
- * @cssprop --le-input-padding - Input padding
- */
-export class LeNumberInput {
-    constructor() {
-        /**
-         * Step value for increment/decrement
-         */
-        this.step = 1;
-        /**
-         * Whether the input is required
-         */
-        this.required = false;
-        /**
-         * Whether the input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the input is read-only
-         */
-        this.readonly = false;
-        /**
-         * Whether to show the spinner controls
-         */
-        this.showSpinners = true;
-        /**
-         * Internal validation state
-         */
-        this.isValid = true;
-        this.validationMessage = '';
-        this.handleInput = (ev) => {
-            const input = ev.target;
-            const val = parseFloat(input.value);
-            if (input.value === '') {
-                this.value = undefined;
-            }
-            else if (!isNaN(val)) {
-                this.value = val;
-            }
-            this.validate();
-            this.emitInput();
-        };
-        this.handleChange = () => {
-            this.validate();
-            this.emitChange();
-        };
-        this.handleKeyDown = (ev) => {
-            if (this.disabled || this.readonly)
-                return;
-            let multiplier = 1;
-            if (ev.shiftKey)
-                multiplier = 10;
-            if (ev.altKey)
-                multiplier = 0.1;
-            const current = this.value || 0;
-            if (ev.key === 'ArrowUp') {
-                ev.preventDefault();
-                this.updateValue(current + (this.step * multiplier));
-            }
-            else if (ev.key === 'ArrowDown') {
-                ev.preventDefault();
-                this.updateValue(current - (this.step * multiplier));
-            }
-        };
-        this.handleWheel = (ev) => {
-            if (this.disabled || this.readonly)
-                return;
-            // Only handle if input is focused to prevent accidental scrolling
-            if (document.activeElement !== ev.target)
-                return;
-            ev.preventDefault();
-            const current = this.value || 0;
-            if (ev.deltaY < 0) {
-                this.updateValue(current + this.step);
-            }
-            else {
-                this.updateValue(current - this.step);
-            }
-        };
-        this.increment = (ev) => {
-            ev.preventDefault(); // Prevent focus loss
-            const current = this.value || 0;
-            this.updateValue(current + this.step);
-            // Trigger change event for buttons as they are "final" actions usually
-            this.emitChange();
-        };
-        this.decrement = (ev) => {
-            ev.preventDefault();
-            const current = this.value || 0;
-            this.updateValue(current - this.step);
-            this.emitChange();
-        };
-    }
-    valueChanged() {
-        this.validate();
-    }
-    validate() {
-        if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {
-            this.isValid = false;
-            this.validationMessage = 'This field is required';
-            return;
-        }
-        if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {
-            if (this.min !== undefined && this.value < this.min) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at least ${this.min}`;
-                return;
-            }
-            if (this.max !== undefined && this.value > this.max) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at most ${this.max}`;
-                return;
-            }
-        }
-        this.isValid = true;
-        this.validationMessage = '';
-    }
-    emitChange() {
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    emitInput() {
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    updateValue(newValue) {
-        if (this.disabled || this.readonly)
-            return;
-        // Round to avoid floating point errors
-        const precision = this.step.toString().split('.')[1]?.length || 0;
-        const rounded = parseFloat(newValue.toFixed(precision));
-        this.value = rounded;
-        this.validate();
-        this.emitInput();
-    }
-    render() {
-        return (h("le-component", { key: '3448b68633e7ebde8e6175f29047791c9094dc49', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'd941698c42e2dd9a5b2dbe60decfa9692c840c1a', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c2b255bf365937e2233835ef6564b81f8a1872a5', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '6090fe6737015bc1cd87ef881276975870e6797c', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'e453aa8eb57857540b29d78c3f61ec371be6c71a', class: "icon-start" }, this.iconStart)), h("input", { key: '3e9d52dbfcc1bac000e0ca9663595aaac8f42d85', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'dd4e42f8a9916574e61643dbe90bae50e2defb77', class: "le-input-controls" }, h("le-button", { key: '5aa823b516f6f71a26b5749959dec30fac2b65b3', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: 'c1858ce8cf23de1610ac6e957bd40ec2fe7a97ea', slot: "icon-only" }, "\u2191")), h("le-button", { key: '71982d4f725dc9a94144033e2b328f33699264e4', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: '0c5225558cf4adf80e63dcfafe1bb83d80fbb7dd', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'd97bc87f564b9a23dac85b518895e7ffcbd72aa8', class: "le-input-error" }, this.validationMessage), h("div", { key: '257757f47a84f40c48e98672d6217ec565f37cce', class: "le-input-description" }, h("le-slot", { key: '89c69d0be6c3ef9975d2b2ab21f65c916067d452', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '9dffb85d1c8e2463d05a514b1659d0ac3eee802e', name: "description" }))))));
-    }
-    static get is() { return "le-number-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-number-input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-number-input.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "value"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
-            },
-            "min": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum allowed value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min"
-            },
-            "max": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum allowed value"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max"
-            },
-            "step": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Step value for increment/decrement"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "step",
-                "defaultValue": "1"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is required"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is read-only"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "iconStart": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon for the start icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-start"
-            },
-            "showSpinners": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to show the spinner controls"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-spinners",
-                "defaultValue": "true"
-            },
-            "externalId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "External ID for linking with external systems"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "external-id"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isValid": {},
-            "validationMessage": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leChange",
-                "name": "leChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the value changes (on blur or Enter)"
-                },
-                "complexType": {
-                    "original": "{ value: number; name: string; externalId: string; isValid: boolean }",
-                    "resolved": "{ value: number; name: string; externalId: string; isValid: boolean; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leInput",
-                "name": "leInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input value changes (on keystroke/spin)"
-                },
-                "complexType": {
-                    "original": "{ value: number; name: string; externalId: string; isValid: boolean }",
-                    "resolved": "{ value: number; name: string; externalId: string; isValid: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }];
-    }
-}
-//# sourceMappingURL=le-number-input.js.map

package/dist/collection/components/le-number-input/le-number-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-number-input.js","sourceRoot":"","sources":["../../../src/components/le-number-input/le-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-number-input',\n  styleUrl: 'le-number-input.css',\n  shadow: true,\n})\nexport class LeNumberInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: number;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Minimum allowed value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Maximum allowed value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Step value for increment/decrement\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Whether to show the spinner controls\n   */\n  @Prop() showSpinners: boolean = true;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state\n   */\n  @State() private isValid: boolean = true;\n  @State() private validationMessage: string = '';\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke/spin)\n   */\n  @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  @Watch('value')\n  valueChanged() {\n    this.validate();\n  }\n\n  private validate() {\n    if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n      this.isValid = false;\n      this.validationMessage = 'This field is required';\n      return;\n    }\n\n    if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n      if (this.min !== undefined && this.value < this.min) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at least ${this.min}`;\n        return;\n      }\n      if (this.max !== undefined && this.value > this.max) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at most ${this.max}`;\n        return;\n      }\n    }\n\n    this.isValid = true;\n    this.validationMessage = '';\n  }\n\n  private emitChange() {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private emitInput() {\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private updateValue(newValue: number) {\n    if (this.disabled || this.readonly) return;\n    \n    // Round to avoid floating point errors\n    const precision = this.step.toString().split('.')[1]?.length || 0;\n    const rounded = parseFloat(newValue.toFixed(precision));\n    \n    this.value = rounded;\n    this.validate();\n    this.emitInput();\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    \n    if (input.value === '') {\n      this.value = undefined;\n    } else if (!isNaN(val)) {\n      this.value = val;\n    }\n    \n    this.validate();\n    this.emitInput();\n  };\n\n  private handleChange = () => {\n    this.validate();\n    this.emitChange();\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    let multiplier = 1;\n    if (ev.shiftKey) multiplier = 10;\n    if (ev.altKey) multiplier = 0.1;\n\n    const current = this.value || 0;\n\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.updateValue(current + (this.step * multiplier));\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.updateValue(current - (this.step * multiplier));\n    }\n  };\n\n  private handleWheel = (ev: WheelEvent) => {\n    if (this.disabled || this.readonly) return;\n    // Only handle if input is focused to prevent accidental scrolling\n    if (document.activeElement !== ev.target) return;\n\n    ev.preventDefault();\n    const current = this.value || 0;\n    \n    if (ev.deltaY < 0) {\n      this.updateValue(current + this.step);\n    } else {\n      this.updateValue(current - this.step);\n    }\n  };\n\n  private increment = (ev: Event) => {\n    ev.preventDefault(); // Prevent focus loss\n    const current = this.value || 0;\n    this.updateValue(current + this.step);\n    // Trigger change event for buttons as they are \"final\" actions usually\n    this.emitChange();\n  };\n\n  private decrement = (ev: Event) => {\n    ev.preventDefault();\n    const current = this.value || 0;\n    this.updateValue(current - this.step);\n    this.emitChange();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            \n            <input\n              id={this.name}\n              type=\"number\"\n              name={this.name}\n              placeholder={this.placeholder}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onKeyDown={this.handleKeyDown}\n              onWheel={this.handleWheel}\n            />\n            \n            {this.showSpinners && (\n              <div class=\"le-input-controls\">\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\"\n                  icon-only\n                  class=\"le-input-control-btn\" \n                  onClick={this.increment}\n                  disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↑</span>\n                </le-button>\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\" \n                  icon-only \n                  class=\"le-input-control-btn\" \n                  onClick={this.decrement}\n                  disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↓</span>\n                </le-button>\n              </div>\n            )}\n          </div>\n\n          {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

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

@@ -1,164 +0,0 @@
-/* ============================================
-   le-popover.css
-   Popover using native HTML Popover API
-   ============================================ */
-
-:host {
-  display: inline-block;
-  position: relative;
-  --le-popover-padding: var(--le-space-md, 12px);
-}
-
-:host([trigger-full-width]) {
-  display: block;
-  width: 100%;
-}
-
-/* ============================================
-   Trigger
-   ============================================ */
-
-.le-popover-trigger {
-  display: inline-flex;
-  cursor: pointer;
-}
-
-.le-popover-trigger-full-width {
-  display: flex;
-  width: 100%;
-}
-
-.le-popover-default-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-md, 6px);
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text-secondary, #666);
-  font-size: 16px;
-  cursor: pointer;
-  transition: all var(--le-transition-fast, 0.15s ease);
-}
-
-.le-popover-default-trigger:hover {
-  border-color: var(--le-color-primary, #2196f3);
-  color: var(--le-color-primary, #2196f3);
-  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));
-}
-
-/* ============================================
-   Popover Content (native popover)
-   ============================================ */
-
-.le-popover-content {
-  /* Reset native popover defaults */
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  
-  /* Positioning - will be set via JS */
-  position: fixed;
-  inset: unset;
-  
-  /* Styling */
-  background: var(--le-color-surface, #ffffff);
-  border: 1px solid var(--le-color-border, #e0e0e0);
-  border-radius: var(--le-radius-lg, 8px);
-  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
-  overflow: hidden;
-  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-  
-  /* Animation */
-  opacity: 0;
-  transform: scale(0.95);
-  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;
-}
-
-/* When popover is open */
-.le-popover-content:popover-open {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Fallback for browsers without the Popover API */
-.le-popover-content[data-fallback-open="false"] {
-  display: none;
-}
-
-.le-popover-content[data-fallback-open="true"] {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Starting style for animation (CSS Anchor Positioning spec) */
-@starting-style {
-  .le-popover-content:popover-open {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-/* ============================================
-   Header
-   ============================================ */
-
-.le-popover-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);
-  border-bottom: 1px solid var(--le-color-border, #e0e0e0);
-  background: var(--le-color-surface-alt, #f9f9f9);
-  min-height: 32px;
-}
-
-.le-popover-title {
-  font-weight: var(--le-font-weight-semibold, 600);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  color: var(--le-color-text, #333);
-}
-
-.le-popover-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--le-color-text-secondary, #666);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  border-radius: var(--le-radius-sm, 4px);
-  transition: background-color 0.15s, color 0.15s;
-}
-
-.le-popover-close:hover {
-  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));
-  color: var(--le-color-text, #333);
-}
-
-/* ============================================
-   Body
-   ============================================ */
-
-.le-popover-body {
-  padding: var(--le-popover-padding);
-}
-
-/* ============================================
-   Scrollable content
-   ============================================ */
-
-.le-popover-content[style*="overflow-y: auto"] .le-popover-body {
-  overflow-y: auto;
-}