le-kit 0.3.4 → 0.4.0

package/dist/le-kit/dist/components/assets/custom-elements.json

@@ -527,139 +527,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/le-card/le-card.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"
-            }
-          ],
-          "slots": [
-            {
-              "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": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "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-box/le-box.tsx",
@@ -1105,60 +972,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-button/le-button.tsx",
+      "path": "src/components/le-card/le-card.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A flexible button component with multiple variants and states.",
-          "name": "LeButton",
+          "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": "Button background color",
-              "name": "--le-button-bg"
-            },
-            {
-              "description": "Button text color",
-              "name": "--le-button-color"
+              "description": "Card background color",
+              "name": "--le-card-bg"
             },
             {
-              "description": "Button border radius",
-              "name": "--le-button-border-radius"
+              "description": "Card border radius",
+              "name": "--le-card-border-radius"
             },
             {
-              "description": "Button horizontal padding",
-              "name": "--le-button-padding-x"
+              "description": "Card box shadow",
+              "name": "--le-card-shadow"
             },
             {
-              "description": "Button vertical padding",
-              "name": "--le-button-padding-y"
+              "description": "Card content padding",
+              "name": "--le-card-padding"
             }
           ],
           "cssParts": [
             {
-              "description": "The native button element",
-              "name": "button"
+              "description": "The main card container",
+              "name": "card"
             },
             {
-              "description": "The button content wrapper",
-              "name": "content"
+              "description": "The card header section",
+              "name": "header"
             },
             {
-              "description": "The start icon slot",
-              "name": "icon-start"
+              "description": "The card content section",
+              "name": "content"
             },
             {
-              "description": "The end icon slot",
-              "name": "icon-end"
+              "description": "The card footer section",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "Button text content",
+              "description": "Card header content (title, actions)",
+              "name": "header"
+            },
+            {
+              "description": "Default slot for main card content",
               "name": ""
             },
             {
-              "description": "Icon for icon-only buttons",
-              "name": "icon-only"
+              "description": "Card footer content (buttons, links)",
+              "name": "footer"
             }
           ],
           "members": [
@@ -1169,76 +1036,209 @@
                 "text": "HTMLElement"
               }
             },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "'default' | 'admin'"
-              },
-              "description": "Mode of the popover should be 'default' for internal use"
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'solid' | 'outlined' | 'clear' | 'system'"
-              },
-              "default": "'solid'",
-              "description": "Button variant style"
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'"
-              },
-              "default": "'primary'",
-              "description": "Button color theme (uses theme semantic colors)"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'default' | 'outlined' | 'elevated'"
               },
-              "default": "'medium'",
-              "description": "Button size"
+              "default": "'default'",
+              "description": "Card variant style"
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the button is in a selected/active state"
+              "description": "Whether the card is interactive (clickable)"
             },
             {
-              "kind": "field",
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the button takes full width of its container"
-            },
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "iconOnly",
+              "name": "variant",
+              "fieldName": "variant",
+              "default": "'default'",
+              "description": "Card variant style",
               "type": {
-                "text": "string | Node | undefined"
-              },
-              "description": "Icon only button image or emoji\nif this prop is set, the button will render only the icon slot"
+                "text": "'default' | 'outlined' | 'elevated'"
+              }
             },
             {
-              "kind": "field",
-              "name": "iconStart",
+              "name": "interactive",
+              "fieldName": "interactive",
+              "default": "false",
+              "description": "Whether the card is interactive (clickable)",
               "type": {
-                "text": "string | Node | undefined"
-              },
-              "description": "Start icon image or emoji"
-            },
-            {
+                "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-button/le-button.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A flexible button component with multiple variants and states.",
+          "name": "LeButton",
+          "cssProperties": [
+            {
+              "description": "Button background color",
+              "name": "--le-button-bg"
+            },
+            {
+              "description": "Button text color",
+              "name": "--le-button-color"
+            },
+            {
+              "description": "Button border radius",
+              "name": "--le-button-border-radius"
+            },
+            {
+              "description": "Button horizontal padding",
+              "name": "--le-button-padding-x"
+            },
+            {
+              "description": "Button vertical padding",
+              "name": "--le-button-padding-y"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The native button element",
+              "name": "button"
+            },
+            {
+              "description": "The button content wrapper",
+              "name": "content"
+            },
+            {
+              "description": "The start icon slot",
+              "name": "icon-start"
+            },
+            {
+              "description": "The end icon slot",
+              "name": "icon-end"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Button text content",
+              "name": ""
+            },
+            {
+              "description": "Icon for icon-only buttons",
+              "name": "icon-only"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'default' | 'admin'"
+              },
+              "description": "Mode of the popover should be 'default' for internal use"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'solid' | 'outlined' | 'clear' | 'system'"
+              },
+              "default": "'solid'",
+              "description": "Button variant style"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'"
+              },
+              "default": "'primary'",
+              "description": "Button color theme (uses theme semantic colors)"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Button size"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is in a selected/active state"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button takes full width of its container"
+            },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "string | Node | undefined"
+              },
+              "description": "Icon only button image or emoji\nif this prop is set, the button will render only the icon slot"
+            },
+            {
+              "kind": "field",
+              "name": "iconStart",
+              "type": {
+                "text": "string | Node | undefined"
+              },
+              "description": "Start icon image or emoji"
+            },
+            {
               "kind": "field",
               "name": "iconEnd",
               "type": {
@@ -7313,18 +7313,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-slot/le-slot.tsx",
+      "path": "src/components/le-side-panel/le-side-panel.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",
-          "slots": [
-            {
-              "description": "Default slot for placeholder content or drop zone UI",
-              "name": ""
-            }
-          ],
+          "description": "",
+          "name": "LeSidePanel",
           "members": [
             {
               "kind": "field",
@@ -7335,163 +7329,1185 @@
             },
             {
               "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",
+              "name": "panelId",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The name of the slot this placeholder represents.\nShould match the slot name in the parent component."
+              "description": "Optional id used to match toggle requests.\nIf set, the panel only responds to toggle events with the same `panelId`."
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "side",
               "type": {
-                "text": "string | undefined"
+                "text": "LeSidePanelSide"
               },
-              "description": "Label to display in admin mode.\nIf not provided, the slot name will be used."
+              "default": "'start'",
+              "description": "Which side the panel is attached to."
             },
             {
               "kind": "field",
-              "name": "description",
+              "name": "collapseAt",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Description of what content this slot accepts.\nShown in admin mode to guide content editors."
+              "description": "Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters \"narrow\" mode."
             },
             {
               "kind": "field",
-              "name": "allowedComponents",
+              "name": "narrowBehavior",
               "type": {
-                "text": "string | undefined"
+                "text": "LeSidePanelNarrowBehavior"
               },
-              "description": "Comma-separated list of allowed component tags for this slot.\nUsed by CMS to filter available components."
+              "default": "'overlay'",
+              "description": "Behavior when in narrow mode."
             },
             {
               "kind": "field",
-              "name": "multiple",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Whether multiple components can be dropped in this slot."
+              "default": "false",
+              "description": "Panel open state for narrow mode.\n- overlay: controls modal drawer visibility\n- push: controls whether panel is shown (non-modal)"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "collapsed",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this slot is required to have content."
+              "description": "Panel collapsed state for wide mode (fully hidden)."
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "panelWidth",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Placeholder text for text/textarea inputs in admin mode."
+              "default": "280",
+              "description": "Default panel width in pixels."
             },
             {
               "kind": "field",
-              "name": "tag",
+              "name": "minPanelWidth",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "The HTML tag to create when there's no slotted element.\nUsed with type=\"text\" or type=\"textarea\" to auto-create elements."
+              "default": "220",
+              "description": "Minimum allowed width when resizable."
             },
             {
               "kind": "field",
-              "name": "slotStyle",
+              "name": "maxPanelWidth",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "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\"."
+              "default": "420",
+              "description": "Maximum allowed width when resizable."
             },
             {
               "kind": "field",
-              "name": "adminMode",
+              "name": "resizable",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false",
-              "description": "Internal state to track admin mode"
+              "description": "Allows users to resize the panel by dragging its edge."
             },
             {
               "kind": "field",
-              "name": "textValue",
+              "name": "persistKey",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "''",
-              "description": "Internal state for text input value (synced from slot content)"
+              "description": "When set, panel width + collapsed state are persisted in localStorage."
             },
             {
               "kind": "field",
-              "name": "isValidHtml",
+              "name": "showCloseButton",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "true",
-              "description": "Whether the current textValue contains valid HTML"
+              "description": "Show a close button inside the panel (primarily used in narrow overlay mode)."
             },
             {
               "kind": "field",
-              "name": "availableComponents",
+              "name": "autoShowOnWide",
               "type": {
-                "text": "ComponentInfo[]"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "[]",
-              "description": "Available components loaded from Custom Elements Manifest"
+              "default": "true",
+              "description": "When crossing to wide mode, automatically show the panel (collapsed=false)."
             },
             {
               "kind": "field",
-              "name": "pickerOpen",
+              "name": "autoHideOnNarrow",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false",
-              "description": "Whether the component picker popover is open"
+              "default": "true",
+              "description": "When crossing to narrow mode, automatically hide the panel (open=false)."
             },
             {
               "kind": "field",
-              "name": "slotRef",
+              "name": "panelLabel",
               "type": {
-                "text": "HTMLSlotElement | undefined"
+                "text": "string"
               },
-              "privacy": "private",
-              "description": "Reference to the slot element to access assignedNodes"
+              "default": "'Navigation'",
+              "description": "Accessible label for the panel navigation region."
             },
             {
               "kind": "field",
-              "name": "slottedElement",
+              "name": "isNarrow",
               "type": {
-                "text": "Element | undefined"
+                "text": "boolean"
               },
               "privacy": "private",
-              "description": "The original slotted element (e.g., <h3 slot=\"header\">)"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disconnectModeObserver",
+              "name": "responsiveReady",
               "type": {
-                "text": "() => void | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overlayMounted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overlayVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "currentWidthPx",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resizing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "panelEl",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "overlayWrapEl",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "focusedBeforeOpen",
+              "type": {
+                "text": "HTMLElement | null | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dragPointerId",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dragStartX",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dragStartWidth",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isModalOverlayActive",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncOverlayToState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onPanelWidthChanged",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "onCollapsedChanged",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "onOpenChanged",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onResponsivePropChanged",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "onDocumentKeyDown",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onToggleRequest",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "CustomEvent<LeSidePanelRequestToggleDetail>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "applyActionToOpen",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "LeSidePanelToggleAction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "applyActionToCollapsed",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "action",
+                  "type": {
+                    "text": "LeSidePanelToggleAction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "recomputeNarrow",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "restorePersistedState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "persistState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "focusFirstInsidePanel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getFocusableElements",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "restoreFocusAfterClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onOverlayTransitionEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onOverlayPointerDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "startResizeDrag",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onResizeDragMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onResizeDragEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "teardownDragListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderPanelInner",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "opts",
+                  "optional": true,
+                  "type": {
+                    "text": "{ renderPanelSlot?: boolean }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "panel-id",
+              "fieldName": "panelId",
+              "description": "Optional id used to match toggle requests.\nIf set, the panel only responds to toggle events with the same `panelId`.",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "side",
+              "fieldName": "side",
+              "default": "'start'",
+              "description": "Which side the panel is attached to.",
+              "type": {
+                "text": "LeSidePanelSide"
+              }
+            },
+            {
+              "name": "collapse-at",
+              "fieldName": "collapseAt",
+              "description": "Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters \"narrow\" mode.",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "narrow-behavior",
+              "fieldName": "narrowBehavior",
+              "default": "'overlay'",
+              "description": "Behavior when in narrow mode.",
+              "type": {
+                "text": "LeSidePanelNarrowBehavior"
+              }
+            },
+            {
+              "name": "open",
+              "fieldName": "open",
+              "default": "false",
+              "description": "Panel open state for narrow mode.\n- overlay: controls modal drawer visibility\n- push: controls whether panel is shown (non-modal)",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "collapsed",
+              "fieldName": "collapsed",
+              "default": "false",
+              "description": "Panel collapsed state for wide mode (fully hidden).",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "panel-width",
+              "fieldName": "panelWidth",
+              "default": "280",
+              "description": "Default panel width in pixels.",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "min-panel-width",
+              "fieldName": "minPanelWidth",
+              "default": "220",
+              "description": "Minimum allowed width when resizable.",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max-panel-width",
+              "fieldName": "maxPanelWidth",
+              "default": "420",
+              "description": "Maximum allowed width when resizable.",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "resizable",
+              "fieldName": "resizable",
+              "default": "false",
+              "description": "Allows users to resize the panel by dragging its edge.",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "persist-key",
+              "fieldName": "persistKey",
+              "description": "When set, panel width + collapsed state are persisted in localStorage.",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "show-close-button",
+              "fieldName": "showCloseButton",
+              "default": "true",
+              "description": "Show a close button inside the panel (primarily used in narrow overlay mode).",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "auto-show-on-wide",
+              "fieldName": "autoShowOnWide",
+              "default": "true",
+              "description": "When crossing to wide mode, automatically show the panel (collapsed=false).",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "auto-hide-on-narrow",
+              "fieldName": "autoHideOnNarrow",
+              "default": "true",
+              "description": "When crossing to narrow mode, automatically hide the panel (open=false).",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "panel-label",
+              "fieldName": "panelLabel",
+              "default": "'Navigation'",
+              "description": "Accessible label for the panel navigation region.",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "le-side-panel",
+          "events": [
+            {
+              "name": "leSidePanelOpenChange",
+              "type": {
+                "text": "EventEmitter<{ open: boolean; panelId?: string }>"
+              }
+            },
+            {
+              "name": "leSidePanelCollapsedChange",
+              "type": {
+                "text": "EventEmitter<{ collapsed: boolean; panelId?: string }>"
+              }
+            },
+            {
+              "name": "leSidePanelWidthChange",
+              "type": {
+                "text": "EventEmitter<{ width: number; panelId?: string }>"
+              }
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LeSidePanel",
+          "declaration": {
+            "name": "LeSidePanel",
+            "module": "src/components/le-side-panel/le-side-panel.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "le-side-panel",
+          "declaration": {
+            "name": "LeSidePanel",
+            "module": "src/components/le-side-panel/le-side-panel.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/le-side-panel-toggle/le-side-panel-toggle.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LeSidePanelToggle",
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "panelId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional id used to target a specific panel."
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "LeSidePanelToggleAction"
+              },
+              "default": "'toggle'",
+              "description": "Action to emit. Default toggles the panel."
+            },
+            {
+              "kind": "field",
+              "name": "shortcut",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional keyboard shortcut like `Mod+B` or `Alt+N`."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the toggle."
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'default' | 'admin'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'solid' | 'outlined' | 'clear' | 'system'"
+              },
+              "default": "'solid'"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'"
+              },
+              "default": "'primary'"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "string | Node | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconStart",
+              "type": {
+                "text": "string | Node | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconEnd",
+              "type": {
+                "text": "string | Node | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'button' | 'submit' | 'reset'"
+              },
+              "default": "'button'"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "'start' | 'center' | 'space-between' | 'end'"
+              },
+              "default": "'center'"
+            },
+            {
+              "kind": "field",
+              "name": "shortcutSpec",
+              "type": {
+                "text": "ShortcutSpec | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "buttonEl",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "forwardedNodes",
+              "type": {
+                "text": "ChildNode[] | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onShortcutChanged",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "syncShortcutListener",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getResolvedPanelId",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emitRequest",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onPanelStateChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncForwardedNodesIntoButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncAriaExpanded",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "panel-id",
+              "fieldName": "panelId",
+              "description": "Optional id used to target a specific panel.",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "action",
+              "fieldName": "action",
+              "default": "'toggle'",
+              "description": "Action to emit. Default toggles the panel.",
+              "type": {
+                "text": "LeSidePanelToggleAction"
+              }
+            },
+            {
+              "name": "shortcut",
+              "fieldName": "shortcut",
+              "description": "Optional keyboard shortcut like `Mod+B` or `Alt+N`.",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled",
+              "default": "false",
+              "description": "Disables the toggle.",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "mode",
+              "fieldName": "mode",
+              "type": {
+                "text": "'default' | 'admin'"
+              }
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "default": "'solid'",
+              "type": {
+                "text": "'solid' | 'outlined' | 'clear' | 'system'"
+              }
+            },
+            {
+              "name": "color",
+              "fieldName": "color",
+              "default": "'primary'",
+              "type": {
+                "text": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'"
+              }
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              }
+            },
+            {
+              "name": "selected",
+              "fieldName": "selected",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "full-width",
+              "fieldName": "fullWidth",
+              "default": "false",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "name": "icon-only",
+              "fieldName": "iconOnly",
+              "type": {
+                "text": "string | Node"
+              }
+            },
+            {
+              "name": "icon-start",
+              "fieldName": "iconStart",
+              "type": {
+                "text": "string | Node"
+              }
+            },
+            {
+              "name": "icon-end",
+              "fieldName": "iconEnd",
+              "type": {
+                "text": "string | Node"
+              }
+            },
+            {
+              "name": "type",
+              "fieldName": "type",
+              "default": "'button'",
+              "type": {
+                "text": "'button' | 'submit' | 'reset'"
+              }
+            },
+            {
+              "name": "href",
+              "fieldName": "href",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "target",
+              "fieldName": "target",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "align",
+              "fieldName": "align",
+              "default": "'center'",
+              "type": {
+                "text": "'start' | 'center' | 'space-between' | 'end'"
+              }
+            }
+          ],
+          "tagName": "le-side-panel-toggle",
+          "events": [
+            {
+              "name": "leSidePanelRequestToggle",
+              "type": {
+                "text": "EventEmitter<LeSidePanelRequestToggleDetail>"
+              }
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LeSidePanelToggle",
+          "declaration": {
+            "name": "LeSidePanelToggle",
+            "module": "src/components/le-side-panel-toggle/le-side-panel-toggle.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "le-side-panel-toggle",
+          "declaration": {
+            "name": "LeSidePanelToggle",
+            "module": "src/components/le-side-panel-toggle/le-side-panel-toggle.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/le-slot/le-slot.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",
+          "slots": [
+            {
+              "description": "Default slot for placeholder content or drop zone UI",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "slotStyle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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": "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": "Internal state for text input value (synced from slot content)"
+            },
+            {
+              "kind": "field",
+              "name": "isValidHtml",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true",
+              "description": "Whether the current textValue contains valid HTML"
+            },
+            {
+              "kind": "field",
+              "name": "availableComponents",
+              "type": {
+                "text": "ComponentInfo[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Available components loaded from Custom Elements Manifest"
+            },
+            {
+              "kind": "field",
+              "name": "pickerOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the component picker popover is open"
+            },
+            {
+              "kind": "field",
+              "name": "slotRef",
+              "type": {
+                "text": "HTMLSlotElement | undefined"
+              },
+              "privacy": "private",
+              "description": "Reference to the slot element to access assignedNodes"
+            },
+            {
+              "kind": "field",
+              "name": "slottedElement",
+              "type": {
+                "text": "Element | undefined"
+              },
+              "privacy": "private",
+              "description": "The original slotted element (e.g., <h3 slot=\"header\">)"
+            },
+            {
+              "kind": "field",
+              "name": "disconnectModeObserver",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -7714,28 +8730,54 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-stack/le-stack.tsx",
+      "path": "src/components/le-string-input/le-string-input.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A flexible stack layout component using CSS flexbox.\n\n`le-stack` arranges its children in a row (horizontal) or column (vertical)\nwith configurable spacing, alignment, and wrapping behavior. Perfect for\ncreating responsive layouts.",
-          "name": "LeStack",
+          "description": "A text input component with support for labels, descriptions, icons, and external IDs.",
+          "name": "LeStringInput",
           "cssProperties": [
             {
-              "description": "Gap between items (defaults to var(--le-space-md))",
-              "name": "--le-stack-gap"
-            }
-          ],
-          "cssParts": [
+              "description": "Input background color",
+              "name": "--le-input-bg"
+            },
             {
-              "description": "The main stack container",
-              "name": "stack"
+              "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 radius",
+              "name": "--le-input-radius"
+            },
+            {
+              "description": "Input padding",
+              "name": "--le-input-padding"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for stack items (le-box components recommended)",
+              "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"
+            },
+            {
+              "description": "Icon to display at the end of the input",
+              "name": "icon-end"
             }
           ],
           "members": [
@@ -7748,139 +8790,126 @@
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "inputRef",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "(el: HTMLInputElement) => void | undefined"
               },
-              "default": "'horizontal'",
-              "description": "Direction of the stack layout"
+              "description": "Pass the ref of the input element to the parent component"
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "mode",
               "type": {
-                "text": "string | undefined"
+                "text": "'default' | 'admin'"
               },
-              "description": "Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')"
+              "description": "Mode of the popover should be 'default' for internal use"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "value",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+                "text": "string"
               },
-              "default": "'stretch'",
-              "description": "Alignment of items on the cross axis"
+              "description": "The value of the input"
             },
             {
               "kind": "field",
-              "name": "justify",
+              "name": "name",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'"
+                "text": "string"
               },
-              "default": "'start'",
-              "description": "Distribution of items on the main axis"
+              "description": "The name of the input"
             },
             {
               "kind": "field",
-              "name": "wrap",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
               },
-              "default": "false",
-              "description": "Whether items should wrap to multiple lines"
+              "default": "'text'",
+              "description": "The type of the input (text, email, password, etc.)"
             },
             {
               "kind": "field",
-              "name": "alignContent",
+              "name": "label",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around'"
+                "text": "string"
               },
-              "default": "'stretch'",
-              "description": "Alignment of wrapped lines (only applies when wrap is true)"
+              "description": "Label for the input"
             },
             {
               "kind": "field",
-              "name": "reverse",
+              "name": "iconStart",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether to reverse the order of items"
+              "description": "Icon for the start icon"
             },
             {
               "kind": "field",
-              "name": "maxItems",
+              "name": "iconEnd",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "Maximum number of items allowed in the stack (for CMS validation)"
+              "description": "Icon for the end icon"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "description": "Placeholder text"
+            },
+            {
+              "kind": "field",
+              "name": "hideDescription",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide description slot"
             },
             {
               "kind": "field",
-              "name": "fullWidth",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the stack should take full width of its container"
+              "description": "Whether the input is disabled"
             },
             {
               "kind": "field",
-              "name": "fullHeight",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the stack should take full height of its container"
+              "description": "Whether the input is read-only"
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "externalId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Padding inside the stack container (CSS value)"
-            },
-            {
-              "kind": "method",
-              "name": "getFlexDirection",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "description": "External ID for linking with external systems"
             },
             {
-              "kind": "method",
-              "name": "getAlignItems",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "getJustifyContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "kind": "field",
+              "name": "handleChange",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "getAlignContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -7889,308 +8918,322 @@
           ],
           "attributes": [
             {
-              "name": "direction",
-              "fieldName": "direction",
-              "default": "'horizontal'",
-              "description": "Direction of the stack layout",
+              "name": "input-ref",
+              "fieldName": "inputRef",
+              "description": "Pass the ref of the input element to the parent component",
               "type": {
-                "text": "'horizontal' | 'vertical'"
+                "text": "(el: HTMLInputElement) => void"
               }
             },
             {
-              "name": "gap",
-              "fieldName": "gap",
-              "description": "Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')",
+              "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": "string"
               }
             },
             {
-              "name": "align",
-              "fieldName": "align",
-              "default": "'stretch'",
-              "description": "Alignment of items on the cross axis",
+              "name": "name",
+              "fieldName": "name",
+              "description": "The name of the input",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+                "text": "string"
               }
             },
             {
-              "name": "justify",
-              "fieldName": "justify",
-              "default": "'start'",
-              "description": "Distribution of items on the main axis",
+              "name": "type",
+              "fieldName": "type",
+              "default": "'text'",
+              "description": "The type of the input (text, email, password, etc.)",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'"
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
               }
             },
             {
-              "name": "wrap",
-              "fieldName": "wrap",
-              "default": "false",
-              "description": "Whether items should wrap to multiple lines",
+              "name": "label",
+              "fieldName": "label",
+              "description": "Label for the input",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
-              "name": "align-content",
-              "fieldName": "alignContent",
-              "default": "'stretch'",
-              "description": "Alignment of wrapped lines (only applies when wrap is true)",
+              "name": "icon-start",
+              "fieldName": "iconStart",
+              "description": "Icon for the start icon",
               "type": {
-                "text": "'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around'"
+                "text": "string"
               }
             },
             {
-              "name": "reverse",
-              "fieldName": "reverse",
-              "default": "false",
-              "description": "Whether to reverse the order of items",
+              "name": "icon-end",
+              "fieldName": "iconEnd",
+              "description": "Icon for the end icon",
               "type": {
-                "text": "boolean"
+                "text": "string"
               }
             },
             {
-              "name": "max-items",
-              "fieldName": "maxItems",
-              "description": "Maximum number of items allowed in the stack (for CMS validation)",
+              "name": "placeholder",
+              "fieldName": "placeholder",
+              "description": "Placeholder text",
               "type": {
-                "text": "number"
+                "text": "string"
               }
             },
             {
-              "name": "full-width",
-              "fieldName": "fullWidth",
+              "name": "hide-description",
+              "fieldName": "hideDescription",
               "default": "false",
-              "description": "Whether the stack should take full width of its container",
+              "description": "Hide description slot",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "full-height",
-              "fieldName": "fullHeight",
+              "name": "disabled",
+              "fieldName": "disabled",
               "default": "false",
-              "description": "Whether the stack should take full height of its container",
+              "description": "Whether the input is disabled",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "padding",
-              "fieldName": "padding",
-              "description": "Padding inside the stack container (CSS value)",
+              "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",
               "type": {
                 "text": "string"
               }
             }
           ],
-          "tagName": "le-stack",
-          "events": [],
+          "tagName": "le-string-input",
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>"
+              },
+              "description": "Emitted when the value changes (on blur or Enter)"
+            },
+            {
+              "name": "input",
+              "type": {
+                "text": "EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>"
+              },
+              "description": "Emitted when the input value changes (on keystroke)"
+            }
+          ],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LeStack",
+          "name": "LeStringInput",
           "declaration": {
-            "name": "LeStack",
-            "module": "src/components/le-stack/le-stack.tsx"
+            "name": "LeStringInput",
+            "module": "src/components/le-string-input/le-string-input.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-stack",
+          "name": "le-string-input",
           "declaration": {
-            "name": "LeStack",
-            "module": "src/components/le-stack/le-stack.tsx"
+            "name": "LeStringInput",
+            "module": "src/components/le-string-input/le-string-input.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/le-string-input/le-string-input.tsx",
+      "path": "src/components/le-stack/le-stack.tsx",
       "declarations": [
         {
           "kind": "class",
-          "description": "A text input component with support for labels, descriptions, icons, and external IDs.",
-          "name": "LeStringInput",
+          "description": "A flexible stack layout component using CSS flexbox.\n\n`le-stack` arranges its children in a row (horizontal) or column (vertical)\nwith configurable spacing, alignment, and wrapping behavior. Perfect for\ncreating responsive layouts.",
+          "name": "LeStack",
           "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 radius",
-              "name": "--le-input-radius"
-            },
+              "description": "Gap between items (defaults to var(--le-space-md))",
+              "name": "--le-stack-gap"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Input padding",
-              "name": "--le-input-padding"
+              "description": "The main stack container",
+              "name": "stack"
             }
           ],
           "slots": [
             {
-              "description": "The label text for the input",
+              "description": "Default slot for stack items (le-box components recommended)",
               "name": ""
-            },
-            {
-              "description": "Additional description text displayed below the input",
-              "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": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inputRef",
-              "type": {
-                "text": "(el: HTMLInputElement) => void | undefined"
-              },
-              "description": "Pass the ref of the input element to the parent component"
-            },
+          "members": [
             {
               "kind": "field",
-              "name": "mode",
+              "name": "el",
               "type": {
-                "text": "'default' | 'admin'"
-              },
-              "description": "Mode of the popover should be 'default' for internal use"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "direction",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               },
-              "description": "The value of the input"
+              "default": "'horizontal'",
+              "description": "Direction of the stack layout"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "gap",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "The name of the input"
+              "description": "Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "align",
               "type": {
-                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
+                "text": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
               },
-              "default": "'text'",
-              "description": "The type of the input (text, email, password, etc.)"
+              "default": "'stretch'",
+              "description": "Alignment of items on the cross axis"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "justify",
               "type": {
-                "text": "string"
+                "text": "'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'"
               },
-              "description": "Label for the input"
+              "default": "'start'",
+              "description": "Distribution of items on the main axis"
             },
             {
               "kind": "field",
-              "name": "iconStart",
+              "name": "wrap",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "Icon for the start icon"
+              "default": "false",
+              "description": "Whether items should wrap to multiple lines"
             },
             {
               "kind": "field",
-              "name": "iconEnd",
+              "name": "alignContent",
               "type": {
-                "text": "string"
+                "text": "'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around'"
               },
-              "description": "Icon for the end icon"
+              "default": "'stretch'",
+              "description": "Alignment of wrapped lines (only applies when wrap is true)"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "reverse",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "Placeholder text"
+              "default": "false",
+              "description": "Whether to reverse the order of items"
             },
             {
               "kind": "field",
-              "name": "hideDescription",
+              "name": "maxItems",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Hide description slot"
+              "description": "Maximum number of items allowed in the stack (for CMS validation)"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "fullWidth",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the input is disabled"
+              "description": "Whether the stack should take full width of its container"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "fullHeight",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the input is read-only"
+              "description": "Whether the stack should take full height of its container"
             },
             {
               "kind": "field",
-              "name": "externalId",
+              "name": "padding",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "External ID for linking with external systems"
+              "description": "Padding inside the stack container (CSS value)"
             },
             {
-              "kind": "field",
-              "name": "handleInput",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getFlexDirection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "handleChange",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getAlignItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
+              "kind": "method",
+              "name": "getJustifyContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getAlignContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
               "kind": "method",
@@ -8199,149 +9242,122 @@
           ],
           "attributes": [
             {
-              "name": "input-ref",
-              "fieldName": "inputRef",
-              "description": "Pass the ref of the input element to the parent component",
-              "type": {
-                "text": "(el: HTMLInputElement) => void"
-              }
-            },
-            {
-              "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",
+              "name": "direction",
+              "fieldName": "direction",
+              "default": "'horizontal'",
+              "description": "Direction of the stack layout",
               "type": {
-                "text": "string"
+                "text": "'horizontal' | 'vertical'"
               }
             },
             {
-              "name": "name",
-              "fieldName": "name",
-              "description": "The name of the input",
+              "name": "gap",
+              "fieldName": "gap",
+              "description": "Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')",
               "type": {
                 "text": "string"
               }
             },
             {
-              "name": "type",
-              "fieldName": "type",
-              "default": "'text'",
-              "description": "The type of the input (text, email, password, etc.)",
+              "name": "align",
+              "fieldName": "align",
+              "default": "'stretch'",
+              "description": "Alignment of items on the cross axis",
               "type": {
-                "text": "'text' | 'email' | 'password' | 'tel' | 'url'"
+                "text": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
               }
             },
             {
-              "name": "label",
-              "fieldName": "label",
-              "description": "Label for the input",
+              "name": "justify",
+              "fieldName": "justify",
+              "default": "'start'",
+              "description": "Distribution of items on the main axis",
               "type": {
-                "text": "string"
+                "text": "'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'"
               }
             },
             {
-              "name": "icon-start",
-              "fieldName": "iconStart",
-              "description": "Icon for the start icon",
+              "name": "wrap",
+              "fieldName": "wrap",
+              "default": "false",
+              "description": "Whether items should wrap to multiple lines",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
-              "name": "icon-end",
-              "fieldName": "iconEnd",
-              "description": "Icon for the end icon",
+              "name": "align-content",
+              "fieldName": "alignContent",
+              "default": "'stretch'",
+              "description": "Alignment of wrapped lines (only applies when wrap is true)",
               "type": {
-                "text": "string"
+                "text": "'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around'"
               }
             },
             {
-              "name": "placeholder",
-              "fieldName": "placeholder",
-              "description": "Placeholder text",
+              "name": "reverse",
+              "fieldName": "reverse",
+              "default": "false",
+              "description": "Whether to reverse the order of items",
               "type": {
-                "text": "string"
+                "text": "boolean"
               }
             },
             {
-              "name": "hide-description",
-              "fieldName": "hideDescription",
-              "default": "false",
-              "description": "Hide description slot",
+              "name": "max-items",
+              "fieldName": "maxItems",
+              "description": "Maximum number of items allowed in the stack (for CMS validation)",
               "type": {
-                "text": "boolean"
+                "text": "number"
               }
             },
             {
-              "name": "disabled",
-              "fieldName": "disabled",
+              "name": "full-width",
+              "fieldName": "fullWidth",
               "default": "false",
-              "description": "Whether the input is disabled",
+              "description": "Whether the stack should take full width of its container",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "readonly",
-              "fieldName": "readonly",
+              "name": "full-height",
+              "fieldName": "fullHeight",
               "default": "false",
-              "description": "Whether the input is read-only",
+              "description": "Whether the stack should take full height of its container",
               "type": {
                 "text": "boolean"
               }
             },
             {
-              "name": "external-id",
-              "fieldName": "externalId",
-              "description": "External ID for linking with external systems",
+              "name": "padding",
+              "fieldName": "padding",
+              "description": "Padding inside the stack container (CSS value)",
               "type": {
                 "text": "string"
               }
             }
           ],
-          "tagName": "le-string-input",
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>"
-              },
-              "description": "Emitted when the value changes (on blur or Enter)"
-            },
-            {
-              "name": "input",
-              "type": {
-                "text": "EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>"
-              },
-              "description": "Emitted when the input value changes (on keystroke)"
-            }
-          ],
+          "tagName": "le-stack",
+          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LeStringInput",
+          "name": "LeStack",
           "declaration": {
-            "name": "LeStringInput",
-            "module": "src/components/le-string-input/le-string-input.tsx"
+            "name": "LeStack",
+            "module": "src/components/le-stack/le-stack.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "le-string-input",
+          "name": "le-stack",
           "declaration": {
-            "name": "LeStringInput",
-            "module": "src/components/le-string-input/le-string-input.tsx"
+            "name": "LeStack",
+            "module": "src/components/le-stack/le-stack.tsx"
           }
         }
       ]
@@ -10003,7 +11019,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small'"
+                "text": "| 'p'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'code'\n    | 'quote'\n    | 'label'\n    | 'small'"
               },
               "default": "'p'",
               "description": "The semantic variant/type of text element"
@@ -10259,7 +11275,7 @@
               "default": "'p'",
               "description": "The semantic variant/type of text element",
               "type": {
-                "text": "'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small'"
+                "text": "| 'p'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'code'\n    | 'quote'\n    | 'label'\n    | 'small'"
               }
             },
             {