@kubex/zinc 1.1.23 → 1.1.25

package/dist/vscode.html-custom-data.json

@@ -13,6 +13,17 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "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.",
@@ -52,17 +63,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "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",
@@ -1073,6 +1073,17 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/data-table-sort"
+        }
+      ]
+    },
     {
       "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.",
@@ -1115,17 +1126,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/data-table-sort"
-        }
-      ]
-    },
     {
       "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.",
@@ -1598,6 +1598,28 @@
         }
       ]
     },
+    {
+      "name": "zn-flow-builder",
+      "description": "A drag-and-drop visual flow builder: steps panel, pan/zoom canvas, and a config inspector.\n---\n\n\n### **Events:**\n - **zn-flow-change** - Emitted whenever the flow state changes. `event.detail.state` is the new FlowState.\n- **zn-flow-selection-change** - Emitted when the selected node changes. `event.detail.nodeId`.\n- **zn-flow-connect** - Emitted when a connection is created. `event.detail.connection`.\n\n### **Slots:**\n - _default_ - `<zn-flow-step>` type declarations; never displayed, each `group`/`category` routes the step into the right tab and collapsible grouping of the rendered panel.\n- **header-left** - Actions shown on the left of the header bar (e.g. Close / Undo All Changes).\n- **header-right** - Actions shown on the right of the header bar (e.g. Apply Changes).\n- **sidebar** - Extra right-panel content (status, version history), below the configuration errors.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **steps** - The left steps panel.\n- **inspector** - The right panel while a node or branch is selected.",
+      "attributes": [
+        { "name": "heading", "values": [] },
+        { "name": "subheading", "values": [] },
+        {
+          "name": "entrypoints-hint",
+          "description": "Optional hint shown beneath each steps-panel tab.",
+          "values": []
+        },
+        { "name": "triggers-hint", "values": [] },
+        { "name": "actions-hint", "values": [] },
+        { "name": "rules-hint", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/flow-builder"
+        }
+      ]
+    },
     {
       "name": "zn-form-group",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
@@ -2410,47 +2432,47 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
         {
-          "name": "label",
-          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+          "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 contain spaces when using JSON array syntax on the parent select.",
           "values": []
         },
         {
           "name": "disabled",
-          "description": "Disables all options within the group.",
+          "description": "Draws the option in a disabled state, preventing selection.",
           "values": []
-        }
+        },
+        { "name": "selected", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/opt-group"
+          "url": "https://zinc.style/components/option"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "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 contain spaces when using JSON array syntax on the parent select.",
+          "name": "label",
+          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
           "values": []
         },
         {
           "name": "disabled",
-          "description": "Draws the option in a disabled state, preventing selection.",
+          "description": "Disables all options within the group.",
           "values": []
-        },
-        { "name": "selected", "values": [] }
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/option"
+          "url": "https://zinc.style/components/opt-group"
         }
       ]
     },

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.1.23",
+  "version": "1.1.25",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "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.",
@@ -78,28 +100,6 @@
             ]
           }
         },
-        {
-          "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",
@@ -2447,6 +2447,28 @@
             ]
           }
         },
+        {
+          "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-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.",
@@ -2540,28 +2562,6 @@
             ]
           }
         },
-        {
-          "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.",
@@ -3729,6 +3729,115 @@
             ]
           }
         },
+        {
+          "name": "zn-flow-builder",
+          "description": "A drag-and-drop visual flow builder: steps panel, pan/zoom canvas, and a config inspector.\n---\n\n\n### **Events:**\n - **zn-flow-change** - Emitted whenever the flow state changes. `event.detail.state` is the new FlowState.\n- **zn-flow-selection-change** - Emitted when the selected node changes. `event.detail.nodeId`.\n- **zn-flow-connect** - Emitted when a connection is created. `event.detail.connection`.\n\n### **Slots:**\n - _default_ - `<zn-flow-step>` type declarations; never displayed, each `group`/`category` routes the step into the right tab and collapsible grouping of the rendered panel.\n- **header-left** - Actions shown on the left of the header bar (e.g. Close / Undo All Changes).\n- **header-right** - Actions shown on the right of the header bar (e.g. Apply Changes).\n- **sidebar** - Extra right-panel content (status, version history), below the configuration errors.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **steps** - The left steps panel.\n- **inspector** - The right panel while a node or branch is selected.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "subheading",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "entrypoints-hint",
+              "description": "Optional hint shown beneath each steps-panel tab.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "triggers-hint",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "actions-hint",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "rules-hint",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "`<zn-flow-step>` type declarations; never displayed, each `group`/`category` routes the step into the right tab and collapsible grouping of the rendered panel."
+            },
+            {
+              "name": "header-left",
+              "description": "Actions shown on the left of the header bar (e.g. Close / Undo All Changes)."
+            },
+            {
+              "name": "header-right",
+              "description": "Actions shown on the right of the header bar (e.g. Apply Changes)."
+            },
+            {
+              "name": "sidebar",
+              "description": "Extra right-panel content (status, version history), below the configuration errors."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-flow-change",
+              "description": "Emitted whenever the flow state changes. `event.detail.state` is the new FlowState."
+            },
+            {
+              "name": "zn-flow-selection-change",
+              "description": "Emitted when the selected node changes. `event.detail.nodeId`."
+            },
+            {
+              "name": "zn-flow-connect",
+              "description": "Emitted when a connection is created. `event.detail.connection`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "nodeTypes",
+                "description": "Node types to make available, registered into the internal registry.",
+                "type": "FlowNodeType[]"
+              },
+              { "name": "heading", "type": "string" },
+              { "name": "subheading", "type": "string" },
+              {
+                "name": "errorNodes",
+                "description": "Node ids flagged as having configuration errors (drives the red node styling).",
+                "type": "string[]"
+              },
+              {
+                "name": "entrypointsHint",
+                "description": "Optional hint shown beneath each steps-panel tab.",
+                "type": "string"
+              },
+              { "name": "triggersHint", "type": "string" },
+              { "name": "actionsHint", "type": "string" },
+              { "name": "rulesHint", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "undo" },
+              { "name": "redo" },
+              {
+                "name": "untangle",
+                "description": "Auto-arrange the nodes into evenly spaced layers that follow the flow,\nanimating them into place (wires and pills track them since everything is\nderived from the node coordinates). Undoable as a single step."
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-flow-change",
+                "description": "Emitted whenever the flow state changes. `event.detail.state` is the new FlowState."
+              },
+              {
+                "name": "zn-flow-selection-change",
+                "description": "Emitted when the selected node changes. `event.detail.nodeId`."
+              },
+              {
+                "name": "zn-flow-connect",
+                "description": "Emitted when a connection is created. `event.detail.connection`."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-form-group",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
@@ -5578,93 +5687,93 @@
           }
         },
         {
-          "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.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "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 contain spaces when using JSON array syntax on the parent select.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Disables all options within the group.",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
+            { "name": "", "description": "The option's label." },
             {
-              "name": "",
-              "description": "The default slot for `<zn-option>` elements."
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the menu item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the menu item."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              { "name": "multiple", "type": "boolean" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "current", "type": "boolean" },
+              { "name": "hasHover", "type": "boolean" },
               {
-                "name": "label",
-                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+                "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 contain spaces when using JSON array syntax on the parent select.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Disables all options within the group.",
+                "description": "Draws the option in a disabled state, preventing selection.",
                 "type": "boolean"
-              }
+              },
+              { "name": "selected", "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.",
+          "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": "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 contain spaces when using JSON array syntax on the parent select.",
+              "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": "Draws the option in a disabled state, preventing selection.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "selected",
+              "description": "Disables all options within the group.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The option's label." },
             {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the menu item."
-            },
-            {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the menu item."
+              "name": "",
+              "description": "The default slot for `<zn-option>` elements."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "multiple", "type": "boolean" },
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "current", "type": "boolean" },
-              { "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 contain spaces when using JSON array syntax on the parent select.",
+                "name": "label",
+                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Draws the option in a disabled state, preventing selection.",
+                "description": "Disables all options within the group.",
                 "type": "boolean"
-              },
-              { "name": "selected", "type": "boolean" }
+              }
             ],
             "events": []
           }