@kubex/zinc 2.0.2 → 2.0.4

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.",
@@ -71,6 +60,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",
@@ -2299,7 +2299,7 @@
     },
     {
       "name": "zn-form-actions",
-      "description": "Standard action row for the bottom of a form. Renders a submit button by default; opt in to more\nwith `with-cancel` and `with-reset`.\n---\n\n\n### **Events:**\n - **zn-cancel** - Emitted when the cancel button is clicked.\n\n### **Slots:**\n - _default_ - Extra actions, placed before the buttons. `align=\"start\"` on a child moves it to the start of the row; any number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n\n### **CSS Parts:**\n - **cancel-button** - The cancel button.\n- **reset-button** - The reset button.\n- **submit-button** - The submit button.",
+      "description": "\n---\n",
       "attributes": [
         {
           "name": "submit-text",
@@ -2350,6 +2350,11 @@
           "name": "loading-on-submit",
           "description": "Shows the submit button loading and ignores further submits until the console reports the request finished,\nso a slow save such as an upload can't be sent twice. Only for forms the console submits.",
           "values": []
+        },
+        {
+          "name": "hide-until-changed",
+          "description": "Hides the row until the form's values differ from when it loaded or was last saved, and hides it again once\nthey match.",
+          "values": []
         }
       ],
       "references": [
@@ -2771,7 +2776,7 @@
         },
         {
           "name": "no-spin-buttons",
-          "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
+          "description": "Hides the increment/decrement buttons on number inputs *",
           "values": []
         },
         {
@@ -3055,7 +3060,7 @@
         { "name": "name", "values": [] },
         {
           "name": "value",
-          "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`.",
+          "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`. With `list`, the names as a JSON array,\nsuch as `[\"10.0.0.0/24\"]`.",
           "values": []
         },
         { "name": "label", "values": [] },
@@ -3068,6 +3073,16 @@
           "description": "Passed to each value input, so its slash menu can insert merge fields.",
           "values": []
         },
+        {
+          "name": "value-options",
+          "description": "Makes each value a choice instead of free text: a JSON object of option values to labels, such as\n`{\"default\": \"System default\", \"auto\": \"Auto approve\"}`. New rows take the first option.",
+          "values": [{ "name": "Record<string, string>" }]
+        },
+        {
+          "name": "list",
+          "description": "Edits a plain list of names with no values, submitted as a JSON array.",
+          "values": []
+        },
         { "name": "form", "values": [] },
         { "name": "disabled", "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": "2.0.2",
+  "version": "2.0.4",
   "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\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\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.",
@@ -117,6 +95,28 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n\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\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",
@@ -5273,7 +5273,7 @@
         },
         {
           "name": "zn-form-actions",
-          "description": "Standard action row for the bottom of a form. Renders a submit button by default; opt in to more\nwith `with-cancel` and `with-reset`.\n\n---\n\n\n### **Events:**\n - **zn-cancel** - Emitted when the cancel button is clicked.\n\n### **Slots:**\n - _default_ - Extra actions, placed before the buttons. `align=\"start\"` on a child moves it to the start of the row; any number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n\n### **CSS Parts:**\n - **cancel-button** - The cancel button.\n- **reset-button** - The reset button.\n- **submit-button** - The submit button.",
+          "description": "\n\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -5325,20 +5325,14 @@
               "name": "loading-on-submit",
               "description": "Shows the submit button loading and ignores further submits until the console reports the request finished,\nso a slow save such as an upload can't be sent twice. Only for forms the console submits.",
               "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Extra actions, placed before the buttons. `align=\"start\"` on a child moves it to the start of the row; any number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows."
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "zn-cancel",
-              "description": "Emitted when the cancel button is clicked."
+              "name": "hide-until-changed",
+              "description": "Hides the row until the form's values differ from when it loaded or was last saved, and hides it again once\nthey match.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -5390,14 +5384,14 @@
                 "name": "loadingOnSubmit",
                 "description": "Shows the submit button loading and ignores further submits until the console reports the request finished,\nso a slow save such as an upload can't be sent twice. Only for forms the console submits.",
                 "type": "boolean"
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "zn-cancel",
-                "description": "Emitted when the cancel button is clicked."
+                "name": "hideUntilChanged",
+                "description": "Hides the row until the form's values differ from when it loaded or was last saved, and hides it again once\nthey match.",
+                "type": "boolean"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -6211,7 +6205,7 @@
             },
             {
               "name": "no-spin-buttons",
-              "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
+              "description": "Hides the increment/decrement buttons on number inputs *",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -6526,7 +6520,7 @@
               },
               {
                 "name": "noSpinButtons",
-                "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *",
+                "description": "Hides the increment/decrement buttons on number inputs *",
                 "type": "boolean"
               },
               {
@@ -6960,7 +6954,7 @@
             { "name": "name", "value": { "type": "string", "default": "''" } },
             {
               "name": "value",
-              "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`.",
+              "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`. With `list`, the names as a JSON array,\nsuch as `[\"10.0.0.0/24\"]`.",
               "value": { "type": "string", "default": "'{}'" }
             },
             { "name": "label", "value": { "type": "string", "default": "''" } },
@@ -6985,6 +6979,19 @@
               "description": "Passed to each value input, so its slash menu can insert merge fields.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "value-options",
+              "description": "Makes each value a choice instead of free text: a JSON object of option values to labels, such as\n`{\"default\": \"System default\", \"auto\": \"Auto approve\"}`. New rows take the first option.",
+              "value": {
+                "type": "Record<string, string> | null",
+                "default": "null"
+              }
+            },
+            {
+              "name": "list",
+              "description": "Edits a plain list of names with no values, submitted as a JSON array.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             { "name": "form", "value": { "type": "string", "default": "''" } },
             {
               "name": "disabled",
@@ -7012,7 +7019,12 @@
               { "name": "name", "type": "string" },
               {
                 "name": "value",
-                "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`.",
+                "description": "The pairs as a JSON object, such as `{\"1\": \"{{recipient.firstName}}\"}`. With `list`, the names as a JSON array,\nsuch as `[\"10.0.0.0/24\"]`.",
+                "type": "string"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The value a form reset restores, taken from the initial `value` attribute.",
                 "type": "string"
               },
               { "name": "label", "type": "string" },
@@ -7025,6 +7037,16 @@
                 "description": "Passed to each value input, so its slash menu can insert merge fields.",
                 "type": "string"
               },
+              {
+                "name": "valueOptions",
+                "description": "Makes each value a choice instead of free text: a JSON object of option values to labels, such as\n`{\"default\": \"System default\", \"auto\": \"Auto approve\"}`. New rows take the first option.",
+                "type": "Record<string, string> | null"
+              },
+              {
+                "name": "list",
+                "description": "Edits a plain list of names with no values, submitted as a JSON array.",
+                "type": "boolean"
+              },
               { "name": "form", "type": "string" },
               { "name": "disabled", "type": "boolean" },
               { "name": "validity", "type": "ValidityState" },

package/dist/zn.d.ts

@@ -2863,7 +2863,7 @@ declare module "components/input/input.component" {
         passwordToggle: boolean;
         /** Determines whether or no the password is currently visible. Only applies to password types **/
         passwordVisible: boolean;
-        /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
+        /** Hides the increment/decrement buttons on number inputs **/
         noSpinButtons: boolean;
         /**
          * The format a colour input writes its value in. Typing a colour in another format, or working in another format's
@@ -2980,6 +2980,9 @@ declare module "components/input/input.component" {
         private handleInvalid;
         private syncEmailDisplay;
         private handleKeyDown;
+        /** Whether the value has reached `limit`; `direction` 1 checks a maximum, -1 a minimum. */
+        private isAtLimit;
+        private handleStep;
         private handlePasswordToggle;
         private handleColorSwatchClick;
         private openColorPanel;
@@ -3118,7 +3121,9 @@ declare module "internal/conditional" {
         private conditionals;
         private required;
         private initiallyDisabled;
+        private forms;
         private readonly handleChange;
+        private readonly handleReset;
         constructor(host: ReactiveControllerHost & Element & ConditionalHost);
         /** Call from the host's `firstUpdated()` to parse IDs, find elements, attach listeners, and run the initial check. */
         setup(): void;
@@ -6342,6 +6347,7 @@ declare module "components/navbar/navbar.component" {
         private _indicator;
         private _indicatorFrame;
         private _indicatorTab;
+        private _indicatorStripWidth;
         private _indicatorTarget;
         private _expandable;
         private readonly _lightDomClones;
@@ -8909,25 +8915,6 @@ declare module "components/form-actions/form-actions.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnButton from "components/button/index";
-    /**
-     * @summary Standard action row for the bottom of a form. Renders a submit button by default; opt in to more
-     * with `with-cancel` and `with-reset`.
-     * @documentation https://zinc.style/components/form-actions
-     * @status experimental
-     * @since 1.0
-     *
-     * @dependency zn-button
-     *
-     * @event zn-cancel - Emitted when the cancel button is clicked.
-     *
-     * @slot - Extra actions, placed before the buttons. `align="start"` on a child moves it to the start of the row; any
-     * number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so
-     * markup order is what a keyboard follows.
-     *
-     * @csspart cancel-button - The cancel button.
-     * @csspart reset-button - The reset button.
-     * @csspart submit-button - The submit button.
-     */
     export default class ZnFormActions extends ZincElement {
         static styles: CSSResultGroup;
         static dependencies: {
@@ -8956,10 +8943,27 @@ declare module "components/form-actions/form-actions.component" {
          * so a slow save such as an upload can't be sent twice. Only for forms the console submits.
          */
         loadingOnSubmit: boolean;
+        /**
+         * Hides the row until the form's values differ from when it loaded or was last saved, and hides it again once
+         * they match.
+         */
+        hideUntilChanged: boolean;
         private submitting;
         private watchedForm;
+        private changeForm;
+        private baseline;
+        private interacted;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        /**
+         * The form's values, compared against the baseline. Read from the controls directly, since building FormData runs
+         * zinc controls' formdata handlers, which trim the value being typed.
+         */
+        private snapshot;
+        private checkForChanges;
+        private markSaved;
+        private refreshBaseline;
+        private handleFormReset;
         private handleFormSubmit;
         private handleRequested;
         private handleDone;
@@ -15108,6 +15112,8 @@ declare module "components/key-value/key-value.component" {
      * @since 1.0
      *
      * @dependency zn-input
+     * @dependency zn-select
+     * @dependency zn-option
      * @dependency zn-button
      *
      * @event zn-change - Emitted when a pair is added, removed or edited.
@@ -15123,8 +15129,13 @@ declare module "components/key-value/key-value.component" {
         private readonly hasSlotController;
         private readonly formControlController;
         name: string;
-        /** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
+        /**
+         * The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. With `list`, the names as a JSON array,
+         * such as `["10.0.0.0/24"]`.
+         */
         value: string;
+        /** The value a form reset restores, taken from the initial `value` attribute. */
+        defaultValue: string;
         label: string;
         helpText: string;
         keyLabel: string;
@@ -15132,6 +15143,13 @@ declare module "components/key-value/key-value.component" {
         addText: string;
         /** Passed to each value input, so its slash menu can insert merge fields. */
         slashItems: string;
+        /**
+         * Makes each value a choice instead of free text: a JSON object of option values to labels, such as
+         * `{"default": "System default", "auto": "Auto approve"}`. New rows take the first option.
+         */
+        valueOptions: Record<string, string> | null;
+        /** Edits a plain list of names with no values, submitted as a JSON array. */
+        list: boolean;
         form: string;
         disabled: boolean;
         private _rows;
@@ -15142,10 +15160,18 @@ declare module "components/key-value/key-value.component" {
         reportValidity(): boolean;
         setCustomValidity(): void;
         protected willUpdate(changed: PropertyValues): void;
+        private get _defaultValue();
+        private _emptyRow;
+        private _withSpareRow;
         private _parse;
         private _serialise;
         private _update;
         private _edit;
+        private get _reduceMotion();
+        private _easing;
+        private _add;
+        private _remove;
+        private _renderValue;
         render(): import("lit-html").TemplateResult<1>;
     }
 }