@kubex/zinc 1.1.97 → 1.1.99

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.97",
+  "version": "1.1.99",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -83,28 +105,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -250,6 +250,108 @@
             "events": []
           }
         },
+        {
+          "name": "zn-background",
+          "description": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n---\n\n\n### **Slots:**\n - _default_ - Content displayed above the background layers.\n\n### **CSS Properties:**\n - **--zn-background-color** - Fallback colour when the `color` attribute is not set. _(default: undefined)_\n- **--zn-background-image-position** - Position of the background image. Defaults to `center`. _(default: undefined)_\n- **--zn-background-overlay-angle** - Direction of the overlay gradient. Defaults to `110deg`. _(default: undefined)_\n- **--zn-background-floating-icon-color** - Colour of the floating icons. Defaults to `currentColor`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's full-size background canvas.\n- **image** - The decorative background image.\n- **overlay** - The contrast overlay between the image and content.\n- **floating-icons** - The non-interactive layer containing the floating icons.\n- **floating-icon** - Each floating `zn-icon`.\n- **content** - The wrapper around the default slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "image",
+              "description": "URL of the decorative background image.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "color",
+              "description": "CSS colour painted beneath the image.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-strength",
+              "description": "Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%).",
+              "value": {
+                "type": "BackgroundImageStrength",
+                "default": "'full'"
+              }
+            },
+            {
+              "name": "motion",
+              "description": "Subtle animation applied to the image. Motion stops when reduced motion is requested.",
+              "value": { "type": "BackgroundMotion", "default": "'none'" }
+            },
+            {
+              "name": "overlay",
+              "description": "Strength of the contrast gradient above the image.",
+              "value": { "type": "BackgroundOverlay", "default": "'soft'" }
+            },
+            {
+              "name": "overlay-tone",
+              "description": "Whether the overlay uses a light or dark contrast treatment.",
+              "value": { "type": "BackgroundOverlayTone", "default": "'light'" }
+            },
+            {
+              "name": "floating-icons",
+              "description": "Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "paused",
+              "description": "Pauses background motion without changing the selected motion treatment.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Content displayed above the background layers."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "image",
+                "description": "URL of the decorative background image.",
+                "type": "string"
+              },
+              {
+                "name": "color",
+                "description": "CSS colour painted beneath the image.",
+                "type": "string"
+              },
+              {
+                "name": "imageStrength",
+                "description": "Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%).",
+                "type": "BackgroundImageStrength"
+              },
+              {
+                "name": "motion",
+                "description": "Subtle animation applied to the image. Motion stops when reduced motion is requested.",
+                "type": "BackgroundMotion"
+              },
+              {
+                "name": "overlay",
+                "description": "Strength of the contrast gradient above the image.",
+                "type": "BackgroundOverlay"
+              },
+              {
+                "name": "overlayTone",
+                "description": "Whether the overlay uses a light or dark contrast treatment.",
+                "type": "BackgroundOverlayTone"
+              },
+              {
+                "name": "floatingIcons",
+                "description": "Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered.",
+                "type": "string"
+              },
+              {
+                "name": "paused",
+                "description": "Pauses background motion without changing the selected motion treatment.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-bulk-actions",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -408,6 +510,11 @@
               "value": { "type": "string", "default": "'noreferrer noopener'" }
             },
             { "name": "tooltip", "value": { "type": "string" } },
+            {
+              "name": "label",
+              "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
+              "value": { "type": "string" }
+            },
             {
               "name": "auto-click",
               "value": { "type": "boolean", "default": "false" }
@@ -526,6 +633,11 @@
               { "name": "dataTarget", "type": "'modal' | 'slide' | string" },
               { "name": "rel", "type": "string" },
               { "name": "tooltip", "type": "string" },
+              {
+                "name": "label",
+                "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
+                "type": "string"
+              },
               { "name": "autoClick", "type": "boolean" },
               { "name": "autoClickDelay", "type": "number" },
               { "name": "loadingText", "type": "string" },
@@ -898,6 +1010,14 @@
               "name": "categories",
               "value": { "type": "string[]", "default": "[]" }
             },
+            {
+              "name": "y-categories",
+              "value": { "type": "string[]", "default": "[]" }
+            },
+            {
+              "name": "indicators",
+              "value": { "type": "RadarIndicator[]", "default": "[]" }
+            },
             {
               "name": "xaxis",
               "value": { "type": "'datetime' | 'category' | 'numeric'" }
@@ -934,6 +1054,20 @@
               "name": "smooth",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "inner-radius",
+              "value": { "type": "number | string | undefined" }
+            },
+            {
+              "name": "outer-radius",
+              "value": { "type": "number | string | undefined" }
+            },
+            {
+              "name": "show-labels",
+              "value": { "type": "boolean | undefined" }
+            },
+            { "name": "min-value", "value": { "type": "number | undefined" } },
+            { "name": "max-value", "value": { "type": "number | undefined" } },
             {
               "name": "scale",
               "value": { "type": "boolean | number", "default": "false" }
@@ -945,6 +1079,8 @@
               { "name": "type", "type": "ChartType" },
               { "name": "data", "type": "SeriesItem[]" },
               { "name": "categories", "type": "string[]" },
+              { "name": "yCategories", "type": "string[]" },
+              { "name": "indicators", "type": "RadarIndicator[]" },
               {
                 "name": "xAxis",
                 "type": "'datetime' | 'category' | 'numeric'"
@@ -960,6 +1096,11 @@
               { "name": "colors", "type": "string[] | undefined" },
               { "name": "syncGroup", "type": "string | undefined" },
               { "name": "smooth", "type": "boolean" },
+              { "name": "innerRadius", "type": "number | string | undefined" },
+              { "name": "outerRadius", "type": "number | string | undefined" },
+              { "name": "showLabels", "type": "boolean | undefined" },
+              { "name": "minValue", "type": "number | undefined" },
+              { "name": "maxValue", "type": "number | undefined" },
               { "name": "scale", "type": "boolean | number" }
             ],
             "events": []
@@ -1151,7 +1292,7 @@
         },
         {
           "name": "zn-checkbox",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -1165,6 +1306,11 @@
               "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
               "value": { "type": "string" }
             },
+            {
+              "name": "card-title",
+              "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "unchecked-value",
               "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.",
@@ -1198,6 +1344,37 @@
               "description": "Draws a container around the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "square",
+              "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "src",
+              "description": "URL for the image shown in a contained checkbox.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-position",
+              "description": "Places the image above, beside, or below the checkbox's text. Requires `contained`.",
+              "value": {
+                "type": "SelectionCardImagePosition",
+                "default": "'left'"
+              }
+            },
+            {
+              "name": "control-position",
+              "description": "Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+              "value": {
+                "type": "SelectionCardControlPosition",
+                "default": "'start'"
+              }
+            },
             {
               "name": "borderless",
               "description": "Removes a container around the checkbox.",
@@ -1258,6 +1435,10 @@
           ],
           "slots": [
             { "name": "", "description": "The checkbox's label." },
+            {
+              "name": "image",
+              "description": "Replaces the built-in image used by contained checkboxes."
+            },
             {
               "name": "description",
               "description": "A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute."
@@ -1303,6 +1484,11 @@
                 "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
                 "type": "string"
               },
+              {
+                "name": "cardTitle",
+                "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+                "type": "string"
+              },
               {
                 "name": "uncheckedValue",
                 "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.",
@@ -1333,6 +1519,31 @@
                 "description": "Draws a container around the checkbox.",
                 "type": "boolean"
               },
+              {
+                "name": "square",
+                "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+                "type": "boolean"
+              },
+              {
+                "name": "src",
+                "description": "URL for the image shown in a contained checkbox.",
+                "type": "string"
+              },
+              {
+                "name": "imageAlt",
+                "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+                "type": "string"
+              },
+              {
+                "name": "imagePosition",
+                "description": "Places the image above, beside, or below the checkbox's text. Requires `contained`.",
+                "type": "SelectionCardImagePosition"
+              },
+              {
+                "name": "controlPosition",
+                "description": "Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+                "type": "SelectionCardControlPosition"
+              },
               {
                 "name": "borderless",
                 "description": "Removes a container around the checkbox.",
@@ -1431,7 +1642,7 @@
         },
         {
           "name": "zn-checkbox-group",
-          "description": "Shotrt summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the checkbox group's selected value changes.\n- **zn-input** - Emitted when the checkbox group receives user input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _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 `<zn-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **help-text** - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
+          "description": "Shotrt summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the checkbox group's selected value changes.\n- **zn-input** - Emitted when the checkbox group receives user input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _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 `<zn-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **help-text** - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-checkbox-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -1477,6 +1688,16 @@
               "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "square",
+              "description": "Squares off the corners of every contained checkbox in the group, which are rounded by default.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "wrap",
+              "description": "Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "form",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
@@ -1564,6 +1785,16 @@
                 "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
                 "type": "boolean"
               },
+              {
+                "name": "square",
+                "description": "Squares off the corners of every contained checkbox in the group, which are rounded by default.",
+                "type": "boolean"
+              },
+              {
+                "name": "wrap",
+                "description": "Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
+                "type": "boolean"
+              },
               {
                 "name": "form",
                 "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
@@ -6364,204 +6595,62 @@
           }
         },
         {
-          "name": "zn-page",
-          "description": "Combines a page header with tab navigation and tab panels.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n- **description** - Rich subtitle/description content. Falls back to the `summary` attribute when empty.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "zn-page-builder",
+          "description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\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- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
           "doc-url": "",
           "attributes": [
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "entity-id", "value": { "type": "string" } },
-            { "name": "entity-id-show", "value": { "type": "boolean" } },
-            { "name": "full-location", "value": { "type": "string" } },
-            {
-              "name": "modal",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "nested",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
-              "name": "primary",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "name",
+              "description": "The name of the control, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
-            { "name": "previous-path", "value": { "type": "string" } },
-            { "name": "previous-target", "value": { "type": "string" } },
-            { "name": "summary", "value": { "type": "string" } },
-            { "name": "master-id", "value": { "type": "string" } },
             {
-              "name": "default-uri",
+              "name": "form",
+              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "active",
+              "name": "config",
+              "description": "The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning.",
               "value": { "type": "string", "default": "''" }
             },
-            { "name": "split", "value": { "type": "number" } },
             {
-              "name": "split-min",
-              "value": { "type": "number", "default": "60" }
+              "name": "heading",
+              "value": { "type": "string", "default": "''" }
             },
-            { "name": "split-min-secondary", "value": { "type": "number" } },
-            { "name": "split-max", "value": { "type": "number" } },
             {
-              "name": "primary-caption",
-              "value": { "type": "string", "default": "'Navigation'" }
+              "name": "subheading",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "secondary-caption",
-              "value": { "type": "string", "default": "'Content'" }
+              "name": "required-first",
+              "description": "Section type key that must lead the page. The builder hoists an existing section of\nthat type to the top, or inserts an empty one, and pins it there: it can't be\nremoved, reordered or dragged into a slot, and nothing can be dropped above it.\nIts content stays fully editable in the inspector.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "no-prefetch",
+              "name": "palette-collapsed",
+              "description": "Collapses the left palette. Auto-set when the builder becomes narrow.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "no-cache",
+              "name": "inspector-collapsed",
+              "description": "Collapses the inspector while a section is selected.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "local-storage", "value": { "type": "boolean" } },
-            { "name": "store-key", "value": { "type": "string" } },
-            {
-              "name": "store-ttl",
-              "value": { "type": "number", "default": "0" }
-            },
             {
-              "name": "padded",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "auto-save",
+              "description": "Auto-save the page to localStorage (1-day TTL). Omit to disable. A bare\n`auto-save` saves every 5 minutes; a numeric value sets the interval in\nminutes (`auto-save=\"2\"`). Restore with `restoreAutoSave()`.",
+              "value": { "type": "number | null", "default": "null" }
+            }
+          ],
+          "slots": [
             {
-              "name": "fetch-style",
-              "value": { "type": "string", "default": "\"\"" }
+              "name": "config",
+              "description": "`<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow."
             },
             {
-              "name": "full-width",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "padded-right",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "monitor", "value": { "type": "string" } },
-            { "name": "description", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Page content. Use zn-tab for named tabs and header-action/header-actions for header actions."
-            },
-            {
-              "name": "description",
-              "description": "Rich subtitle/description content. Falls back to the `summary` attribute when empty."
-            },
-            {
-              "name": "bottom",
-              "description": "Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot."
-            },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "caption", "type": "string" },
-              { "name": "entityId", "type": "string" },
-              { "name": "entityIdShow", "type": "boolean" },
-              { "name": "fullLocation", "type": "string" },
-              { "name": "modal", "type": "boolean" },
-              { "name": "nested", "type": "boolean" },
-              { "name": "primary", "type": "boolean" },
-              { "name": "previousPath", "type": "string" },
-              { "name": "previousTarget", "type": "string" },
-              { "name": "summary", "type": "string" },
-              { "name": "_registerTabs" },
-              { "name": "masterId", "type": "string" },
-              { "name": "defaultUri", "type": "string" },
-              { "name": "_current", "type": "string" },
-              { "name": "_split", "type": "number" },
-              { "name": "_splitMin", "type": "number" },
-              { "name": "_splitMinSecondary", "type": "number" },
-              { "name": "_splitMax", "type": "number" },
-              { "name": "primaryCaption", "type": "string" },
-              { "name": "secondaryCaption", "type": "string" },
-              { "name": "noPrefetch", "type": "boolean" },
-              { "name": "noCache", "type": "boolean" },
-              { "name": "localStorage", "type": "boolean" },
-              { "name": "storeKey", "type": "string" },
-              { "name": "storeTtl", "type": "number" },
-              { "name": "padded", "type": "boolean" },
-              { "name": "fetchStyle", "type": "string" },
-              { "name": "fullWidth", "type": "boolean" },
-              { "name": "paddedRight", "type": "boolean" },
-              { "name": "monitor", "type": "string" },
-              { "name": "description", "type": "string" },
-              { "name": "reRegisterTabs" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
-        {
-          "name": "zn-page-builder",
-          "description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\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- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the control, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "form",
-              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "config",
-              "description": "The page state as a JSON string. Parsed on set; invalid JSON is ignored with a warning.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "heading",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "subheading",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "required-first",
-              "description": "Section type key that must lead the page. The builder hoists an existing section of\nthat type to the top, or inserts an empty one, and pins it there: it can't be\nremoved, reordered or dragged into a slot, and nothing can be dropped above it.\nIts content stays fully editable in the inspector.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "palette-collapsed",
-              "description": "Collapses the left palette. Auto-set when the builder becomes narrow.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "inspector-collapsed",
-              "description": "Collapses the inspector while a section is selected.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "auto-save",
-              "description": "Auto-save the page to localStorage (1-day TTL). Omit to disable. A bare\n`auto-save` saves every 5 minutes; a numeric value sets the interval in\nminutes (`auto-save=\"2\"`). Restore with `restoreAutoSave()`.",
-              "value": { "type": "number | null", "default": "null" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "config",
-              "description": "`<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow."
-            },
-            {
-              "name": "header-left",
-              "description": "Actions shown on the left of the header bar."
+              "name": "header-left",
+              "description": "Actions shown on the left of the header bar."
             },
             {
               "name": "header-right",
@@ -6666,11 +6755,29 @@
           }
         },
         {
-          "name": "zn-page-nav",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "zn-page",
+          "description": "Combines a page header with tab navigation and tab panels.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n- **description** - Rich subtitle/description content. Falls back to the `summary` attribute when empty.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "navigation", "value": { "type": "PageNavData" } },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "entity-id", "value": { "type": "string" } },
+            { "name": "entity-id-show", "value": { "type": "boolean" } },
+            { "name": "full-location", "value": { "type": "string" } },
+            {
+              "name": "modal",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "nested",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "primary",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "previous-path", "value": { "type": "string" } },
+            { "name": "previous-target", "value": { "type": "string" } },
+            { "name": "summary", "value": { "type": "string" } },
             { "name": "master-id", "value": { "type": "string" } },
             {
               "name": "default-uri",
@@ -6726,11 +6833,21 @@
               "value": { "type": "boolean", "default": "false" }
             },
             { "name": "monitor", "value": { "type": "string" } },
-            { "name": "caption", "value": { "type": "string" } },
             { "name": "description", "value": { "type": "string" } }
           ],
           "slots": [
-            { "name": "", "description": "The default slot." },
+            {
+              "name": "",
+              "description": "Page content. Use zn-tab for named tabs and header-action/header-actions for header actions."
+            },
+            {
+              "name": "description",
+              "description": "Rich subtitle/description content. Falls back to the `summary` attribute when empty."
+            },
+            {
+              "name": "bottom",
+              "description": "Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot."
+            },
             { "name": "example", "description": "An example slot." }
           ],
           "events": [
@@ -6738,8 +6855,17 @@
           ],
           "js": {
             "properties": [
-              { "name": "navigation", "type": "PageNavData" },
-              { "name": "breadcrumb", "type": "string" },
+              { "name": "caption", "type": "string" },
+              { "name": "entityId", "type": "string" },
+              { "name": "entityIdShow", "type": "boolean" },
+              { "name": "fullLocation", "type": "string" },
+              { "name": "modal", "type": "boolean" },
+              { "name": "nested", "type": "boolean" },
+              { "name": "primary", "type": "boolean" },
+              { "name": "previousPath", "type": "string" },
+              { "name": "previousTarget", "type": "string" },
+              { "name": "summary", "type": "string" },
+              { "name": "_registerTabs" },
               { "name": "masterId", "type": "string" },
               { "name": "defaultUri", "type": "string" },
               { "name": "_current", "type": "string" },
@@ -6759,54 +6885,9 @@
               { "name": "fullWidth", "type": "boolean" },
               { "name": "paddedRight", "type": "boolean" },
               { "name": "monitor", "type": "string" },
-              { "name": "caption", "type": "string" },
               { "name": "description", "type": "string" },
-              { "name": "reRegisterTabs" },
-              { "name": "_registerTabs" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
-        {
-          "name": "zn-pagination",
-          "description": "Pagination component for navigating through pages of content.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "limit", "value": { "type": "number", "default": "10" } },
-            { "name": "total", "value": { "type": "number", "default": "0" } },
-            { "name": "page", "value": { "type": "number", "default": "1" } },
-            { "name": "uri", "value": { "type": "string", "default": "\"\"" } }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "limit", "type": "number" },
-              { "name": "total", "type": "number" },
-              { "name": "page", "type": "number" },
-              { "name": "uri", "type": "string" }
+              { "name": "reRegisterTabs" }
             ],
-            "events": []
-          }
-        },
-        {
-          "name": "zn-pane",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [{ "name": "flush", "type": "boolean" }],
             "events": [
               {
                 "name": "zn-event-name",
@@ -6816,38 +6897,188 @@
           }
         },
         {
-          "name": "zn-panel",
-          "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "zn-page-nav",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "basis-px", "value": { "type": "number" } },
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "icon", "value": { "type": "string" } },
-            { "name": "tabbed", "value": { "type": "boolean" } },
-            { "name": "header-borderless", "value": { "type": "boolean" } },
-            { "name": "cosmic", "value": { "type": "boolean" } },
-            { "name": "flush", "value": { "type": "boolean" } },
-            { "name": "flush-x", "value": { "type": "boolean" } },
-            { "name": "flush-y", "value": { "type": "boolean" } },
-            { "name": "flush-footer", "value": { "type": "boolean" } },
-            { "name": "transparent", "value": { "type": "boolean" } },
-            { "name": "shadow", "value": { "type": "boolean" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The panel's main content." },
+            { "name": "navigation", "value": { "type": "PageNavData" } },
+            { "name": "master-id", "value": { "type": "string" } },
             {
-              "name": "actions",
-              "description": "Actions displayed in the panel header (buttons, chips, etc)."
+              "name": "default-uri",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "footer",
-              "description": "Content displayed in the panel footer."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "basis", "type": "number" },
+              "name": "active",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "split", "value": { "type": "number" } },
+            {
+              "name": "split-min",
+              "value": { "type": "number", "default": "60" }
+            },
+            { "name": "split-min-secondary", "value": { "type": "number" } },
+            { "name": "split-max", "value": { "type": "number" } },
+            {
+              "name": "primary-caption",
+              "value": { "type": "string", "default": "'Navigation'" }
+            },
+            {
+              "name": "secondary-caption",
+              "value": { "type": "string", "default": "'Content'" }
+            },
+            {
+              "name": "no-prefetch",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-cache",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "local-storage", "value": { "type": "boolean" } },
+            { "name": "store-key", "value": { "type": "string" } },
+            {
+              "name": "store-ttl",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "padded",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "fetch-style",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "full-width",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "padded-right",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "monitor", "value": { "type": "string" } },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "description", "value": { "type": "string" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "navigation", "type": "PageNavData" },
+              { "name": "breadcrumb", "type": "string" },
+              { "name": "masterId", "type": "string" },
+              { "name": "defaultUri", "type": "string" },
+              { "name": "_current", "type": "string" },
+              { "name": "_split", "type": "number" },
+              { "name": "_splitMin", "type": "number" },
+              { "name": "_splitMinSecondary", "type": "number" },
+              { "name": "_splitMax", "type": "number" },
+              { "name": "primaryCaption", "type": "string" },
+              { "name": "secondaryCaption", "type": "string" },
+              { "name": "noPrefetch", "type": "boolean" },
+              { "name": "noCache", "type": "boolean" },
+              { "name": "localStorage", "type": "boolean" },
+              { "name": "storeKey", "type": "string" },
+              { "name": "storeTtl", "type": "number" },
+              { "name": "padded", "type": "boolean" },
+              { "name": "fetchStyle", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "paddedRight", "type": "boolean" },
+              { "name": "monitor", "type": "string" },
+              { "name": "caption", "type": "string" },
+              { "name": "description", "type": "string" },
+              { "name": "reRegisterTabs" },
+              { "name": "_registerTabs" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-pagination",
+          "description": "Pagination component for navigating through pages of content.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "limit", "value": { "type": "number", "default": "10" } },
+            { "name": "total", "value": { "type": "number", "default": "0" } },
+            { "name": "page", "value": { "type": "number", "default": "1" } },
+            { "name": "uri", "value": { "type": "string", "default": "\"\"" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "limit", "type": "number" },
+              { "name": "total", "type": "number" },
+              { "name": "page", "type": "number" },
+              { "name": "uri", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "zn-pane",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [{ "name": "flush", "type": "boolean" }],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-panel",
+          "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "basis-px", "value": { "type": "number" } },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "icon", "value": { "type": "string" } },
+            { "name": "tabbed", "value": { "type": "boolean" } },
+            { "name": "header-borderless", "value": { "type": "boolean" } },
+            { "name": "cosmic", "value": { "type": "boolean" } },
+            { "name": "flush", "value": { "type": "boolean" } },
+            { "name": "flush-x", "value": { "type": "boolean" } },
+            { "name": "flush-y", "value": { "type": "boolean" } },
+            { "name": "flush-footer", "value": { "type": "boolean" } },
+            { "name": "transparent", "value": { "type": "boolean" } },
+            { "name": "shadow", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The panel's main content." },
+            {
+              "name": "actions",
+              "description": "Actions displayed in the panel header (buttons, chips, etc)."
+            },
+            {
+              "name": "footer",
+              "description": "Content displayed in the panel footer."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "basis", "type": "number" },
               { "name": "caption", "type": "string" },
               { "name": "icon", "type": "string" },
               { "name": "tabbed", "type": "boolean" },
@@ -7570,7 +7801,7 @@
         },
         {
           "name": "zn-radio",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the radio loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the radio gains focus.\n- **zn-input** - Emitted when the radio receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n- **description** - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the radio's checked state.\n- **control--checked** - Matches the control part when the radio is checked.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **label** - The container that wraps the radio's label.\n- **description** - The container that wraps the radio's description.\n- **selected-content** - The container that wraps optional content that appears when a radio is checked.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the radio loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the radio gains focus.\n- **zn-input** - Emitted when the radio receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n- **image** - Replaces the built-in image used by contained radios.\n- **description** - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained radio with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the radio's checked state.\n- **control--checked** - Matches the control part when the radio is checked.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the radio's label.\n- **description** - The container that wraps the radio's description.\n- **selected-content** - The container that wraps optional content that appears when a radio is checked.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -7584,6 +7815,11 @@
               "description": "The current value of the radio, submitted as a name/value pair with form data.",
               "value": { "type": "string" }
             },
+            {
+              "name": "card-title",
+              "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "size",
               "description": "The radio's size.",
@@ -7607,6 +7843,37 @@
               "description": "Draws a container around the radio.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "square",
+              "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "src",
+              "description": "URL for the image shown in a contained radio.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-alt",
+              "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "image-position",
+              "description": "Places the image above, beside, or below the radio's text. Requires `contained`.",
+              "value": {
+                "type": "SelectionCardImagePosition",
+                "default": "'left'"
+              }
+            },
+            {
+              "name": "control-position",
+              "description": "Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+              "value": {
+                "type": "SelectionCardControlPosition",
+                "default": "'start'"
+              }
+            },
             {
               "name": "horizontal",
               "description": "Applies styles relevant to radios in a horizontal layout.",
@@ -7632,6 +7899,10 @@
           ],
           "slots": [
             { "name": "", "description": "The radio's label." },
+            {
+              "name": "image",
+              "description": "Replaces the built-in image used by contained radios."
+            },
             {
               "name": "description",
               "description": "A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute."
@@ -7677,6 +7948,11 @@
                 "description": "The current value of the radio, submitted as a name/value pair with form data.",
                 "type": "string"
               },
+              {
+                "name": "cardTitle",
+                "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+                "type": "string"
+              },
               {
                 "name": "size",
                 "description": "The radio's size.",
@@ -7697,6 +7973,31 @@
                 "description": "Draws a container around the radio.",
                 "type": "boolean"
               },
+              {
+                "name": "square",
+                "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+                "type": "boolean"
+              },
+              {
+                "name": "src",
+                "description": "URL for the image shown in a contained radio.",
+                "type": "string"
+              },
+              {
+                "name": "imageAlt",
+                "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+                "type": "string"
+              },
+              {
+                "name": "imagePosition",
+                "description": "Places the image above, beside, or below the radio's text. Requires `contained`.",
+                "type": "SelectionCardImagePosition"
+              },
+              {
+                "name": "controlPosition",
+                "description": "Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+                "type": "SelectionCardControlPosition"
+              },
               {
                 "name": "horizontal",
                 "description": "Applies styles relevant to radios in a horizontal layout.",
@@ -7759,7 +8060,7 @@
         },
         {
           "name": "zn-radio-group",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _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.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _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.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -7797,12 +8098,22 @@
             },
             {
               "name": "horizontal",
-              "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
+              "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "contained",
-              "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
+              "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "square",
+              "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "wrap",
+              "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -7860,12 +8171,22 @@
               },
               {
                 "name": "horizontal",
-                "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
+                "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
                 "type": "boolean"
               },
               {
                 "name": "contained",
-                "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
+                "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
+                "type": "boolean"
+              },
+              {
+                "name": "square",
+                "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
+                "type": "boolean"
+              },
+              {
+                "name": "wrap",
+                "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
                 "type": "boolean"
               },
               {
@@ -7988,7 +8309,7 @@
         },
         {
           "name": "zn-remarkd-editor",
-          "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.\n- **include** - The chip rendered in place of an `include::` directive.\n- **include-picker** - The inline Include picker opened from the toolbar or \"/include\".",
+          "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Properties:**\n - **--remarkd-editor-max-height** - The tallest the editor grows before its body scrolls. Defaults to `100dvh`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.\n- **include** - The chip rendered in place of an `include::` directive.\n- **include-picker** - The inline Include picker opened from the toolbar or \"/include\".",
           "doc-url": "",
           "attributes": [
             {
@@ -8473,9 +8794,14 @@
         },
         {
           "name": "zn-scroll-container",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "height",
+              "description": "The height and maximum height of the scroll container.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "start-scrolled",
               "value": { "type": "boolean", "default": "false" }
@@ -8489,7 +8815,14 @@
             { "name": "zn-event-name", "description": "Emitted as an example." }
           ],
           "js": {
-            "properties": [{ "name": "startScrolled", "type": "boolean" }],
+            "properties": [
+              {
+                "name": "height",
+                "description": "The height and maximum height of the scroll container.",
+                "type": "string"
+              },
+              { "name": "startScrolled", "type": "boolean" }
+            ],
             "events": [
               {
                 "name": "zn-event-name",
@@ -10642,325 +10975,717 @@
                 "type": "SlashMenuItem[]"
               },
               {
-                "name": "slashPreset",
-                "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
+                "name": "slashPreset",
+                "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.",
+                "type": "string"
+              },
+              {
+                "name": "slashTrigger",
+                "description": "The characters that open the slash menu.",
+                "type": "string"
+              },
+              {
+                "name": "slashHeading",
+                "description": "The name the slash menu's list is announced by.",
+                "type": "string"
+              },
+              {
+                "name": "slashHideKeys",
+                "description": "Hides the insertion keys normally shown against the slash menu's items.",
+                "type": "boolean"
+              },
+              {
+                "name": "slashRecentKey",
+                "description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.",
+                "type": "string"
+              },
+              {
+                "name": "slashItemsProvider",
+                "description": "Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an\nAPI). Receives the current query and may return a promise. JavaScript only.",
+                "type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              { "name": "transparent", "type": "boolean" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "zn-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "zn-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "zn-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "zn-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              },
+              {
+                "name": "zn-slash-select",
+                "description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
+              },
+              {
+                "name": "zn-slash-insert",
+                "description": "Emitted after a slash menu item's value has been inserted."
+              }
+            ]
+          }
+        },
+        {
+          "name": "zn-theme-editor",
+          "description": "A theme editor: slotted form controls drive a live preview frame,\nwith a toolbar for the preview's light/dark mode and device width.\n---\n\n\n### **Events:**\n - **zn-theme-change** - Emitted when the values, mode or device change.\n- **zn-theme-submit** - Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save.\n- **zn-error** - 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.\n\n### **Slots:**\n - _default_ - 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.\n- **toolbar** - Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs.\n- **footer** - Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here.\n\n### **CSS Properties:**\n - **--zn-theme-editor-controls-width** - Width of the controls column. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **controls** - The left-hand controls column, full height.\n- **controls-header** - The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.\n- **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- **section** - A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).\n- **footer** - The footer wrapper beneath the controls.\n- **preview** - The preview column.\n- **error** - The inline error strip.\n- **preview__base** - The frame's base wrapper (forwarded from zn-preview-frame).\n- **preview__stage** - The frame's device-width wrapper (forwarded from zn-preview-frame).\n- **preview__iframe** - The frame's iframe (forwarded from zn-preview-frame).\n- **preview__error** - The frame's own error overlay (forwarded from zn-preview-frame).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "URL of the preview shell page; forwarded to the frame.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "frame-origin",
+              "description": "Expected origin of the iframe; forwarded to the frame.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "data-uri",
+              "description": "Optional endpoint returning the base hp-preview:config payload.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "mode",
+              "description": "Which mode the preview renders in. Travels in the theme payload.",
+              "value": { "type": "ThemeEditorMode", "default": "'light'" }
+            },
+            {
+              "name": "device",
+              "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
+              "value": { "type": "ThemeEditorDevice", "default": "'desktop'" }
+            },
+            {
+              "name": "min-height",
+              "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
+              "value": { "type": "number", "default": "480" }
+            },
+            {
+              "name": "debounce",
+              "description": "Debounce in ms between a control change and the push to the preview.",
+              "value": { "type": "number", "default": "150" }
+            },
+            {
+              "name": "action",
+              "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "save-debounce",
+              "description": "Debounce in ms between a control change and the save POST.",
+              "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "sections",
+              "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`.",
+              "value": { "type": "ThemeEditorSection[]", "default": "[]" }
+            },
+            {
+              "name": "section-layout",
+              "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.",
+              "value": {
+                "type": "'collapsible' | 'tabs'",
+                "default": "'collapsible'"
+              }
+            },
+            {
+              "name": "sources",
+              "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.",
+              "value": { "type": "ThemeEditorSource[]", "default": "[]" }
+            },
+            {
+              "name": "controls-collapsed",
+              "description": "Collapses the controls column.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "standalone",
+              "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "controls-caption",
+              "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "preview-caption",
+              "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "submit-label",
+              "description": "Label for the built-in submit button. Empty (default) renders no button.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "manual",
+              "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "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": "toolbar",
+              "description": "Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs."
+            },
+            {
+              "name": "footer",
+              "description": "Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-theme-change",
+              "description": "Emitted when the values, mode or device change."
+            },
+            {
+              "name": "zn-theme-submit",
+              "description": "Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save."
+            },
+            {
+              "name": "zn-error",
+              "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."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "URL of the preview shell page; forwarded to the frame.",
+                "type": "string"
+              },
+              {
+                "name": "frameOrigin",
+                "description": "Expected origin of the iframe; forwarded to the frame.",
+                "type": "string"
+              },
+              {
+                "name": "dataUri",
+                "description": "Optional endpoint returning the base hp-preview:config payload.",
+                "type": "string"
+              },
+              {
+                "name": "mode",
+                "description": "Which mode the preview renders in. Travels in the theme payload.",
+                "type": "ThemeEditorMode"
+              },
+              {
+                "name": "device",
+                "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
+                "type": "ThemeEditorDevice"
+              },
+              {
+                "name": "minHeight",
+                "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
+                "type": "number"
+              },
+              {
+                "name": "debounce",
+                "description": "Debounce in ms between a control change and the push to the preview.",
+                "type": "number"
+              },
+              {
+                "name": "action",
+                "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
+                "type": "string"
+              },
+              {
+                "name": "saveDebounce",
+                "description": "Debounce in ms between a control change and the save POST.",
+                "type": "number"
+              },
+              {
+                "name": "sections",
+                "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`.",
+                "type": "ThemeEditorSection[]"
+              },
+              {
+                "name": "sectionLayout",
+                "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.",
+                "type": "'collapsible' | 'tabs'"
+              },
+              {
+                "name": "sources",
+                "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.",
+                "type": "ThemeEditorSource[]"
+              },
+              {
+                "name": "controlsCollapsed",
+                "description": "Collapses the controls column.",
+                "type": "boolean"
+              },
+              {
+                "name": "standalone",
+                "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+                "type": "boolean"
+              },
+              {
+                "name": "controlsCaption",
+                "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+                "type": "string"
+              },
+              {
+                "name": "previewCaption",
+                "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+                "type": "string"
+              },
+              {
+                "name": "submitLabel",
+                "description": "Label for the built-in submit button. Empty (default) renders no button.",
+                "type": "string"
+              },
+              {
+                "name": "manual",
+                "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
+                "type": "boolean"
+              },
+              { "name": "frame", "type": "ZnPreviewFrame" },
+              {
+                "name": "values",
+                "description": "The current per-mode value sets. Returns copies.",
+                "type": "{ light: Record<string, unknown>; dark: Record<string, unknown> }"
+              },
+              {
+                "name": "activeValues",
+                "description": "The active mode's values - what gets pushed to the preview frame.",
+                "type": "Record<string, unknown>"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-theme-change",
+                "description": "Emitted when the values, mode or device change."
+              },
+              {
+                "name": "zn-theme-submit",
+                "description": "Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save."
+              },
+              {
+                "name": "zn-error",
+                "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-thumbnail",
+          "description": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n---\n\n\n### **Events:**\n - **zn-select** - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.\n- **actions** - Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "Image URL for the built-in `<img>`.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "alt",
+              "description": "Alternative text for the built-in image. Falls back to the caption.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "caption",
+              "description": "The title shown beneath the media.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "aspect-ratio",
+              "description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "href",
+              "description": "Renders the thumbnail as a link to this URL.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "target",
+              "description": "Where to open `href` (e.g. `_blank`).",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "full-uri",
+              "description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "preview-trigger",
+              "description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
+              "value": { "type": "'click' | 'button'", "default": "'click'" }
+            },
+            {
+              "name": "preview-label",
+              "description": "Accessible label for the built-in preview trigger and the preview overlay.",
+              "value": { "type": "string", "default": "'Preview'" }
+            },
+            {
+              "name": "value",
+              "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "selected",
+              "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selectable",
+              "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Dims the thumbnail and blocks selection, navigation and preview.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "hide-caption",
+              "description": "Hides the caption row, leaving just the media frame.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Fallback content rendered in place of the media when no `src` is set."
+            },
+            {
+              "name": "image",
+              "description": "Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`)."
+            },
+            { "name": "caption", "description": "Replaces the caption text." },
+            {
+              "name": "badge",
+              "description": "Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click."
+            },
+            {
+              "name": "actions",
+              "description": "Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`."
+            },
+            {
+              "name": "preview",
+              "description": "Replaces the preview media (e.g. a `<video>` for the full-size asset)."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-select",
+              "description": "Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection."
+            },
+            {
+              "name": "zn-show",
+              "description": "Emitted when the preview overlay starts opening."
+            },
+            {
+              "name": "zn-close",
+              "description": "Emitted once the preview overlay has finished closing."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "Image URL for the built-in `<img>`.",
+                "type": "string"
+              },
+              {
+                "name": "alt",
+                "description": "Alternative text for the built-in image. Falls back to the caption.",
+                "type": "string"
+              },
+              {
+                "name": "caption",
+                "description": "The title shown beneath the media.",
                 "type": "string"
               },
               {
-                "name": "slashTrigger",
-                "description": "The characters that open the slash menu.",
+                "name": "aspectRatio",
+                "description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
                 "type": "string"
               },
               {
-                "name": "slashHeading",
-                "description": "The name the slash menu's list is announced by.",
+                "name": "href",
+                "description": "Renders the thumbnail as a link to this URL.",
                 "type": "string"
               },
               {
-                "name": "slashHideKeys",
-                "description": "Hides the insertion keys normally shown against the slash menu's items.",
-                "type": "boolean"
+                "name": "target",
+                "description": "Where to open `href` (e.g. `_blank`).",
+                "type": "string"
               },
               {
-                "name": "slashRecentKey",
-                "description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.",
+                "name": "fullUri",
+                "description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
                 "type": "string"
               },
               {
-                "name": "slashItemsProvider",
-                "description": "Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an\nAPI). Receives the current query and may return a promise. JavaScript only.",
-                "type": "(query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]> | undefined"
+                "name": "previewTrigger",
+                "description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
+                "type": "'click' | 'button'"
               },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "name": "previewLabel",
+                "description": "Accessible label for the built-in preview trigger and the preview overlay.",
                 "type": "string"
               },
-              { "name": "transparent", "type": "boolean" },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "value",
+                "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
+                "type": "string"
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
+                "name": "selected",
+                "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
+                "type": "boolean"
+              },
               {
-                "name": "zn-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "active",
+                "description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
+                "type": "boolean"
               },
               {
-                "name": "zn-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
+                "name": "selectable",
+                "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
+                "type": "boolean"
               },
               {
-                "name": "zn-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "disabled",
+                "description": "Dims the thumbnail and blocks selection, navigation and preview.",
+                "type": "boolean"
               },
               {
-                "name": "zn-input",
-                "description": "Emitted when the control receives input."
+                "name": "icon",
+                "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
+                "type": "string"
               },
               {
-                "name": "zn-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "hideCaption",
+                "description": "Hides the caption row, leaving just the media frame.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-select",
+                "description": "Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection."
               },
               {
-                "name": "zn-slash-select",
-                "description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself."
+                "name": "zn-show",
+                "description": "Emitted when the preview overlay starts opening."
               },
               {
-                "name": "zn-slash-insert",
-                "description": "Emitted after a slash menu item's value has been inserted."
+                "name": "zn-close",
+                "description": "Emitted once the preview overlay has finished closing."
               }
             ]
           }
         },
         {
-          "name": "zn-theme-editor",
-          "description": "A theme editor: slotted form controls drive a live preview frame,\nwith a toolbar for the preview's light/dark mode and device width.\n---\n\n\n### **Events:**\n - **zn-theme-change** - Emitted when the values, mode or device change.\n- **zn-theme-submit** - Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save.\n- **zn-error** - 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.\n\n### **Slots:**\n - _default_ - 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.\n- **toolbar** - Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs.\n- **footer** - Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here.\n\n### **CSS Properties:**\n - **--zn-theme-editor-controls-width** - Width of the controls column. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **controls** - The left-hand controls column, full height.\n- **controls-header** - The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.\n- **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- **section** - A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).\n- **footer** - The footer wrapper beneath the controls.\n- **preview** - The preview column.\n- **error** - The inline error strip.\n- **preview__base** - The frame's base wrapper (forwarded from zn-preview-frame).\n- **preview__stage** - The frame's device-width wrapper (forwarded from zn-preview-frame).\n- **preview__iframe** - The frame's iframe (forwarded from zn-preview-frame).\n- **preview__error** - The frame's own error overlay (forwarded from zn-preview-frame).",
+          "name": "zn-thumbnail-group",
+          "description": "Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a\n\"Show All\" toggle that expands them into a wrapping grid.\n---\n\n\n### **Events:**\n - **zn-expand** - Emitted when the group expands into the full grid.\n- **zn-collapse** - Emitted when the group collapses back to a single row.\n- **zn-change** - Emitted when the selected thumbnail changes (`selectable` groups only).\n\n### **Methods:**\n - **show()** - Expands the group into the full grid.\n- **hide()** - Collapses the group back to a single row.\n\n### **Slots:**\n - _default_ - One or more `zn-thumbnail` elements.\n- **caption** - Replaces the heading text.\n- **actions** - Extra content in the header, before the toggle.\n\n### **CSS Properties:**\n - **--zn-thumbnail-width** - Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute. _(default: undefined)_\n- **--zn-thumbnail-gap** - Gap between thumbnails. Also settable with the `gap` attribute. _(default: undefined)_\n- **--zn-thumbnail-aspect-ratio** - Aspect ratio of every thumbnail in the group. Also settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is inherited by the slotted thumbnails. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header row holding the caption and toggle.\n- **caption** - The heading text.\n- **toggle** - The show all / show less button.\n- **items** - The scrolling row / expanded grid that holds the thumbnails.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "src",
-              "description": "URL of the preview shell page; forwarded to the frame.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "frame-origin",
-              "description": "Expected origin of the iframe; forwarded to the frame.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "data-uri",
-              "description": "Optional endpoint returning the base hp-preview:config payload.",
+              "name": "caption",
+              "description": "The heading shown at the top left of the group.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "mode",
-              "description": "Which mode the preview renders in. Travels in the theme payload.",
-              "value": { "type": "ThemeEditorMode", "default": "'light'" }
-            },
-            {
-              "name": "device",
-              "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
-              "value": { "type": "ThemeEditorDevice", "default": "'desktop'" }
-            },
-            {
-              "name": "min-height",
-              "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
-              "value": { "type": "number", "default": "480" }
-            },
-            {
-              "name": "debounce",
-              "description": "Debounce in ms between a control change and the push to the preview.",
-              "value": { "type": "number", "default": "150" }
-            },
-            {
-              "name": "action",
-              "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
-              "value": { "type": "string", "default": "''" }
+              "name": "expanded",
+              "description": "Expands the group into the full wrapping grid.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "save-debounce",
-              "description": "Debounce in ms between a control change and the save POST.",
-              "value": { "type": "number", "default": "1000" }
+              "name": "total",
+              "description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "sections",
-              "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`.",
-              "value": { "type": "ThemeEditorSection[]", "default": "[]" }
+              "name": "show-all-label",
+              "description": "Label of the expand toggle. The count is appended in brackets.",
+              "value": { "type": "string", "default": "'Show All'" }
             },
             {
-              "name": "section-layout",
-              "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.",
-              "value": {
-                "type": "'collapsible' | 'tabs'",
-                "default": "'collapsible'"
-              }
+              "name": "show-less-label",
+              "description": "Label of the collapse toggle.",
+              "value": { "type": "string", "default": "'Show Less'" }
             },
             {
-              "name": "sources",
-              "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.",
-              "value": { "type": "ThemeEditorSource[]", "default": "[]" }
+              "name": "hide-toggle",
+              "description": "Never render the toggle, even when the row overflows.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "controls-collapsed",
-              "description": "Collapses the controls column.",
+              "name": "always-toggle",
+              "description": "Always render the toggle, even when every thumbnail already fits on the row.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "standalone",
-              "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+              "name": "selectable",
+              "description": "Manages single selection across the slotted thumbnails.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "controls-caption",
-              "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+              "name": "aspect-ratio",
+              "description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "preview-caption",
-              "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+              "name": "thumbnail-width",
+              "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "submit-label",
-              "description": "Label for the built-in submit button. Empty (default) renders no button.",
+              "name": "gap",
+              "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "manual",
-              "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The `value` of the selected thumbnail (`selectable` groups only).",
+              "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "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": "toolbar",
-              "description": "Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs."
+              "description": "One or more `zn-thumbnail` elements."
             },
+            { "name": "caption", "description": "Replaces the heading text." },
             {
-              "name": "footer",
-              "description": "Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here."
+              "name": "actions",
+              "description": "Extra content in the header, before the toggle."
             }
           ],
           "events": [
             {
-              "name": "zn-theme-change",
-              "description": "Emitted when the values, mode or device change."
+              "name": "zn-expand",
+              "description": "Emitted when the group expands into the full grid."
             },
             {
-              "name": "zn-theme-submit",
-              "description": "Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save."
+              "name": "zn-collapse",
+              "description": "Emitted when the group collapses back to a single row."
             },
             {
-              "name": "zn-error",
-              "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-change",
+              "description": "Emitted when the selected thumbnail changes (`selectable` groups only)."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "src",
-                "description": "URL of the preview shell page; forwarded to the frame.",
-                "type": "string"
-              },
-              {
-                "name": "frameOrigin",
-                "description": "Expected origin of the iframe; forwarded to the frame.",
-                "type": "string"
-              },
-              {
-                "name": "dataUri",
-                "description": "Optional endpoint returning the base hp-preview:config payload.",
+                "name": "caption",
+                "description": "The heading shown at the top left of the group.",
                 "type": "string"
               },
               {
-                "name": "mode",
-                "description": "Which mode the preview renders in. Travels in the theme payload.",
-                "type": "ThemeEditorMode"
-              },
-              {
-                "name": "device",
-                "description": "Preview viewport width. Resizes the frame only; not part of the payload.",
-                "type": "ThemeEditorDevice"
-              },
-              {
-                "name": "minHeight",
-                "description": "Minimum height of the preview row, in pixels; forwarded to the frame as its own floor.",
-                "type": "number"
+                "name": "expanded",
+                "description": "Expands the group into the full wrapping grid.",
+                "type": "boolean"
               },
               {
-                "name": "debounce",
-                "description": "Debounce in ms between a control change and the push to the preview.",
+                "name": "total",
+                "description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
                 "type": "number"
               },
               {
-                "name": "action",
-                "description": "Optional endpoint the values are POSTed to. Empty = no persistence.",
+                "name": "showAllLabel",
+                "description": "Label of the expand toggle. The count is appended in brackets.",
                 "type": "string"
               },
               {
-                "name": "saveDebounce",
-                "description": "Debounce in ms between a control change and the save POST.",
-                "type": "number"
-              },
-              {
-                "name": "sections",
-                "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`.",
-                "type": "ThemeEditorSection[]"
-              },
-              {
-                "name": "sectionLayout",
-                "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.",
-                "type": "'collapsible' | 'tabs'"
+                "name": "showLessLabel",
+                "description": "Label of the collapse toggle.",
+                "type": "string"
               },
               {
-                "name": "sources",
-                "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.",
-                "type": "ThemeEditorSource[]"
+                "name": "hideToggle",
+                "description": "Never render the toggle, even when the row overflows.",
+                "type": "boolean"
               },
               {
-                "name": "controlsCollapsed",
-                "description": "Collapses the controls column.",
+                "name": "alwaysToggle",
+                "description": "Always render the toggle, even when every thumbnail already fits on the row.",
                 "type": "boolean"
               },
               {
-                "name": "standalone",
-                "description": "Presents the editor as its own bordered, rounded panel with a plain preview backdrop, rather than embedded in a dotted canvas.",
+                "name": "selectable",
+                "description": "Manages single selection across the slotted thumbnails.",
                 "type": "boolean"
               },
               {
-                "name": "controlsCaption",
-                "description": "Caption in the controls column's header row. Empty (default) renders no text; the row itself always renders.",
+                "name": "aspectRatio",
+                "description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
                 "type": "string"
               },
               {
-                "name": "previewCaption",
-                "description": "Caption at the left of the toolbar, opposite the device and mode controls. Empty (default) renders no text.",
+                "name": "thumbnailWidth",
+                "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
                 "type": "string"
               },
               {
-                "name": "submitLabel",
-                "description": "Label for the built-in submit button. Empty (default) renders no button.",
+                "name": "gap",
+                "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
                 "type": "string"
               },
               {
-                "name": "manual",
-                "description": "Disables the debounced auto-save; saving then happens only via submit. Preview pushes are unaffected.",
-                "type": "boolean"
-              },
-              { "name": "frame", "type": "ZnPreviewFrame" },
-              {
-                "name": "values",
-                "description": "The current per-mode value sets. Returns copies.",
-                "type": "{ light: Record<string, unknown>; dark: Record<string, unknown> }"
-              },
-              {
-                "name": "activeValues",
-                "description": "The active mode's values - what gets pushed to the preview frame.",
-                "type": "Record<string, unknown>"
+                "name": "value",
+                "description": "The `value` of the selected thumbnail (`selectable` groups only).",
+                "type": "string"
               }
             ],
             "events": [
               {
-                "name": "zn-theme-change",
-                "description": "Emitted when the values, mode or device change."
+                "name": "zn-expand",
+                "description": "Emitted when the group expands into the full grid."
               },
               {
-                "name": "zn-theme-submit",
-                "description": "Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save."
+                "name": "zn-collapse",
+                "description": "Emitted when the group collapses back to a single row."
               },
               {
-                "name": "zn-error",
-                "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-change",
+                "description": "Emitted when the selected thumbnail changes (`selectable` groups only)."
               }
             ]
           }
@@ -11654,18 +12379,44 @@
         },
         {
           "name": "zn-well",
-          "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- **action** - Content displayed on the right hand side of the well.",
           "doc-url": "",
           "attributes": [
             { "name": "icon", "value": { "type": "string", "default": "''" } },
-            { "name": "inline", "value": { "type": "boolean" } }
+            { "name": "inline", "value": { "type": "boolean" } },
+            {
+              "name": "pre",
+              "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "break-long",
+              "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            {
+              "name": "action",
+              "description": "Content displayed on the right hand side of the well."
+            }
           ],
-          "slots": [{ "name": "", "description": "The default slot." }],
           "events": [],
           "js": {
             "properties": [
               { "name": "icon", "type": "string" },
-              { "name": "inline", "type": "boolean" }
+              { "name": "inline", "type": "boolean" },
+              {
+                "name": "pre",
+                "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
+                "type": "boolean"
+              },
+              {
+                "name": "breakLong",
+                "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
+                "type": "boolean"
+              }
             ],
             "events": []
           }