@kubex/zinc 1.1.68 → 1.1.70

package/dist/custom-elements.json

@@ -5419,6 +5419,10 @@
             {
               "description": "The caption text.",
               "name": "caption"
+            },
+            {
+              "description": "The expandable content wrapper.",
+              "name": "content"
             }
           ],
           "slots": [
@@ -5561,7 +5565,7 @@
               "name": "observer",
               "privacy": "private",
               "readonly": true,
-              "default": "new MutationController(this, { target: null, config: {childList: true, subtree: true}, callback: () => this.recalculateNumberOfItems(), })"
+              "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true }, callback: () => this.recalculateNumberOfItems(), })"
             },
             {
               "kind": "field",
@@ -5682,7 +5686,7 @@
           "tagNameWithoutPrefix": "collapsible",
           "tagName": "zn-collapsible",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Toggles between showing and hiding content when clicked\n * @documentation https://zinc.style/components/collapsible\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon - The icon element\n *\n * @slot header - Clicking will toggle the show state of the data\n *\n * @csspart header - The header row (toggle).\n * @csspart caption - The caption text.\n */",
+          "jsDoc": "/**\n * @summary Toggles between showing and hiding content when clicked\n * @documentation https://zinc.style/components/collapsible\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon - The icon element\n *\n * @slot header - Clicking will toggle the show state of the data\n *\n * @csspart header - The header row (toggle).\n * @csspart caption - The caption text.\n * @csspart content - The expandable content wrapper.\n */",
           "documentation": "https://zinc.style/components/collapsible",
           "status": "experimental",
           "since": "1.0",
@@ -13559,6 +13563,11 @@
               "privacy": "private",
               "description": "Clear the current value after the user confirms."
             },
+            {
+              "kind": "method",
+              "name": "clear",
+              "description": "Programmatically clears the selected file and any external `src` without\nconfirmation. Unlike a user-initiated clear, this does not flag the control\nto submit an empty value."
+            },
             {
               "kind": "method",
               "name": "updatePreview",
@@ -15590,6 +15599,272 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/header/header.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnHeader",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'nav', 'breadcrumb')"
+            },
+            {
+              "kind": "field",
+              "name": "fullLocation",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "full-location"
+            },
+            {
+              "kind": "field",
+              "name": "entityId",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "entity-id"
+            },
+            {
+              "kind": "field",
+              "name": "entityIdShow",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "entity-id-show"
+            },
+            {
+              "kind": "field",
+              "name": "transparent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "transparent"
+            },
+            {
+              "kind": "field",
+              "name": "caption",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "caption"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "navigation",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]",
+              "attribute": "navigation"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "attribute": "full-width"
+            },
+            {
+              "kind": "field",
+              "name": "previousPath",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "previous-path"
+            },
+            {
+              "kind": "field",
+              "name": "previousTarget",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "previous-target"
+            },
+            {
+              "kind": "field",
+              "name": "hideBreadcrumb",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "hide-breadcrumb"
+            },
+            {
+              "kind": "field",
+              "name": "navbar",
+              "type": {
+                "text": "ZnNavbar"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleAltPress"
+            },
+            {
+              "kind": "field",
+              "name": "handleAltUp"
+            },
+            {
+              "kind": "method",
+              "name": "updateNav"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "full-location",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "fullLocation"
+            },
+            {
+              "name": "entity-id",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "entityId"
+            },
+            {
+              "name": "entity-id-show",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "entityIdShow"
+            },
+            {
+              "name": "transparent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "transparent"
+            },
+            {
+              "name": "caption",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "caption"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "icon"
+            },
+            {
+              "name": "navigation",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]",
+              "fieldName": "navigation"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "previous-path",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "previousPath"
+            },
+            {
+              "name": "previous-target",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "previousTarget"
+            },
+            {
+              "name": "hide-breadcrumb",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "hideBreadcrumb"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "header",
+          "tagName": "zn-header",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/header\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/header",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnHeader",
+            "module": "components/header/header.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/hover-container/hover-container.js",
@@ -15893,272 +16168,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/header/header.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnHeader",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'nav', 'breadcrumb')"
-            },
-            {
-              "kind": "field",
-              "name": "fullLocation",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "full-location"
-            },
-            {
-              "kind": "field",
-              "name": "entityId",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "entity-id"
-            },
-            {
-              "kind": "field",
-              "name": "entityIdShow",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "entity-id-show"
-            },
-            {
-              "kind": "field",
-              "name": "transparent",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "transparent"
-            },
-            {
-              "kind": "field",
-              "name": "caption",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "caption"
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "icon"
-            },
-            {
-              "kind": "field",
-              "name": "navigation",
-              "type": {
-                "text": "array"
-              },
-              "default": "[]",
-              "attribute": "navigation"
-            },
-            {
-              "kind": "field",
-              "name": "fullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "attribute": "full-width"
-            },
-            {
-              "kind": "field",
-              "name": "previousPath",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "previous-path"
-            },
-            {
-              "kind": "field",
-              "name": "previousTarget",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "previous-target"
-            },
-            {
-              "kind": "field",
-              "name": "hideBreadcrumb",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "hide-breadcrumb"
-            },
-            {
-              "kind": "field",
-              "name": "navbar",
-              "type": {
-                "text": "ZnNavbar"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleAltPress"
-            },
-            {
-              "kind": "field",
-              "name": "handleAltUp"
-            },
-            {
-              "kind": "method",
-              "name": "updateNav"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "full-location",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "fullLocation"
-            },
-            {
-              "name": "entity-id",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "entityId"
-            },
-            {
-              "name": "entity-id-show",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "entityIdShow"
-            },
-            {
-              "name": "transparent",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "transparent"
-            },
-            {
-              "name": "caption",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "caption"
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "icon"
-            },
-            {
-              "name": "navigation",
-              "type": {
-                "text": "array"
-              },
-              "default": "[]",
-              "fieldName": "navigation"
-            },
-            {
-              "name": "full-width",
-              "type": {
-                "text": "boolean"
-              },
-              "fieldName": "fullWidth"
-            },
-            {
-              "name": "previous-path",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "previousPath"
-            },
-            {
-              "name": "previous-target",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "previousTarget"
-            },
-            {
-              "name": "hide-breadcrumb",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hideBreadcrumb"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "header",
-          "tagName": "zn-header",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/header\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/header",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnHeader",
-            "module": "components/header/header.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/icon/icon.js",
@@ -16679,7 +16688,7 @@
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, { assumeInteractionOn: ['zn-change'] })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['zn-change'], // With allow-upload, a chosen file is submitted under `name` in place of // the icon string — the two are mutually exclusive. value: (el: ZnIconPicker) => el._file ?? el.icon })"
             },
             {
               "kind": "field",
@@ -16714,7 +16723,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'material'",
+              "default": "'material-symbols-outlined'",
               "attribute": "library"
             },
             {
@@ -16773,6 +16782,33 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "triggerSubmit",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "trigger-submit"
+            },
+            {
+              "kind": "field",
+              "name": "allowUpload",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "allow-upload"
+            },
+            {
+              "kind": "field",
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "'image/*'",
+              "attribute": "accept"
+            },
             {
               "kind": "field",
               "name": "form",
@@ -16853,6 +16889,51 @@
               "privacy": "private",
               "default": "''"
             },
+            {
+              "kind": "field",
+              "name": "_pendingFile",
+              "type": {
+                "text": "File | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_pendingFileUrl",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_mode",
+              "type": {
+                "text": "'icon' | 'upload'"
+              },
+              "privacy": "private",
+              "default": "'icon'"
+            },
+            {
+              "kind": "field",
+              "name": "_file",
+              "type": {
+                "text": "File | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_fileUrl",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "_dialog",
@@ -16861,6 +16942,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_fileInput",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -16868,6 +16957,24 @@
                 "text": "string"
               }
             },
+            {
+              "kind": "field",
+              "name": "file",
+              "type": {
+                "text": "File | null"
+              },
+              "description": "The chosen file when the user uploaded an image instead of picking an icon.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "isImageValue",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "True when the current value renders as an image (an uploaded file or a URL) rather than a library icon.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "validity",
@@ -16987,6 +17094,29 @@
               "name": "handleCancel",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "handleFileSelect",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "discardPendingFile",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "clearFile",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleSearchInput",
@@ -17106,7 +17236,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'material'",
+              "default": "'material-symbols-outlined'",
               "fieldName": "library"
             },
             {
@@ -17157,6 +17287,30 @@
               "default": "false",
               "fieldName": "required"
             },
+            {
+              "name": "trigger-submit",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "triggerSubmit"
+            },
+            {
+              "name": "allow-upload",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "allowUpload"
+            },
+            {
+              "name": "accept",
+              "type": {
+                "text": "string"
+              },
+              "default": "'image/*'",
+              "fieldName": "accept"
+            },
             {
               "name": "form",
               "type": {
@@ -17990,6 +18144,28 @@
           "kind": "class",
           "description": "",
           "name": "ZnInput",
+          "cssProperties": [
+            {
+              "description": "The height of a range input's track.",
+              "name": "--zn-range-track-height"
+            },
+            {
+              "description": "The color of a range input's track.",
+              "name": "--zn-range-track-color"
+            },
+            {
+              "description": "The diameter of a range input's thumb.",
+              "name": "--zn-range-thumb-size"
+            },
+            {
+              "description": "The color of a range input's thumb.",
+              "name": "--zn-range-thumb-color"
+            },
+            {
+              "description": "The width of the ring drawn around a range input's thumb.",
+              "name": "--zn-range-thumb-ring-width"
+            }
+          ],
           "cssParts": [
             {
               "description": "The form control that wraps the label, input, and help text.",
@@ -18042,7 +18218,7 @@
               "name": "label-tooltip"
             },
             {
-              "description": "Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.",
+              "description": "Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.",
               "name": "context-note"
             },
             {
@@ -18156,7 +18332,7 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'"
+                "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'range' | 'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               "default": "'text'",
               "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
@@ -18358,6 +18534,16 @@
               "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
               "attribute": "color-format"
             },
+            {
+              "kind": "field",
+              "name": "valueSuffix",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type\nis 'range' and no `context-note` is set.",
+              "attribute": "value-suffix"
+            },
             {
               "kind": "field",
               "name": "form",
@@ -18962,7 +19148,7 @@
             {
               "name": "type",
               "type": {
-                "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'search' | 'tel' | 'text' | 'time' | 'url'"
+                "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n    'range' | 'search' | 'tel' | 'text' | 'time' | 'url'"
               },
               "default": "'text'",
               "description": "The type of input. Works the same as native `<input>` element. But only a subset of types is supported. Defaults\nto `text`",
@@ -19130,6 +19316,15 @@
               "description": "The color format to display for color inputs. Only applies when type is 'color'. *",
               "fieldName": "colorFormat"
             },
+            {
+              "name": "value-suffix",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type\nis 'range' and no `context-note` is set.",
+              "fieldName": "valueSuffix"
+            },
             {
               "name": "form",
               "type": {
@@ -19270,7 +19465,7 @@
           "tagNameWithoutPrefix": "input",
           "tagName": "zn-input",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/input\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @event zn-blur - Emitted when the control loses focus.\n * @event zn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event zn-clear - Emitted when the clear button is activated.\n * @event zn-focus - Emitted when the control gains focus.\n * @event zn-input - Emitted when the control receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot 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 * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/input\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @event zn-blur - Emitted when the control loses focus.\n * @event zn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event zn-clear - Emitted when the clear button is activated.\n * @event zn-focus - Emitted when the control gains focus.\n * @event zn-input - Emitted when the control receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot 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 * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --zn-range-track-height - The height of a range input's track.\n * @cssproperty --zn-range-track-color - The color of a range input's track.\n * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.\n * @cssproperty --zn-range-thumb-color - The color of a range input's thumb.\n * @cssproperty --zn-range-thumb-ring-width - The width of the ring drawn around a range input's thumb.\n */",
           "documentation": "https://zinc.style/components/input",
           "status": "experimental",
           "since": "1.0",
@@ -28398,11 +28593,25 @@
           "kind": "class",
           "description": "",
           "name": "ZnPreviewFrame",
+          "cssProperties": [
+            {
+              "description": "Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.",
+              "name": "--zn-preview-frame-dot-spacing"
+            },
+            {
+              "description": "Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.",
+              "name": "--zn-preview-frame-dot-opacity"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
+            {
+              "description": "The device-width wrapper around the iframe.",
+              "name": "stage"
+            },
             {
               "description": "The preview iframe.",
               "name": "iframe"
@@ -28453,6 +28662,16 @@
               "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": "refreshOn",
+              "type": {
+                "text": "string"
+              },
+              "default": "'form'",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nSet empty to disable.",
+              "attribute": "refresh-on"
+            },
             {
               "kind": "field",
               "name": "debounce",
@@ -28470,7 +28689,7 @@
                 "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.",
+              "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.\nIgnored when `fill` is set.",
               "attribute": "zoom"
             },
             {
@@ -28480,9 +28699,41 @@
                 "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.",
+              "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. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
               "attribute": "min-height"
             },
+            {
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+              "attribute": "fill"
+            },
+            {
+              "kind": "field",
+              "name": "device",
+              "type": {
+                "text": "PreviewFrameDevice"
+              },
+              "default": "'desktop'",
+              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+              "attribute": "device",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "backdrop",
+              "type": {
+                "text": "'dots' | 'panel'"
+              },
+              "default": "'dots'",
+              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+              "attribute": "backdrop",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "frame",
@@ -28508,6 +28759,14 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "_theme",
+              "type": {
+                "text": "Record<string, unknown> | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_watchedForms",
@@ -28515,6 +28774,13 @@
               "readonly": true,
               "default": "new Set<HTMLFormElement>()"
             },
+            {
+              "kind": "field",
+              "name": "_refreshForms",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<HTMLFormElement>()"
+            },
             {
               "kind": "field",
               "name": "_debounceTimers",
@@ -28540,6 +28806,24 @@
               "name": "refresh",
               "description": "Re-fetches the payload and pushes a fresh config to the preview."
             },
+            {
+              "kind": "method",
+              "name": "setTheme",
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "Record<string, unknown>"
+                  }
+                }
+              ],
+              "description": "Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme."
+            },
+            {
+              "kind": "method",
+              "name": "_postTheme",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_sendConfig",
@@ -28550,6 +28834,12 @@
               "name": "_attachForms",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_onShellSave",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_detachForm",
@@ -28645,6 +28935,15 @@
               "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": "refresh-on",
+              "type": {
+                "text": "string"
+              },
+              "default": "'form'",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nSet empty to disable.",
+              "fieldName": "refreshOn"
+            },
             {
               "name": "debounce",
               "type": {
@@ -28660,7 +28959,7 @@
                 "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.",
+              "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.\nIgnored when `fill` is set.",
               "fieldName": "zoom"
             },
             {
@@ -28669,19 +28968,46 @@
                 "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.",
+              "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. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
               "fieldName": "minHeight"
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+              "fieldName": "fill"
+            },
+            {
+              "name": "device",
+              "type": {
+                "text": "PreviewFrameDevice"
+              },
+              "default": "'desktop'",
+              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+              "fieldName": "device"
+            },
+            {
+              "name": "backdrop",
+              "type": {
+                "text": "'dots' | 'panel'"
+              },
+              "default": "'dots'",
+              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+              "fieldName": "backdrop"
             }
           ],
           "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.",
+          "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, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\nand accepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake.",
           "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 */",
+          "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, refreshes the preview\n * after each save (its own, or a shell-driven save of a `refresh-on` form),\n * and accepts a theme payload via setTheme() that is retained and replayed\n * after every ready handshake.\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 stage - The device-width wrapper around the iframe.\n * @csspart iframe - The preview iframe.\n * @csspart error - The error overlay.\n *\n * @cssproperty --zn-preview-frame-dot-spacing - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.\n * @cssproperty --zn-preview-frame-dot-opacity - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.\n */",
           "documentation": "https://zinc.style/components/preview-frame",
           "status": "experimental",
           "since": "1.0"
@@ -39787,6 +40113,1117 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/theme-editor/theme-editor.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnThemeEditor",
+          "cssProperties": [
+            {
+              "description": "Width of the controls column.",
+              "name": "--zn-theme-editor-controls-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The left-hand controls column, full height.",
+              "name": "controls"
+            },
+            {
+              "description": "The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.",
+              "name": "controls-header"
+            },
+            {
+              "description": "The preview column's header row: `preview-caption` on the left, the device switcher (and sources/submit) on the right. Spans the preview column only.",
+              "name": "toolbar"
+            },
+            {
+              "description": "A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).",
+              "name": "section"
+            },
+            {
+              "description": "The footer wrapper beneath the controls.",
+              "name": "footer"
+            },
+            {
+              "description": "The preview column.",
+              "name": "preview"
+            },
+            {
+              "description": "The inline error strip.",
+              "name": "error"
+            },
+            {
+              "description": "The frame's base wrapper (forwarded from zn-preview-frame).",
+              "name": "preview__base"
+            },
+            {
+              "description": "The frame's device-width wrapper (forwarded from zn-preview-frame).",
+              "name": "preview__stage"
+            },
+            {
+              "description": "The frame's iframe (forwarded from zn-preview-frame).",
+              "name": "preview__iframe"
+            },
+            {
+              "description": "The frame's own error overlay (forwarded from zn-preview-frame).",
+              "name": "preview__error"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Ungrouped theme controls, rendered above any sections. Controls assigned `slot=\"<name>\"` matching a `sections` entry (or, when nested, a `groups` entry) render inside that section/group instead. Harvesting and change detection walk every slot's full assigned subtree, not just direct children. With `sections` left unset, the structure is instead derived from the controls' own attributes: `group=\"<label>\"` becomes a tab and `category=\"<label>\"` a collapsible within it, and the control is slotted into that collapsible automatically. Either attribute works alone - a control with only `group` sits directly in its tab, and one with only `category` becomes its own top-level section. Setting `sections` explicitly disables the derivation entirely.",
+              "name": ""
+            },
+            {
+              "description": "Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs.",
+              "name": "toolbar"
+            },
+            {
+              "description": "Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'zn-collapsible': ZnCollapsible, 'zn-preview-frame': ZnPreviewFrame, 'zn-icon': ZnIcon, 'zn-button': ZnButton, 'zn-tabs': ZnTabs, 'zn-navbar': ZnNavbar, 'zn-select': ZnSelect, 'zn-option': ZnOption, }"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of the preview shell page; forwarded to the frame.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "frameOrigin",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Expected origin of the iframe; forwarded to the frame.",
+              "attribute": "frame-origin"
+            },
+            {
+              "kind": "field",
+              "name": "dataUri",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional endpoint returning the base hp-preview:config payload.",
+              "attribute": "data-uri"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "ThemeEditorMode"
+              },
+              "default": "'light'",
+              "description": "Which mode the preview renders in. Travels in the theme payload.",
+              "attribute": "mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "device",
+              "type": {
+                "text": "ThemeEditorDevice"
+              },
+              "default": "'desktop'",
+              "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
+              "attribute": "device",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minHeight",
+              "type": {
+                "text": "number"
+              },
+              "default": "480",
+              "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
+              "attribute": "min-height"
+            },
+            {
+              "kind": "field",
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "150",
+              "description": "Debounce in ms between a control change and the push to the preview.",
+              "attribute": "debounce"
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
+              "attribute": "action"
+            },
+            {
+              "kind": "field",
+              "name": "saveDebounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "Debounce in ms between a control change and the save POST.",
+              "attribute": "save-debounce"
+            },
+            {
+              "kind": "field",
+              "name": "sections",
+              "type": {
+                "text": "ThemeEditorSection[]"
+              },
+              "default": "[]",
+              "description": "Groups controls into named sections. Empty/unset falls back to deriving the\nstructure from the controls' own `group`/`category` attributes, and renders\none ungrouped column when they carry neither. A section with a non-empty\n`groups` nests a collapsible per group inside a `zn-tabs` tab for that\nsection - see `groups` on `ThemeEditorSection`.",
+              "attribute": "sections"
+            },
+            {
+              "kind": "field",
+              "name": "sectionLayout",
+              "type": {
+                "text": "'collapsible' | 'tabs'"
+              },
+              "default": "'collapsible'",
+              "description": "Presentation for flat, group-less `sections`: stacked `zn-collapsible`s\n(default) or a `zn-tabs` strip. Ignored once any section has `groups` -\nnested sections always render as tabs.",
+              "attribute": "section-layout"
+            },
+            {
+              "kind": "field",
+              "name": "sources",
+              "type": {
+                "text": "ThemeEditorSource[]"
+              },
+              "default": "[]",
+              "description": "Dropdown of preview sources, `{label, src}`, rendered in the toolbar. Empty/unset renders no dropdown; the first entry wins over an explicit `src` when non-empty.",
+              "attribute": "sources"
+            },
+            {
+              "kind": "field",
+              "name": "controlsCollapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Collapses the controls column.",
+              "attribute": "controls-collapsed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "standalone",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+              "attribute": "standalone",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "controlsCaption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+              "attribute": "controls-caption"
+            },
+            {
+              "kind": "field",
+              "name": "previewCaption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+              "attribute": "preview-caption"
+            },
+            {
+              "kind": "field",
+              "name": "submitLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the built-in submit button. Empty (default) renders no button.",
+              "attribute": "submit-label"
+            },
+            {
+              "kind": "field",
+              "name": "manual",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
+              "attribute": "manual"
+            },
+            {
+              "kind": "field",
+              "name": "frame",
+              "type": {
+                "text": "ZnPreviewFrame"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlsSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sectionSlots",
+              "type": {
+                "text": "NodeListOf<HTMLSlotElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_submitting",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_sourceIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'footer', '[default]')"
+            },
+            {
+              "kind": "field",
+              "name": "_pushTimer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_saveTimer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_saving",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_saveQueued",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_saveWaiters",
+              "type": {
+                "text": "((ok: boolean) => void)[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "_narrowQuery",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_wasNarrow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_mounted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_lastControls",
+              "type": {
+                "text": "HarvestableControl[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "_controlsObserverConfig",
+              "type": {
+                "text": "MutationObserverInit"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "{ childList: true, subtree: true }"
+            },
+            {
+              "kind": "field",
+              "name": "_controlsObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationController(this, { target: null, config: this._controlsObserverConfig, callback: () => this._pushIfControlsChanged(), })"
+            },
+            {
+              "kind": "field",
+              "name": "_modeValues",
+              "type": {
+                "text": "Record<ThemeEditorMode, Record<string, unknown>>"
+              },
+              "privacy": "private",
+              "default": "{ light: {}, dark: {} }"
+            },
+            {
+              "kind": "field",
+              "name": "_suppressDepth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_openedInitialCollapsible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "{ light: Record<string, unknown>; dark: Record<string, unknown> }"
+              },
+              "description": "The current per-mode value sets. Returns copies.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "activeValues",
+              "type": {
+                "text": "Record<string, unknown>"
+              },
+              "description": "The active mode's values - what gets pushed to the preview frame.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_controlSlots",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLSlotElement[]"
+                }
+              },
+              "description": "The default slot plus every rendered section slot."
+            },
+            {
+              "kind": "method",
+              "name": "_harvestNamed",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ name: string; control: HarvestableControl }[]"
+                }
+              },
+              "description": "Walks every control slot (default and sections) for every enabled, named control."
+            },
+            {
+              "kind": "method",
+              "name": "_hasAssignedControls",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slotName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Whether a direct child is assigned to the named slot — an empty section renders no chrome."
+            },
+            {
+              "kind": "method",
+              "name": "_isBooleanControl",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "control",
+                  "type": {
+                    "text": "HarvestableControl"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_readControlValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "unknown"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "control",
+                  "type": {
+                    "text": "HarvestableControl"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_seed",
+              "privacy": "private",
+              "description": "Seeds light/dark entries for any control name not already present."
+            },
+            {
+              "kind": "method",
+              "name": "_writeBack",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "mode",
+                  "default": "this.mode",
+                  "type": {
+                    "text": "ThemeEditorMode"
+                  }
+                }
+              ],
+              "description": "Writes a mode's value set back into the controls so they display it."
+            },
+            {
+              "kind": "method",
+              "name": "_harvestInto",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "ThemeEditorMode"
+                  }
+                }
+              ],
+              "description": "Harvests the controls' current displayed values into a mode's set."
+            },
+            {
+              "kind": "field",
+              "name": "_onNarrowChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_push",
+              "privacy": "private",
+              "description": "Pushes the active mode's values into the preview and announces it."
+            },
+            {
+              "kind": "method",
+              "name": "_queueSave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_save",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_awaitSave",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              },
+              "description": "Resolves once a save actually carrying the current values has settled."
+            },
+            {
+              "kind": "method",
+              "name": "_pushIfControlsChanged",
+              "privacy": "private",
+              "description": "Pushes only if the deep set of named controls (the same set harvesting\nwalks, so it includes controls nested inside sections) has changed since\nthe last push. Comparison is by element identity only, never by value."
+            },
+            {
+              "kind": "method",
+              "name": "_flushPendingEdit",
+              "privacy": "private",
+              "description": "Harvests and queues a save for a pending debounced edit, then cancels its timer."
+            },
+            {
+              "kind": "field",
+              "name": "_onSubmit",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_announce",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_fail",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onControlChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_onSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_setDevice",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_toggleMode",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_onFrameError",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_sourcesSafe",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorSource[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_frameSrc",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onSourceChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_sectionsSafe",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorSection[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_groupsFor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorGroup[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "ThemeEditorSection"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_hasStructureAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether any direct child carries the `group`/`category` structure attributes."
+            },
+            {
+              "kind": "method",
+              "name": "_usesDerivedSections",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Attribute-derived structure applies only when `sections` is left unset."
+            },
+            {
+              "kind": "method",
+              "name": "_derive",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "DerivedStructure"
+                }
+              },
+              "description": "Builds the tab/collapsible tree from the controls' own `group` (tab) and\n`category` (collapsible) attributes, alongside the slot name each control\nneeds assigning to. Only direct children are considered, since `slot` only\nworks one level deep. Slot names are slugged from the labels and made\nunique across the whole tree, so two tabs can each hold a \"Colors\"\ncategory without their slots colliding."
+            },
+            {
+              "kind": "method",
+              "name": "_effectiveSections",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorSection[]"
+                }
+              },
+              "description": "Explicit `sections` when set, otherwise the attribute-derived tree."
+            },
+            {
+              "kind": "method",
+              "name": "_assignDerivedSlots",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_hasNestedGroups",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether any section has a populated `groups` - the switch to nested tabs+collapsibles."
+            },
+            {
+              "kind": "method",
+              "name": "_visibleGroups",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorGroup[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "ThemeEditorSection"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_visibleSections",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ThemeEditorSection[]"
+                }
+              },
+              "description": "Configured sections that have an assigned control, or (nested) a populated group - shared by every presentation."
+            },
+            {
+              "kind": "method",
+              "name": "_renderSections",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderGroups",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "ThemeEditorSection"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_tabCollapsibles",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ZnCollapsible[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "ThemeEditorSection"
+                  }
+                }
+              ],
+              "description": "Every collapsible inside a tab's panel, in document order."
+            },
+            {
+              "kind": "method",
+              "name": "_expandFirst",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "collapsibles",
+                  "type": {
+                    "text": "ZnCollapsible[]"
+                  }
+                }
+              ],
+              "description": "Expands the first collapsible, unless one is already open."
+            },
+            {
+              "kind": "method",
+              "name": "_openFirstCollapsible",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "section",
+                  "type": {
+                    "text": "ThemeEditorSection"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderTabs",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "panel",
+                  "type": {
+                    "text": "(section: ThemeEditorSection) => unknown"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the values, mode or device change.",
+              "name": "zn-theme-change"
+            },
+            {
+              "description": "Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save.",
+              "name": "zn-theme-submit"
+            },
+            {
+              "description": "Emitted when a save fails. Also seen for preview render failures: the frame's zn-error is composed and not stopped, so it bubbles out through the editor too.",
+              "name": "zn-error"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of the preview shell page; forwarded to the frame.",
+              "fieldName": "src"
+            },
+            {
+              "name": "frame-origin",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Expected origin of the iframe; forwarded to the frame.",
+              "fieldName": "frameOrigin"
+            },
+            {
+              "name": "data-uri",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional endpoint returning the base hp-preview:config payload.",
+              "fieldName": "dataUri"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "ThemeEditorMode"
+              },
+              "default": "'light'",
+              "description": "Which mode the preview renders in. Travels in the theme payload.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "device",
+              "type": {
+                "text": "ThemeEditorDevice"
+              },
+              "default": "'desktop'",
+              "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
+              "fieldName": "device"
+            },
+            {
+              "name": "min-height",
+              "type": {
+                "text": "number"
+              },
+              "default": "480",
+              "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
+              "fieldName": "minHeight"
+            },
+            {
+              "name": "debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "150",
+              "description": "Debounce in ms between a control change and the push to the preview.",
+              "fieldName": "debounce"
+            },
+            {
+              "name": "action",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
+              "fieldName": "action"
+            },
+            {
+              "name": "save-debounce",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "Debounce in ms between a control change and the save POST.",
+              "fieldName": "saveDebounce"
+            },
+            {
+              "name": "sections",
+              "type": {
+                "text": "ThemeEditorSection[]"
+              },
+              "default": "[]",
+              "description": "Groups controls into named sections. Empty/unset falls back to deriving the\nstructure from the controls' own `group`/`category` attributes, and renders\none ungrouped column when they carry neither. A section with a non-empty\n`groups` nests a collapsible per group inside a `zn-tabs` tab for that\nsection - see `groups` on `ThemeEditorSection`.",
+              "fieldName": "sections"
+            },
+            {
+              "name": "section-layout",
+              "type": {
+                "text": "'collapsible' | 'tabs'"
+              },
+              "default": "'collapsible'",
+              "description": "Presentation for flat, group-less `sections`: stacked `zn-collapsible`s\n(default) or a `zn-tabs` strip. Ignored once any section has `groups` -\nnested sections always render as tabs.",
+              "fieldName": "sectionLayout"
+            },
+            {
+              "name": "sources",
+              "type": {
+                "text": "ThemeEditorSource[]"
+              },
+              "default": "[]",
+              "description": "Dropdown of preview sources, `{label, src}`, rendered in the toolbar. Empty/unset renders no dropdown; the first entry wins over an explicit `src` when non-empty.",
+              "fieldName": "sources"
+            },
+            {
+              "name": "controls-collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Collapses the controls column.",
+              "fieldName": "controlsCollapsed"
+            },
+            {
+              "name": "standalone",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+              "fieldName": "standalone"
+            },
+            {
+              "name": "controls-caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+              "fieldName": "controlsCaption"
+            },
+            {
+              "name": "preview-caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+              "fieldName": "previewCaption"
+            },
+            {
+              "name": "submit-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the built-in submit button. Empty (default) renders no button.",
+              "fieldName": "submitLabel"
+            },
+            {
+              "name": "manual",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
+              "fieldName": "manual"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "A theme editor: slotted form controls drive a live preview frame,\nwith a toolbar for the preview's light/dark mode and device width.",
+          "tagNameWithoutPrefix": "theme-editor",
+          "tagName": "zn-theme-editor",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A theme editor: slotted form controls drive a live preview frame,\n * with a toolbar for the preview's light/dark mode and device width.\n * @documentation https://zinc.style/components/theme-editor\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-collapsible\n * @dependency zn-preview-frame\n * @dependency zn-icon\n * @dependency zn-button\n * @dependency zn-tabs\n * @dependency zn-navbar\n * @dependency zn-select\n *\n * @event zn-theme-change - Emitted when the values, mode or device change.\n * @event zn-theme-submit - Emitted on submit (button click), carrying the\n * current values. With `action` set, only fires after a successful save.\n * @event zn-error - Emitted when a save fails. Also seen for preview render\n * failures: the frame's zn-error is composed and not stopped, so it bubbles\n * out through the editor too.\n *\n * @slot - Ungrouped theme controls, rendered above any sections. Controls\n * assigned `slot=\"<name>\"` matching a `sections` entry (or, when nested, a\n * `groups` entry) render inside that section/group instead. Harvesting and\n * change detection walk every slot's full assigned subtree, not just direct\n * children.\n *\n * With `sections` left unset, the structure is instead derived from the\n * controls' own attributes: `group=\"<label>\"` becomes a tab and\n * `category=\"<label>\"` a collapsible within it, and the control is slotted\n * into that collapsible automatically. Either attribute works alone - a\n * control with only `group` sits directly in its tab, and one with only\n * `category` becomes its own top-level section. Setting `sections`\n * explicitly disables the derivation entirely.\n * @slot toolbar - Actions in the toolbar, right-aligned beside the device\n * controls. Where a save button belongs.\n * @slot footer - Actions pinned beneath the controls. The built-in submit button\n * lives in the toolbar, not here.\n *\n * @csspart base - The component's base wrapper.\n * @csspart controls - The left-hand controls column, full height.\n * @csspart controls-header - The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.\n * @csspart toolbar - The preview column's header row: `preview-caption` on the left, the device switcher (and sources/submit) on the right. Spans the preview column only.\n * @csspart section - A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).\n * @csspart footer - The footer wrapper beneath the controls.\n * @csspart preview - The preview column.\n * @csspart error - The inline error strip.\n * @csspart preview__base - The frame's base wrapper (forwarded from zn-preview-frame).\n * @csspart preview__stage - The frame's device-width wrapper (forwarded from zn-preview-frame).\n * @csspart preview__iframe - The frame's iframe (forwarded from zn-preview-frame).\n * @csspart preview__error - The frame's own error overlay (forwarded from zn-preview-frame).\n *\n * @cssproperty --zn-theme-editor-controls-width - Width of the controls column.\n */",
+          "documentation": "https://zinc.style/components/theme-editor",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-collapsible",
+            "zn-preview-frame",
+            "zn-icon",
+            "zn-button",
+            "zn-tabs",
+            "zn-navbar",
+            "zn-select"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnThemeEditor",
+            "module": "components/theme-editor/theme-editor.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tile/tile.js",
@@ -42440,7 +43877,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.68",
+    "version": "1.1.70",
     "author": "",
     "license": "MIT"
   }