@kubex/zinc 1.1.133 → 1.1.135

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.133",
+  "version": "1.1.135",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **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.",
@@ -105,6 +83,28 @@
             ]
           }
         },
+        {
+          "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",
@@ -1003,121 +1003,6 @@
             ]
           }
         },
-        {
-          "name": "zn-chat-message",
-          "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **attachments** - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **attachments** - The attachments row beneath the message content.\n- **system-card** - The card rendered for system action types.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "sender",
-              "description": "The sender's name, also used for the avatar.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "message",
-              "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "time",
-              "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "avatar",
-              "description": "Overrides the avatar source. Defaults to `sender`.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "action-type",
-              "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
-              "value": { "type": "ChatMessageActionType", "default": "''" }
-            },
-            {
-              "name": "customer-initiated",
-              "description": "Marks the message as initiated by the customer (affects styling and grouping).",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "agent-initiated",
-              "description": "Marks the message as initiated by an agent (affects styling and grouping).",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hide-sender",
-              "description": "Hides the sender's name in the message header.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "The message content. Ignored when the `message` attribute is set."
-            },
-            {
-              "name": "badge",
-              "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip)."
-            },
-            {
-              "name": "attachments",
-              "description": "Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot."
-            },
-            {
-              "name": "edit-dialog-trigger",
-              "description": "Action rendered at the end of the bubble (e.g. a remove icon button)."
-            },
-            {
-              "name": "edit-dialog",
-              "description": "Pass-through for an associated dialog element."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "sender",
-                "description": "The sender's name, also used for the avatar.",
-                "type": "string"
-              },
-              {
-                "name": "message",
-                "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
-                "type": "string"
-              },
-              {
-                "name": "time",
-                "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
-                "type": "string"
-              },
-              {
-                "name": "avatar",
-                "description": "Overrides the avatar source. Defaults to `sender`.",
-                "type": "string"
-              },
-              {
-                "name": "actionType",
-                "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
-                "type": "ChatMessageActionType"
-              },
-              {
-                "name": "customerInitiated",
-                "description": "Marks the message as initiated by the customer (affects styling and grouping).",
-                "type": "boolean"
-              },
-              {
-                "name": "agentInitiated",
-                "description": "Marks the message as initiated by an agent (affects styling and grouping).",
-                "type": "boolean"
-              },
-              {
-                "name": "hideSender",
-                "description": "Hides the sender's name in the message header.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "zn-chart",
           "description": "Chart component powered by Apache ECharts.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1232,68 +1117,114 @@
           }
         },
         {
-          "name": "zn-chat-message-attachment",
-          "description": "A single file or link attachment for a `zn-chat-message` or `zn-content-block`.\nRenders an icon and a label as a link, styled to match the message's attachments row. It is\nintended to be used only inside a `zn-chat-message` or `zn-content-block` and is automatically\nplaced in that component's `attachments` slot.\n---\n\n\n### **Slots:**\n - _default_ - The attachment label. Falls back to the `name` attribute when empty.\n\n### **CSS Parts:**\n - **base** - The attachment link.\n- **icon** - The leading icon.\n- **label** - The attachment label.",
+          "name": "zn-chat-message",
+          "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **attachments** - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **attachments** - The attachments row beneath the message content.\n- **system-card** - The card rendered for system action types.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "href",
-              "description": "The URL the attachment links to.",
+              "name": "sender",
+              "description": "The sender's name, also used for the avatar.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "name",
-              "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
+              "name": "message",
+              "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "icon",
-              "description": "The leading icon name.",
-              "value": { "type": "string", "default": "'paperclip@lu'" }
+              "name": "time",
+              "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "target",
-              "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.",
-              "value": { "type": "string", "default": "'_blank'" }
+              "name": "avatar",
+              "description": "Overrides the avatar source. Defaults to `sender`.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "download",
-              "description": "Prompt a download rather than navigating to the link.",
+              "name": "action-type",
+              "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+              "value": { "type": "ChatMessageActionType", "default": "''" }
+            },
+            {
+              "name": "customer-initiated",
+              "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "agent-initiated",
+              "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-sender",
+              "description": "Hides the sender's name in the message header.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
               "name": "",
-              "description": "The attachment label. Falls back to the `name` attribute when empty."
+              "description": "The message content. Ignored when the `message` attribute is set."
+            },
+            {
+              "name": "badge",
+              "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip)."
+            },
+            {
+              "name": "attachments",
+              "description": "Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot."
+            },
+            {
+              "name": "edit-dialog-trigger",
+              "description": "Action rendered at the end of the bubble (e.g. a remove icon button)."
+            },
+            {
+              "name": "edit-dialog",
+              "description": "Pass-through for an associated dialog element."
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "href",
-                "description": "The URL the attachment links to.",
+                "name": "sender",
+                "description": "The sender's name, also used for the avatar.",
                 "type": "string"
               },
               {
-                "name": "name",
-                "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
+                "name": "message",
+                "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.",
                 "type": "string"
               },
               {
-                "name": "icon",
-                "description": "The leading icon name.",
+                "name": "time",
+                "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).",
                 "type": "string"
               },
               {
-                "name": "target",
-                "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.",
+                "name": "avatar",
+                "description": "Overrides the avatar source. Defaults to `sender`.",
                 "type": "string"
               },
               {
-                "name": "download",
-                "description": "Prompt a download rather than navigating to the link.",
+                "name": "actionType",
+                "description": "The kind of message. Drives system-card rendering, the sending state and badges.",
+                "type": "ChatMessageActionType"
+              },
+              {
+                "name": "customerInitiated",
+                "description": "Marks the message as initiated by the customer (affects styling and grouping).",
+                "type": "boolean"
+              },
+              {
+                "name": "agentInitiated",
+                "description": "Marks the message as initiated by an agent (affects styling and grouping).",
+                "type": "boolean"
+              },
+              {
+                "name": "hideSender",
+                "description": "Hides the sender's name in the message header.",
                 "type": "boolean"
               }
             ],
@@ -1301,7 +1232,76 @@
           }
         },
         {
-          "name": "zn-checkbox",
+          "name": "zn-chat-message-attachment",
+          "description": "A single file or link attachment for a `zn-chat-message` or `zn-content-block`.\nRenders an icon and a label as a link, styled to match the message's attachments row. It is\nintended to be used only inside a `zn-chat-message` or `zn-content-block` and is automatically\nplaced in that component's `attachments` slot.\n---\n\n\n### **Slots:**\n - _default_ - The attachment label. Falls back to the `name` attribute when empty.\n\n### **CSS Parts:**\n - **base** - The attachment link.\n- **icon** - The leading icon.\n- **label** - The attachment label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "The URL the attachment links to.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "icon",
+              "description": "The leading icon name.",
+              "value": { "type": "string", "default": "'paperclip@lu'" }
+            },
+            {
+              "name": "target",
+              "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.",
+              "value": { "type": "string", "default": "'_blank'" }
+            },
+            {
+              "name": "download",
+              "description": "Prompt a download rather than navigating to the link.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The attachment label. Falls back to the `name` attribute when empty."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "The URL the attachment links to.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "The leading icon name.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.",
+                "type": "string"
+              },
+              {
+                "name": "download",
+                "description": "Prompt a download rather than navigating to the link.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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- **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": [
@@ -2515,6 +2515,11 @@
             {
               "name": "conditional",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "requires",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. Forwarded to the underlying select.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -2642,6 +2647,11 @@
               { "name": "selectFirst", "type": "boolean" },
               { "name": "distinct", "type": "string" },
               { "name": "conditional", "type": "string" },
+              {
+                "name": "requires",
+                "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. Forwarded to the underlying select.",
+                "type": "string"
+              },
               { "name": "validationMessage" },
               { "name": "validity", "type": "ValidityState" },
               { "name": "closeOnTab" },
@@ -4977,6 +4987,11 @@
               "name": "conditional",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "requires",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated.",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "disabled", "value": { "type": "boolean" } },
             { "name": "inline", "value": { "type": "boolean" } },
             { "name": "padded", "value": { "type": "boolean" } },
@@ -5111,6 +5126,11 @@
                 "type": "boolean"
               },
               { "name": "conditional", "type": "string" },
+              {
+                "name": "requires",
+                "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated.",
+                "type": "string"
+              },
               { "name": "disabled", "type": "boolean" },
               { "name": "inline", "type": "boolean" },
               { "name": "padded", "type": "boolean" },
@@ -7300,588 +7320,588 @@
           }
         },
         {
-          "name": "zn-popup",
-          "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 - **reposition()** - Forces the popup to recalculate and reposition itself.\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-preview-frame",
+          "description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "anchor",
-              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
-              "value": { "type": "Element | string | VirtualElement" }
-            },
-            {
-              "name": "active",
-              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-                "default": "'top'"
-              }
-            },
-            {
-              "name": "strategy",
-              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-              "value": { "type": "'absolute' | 'fixed'", "default": "'fixed'" }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "arrow",
-              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "arrow-placement",
-              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-              "value": {
-                "type": "'start' | 'end' | 'center' | 'anchor'",
-                "default": "'anchor'"
-              }
-            },
-            {
-              "name": "arrow-padding",
-              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
-              "value": { "type": "number", "default": "10" }
-            },
-            {
-              "name": "flip",
-              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "flip-fallback-placements",
-              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
+              "name": "src",
+              "description": "URL of the preview shell page (tokened embed URL).",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "flip-fallback-strategy",
-              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
-              "value": {
-                "type": "'best-fit' | 'initial'",
-                "default": "'best-fit'"
-              }
+              "name": "frame-origin",
+              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "flipBoundary",
-              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "value": { "type": "Element | Element[]" }
+              "name": "data-uri",
+              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "flip-padding",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "value": { "type": "number", "default": "0" }
+              "name": "watch",
+              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+              "value": { "type": "string", "default": "'form[data-auto-save]'" }
             },
             {
-              "name": "shift",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "refresh-on",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
+              "value": { "type": "string", "default": "'form'" }
             },
             {
-              "name": "shiftBoundary",
-              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "value": { "type": "Element | Element[]" }
+              "name": "debounce",
+              "description": "Debounce in ms between a form change and its auto-save.",
+              "value": { "type": "number", "default": "400" }
             },
             {
-              "name": "shift-padding",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "value": { "type": "number", "default": "0" }
+              "name": "zoom",
+              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
+              "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "auto-size",
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "value": { "type": "'horizontal' | 'vertical' | 'both'" }
+              "name": "min-height",
+              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
+              "value": { "type": "number", "default": "480" }
             },
             {
-              "name": "sync",
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "value": { "type": "'width' | 'height' | 'both'" }
+              "name": "fill",
+              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "autoSizeBoundary",
-              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-              "value": { "type": "Element | Element[]" }
+              "name": "device",
+              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+              "value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
             },
             {
-              "name": "auto-size-padding",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "value": { "type": "number", "default": "0" }
+              "name": "backdrop",
+              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+              "value": { "type": "'dots' | 'panel'", "default": "'dots'" }
             },
             {
-              "name": "hover-bridge",
-              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+              "name": "interactive",
+              "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
           "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
+            {
+              "name": "zn-error",
+              "description": "Emitted when the preview reports a render error or a save fails."
+            }
           ],
           "js": {
             "properties": [
               {
-                "name": "popup",
-                "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
-                "type": "HTMLElement"
+                "name": "src",
+                "description": "URL of the preview shell page (tokened embed URL).",
+                "type": "string"
               },
               {
-                "name": "anchor",
-                "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
-                "type": "Element | string | VirtualElement"
+                "name": "frameOrigin",
+                "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+                "type": "string"
               },
               {
-                "name": "active",
-                "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
-                "type": "boolean"
+                "name": "dataUri",
+                "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+                "type": "string"
               },
               {
-                "name": "placement",
-                "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "name": "watch",
+                "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+                "type": "string"
               },
               {
-                "name": "strategy",
-                "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
-                "type": "'absolute' | 'fixed'"
+                "name": "refreshOn",
+                "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
+                "type": "string"
               },
               {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its anchor.",
+                "name": "debounce",
+                "description": "Debounce in ms between a form change and its auto-save.",
                 "type": "number"
               },
               {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its anchor.",
-                "type": "number"
-              },
-              {
-                "name": "arrow",
-                "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
-                "type": "boolean"
-              },
-              {
-                "name": "arrowPlacement",
-                "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
-                "type": "'start' | 'end' | 'center' | 'anchor'"
-              },
-              {
-                "name": "arrowPadding",
-                "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+                "name": "zoom",
+                "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
                 "type": "number"
               },
               {
-                "name": "flip",
-                "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
-                "type": "boolean"
-              },
-              {
-                "name": "flipFallbackPlacements",
-                "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
-                "type": "string"
-              },
-              {
-                "name": "flipFallbackStrategy",
-                "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
-                "type": "'best-fit' | 'initial'"
-              },
-              {
-                "name": "flipBoundary",
-                "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
-              },
-              {
-                "name": "flipPadding",
-                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+                "name": "minHeight",
+                "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
                 "type": "number"
               },
               {
-                "name": "shift",
-                "description": "Moves the popup along the axis to keep it in view when clipped.",
+                "name": "fill",
+                "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
                 "type": "boolean"
               },
               {
-                "name": "shiftBoundary",
-                "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
-              },
-              {
-                "name": "shiftPadding",
-                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-                "type": "number"
-              },
-              {
-                "name": "autoSize",
-                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-                "type": "'horizontal' | 'vertical' | 'both'"
-              },
-              {
-                "name": "sync",
-                "description": "Syncs the popup's width or height to that of the anchor element.",
-                "type": "'width' | 'height' | 'both'"
-              },
-              {
-                "name": "autoSizeBoundary",
-                "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
-                "type": "Element | Element[]"
+                "name": "device",
+                "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+                "type": "PreviewFrameDevice"
               },
               {
-                "name": "autoSizePadding",
-                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-                "type": "number"
+                "name": "backdrop",
+                "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+                "type": "'dots' | 'panel'"
               },
               {
-                "name": "hoverBridge",
-                "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+                "name": "interactive",
+                "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
                 "type": "boolean"
               },
-              { "name": "handleAnchorHover" }
+              { "name": "frame", "type": "HTMLIFrameElement" }
             ],
             "events": [
               {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
+                "name": "zn-error",
+                "description": "Emitted when the preview reports a render error or a save fails."
               }
             ]
           }
         },
         {
-          "name": "zn-preview-frame",
-          "description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
+          "name": "zn-priority-list",
+          "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-actions-gap** - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "src",
-              "description": "URL of the preview shell page (tokened embed URL).",
+              "name": "name",
+              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "frame-origin",
-              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "name": "value",
+              "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
+              "value": { "type": "string[]" }
+            },
+            {
+              "name": "label",
+              "description": "The component's label. Required for proper accessibility.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "data-uri",
-              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "name": "label-tooltip",
+              "description": "Text that appears in a tooltip next to the label.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "watch",
-              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
-              "value": { "type": "string", "default": "'form[data-auto-save]'" }
+              "name": "help-text",
+              "description": "Help text that describes how to use the component.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "refresh-on",
-              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
-              "value": { "type": "string", "default": "'form'" }
+              "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": "debounce",
-              "description": "Debounce in ms between a form change and its auto-save.",
-              "value": { "type": "number", "default": "400" }
+              "name": "size",
+              "description": "The size of the list items.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
             },
             {
-              "name": "zoom",
-              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
+              "name": "disabled",
+              "description": "Whether the priority list is disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures the form control has a value before allowing submission.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "priority-start",
+              "description": "The starting priority number. Defaults to 1.",
               "value": { "type": "number", "default": "1" }
             },
             {
-              "name": "min-height",
-              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
-              "value": { "type": "number", "default": "480" }
+              "name": "formaction",
+              "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
+              "value": { "type": "string" }
             },
             {
-              "name": "fill",
-              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "order",
+              "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
             },
             {
-              "name": "device",
-              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
-              "value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
+              "name": "label",
+              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
             },
             {
-              "name": "backdrop",
-              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
-              "value": { "type": "'dots' | 'panel'", "default": "'dots'" }
+              "name": "label-tooltip",
+              "description": "Used to add text displayed in a tooltip next to the label."
             },
             {
-              "name": "interactive",
-              "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "help-text",
+              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
             }
           ],
           "events": [
             {
-              "name": "zn-error",
-              "description": "Emitted when the preview reports a render error or a save fails."
+              "name": "zn-change",
+              "description": "Emitted when the order of items changes."
+            },
+            {
+              "name": "zn-reorder",
+              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
             }
           ],
           "js": {
             "properties": [
+              { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
               {
-                "name": "src",
-                "description": "URL of the preview shell page (tokened embed URL).",
+                "name": "name",
+                "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
                 "type": "string"
               },
               {
-                "name": "frameOrigin",
-                "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
-                "type": "string"
+                "name": "value",
+                "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
+                "type": "string[]"
               },
+              { "name": "defaultValue", "type": "string[]" },
               {
-                "name": "dataUri",
-                "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+                "name": "label",
+                "description": "The component's label. Required for proper accessibility.",
                 "type": "string"
               },
               {
-                "name": "watch",
-                "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+                "name": "labelTooltip",
+                "description": "Text that appears in a tooltip next to the label.",
                 "type": "string"
               },
               {
-                "name": "refreshOn",
-                "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
+                "name": "helpText",
+                "description": "Help text that describes how to use the component.",
                 "type": "string"
               },
               {
-                "name": "debounce",
-                "description": "Debounce in ms between a form change and its auto-save.",
-                "type": "number"
+                "name": "form",
+                "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+                "type": "string"
               },
               {
-                "name": "zoom",
-                "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
-                "type": "number"
+                "name": "size",
+                "description": "The size of the list items.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "minHeight",
-                "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
-                "type": "number"
+                "name": "disabled",
+                "description": "Whether the priority list is disabled.",
+                "type": "boolean"
               },
               {
-                "name": "fill",
-                "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+                "name": "required",
+                "description": "Ensures the form control has a value before allowing submission.",
                 "type": "boolean"
               },
               {
-                "name": "device",
-                "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
-                "type": "PreviewFrameDevice"
+                "name": "priorityStart",
+                "description": "The starting priority number. Defaults to 1.",
+                "type": "number"
               },
               {
-                "name": "backdrop",
-                "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
-                "type": "'dots' | 'panel'"
+                "name": "formAction",
+                "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
+                "type": "string"
               },
               {
-                "name": "interactive",
-                "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
-                "type": "boolean"
+                "name": "order",
+                "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
+                "type": "string"
               },
-              { "name": "frame", "type": "HTMLIFrameElement" }
+              {
+                "name": "validity",
+                "description": "Gets the validity state object.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message.",
+                "type": "string"
+              }
             ],
             "events": [
               {
-                "name": "zn-error",
-                "description": "Emitted when the preview reports a render error or a save fails."
+                "name": "zn-change",
+                "description": "Emitted when the order of items changes."
+              },
+              {
+                "name": "zn-reorder",
+                "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
               }
             ]
           }
         },
         {
-          "name": "zn-priority-list",
-          "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-actions-gap** - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
+          "name": "zn-popup",
+          "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 - **reposition()** - Forces the popup to recalculate and reposition itself.\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": "name",
-              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
-              "value": { "type": "string", "default": "''" }
+              "name": "anchor",
+              "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+              "value": { "type": "Element | string | VirtualElement" }
+            },
+            {
+              "name": "active",
+              "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "value": {
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                "default": "'top'"
+              }
+            },
+            {
+              "name": "strategy",
+              "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+              "value": { "type": "'absolute' | 'fixed'", "default": "'fixed'" }
+            },
+            {
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "value",
-              "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
-              "value": { "type": "string[]" }
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "label",
-              "description": "The component's label. Required for proper accessibility.",
-              "value": { "type": "string", "default": "''" }
+              "name": "arrow",
+              "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label-tooltip",
-              "description": "Text that appears in a tooltip next to the label.",
-              "value": { "type": "string", "default": "''" }
+              "name": "arrow-placement",
+              "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+              "value": {
+                "type": "'start' | 'end' | 'center' | 'anchor'",
+                "default": "'anchor'"
+              }
             },
             {
-              "name": "help-text",
-              "description": "Help text that describes how to use the component.",
-              "value": { "type": "string", "default": "''" }
+              "name": "arrow-padding",
+              "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
+              "value": { "type": "number", "default": "10" }
             },
             {
-              "name": "form",
-              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+              "name": "flip",
+              "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flip-fallback-placements",
+              "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "size",
-              "description": "The size of the list items.",
+              "name": "flip-fallback-strategy",
+              "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'best-fit' | 'initial'",
+                "default": "'best-fit'"
               }
             },
             {
-              "name": "disabled",
-              "description": "Whether the priority list is disabled.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "flipBoundary",
+              "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "required",
-              "description": "Ensures the form control has a value before allowing submission.",
+              "name": "flip-padding",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "shift",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "priority-start",
-              "description": "The starting priority number. Defaults to 1.",
-              "value": { "type": "number", "default": "1" }
+              "name": "shiftBoundary",
+              "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "formaction",
-              "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
-              "value": { "type": "string" }
+              "name": "shift-padding",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "order",
-              "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
+              "name": "auto-size",
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "value": { "type": "'horizontal' | 'vertical' | 'both'" }
+            },
             {
-              "name": "",
-              "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
+              "name": "sync",
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "value": { "type": "'width' | 'height' | 'both'" }
             },
             {
-              "name": "label",
-              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
+              "name": "autoSizeBoundary",
+              "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+              "value": { "type": "Element | Element[]" }
             },
             {
-              "name": "label-tooltip",
-              "description": "Used to add text displayed in a tooltip next to the label."
+              "name": "auto-size-padding",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
+              "name": "hover-bridge",
+              "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
           "events": [
-            {
-              "name": "zn-change",
-              "description": "Emitted when the order of items changes."
-            },
-            {
-              "name": "zn-reorder",
-              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
-            }
+            { "name": "zn-event-name", "description": "Emitted as an example." }
           ],
           "js": {
             "properties": [
-              { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
               {
-                "name": "name",
-                "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
-                "type": "string"
+                "name": "popup",
+                "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
+                "type": "HTMLElement"
               },
               {
-                "name": "value",
-                "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
-                "type": "string[]"
+                "name": "anchor",
+                "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
+                "type": "Element | string | VirtualElement"
               },
-              { "name": "defaultValue", "type": "string[]" },
               {
-                "name": "label",
-                "description": "The component's label. Required for proper accessibility.",
-                "type": "string"
+                "name": "active",
+                "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
+                "type": "boolean"
               },
               {
-                "name": "labelTooltip",
-                "description": "Text that appears in a tooltip next to the label.",
-                "type": "string"
+                "name": "placement",
+                "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
               {
-                "name": "helpText",
-                "description": "Help text that describes how to use the component.",
-                "type": "string"
+                "name": "strategy",
+                "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
+                "type": "'absolute' | 'fixed'"
               },
               {
-                "name": "form",
-                "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
-                "type": "string"
+                "name": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its anchor.",
+                "type": "number"
               },
               {
-                "name": "size",
-                "description": "The size of the list items.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its anchor.",
+                "type": "number"
               },
               {
-                "name": "disabled",
-                "description": "Whether the priority list is disabled.",
+                "name": "arrow",
+                "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
                 "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Ensures the form control has a value before allowing submission.",
-                "type": "boolean"
+                "name": "arrowPlacement",
+                "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
+                "type": "'start' | 'end' | 'center' | 'anchor'"
               },
               {
-                "name": "priorityStart",
-                "description": "The starting priority number. Defaults to 1.",
+                "name": "arrowPadding",
+                "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
                 "type": "number"
               },
               {
-                "name": "formAction",
-                "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
-                "type": "string"
+                "name": "flip",
+                "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
+                "type": "boolean"
               },
               {
-                "name": "order",
-                "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
+                "name": "flipFallbackPlacements",
+                "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
                 "type": "string"
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object.",
-                "type": "ValidityState"
+                "name": "flipFallbackStrategy",
+                "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
+                "type": "'best-fit' | 'initial'"
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message.",
-                "type": "string"
-              }
-            ],
-            "events": [
+                "name": "flipBoundary",
+                "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
               {
-                "name": "zn-change",
-                "description": "Emitted when the order of items changes."
+                "name": "flipPadding",
+                "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+                "type": "number"
               },
               {
-                "name": "zn-reorder",
-                "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
+                "name": "shift",
+                "description": "Moves the popup along the axis to keep it in view when clipped.",
+                "type": "boolean"
+              },
+              {
+                "name": "shiftBoundary",
+                "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
+              {
+                "name": "shiftPadding",
+                "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+                "type": "number"
+              },
+              {
+                "name": "autoSize",
+                "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+                "type": "'horizontal' | 'vertical' | 'both'"
+              },
+              {
+                "name": "sync",
+                "description": "Syncs the popup's width or height to that of the anchor element.",
+                "type": "'width' | 'height' | 'both'"
+              },
+              {
+                "name": "autoSizeBoundary",
+                "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
+                "type": "Element | Element[]"
+              },
+              {
+                "name": "autoSizePadding",
+                "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+                "type": "number"
+              },
+              {
+                "name": "hoverBridge",
+                "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
+                "type": "boolean"
+              },
+              { "name": "handleAnchorHover" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
               }
             ]
           }
@@ -9196,6 +9216,11 @@
               "name": "conditional",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "requires",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. The control stays disabled until every one of them\nis filled, and is disabled again if any is cleared.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "data-uri",
               "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",
@@ -9450,6 +9475,11 @@
               },
               { "name": "distinct", "type": "string" },
               { "name": "conditional", "type": "string" },
+              {
+                "name": "requires",
+                "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. The control stays disabled until every one of them\nis filled, and is disabled again if any is cleared.",
+                "type": "string"
+              },
               {
                 "name": "dataUri",
                 "description": "The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `<zn-option>` elements.",