le-kit 0.0.3 → 0.1.1

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

@@ -0,0 +1,359 @@
+import { h, Host } from "@stencil/core";
+import { classnames, observeModeChanges } from "../../utils/utils";
+/**
+ * Component wrapper for admin mode editing.
+ *
+ * This component is used internally by other components to provide admin-mode
+ * editing capabilities. It wraps the component's rendered output and shows
+ * a settings popover for editing properties.
+ *
+ * In default mode, it acts as a simple passthrough (display: contents).
+ * In admin mode, it shows a border, component name header, and settings popover.
+ *
+ * The host element is found automatically by traversing up through the shadow DOM.
+ *
+ * Usage inside a component's render method:
+ * ```tsx
+ * render() {
+ *   return (
+ *     <le-component component="le-card">
+ *       <Host>...</Host>
+ *     </le-component>
+ *   );
+ * }
+ * ```
+ *
+ * @slot - The component's rendered content
+ *
+ * @cmsInternal true
+ * @cmsCategory System
+ */
+export class LeComponent {
+    el;
+    /**
+     * The tag name of the component (e.g., 'le-card').
+     * Used to look up property metadata and display the component name.
+     */
+    component;
+    /**
+     * Optional display name for the component.
+     * If not provided, the tag name will be formatted as the display name.
+     */
+    displayName;
+    /**
+     * Classes to apply to the host element.
+     * Allows parent components to pass their styling classes.
+     */
+    hostClass;
+    /**
+     * Inline styles to apply to the host element.
+     * Allows parent components to pass dynamic styles (e.g., flex properties).
+     */
+    hostStyle;
+    /**
+     * Reference to the host element (found automatically from parent)
+     */
+    hostElement;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * Component metadata loaded from Custom Elements Manifest
+     */
+    componentMeta = null;
+    /**
+     * Current property values of the host component
+     */
+    propertyValues = {};
+    disconnectModeObserver;
+    connectedCallback() {
+        // Find the host element - le-component is rendered inside the component's shadow DOM,
+        // so we need to find the shadow root's host element
+        this.findHostElement();
+        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+            this.adminMode = mode === 'admin';
+            // Load metadata and refresh property values only when entering admin mode
+            if (this.adminMode) {
+                if (!this.componentMeta) {
+                    this.loadComponentMetadata();
+                }
+                else {
+                    this.readPropertyValues();
+                }
+            }
+        });
+    }
+    /**
+     * Find the host element by traversing up through shadow DOM
+     */
+    findHostElement() {
+        // Get the shadow root that contains this le-component
+        const rootNode = this.el.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+            // The host of this shadow root is our target component (e.g., le-card)
+            this.hostElement = rootNode.host;
+        }
+    }
+    componentDidLoad() {
+        // Read initial property values from the host element
+        this.readPropertyValues();
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+    }
+    /**
+     * Formats a tag name into a display name
+     * e.g., 'le-card' -> 'Card'
+     */
+    formatDisplayName(tagName) {
+        return tagName
+            .replace(/^le-/, '') // Remove 'le-' prefix
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    /**
+     * Load component metadata from the Custom Elements Manifest
+     */
+    async loadComponentMetadata() {
+        try {
+            // Fetch the manifest - in production this would be bundled or cached
+            const response = await fetch('/custom-elements.json');
+            const manifest = await response.json();
+            // Find the component definition
+            for (const module of manifest.modules) {
+                for (const declaration of module.declarations || []) {
+                    if (declaration.tagName === this.component) {
+                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
+                        this.componentMeta = {
+                            tagName: declaration.tagName,
+                            description: declaration.description,
+                            attributes,
+                        };
+                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
+                        // Read property values after metadata is loaded
+                        this.readPropertyValues();
+                        return;
+                    }
+                }
+            }
+            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
+        }
+        catch (error) {
+            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
+        }
+    }
+    /**
+     * Check if an attribute is internal (should not be shown in editor)
+     */
+    isInternalAttribute(name) {
+        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
+        return internalAttrs.includes(name);
+    }
+    /**
+     * Read current property values from the host element
+     */
+    readPropertyValues() {
+        if (!this.hostElement || !this.componentMeta)
+            return;
+        const values = {};
+        for (const attr of this.componentMeta.attributes) {
+            const value = this.hostElement.getAttribute(attr.name);
+            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
+        }
+        this.propertyValues = values;
+    }
+    /**
+     * Parse an attribute value based on its type
+     */
+    parseAttributeValue(value, type) {
+        if (value === null)
+            return undefined;
+        if (type === 'boolean') {
+            return value !== null && value !== 'false';
+        }
+        if (type === 'number') {
+            return parseFloat(value);
+        }
+        return value;
+    }
+    /**
+     * Handle property value changes from the editor
+     */
+    handlePropertyChange(attrName, value, type) {
+        if (!this.hostElement)
+            return;
+        // Update the host element's attribute
+        if (type === 'boolean') {
+            if (value) {
+                this.hostElement.setAttribute(attrName, '');
+            }
+            else {
+                this.hostElement.removeAttribute(attrName);
+            }
+        }
+        else if (value === undefined || value === '') {
+            this.hostElement.removeAttribute(attrName);
+        }
+        else {
+            this.hostElement.setAttribute(attrName, String(value));
+        }
+        // Update local state
+        this.propertyValues = { ...this.propertyValues, [attrName]: value };
+    }
+    /**
+     * Delete this component from the DOM
+     */
+    deleteComponent() {
+        if (!this.hostElement)
+            return;
+        // Confirm deletion
+        const name = this.displayName || this.formatDisplayName(this.component);
+        if (!confirm(`Delete this ${name}?`))
+            return;
+        // Remove the host element from its parent
+        const parent = this.hostElement.parentElement;
+        if (parent) {
+            this.hostElement.remove();
+        }
+    }
+    /**
+     * Render the property editor form
+     */
+    renderPropertyEditor() {
+        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
+        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: (e) => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
+    }
+    /**
+     * Render a single property field based on its type
+     */
+    renderPropertyField(attr) {
+        const value = this.propertyValues[attr.name];
+        const type = attr.type?.text || 'string';
+        // Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
+        const enumMatch = type.match(/^'[^']+'/);
+        if (enumMatch) {
+            const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("select", { id: `prop-${attr.name}`, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) }, options.map(opt => (h("option", { value: opt, selected: value === opt || (!value && attr.default?.replace(/'/g, '') === opt) }, opt))))));
+        }
+        // Boolean type
+        if (type === 'boolean') {
+            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: (e) => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
+        }
+        // Number type
+        if (type === 'number') {
+            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: (e) => this.handlePropertyChange(attr.name, e.target.value, type) })));
+        }
+        // Default: string/text input
+        return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
+    }
+    render() {
+        const name = this.displayName || this.formatDisplayName(this.component);
+        // In default mode, just pass through content with host classes
+        if (!this.adminMode) {
+            return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
+        }
+        // In admin mode, show wrapper with header and settings
+        return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
+    }
+    static get is() { return "le-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "component": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component"
+            },
+            "displayName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-name"
+            },
+            "hostClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Classes to apply to the host element.\nAllows parent components to pass their styling classes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "host-class"
+            },
+            "hostStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "{ [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties)."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "adminMode": {},
+            "componentMeta": {},
+            "propertyValues": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-component.js","sourceRoot":"","sources":["../../../src/components/le-component/le-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\n\n/**\n * Component wrapper for admin mode editing.\n *\n * This component is used internally by other components to provide admin-mode \n * editing capabilities. It wraps the component's rendered output and shows\n * a settings popover for editing properties.\n *\n * In default mode, it acts as a simple passthrough (display: contents).\n * In admin mode, it shows a border, component name header, and settings popover.\n *\n * The host element is found automatically by traversing up through the shadow DOM.\n *\n * Usage inside a component's render method:\n * ```tsx\n * render() {\n *   return (\n *     <le-component component=\"le-card\">\n *       <Host>...</Host>\n *     </le-component>\n *   );\n * }\n * ```\n *\n * @slot - The component's rendered content\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-component',\n  styleUrl: 'le-component.css',\n  shadow: true,\n})\nexport class LeComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The tag name of the component (e.g., 'le-card').\n   * Used to look up property metadata and display the component name.\n   */\n  @Prop() component!: string;\n\n  /**\n   * Optional display name for the component.\n   * If not provided, the tag name will be formatted as the display name.\n   */\n  @Prop() displayName?: string;\n\n  /**\n   * Classes to apply to the host element.\n   * Allows parent components to pass their styling classes.\n   */\n  @Prop() hostClass?: string;\n\n  /**\n   * Inline styles to apply to the host element.\n   * Allows parent components to pass dynamic styles (e.g., flex properties).\n   */\n  @Prop() hostStyle?: { [key: string]: string };\n\n  /**\n   * Reference to the host element (found automatically from parent)\n   */\n  private hostElement?: HTMLElement;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Component metadata loaded from Custom Elements Manifest\n   */\n  @State() private componentMeta: ComponentMetadata | null = null;\n\n  /**\n   * Current property values of the host component\n   */\n  @State() private propertyValues: Record<string, any> = {};\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    // Find the host element - le-component is rendered inside the component's shadow DOM,\n    // so we need to find the shadow root's host element\n    this.findHostElement();\n\n    this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n      this.adminMode = mode === 'admin';\n      // Load metadata and refresh property values only when entering admin mode\n      if (this.adminMode) {\n        if (!this.componentMeta) {\n          this.loadComponentMetadata();\n        } else {\n          this.readPropertyValues();\n        }\n      }\n    });\n  }\n\n  /**\n   * Find the host element by traversing up through shadow DOM\n   */\n  private findHostElement() {\n    // Get the shadow root that contains this le-component\n    const rootNode = this.el.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      // The host of this shadow root is our target component (e.g., le-card)\n      this.hostElement = rootNode.host as HTMLElement;\n    }\n  }\n\n  componentDidLoad() {\n    // Read initial property values from the host element\n    this.readPropertyValues();\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Formats a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatDisplayName(tagName: string): string {\n    return tagName\n      .replace(/^le-/, '') // Remove 'le-' prefix\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Load component metadata from the Custom Elements Manifest\n   */\n  private async loadComponentMetadata() {\n    try {\n      // Fetch the manifest - in production this would be bundled or cached\n      const response = await fetch('/custom-elements.json');\n      const manifest = await response.json();\n\n      // Find the component definition\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName === this.component) {\n            const attributes = (declaration.attributes || []).filter(\n              (attr: AttributeMetadata) => !this.isInternalAttribute(attr.name)\n            );\n            this.componentMeta = {\n              tagName: declaration.tagName,\n              description: declaration.description,\n              attributes,\n            };\n            // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);\n            // Read property values after metadata is loaded\n            this.readPropertyValues();\n            return;\n          }\n        }\n      }\n      // console.warn(`[le-component] No metadata found for component: ${this.component}`);\n    } catch (error) {\n      // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);\n    }\n  }\n\n  /**\n   * Check if an attribute is internal (should not be shown in editor)\n   */\n  private isInternalAttribute(name: string): boolean {\n    const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];\n    return internalAttrs.includes(name);\n  }\n\n  /**\n   * Read current property values from the host element\n   */\n  private readPropertyValues() {\n    if (!this.hostElement || !this.componentMeta) return;\n\n    const values: Record<string, any> = {};\n    for (const attr of this.componentMeta.attributes) {\n      const value = this.hostElement.getAttribute(attr.name);\n      values[attr.name] = this.parseAttributeValue(value, attr.type?.text);\n    }\n    this.propertyValues = values;\n  }\n\n  /**\n   * Parse an attribute value based on its type\n   */\n  private parseAttributeValue(value: string | null, type?: string): any {\n    if (value === null) return undefined;\n    \n    if (type === 'boolean') {\n      return value !== null && value !== 'false';\n    }\n    if (type === 'number') {\n      return parseFloat(value);\n    }\n    return value;\n  }\n\n  /**\n   * Handle property value changes from the editor\n   */\n  private handlePropertyChange(attrName: string, value: any, type?: string) {\n    if (!this.hostElement) return;\n\n    // Update the host element's attribute\n    if (type === 'boolean') {\n      if (value) {\n        this.hostElement.setAttribute(attrName, '');\n      } else {\n        this.hostElement.removeAttribute(attrName);\n      }\n    } else if (value === undefined || value === '') {\n      this.hostElement.removeAttribute(attrName);\n    } else {\n      this.hostElement.setAttribute(attrName, String(value));\n    }\n\n    // Update local state\n    this.propertyValues = { ...this.propertyValues, [attrName]: value };\n  }\n\n  /**\n   * Delete this component from the DOM\n   */\n  private deleteComponent() {\n    if (!this.hostElement) return;\n\n    // Confirm deletion\n    const name = this.displayName || this.formatDisplayName(this.component);\n    if (!confirm(`Delete this ${name}?`)) return;\n\n    // Remove the host element from its parent\n    const parent = this.hostElement.parentElement;\n    if (parent) {\n      this.hostElement.remove();\n    }\n  }\n\n  /**\n   * Render the property editor form\n   */\n  private renderPropertyEditor() {\n    const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;\n\n    return (\n      <div class=\"property-editor-container\">\n        {hasProperties ? (\n          <form class=\"property-editor\" onSubmit={(e) => e.preventDefault()}>\n            {this.componentMeta!.attributes.map(attr => this.renderPropertyField(attr))}\n          </form>\n        ) : (\n          <p class=\"no-properties\">No editable properties</p>\n        )}\n        <div class=\"property-editor-actions\">\n          <le-button\n            type=\"button\"\n            variant=\"outlined\"\n            color=\"danger\"\n            full-width\n            onClick={() => this.deleteComponent()}\n          >\n            <span slot=\"icon-start\">🗑️</span>\n            <span>Delete Component</span>\n          </le-button>\n        </div>\n      </div>\n    );\n  }\n\n  /**\n   * Render a single property field based on its type\n   */\n  private renderPropertyField(attr: AttributeMetadata) {\n    const value = this.propertyValues[attr.name];\n    const type = attr.type?.text || 'string';\n\n    // Check if type is a union of string literals (e.g., \"'default' | 'outlined' | 'elevated'\")\n    const enumMatch = type.match(/^'[^']+'/);\n    if (enumMatch) {\n      const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <select\n            id={`prop-${attr.name}`}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLSelectElement).value, type)}\n          >\n            {options.map(opt => (\n              <option value={opt} selected={value === opt || (!value && attr.default?.replace(/'/g, '') === opt)}>{opt}</option>\n            ))}\n          </select>\n        </div>\n      );\n    }\n\n    // Boolean type\n    if (type === 'boolean') {\n      return (\n        <div class=\"property-field property-field--checkbox\">\n          <le-checkbox\n            name={`prop-${attr.name}`}\n            checked={value === true || value === ''}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).checked, type)}\n          >\n            {attr.name}\n            {attr.description && <div slot=\"description\">{attr.description}</div>}\n          </le-checkbox>\n        </div>\n      );\n    }\n\n    // Number type\n    if (type === 'number') {\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <input\n            type=\"number\"\n            id={`prop-${attr.name}`}\n            value={value ?? ''}\n            placeholder={attr.default}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).value, type)}\n          />\n        </div>\n      );\n    }\n\n    // Default: string/text input\n    return (\n      <div class=\"property-field\">\n        <le-string-input\n          name={`prop-${attr.name}`}\n          label={attr.name}\n          value={value ?? ''}\n          placeholder={attr.default?.replace(/'/g, '')}\n          onChange={(e: any) => this.handlePropertyChange(attr.name, e.detail.value, type)}\n        >\n          <span slot=\"description\">{attr.description}</span>\n        </le-string-input>\n      </div>\n    );\n  }\n\n  render() {\n    const name = this.displayName || this.formatDisplayName(this.component);\n\n    // In default mode, just pass through content with host classes\n    if (!this.adminMode) {\n      return (\n        <Host class={classnames(this.component, this.hostClass)} style={this.hostStyle}>\n          <slot></slot>\n        </Host>\n      );\n    }\n\n    // In admin mode, show wrapper with header and settings\n    return (\n      <Host class={classnames(this.component, this.hostClass, 'admin-mode')} style={this.hostStyle}>\n        <div class=\"le-component-wrapper\">\n          <div class=\"le-component-header\">\n            <span class=\"le-component-name\">{name}</span>\n            <le-popover \n              popoverTitle={`${name} Settings`}\n              position=\"right\"\n              align=\"start\"\n              min-width=\"300px\"\n              mode=\"default\"\n            >\n              <le-button\n                type=\"button\"\n                class=\"le-component-button\"\n                slot=\"trigger\"\n                variant=\"clear\"\n                size=\"small\"\n                aria-label=\"Edit component properties\"\n                icon-only\n              >\n                <span class=\"le-component-trigger\" slot=\"icon-only\">⚙</span>\n              </le-button>\n              {this.renderPropertyEditor()}\n            </le-popover>\n          </div>\n          <div class=\"le-component-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n/**\n * Type definitions for component metadata\n */\ninterface ComponentMetadata {\n  tagName: string;\n  description?: string;\n  attributes: AttributeMetadata[];\n}\n\ninterface AttributeMetadata {\n  name: string;\n  fieldName?: string;\n  description?: string;\n  default?: string;\n  type?: {\n    text: string;\n  };\n}\n"]}

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

@@ -0,0 +1,135 @@
+:host {
+  display: block;
+  --le-input-bg: var(--le-color-surface, #ffffff);
+  --le-input-color: var(--le-color-text-primary, #333333);
+  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);
+  --le-input-radius: var(--le-radius-sm, 4px);
+  --le-input-padding: 2px 6px;
+  --le-input-height: 1.5rem;
+  --le-input-label-color: var(--le-color-text-primary, #333333);
+  --le-input-desc-color: var(--le-color-text-secondary, #666666);
+  --le-input-placeholder-color: #999999;
+  --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);
+  --le-input-error-color: var(--le-color-danger, #dc3545);
+}
+
+.le-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.le-input-label {
+  display: block;
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--le-input-label-color);
+  margin-bottom: 2px;
+}
+
+.le-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--le-input-bg);
+  border: var(--le-input-border);
+  border-radius: var(--le-input-radius);
+  transition: border-color 0.2s;
+}
+
+.le-input-container:focus-within {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.le-input-container.has-error {
+  border: var(--le-input-border-error);
+}
+
+:host([disabled]) .le-input-container {
+  opacity: 0.6;
+  background-color: rgba(0,0,0,0.05);
+  cursor: not-allowed;
+}
+
+input {
+  flex: 1;
+  width: 100%;
+  height: calc(var(--le-input-height) - 2px);
+  padding: var(--le-input-padding);
+  border: none;
+  background: transparent;
+  color: var(--le-input-color);
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  text-align: right; /* Aligned to end */
+  -moz-appearance: textfield; /* Remove default spinners in Firefox */
+}
+
+/* Remove default spinners in Chrome/Safari/Edge */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input::placeholder {
+  color: var(--le-input-placeholder-color);
+}
+
+.icon-start, .icon-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  color: var(--le-input-desc-color);
+}
+
+.le-input-controls {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--le-color-border, #cccccc);
+  height: 100%;
+}
+
+.le-input-control-btn {
+  --le-button-border-radius: 0;
+  --le-button-padding-x: 0;
+  --le-button-padding-y: 0;
+  --le-button-small-font-size: 9.5px;
+  --le-button-small-padding: 0 0.2rem;
+  --le-button-icon-aspect-ratio: 2;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50%;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--le-input-desc-color);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.le-input-control-btn:hover {
+  background-color: rgba(0,0,0,0.05);
+  color: var(--le-color-primary, #007bff);
+}
+
+.le-input-control-btn:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.le-input-description {
+  font-size: 0.85em;
+  color: var(--le-input-desc-color);
+  margin-top: 2px;
+}
+
+.le-input-error {
+  font-size: 0.85em;
+  color: var(--le-input-error-color);
+  margin-top: 2px;
+}