@kubex/zinc 1.1.25 → 1.1.26

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

@@ -13,17 +13,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-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.",
@@ -63,6 +52,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-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",
@@ -890,27 +890,6 @@
         }
       ]
     },
-    {
-      "name": "zn-copy-button",
-      "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": [
-        { "name": "value", "values": [] },
-        { "name": "copy-label", "values": [] },
-        { "name": "src", "values": [] },
-        { "name": "size", "values": [] },
-        {
-          "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\"`.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/copy-button"
-        }
-      ]
-    },
     {
       "name": "zn-data-select",
       "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).",
@@ -1059,28 +1038,38 @@
       ]
     },
     {
-      "name": "zn-data-table-filter",
+      "name": "zn-copy-button",
       "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": [
-        { "name": "filters", "values": [] },
-        { "name": "name", "values": [] },
-        { "name": "value", "values": [] }
+        { "name": "value", "values": [] },
+        { "name": "copy-label", "values": [] },
+        { "name": "src", "values": [] },
+        { "name": "size", "values": [] },
+        {
+          "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\"`.",
+          "values": []
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/data-table-filter"
+          "url": "https://zinc.style/components/copy-button"
         }
       ]
     },
     {
-      "name": "zn-data-table-sort",
+      "name": "zn-data-table-filter",
       "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": [],
+      "attributes": [
+        { "name": "filters", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "value", "values": [] }
+      ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/data-table-sort"
+          "url": "https://zinc.style/components/data-table-filter"
         }
       ]
     },
@@ -1126,6 +1115,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-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.",
@@ -2418,6 +2418,28 @@
         }
       ]
     },
+    {
+      "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": "label",
+          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables all options within the group.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/opt-group"
+        }
+      ]
+    },
     {
       "name": "zn-note",
       "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -2454,28 +2476,6 @@
         }
       ]
     },
-    {
-      "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": "label",
-          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables all options within the group.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/opt-group"
-        }
-      ]
-    },
     {
       "name": "zn-order-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.",

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.25",
+  "version": "1.1.26",
   "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.",
@@ -100,6 +78,28 @@
             ]
           }
         },
+        {
+          "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",
@@ -1956,57 +1956,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-copy-button",
-          "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": [
-            { "name": "value", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "copy-label",
-              "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\"`.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "copyIcon", "type": "HTMLSlotElement" },
-              { "name": "successIcon", "type": "HTMLSlotElement" },
-              { "name": "errorIcon", "type": "HTMLSlotElement" },
-              { "name": "tooltip", "type": "ZnTooltip" },
-              { "name": "isCopying", "type": "boolean" },
-              { "name": "status", "type": "'rest' | 'success' | 'error'" },
-              { "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\"`.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-data-select",
           "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).",
@@ -2407,19 +2356,22 @@
           }
         },
         {
-          "name": "zn-data-table-filter",
+          "name": "zn-copy-button",
           "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": [
+            { "name": "value", "value": { "type": "string", "default": "''" } },
             {
-              "name": "filters",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "copy-label",
+              "value": { "type": "string", "default": "''" }
             },
+            { "name": "src", "value": { "type": "string", "default": "''" } },
+            { "name": "size", "value": { "type": "number", "default": "24" } },
             {
-              "name": "name",
-              "value": { "type": "string", "default": "\"data-table-filter\"" }
-            },
-            { "name": "value", "value": { "type": "string" } }
+              "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\"`.",
+              "value": { "type": "string", "default": "''" }
+            }
           ],
           "slots": [
             { "name": "", "description": "The default slot." },
@@ -2430,14 +2382,21 @@
           ],
           "js": {
             "properties": [
-              { "name": "filters", "type": "string" },
-              { "name": "name", "type": "string" },
+              { "name": "copyIcon", "type": "HTMLSlotElement" },
+              { "name": "successIcon", "type": "HTMLSlotElement" },
+              { "name": "errorIcon", "type": "HTMLSlotElement" },
+              { "name": "tooltip", "type": "ZnTooltip" },
+              { "name": "isCopying", "type": "boolean" },
+              { "name": "status", "type": "'rest' | 'success' | 'error'" },
               { "name": "value", "type": "string" },
-              { "name": "validationMessage", "type": "string" },
-              { "name": "validity", "type": "ValidityState" },
-              { "name": "handleQBClear" },
-              { "name": "handleQBReset" },
-              { "name": "handleQBUpdate" }
+              { "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\"`.",
+                "type": "string"
+              }
             ],
             "events": [
               {
@@ -2448,10 +2407,20 @@
           }
         },
         {
-          "name": "zn-data-table-sort",
+          "name": "zn-data-table-filter",
           "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": [],
+          "attributes": [
+            {
+              "name": "filters",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "name",
+              "value": { "type": "string", "default": "\"data-table-filter\"" }
+            },
+            { "name": "value", "value": { "type": "string" } }
+          ],
           "slots": [
             { "name": "", "description": "The default slot." },
             { "name": "example", "description": "An example slot." }
@@ -2460,7 +2429,16 @@
             { "name": "zn-event-name", "description": "Emitted as an example." }
           ],
           "js": {
-            "properties": [],
+            "properties": [
+              { "name": "filters", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "validationMessage", "type": "string" },
+              { "name": "validity", "type": "ValidityState" },
+              { "name": "handleQBClear" },
+              { "name": "handleQBReset" },
+              { "name": "handleQBUpdate" }
+            ],
             "events": [
               {
                 "name": "zn-event-name",
@@ -2562,6 +2540,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-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.",
@@ -5650,6 +5650,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-note",
           "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -5739,45 +5778,6 @@
             "events": []
           }
         },
-        {
-          "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-order-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.",

package/dist/zn.min.js

@@ -5086,7 +5086,7 @@ Please report this to https://github.com/markedjs/marked.`,a){let i="<p>An error
         tooltip=${n}
         aria-pressed=${o?"true":"false"}
       ></zn-button>
-    `}};Ir.styles=[Er.styles,Y(P6e)],b([pe("zn-textarea")],Ir.prototype,"textarea",2),b([pe(".markdown-editor__preview")],Ir.prototype,"previewEl",2),b([w()],Ir.prototype,"name",2),b([w()],Ir.prototype,"value",2),b([ia()],Ir.prototype,"defaultValue",2),b([w()],Ir.prototype,"label",2),b([w({attribute:"help-text"})],Ir.prototype,"helpText",2),b([w()],Ir.prototype,"placeholder",2),b([w({type:Number})],Ir.prototype,"rows",2),b([w({reflect:!0,attribute:"view-mode"})],Ir.prototype,"viewMode",2),b([w({attribute:"storage-key"})],Ir.prototype,"storageKey",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"required",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"readonly",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"disabled",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"expanded",2),b([He("viewMode",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleViewModeChange",1),b([He("value",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleValueChange",1),b([He("markedReady",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleMarkedReady",1);var tat=Ir;Ir.define("zn-markdown-editor");var rat={},VD=Kr(class extends ii{constructor(){super(...arguments),this.ot=rat}render(a,r){return r()}update(a,[r,t]){if(Array.isArray(r)){if(Array.isArray(this.ot)&&this.ot.length===r.length&&r.every((i,n)=>i===this.ot[n]))return jr}else if(this.ot===r)return jr;return this.ot=Array.isArray(r)?Array.from(r):r,this.render(r,t)}});var O6e={id:"in"},c4={id:"out"},p4="__new__",d0="application/x-zn-flow-type",d4;function u4(){return d4||(d4=new Image,d4.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"),d4}var ua=240,zi=60,f4=200,GD=40,WD=40,aat=40,q6e=240,iat=20;function jD(a){let r=a.length*7.2,t=Math.max(1,Math.ceil(r/(q6e-36)));return{w:Math.min(q6e,Math.round(36+r)),h:aat+(t-1)*iat}}var Mi=20;function bn(a){return Math.round(a/Mi)*Mi}var N6e=10,nat=4;function H6e(a,r){let t=a.m+r.m;return a.x<r.x+r.w+t&&r.x<a.x+a.w+t&&a.y<r.y+r.h+t&&r.y<a.y+a.h+t}function KD(a,r,t,i){let n=Za(a,r(a.type)),o=a.x+ua/2,s=c=>Math.round(o+(n.length===1?0:(c-(n.length-1)/2)*f4)),l=170,d=n.map((c,f)=>{let p=s(f),u=i.find(k=>k.source.node===a.id&&k.source.port===c.id),m=u?t.find(k=>k.id===u.target.node):void 0;if(!u||!m)return{x:p,aligned:!1};if(i.some(k=>k!==u&&k.target.node===u.target.node&&k.target.port===u.target.port))return{x:p,aligned:!1};let _=zc(m,r(m.type)),x=Math.max(_.findIndex(k=>k.id===u.target.port),0),y=r_(m,"in",x,_.length).x;return Math.abs(y-p)>f4?{x:p,aligned:!1}:{x:y,aligned:!0}});for(let c=0;c<d.length;c++)d[c].aligned&&d.some((f,p)=>p!==c&&Math.abs(f.x-d[c].x)<l)&&(d[c]={x:s(c),aligned:!1});return d.map(c=>c.x)}function UD(a,r,t,i){let n=[{x:a.x,y:a.y,w:ua,h:zi,m:N6e}],o=Za(a,r(a.type)),s=KD(a,r,t,i);return o.forEach((l,d)=>{if(!l.label)return;let c=jD(l.label);n.push({x:s[d]-c.w/2,y:a.y+zi+GD+WD,w:c.w,h:c.h,m:nat})}),n}function B6e(a,r,t,i,n){let o=UD(a,t,i,n);return UD(r,t,i,n).some(s=>o.some(l=>H6e(l,s)))}function F6e(a,r,t,i,n){let o={x:a.x,y:a.y,w:ua,h:zi,m:N6e};return UD(r,t,i,n).some(s=>H6e(o,s))}var YD=200,XD=120,$6e=120,V6e=80;function r_(a,r,t,i){return{x:a.x+ua*(t+1)/(i+1),y:a.y+(r==="in"?0:zi)}}function U6e(){return{nodes:[],connections:[],notes:[]}}function h4(a){var r;return a?(r=a.inputs)!=null?r:[O6e]:[O6e]}function QD(a){var r;return a?(r=a.outputs)!=null?r:[c4]:[c4]}function zc(a,r){var t;return(t=a.inputs)!=null?t:h4(r)}function Za(a,r){var t;return(t=a.outputs)!=null?t:QD(r)}function a_(a,r){var t,i;return(i=(t=zc(a,r)[0])==null?void 0:t.id)!=null?i:null}function G6e(a,r){let t=new Set,i=n=>{for(let o of a.connections)o.source.node===n&&!t.has(o.target.node)&&(t.add(o.target.node),i(o.target.node))};return i(r),t}function mp(a,r){let t=new Set(a.map(c=>c.id)),i=new Map(a.map(c=>[c.id,[]])),n=new Set;for(let c of r)!t.has(c.source.node)||!t.has(c.target.node)||(i.get(c.source.node).push(c),n.add(c.target.node));let o=new Set,s=new Set,l=new Set,d=c=>{var f;s.add(c),l.add(c);for(let p of(f=i.get(c))!=null?f:[])l.has(p.target.node)?o.add(p):s.has(p.target.node)||d(p.target.node);l.delete(c)};return a.filter(c=>!n.has(c.id)).forEach(c=>d(c.id)),a.forEach(c=>{s.has(c.id)||d(c.id)}),o}var W6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--node-accent:rgb(var(--zn-color-primary));--port-size:11px;position:absolute;top:0;left:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}:host([dragging]) .card{cursor:grabbing}.card{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:0 10px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:10px;box-shadow:0 1px 2px rgba(var(--zn-shadow),0.4);cursor:grab;transition:border-color 0.12s ease,box-shadow 0.12s ease}.card:hover{border-color:rgb(var(--zn-color-border-active))}.card.selected{border-color:var(--node-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-accent) 35%,transparent)}.card.link-target{border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,rgb(var(--zn-color-primary)) 30%,transparent)}.card.error{border-color:rgb(var(--zn-color-error));background:color-mix(in srgb,rgb(var(--zn-color-error)) 6%,rgb(var(--zn-panel)))}.body{display:flex;align-items:center;gap:10px}.icon-tile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 14%,transparent)}.text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.text .title{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text .subtitle{font-size:0.75rem;color:rgb(var(--zn-color-muted-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu{flex:0 0 auto;margin-right:-4px}zn-menu-item.danger{color:rgb(var(--zn-color-error))}.ports{position:absolute;left:0;width:100%;height:0}.ports--in{top:0}.ports--out{bottom:0}.port-wrap{position:absolute}.port{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:var(--port-size);height:var(--port-size);border-radius:50%;background:rgb(var(--zn-panel));border:2px solid var(--node-accent);box-sizing:border-box;pointer-events:none}.port--in{transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}:host([link-target]) .port--in{transform:translate(-50%,-50%) scale(1.4);background:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.port--out{pointer-events:auto;cursor:pointer;transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}.port--out:hover{transform:translate(-50%,-50%) scale(1.4);background:var(--node-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--node-accent) 25%,transparent)}.port-label{position:absolute;top:calc(var(--port-size) / 2 + 3px);left:8px;font-size:0.625rem;font-weight:600;letter-spacing:0.02em;color:rgb(var(--zn-color-muted-text));white-space:nowrap;pointer-events:none}`;var Yn=class extends K{constructor(){super(...arguments);this.selected=!1;this.error=!1;this.dragging=!1;this.linkTarget=!1;this._onBodyPointerDown=t=>{if(t.button!==0)return;let i=t.target;i.closest(".port")||i.closest("zn-dropdown")||(t.stopPropagation(),this._emit("flow-node-select",{nodeId:this.node.id}),this._emit("flow-node-grab",{nodeId:this.node.id,clientX:t.clientX,clientY:t.clientY}))}}updated(t){var i,n;super.updated(t),this.style.width=`${ua}px`,this.style.height=`${zi}px`,this.style.setProperty("--node-accent",(n=(i=this.type)==null?void 0:i.color)!=null?n:"rgb(var(--zn-color-primary))")}get nodeTitle(){var t,i,n,o,s,l;return(l=(s=(n=(t=this.node)==null?void 0:t.label)!=null?n:(i=this.type)==null?void 0:i.label)!=null?s:(o=this.node)==null?void 0:o.type)!=null?l:"Node"}get nodeSubtitle(){var i,n,o,s,l,d,c;let t=(l=(n=(i=this.node)==null?void 0:i.data)==null?void 0:n.subtitle)!=null?l:(s=(o=this.node)==null?void 0:o.data)==null?void 0:s.description;return typeof t=="string"?t:(c=(d=this.type)==null?void 0:d.description)!=null?c:""}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}_action(t){this._emit("flow-node-action",{nodeId:this.node.id,action:t})}_renderPorts(t,i){let n=t.length;return C`
+    `}};Ir.styles=[Er.styles,Y(P6e)],b([pe("zn-textarea")],Ir.prototype,"textarea",2),b([pe(".markdown-editor__preview")],Ir.prototype,"previewEl",2),b([w()],Ir.prototype,"name",2),b([w()],Ir.prototype,"value",2),b([ia()],Ir.prototype,"defaultValue",2),b([w()],Ir.prototype,"label",2),b([w({attribute:"help-text"})],Ir.prototype,"helpText",2),b([w()],Ir.prototype,"placeholder",2),b([w({type:Number})],Ir.prototype,"rows",2),b([w({reflect:!0,attribute:"view-mode"})],Ir.prototype,"viewMode",2),b([w({attribute:"storage-key"})],Ir.prototype,"storageKey",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"required",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"readonly",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"disabled",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"expanded",2),b([He("viewMode",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleViewModeChange",1),b([He("value",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleValueChange",1),b([He("markedReady",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleMarkedReady",1);var tat=Ir;Ir.define("zn-markdown-editor");var rat={},VD=Kr(class extends ii{constructor(){super(...arguments),this.ot=rat}render(a,r){return r()}update(a,[r,t]){if(Array.isArray(r)){if(Array.isArray(this.ot)&&this.ot.length===r.length&&r.every((i,n)=>i===this.ot[n]))return jr}else if(this.ot===r)return jr;return this.ot=Array.isArray(r)?Array.from(r):r,this.render(r,t)}});var O6e={id:"in"},c4={id:"out"},p4="__new__",d0="application/x-zn-flow-type",d4;function u4(){return d4||(d4=new Image,d4.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"),d4}var ua=240,zi=60,f4=200,GD=40,WD=40,aat=40,q6e=240,iat=20;function jD(a){let r=a.length*7.2,t=Math.max(1,Math.ceil(r/(q6e-36)));return{w:Math.min(q6e,Math.round(36+r)),h:aat+(t-1)*iat}}var Mi=20;function bn(a){return Math.round(a/Mi)*Mi}var N6e=10,nat=4;function H6e(a,r){let t=a.m+r.m;return a.x<r.x+r.w+t&&r.x<a.x+a.w+t&&a.y<r.y+r.h+t&&r.y<a.y+a.h+t}function KD(a,r,t,i){let n=Za(a,r(a.type)),o=a.x+ua/2,s=c=>Math.round(o+(n.length===1?0:(c-(n.length-1)/2)*f4)),l=170,d=n.map((c,f)=>{let p=s(f),u=i.find(k=>k.source.node===a.id&&k.source.port===c.id),m=u?t.find(k=>k.id===u.target.node):void 0;if(!u||!m)return{x:p,aligned:!1};if(i.some(k=>k!==u&&k.target.node===u.target.node&&k.target.port===u.target.port))return{x:p,aligned:!1};let _=zc(m,r(m.type)),x=Math.max(_.findIndex(k=>k.id===u.target.port),0),y=r_(m,"in",x,_.length).x;return Math.abs(y-p)>f4?{x:p,aligned:!1}:{x:y,aligned:!0}});for(let c=0;c<d.length;c++)d[c].aligned&&d.some((f,p)=>p!==c&&Math.abs(f.x-d[c].x)<l)&&(d[c]={x:s(c),aligned:!1});return d.map(c=>c.x)}function UD(a,r,t,i){let n=[{x:a.x,y:a.y,w:ua,h:zi,m:N6e}],o=Za(a,r(a.type)),s=KD(a,r,t,i);return o.forEach((l,d)=>{if(!l.label)return;let c=jD(l.label);n.push({x:s[d]-c.w/2,y:a.y+zi+GD+WD,w:c.w,h:c.h,m:nat})}),n}function B6e(a,r,t,i,n){let o=UD(a,t,i,n);return UD(r,t,i,n).some(s=>o.some(l=>H6e(l,s)))}function F6e(a,r,t,i,n){let o={x:a.x,y:a.y,w:ua,h:zi,m:N6e};return UD(r,t,i,n).some(s=>H6e(o,s))}var YD=200,XD=120,$6e=120,V6e=80;function r_(a,r,t,i){return{x:a.x+ua*(t+1)/(i+1),y:a.y+(r==="in"?0:zi)}}function U6e(){return{nodes:[],connections:[],notes:[]}}function h4(a){var r;return a?(r=a.inputs)!=null?r:[O6e]:[O6e]}function QD(a){var r;return a?(r=a.outputs)!=null?r:[c4]:[c4]}function zc(a,r){var t;return(t=a.inputs)!=null?t:h4(r)}function Za(a,r){var t;return(t=a.outputs)!=null?t:QD(r)}function a_(a,r){var t,i;return(i=(t=zc(a,r)[0])==null?void 0:t.id)!=null?i:null}function G6e(a,r){let t=new Set,i=n=>{for(let o of a.connections)o.source.node===n&&!t.has(o.target.node)&&(t.add(o.target.node),i(o.target.node))};return i(r),t}function mp(a,r){let t=new Set(a.map(c=>c.id)),i=new Map(a.map(c=>[c.id,[]])),n=new Set;for(let c of r)!t.has(c.source.node)||!t.has(c.target.node)||(i.get(c.source.node).push(c),n.add(c.target.node));let o=new Set,s=new Set,l=new Set,d=c=>{var f;s.add(c),l.add(c);for(let p of(f=i.get(c))!=null?f:[])l.has(p.target.node)?o.add(p):s.has(p.target.node)||d(p.target.node);l.delete(c)};return a.filter(c=>!n.has(c.id)).forEach(c=>d(c.id)),a.forEach(c=>{s.has(c.id)||d(c.id)}),o}var W6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--node-accent:rgb(var(--zn-color-primary));--port-size:11px;position:absolute;top:0;left:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}:host([dragging]) .card{cursor:grabbing}.card{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:0 10px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:10px;box-shadow:0 1px 2px rgba(var(--zn-shadow),0.4);cursor:grab;transition:border-color 0.12s ease,box-shadow 0.12s ease}.card:hover{border-color:rgb(var(--zn-color-border-active))}.card.selected{border-color:var(--node-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-accent) 35%,transparent)}.card.link-target{border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,rgb(var(--zn-color-primary)) 30%,transparent)}.card.error{border-color:rgb(var(--zn-color-error));background:color-mix(in srgb,rgb(var(--zn-color-error)) 6%,rgb(var(--zn-panel)))}.body{display:flex;align-items:center;gap:10px}.icon-tile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 14%,transparent)}.text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.text .title{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text .subtitle{font-size:0.75rem;color:rgb(var(--zn-color-muted-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu{flex:0 0 auto}zn-menu-item.danger{color:rgb(var(--zn-color-error))}.ports{position:absolute;left:0;width:100%;height:0}.ports--in{top:0}.ports--out{bottom:0}.port-wrap{position:absolute}.port{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:var(--port-size);height:var(--port-size);border-radius:50%;background:rgb(var(--zn-panel));border:2px solid var(--node-accent);box-sizing:border-box;pointer-events:none}.port--in{transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}:host([link-target]) .port--in{transform:translate(-50%,-50%) scale(1.4);background:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.port--out{pointer-events:auto;cursor:pointer;transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}.port--out:hover{transform:translate(-50%,-50%) scale(1.4);background:var(--node-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--node-accent) 25%,transparent)}.port-label{position:absolute;top:calc(var(--port-size) / 2 + 3px);left:8px;font-size:0.625rem;font-weight:600;letter-spacing:0.02em;color:rgb(var(--zn-color-muted-text));white-space:nowrap;pointer-events:none}`;var Yn=class extends K{constructor(){super(...arguments);this.selected=!1;this.error=!1;this.dragging=!1;this.linkTarget=!1;this._onBodyPointerDown=t=>{if(t.button!==0)return;let i=t.target;i.closest(".port")||i.closest("zn-dropdown")||(t.stopPropagation(),this._emit("flow-node-select",{nodeId:this.node.id}),this._emit("flow-node-grab",{nodeId:this.node.id,clientX:t.clientX,clientY:t.clientY}))}}updated(t){var i,n;super.updated(t),this.style.width=`${ua}px`,this.style.height=`${zi}px`,this.style.setProperty("--node-accent",(n=(i=this.type)==null?void 0:i.color)!=null?n:"rgb(var(--zn-color-primary))")}get nodeTitle(){var t,i,n,o,s,l;return(l=(s=(n=(t=this.node)==null?void 0:t.label)!=null?n:(i=this.type)==null?void 0:i.label)!=null?s:(o=this.node)==null?void 0:o.type)!=null?l:"Node"}get nodeSubtitle(){var i,n,o,s,l,d,c;let t=(l=(n=(i=this.node)==null?void 0:i.data)==null?void 0:n.subtitle)!=null?l:(s=(o=this.node)==null?void 0:o.data)==null?void 0:s.description;return typeof t=="string"?t:(c=(d=this.type)==null?void 0:d.description)!=null?c:""}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}_action(t){this._emit("flow-node-action",{nodeId:this.node.id,action:t})}_renderPorts(t,i){let n=t.length;return C`
       <div class="ports ports--${i}">
         ${t.map((o,s)=>{let l=`${100*(s+1)/(n+1)}%`;return C`
             <div class="port-wrap" style="left:${l}">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/flow-builder/modules/flow-node/flow-node.scss

@@ -94,9 +94,9 @@
   }
 }
 
+// Sits flush with the body padding, mirroring the icon tile's edge gap.
 .menu {
   flex: 0 0 auto;
-  margin-right: -4px;
 }
 
 zn-menu-item.danger {