@kubex/zinc 1.0.25 → 1.0.99

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.0.25",
+  "version": "1.0.99",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -92,6 +70,141 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-animated-button",
+          "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "idle-text",
+              "description": "The text to display in the idle state",
+              "value": { "type": "string", "default": "'Purchase'" }
+            },
+            {
+              "name": "processing-text",
+              "description": "The text to display in the processing state",
+              "value": { "type": "string", "default": "'Purchasing'" }
+            },
+            {
+              "name": "success-text",
+              "description": "The text to display in the success state",
+              "value": { "type": "string", "default": "'Success'" }
+            },
+            {
+              "name": "failure-text",
+              "description": "The text to display in the failure state",
+              "value": { "type": "string", "default": "'Failed'" }
+            },
+            {
+              "name": "redirect-url",
+              "description": "The URL to redirect to after successful purchase",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "redirect-delay",
+              "description": "Delay in milliseconds before redirecting after success (default: 1500ms)",
+              "value": { "type": "number", "default": "1500" }
+            },
+            {
+              "name": "failure-reset-delay",
+              "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)",
+              "value": { "type": "number", "default": "2000" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disabled state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the form control (required for form submission)",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the form control",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "idleText",
+                "description": "The text to display in the idle state",
+                "type": "string"
+              },
+              {
+                "name": "processingText",
+                "description": "The text to display in the processing state",
+                "type": "string"
+              },
+              {
+                "name": "successText",
+                "description": "The text to display in the success state",
+                "type": "string"
+              },
+              {
+                "name": "failureText",
+                "description": "The text to display in the failure state",
+                "type": "string"
+              },
+              {
+                "name": "redirectUrl",
+                "description": "The URL to redirect to after successful purchase",
+                "type": "string"
+              },
+              {
+                "name": "redirectDelay",
+                "description": "Delay in milliseconds before redirecting after success (default: 1500ms)",
+                "type": "number"
+              },
+              {
+                "name": "failureResetDelay",
+                "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)",
+                "type": "number"
+              },
+              {
+                "name": "disabled",
+                "description": "Disabled state",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "The name of the form control (required for form submission)",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the form control",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-audio-select",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **actions** - The actions slot.\n- **footer** - The footer slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -612,6 +725,11 @@
               "description": "Draws a container around the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "borderless",
+              "description": "Removes a container around the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "horizontal",
               "description": "Applies styles relevant to checkboxes in a horizontal layout.",
@@ -742,6 +860,11 @@
                 "description": "Draws a container around the checkbox.",
                 "type": "boolean"
               },
+              {
+                "name": "borderless",
+                "description": "Removes a container around the checkbox.",
+                "type": "boolean"
+              },
               {
                 "name": "horizontal",
                 "description": "Applies styles relevant to checkboxes in a horizontal layout.",
@@ -1009,6 +1132,14 @@
           "doc-url": "",
           "attributes": [
             { "name": "icon", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "caption",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "icon-size",
+              "value": { "type": "number", "default": "18" }
+            },
             {
               "name": "type",
               "value": {
@@ -1043,6 +1174,8 @@
           "js": {
             "properties": [
               { "name": "icon", "type": "string" },
+              { "name": "caption", "type": "string" },
+              { "name": "iconSize", "type": "number" },
               {
                 "name": "type",
                 "type": "'info' | 'success' | 'warning' | 'error' | 'primary' |\n    'transparent' | 'custom' | 'neutral'"
@@ -1381,6 +1514,7 @@
               "value": { "type": "string", "default": "''" }
             },
             { "name": "src", "value": { "type": "string", "default": "''" } },
+            { "name": "size", "value": { "type": "number", "default": "24" } },
             {
               "name": "from",
               "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
@@ -1405,6 +1539,7 @@
               { "name": "value", "type": "string" },
               { "name": "copyLabel", "type": "string" },
               { "name": "src", "type": "string" },
+              { "name": "size", "type": "number" },
               {
                 "name": "from",
                 "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
@@ -1421,7 +1556,7 @@
         },
         {
           "name": "zn-data-select",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "A select component with built-in data providers for common options like colors, currencies, and countries.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the select's value changes.\n- **zn-clear** - Emitted when the clear button is activated.\n- **blur** - Emitted when the select loses focus.\n\n### **Slots:**\n - **label** - The select's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).\n- **expand-icon** - The container that wraps the expand icon (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).\n- **display-input** - The element that displays the selected option's label (forwarded from zn-select).",
           "doc-url": "",
           "attributes": [
             {
@@ -1431,13 +1566,15 @@
             },
             {
               "name": "value",
-              "description": "The value of the select. Used for form submission.",
-              "value": { "type": "string" }
+              "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.",
+              "value": { "type": "string | string[]", "default": "''" }
             },
             {
               "name": "provider",
               "description": "The provider of the select.",
-              "value": { "type": "'color' | 'currency' | 'country' | 'phone'" }
+              "value": {
+                "type": "'color' | 'currency' | 'country' | 'phone' | 'us-state'"
+              }
             },
             {
               "name": "icon-position",
@@ -1470,6 +1607,11 @@
               "description": "Include an \"All\" option at the top.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "allow-common",
+              "description": "Include a \"Common\" option that selects multiple common currencies.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "label",
               "description": "The selects label. If you need to display HTML, use the `label` slot instead.",
@@ -1500,6 +1642,11 @@
               "description": "The selects required attribute.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "disabled",
+              "description": "Disables the select.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "icon-only",
               "value": { "type": "boolean", "default": "false" }
@@ -1507,19 +1654,55 @@
             {
               "name": "multiple",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "select-first",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distinct",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "conditional",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
+            {
+              "name": "label",
+              "description": "The select's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "label-tooltip",
+              "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute."
+            },
+            {
+              "name": "context-note",
+              "description": "Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the select. Alternatively, you can use the `help-text` attribute."
+            }
           ],
           "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            {
+              "name": "zn-input",
+              "description": "Emitted when the select's value changes."
+            },
+            {
+              "name": "zn-clear",
+              "description": "Emitted when the clear button is activated."
+            },
+            {
+              "name": "blur",
+              "description": "Emitted when the select loses focus."
+            }
           ],
           "js": {
             "properties": [
               { "name": "select", "type": "ZnSelect" },
-              { "name": "selectPrefix", "type": "HTMLElement" },
               {
                 "name": "name",
                 "description": "The name of the select. Used for form submission.",
@@ -1527,13 +1710,13 @@
               },
               {
                 "name": "value",
-                "description": "The value of the select. Used for form submission.",
-                "type": "string"
+                "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.",
+                "type": "string | string[]"
               },
               {
                 "name": "provider",
                 "description": "The provider of the select.",
-                "type": "'color' | 'currency' | 'country' | 'phone'"
+                "type": "'color' | 'currency' | 'country' | 'phone' | 'us-state'"
               },
               {
                 "name": "iconPosition",
@@ -1560,6 +1743,11 @@
                 "description": "Include an \"All\" option at the top.",
                 "type": "boolean"
               },
+              {
+                "name": "allowCommon",
+                "description": "Include a \"Common\" option that selects multiple common currencies.",
+                "type": "boolean"
+              },
               {
                 "name": "label",
                 "description": "The selects label. If you need to display HTML, use the `label` slot instead.",
@@ -1590,8 +1778,16 @@
                 "description": "The selects required attribute.",
                 "type": "boolean"
               },
+              {
+                "name": "disabled",
+                "description": "Disables the select.",
+                "type": "boolean"
+              },
               { "name": "iconOnly", "type": "boolean" },
               { "name": "multiple", "type": "boolean" },
+              { "name": "selectFirst", "type": "boolean" },
+              { "name": "distinct", "type": "string" },
+              { "name": "conditional", "type": "string" },
               { "name": "validationMessage" },
               { "name": "validity", "type": "ValidityState" },
               { "name": "closeOnTab" },
@@ -1601,15 +1797,23 @@
             ],
             "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "zn-input",
+                "description": "Emitted when the select's value changes."
+              },
+              {
+                "name": "zn-clear",
+                "description": "Emitted when the clear button is activated."
+              },
+              {
+                "name": "blur",
+                "description": "Emitted when the select loses focus."
               }
             ]
           }
         },
         {
           "name": "zn-data-table",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "data-uri", "value": { "type": "string" } },
@@ -1627,6 +1831,10 @@
               "name": "filter",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "search",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "wide-column", "value": { "type": "string" } },
             { "name": "key", "value": { "type": "string", "default": "'id'" } },
             {
@@ -1681,11 +1889,35 @@
           ],
           "slots": [
             { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            { "name": "search", "description": "Slot for search component." },
+            { "name": "sort", "description": "Slot for sort component." },
+            { "name": "filter", "description": "Slot for filter component." },
+            {
+              "name": "filter-top",
+              "description": "Slot for top-level filter component."
+            },
+            {
+              "name": "delete-action",
+              "description": "Slot for delete action button."
+            },
+            {
+              "name": "modify-action",
+              "description": "Slot for modify action button."
+            },
+            {
+              "name": "create-action",
+              "description": "Slot for create action button."
+            },
+            {
+              "name": "inputs",
+              "description": "Slot for additional input controls."
+            },
+            {
+              "name": "empty-state",
+              "description": "Slot for custom empty state."
+            }
           ],
+          "events": [],
           "js": {
             "properties": [
               { "name": "dataUri", "type": "string" },
@@ -1694,6 +1926,7 @@
               { "name": "sortDirection", "type": "string" },
               { "name": "localSort", "type": "boolean" },
               { "name": "filter", "type": "string" },
+              { "name": "search", "type": "string" },
               { "name": "wideColumn", "type": "string" },
               { "name": "key", "type": "string" },
               { "name": "headers", "type": "Record<string, HeaderConfig>" },
@@ -1714,14 +1947,10 @@
               { "name": "groups", "type": "string" },
               { "name": "selectAllButton", "type": "ZnButton" },
               { "name": "requestParams", "type": "Record<string, any>" },
-              { "name": "changeEventListener" }
+              { "name": "filterChangeListener" },
+              { "name": "searchChangeListener" }
             ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -1766,35 +1995,128 @@
           }
         },
         {
-          "name": "zn-data-table-sort",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
-        {
-          "name": "zn-datepicker",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "zn-data-table-search",
+          "description": "A search component for data tables.\n---\n\n\n### **Events:**\n - **zn-search-change** - Emitted when the search value changes (debounced).\n\n### **Methods:**\n - **getFormData(): _Record<string, any>_** - Collects form data from slotted input elements\n\n### **Slots:**\n - _default_ - The default slot for additional form inputs.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "title",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "name",
+              "description": "The name of the search input field (default: \"search\").",
+              "value": { "type": "string", "default": "\"search\"" }
+            },
+            {
+              "name": "value",
+              "description": "The current search value.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "placeholder",
+              "description": "The placeholder text for the search input (default: \"Search...\").",
+              "value": { "type": "string", "default": "\"Search...\"" }
+            },
+            {
+              "name": "help-text",
+              "description": "Help text displayed below the search input.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "search-uri",
+              "description": "Optional URI to use for search operations.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "debounce-delay",
+              "description": "The delay in milliseconds before triggering a search (default: 500).",
+              "value": { "type": "number", "default": "350" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for additional form inputs."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-search-change",
+              "description": "Emitted when the search value changes (debounced)."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the search input field (default: \"search\").",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current search value.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "The placeholder text for the search input (default: \"Search...\").",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Help text displayed below the search input.",
+                "type": "string"
+              },
+              {
+                "name": "searchUri",
+                "description": "Optional URI to use for search operations.",
+                "type": "string"
+              },
+              {
+                "name": "debounceDelay",
+                "description": "The delay in milliseconds before triggering a search (default: 500).",
+                "type": "number"
+              },
+              { "name": "validationMessage", "type": "string" },
+              { "name": "validity", "type": "ValidityState" },
+              { "name": "handleInput" },
+              { "name": "handleClear" }
+            ],
+            "events": [
+              {
+                "name": "zn-search-change",
+                "description": "Emitted when the search value changes (debounced)."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-data-table-sort",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-datepicker",
+          "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "title",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
               "name": "name",
@@ -1854,23 +2176,89 @@
               "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
               "value": { "type": "string" }
             },
+            {
+              "name": "flush",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "required",
               "description": "Makes the input a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button to the calendar for removing a selected date. *",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "range",
               "description": "Makes the input a range picker. *",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disable-past-dates",
+              "description": "Disallows selecting past dates. *",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min-date",
+              "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *",
+              "value": { "type": "string | Date | undefined" }
+            },
+            {
+              "name": "max-date",
+              "description": "Maximum date that can be selected. Accepts Date object or date string. *",
+              "value": { "type": "string | Date | undefined" }
+            },
+            {
+              "name": "format",
+              "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)",
+              "value": { "type": "string", "default": "'MM/dd/yyyy'" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
+            {
+              "name": "label",
+              "description": "The datepicker's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "label-tooltip",
+              "description": "Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute."
+            },
+            {
+              "name": "context-note",
+              "description": "Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Help text displayed below the input. Alternatively, you can use the `help-text` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "Content to display before the input (in addition to the default calendar icon)."
+            },
+            {
+              "name": "suffix",
+              "description": "Content to display after the input."
+            }
           ],
           "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            {
+              "name": "zn-change",
+              "description": "Emitted when the date value changes."
+            },
+            {
+              "name": "zn-input",
+              "description": "Emitted when the input value changes."
+            },
+            {
+              "name": "zn-blur",
+              "description": "Emitted when the input loses focus."
+            },
+            {
+              "name": "zn-focus",
+              "description": "Emitted when the input gains focus."
+            }
           ],
           "js": {
             "properties": [
@@ -1936,16 +2324,42 @@
                 "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
                 "type": "string"
               },
+              { "name": "flush", "type": "boolean" },
               {
                 "name": "required",
                 "description": "Makes the input a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button to the calendar for removing a selected date. *",
+                "type": "boolean"
+              },
               {
                 "name": "range",
                 "description": "Makes the input a range picker. *",
                 "type": "boolean"
               },
+              {
+                "name": "disablePastDates",
+                "description": "Disallows selecting past dates. *",
+                "type": "boolean"
+              },
+              {
+                "name": "minDate",
+                "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *",
+                "type": "string | Date | undefined"
+              },
+              {
+                "name": "maxDate",
+                "description": "Maximum date that can be selected. Accepts Date object or date string. *",
+                "type": "string | Date | undefined"
+              },
+              {
+                "name": "format",
+                "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)",
+                "type": "string"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -1957,8 +2371,20 @@
             ],
             "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "zn-change",
+                "description": "Emitted when the date value changes."
+              },
+              {
+                "name": "zn-input",
+                "description": "Emitted when the input value changes."
+              },
+              {
+                "name": "zn-blur",
+                "description": "Emitted when the input loses focus."
+              },
+              {
+                "name": "zn-focus",
+                "description": "Emitted when the input gains focus."
               }
             ]
           }
@@ -2037,7 +2463,7 @@
               "name": "size",
               "description": "The dialog's size.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
+                "type": "'small' | 'medium' | 'large' | 'custom'",
                 "default": "'medium'"
               }
             },
@@ -2120,7 +2546,7 @@
               {
                 "name": "size",
                 "description": "The dialog's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "type": "'small' | 'medium' | 'large' | 'custom'"
               },
               {
                 "name": "open",
@@ -3020,6 +3446,14 @@
               "name": "round",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "tile",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "depth",
+              "value": { "type": "boolean", "default": "false" }
+            },
             { "name": "library", "value": { "type": "IconLibrary" } },
             { "name": "color", "value": { "type": "IconColor" } },
             {
@@ -3048,6 +3482,8 @@
               { "name": "alt", "type": "string" },
               { "name": "size", "type": "number" },
               { "name": "round", "type": "boolean" },
+              { "name": "tile", "type": "boolean" },
+              { "name": "depth", "type": "boolean" },
               { "name": "library", "type": "IconLibrary" },
               { "name": "color", "type": "IconColor" },
               { "name": "padded", "type": "boolean" },
@@ -3064,12 +3500,72 @@
             ]
           }
         },
+        {
+          "name": "zn-icon-picker",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            { "name": "icon", "value": { "type": "string", "default": "''" } },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "library",
+              "value": { "type": "string", "default": "'material'" }
+            },
+            { "name": "color", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "no-color",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-library",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "form", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "icon", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "library", "type": "string" },
+              { "name": "color", "type": "string" },
+              { "name": "noColor", "type": "boolean" },
+              { "name": "noLibrary", "type": "boolean" },
+              { "name": "helpText", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "form", "type": "string" },
+              { "name": "defaultValue", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "validity", "type": "ValidityState" },
+              { "name": "validationMessage", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-inline-edit",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "value", "value": { "type": "string" } },
+            {
+              "name": "value",
+              "value": { "type": "string | string[]", "default": "''" }
+            },
             { "name": "name", "value": { "type": "string" } },
             { "name": "placeholder", "value": { "type": "string" } },
             { "name": "edit-text", "value": { "type": "string" } },
@@ -3085,10 +3581,15 @@
             },
             { "name": "required", "value": { "type": "boolean" } },
             { "name": "pattern", "value": { "type": "string" } },
+            { "name": "multiple", "value": { "type": "boolean" } },
+            { "name": "clearable", "value": { "type": "boolean" } },
+            { "name": "min", "value": { "type": "string | number" } },
+            { "name": "max", "value": { "type": "string | number" } },
+            { "name": "step", "value": { "type": "number | 'any'" } },
             {
               "name": "input-type",
               "value": {
-                "type": "'select' | 'text' | 'data-select' | 'number'",
+                "type": "'select' | 'text' | 'data-select' | 'number' | 'textarea'",
                 "default": "'text'"
               }
             },
@@ -3104,22 +3605,54 @@
                 "default": "'none'"
               }
             },
+            {
+              "name": "data-uri",
+              "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.\nOnly works with type select.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "context-data",
+              "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "search",
+              "description": "Enables search/filtering on select inputs.",
+              "value": { "type": "boolean" }
+            },
             {
               "name": "help-text",
               "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dir",
+              "description": "The text direction for the input (ltr or rtl) *",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'", "default": "'auto'" }
+            },
+            {
+              "name": "autocomplete",
+              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+              "value": { "type": "string" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
+            {
+              "name": "",
+              "description": "Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property."
+            },
+            { "name": "example", "description": "An example slot." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
+            }
           ],
           "events": [
             { "name": "zn-event-name", "description": "Emitted as an example." }
           ],
           "js": {
             "properties": [
-              { "name": "value", "type": "string" },
+              { "name": "value", "type": "string | string[]" },
               { "name": "name", "type": "string" },
               { "name": "placeholder", "type": "string" },
               { "name": "editText", "type": "string" },
@@ -3129,20 +3662,50 @@
               { "name": "size", "type": "'small' | 'medium' | 'large'" },
               { "name": "required", "type": "boolean" },
               { "name": "pattern", "type": "string" },
+              { "name": "multiple", "type": "boolean" },
+              { "name": "clearable", "type": "boolean" },
+              { "name": "min", "type": "string | number" },
+              { "name": "max", "type": "string | number" },
+              { "name": "step", "type": "number | 'any'" },
               {
                 "name": "inputType",
-                "type": "'select' | 'text' | 'data-select' | 'number'"
+                "type": "'select' | 'text' | 'data-select' | 'number' | 'textarea'"
               },
               { "name": "options", "type": "{ [key: string]: string }" },
               { "name": "selectProvider", "type": "string" },
               { "name": "iconPosition", "type": "'start' | 'end' | 'none'" },
+              {
+                "name": "dataUri",
+                "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.\nOnly works with type select.",
+                "type": "string"
+              },
+              {
+                "name": "contextData",
+                "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
+                "type": "string"
+              },
+              {
+                "name": "search",
+                "description": "Enables search/filtering on select inputs.",
+                "type": "boolean"
+              },
               {
                 "name": "helpText",
                 "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
                 "type": "string"
               },
+              {
+                "name": "dir",
+                "description": "The text direction for the input (ltr or rtl) *",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "autocomplete",
+                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+                "type": "string"
+              },
               { "name": "input", "type": "ZnInput | ZnSelect" },
-              { "name": "defaultValue", "type": "string" },
+              { "name": "defaultValue", "type": "string | string[]" },
               { "name": "validity", "type": "ValidityState" },
               { "name": "validationMessage", "type": "string" },
               { "name": "mouseEventHandler" },
@@ -3154,7 +3717,8 @@
               { "name": "handleSubmitClick" },
               { "name": "handleCancelClick" },
               { "name": "handleBlur" },
-              { "name": "handleInput" }
+              { "name": "handleInput" },
+              { "name": "handleSlotChange" }
             ],
             "events": [
               {
@@ -3177,7 +3741,7 @@
               "name": "type",
               "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
               "value": {
-                "type": "'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'",
+                "type": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'",
                 "default": "'text'"
               }
             },
@@ -3269,6 +3833,14 @@
               "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "color-format",
+              "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
+              "value": {
+                "type": "'hex' | 'rgb' | 'hsl' | 'oklch'",
+                "default": "'hex'"
+              }
+            },
             {
               "name": "form",
               "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
@@ -3418,11 +3990,12 @@
           "js": {
             "properties": [
               { "name": "input", "type": "HTMLInputElement" },
+              { "name": "colorPicker", "type": "HTMLInputElement" },
               { "name": "title", "type": "string" },
               {
                 "name": "type",
                 "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
-                "type": "'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'"
+                "type": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               {
                 "name": "name",
@@ -3514,6 +4087,11 @@
                 "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
                 "type": "boolean"
               },
+              {
+                "name": "colorFormat",
+                "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
+                "type": "'hex' | 'rgb' | 'hsl' | 'oklch'"
+              },
               {
                 "name": "form",
                 "description": "By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.",
@@ -3643,6 +4221,11 @@
               "name": "label",
               "description": "The input group's label. If you need to display HTML, use the `label` slot.",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "gap",
+              "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.",
+              "value": { "type": "'sm' | 'md' | 'lg'" }
             }
           ],
           "slots": [
@@ -3663,6 +4246,11 @@
                 "name": "label",
                 "description": "The input group's label. If you need to display HTML, use the `label` slot.",
                 "type": "string"
+              },
+              {
+                "name": "gap",
+                "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.",
+                "type": "'sm' | 'md' | 'lg'"
               }
             ],
             "events": []
@@ -3684,6 +4272,7 @@
               }
             },
             { "name": "edit-on-hover", "value": { "type": "boolean" } },
+            { "name": "help-tooltip", "value": { "type": "string" } },
             { "name": "icon", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "string" } },
             { "name": "inline", "value": { "type": "boolean" } },
@@ -3710,6 +4299,7 @@
               { "name": "stacked", "type": "boolean" },
               { "name": "size", "type": "'small' | 'medium' | 'large'" },
               { "name": "editOnHover", "type": "boolean" },
+              { "name": "helpTooltip", "type": "string" },
               { "name": "icon", "type": "string" },
               { "name": "value", "type": "string" },
               { "name": "inline", "type": "boolean" },
@@ -3721,6 +4311,115 @@
             "events": []
           }
         },
+        {
+          "name": "zn-key",
+          "description": "A legend key item, typically used alongside charts to label and toggle visibility of data series by category.\n---\n\n\n### **Slots:**\n - _default_ - The description of the key.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "icon", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "attribute",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "color",
+              "value": {
+                "type": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon-size",
+              "value": { "type": "number", "default": "24" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The description of the key." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "icon", "type": "string" },
+              { "name": "attribute", "type": "string" },
+              { "name": "value", "type": "string" },
+              {
+                "name": "color",
+                "type": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'"
+              },
+              { "name": "active", "type": "boolean" },
+              { "name": "iconSize", "type": "number" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "zn-key-container",
+          "description": "A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the set of active keys changes.\n\n### **Slots:**\n - _default_ - The content to be filtered.\n- **keys** - The key items (zn-key) that define the filters.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "position",
+              "value": {
+                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "target",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "item-selector",
+              "value": { "type": "string", "default": "'[data-type]'" }
+            },
+            {
+              "name": "filter-attribute",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-scroll",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The content to be filtered." },
+            {
+              "name": "keys",
+              "description": "The key items (zn-key) that define the filters."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-change",
+              "description": "Emitted when the set of active keys changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "keysSlot", "type": "HTMLSlotElement" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "position",
+                "type": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'"
+              },
+              { "name": "target", "type": "string" },
+              { "name": "itemSelector", "type": "string" },
+              { "name": "filterAttribute", "type": "string" },
+              { "name": "noScroll", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "zn-change",
+                "description": "Emitted when the set of active keys changes."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-linked-select",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3865,6 +4564,31 @@
             {
               "name": "confirm",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flush",
+              "description": "Removes all padding from the menu item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flush-x",
+              "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flush-y",
+              "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-border",
+              "description": "Removes the border from the menu item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Marks the menu item as currently active/selected.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -3914,7 +4638,32 @@
               { "name": "dataTarget", "type": "'modal' | 'slide' | string" },
               { "name": "rel", "type": "string" },
               { "name": "gaid", "type": "string" },
-              { "name": "confirm", "type": "boolean" }
+              { "name": "confirm", "type": "boolean" },
+              {
+                "name": "flush",
+                "description": "Removes all padding from the menu item.",
+                "type": "boolean"
+              },
+              {
+                "name": "flushX",
+                "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.",
+                "type": "boolean"
+              },
+              {
+                "name": "flushY",
+                "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.",
+                "type": "boolean"
+              },
+              {
+                "name": "noBorder",
+                "description": "Removes the border from the menu item.",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Marks the menu item as currently active/selected.",
+                "type": "boolean"
+              }
             ],
             "events": [
               {
@@ -3956,6 +4705,16 @@
               "name": "isolated",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "master-id", "value": { "type": "string" } },
+            {
+              "name": "store-key",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "store-ttl",
+              "value": { "type": "number", "default": "0" }
+            },
+            { "name": "local-storage", "value": { "type": "boolean" } },
             { "name": "_appended", "value": { "type": "Element[]" } }
           ],
           "slots": [
@@ -3979,6 +4738,10 @@
               { "name": "noPad", "type": "false" },
               { "name": "manualAddItems", "type": "boolean" },
               { "name": "isolated", "type": "boolean" },
+              { "name": "masterId", "type": "string" },
+              { "name": "storeKey", "type": "string" },
+              { "name": "storeTtl", "type": "number" },
+              { "name": "localStorage", "type": "boolean" },
               { "name": "handleResize" }
             ],
             "events": [
@@ -4025,6 +4788,45 @@
             ]
           }
         },
+        {
+          "name": "zn-opt-group",
+          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables all options within the group.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot for `<zn-option>` elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables all options within the group.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-option",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
@@ -4032,7 +4834,7 @@
           "attributes": [
             {
               "name": "value",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -4065,7 +4867,7 @@
               { "name": "hasHover", "type": "boolean" },
               {
                 "name": "value",
-                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\nmultiple values.",
+                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
                 "type": "string"
               },
               {
@@ -4250,7 +5052,7 @@
         },
         {
           "name": "zn-panel",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **actions** - The actions slot.\n- **footer** - The footer slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "basis-px", "value": { "type": "number" } },
@@ -4268,9 +5070,15 @@
             { "name": "shadow", "value": { "type": "boolean" } }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "actions", "description": "The actions slot." },
-            { "name": "footer", "description": "The footer slot." }
+            { "name": "", "description": "The panel's main content." },
+            {
+              "name": "actions",
+              "description": "Actions displayed in the panel header (buttons, chips, etc)."
+            },
+            {
+              "name": "footer",
+              "description": "Content displayed in the panel footer."
+            }
           ],
           "events": [],
           "js": {
@@ -4551,9 +5359,193 @@
             ]
           }
         },
+        {
+          "name": "zn-priority-list",
+          "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
+              "value": { "type": "string[]" }
+            },
+            {
+              "name": "label",
+              "description": "The component's label. Required for proper accessibility.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label-tooltip",
+              "description": "Text that appears in a tooltip next to the label.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "Help text that describes how to use the component.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "form",
+              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The size of the list items.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the priority list is disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures the form control has a value before allowing submission.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "priority-start",
+              "description": "The starting priority number. Defaults to 1.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "formaction",
+              "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "order",
+              "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
+            },
+            {
+              "name": "label",
+              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
+            },
+            {
+              "name": "label-tooltip",
+              "description": "Used to add text displayed in a tooltip next to the label."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-change",
+              "description": "Emitted when the order of items changes."
+            },
+            {
+              "name": "zn-reorder",
+              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
+              {
+                "name": "name",
+                "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
+                "type": "string[]"
+              },
+              { "name": "defaultValue", "type": "string[]" },
+              {
+                "name": "label",
+                "description": "The component's label. Required for proper accessibility.",
+                "type": "string"
+              },
+              {
+                "name": "labelTooltip",
+                "description": "Text that appears in a tooltip next to the label.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Help text that describes how to use the component.",
+                "type": "string"
+              },
+              {
+                "name": "form",
+                "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The size of the list items.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the priority list is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Ensures the form control has a value before allowing submission.",
+                "type": "boolean"
+              },
+              {
+                "name": "priorityStart",
+                "description": "The starting priority number. Defaults to 1.",
+                "type": "number"
+              },
+              {
+                "name": "formAction",
+                "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
+                "type": "string"
+              },
+              {
+                "name": "order",
+                "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-change",
+                "description": "Emitted when the order of items changes."
+              },
+              {
+                "name": "zn-reorder",
+                "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-progress-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-primary** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",
           "doc-url": "",
           "attributes": [
             { "name": "caption", "value": { "type": "string | undefined" } },
@@ -4567,13 +5559,7 @@
               "value": { "type": "boolean | undefined" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
+          "events": [],
           "js": {
             "properties": [
               { "name": "caption", "type": "string | undefined" },
@@ -4581,12 +5567,7 @@
               { "name": "value", "type": "number | undefined" },
               { "name": "showProgress", "type": "boolean | undefined" }
             ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -5136,7 +6117,7 @@
         },
         {
           "name": "zn-select",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the control's value changes.\n- **zn-clear** - Emitted when the control's value is cleared.\n- **zn-input** - Emitted when the control receives input.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-blur** - Emitted when the control loses focus.\n- **zn-show** - Emitted when the select's menu opens.\n- **zn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **zn-hide** - Emitted when the select's menu closes.\n- **zn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<zn-option>` elements. You can use `<zn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the control's value changes.\n- **zn-clear** - Emitted when the control's value is cleared.\n- **zn-input** - Emitted when the control receives input.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-blur** - Emitted when the control loses focus.\n- **zn-show** - Emitted when the select's menu opens.\n- **zn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **zn-hide** - Emitted when the select's menu closes.\n- **zn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-load** - Emitted when options have been successfully loaded from the `src` URL.\n- **zn-error** - Emitted when loading options from the `src` URL fails.\n\n### **Methods:**\n - **fetchOptions(searchQuery: _string_)** - Fetches options from the URL specified by the `data-uri` property. Optionally appends a search query.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **search-loading** - The container shown while a remote search request is in flight.\n- **max-results-indicator** - The message shown when results are truncated by `max-results`.\n- **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
             {
@@ -5144,6 +6125,10 @@
               "description": "The name of the select, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "non-removable",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "value",
               "description": "The default value of the form control. Primarily used for resetting the form control.",
@@ -5202,6 +6187,11 @@
               "description": "Draws a pill-style select with rounded edges.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "search",
+              "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "label",
               "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
@@ -5246,25 +6236,60 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "getTag",
-              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
-              "value": {
-                "type": "(option: ZnOption, index: number) => TemplateResult | string | HTMLElement"
-              }
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
+              "value": {
+                "type": "(option: ZnOption, index: number) => TemplateResult | string | HTMLElement"
+              }
+            },
+            {
+              "name": "select-first",
+              "description": "Automatically select the first option if no value is set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "distinct",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "conditional",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "data-uri",
+              "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "context-data",
+              "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "max-results",
+              "description": "The maximum number of options to display from a remote fetch response. Set to 0 for unlimited.\nOnly applies when fetching from `data-uri`.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "search-debounce",
+              "description": "Debounce delay in milliseconds for remote search requests. The component waits this long after the user\nstops typing before sending a request.",
+              "value": { "type": "number", "default": "300" }
             },
             {
-              "name": "distinct",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "search-param",
+              "description": "The query parameter name appended to the `data-uri` URL for remote search requests.\nDefaults to `\"q\"`, e.g. `/api/items?q=search+term`. Set to a custom value like `\"search\"` or `\"filter\"` to match your API.",
+              "value": { "type": "string", "default": "'q'" }
             },
             {
-              "name": "conditional",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "search-only",
+              "description": "When set alongside `search` and `data-uri`, the component will not fetch options on initial load.\nOptions are only fetched when the user starts typing a search query.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The listbox options. Must be `<zn-option>` elements. You can use `<zn-divider>` to group items visually."
+              "description": "The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually."
             },
             {
               "name": "label",
@@ -5335,6 +6360,14 @@
             {
               "name": "zn-invalid",
               "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            },
+            {
+              "name": "zn-load",
+              "description": "Emitted when options have been successfully loaded from the `src` URL."
+            },
+            {
+              "name": "zn-error",
+              "description": "Emitted when loading options from the `src` URL fails."
             }
           ],
           "js": {
@@ -5353,9 +6386,10 @@
                 "description": "The name of the select, submitted as a name/value pair with form data.",
                 "type": "string"
               },
+              { "name": "nonRemovable", "type": "boolean" },
               {
                 "name": "value",
-                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
+                "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue property will be an array. Values may contain spaces when using JSON array syntax in the attribute,\ne.g. `value='[\"my value\", \"their value\"]'`. Space-delimited strings are still supported for backward compatibility."
               },
               {
                 "name": "defaultValue",
@@ -5412,6 +6446,11 @@
                 "description": "Draws a pill-style select with rounded edges.",
                 "type": "boolean"
               },
+              {
+                "name": "search",
+                "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
+                "type": "boolean"
+              },
               {
                 "name": "label",
                 "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
@@ -5454,8 +6493,43 @@
                 "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\nthe specified value.",
                 "type": "(option: ZnOption, index: number) => TemplateResult | string | HTMLElement"
               },
+              {
+                "name": "selectFirst",
+                "description": "Automatically select the first option if no value is set.",
+                "type": "boolean"
+              },
               { "name": "distinct", "type": "string" },
               { "name": "conditional", "type": "string" },
+              {
+                "name": "dataUri",
+                "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",
+                "type": "string"
+              },
+              {
+                "name": "contextData",
+                "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.",
+                "type": "string"
+              },
+              {
+                "name": "maxResults",
+                "description": "The maximum number of options to display from a remote fetch response. Set to 0 for unlimited.\nOnly applies when fetching from `data-uri`.",
+                "type": "number"
+              },
+              {
+                "name": "searchDebounce",
+                "description": "Debounce delay in milliseconds for remote search requests. The component waits this long after the user\nstops typing before sending a request.",
+                "type": "number"
+              },
+              {
+                "name": "searchParam",
+                "description": "The query parameter name appended to the `data-uri` URL for remote search requests.\nDefaults to `\"q\"`, e.g. `/api/items?q=search+term`. Set to a custom value like `\"search\"` or `\"filter\"` to match your API.",
+                "type": "string"
+              },
+              {
+                "name": "searchOnly",
+                "description": "When set alongside `search` and `data-uri`, the component will not fetch options on initial load.\nOptions are only fetched when the user starts typing a search query.",
+                "type": "boolean"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -5505,6 +6579,14 @@
               {
                 "name": "zn-invalid",
                 "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              },
+              {
+                "name": "zn-load",
+                "description": "Emitted when options have been successfully loaded from the `src` URL."
+              },
+              {
+                "name": "zn-error",
+                "description": "Emitted when loading options from the `src` URL fails."
               }
             ]
           }
@@ -5621,33 +6703,53 @@
         },
         {
           "name": "zn-skeleton",
-          "description": "Short summary of the component's intended use.\n---\n",
+          "description": "Skeleton loaders provide visual placeholders while content is loading, improving perceived performance and user experience.\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "speed",
+              "description": "Animation speed for the shimmer effect. Default: \"3s\"",
               "value": { "type": "string", "default": "'3s'" }
             },
             {
               "name": "width",
+              "description": "Width of the skeleton element. Default: \"100%\"",
               "value": { "type": "string", "default": "'100%'" }
             },
             {
               "name": "height",
+              "description": "Height of the skeleton element. Default: \"20px\"",
               "value": { "type": "string", "default": "'20px'" }
             },
             {
               "name": "radius",
+              "description": "Border radius of the skeleton element. Default: \"4px\"",
               "value": { "type": "string", "default": "'4px'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "speed", "type": "string" },
-              { "name": "width", "type": "string" },
-              { "name": "height", "type": "string" },
-              { "name": "radius", "type": "string" }
+              {
+                "name": "speed",
+                "description": "Animation speed for the shimmer effect. Default: \"3s\"",
+                "type": "string"
+              },
+              {
+                "name": "width",
+                "description": "Width of the skeleton element. Default: \"100%\"",
+                "type": "string"
+              },
+              {
+                "name": "height",
+                "description": "Height of the skeleton element. Default: \"20px\"",
+                "type": "string"
+              },
+              {
+                "name": "radius",
+                "description": "Border radius of the skeleton element. Default: \"4px\"",
+                "type": "string"
+              }
             ],
             "events": []
           }
@@ -5735,7 +6837,7 @@
         },
         {
           "name": "zn-sp",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "A flexible layout container for spacing and arranging child elements in rows or columns with configurable gap, padding, and dividers.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -5763,6 +6865,10 @@
               "name": "no-gap",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "no-pos",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "flush",
               "value": { "type": "boolean", "default": "false" }
@@ -5820,6 +6926,7 @@
               { "name": "padX", "type": "boolean" },
               { "name": "padY", "type": "boolean" },
               { "name": "noGap", "type": "boolean" },
+              { "name": "noPosition", "type": "boolean" },
               { "name": "flush", "type": "boolean" },
               { "name": "flushX", "type": "boolean" },
               { "name": "flushY", "type": "boolean" },
@@ -6070,36 +7177,62 @@
         },
         {
           "name": "zn-stepper",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Steppers provide visual feedback about progress through a multi-step process or workflow.\n---\n\n\n### **CSS Parts:**\n - **step-container** - The container holding the progress line and steps.\n- **step-line** - The background line showing the full step track.\n- **step-progress** - The filled progress indicator showing completion.\n- **steps** - The container for individual step markers.\n- **step** - An individual step marker circle.\n- **header** - The header container with caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress count text (e.g., \"2 / 5 steps\").\n- **label** - The label text container.\n- **info** - The label text element.",
           "doc-url": "",
           "attributes": [
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "label", "value": { "type": "string" } },
-            { "name": "steps", "value": { "type": "number" } },
-            { "name": "value", "value": { "type": "number" } },
+            {
+              "name": "caption",
+              "description": "A descriptive label displayed above the stepper to indicate the current step or phase.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label",
+              "description": "An optional label displayed above the caption, typically used for the wizard or workflow name.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "steps",
+              "description": "The total number of steps in the process.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "value",
+              "description": "The current step position (0 to steps). Progress is calculated as value/steps.",
+              "value": { "type": "number" }
+            },
             { "name": "show-progress", "value": { "type": "boolean" } }
           ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "caption", "type": "string" },
-              { "name": "label", "type": "string" },
-              { "name": "steps", "type": "number" },
-              { "name": "value", "type": "number" },
-              { "name": "showProgress", "type": "boolean" }
-            ],
-            "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "caption",
+                "description": "A descriptive label displayed above the stepper to indicate the current step or phase.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "An optional label displayed above the caption, typically used for the wizard or workflow name.",
+                "type": "string"
+              },
+              {
+                "name": "steps",
+                "description": "The total number of steps in the process.",
+                "type": "number"
+              },
+              {
+                "name": "value",
+                "description": "The current step position (0 to steps). Progress is calculated as value/steps.",
+                "type": "number"
+              },
+              { "name": "showProgress", "type": "boolean" },
+              {
+                "name": "show-progress",
+                "description": "When true, displays the step count (e.g., \"2 / 5 steps\") next to the caption.",
+                "type": "boolean"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -6777,7 +7910,7 @@
         },
         {
           "name": "zn-toggle",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Toggles allow the user to switch an option on or off.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the toggle receives input.\n\n### **Slots:**\n - _default_ - The toggle's label.\n\n### **CSS Properties:**\n - **--zn-toggle-margin** - The margin around the toggle switch. Defaults to `8px 0`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper containing the toggle switch.\n- **control** - The toggle switch control (the circular button that slides).",
           "doc-url": "",
           "attributes": [
             {
@@ -6829,14 +7962,18 @@
               "name": "off-text",
               "value": { "type": "string", "default": "''" }
             },
-            { "name": "label", "value": { "type": "string", "default": "''" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "inline",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
+          "slots": [{ "name": "", "description": "The toggle's label." }],
           "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            {
+              "name": "zn-input",
+              "description": "Emitted when the toggle receives input."
+            }
           ],
           "js": {
             "properties": [
@@ -6857,13 +7994,14 @@
               { "name": "onText", "type": "string" },
               { "name": "offText", "type": "string" },
               { "name": "label", "type": "string" },
+              { "name": "inline", "type": "boolean" },
               { "name": "validity" },
               { "name": "validationMessage" }
             ],
             "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "zn-input",
+                "description": "Emitted when the toggle receives input."
               }
             ]
           }
@@ -6971,9 +8109,95 @@
             ]
           }
         },
+        {
+          "name": "zn-translation-group",
+          "description": "A panel-styled container that provides a shared language toggle for multiple zn-translations children.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - Default slot for `<zn-translations>` elements.\n- **actions** - Actions displayed in the panel header alongside language buttons.\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The group label displayed in the panel header.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "languages",
+              "description": "The available languages for the group.",
+              "value": {
+                "type": "Record<string, string>",
+                "default": "{ 'en': 'EN' }"
+              }
+            },
+            { "name": "basis-px", "value": { "type": "number" } },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "icon", "value": { "type": "string" } },
+            { "name": "description", "value": { "type": "string" } },
+            { "name": "tabbed", "value": { "type": "boolean" } },
+            { "name": "header-underline", "value": { "type": "boolean" } },
+            { "name": "cosmic", "value": { "type": "boolean" } },
+            { "name": "flush", "value": { "type": "boolean" } },
+            { "name": "flush-x", "value": { "type": "boolean" } },
+            { "name": "flush-y", "value": { "type": "boolean" } },
+            { "name": "flush-footer", "value": { "type": "boolean" } },
+            { "name": "transparent", "value": { "type": "boolean" } },
+            { "name": "shadow", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot for `<zn-translations>` elements."
+            },
+            {
+              "name": "actions",
+              "description": "Actions displayed in the panel header alongside language buttons."
+            },
+            {
+              "name": "footer",
+              "description": "Content displayed in the panel footer."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-language-change",
+              "description": "Emitted when the active language changes. Detail: `{ language: string }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The group label displayed in the panel header.",
+                "type": "string"
+              },
+              {
+                "name": "languages",
+                "description": "The available languages for the group.",
+                "type": "Record<string, string>"
+              },
+              { "name": "basis", "type": "number" },
+              { "name": "caption", "type": "string" },
+              { "name": "icon", "type": "string" },
+              { "name": "description", "type": "string" },
+              { "name": "tabbed", "type": "boolean" },
+              { "name": "underlineHeader", "type": "boolean" },
+              { "name": "cosmic", "type": "boolean" },
+              { "name": "flush", "type": "boolean" },
+              { "name": "flushX", "type": "boolean" },
+              { "name": "flushY", "type": "boolean" },
+              { "name": "flushFooter", "type": "boolean" },
+              { "name": "transparent", "type": "boolean" },
+              { "name": "shadow", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "zn-language-change",
+                "description": "Emitted when the active language changes. Detail: `{ language: string }`."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-translations",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Methods:**\n - **setActiveLanguage(language: _string_)** - Sets the active language externally. Used by zn-translation-group.\n- **getActiveLanguage(): _string_** - Returns the currently active language.\n- **addLanguageKey(languageCode: _string_)** - Adds a language key to this component's values if not already present. Used by zn-translation-group.\n- **getValueLanguages(): _string[]_** - Returns all language codes that have values.",
           "doc-url": "",
           "attributes": [
             { "name": "name", "value": { "type": "string", "default": "''" } },
@@ -6994,6 +8218,11 @@
               "name": "flush",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "grouped",
+              "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "languages",
               "value": {
@@ -7015,6 +8244,11 @@
               { "name": "disabled", "type": "boolean" },
               { "name": "required", "type": "boolean" },
               { "name": "flush", "type": "boolean" },
+              {
+                "name": "grouped",
+                "description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
+                "type": "boolean"
+              },
               { "name": "languages", "type": "Record<string, string>" },
               { "name": "values", "type": "Record<string, string>" },
               { "name": "validity", "type": "ValidityState" },
@@ -7025,45 +8259,71 @@
         },
         {
           "name": "zn-vertical-stepper",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.\n---\n\n\n### **Slots:**\n - **icon** - Optional slot for adding an icon or indicator before the step content.\n\n### **CSS Parts:**\n - **vs** - The main container for the vertical stepper.\n- **vs__left** - The left section containing the icon and connecting line.\n- **vs__icon** - The icon container.\n- **vs__line** - The vertical connecting line between steps.\n- **vs__right** - The right section containing caption and description text.\n- **vs__caption** - The caption/title text element.\n- **vs__description** - The description text element.",
           "doc-url": "",
           "attributes": [
             {
               "name": "last",
+              "description": "When true, removes the connecting line below this step (use for the final step in a sequence).",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "first",
+              "description": "When true, indicates this is the first step in the sequence (affects visual styling).",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "active",
+              "description": "When true, highlights this step as the current active step in the process.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "description", "value": { "type": "string" } },
-            { "name": "caption", "value": { "type": "string" } }
+            {
+              "name": "description",
+              "description": "A descriptive text explaining what happens in this step or its current status.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "caption",
+              "description": "The main label/title for this step.",
+              "value": { "type": "string" }
+            }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            {
+              "name": "icon",
+              "description": "Optional slot for adding an icon or indicator before the step content."
+            }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "last", "type": "boolean" },
-              { "name": "first", "type": "boolean" },
-              { "name": "active", "type": "boolean" },
-              { "name": "description", "type": "string" },
-              { "name": "caption", "type": "string" }
-            ],
-            "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "last",
+                "description": "When true, removes the connecting line below this step (use for the final step in a sequence).",
+                "type": "boolean"
+              },
+              {
+                "name": "first",
+                "description": "When true, indicates this is the first step in the sequence (affects visual styling).",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "When true, highlights this step as the current active step in the process.",
+                "type": "boolean"
+              },
+              {
+                "name": "description",
+                "description": "A descriptive text explaining what happens in this step or its current status.",
+                "type": "string"
+              },
+              {
+                "name": "caption",
+                "description": "The main label/title for this step.",
+                "type": "string"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {