@kubex/zinc 1.0.115 → 1.0.117

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.",
@@ -48,17 +59,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",
@@ -156,30 +156,24 @@
           "name": "color",
           "values": [
             { "name": "default" },
+            { "name": "primary" },
             { "name": "secondary" },
             { "name": "error" },
             { "name": "info" },
             { "name": "success" },
             { "name": "warning" },
             { "name": "transparent" },
-            { "name": "star" }
-          ]
-        },
-        {
-          "name": "size",
-          "values": [
-            { "name": "content" },
-            { "name": "x-small" },
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
+            { "name": "star" },
+            { "name": "(string & Record<never, never>)" }
           ]
         },
+        { "name": "hover-color", "values": [] },
         { "name": "text", "values": [] },
         { "name": "outline", "values": [] },
         { "name": "disabled", "values": [] },
         { "name": "grow", "values": [] },
         { "name": "square", "values": [] },
+        { "name": "icon-button", "values": [] },
         { "name": "panel-bg", "values": [] },
         { "name": "dropdown-closer", "values": [] },
         { "name": "notification", "values": [] },
@@ -299,16 +293,6 @@
         { "name": "containerWidth", "values": [] },
         { "name": "limit", "values": [] },
         { "name": "max-level", "values": [] },
-        {
-          "name": "size",
-          "values": [
-            { "name": "content" },
-            { "name": "x-small" },
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
         { "name": "icon-size", "values": [] },
         { "name": "no-gap", "values": [] },
         { "name": "no-padding", "values": [] }
@@ -1287,7 +1271,7 @@
     },
     {
       "name": "zn-file",
-      "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **droparea-icon** - Optional droparea icon to use instead of the default. Works best with `<zn-icon>`.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **trigger** - The container that wraps the trigger.",
+      "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the user confirms clearing the selected file or `src`.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **upload** - The upload button shown in the droparea when no file is selected.\n- **preview** - The image preview rendered in the droparea for previewable files.\n- **filename** - The filename label rendered in the droparea for non-previewable files.\n- **clear** - The clear button rendered in the droparea when a file is present.\n- **clear-confirm** - The confirmation dialog shown before clearing the file.\n- **link** - The current link anchor rendered when `show-link` is enabled.\n- **trigger** - The container that wraps the trigger.",
       "attributes": [
         {
           "name": "files",
@@ -1372,6 +1356,21 @@
           "name": "hide-value",
           "description": "Suppress the value from being displayed in the file control",
           "values": []
+        },
+        {
+          "name": "src",
+          "description": "URL of an already-uploaded file (e.g., from a CDN) to display as the current value\nwhen no file has been selected locally. If the URL points to an image, it is rendered\nas a preview inside the droparea. Otherwise the URL is shown as a filename.",
+          "values": []
+        },
+        {
+          "name": "trigger-submit",
+          "description": "When enabled, automatically submit the surrounding form whenever the value changes\n(file selected, dropped, or cleared). Useful for forms that only contain this control\nand a CSRF token.",
+          "values": []
+        },
+        {
+          "name": "show-link",
+          "description": "When enabled, render the current link (`previewSrc`) as a clickable URL below the control.\nUseful for showing the existing CDN link alongside the preview.",
+          "values": []
         }
       ],
       "references": [
@@ -1439,7 +1438,6 @@
         { "name": "transparent", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "icon", "values": [] },
-        { "name": "description", "values": [] },
         { "name": "navigation", "values": [{ "name": "array" }] },
         { "name": "full-width", "values": [] },
         { "name": "previous-path", "values": [] },
@@ -2041,9 +2039,8 @@
         { "name": "basis-px", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "icon", "values": [] },
-        { "name": "description", "values": [] },
         { "name": "tabbed", "values": [] },
-        { "name": "header-underline", "values": [] },
+        { "name": "header-borderless", "values": [] },
         { "name": "cosmic", "values": [] },
         { "name": "flush", "values": [] },
         { "name": "flush-x", "values": [] },
@@ -2356,9 +2353,8 @@
         { "name": "basis-px", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "icon", "values": [] },
-        { "name": "description", "values": [] },
         { "name": "tabbed", "values": [] },
-        { "name": "header-underline", "values": [] },
+        { "name": "header-borderless", "values": [] },
         { "name": "cosmic", "values": [] },
         { "name": "flush", "values": [] },
         { "name": "flush-x", "values": [] },
@@ -3341,18 +3337,6 @@
         }
       ]
     },
-    {
-      "name": "zn-tab",
-      "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
-      "attributes": [
-        { "name": "caption", "values": [] },
-        { "name": "priority", "values": [] },
-        { "name": "uri", "values": [] }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://zinc.style/components/tab" }
-      ]
-    },
     {
       "name": "zn-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.",
@@ -3401,6 +3385,23 @@
         { "name": "Documentation", "url": "https://zinc.style/components/tabs" }
       ]
     },
+    {
+      "name": "zn-tab",
+      "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
+      "attributes": [
+        { "name": "caption", "values": [] },
+        { "name": "priority", "values": [] },
+        { "name": "uri", "values": [] },
+        {
+          "name": "selected",
+          "description": "When present, zn-page opens this tab on load instead of the first tab.",
+          "values": []
+        }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://zinc.style/components/tab" }
+      ]
+    },
     {
       "name": "zn-textarea",
       "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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\n### **Slots:**\n - **label** - The textareas 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 textarea, on the right. Alternatively, you can use the `context-note` attribute.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
@@ -3696,9 +3697,8 @@
         { "name": "basis-px", "values": [] },
         { "name": "caption", "values": [] },
         { "name": "icon", "values": [] },
-        { "name": "description", "values": [] },
         { "name": "tabbed", "values": [] },
-        { "name": "header-underline", "values": [] },
+        { "name": "header-borderless", "values": [] },
         { "name": "cosmic", "values": [] },
         { "name": "flush", "values": [] },
         { "name": "flush-x", "values": [] },

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.115",
+  "version": "1.0.117",
   "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.",
@@ -70,28 +92,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",
@@ -283,17 +283,11 @@
             {
               "name": "color",
               "value": {
-                "type": "'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star'",
+                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)",
                 "default": "'default'"
               }
             },
-            {
-              "name": "size",
-              "value": {
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
+            { "name": "hover-color", "value": { "type": "string" } },
             {
               "name": "text",
               "value": { "type": "boolean", "default": "false" }
@@ -314,6 +308,10 @@
               "name": "square",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "icon-button",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "panel-bg",
               "value": { "type": "boolean", "default": "false" }
@@ -440,17 +438,15 @@
               { "name": "countdownContainer", "type": "HTMLElement[]" },
               {
                 "name": "color",
-                "type": "'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star'"
-              },
-              {
-                "name": "size",
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
+                "type": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star' | (string & Record<never, never>)"
               },
+              { "name": "hoverColor", "type": "string" },
               { "name": "text", "type": "boolean" },
               { "name": "outline", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
               { "name": "grow", "type": "boolean" },
               { "name": "square", "type": "boolean" },
+              { "name": "iconButton", "type": "boolean" },
               { "name": "panelBackground", "type": "boolean" },
               { "name": "dropdownCloser", "type": "boolean" },
               { "name": "notification", "type": "number" },
@@ -575,13 +571,6 @@
               "name": "max-level",
               "value": { "type": "number", "default": "2" }
             },
-            {
-              "name": "size",
-              "value": {
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
             {
               "name": "icon-size",
               "value": { "type": "number", "default": "24" }
@@ -597,10 +586,6 @@
               { "name": "containerWidth", "type": "number" },
               { "name": "limit", "type": "number" },
               { "name": "maxLevel", "type": "number" },
-              {
-                "name": "size",
-                "type": "'content' | 'x-small' | 'small' | 'medium' | 'large'"
-              },
               { "name": "iconSize", "type": "number" },
               { "name": "noGap", "type": "boolean" },
               { "name": "noPadding", "type": "boolean" }
@@ -2942,7 +2927,7 @@
         },
         {
           "name": "zn-file",
-          "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **droparea-icon** - Optional droparea icon to use instead of the default. Works best with `<zn-icon>`.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **droparea-icon** - The container that wraps the icon for the drop zone.\n- **droparea-value** - The text for the drop zone.\n- **trigger** - The container that wraps the trigger.",
+          "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the user confirms clearing the selected file or `src`.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **upload** - The upload button shown in the droparea when no file is selected.\n- **preview** - The image preview rendered in the droparea for previewable files.\n- **filename** - The filename label rendered in the droparea for non-previewable files.\n- **clear** - The clear button rendered in the droparea when a file is present.\n- **clear-confirm** - The confirmation dialog shown before clearing the file.\n- **link** - The current link anchor rendered when `show-link` is enabled.\n- **trigger** - The container that wraps the trigger.",
           "doc-url": "",
           "attributes": [
             {
@@ -3027,6 +3012,21 @@
               "name": "hide-value",
               "description": "Suppress the value from being displayed in the file control",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "src",
+              "description": "URL of an already-uploaded file (e.g., from a CDN) to display as the current value\nwhen no file has been selected locally. If the URL points to an image, it is rendered\nas a preview inside the droparea. Otherwise the URL is shown as a filename.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "trigger-submit",
+              "description": "When enabled, automatically submit the surrounding form whenever the value changes\n(file selected, dropped, or cleared). Useful for forms that only contain this control\nand a CSRF token.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-link",
+              "description": "When enabled, render the current link (`previewSrc`) as a clickable URL below the control.\nUseful for showing the existing CDN link alongside the preview.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -3038,10 +3038,6 @@
               "name": "help-text",
               "description": "Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute."
             },
-            {
-              "name": "droparea-icon",
-              "description": "Optional droparea icon to use instead of the default. Works best with `<zn-icon>`."
-            },
             {
               "name": "trigger",
               "description": "Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself."
@@ -3056,6 +3052,10 @@
               "name": "zn-change",
               "description": "Emitted when an alteration to the control's value is committed by the user."
             },
+            {
+              "name": "zn-clear",
+              "description": "Emitted when the user confirms clearing the selected file or `src`."
+            },
             {
               "name": "zn-error",
               "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
@@ -3076,6 +3076,10 @@
               { "name": "dropareaWrapper", "type": "HTMLDivElement" },
               { "name": "dropareaIcon", "type": "HTMLSpanElement" },
               { "name": "inputChosen", "type": "HTMLSpanElement" },
+              {
+                "name": "clearConfirmDialog",
+                "type": "HTMLElement & { show: () => void; hide: () => void }"
+              },
               {
                 "name": "files",
                 "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)"
@@ -3159,6 +3163,21 @@
                 "description": "Suppress the value from being displayed in the file control",
                 "type": "boolean"
               },
+              {
+                "name": "src",
+                "description": "URL of an already-uploaded file (e.g., from a CDN) to display as the current value\nwhen no file has been selected locally. If the URL points to an image, it is rendered\nas a preview inside the droparea. Otherwise the URL is shown as a filename.",
+                "type": "string"
+              },
+              {
+                "name": "triggerSubmit",
+                "description": "When enabled, automatically submit the surrounding form whenever the value changes\n(file selected, dropped, or cleared). Useful for forms that only contain this control\nand a CSRF token.",
+                "type": "boolean"
+              },
+              {
+                "name": "showLink",
+                "description": "When enabled, render the current link (`previewSrc`) as a clickable URL below the control.\nUseful for showing the existing CDN link alongside the preview.",
+                "type": "boolean"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -3166,6 +3185,11 @@
               {
                 "name": "validationMessage",
                 "description": "Gets the validation message"
+              },
+              {
+                "name": "previewSrc",
+                "description": "Returns the URL currently shown in the droparea — the locally-selected file's object URL\nif a file is selected, otherwise the externally supplied `src`. Useful for getting the\ncurrent CDN link to submit alongside form data.",
+                "type": "string"
               }
             ],
             "events": [
@@ -3177,6 +3201,10 @@
                 "name": "zn-change",
                 "description": "Emitted when an alteration to the control's value is committed by the user."
               },
+              {
+                "name": "zn-clear",
+                "description": "Emitted when the user confirms clearing the selected file or `src`."
+              },
               {
                 "name": "zn-error",
                 "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set."
@@ -3317,7 +3345,6 @@
             },
             { "name": "caption", "value": { "type": "string" } },
             { "name": "icon", "value": { "type": "string" } },
-            { "name": "description", "value": { "type": "string" } },
             {
               "name": "navigation",
               "value": { "type": "array", "default": "[]" }
@@ -3345,7 +3372,6 @@
               { "name": "transparent", "type": "boolean" },
               { "name": "caption", "type": "string" },
               { "name": "icon", "type": "string" },
-              { "name": "description", "type": "string" },
               { "name": "navigation", "type": "array" },
               { "name": "fullWidth", "type": "boolean" },
               { "name": "previousPath", "type": "string" },
@@ -4603,9 +4629,8 @@
             { "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": "header-borderless", "value": { "type": "boolean" } },
             { "name": "cosmic", "value": { "type": "boolean" } },
             { "name": "flush", "value": { "type": "boolean" } },
             { "name": "flush-x", "value": { "type": "boolean" } },
@@ -4722,9 +4747,8 @@
               { "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": "headerBorderless", "type": "boolean" },
               { "name": "cosmic", "type": "boolean" },
               { "name": "flush", "type": "boolean" },
               { "name": "flushX", "type": "boolean" },
@@ -5481,9 +5505,8 @@
             { "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": "header-borderless", "value": { "type": "boolean" } },
             { "name": "cosmic", "value": { "type": "boolean" } },
             { "name": "flush", "value": { "type": "boolean" } },
             { "name": "flush-x", "value": { "type": "boolean" } },
@@ -5509,9 +5532,8 @@
               { "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": "headerBorderless", "type": "boolean" },
               { "name": "cosmic", "type": "boolean" },
               { "name": "flush", "type": "boolean" },
               { "name": "flushX", "type": "boolean" },
@@ -7800,26 +7822,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-tab",
-          "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "priority", "value": { "type": "number" } },
-            { "name": "uri", "value": { "type": "string" } }
-          ],
-          "slots": [{ "name": "", "description": "The tab panel content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "caption", "type": "string" },
-              { "name": "priority", "type": "number" },
-              { "name": "uri", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "zn-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.",
@@ -7975,6 +7977,36 @@
             ]
           }
         },
+        {
+          "name": "zn-tab",
+          "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "priority", "value": { "type": "number" } },
+            { "name": "uri", "value": { "type": "string" } },
+            {
+              "name": "selected",
+              "description": "When present, zn-page opens this tab on load instead of the first tab.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tab panel content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "caption", "type": "string" },
+              { "name": "priority", "type": "number" },
+              { "name": "uri", "type": "string" },
+              {
+                "name": "selected",
+                "description": "When present, zn-page opens this tab on load instead of the first tab.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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\n### **Slots:**\n - **label** - The textareas 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 textarea, on the right. Alternatively, you can use the `context-note` attribute.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
@@ -8641,9 +8673,8 @@
             { "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": "header-borderless", "value": { "type": "boolean" } },
             { "name": "cosmic", "value": { "type": "boolean" } },
             { "name": "flush", "value": { "type": "boolean" } },
             { "name": "flush-x", "value": { "type": "boolean" } },
@@ -8687,9 +8718,8 @@
               { "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": "headerBorderless", "type": "boolean" },
               { "name": "cosmic", "type": "boolean" },
               { "name": "flush", "type": "boolean" },
               { "name": "flushX", "type": "boolean" },