le-kit 0.1.12 → 0.1.13

package/custom-elements.json

@@ -745,16 +745,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-component/le-component.tsx",
+      "path": "src/components/le-card/le-card.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "Component wrapper for admin mode editing.\n\nThis component is used internally by other components to provide admin-mode\nediting capabilities. It wraps the component's rendered output and shows\na settings popover for editing properties.\n\nIn default mode, it acts as a simple passthrough (display: contents).\nIn admin mode, it shows a border, component name header, and settings popover.\n\nThe host element is found automatically by traversing up through the shadow DOM.\n\nUsage inside a component's render method:\n```tsx\nrender() {\n  return (\n    <le-component component=\"le-card\">\n      <Host>...</Host>\n    </le-component>\n  );\n}\n```",
-          "name": "LeComponent",
+          "description": "A flexible card component with header, content, and footer slots.\n\nThe card uses le-slot wrappers for each slot area. In admin mode,\nle-slot shows placeholders for CMS editing. In default mode,\nle-slot acts as a transparent passthrough.",
+          "name": "LeCard",
+          "cssProperties": [
+            {
+              "description": "Card background color",
+              "name": "--le-card-bg"
+            },
+            {
+              "description": "Card border radius",
+              "name": "--le-card-border-radius"
+            },
+            {
+              "description": "Card box shadow",
+              "name": "--le-card-shadow"
+            },
+            {
+              "description": "Card content padding",
+              "name": "--le-card-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main card container",
+              "name": "card"
+            },
+            {
+              "description": "The card header section",
+              "name": "header"
+            },
+            {
+              "description": "The card content section",
+              "name": "content"
+            },
+            {
+              "description": "The card footer section",
+              "name": "footer"
+            }
+          ],
           "slots": [
             {
-              "description": "The component's rendered content",
+              "description": "Card header content (title, actions)",
+              "name": "header"
+            },
+            {
+              "description": "Default slot for main card content",
               "name": ""
+            },
+            {
+              "description": "Card footer content (buttons, links)",
+              "name": "footer"
             }
           ],
           "members": [
@@ -767,337 +811,492 @@
             },
             {
               "kind": "field",
-              "name": "component",
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'outlined' | 'elevated'"
+              },
+              "default": "'default'",
+              "description": "Card variant style"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the card is interactive (clickable)"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "default": "'default'",
+              "description": "Card variant style",
+              "type": {
+                "text": "'default' | 'outlined' | 'elevated'"
+              }
+            },
+            {
+              "name": "interactive",
+              "fieldName": "interactive",
+              "default": "false",
+              "description": "Whether the card is interactive (clickable)",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ],
+          "tagName": "le-card",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LeCard",
+          "declaration": {
+            "name": "LeCard",
+            "module": "src/components/le-card/le-card.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "le-card",
+          "declaration": {
+            "name": "LeCard",
+            "module": "src/components/le-card/le-card.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/le-number-input/le-number-input.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A number input component with validation, keyboard controls, and custom spinners.",
+          "name": "LeNumberInput",
+          "cssProperties": [
+            {
+              "description": "Input background color",
+              "name": "--le-input-bg"
+            },
+            {
+              "description": "Input text color",
+              "name": "--le-input-color"
+            },
+            {
+              "description": "Input border style",
+              "name": "--le-input-border"
+            },
+            {
+              "description": "Input border style when focused",
+              "name": "--le-input-border-focus"
+            },
+            {
+              "description": "Input border style when invalid",
+              "name": "--le-input-border-error"
+            },
+            {
+              "description": "Input border radius",
+              "name": "--le-input-radius"
+            },
+            {
+              "description": "Input padding",
+              "name": "--le-input-padding"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label text for the input",
+              "name": ""
+            },
+            {
+              "description": "Additional description text displayed below the input",
+              "name": "description"
+            },
+            {
+              "description": "Icon to display at the start of the input",
+              "name": "icon-start"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "description": "The value of the input"
+            },
+            {
+              "kind": "field",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "description": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name."
+              "description": "The name of the input"
             },
             {
               "kind": "field",
-              "name": "displayName",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name."
+              "description": "Label for the input"
             },
             {
               "kind": "field",
-              "name": "hostClass",
+              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Classes to apply to the host element.\nAllows parent components to pass their styling classes."
+              "description": "Placeholder text"
             },
             {
               "kind": "field",
-              "name": "hostStyle",
+              "name": "min",
               "type": {
-                "text": "{ [key: string]: string } | undefined"
+                "text": "number | undefined"
               },
-              "description": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties)."
+              "description": "Minimum allowed value"
             },
             {
               "kind": "field",
-              "name": "hostElement",
+              "name": "max",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "number | undefined"
               },
-              "privacy": "private",
-              "description": "Reference to the host element (found automatically from parent)"
+              "description": "Maximum allowed value"
             },
             {
               "kind": "field",
-              "name": "adminMode",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Step value for increment/decrement"
+            },
+            {
+              "kind": "field",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false",
-              "description": "Internal state to track admin mode"
+              "description": "Whether the input is required"
             },
             {
               "kind": "field",
-              "name": "componentMeta",
+              "name": "disabled",
               "type": {
-                "text": "ComponentMetadata | null"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "null",
-              "description": "Component metadata loaded from Custom Elements Manifest"
+              "default": "false",
+              "description": "Whether the input is disabled"
             },
             {
               "kind": "field",
-              "name": "propertyValues",
+              "name": "readonly",
               "type": {
-                "text": "Record<string, any>"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "{}",
-              "description": "Current property values of the host component"
+              "default": "false",
+              "description": "Whether the input is read-only"
             },
             {
               "kind": "field",
-              "name": "disconnectModeObserver",
+              "name": "iconStart",
               "type": {
-                "text": "() => void | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "description": "Icon for the start icon"
             },
             {
-              "kind": "method",
-              "name": "findHostElement",
-              "privacy": "private",
-              "description": "Find the host element by traversing up through shadow DOM"
+              "kind": "field",
+              "name": "showSpinners",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether to show the spinner controls"
             },
             {
-              "kind": "method",
-              "name": "formatDisplayName",
+              "kind": "field",
+              "name": "externalId",
+              "type": {
+                "text": "string"
+              },
+              "description": "External ID for linking with external systems"
+            },
+            {
+              "kind": "field",
+              "name": "isValid",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "default": "true",
+              "description": "Internal validation state"
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "tagName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Formats a tag name into a display name\ne.g., 'le-card' -> 'Card'"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "method",
-              "name": "loadComponentMetadata",
-              "privacy": "private",
-              "description": "Load component metadata from the Custom Elements Manifest"
+              "name": "valueChanged"
             },
             {
               "kind": "method",
-              "name": "isInternalAttribute",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Check if an attribute is internal (should not be shown in editor)"
+              "name": "validate",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "readPropertyValues",
-              "privacy": "private",
-              "description": "Read current property values from the host element"
+              "name": "emitChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "parseAttributeValue",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "any"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string | null"
-                  }
-                },
-                {
-                  "name": "type",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Parse an attribute value based on its type"
+              "name": "emitInput",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handlePropertyChange",
+              "name": "updateValue",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "attrName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "type",
-                  "optional": true,
+                  "name": "newValue",
                   "type": {
-                    "text": "string"
+                    "text": "number"
                   }
                 }
-              ],
-              "description": "Handle property value changes from the editor"
+              ]
             },
             {
-              "kind": "method",
-              "name": "deleteComponent",
-              "privacy": "private",
-              "description": "Delete this component from the DOM"
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleWheel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "increment",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "decrement",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderPropertyEditor",
-              "privacy": "private",
-              "description": "Render the property editor form"
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "fieldName": "value",
+              "description": "The value of the input",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "name",
+              "fieldName": "name",
+              "description": "The name of the input",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "description": "Label for the input",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "placeholder",
+              "fieldName": "placeholder",
+              "description": "Placeholder text",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "min",
+              "fieldName": "min",
+              "description": "Minimum allowed value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "fieldName": "max",
+              "description": "Maximum allowed value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "step",
+              "fieldName": "step",
+              "default": "1",
+              "description": "Step value for increment/decrement",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "required",
+              "fieldName": "required",
+              "default": "false",
+              "description": "Whether the input is required",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled",
+              "default": "false",
+              "description": "Whether the input is disabled",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "kind": "method",
-              "name": "renderPropertyField",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "attr",
-                  "type": {
-                    "text": "AttributeMetadata"
-                  }
-                }
-              ],
-              "description": "Render a single property field based on its type"
+              "name": "readonly",
+              "fieldName": "readonly",
+              "default": "false",
+              "description": "Whether the input is read-only",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "component",
-              "fieldName": "component",
-              "description": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name.",
+              "name": "icon-start",
+              "fieldName": "iconStart",
+              "description": "Icon for the start icon",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "display-name",
-              "fieldName": "displayName",
-              "description": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name.",
+              "name": "show-spinners",
+              "fieldName": "showSpinners",
+              "default": "true",
+              "description": "Whether to show the spinner controls",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
-              "name": "host-class",
-              "fieldName": "hostClass",
-              "description": "Classes to apply to the host element.\nAllows parent components to pass their styling classes.",
+              "name": "external-id",
+              "fieldName": "externalId",
+              "description": "External ID for linking with external systems",
               "type": {
                 "text": "string"
               }
+            }
+          ],
+          "tagName": "le-number-input",
+          "events": [
+            {
+              "name": "leChange",
+              "type": {
+                "text": "EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>"
+              },
+              "description": "Emitted when the value changes (on blur or Enter)"
             },
             {
-              "name": "host-style",
-              "fieldName": "hostStyle",
-              "description": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties).",
+              "name": "leInput",
               "type": {
-                "text": "{ [key: string]: string }"
-              }
+                "text": "EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>"
+              },
+              "description": "Emitted when the input value changes (on keystroke/spin)"
             }
           ],
-          "tagName": "le-component",
-          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LeComponent",
+          "name": "LeNumberInput",
           "declaration": {
-            "name": "LeComponent",
-            "module": "src/components/le-component/le-component.tsx"
+            "name": "LeNumberInput",
+            "module": "src/components/le-number-input/le-number-input.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-component",
+          "name": "le-number-input",
           "declaration": {
-            "name": "LeComponent",
-            "module": "src/components/le-component/le-component.tsx"
+            "name": "LeNumberInput",
+            "module": "src/components/le-number-input/le-number-input.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-card/le-card.tsx",
+      "path": "src/components/le-popover/le-popover.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A flexible card component with header, content, and footer slots.\n\nThe card uses le-slot wrappers for each slot area. In admin mode,\nle-slot shows placeholders for CMS editing. In default mode,\nle-slot acts as a transparent passthrough.",
-          "name": "LeCard",
-          "cssProperties": [
-            {
-              "description": "Card background color",
-              "name": "--le-card-bg"
-            },
-            {
-              "description": "Card border radius",
-              "name": "--le-card-border-radius"
-            },
-            {
-              "description": "Card box shadow",
-              "name": "--le-card-shadow"
-            },
-            {
-              "description": "Card content padding",
-              "name": "--le-card-padding"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main card container",
-              "name": "card"
-            },
-            {
-              "description": "The card header section",
-              "name": "header"
-            },
-            {
-              "description": "The card content section",
-              "name": "content"
-            },
-            {
-              "description": "The card footer section",
-              "name": "footer"
-            }
-          ],
+          "description": "A popover component for displaying floating content.\n\nUses the native HTML Popover API for proper layering with dialogs\nand other top-layer elements. Falls back gracefully in older browsers.",
+          "name": "LePopover",
           "slots": [
             {
-              "description": "Card header content (title, actions)",
-              "name": "header"
-            },
-            {
-              "description": "Default slot for main card content",
+              "description": "Content to display inside the popover",
               "name": ""
             },
             {
-              "description": "Card footer content (buttons, links)",
-              "name": "footer"
+              "description": "Element that triggers the popover (optional)",
+              "name": "trigger"
             }
           ],
           "members": [
@@ -1110,160 +1309,220 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "mode",
               "type": {
-                "text": "'default' | 'outlined' | 'elevated'"
+                "text": "'default' | 'admin'"
               },
-              "default": "'default'",
-              "description": "Card variant style"
+              "description": "Mode of the popover should be 'default' for internal use"
             },
             {
               "kind": "field",
-              "name": "interactive",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the card is interactive (clickable)"
+              "description": "Whether the popover is currently open"
             },
             {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right' | 'auto'"
+              },
+              "default": "'bottom'",
+              "description": "Position of the popover relative to its trigger"
+            },
             {
-              "name": "variant",
-              "fieldName": "variant",
-              "default": "'default'",
-              "description": "Card variant style",
+              "kind": "field",
+              "name": "align",
               "type": {
-                "text": "'default' | 'outlined' | 'elevated'"
-              }
+                "text": "'start' | 'center' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Alignment of the popover"
             },
             {
-              "name": "interactive",
-              "fieldName": "interactive",
-              "default": "false",
-              "description": "Whether the card is interactive (clickable)",
+              "kind": "field",
+              "name": "popoverTitle",
               "type": {
-                "text": "boolean"
-              }
-            }
-          ],
-          "tagName": "le-card",
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LeCard",
-          "declaration": {
-            "name": "LeCard",
-            "module": "src/components/le-card/le-card.tsx"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "le-card",
-          "declaration": {
-            "name": "LeCard",
-            "module": "src/components/le-card/le-card.tsx"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/le-checkbox/le-checkbox.tsx",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A checkbox component with support for labels, descriptions, and external IDs.",
-          "name": "LeCheckbox",
-          "cssProperties": [
+                "text": "string | undefined"
+              },
+              "description": "Optional title for the popover header"
+            },
             {
-              "description": "Size of the checkbox input",
-              "name": "--le-checkbox-size"
+              "kind": "field",
+              "name": "showClose",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether to show a close button in the header"
             },
             {
-              "description": "Color of the checkbox when checked",
-              "name": "--le-checkbox-color"
+              "kind": "field",
+              "name": "closeOnClickOutside",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether clicking outside closes the popover"
             },
             {
-              "description": "Color of the label text",
-              "name": "--le-checkbox-label-color"
+              "kind": "field",
+              "name": "closeOnEscape",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether pressing Escape closes the popover"
             },
             {
-              "description": "Color of the description text",
-              "name": "--le-checkbox-desc-color"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "default": "8",
+              "description": "Offset from the trigger element (in pixels)"
+            },
             {
-              "description": "The label text for the checkbox",
-              "name": ""
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Fixed width for the popover (e.g., '300px', '20rem')"
             },
             {
-              "description": "Additional description text displayed below the label",
-              "name": "description"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "minWidth",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'200px'",
+              "description": "Minimum width for the popover (e.g., '200px', '15rem')"
+            },
             {
               "kind": "field",
-              "name": "el",
+              "name": "maxWidth",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Maximum width for the popover (e.g., '400px', '25rem')"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "isPositioned",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Whether the checkbox is checked"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "triggerEl",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | undefined"
               },
-              "default": "false",
-              "description": "Whether the checkbox is disabled"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "popoverEl",
               "type": {
-                "text": "string"
+                "text": "HTMLElement | undefined"
               },
-              "description": "The name of the checkbox input"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "uniqueId",
               "type": {
                 "text": "string"
               },
-              "description": "The value of the checkbox input"
+              "privacy": "private",
+              "default": "`le-popover-${Math.random().toString(36).substr(2, 9)}`"
             },
             {
               "kind": "field",
-              "name": "externalId",
+              "name": "scrollParents",
               "type": {
-                "text": "string"
+                "text": "Element[]"
               },
-              "description": "External ID for linking with external systems (e.g. database ID, PDF form field ID)"
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "getScrollParents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ],
+              "description": "Find all scrollable parent elements"
+            },
+            {
+              "kind": "method",
+              "name": "addScrollListeners",
+              "privacy": "private",
+              "description": "Add scroll listeners to all scrollable parents"
+            },
+            {
+              "kind": "method",
+              "name": "removeScrollListeners",
+              "privacy": "private",
+              "description": "Remove scroll listeners"
             },
             {
               "kind": "field",
-              "name": "handleChange",
+              "name": "handleScroll",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePopoverToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleOtherPopoverOpen",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Opens the popover"
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Closes the popover"
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "description": "Toggles the popover"
+            },
+            {
+              "kind": "field",
+              "name": "handleTriggerClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updatePosition",
               "privacy": "private"
             },
             {
@@ -1273,56 +1532,125 @@
           ],
           "attributes": [
             {
-              "name": "checked",
-              "fieldName": "checked",
+              "name": "mode",
+              "fieldName": "mode",
+              "description": "Mode of the popover should be 'default' for internal use",
+              "type": {
+                "text": "'default' | 'admin'"
+              }
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
               "default": "false",
-              "description": "Whether the checkbox is checked",
+              "description": "Whether the popover is currently open",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "disabled",
-              "fieldName": "disabled",
-              "default": "false",
-              "description": "Whether the checkbox is disabled",
+              "name": "position",
+              "fieldName": "position",
+              "default": "'bottom'",
+              "description": "Position of the popover relative to its trigger",
+              "type": {
+                "text": "'top' | 'bottom' | 'left' | 'right' | 'auto'"
+              }
+            },
+            {
+              "name": "align",
+              "fieldName": "align",
+              "default": "'start'",
+              "description": "Alignment of the popover",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              }
+            },
+            {
+              "name": "popover-title",
+              "fieldName": "popoverTitle",
+              "description": "Optional title for the popover header",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "show-close",
+              "fieldName": "showClose",
+              "default": "true",
+              "description": "Whether to show a close button in the header",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "name",
-              "fieldName": "name",
-              "description": "The name of the checkbox input",
+              "name": "close-on-click-outside",
+              "fieldName": "closeOnClickOutside",
+              "default": "true",
+              "description": "Whether clicking outside closes the popover",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "close-on-escape",
+              "fieldName": "closeOnEscape",
+              "default": "true",
+              "description": "Whether pressing Escape closes the popover",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "offset",
+              "fieldName": "offset",
+              "default": "8",
+              "description": "Offset from the trigger element (in pixels)",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "width",
+              "fieldName": "width",
+              "description": "Fixed width for the popover (e.g., '300px', '20rem')",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "value",
-              "fieldName": "value",
-              "description": "The value of the checkbox input",
+              "name": "min-width",
+              "fieldName": "minWidth",
+              "default": "'200px'",
+              "description": "Minimum width for the popover (e.g., '200px', '15rem')",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "external-id",
-              "fieldName": "externalId",
-              "description": "External ID for linking with external systems (e.g. database ID, PDF form field ID)",
+              "name": "max-width",
+              "fieldName": "maxWidth",
+              "description": "Maximum width for the popover (e.g., '400px', '25rem')",
               "type": {
                 "text": "string"
               }
             }
           ],
-          "tagName": "le-checkbox",
+          "tagName": "le-popover",
           "events": [
             {
-              "name": "change",
+              "name": "lePopoverOpen",
               "type": {
-                "text": "EventEmitter<{ checked: boolean; value: string; name: string; externalId: string }>"
+                "text": "EventEmitter<void>"
               },
-              "description": "Emitted when the checked state changes"
+              "description": "Emitted when the popover opens"
+            },
+            {
+              "name": "lePopoverClose",
+              "type": {
+                "text": "EventEmitter<void>"
+              },
+              "description": "Emitted when the popover closes"
             }
           ],
           "customElement": true
@@ -1331,38 +1659,42 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LeCheckbox",
+          "name": "LePopover",
           "declaration": {
-            "name": "LeCheckbox",
-            "module": "src/components/le-checkbox/le-checkbox.tsx"
+            "name": "LePopover",
+            "module": "src/components/le-popover/le-popover.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-checkbox",
+          "name": "le-popover",
           "declaration": {
-            "name": "LeCheckbox",
-            "module": "src/components/le-checkbox/le-checkbox.tsx"
+            "name": "LePopover",
+            "module": "src/components/le-popover/le-popover.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-popover/le-popover.tsx",
+      "path": "src/components/le-popup/le-popup.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A popover component for displaying floating content.\n\nUses the native HTML Popover API for proper layering with dialogs\nand other top-layer elements. Falls back gracefully in older browsers.",
-          "name": "LePopover",
+          "description": "A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n\nUses the native HTML <dialog> element for proper modal behavior, accessibility,\nand focus management. Can be used declaratively in HTML or programmatically \nvia leAlert(), leConfirm(), lePrompt().",
+          "name": "LePopup",
           "slots": [
             {
-              "description": "Content to display inside the popover",
+              "description": "Default slot for custom body content",
               "name": ""
             },
             {
-              "description": "Element that triggers the popover (optional)",
-              "name": "trigger"
+              "description": "Custom header content (replaces title)",
+              "name": "header"
+            },
+            {
+              "description": "Custom footer content (replaces default buttons)",
+              "name": "footer"
             }
           ],
           "members": [
@@ -1373,14 +1705,6 @@
                 "text": "HTMLElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "'default' | 'admin'"
-              },
-              "description": "Mode of the popover should be 'default' for internal use"
-            },
             {
               "kind": "field",
               "name": "open",
@@ -1388,207 +1712,214 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the popover is currently open"
+              "description": "Whether the popup is currently visible"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "type",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right' | 'auto'"
+                "text": "PopupType"
               },
-              "default": "'bottom'",
-              "description": "Position of the popover relative to its trigger"
+              "default": "'alert'",
+              "description": "Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "popupTitle",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "string | undefined"
               },
-              "default": "'start'",
-              "description": "Alignment of the popover"
+              "description": "Optional title for the popup header"
             },
             {
               "kind": "field",
-              "name": "popoverTitle",
+              "name": "message",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional title for the popover header"
+              "description": "Message text to display (for alert/confirm/prompt types)"
             },
             {
               "kind": "field",
-              "name": "showClose",
+              "name": "modal",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
-              "description": "Whether to show a close button in the header"
+              "description": "Whether the popup is modal (blocks interaction with page behind)"
             },
             {
               "kind": "field",
-              "name": "closeOnClickOutside",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "PopupPosition"
               },
-              "default": "true",
-              "description": "Whether clicking outside closes the popover"
+              "default": "'center'",
+              "description": "Position of the popup on screen"
             },
             {
               "kind": "field",
-              "name": "closeOnEscape",
+              "name": "confirmText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true",
-              "description": "Whether pressing Escape closes the popover"
+              "default": "'OK'",
+              "description": "Text for the confirm/OK button"
             },
             {
               "kind": "field",
-              "name": "offset",
+              "name": "cancelText",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "8",
-              "description": "Offset from the trigger element (in pixels)"
+              "default": "'Cancel'",
+              "description": "Text for the cancel button"
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Fixed width for the popover (e.g., '300px', '20rem')"
+              "default": "''",
+              "description": "Placeholder text for prompt input"
             },
             {
               "kind": "field",
-              "name": "minWidth",
+              "name": "defaultValue",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "default": "'200px'",
-              "description": "Minimum width for the popover (e.g., '200px', '15rem')"
+              "default": "''",
+              "description": "Default value for prompt input"
             },
             {
               "kind": "field",
-              "name": "maxWidth",
+              "name": "closeOnBackdrop",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Maximum width for the popover (e.g., '400px', '25rem')"
+              "default": "true",
+              "description": "Whether clicking the backdrop closes the popup (modal only)"
             },
             {
               "kind": "field",
-              "name": "isPositioned",
+              "name": "inputValue",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "''",
+              "description": "Internal state for prompt input value"
             },
             {
               "kind": "field",
-              "name": "triggerEl",
+              "name": "dialogEl",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "HTMLDialogElement | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "popoverEl",
+              "name": "inputEl",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "HTMLInputElement | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "uniqueId",
+              "name": "resolvePromise",
               "type": {
-                "text": "string"
+                "text": "(result: PopupResult) => void | undefined"
               },
-              "privacy": "private",
-              "default": "`le-popover-${Math.random().toString(36).substr(2, 9)}`"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "scrollParents",
-              "type": {
-                "text": "Element[]"
-              },
-              "privacy": "private",
-              "default": "[]"
+              "name": "handleDialogCancel",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getScrollParents",
-              "privacy": "private",
+              "name": "show",
               "return": {
                 "type": {
-                  "text": "Element[]"
+                  "text": "Promise<PopupResult>"
                 }
               },
+              "description": "Opens the popup and returns a promise that resolves when closed"
+            },
+            {
+              "kind": "method",
+              "name": "hide",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "confirmed",
+                  "default": "false",
                   "type": {
-                    "text": "Element"
+                    "text": "boolean"
                   }
                 }
               ],
-              "description": "Find all scrollable parent elements"
+              "description": "Closes the popup with a result"
             },
             {
-              "kind": "method",
-              "name": "addScrollListeners",
-              "privacy": "private",
-              "description": "Add scroll listeners to all scrollable parents"
+              "kind": "field",
+              "name": "handleConfirm",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "removeScrollListeners",
-              "privacy": "private",
-              "description": "Remove scroll listeners"
+              "kind": "field",
+              "name": "handleCancel",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleScroll",
+              "name": "handleBackdropClick",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handlePopoverToggle",
+              "name": "handleInputChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleOtherPopoverOpen",
+              "name": "handleKeyDown",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Opens the popover"
+              "name": "hasSlot",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Closes the popover"
+              "name": "renderHeader",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "toggle",
-              "description": "Toggles the popover"
-            },
-            {
-              "kind": "field",
-              "name": "handleTriggerClick",
+              "name": "renderBody",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "updatePosition",
+              "name": "renderFooter",
               "privacy": "private"
             },
             {
@@ -1597,126 +1928,133 @@
             }
           ],
           "attributes": [
-            {
-              "name": "mode",
-              "fieldName": "mode",
-              "description": "Mode of the popover should be 'default' for internal use",
-              "type": {
-                "text": "'default' | 'admin'"
-              }
-            },
             {
               "name": "open",
               "fieldName": "open",
               "default": "false",
-              "description": "Whether the popover is currently open",
+              "description": "Whether the popup is currently visible",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "position",
-              "fieldName": "position",
-              "default": "'bottom'",
-              "description": "Position of the popover relative to its trigger",
+              "name": "type",
+              "fieldName": "type",
+              "default": "'alert'",
+              "description": "Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom",
               "type": {
-                "text": "'top' | 'bottom' | 'left' | 'right' | 'auto'"
+                "text": "PopupType"
               }
             },
             {
-              "name": "align",
-              "fieldName": "align",
-              "default": "'start'",
-              "description": "Alignment of the popover",
+              "name": "popup-title",
+              "fieldName": "popupTitle",
+              "description": "Optional title for the popup header",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "string"
               }
             },
             {
-              "name": "popover-title",
-              "fieldName": "popoverTitle",
-              "description": "Optional title for the popover header",
+              "name": "message",
+              "fieldName": "message",
+              "description": "Message text to display (for alert/confirm/prompt types)",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "show-close",
-              "fieldName": "showClose",
+              "name": "modal",
+              "fieldName": "modal",
               "default": "true",
-              "description": "Whether to show a close button in the header",
+              "description": "Whether the popup is modal (blocks interaction with page behind)",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "close-on-click-outside",
-              "fieldName": "closeOnClickOutside",
-              "default": "true",
-              "description": "Whether clicking outside closes the popover",
+              "name": "position",
+              "fieldName": "position",
+              "default": "'center'",
+              "description": "Position of the popup on screen",
               "type": {
-                "text": "boolean"
+                "text": "PopupPosition"
               }
             },
             {
-              "name": "close-on-escape",
-              "fieldName": "closeOnEscape",
-              "default": "true",
-              "description": "Whether pressing Escape closes the popover",
+              "name": "confirm-text",
+              "fieldName": "confirmText",
+              "default": "'OK'",
+              "description": "Text for the confirm/OK button",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
-              "name": "offset",
-              "fieldName": "offset",
-              "default": "8",
-              "description": "Offset from the trigger element (in pixels)",
+              "name": "cancel-text",
+              "fieldName": "cancelText",
+              "default": "'Cancel'",
+              "description": "Text for the cancel button",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
-              "name": "width",
-              "fieldName": "width",
-              "description": "Fixed width for the popover (e.g., '300px', '20rem')",
+              "name": "placeholder",
+              "fieldName": "placeholder",
+              "default": "''",
+              "description": "Placeholder text for prompt input",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "min-width",
-              "fieldName": "minWidth",
-              "default": "'200px'",
-              "description": "Minimum width for the popover (e.g., '200px', '15rem')",
+              "name": "default-value",
+              "fieldName": "defaultValue",
+              "default": "''",
+              "description": "Default value for prompt input",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "max-width",
-              "fieldName": "maxWidth",
-              "description": "Maximum width for the popover (e.g., '400px', '25rem')",
+              "name": "close-on-backdrop",
+              "fieldName": "closeOnBackdrop",
+              "default": "true",
+              "description": "Whether clicking the backdrop closes the popup (modal only)",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             }
           ],
-          "tagName": "le-popover",
+          "tagName": "le-popup",
           "events": [
             {
-              "name": "lePopoverOpen",
+              "name": "leConfirm",
               "type": {
-                "text": "EventEmitter<void>"
+                "text": "EventEmitter<PopupResult>"
               },
-              "description": "Emitted when the popover opens"
+              "description": "Emitted when the popup is confirmed (OK clicked)"
             },
             {
-              "name": "lePopoverClose",
+              "name": "leCancel",
+              "type": {
+                "text": "EventEmitter<PopupResult>"
+              },
+              "description": "Emitted when the popup is cancelled (Cancel clicked or dismissed)"
+            },
+            {
+              "name": "leOpen",
               "type": {
                 "text": "EventEmitter<void>"
               },
-              "description": "Emitted when the popover closes"
+              "description": "Emitted when the popup opens"
+            },
+            {
+              "name": "leClose",
+              "type": {
+                "text": "EventEmitter<PopupResult>"
+              },
+              "description": "Emitted when the popup closes"
             }
           ],
           "customElement": true
@@ -1725,18 +2063,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LePopover",
+          "name": "LePopup",
           "declaration": {
-            "name": "LePopover",
-            "module": "src/components/le-popover/le-popover.tsx"
+            "name": "LePopup",
+            "module": "src/components/le-popup/le-popup.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-popover",
+          "name": "le-popup",
           "declaration": {
-            "name": "LePopover",
-            "module": "src/components/le-popover/le-popover.tsx"
+            "name": "LePopup",
+            "module": "src/components/le-popup/le-popup.tsx"
           }
         }
       ]
@@ -1908,24 +2246,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-popup/le-popup.tsx",
+      "path": "src/components/le-slot/le-slot.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n\nUses the native HTML <dialog> element for proper modal behavior, accessibility,\nand focus management. Can be used declaratively in HTML or programmatically \nvia leAlert(), leConfirm(), lePrompt().",
-          "name": "LePopup",
+          "description": "Slot placeholder component for admin/CMS mode.\n\nThis component renders a visual placeholder for slots when in admin mode,\nallowing CMS systems to show available drop zones for content or inline editing.\n\nIn non-admin mode, this component renders nothing and acts as a passthrough.",
+          "name": "LeSlot",
           "slots": [
             {
-              "description": "Default slot for custom body content",
+              "description": "Default slot for placeholder content or drop zone UI",
               "name": ""
-            },
-            {
-              "description": "Custom header content (replaces title)",
-              "name": "header"
-            },
-            {
-              "description": "Custom footer content (replaces default buttons)",
-              "name": "footer"
             }
           ],
           "members": [
@@ -1938,354 +2268,359 @@
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "'slot' | 'text' | 'textarea'"
               },
-              "default": "false",
-              "description": "Whether the popup is currently visible"
+              "default": "'slot'",
+              "description": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "name",
               "type": {
-                "text": "PopupType"
+                "text": "string"
               },
-              "default": "'alert'",
-              "description": "Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom"
+              "default": "''",
+              "description": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component."
             },
             {
               "kind": "field",
-              "name": "popupTitle",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional title for the popup header"
+              "description": "Label to display in admin mode.\nIf not provided, the slot name will be used."
             },
             {
               "kind": "field",
-              "name": "message",
+              "name": "description",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Message text to display (for alert/confirm/prompt types)"
+              "description": "Description of what content this slot accepts.\nShown in admin mode to guide content editors."
             },
             {
               "kind": "field",
-              "name": "modal",
+              "name": "allowedComponents",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components."
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
-              "description": "Whether the popup is modal (blocks interaction with page behind)"
+              "description": "Whether multiple components can be dropped in this slot."
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "required",
               "type": {
-                "text": "PopupPosition"
+                "text": "boolean"
               },
-              "default": "'center'",
-              "description": "Position of the popup on screen"
+              "default": "false",
+              "description": "Whether this slot is required to have content."
             },
             {
               "kind": "field",
-              "name": "confirmText",
+              "name": "placeholder",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'OK'",
-              "description": "Text for the confirm/OK button"
+              "description": "Placeholder text for text/textarea inputs in admin mode."
             },
             {
               "kind": "field",
-              "name": "cancelText",
+              "name": "tag",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Cancel'",
-              "description": "Text for the cancel button"
+              "description": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements."
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "slotStyle",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Placeholder text for prompt input"
+              "description": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\"."
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "adminMode",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Internal state to track admin mode"
+            },
+            {
+              "kind": "field",
+              "name": "textValue",
               "type": {
                 "text": "string"
               },
+              "privacy": "private",
               "default": "''",
-              "description": "Default value for prompt input"
+              "description": "Internal state for text input value (synced from slot content)"
             },
             {
               "kind": "field",
-              "name": "closeOnBackdrop",
+              "name": "isValidHtml",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "true",
-              "description": "Whether clicking the backdrop closes the popup (modal only)"
+              "description": "Whether the current textValue contains valid HTML"
             },
             {
               "kind": "field",
-              "name": "inputValue",
+              "name": "availableComponents",
               "type": {
-                "text": "string"
+                "text": "ComponentInfo[]"
               },
-              "default": "''",
-              "description": "Internal state for prompt input value"
+              "privacy": "private",
+              "default": "[]",
+              "description": "Available components loaded from Custom Elements Manifest"
             },
             {
               "kind": "field",
-              "name": "dialogEl",
+              "name": "pickerOpen",
               "type": {
-                "text": "HTMLDialogElement | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the component picker popover is open"
             },
             {
               "kind": "field",
-              "name": "inputEl",
+              "name": "slotRef",
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "HTMLSlotElement | undefined"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Reference to the slot element to access assignedNodes"
             },
             {
               "kind": "field",
-              "name": "resolvePromise",
+              "name": "slottedElement",
               "type": {
-                "text": "(result: PopupResult) => void | undefined"
+                "text": "Element | undefined"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "description": "The original slotted element (e.g., <h3 slot=\"header\">)"
             },
             {
               "kind": "field",
-              "name": "handleDialogCancel",
+              "name": "disconnectModeObserver",
+              "type": {
+                "text": "() => void | undefined"
+              },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isUpdating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Flag to prevent re-reading content right after we updated it"
+            },
             {
               "kind": "method",
-              "name": "show",
+              "name": "readSlottedContent",
+              "privacy": "private",
+              "description": "Read content from slotted elements via assignedNodes()"
+            },
+            {
+              "kind": "method",
+              "name": "validateHtml",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<PopupResult>"
+                  "text": "boolean"
                 }
               },
-              "description": "Opens the popup and returns a promise that resolves when closed"
-            },
-            {
-              "kind": "method",
-              "name": "hide",
               "parameters": [
                 {
-                  "name": "confirmed",
-                  "default": "false",
+                  "name": "html",
                   "type": {
-                    "text": "boolean"
+                    "text": "string"
                   }
                 }
               ],
-              "description": "Closes the popup with a result"
-            },
-            {
-              "kind": "field",
-              "name": "handleConfirm",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleCancel",
-              "privacy": "private"
+              "description": "Validates if a string contains valid HTML"
             },
             {
               "kind": "field",
-              "name": "handleBackdropClick",
+              "name": "handleTextInput",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleInputChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "createSlottedElement",
+              "privacy": "private",
+              "description": "Create a new slotted element when none exists.\nThe element is appended to the host component's light DOM."
             },
             {
-              "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
+              "kind": "method",
+              "name": "loadAvailableComponents",
+              "privacy": "private",
+              "description": "Load available components from Custom Elements Manifest"
             },
             {
               "kind": "method",
-              "name": "hasSlot",
+              "name": "formatComponentName",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "name",
+                  "name": "tagName",
                   "type": {
                     "text": "string"
                   }
                 }
-              ]
+              ],
+              "description": "Format a tag name into a display name\ne.g., 'le-card' -> 'Card'"
             },
             {
               "kind": "method",
-              "name": "renderHeader",
-              "privacy": "private"
+              "name": "addComponent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Add a new component to the slot"
             },
             {
-              "kind": "method",
-              "name": "renderBody",
-              "privacy": "private"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "description": "Handle slot change event to re-read content when nodes are assigned"
             },
             {
               "kind": "method",
-              "name": "renderFooter",
-              "privacy": "private"
+              "name": "render"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "renderContent",
+              "privacy": "private"
             }
           ],
           "attributes": [
-            {
-              "name": "open",
-              "fieldName": "open",
-              "default": "false",
-              "description": "Whether the popup is currently visible",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "name": "type",
               "fieldName": "type",
-              "default": "'alert'",
-              "description": "Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom",
+              "default": "'slot'",
+              "description": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area",
               "type": {
-                "text": "PopupType"
+                "text": "'slot' | 'text' | 'textarea'"
               }
             },
             {
-              "name": "popup-title",
-              "fieldName": "popupTitle",
-              "description": "Optional title for the popup header",
+              "name": "name",
+              "fieldName": "name",
+              "default": "''",
+              "description": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "message",
-              "fieldName": "message",
-              "description": "Message text to display (for alert/confirm/prompt types)",
+              "name": "label",
+              "fieldName": "label",
+              "description": "Label to display in admin mode.\nIf not provided, the slot name will be used.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "modal",
-              "fieldName": "modal",
-              "default": "true",
-              "description": "Whether the popup is modal (blocks interaction with page behind)",
+              "name": "description",
+              "fieldName": "description",
+              "description": "Description of what content this slot accepts.\nShown in admin mode to guide content editors.",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
-              "name": "position",
-              "fieldName": "position",
-              "default": "'center'",
-              "description": "Position of the popup on screen",
+              "name": "allowed-components",
+              "fieldName": "allowedComponents",
+              "description": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components.",
               "type": {
-                "text": "PopupPosition"
+                "text": "string"
               }
             },
             {
-              "name": "confirm-text",
-              "fieldName": "confirmText",
-              "default": "'OK'",
-              "description": "Text for the confirm/OK button",
+              "name": "multiple",
+              "fieldName": "multiple",
+              "default": "true",
+              "description": "Whether multiple components can be dropped in this slot.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
-              "name": "cancel-text",
-              "fieldName": "cancelText",
-              "default": "'Cancel'",
-              "description": "Text for the cancel button",
+              "name": "required",
+              "fieldName": "required",
+              "default": "false",
+              "description": "Whether this slot is required to have content.",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
               "name": "placeholder",
               "fieldName": "placeholder",
-              "default": "''",
-              "description": "Placeholder text for prompt input",
+              "description": "Placeholder text for text/textarea inputs in admin mode.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "default-value",
-              "fieldName": "defaultValue",
-              "default": "''",
-              "description": "Default value for prompt input",
+              "name": "tag",
+              "fieldName": "tag",
+              "description": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "close-on-backdrop",
-              "fieldName": "closeOnBackdrop",
-              "default": "true",
-              "description": "Whether clicking the backdrop closes the popup (modal only)",
+              "name": "slot-style",
+              "fieldName": "slotStyle",
+              "description": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\".",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             }
           ],
-          "tagName": "le-popup",
+          "tagName": "le-slot",
           "events": [
             {
-              "name": "leConfirm",
-              "type": {
-                "text": "EventEmitter<PopupResult>"
-              },
-              "description": "Emitted when the popup is confirmed (OK clicked)"
-            },
-            {
-              "name": "leCancel",
-              "type": {
-                "text": "EventEmitter<PopupResult>"
-              },
-              "description": "Emitted when the popup is cancelled (Cancel clicked or dismissed)"
-            },
-            {
-              "name": "leOpen",
-              "type": {
-                "text": "EventEmitter<void>"
-              },
-              "description": "Emitted when the popup opens"
-            },
-            {
-              "name": "leClose",
+              "name": "leSlotChange",
               "type": {
-                "text": "EventEmitter<PopupResult>"
+                "text": "EventEmitter<{ name: string; value: string; isValid: boolean }>"
               },
-              "description": "Emitted when the popup closes"
+              "description": "Emitted when text content changes in admin mode.\nThe event detail contains the new text value and validity."
             }
           ],
           "customElement": true
@@ -2294,30 +2629,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LePopup",
+          "name": "LeSlot",
           "declaration": {
-            "name": "LePopup",
-            "module": "src/components/le-popup/le-popup.tsx"
+            "name": "LeSlot",
+            "module": "src/components/le-slot/le-slot.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-popup",
+          "name": "le-slot",
           "declaration": {
-            "name": "LePopup",
-            "module": "src/components/le-popup/le-popup.tsx"
+            "name": "LeSlot",
+            "module": "src/components/le-slot/le-slot.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-number-input/le-number-input.tsx",
+      "path": "src/components/le-string-input/le-string-input.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A number input component with validation, keyboard controls, and custom spinners.",
-          "name": "LeNumberInput",
+          "description": "A text input component with support for labels, descriptions, icons, and external IDs.",
+          "name": "LeStringInput",
           "cssProperties": [
             {
               "description": "Input background color",
@@ -2335,10 +2670,6 @@
               "description": "Input border style when focused",
               "name": "--le-input-border-focus"
             },
-            {
-              "description": "Input border style when invalid",
-              "name": "--le-input-border-error"
-            },
             {
               "description": "Input border radius",
               "name": "--le-input-radius"
@@ -2360,6 +2691,10 @@
             {
               "description": "Icon to display at the start of the input",
               "name": "icon-start"
+            },
+            {
+              "description": "Icon to display at the end of the input",
+              "name": "icon-end"
             }
           ],
           "members": [
@@ -2372,163 +2707,94 @@
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "description": "The value of the input"
-            },
-            {
-              "kind": "field",
-              "name": "name",
+              "name": "mode",
               "type": {
-                "text": "string"
+                "text": "'default' | 'admin'"
               },
-              "description": "The name of the input"
+              "description": "Mode of the popover should be 'default' for internal use"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "Label for the input"
+              "description": "The value of the input"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "description": "Placeholder text"
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Minimum allowed value"
-            },
-            {
-              "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Maximum allowed value"
-            },
-            {
-              "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Step value for increment/decrement"
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the input is required"
+              "description": "The name of the input"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
               },
-              "default": "false",
-              "description": "Whether the input is disabled"
+              "default": "'text'",
+              "description": "The type of the input (text, email, password, etc.)"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the input is read-only"
+              "description": "Label for the input"
             },
             {
               "kind": "field",
               "name": "iconStart",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
               "description": "Icon for the start icon"
             },
             {
               "kind": "field",
-              "name": "showSpinners",
+              "name": "iconEnd",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "true",
-              "description": "Whether to show the spinner controls"
+              "description": "Icon for the end icon"
             },
             {
               "kind": "field",
-              "name": "externalId",
+              "name": "placeholder",
               "type": {
                 "text": "string"
               },
-              "description": "External ID for linking with external systems"
+              "description": "Placeholder text"
             },
             {
               "kind": "field",
-              "name": "isValid",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "true",
-              "description": "Internal validation state"
+              "default": "false",
+              "description": "Whether the input is disabled"
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "readonly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "method",
-              "name": "valueChanged"
-            },
-            {
-              "kind": "method",
-              "name": "validate",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "emitChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "emitInput",
-              "privacy": "private"
+              "default": "false",
+              "description": "Whether the input is read-only"
             },
             {
-              "kind": "method",
-              "name": "updateValue",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "externalId",
+              "type": {
+                "text": "string"
+              },
+              "description": "External ID for linking with external systems"
             },
             {
               "kind": "field",
@@ -2542,22 +2808,7 @@
             },
             {
               "kind": "field",
-              "name": "handleKeyDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleWheel",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "increment",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "decrement",
+              "name": "handleClick",
               "privacy": "private"
             },
             {
@@ -2566,12 +2817,20 @@
             }
           ],
           "attributes": [
+            {
+              "name": "mode",
+              "fieldName": "mode",
+              "description": "Mode of the popover should be 'default' for internal use",
+              "type": {
+                "text": "'default' | 'admin'"
+              }
+            },
             {
               "name": "value",
               "fieldName": "value",
               "description": "The value of the input",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
@@ -2583,53 +2842,44 @@
               }
             },
             {
-              "name": "label",
-              "fieldName": "label",
-              "description": "Label for the input",
+              "name": "type",
+              "fieldName": "type",
+              "default": "'text'",
+              "description": "The type of the input (text, email, password, etc.)",
               "type": {
-                "text": "string"
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
               }
             },
             {
-              "name": "placeholder",
-              "fieldName": "placeholder",
-              "description": "Placeholder text",
+              "name": "label",
+              "fieldName": "label",
+              "description": "Label for the input",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "min",
-              "fieldName": "min",
-              "description": "Minimum allowed value",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "max",
-              "fieldName": "max",
-              "description": "Maximum allowed value",
+              "name": "icon-start",
+              "fieldName": "iconStart",
+              "description": "Icon for the start icon",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
-              "name": "step",
-              "fieldName": "step",
-              "default": "1",
-              "description": "Step value for increment/decrement",
+              "name": "icon-end",
+              "fieldName": "iconEnd",
+              "description": "Icon for the end icon",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
-              "name": "required",
-              "fieldName": "required",
-              "default": "false",
-              "description": "Whether the input is required",
+              "name": "placeholder",
+              "fieldName": "placeholder",
+              "description": "Placeholder text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
@@ -2650,23 +2900,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "name": "icon-start",
-              "fieldName": "iconStart",
-              "description": "Icon for the start icon",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "show-spinners",
-              "fieldName": "showSpinners",
-              "default": "true",
-              "description": "Whether to show the spinner controls",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "name": "external-id",
               "fieldName": "externalId",
@@ -2676,21 +2909,21 @@
               }
             }
           ],
-          "tagName": "le-number-input",
+          "tagName": "le-string-input",
           "events": [
             {
-              "name": "leChange",
+              "name": "change",
               "type": {
-                "text": "EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>"
+                "text": "EventEmitter<{ value: string; name: string; externalId: string }>"
               },
               "description": "Emitted when the value changes (on blur or Enter)"
             },
             {
-              "name": "leInput",
+              "name": "input",
               "type": {
-                "text": "EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>"
+                "text": "EventEmitter<{ value: string; name: string; externalId: string }>"
               },
-              "description": "Emitted when the input value changes (on keystroke/spin)"
+              "description": "Emitted when the input value changes (on keystroke)"
             }
           ],
           "customElement": true
@@ -2699,33 +2932,33 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LeNumberInput",
+          "name": "LeStringInput",
           "declaration": {
-            "name": "LeNumberInput",
-            "module": "src/components/le-number-input/le-number-input.tsx"
+            "name": "LeStringInput",
+            "module": "src/components/le-string-input/le-string-input.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-number-input",
+          "name": "le-string-input",
           "declaration": {
-            "name": "LeNumberInput",
-            "module": "src/components/le-number-input/le-number-input.tsx"
+            "name": "LeStringInput",
+            "module": "src/components/le-string-input/le-string-input.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-slot/le-slot.tsx",
+      "path": "src/components/le-component/le-component.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "Slot placeholder component for admin/CMS mode.\n\nThis component renders a visual placeholder for slots when in admin mode,\nallowing CMS systems to show available drop zones for content or inline editing.\n\nIn non-admin mode, this component renders nothing and acts as a passthrough.",
-          "name": "LeSlot",
+          "description": "Component wrapper for admin mode editing.\n\nThis component is used internally by other components to provide admin-mode\nediting capabilities. It wraps the component's rendered output and shows\na settings popover for editing properties.\n\nIn default mode, it acts as a simple passthrough (display: contents).\nIn admin mode, it shows a border, component name header, and settings popover.\n\nThe host element is found automatically by traversing up through the shadow DOM.\n\nUsage inside a component's render method:\n```tsx\nrender() {\n  return (\n    <le-component component=\"le-card\">\n      <Host>...</Host>\n    </le-component>\n  );\n}\n```",
+          "name": "LeComponent",
           "slots": [
             {
-              "description": "Default slot for placeholder content or drop zone UI",
+              "description": "The component's rendered content",
               "name": ""
             }
           ],
@@ -2734,160 +2967,79 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "'slot' | 'text' | 'textarea'"
-              },
-              "default": "'slot'",
-              "description": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component."
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label to display in admin mode.\nIf not provided, the slot name will be used."
-            },
-            {
-              "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Description of what content this slot accepts.\nShown in admin mode to guide content editors."
-            },
-            {
-              "kind": "field",
-              "name": "allowedComponents",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components."
-            },
-            {
-              "kind": "field",
-              "name": "multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether multiple components can be dropped in this slot."
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether this slot is required to have content."
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text for text/textarea inputs in admin mode."
-            },
-            {
-              "kind": "field",
-              "name": "tag",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements."
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "slotStyle",
+              "name": "component",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\"."
+              "description": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name."
             },
             {
               "kind": "field",
-              "name": "adminMode",
+              "name": "displayName",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "false",
-              "description": "Internal state to track admin mode"
+              "description": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name."
             },
             {
               "kind": "field",
-              "name": "textValue",
+              "name": "hostClass",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "''",
-              "description": "Internal state for text input value (synced from slot content)"
+              "description": "Classes to apply to the host element.\nAllows parent components to pass their styling classes."
             },
             {
               "kind": "field",
-              "name": "isValidHtml",
+              "name": "hostStyle",
               "type": {
-                "text": "boolean"
+                "text": "{ [key: string]: string } | undefined"
               },
-              "privacy": "private",
-              "default": "true",
-              "description": "Whether the current textValue contains valid HTML"
+              "description": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties)."
             },
             {
               "kind": "field",
-              "name": "availableComponents",
+              "name": "hostElement",
               "type": {
-                "text": "ComponentInfo[]"
+                "text": "HTMLElement | undefined"
               },
               "privacy": "private",
-              "default": "[]",
-              "description": "Available components loaded from Custom Elements Manifest"
+              "description": "Reference to the host element (found automatically from parent)"
             },
             {
               "kind": "field",
-              "name": "pickerOpen",
+              "name": "adminMode",
               "type": {
                 "text": "boolean"
               },
               "privacy": "private",
               "default": "false",
-              "description": "Whether the component picker popover is open"
+              "description": "Internal state to track admin mode"
             },
             {
               "kind": "field",
-              "name": "slotRef",
+              "name": "componentMeta",
               "type": {
-                "text": "HTMLSlotElement | undefined"
+                "text": "ComponentMetadata | null"
               },
               "privacy": "private",
-              "description": "Reference to the slot element to access assignedNodes"
+              "default": "null",
+              "description": "Component metadata loaded from Custom Elements Manifest"
             },
             {
               "kind": "field",
-              "name": "slottedElement",
+              "name": "propertyValues",
               "type": {
-                "text": "Element | undefined"
+                "text": "Record<string, any>"
               },
               "privacy": "private",
-              "description": "The original slotted element (e.g., <h3 slot=\"header\">)"
+              "default": "{}",
+              "description": "Current property values of the host component"
             },
             {
               "kind": "field",
@@ -2897,221 +3049,200 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "isUpdating",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "description": "Flag to prevent re-reading content right after we updated it"
-            },
             {
               "kind": "method",
-              "name": "readSlottedContent",
+              "name": "findHostElement",
               "privacy": "private",
-              "description": "Read content from slotted elements via assignedNodes()"
+              "description": "Find the host element by traversing up through shadow DOM"
             },
             {
               "kind": "method",
-              "name": "validateHtml",
+              "name": "formatDisplayName",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "html",
+                  "name": "tagName",
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Validates if a string contains valid HTML"
+              "description": "Formats a tag name into a display name\ne.g., 'le-card' -> 'Card'"
             },
             {
-              "kind": "field",
-              "name": "handleTextInput",
-              "privacy": "private"
+              "kind": "method",
+              "name": "loadComponentMetadata",
+              "privacy": "private",
+              "description": "Load component metadata from the Custom Elements Manifest"
             },
             {
               "kind": "method",
-              "name": "createSlottedElement",
+              "name": "isInternalAttribute",
               "privacy": "private",
-              "description": "Create a new slotted element when none exists.\nThe element is appended to the host component's light DOM."
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Check if an attribute is internal (should not be shown in editor)"
             },
             {
               "kind": "method",
-              "name": "loadAvailableComponents",
+              "name": "readPropertyValues",
               "privacy": "private",
-              "description": "Load available components from Custom Elements Manifest"
+              "description": "Read current property values from the host element"
             },
             {
               "kind": "method",
-              "name": "formatComponentName",
+              "name": "parseAttributeValue",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "string"
+                  "text": "any"
                 }
               },
               "parameters": [
                 {
-                  "name": "tagName",
+                  "name": "value",
+                  "type": {
+                    "text": "string | null"
+                  }
+                },
+                {
+                  "name": "type",
+                  "optional": true,
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Format a tag name into a display name\ne.g., 'le-card' -> 'Card'"
+              "description": "Parse an attribute value based on its type"
             },
             {
               "kind": "method",
-              "name": "addComponent",
+              "name": "handlePropertyChange",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "tagName",
+                  "name": "attrName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "type",
+                  "optional": true,
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Add a new component to the slot"
+              "description": "Handle property value changes from the editor"
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
+              "kind": "method",
+              "name": "deleteComponent",
               "privacy": "private",
-              "description": "Handle slot change event to re-read content when nodes are assigned"
+              "description": "Delete this component from the DOM"
             },
             {
               "kind": "method",
-              "name": "render"
+              "name": "renderPropertyEditor",
+              "privacy": "private",
+              "description": "Render the property editor form"
             },
             {
               "kind": "method",
-              "name": "renderContent",
-              "privacy": "private"
+              "name": "renderPropertyField",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "attr",
+                  "type": {
+                    "text": "AttributeMetadata"
+                  }
+                }
+              ],
+              "description": "Render a single property field based on its type"
+            },
+            {
+              "kind": "method",
+              "name": "render"
             }
           ],
           "attributes": [
             {
-              "name": "type",
-              "fieldName": "type",
-              "default": "'slot'",
-              "description": "The type of slot content.\n- `slot`: Default, shows a dropzone for components (default)\n- `text`: Shows a single-line text input\n- `textarea`: Shows a multi-line text area",
-              "type": {
-                "text": "'slot' | 'text' | 'textarea'"
-              }
-            },
-            {
-              "name": "name",
-              "fieldName": "name",
-              "default": "''",
-              "description": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "label",
-              "fieldName": "label",
-              "description": "Label to display in admin mode.\nIf not provided, the slot name will be used.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "description",
-              "fieldName": "description",
-              "description": "Description of what content this slot accepts.\nShown in admin mode to guide content editors.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "allowed-components",
-              "fieldName": "allowedComponents",
-              "description": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components.",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "multiple",
-              "fieldName": "multiple",
-              "default": "true",
-              "description": "Whether multiple components can be dropped in this slot.",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "required",
-              "fieldName": "required",
-              "default": "false",
-              "description": "Whether this slot is required to have content.",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "placeholder",
-              "fieldName": "placeholder",
-              "description": "Placeholder text for text/textarea inputs in admin mode.",
+              "name": "component",
+              "fieldName": "component",
+              "description": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "tag",
-              "fieldName": "tag",
-              "description": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements.",
+              "name": "display-name",
+              "fieldName": "displayName",
+              "description": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name.",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "slot-style",
-              "fieldName": "slotStyle",
-              "description": "CSS styles for the slot dropzone container.\nUseful for layouts - e.g., \"flex-direction: row\" for horizontal stacks.\nOnly applies in admin mode for type=\"slot\".",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "le-slot",
-          "events": [
+              "name": "host-class",
+              "fieldName": "hostClass",
+              "description": "Classes to apply to the host element.\nAllows parent components to pass their styling classes.",
+              "type": {
+                "text": "string"
+              }
+            },
             {
-              "name": "leSlotChange",
+              "name": "host-style",
+              "fieldName": "hostStyle",
+              "description": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties).",
               "type": {
-                "text": "EventEmitter<{ name: string; value: string; isValid: boolean }>"
-              },
-              "description": "Emitted when text content changes in admin mode.\nThe event detail contains the new text value and validity."
+                "text": "{ [key: string]: string }"
+              }
             }
           ],
+          "tagName": "le-component",
+          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LeSlot",
+          "name": "LeComponent",
           "declaration": {
-            "name": "LeSlot",
-            "module": "src/components/le-slot/le-slot.tsx"
+            "name": "LeComponent",
+            "module": "src/components/le-component/le-component.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-slot",
+          "name": "le-component",
           "declaration": {
-            "name": "LeSlot",
-            "module": "src/components/le-slot/le-slot.tsx"
+            "name": "LeComponent",
+            "module": "src/components/le-component/le-component.tsx"
           }
         }
       ]
@@ -3415,54 +3546,38 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-string-input/le-string-input.tsx",
+      "path": "src/components/le-checkbox/le-checkbox.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A text input component with support for labels, descriptions, icons, and external IDs.",
-          "name": "LeStringInput",
+          "description": "A checkbox component with support for labels, descriptions, and external IDs.",
+          "name": "LeCheckbox",
           "cssProperties": [
             {
-              "description": "Input background color",
-              "name": "--le-input-bg"
-            },
-            {
-              "description": "Input text color",
-              "name": "--le-input-color"
-            },
-            {
-              "description": "Input border style",
-              "name": "--le-input-border"
+              "description": "Size of the checkbox input",
+              "name": "--le-checkbox-size"
             },
             {
-              "description": "Input border style when focused",
-              "name": "--le-input-border-focus"
+              "description": "Color of the checkbox when checked",
+              "name": "--le-checkbox-color"
             },
             {
-              "description": "Input border radius",
-              "name": "--le-input-radius"
+              "description": "Color of the label text",
+              "name": "--le-checkbox-label-color"
             },
             {
-              "description": "Input padding",
-              "name": "--le-input-padding"
+              "description": "Color of the description text",
+              "name": "--le-checkbox-desc-color"
             }
           ],
           "slots": [
             {
-              "description": "The label text for the input",
+              "description": "The label text for the checkbox",
               "name": ""
             },
             {
-              "description": "Additional description text displayed below the input",
+              "description": "Additional description text displayed below the label",
               "name": "description"
-            },
-            {
-              "description": "Icon to display at the start of the input",
-              "name": "icon-start"
-            },
-            {
-              "description": "Icon to display at the end of the input",
-              "name": "icon-end"
             }
           ],
           "members": [
@@ -3475,19 +3590,21 @@
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "checked",
               "type": {
-                "text": "'default' | 'admin'"
+                "text": "boolean"
               },
-              "description": "Mode of the popover should be 'default' for internal use"
+              "default": "false",
+              "description": "Whether the checkbox is checked"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The value of the input"
+              "default": "false",
+              "description": "Whether the checkbox is disabled"
             },
             {
               "kind": "field",
@@ -3495,66 +3612,15 @@
               "type": {
                 "text": "string"
               },
-              "description": "The name of the input"
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
-              },
-              "default": "'text'",
-              "description": "The type of the input (text, email, password, etc.)"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "description": "Label for the input"
-            },
-            {
-              "kind": "field",
-              "name": "iconStart",
-              "type": {
-                "text": "string"
-              },
-              "description": "Icon for the start icon"
-            },
-            {
-              "kind": "field",
-              "name": "iconEnd",
-              "type": {
-                "text": "string"
-              },
-              "description": "Icon for the end icon"
+              "description": "The name of the checkbox input"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "Placeholder text"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the input is disabled"
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the input is read-only"
+              "description": "The value of the checkbox input"
             },
             {
               "kind": "field",
@@ -3562,23 +3628,13 @@
               "type": {
                 "text": "string"
               },
-              "description": "External ID for linking with external systems"
-            },
-            {
-              "kind": "field",
-              "name": "handleInput",
-              "privacy": "private"
+              "description": "External ID for linking with external systems (e.g. database ID, PDF form field ID)"
             },
             {
               "kind": "field",
               "name": "handleChange",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "render"
@@ -3586,112 +3642,56 @@
           ],
           "attributes": [
             {
-              "name": "mode",
-              "fieldName": "mode",
-              "description": "Mode of the popover should be 'default' for internal use",
+              "name": "checked",
+              "fieldName": "checked",
+              "default": "false",
+              "description": "Whether the checkbox is checked",
               "type": {
-                "text": "'default' | 'admin'"
+                "text": "boolean"
               }
             },
             {
-              "name": "value",
-              "fieldName": "value",
-              "description": "The value of the input",
+              "name": "disabled",
+              "fieldName": "disabled",
+              "default": "false",
+              "description": "Whether the checkbox is disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
               "name": "name",
               "fieldName": "name",
-              "description": "The name of the input",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "type",
-              "fieldName": "type",
-              "default": "'text'",
-              "description": "The type of the input (text, email, password, etc.)",
-              "type": {
-                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
-              }
-            },
-            {
-              "name": "label",
-              "fieldName": "label",
-              "description": "Label for the input",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "icon-start",
-              "fieldName": "iconStart",
-              "description": "Icon for the start icon",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "icon-end",
-              "fieldName": "iconEnd",
-              "description": "Icon for the end icon",
+              "description": "The name of the checkbox input",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "placeholder",
-              "fieldName": "placeholder",
-              "description": "Placeholder text",
+              "name": "value",
+              "fieldName": "value",
+              "description": "The value of the checkbox input",
               "type": {
                 "text": "string"
               }
             },
-            {
-              "name": "disabled",
-              "fieldName": "disabled",
-              "default": "false",
-              "description": "Whether the input is disabled",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "readonly",
-              "fieldName": "readonly",
-              "default": "false",
-              "description": "Whether the input is read-only",
-              "type": {
-                "text": "boolean"
-              }
-            },
             {
               "name": "external-id",
               "fieldName": "externalId",
-              "description": "External ID for linking with external systems",
+              "description": "External ID for linking with external systems (e.g. database ID, PDF form field ID)",
               "type": {
                 "text": "string"
               }
             }
           ],
-          "tagName": "le-string-input",
+          "tagName": "le-checkbox",
           "events": [
             {
               "name": "change",
               "type": {
-                "text": "EventEmitter<{ value: string; name: string; externalId: string }>"
-              },
-              "description": "Emitted when the value changes (on blur or Enter)"
-            },
-            {
-              "name": "input",
-              "type": {
-                "text": "EventEmitter<{ value: string; name: string; externalId: string }>"
+                "text": "EventEmitter<{ checked: boolean; value: string; name: string; externalId: string }>"
               },
-              "description": "Emitted when the input value changes (on keystroke)"
+              "description": "Emitted when the checked state changes"
             }
           ],
           "customElement": true
@@ -3700,18 +3700,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LeStringInput",
+          "name": "LeCheckbox",
           "declaration": {
-            "name": "LeStringInput",
-            "module": "src/components/le-string-input/le-string-input.tsx"
+            "name": "LeCheckbox",
+            "module": "src/components/le-checkbox/le-checkbox.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-string-input",
+          "name": "le-checkbox",
           "declaration": {
-            "name": "LeStringInput",
-            "module": "src/components/le-string-input/le-string-input.tsx"
+            "name": "LeCheckbox",
+            "module": "src/components/le-checkbox/le-checkbox.tsx"
           }
         }
       ]