@kubex/zinc 1.1.62 → 1.1.63

package/dist/custom-elements.json

@@ -15291,6 +15291,10 @@
             {
               "description": "The default slot.",
               "name": ""
+            },
+            {
+              "description": "A chip displayed under the form group's help text.",
+              "name": "chip"
             }
           ],
           "members": [
@@ -15299,7 +15303,7 @@
               "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "default": "new HasSlotController(this, 'help-text', 'label', 'chip')"
             },
             {
               "kind": "field",
@@ -15348,6 +15352,15 @@
               },
               "default": "\"1,2\"",
               "attribute": "layout"
+            },
+            {
+              "kind": "field",
+              "name": "pad",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "pad"
             }
           ],
           "attributes": [
@@ -15393,6 +15406,14 @@
               },
               "default": "\"1,2\"",
               "fieldName": "layout"
+            },
+            {
+              "name": "pad",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "pad"
             }
           ],
           "superclass": {
@@ -15403,7 +15424,7 @@
           "tagNameWithoutPrefix": "form-group",
           "tagName": "zn-form-group",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/form-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n *\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/form-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot chip - A chip displayed under the form group's help text.\n *\n */",
           "documentation": "https://zinc.style/components/form-group",
           "status": "experimental",
           "since": "1.0"
@@ -28102,6 +28123,314 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/preview-frame/preview-frame.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnPreviewFrame",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The preview iframe.",
+              "name": "iframe"
+            },
+            {
+              "description": "The error overlay.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of the preview shell page (tokened embed URL).",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "frameOrigin",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "attribute": "frame-origin"
+            },
+            {
+              "kind": "field",
+              "name": "dataUri",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "attribute": "data-uri"
+            },
+            {
+              "kind": "field",
+              "name": "watch",
+              "type": {
+                "text": "string"
+              },
+              "default": "'form[data-auto-save]'",
+              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+              "attribute": "watch"
+            },
+            {
+              "kind": "field",
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "400",
+              "description": "Debounce in ms between a form change and its auto-save.",
+              "attribute": "debounce"
+            },
+            {
+              "kind": "field",
+              "name": "zoom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.",
+              "attribute": "zoom"
+            },
+            {
+              "kind": "field",
+              "name": "minHeight",
+              "type": {
+                "text": "number"
+              },
+              "default": "480",
+              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded.",
+              "attribute": "min-height"
+            },
+            {
+              "kind": "field",
+              "name": "frame",
+              "type": {
+                "text": "HTMLIFrameElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_generation",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_watchedForms",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<HTMLFormElement>()"
+            },
+            {
+              "kind": "field",
+              "name": "_debounceTimers",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<HTMLFormElement, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "_formObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationController(this, { target: null, config: {subtree: true, childList: true}, callback: () => this._attachForms(), })"
+            },
+            {
+              "kind": "field",
+              "name": "_onMessage",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "description": "Re-fetches the payload and pushes a fresh config to the preview."
+            },
+            {
+              "kind": "method",
+              "name": "_sendConfig",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_attachForms",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_detachForm",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_onSubmit",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_save",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_fail",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the preview reports a render error or a save fails.",
+              "name": "zn-error"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of the preview shell page (tokened embed URL).",
+              "fieldName": "src"
+            },
+            {
+              "name": "frame-origin",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "fieldName": "frameOrigin"
+            },
+            {
+              "name": "data-uri",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "fieldName": "dataUri"
+            },
+            {
+              "name": "watch",
+              "type": {
+                "text": "string"
+              },
+              "default": "'form[data-auto-save]'",
+              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+              "fieldName": "watch"
+            },
+            {
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "400",
+              "description": "Debounce in ms between a form change and its auto-save.",
+              "fieldName": "debounce"
+            },
+            {
+              "name": "zoom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.",
+              "fieldName": "zoom"
+            },
+            {
+              "name": "min-height",
+              "type": {
+                "text": "number"
+              },
+              "default": "480",
+              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded.",
+              "fieldName": "minHeight"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, and refreshes the\npreview after each save.",
+          "tagNameWithoutPrefix": "preview-frame",
+          "tagName": "zn-preview-frame",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Embeds a live preview iframe and drives the hp-preview postMessage\n * protocol: answers the frame's ready handshake with a config payload fetched\n * from data-uri, auto-saves watched forms on change, and refreshes the\n * preview after each save.\n * @documentation https://zinc.style/components/preview-frame\n * @status experimental\n * @since 1.0\n *\n * @event zn-error - Emitted when the preview reports a render error or a save fails.\n *\n * @csspart base - The component's base wrapper.\n * @csspart iframe - The preview iframe.\n * @csspart error - The error overlay.\n */",
+          "documentation": "https://zinc.style/components/preview-frame",
+          "status": "experimental",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnPreviewFrame",
+            "module": "components/preview-frame/preview-frame.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/priority-list/priority-list.js",
@@ -38839,7 +39168,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, { value: (control: ZnToggle) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: ZnToggle) => control.defaultChecked, setValue: (control: ZnToggle, checked: boolean) => (control.checked = checked) })"
+              "default": "new FormControlController(this, { value: (control: ZnToggle) => (control.checked ? control.value || 'on' : control.fallbackValue), defaultValue: (control: ZnToggle) => control.defaultChecked, setValue: (control: ZnToggle, checked: boolean) => (control.checked = checked) })"
             },
             {
               "kind": "field",
@@ -38888,7 +39217,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
+              "default": "'off'",
+              "description": "The value submitted when the toggle is unchecked, so the toggle always submits a value.",
               "attribute": "fallback"
             },
             {
@@ -39165,7 +39495,8 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
+              "default": "'off'",
+              "description": "The value submitted when the toggle is unchecked, so the toggle always submits a value.",
               "fieldName": "fallbackValue"
             },
             {
@@ -40826,7 +41157,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.62",
+    "version": "1.1.63",
     "author": "",
     "license": "MIT"
   }

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

@@ -1722,7 +1722,7 @@
     },
     {
       "name": "zn-form-group",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **chip** - A chip displayed under the form group's help text.",
       "attributes": [
         {
           "name": "label",
@@ -1740,7 +1740,8 @@
           "values": []
         },
         { "name": "cols", "values": [] },
-        { "name": "layout", "values": [] }
+        { "name": "layout", "values": [] },
+        { "name": "pad", "values": [] }
       ],
       "references": [
         {
@@ -2908,6 +2909,53 @@
         }
       ]
     },
+    {
+      "name": "zn-preview-frame",
+      "description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, and refreshes the\npreview after each save.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "URL of the preview shell page (tokened embed URL).",
+          "values": []
+        },
+        {
+          "name": "frame-origin",
+          "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+          "values": []
+        },
+        {
+          "name": "data-uri",
+          "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+          "values": []
+        },
+        {
+          "name": "watch",
+          "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+          "values": []
+        },
+        {
+          "name": "debounce",
+          "description": "Debounce in ms between a form change and its auto-save.",
+          "values": []
+        },
+        {
+          "name": "zoom",
+          "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.",
+          "values": []
+        },
+        {
+          "name": "min-height",
+          "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/preview-frame"
+        }
+      ]
+    },
     {
       "name": "zn-priority-list",
       "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
@@ -4059,7 +4107,11 @@
         { "name": "title", "values": [] },
         { "name": "name", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "fallback", "values": [] },
+        {
+          "name": "fallback",
+          "description": "The value submitted when the toggle is unchecked, so the toggle always submits a value.",
+          "values": []
+        },
         {
           "name": "size",
           "values": [