@kubex/zinc 1.1.66 → 1.1.68

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

@@ -1079,7 +1079,7 @@
     },
     {
       "name": "zn-data-table",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\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": "data-uri", "values": [] },
         { "name": "data", "values": [{ "name": "Row[]" }, { "name": "Row" }] },
@@ -1318,10 +1318,19 @@
       "name": "zn-defined-label",
       "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
       "attributes": [
-        { "name": "value", "values": [] },
-        { "name": "inputValue", "values": [] },
+        {
+          "name": "value",
+          "description": "The selected label key. Also acts as the filter while typing.",
+          "values": []
+        },
+        {
+          "name": "inputValue",
+          "description": "The value entered for the selected label. Submitted as `label:value` when present.",
+          "values": []
+        },
         {
           "name": "input-size",
+          "description": "The size of the main input.",
           "values": [
             { "name": "x-small" },
             { "name": "small" },
@@ -1329,11 +1338,31 @@
             { "name": "large" }
           ]
         },
-        { "name": "name", "values": [] },
-        { "name": "title", "values": [] },
-        { "name": "disabled", "values": [] },
-        { "name": "allow-custom", "values": [] },
-        { "name": "predefined-labels", "values": [{ "name": "array" }] }
+        {
+          "name": "name",
+          "description": "The name of the control. Used for form submission.",
+          "values": []
+        },
+        {
+          "name": "title",
+          "description": "The title of the main input.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the control.",
+          "values": []
+        },
+        {
+          "name": "allow-custom",
+          "description": "Allows labels that aren't in the predefined list.",
+          "values": []
+        },
+        {
+          "name": "predefined-labels",
+          "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+          "values": [{ "name": "(PredefinedLabel" }, { "name": "string)[]" }]
+        }
       ],
       "references": [
         {
@@ -1665,6 +1694,11 @@
           "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": []
+        },
+        {
+          "name": "upload-url",
+          "description": "When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.\nThe endpoint must respond with JSON `{\"url\": \"...\"}`; that URL becomes the control's\nvalue (and `src` preview) in place of the file bytes, so the control works inside\nJSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.",
+          "values": []
         }
       ],
       "references": [
@@ -1750,29 +1784,6 @@
         }
       ]
     },
-    {
-      "name": "zn-header",
-      "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": "full-location", "values": [] },
-        { "name": "entity-id", "values": [] },
-        { "name": "entity-id-show", "values": [] },
-        { "name": "transparent", "values": [] },
-        { "name": "caption", "values": [] },
-        { "name": "icon", "values": [] },
-        { "name": "navigation", "values": [{ "name": "array" }] },
-        { "name": "full-width", "values": [] },
-        { "name": "previous-path", "values": [] },
-        { "name": "previous-target", "values": [] },
-        { "name": "hide-breadcrumb", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/header"
-        }
-      ]
-    },
     {
       "name": "zn-hover-container",
       "description": "The HoverContainer component is used to display additional information when a user hovers over or clicks\non an element.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the hover-container is shown.\n- **zn-after-show** - Emitted after the hover-container is shown.\n- **zn-hide** - Emitted when the hover-container is hidden.\n- **zn-after-hide** - Emitted after the hover-container is hidden.\n\n### **Slots:**\n - _default_ - The content of the hover-container\n- **anchor** - The anchor the hover-container is attached to.",
@@ -1810,6 +1821,29 @@
         }
       ]
     },
+    {
+      "name": "zn-header",
+      "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": "full-location", "values": [] },
+        { "name": "entity-id", "values": [] },
+        { "name": "entity-id-show", "values": [] },
+        { "name": "transparent", "values": [] },
+        { "name": "caption", "values": [] },
+        { "name": "icon", "values": [] },
+        { "name": "navigation", "values": [{ "name": "array" }] },
+        { "name": "full-width", "values": [] },
+        { "name": "previous-path", "values": [] },
+        { "name": "previous-target", "values": [] },
+        { "name": "hide-breadcrumb", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/header"
+        }
+      ]
+    },
     {
       "name": "zn-icon",
       "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.66",
+  "version": "1.1.68",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2411,7 +2411,7 @@
         },
         {
           "name": "zn-data-table",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "data-uri", "value": { "type": "string" } },
@@ -2523,6 +2523,10 @@
             {
               "name": "empty-state",
               "description": "Slot for custom empty state."
+            },
+            {
+              "name": "no-results",
+              "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows."
             }
           ],
           "events": [],
@@ -3051,13 +3055,19 @@
           "description": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.\n---\n\n\n### **CSS Parts:**\n - **input** - The component's main input.\n- **input-value** - The label's value inputs.",
           "doc-url": "",
           "attributes": [
-            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "value",
+              "description": "The selected label key. Also acts as the filter while typing.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "inputValue",
+              "description": "The value entered for the selected label. Submitted as `label:value` when present.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "input-size",
+              "description": "The size of the main input.",
               "value": {
                 "type": "'x-small' | 'small' | 'medium' | 'large'",
                 "default": "'medium'"
@@ -3065,20 +3075,31 @@
             },
             {
               "name": "name",
+              "description": "The name of the control. Used for form submission.",
               "value": { "type": "string", "default": "'label'" }
             },
-            { "name": "title", "value": { "type": "string" } },
+            {
+              "name": "title",
+              "description": "The title of the main input.",
+              "value": { "type": "string" }
+            },
             {
               "name": "disabled",
+              "description": "Disables the control.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "allow-custom",
+              "description": "Allows labels that aren't in the predefined list.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "predefined-labels",
-              "value": { "type": "array", "default": "[]" }
+              "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+              "value": {
+                "type": "(PredefinedLabel | string)[]",
+                "default": "[]"
+              }
             }
           ],
           "events": [],
@@ -3086,17 +3107,46 @@
             "properties": [
               { "name": "input", "type": "ZnInput" },
               { "name": "dropdown", "type": "ZnDropdown" },
-              { "name": "value", "type": "string" },
-              { "name": "inputValue", "type": "string" },
+              {
+                "name": "value",
+                "description": "The selected label key. Also acts as the filter while typing.",
+                "type": "string"
+              },
+              {
+                "name": "inputValue",
+                "description": "The value entered for the selected label. Submitted as `label:value` when present.",
+                "type": "string"
+              },
               {
                 "name": "inputSize",
+                "description": "The size of the main input.",
                 "type": "'x-small' | 'small' | 'medium' | 'large'"
               },
-              { "name": "name", "type": "string" },
-              { "name": "title", "type": "string" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "allowCustom", "type": "boolean" },
-              { "name": "predefinedLabels", "type": "array" },
+              {
+                "name": "name",
+                "description": "The name of the control. Used for form submission.",
+                "type": "string"
+              },
+              {
+                "name": "title",
+                "description": "The title of the main input.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control.",
+                "type": "boolean"
+              },
+              {
+                "name": "allowCustom",
+                "description": "Allows labels that aren't in the predefined list.",
+                "type": "boolean"
+              },
+              {
+                "name": "predefinedLabels",
+                "description": "The predefined labels. Entries are either a string or `{name, options}`.",
+                "type": "(PredefinedLabel | string)[]"
+              },
               { "name": "validationMessage" },
               { "name": "validity" }
             ],
@@ -3713,6 +3763,11 @@
               "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" }
+            },
+            {
+              "name": "upload-url",
+              "description": "When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.\nThe endpoint must respond with JSON `{\"url\": \"...\"}`; that URL becomes the control's\nvalue (and `src` preview) in place of the file bytes, so the control works inside\nJSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.",
+              "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
@@ -3864,6 +3919,11 @@
                 "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": "uploadUrl",
+                "description": "When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.\nThe endpoint must respond with JSON `{\"url\": \"...\"}`; that URL becomes the control's\nvalue (and `src` preview) in place of the file bytes, so the control works inside\nJSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.",
+                "type": "string"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -4147,63 +4207,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-header",
-          "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": "full-location", "value": { "type": "string" } },
-            { "name": "entity-id", "value": { "type": "string" } },
-            { "name": "entity-id-show", "value": { "type": "boolean" } },
-            {
-              "name": "transparent",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "icon", "value": { "type": "string" } },
-            {
-              "name": "navigation",
-              "value": { "type": "array", "default": "[]" }
-            },
-            { "name": "full-width", "value": { "type": "boolean" } },
-            { "name": "previous-path", "value": { "type": "string" } },
-            { "name": "previous-target", "value": { "type": "string" } },
-            {
-              "name": "hide-breadcrumb",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "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": "fullLocation", "type": "string" },
-              { "name": "entityId", "type": "string" },
-              { "name": "entityIdShow", "type": "boolean" },
-              { "name": "transparent", "type": "boolean" },
-              { "name": "caption", "type": "string" },
-              { "name": "icon", "type": "string" },
-              { "name": "navigation", "type": "array" },
-              { "name": "fullWidth", "type": "boolean" },
-              { "name": "previousPath", "type": "string" },
-              { "name": "previousTarget", "type": "string" },
-              { "name": "hideBreadcrumb", "type": "boolean" },
-              { "name": "handleAltPress" },
-              { "name": "handleAltUp" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-hover-container",
           "description": "The HoverContainer component is used to display additional information when a user hovers over or clicks\non an element.\n---\n\n\n### **Events:**\n - **zn-show** - Emitted when the hover-container is shown.\n- **zn-after-show** - Emitted after the hover-container is shown.\n- **zn-hide** - Emitted when the hover-container is hidden.\n- **zn-after-hide** - Emitted after the hover-container is hidden.\n\n### **Slots:**\n - _default_ - The content of the hover-container\n- **anchor** - The anchor the hover-container is attached to.",
@@ -4307,6 +4310,63 @@
             ]
           }
         },
+        {
+          "name": "zn-header",
+          "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": "full-location", "value": { "type": "string" } },
+            { "name": "entity-id", "value": { "type": "string" } },
+            { "name": "entity-id-show", "value": { "type": "boolean" } },
+            {
+              "name": "transparent",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "icon", "value": { "type": "string" } },
+            {
+              "name": "navigation",
+              "value": { "type": "array", "default": "[]" }
+            },
+            { "name": "full-width", "value": { "type": "boolean" } },
+            { "name": "previous-path", "value": { "type": "string" } },
+            { "name": "previous-target", "value": { "type": "string" } },
+            {
+              "name": "hide-breadcrumb",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "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": "fullLocation", "type": "string" },
+              { "name": "entityId", "type": "string" },
+              { "name": "entityIdShow", "type": "boolean" },
+              { "name": "transparent", "type": "boolean" },
+              { "name": "caption", "type": "string" },
+              { "name": "icon", "type": "string" },
+              { "name": "navigation", "type": "array" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "previousPath", "type": "string" },
+              { "name": "previousTarget", "type": "string" },
+              { "name": "hideBreadcrumb", "type": "boolean" },
+              { "name": "handleAltPress" },
+              { "name": "handleAltUp" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-icon",
           "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.d.ts

@@ -3424,6 +3424,7 @@ declare module "components/data-table/data-table.component" {
     import ZnStyle from "components/style/index";
     interface Cell {
         text: string;
+        subText?: string;
         column: string;
         color?: string;
         style?: string;
@@ -3439,6 +3440,7 @@ declare module "components/data-table/data-table.component" {
         uri?: string;
         target?: string;
         copyable?: boolean;
+        title?: string;
     }
     interface Row {
         id: string;
@@ -3526,6 +3528,7 @@ declare module "components/data-table/data-table.component" {
      * @slot create-action - Slot for create action button.
      * @slot inputs - Slot for additional input controls.
      * @slot empty-state - Slot for custom empty state.
+     * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
      *
      * @csspart base - The component's base wrapper.
      *
@@ -3703,9 +3706,16 @@ declare module "components/cols/index" {
 declare module "components/defined-label/defined-label.component" {
     import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
     import ZincElement from "internal/zinc-element";
+    import ZnButton from "components/button/index";
+    import ZnDropdown from "components/dropdown/index";
+    import ZnInput from "components/input/index";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
     import type { ZincFormControl } from "internal/zinc-element";
-    import type ZnDropdown from "components/dropdown/index";
-    import type ZnInput from "components/input/index";
+    interface PredefinedLabel {
+        name: string;
+        options?: string[];
+    }
     /**
      * @summary This component provides a labeled input with support for predefined and custom labels,
      * allowing users to select or enter label-value pairs within a dropdown interface.
@@ -3717,26 +3727,39 @@ declare module "components/defined-label/defined-label.component" {
      * @dependency zn-dropdown
      * @dependency zn-input
      * @dependency zn-option
-     * @dependency zn-panel
      * @dependency zn-select
-     * @dependency zn-sp
      *
      * @csspart input - The component's main input.
      * @csspart input-value - The label's value inputs.
      */
     export default class ZnDefinedLabel extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-button': typeof ZnButton;
+            'zn-dropdown': typeof ZnDropdown;
+            'zn-input': typeof ZnInput;
+            'zn-option': typeof ZnOption;
+            'zn-select': typeof ZnSelect;
+        };
         private readonly formControlController;
         input: ZnInput;
         dropdown: ZnDropdown;
+        /** The selected label key. Also acts as the filter while typing. */
         value: string;
+        /** The value entered for the selected label. Submitted as `label:value` when present. */
         inputValue: string;
+        /** The size of the main input. */
         inputSize: 'x-small' | 'small' | 'medium' | 'large';
+        /** The name of the control. Used for form submission. */
         name: string;
+        /** The title of the main input. */
         title: string;
+        /** Disables the control. */
         disabled: boolean;
+        /** Allows labels that aren't in the predefined list. */
         allowCustom: boolean;
-        predefinedLabels: never[];
+        /** The predefined labels. Entries are either a string or `{name, options}`. */
+        predefinedLabels: (PredefinedLabel | string)[];
         get validationMessage(): string;
         get validity(): ValidityState;
         checkValidity(): boolean;
@@ -3745,12 +3768,14 @@ declare module "components/defined-label/defined-label.component" {
         setCustomValidity(message: string): void;
         handleValueChange(): Promise<void>;
         protected firstUpdated(changedProperties: PropertyValues): void;
+        private getFilteredLabels;
         private handleChange;
         private handleInput;
         private handleClick;
         private handleInputValueChange;
-        private handleInputValueInput;
         private handleFormSubmit;
+        private renderValueControl;
+        private renderRow;
         render(): TemplateResult<1>;
     }
 }
@@ -7181,6 +7206,14 @@ declare module "components/file/file.component" {
          * Useful for showing the existing CDN link alongside the preview.
          */
         showLink: boolean;
+        /**
+         * When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.
+         * The endpoint must respond with JSON `{"url": "..."}`; that URL becomes the control's
+         * value (and `src` preview) in place of the file bytes, so the control works inside
+         * JSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.
+         */
+        uploadUrl: string;
+        private uploading;
         /** Gets the validity state object */
         get validity(): ValidityState;
         /** Gets the validation message */
@@ -7209,6 +7242,11 @@ declare module "components/file/file.component" {
         private handleClick;
         /** Handles the change event of the native input */
         private handleChange;
+        /**
+         * Uploads the chosen file to `uploadUrl` and adopts the returned URL as the
+         * control's value. The local file preview stays visible while the upload runs.
+         */
+        private uploadFile;
         private handleDragOver;
         private handleDragLeave;
         private handleDrop;