npm - @kubex/zinc - Versions diffs - 1.1.134 → 1.1.135 - Mend

@kubex/zinc 1.1.134 → 1.1.135

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/custom-elements.json +1065 -1008
package/dist/vscode.html-custom-data.json +175 -160
package/dist/web-types.json +384 -354
package/dist/zn.d.ts +25 -1
package/dist/zn.min.js +228 -227
package/package.json +1 -1
package/src/components/data-select/data-select.component.ts +7 -0
package/src/components/inline-edit/inline-edit.component.ts +6 -0
package/src/components/select/select.component.ts +16 -2
package/src/components/select/select.test.ts +103 -0
package/src/internal/conditional.ts +53 -35

package/dist/custom-elements.json CHANGED Viewed

@@ -56,79 +56,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -323,6 +250,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -8182,6 +8182,16 @@
               "default": "\"\"",
               "attribute": "conditional"
             },
+            {
+              "kind": "field",
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. Forwarded to the underlying select.",
+              "attribute": "requires"
+            },
             {
               "kind": "field",
               "name": "formControlController",
@@ -8523,6 +8533,15 @@
               },
               "default": "\"\"",
               "fieldName": "conditional"
+            },
+            {
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated. Forwarded to the underlying select.",
+              "fieldName": "requires"
             }
           ],
           "superclass": {
@@ -19782,6 +19801,16 @@
               "default": "''",
               "attribute": "conditional"
             },
+            {
+              "kind": "field",
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated.",
+              "attribute": "requires"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -20325,6 +20354,15 @@
               "default": "''",
               "fieldName": "conditional"
             },
+            {
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Ids or names of controls that must have a value before this one becomes\nusable, comma separated.",
+              "fieldName": "requires"
+            },
             {
               "name": "disabled",
               "type": {
@@ -31372,535 +31410,502 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/popup/popup.js",
+      "path": "components/preview-frame/preview-frame.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ZnPopup",
+          "name": "ZnPreviewFrame",
           "cssProperties": [
             {
-              "description": "An example CSS custom property.",
-              "name": "--example"
+              "description": "Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.",
+              "name": "--zn-preview-frame-dot-spacing"
+            },
+            {
+              "description": "Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.",
+              "name": "--zn-preview-frame-dot-opacity"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            }
-          ],
-          "slots": [
+            },
             {
-              "description": "The default slot.",
-              "name": ""
+              "description": "The device-width wrapper around the iframe.",
+              "name": "stage"
             },
             {
-              "description": "An example slot.",
-              "name": "example"
+              "description": "The preview iframe.",
+              "name": "iframe"
+            },
+            {
+              "description": "The error overlay.",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "anchorEl",
-              "type": {
-                "text": "Element | VirtualElement | null"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "cleanup",
-              "type": {
-                "text": "ReturnType<typeof autoUpdate> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "popup",
+              "name": "src",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
+              "default": "''",
+              "description": "URL of the preview shell page (tokened embed URL).",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "arrowEl",
+              "name": "frameOrigin",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "attribute": "frame-origin"
             },
             {
               "kind": "field",
-              "name": "anchor",
+              "name": "dataUri",
               "type": {
-                "text": "Element | string | VirtualElement"
+                "text": "string"
               },
-              "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.",
-              "attribute": "anchor"
+              "default": "''",
+              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "attribute": "data-uri"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "watch",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "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.",
-              "attribute": "active",
-              "reflects": true
+              "default": "'form[data-auto-save]'",
+              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+              "attribute": "watch"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "refreshOn",
               "type": {
-                "text": "| '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'"
+                "text": "string"
               },
-              "default": "'top'",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
+              "default": "'form'",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\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.",
+              "attribute": "refresh-on"
             },
             {
               "kind": "field",
-              "name": "strategy",
+              "name": "debounce",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "number"
               },
-              "default": "'fixed'",
-              "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.",
-              "attribute": "strategy",
-              "reflects": true
+              "default": "400",
+              "description": "Debounce in ms between a form change and its auto-save.",
+              "attribute": "debounce"
             },
             {
               "kind": "field",
-              "name": "distance",
+              "name": "zoom",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "attribute": "distance"
+              "default": "1",
+              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
+              "attribute": "zoom"
             },
             {
               "kind": "field",
-              "name": "skidding",
+              "name": "minHeight",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "attribute": "skidding"
+              "default": "480",
+              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
+              "attribute": "min-height"
             },
             {
               "kind": "field",
-              "name": "arrow",
+              "name": "fill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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.",
-              "attribute": "arrow"
+              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+              "attribute": "fill"
             },
             {
               "kind": "field",
-              "name": "arrowPlacement",
+              "name": "device",
               "type": {
-                "text": "'start' | 'end' | 'center' | 'anchor'"
+                "text": "PreviewFrameDevice"
               },
-              "default": "'anchor'",
-              "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.",
-              "attribute": "arrow-placement"
+              "default": "'desktop'",
+              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+              "attribute": "device",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "arrowPadding",
+              "name": "backdrop",
               "type": {
-                "text": "number"
+                "text": "'dots' | 'panel'"
               },
-              "default": "10",
-              "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.",
-              "attribute": "arrow-padding"
+              "default": "'dots'",
+              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+              "attribute": "backdrop",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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.",
-              "attribute": "flip"
+              "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.",
+              "attribute": "interactive",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "flipFallbackPlacements",
+              "name": "frame",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "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.",
-              "attribute": "flip-fallback-placements"
+                "text": "HTMLIFrameElement"
+              }
             },
             {
               "kind": "field",
-              "name": "flipFallbackStrategy",
+              "name": "error",
               "type": {
-                "text": "'best-fit' | 'initial'"
+                "text": "string"
               },
-              "default": "'best-fit'",
-              "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.",
-              "attribute": "flip-fallback-strategy"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "flipBoundary",
+              "name": "_contentHeight",
               "type": {
-                "text": "Element | Element[]"
+                "text": "number"
               },
-              "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.",
-              "attribute": "flipBoundary"
+              "privacy": "private",
+              "default": "0",
+              "description": "Height of the embedded page's content, when it's known: reported by the\nembed (`height` on hp-preview:rendered, or an hp-preview:height message) or\nmeasured directly for a same-origin embed. The frame is laid out at this\nheight rather than the panel's, so the page never scrolls inside the frame\n— the panel scrolls instead, which is what makes an overflowing preview\nreachable while pointer input to the frame is blocked. 0 = unknown, and the\nframe falls back to filling the panel. Kept up to date either way, but only\nlaid out when the frame is inert: an `interactive` frame scrolls itself."
             },
             {
               "kind": "field",
-              "name": "flipPadding",
+              "name": "_generation",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "attribute": "flip-padding"
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "shift",
+              "name": "_theme",
               "type": {
-                "text": "boolean"
+                "text": "Record<string, unknown> | undefined"
               },
-              "default": "false",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
-              "attribute": "shift"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "shiftBoundary",
+              "name": "_contentObserver",
               "type": {
-                "text": "Element | Element[]"
+                "text": "ResizeObserver | undefined"
               },
-              "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.",
-              "attribute": "shiftBoundary"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "shiftPadding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "attribute": "shift-padding"
+              "name": "_watchedForms",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<HTMLFormElement>()"
             },
             {
               "kind": "field",
-              "name": "autoSize",
-              "type": {
-                "text": "'horizontal' | 'vertical' | 'both'"
-              },
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "attribute": "auto-size"
+              "name": "_debounceTimers",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<HTMLFormElement, number>()"
             },
             {
               "kind": "field",
-              "name": "sync",
+              "name": "_shellSaveRoots",
               "type": {
-                "text": "'width' | 'height' | 'both'"
+                "text": "EventTarget[]"
               },
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "attribute": "sync"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "autoSizeBoundary",
+              "name": "_lastShellSave",
               "type": {
-                "text": "Element | Element[]"
+                "text": "Event | undefined"
               },
-              "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.",
-              "attribute": "autoSizeBoundary"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "autoSizePadding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "attribute": "auto-size-padding"
+              "name": "_formObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationController(this, { target: null, config: {subtree: true, childList: true}, callback: () => this._attachForms(), })"
             },
             {
               "kind": "field",
-              "name": "hoverBridge",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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.",
-              "attribute": "hover-bridge"
+              "name": "_onMessage",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "handleAnchorChange",
+              "name": "_applyContentHeight",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "height",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_resetContentHeight",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleAnchorHover",
-              "privacy": "public"
+              "name": "_onFrameLoad",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "start",
-              "privacy": "private"
+              "name": "refresh",
+              "description": "Re-fetches the payload and pushes a fresh config to the preview."
             },
             {
               "kind": "method",
-              "name": "stop",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
+              "name": "setTheme",
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "Record<string, unknown>"
+                  }
                 }
-              }
+              ],
+              "description": "Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme."
             },
             {
               "kind": "method",
-              "name": "reposition",
-              "description": "Forces the popup to recalculate and reposition itself."
+              "name": "_postTheme",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "updateHoverBridge",
+              "kind": "method",
+              "name": "_sendConfig",
               "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "anchor",
-              "type": {
-                "text": "Element | string | VirtualElement"
-              },
-              "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.",
-              "fieldName": "anchor"
+              "kind": "method",
+              "name": "_attachForms",
+              "privacy": "private"
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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.",
-              "fieldName": "active"
+              "kind": "field",
+              "name": "_onShellSave",
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "| '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'",
-              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
-              "fieldName": "placement"
+              "kind": "method",
+              "name": "_detachForm",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
             },
             {
-              "name": "strategy",
-              "type": {
-                "text": "'absolute' | 'fixed'"
-              },
-              "default": "'fixed'",
-              "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.",
-              "fieldName": "strategy"
+              "kind": "field",
+              "name": "_onChange",
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its anchor.",
-              "fieldName": "distance"
+              "kind": "field",
+              "name": "_onSubmit",
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its anchor.",
-              "fieldName": "skidding"
+              "kind": "method",
+              "name": "_save",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "form",
+                  "type": {
+                    "text": "HTMLFormElement"
+                  }
+                }
+              ]
             },
             {
-              "name": "arrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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.",
-              "fieldName": "arrow"
-            },
+              "kind": "method",
+              "name": "_fail",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
             {
-              "name": "arrow-placement",
-              "type": {
-                "text": "'start' | 'end' | 'center' | 'anchor'"
-              },
-              "default": "'anchor'",
-              "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.",
-              "fieldName": "arrowPlacement"
-            },
+              "description": "Emitted when the preview reports a render error or a save fails.",
+              "name": "zn-error"
+            }
+          ],
+          "attributes": [
             {
-              "name": "arrow-padding",
+              "name": "src",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "10",
-              "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.",
-              "fieldName": "arrowPadding"
+              "default": "''",
+              "description": "URL of the preview shell page (tokened embed URL).",
+              "fieldName": "src"
             },
             {
-              "name": "flip",
+              "name": "frame-origin",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "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.",
-              "fieldName": "flip"
+              "default": "''",
+              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
+              "fieldName": "frameOrigin"
             },
             {
-              "name": "flip-fallback-placements",
+              "name": "data-uri",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "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.",
-              "fieldName": "flipFallbackPlacements"
+              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
+              "fieldName": "dataUri"
             },
             {
-              "name": "flip-fallback-strategy",
+              "name": "watch",
               "type": {
-                "text": "'best-fit' | 'initial'"
+                "text": "string"
               },
-              "default": "'best-fit'",
-              "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.",
-              "fieldName": "flipFallbackStrategy"
+              "default": "'form[data-auto-save]'",
+              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
+              "fieldName": "watch"
             },
             {
-              "name": "flipBoundary",
+              "name": "refresh-on",
               "type": {
-                "text": "Element | Element[]"
+                "text": "string"
               },
-              "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.",
-              "fieldName": "flipBoundary"
+              "default": "'form'",
+              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\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.",
+              "fieldName": "refreshOn"
             },
             {
-              "name": "flip-padding",
+              "name": "debounce",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
-              "fieldName": "flipPadding"
-            },
-            {
-              "name": "shift",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Moves the popup along the axis to keep it in view when clipped.",
-              "fieldName": "shift"
-            },
-            {
-              "name": "shiftBoundary",
-              "type": {
-                "text": "Element | Element[]"
-              },
-              "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.",
-              "fieldName": "shiftBoundary"
+              "default": "400",
+              "description": "Debounce in ms between a form change and its auto-save.",
+              "fieldName": "debounce"
             },
             {
-              "name": "shift-padding",
+              "name": "zoom",
               "type": {
                 "text": "number"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
-              "fieldName": "shiftPadding"
+              "default": "1",
+              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
+              "fieldName": "zoom"
             },
             {
-              "name": "auto-size",
+              "name": "min-height",
               "type": {
-                "text": "'horizontal' | 'vertical' | 'both'"
+                "text": "number"
               },
-              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
-              "fieldName": "autoSize"
+              "default": "480",
+              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
+              "fieldName": "minHeight"
             },
             {
-              "name": "sync",
+              "name": "fill",
               "type": {
-                "text": "'width' | 'height' | 'both'"
+                "text": "boolean"
               },
-              "description": "Syncs the popup's width or height to that of the anchor element.",
-              "fieldName": "sync"
+              "default": "false",
+              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
+              "fieldName": "fill"
             },
             {
-              "name": "autoSizeBoundary",
+              "name": "device",
               "type": {
-                "text": "Element | Element[]"
+                "text": "PreviewFrameDevice"
               },
-              "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.",
-              "fieldName": "autoSizeBoundary"
+              "default": "'desktop'",
+              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
+              "fieldName": "device"
             },
             {
-              "name": "auto-size-padding",
+              "name": "backdrop",
               "type": {
-                "text": "number"
+                "text": "'dots' | 'panel'"
               },
-              "default": "0",
-              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
-              "fieldName": "autoSizePadding"
+              "default": "'dots'",
+              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
+              "fieldName": "backdrop"
             },
             {
-              "name": "hover-bridge",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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.",
-              "fieldName": "hoverBridge"
+              "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.",
+              "fieldName": "interactive"
             }
           ],
           "superclass": {
             "name": "ZincElement",
             "module": "/src/internal/zinc-element"
           },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "popup",
-          "tagName": "zn-popup",
+          "summary": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\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.",
+          "tagNameWithoutPrefix": "preview-frame",
+          "tagName": "zn-preview-frame",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/popup\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/popup",
+          "jsDoc": "/**\n * @summary Embeds a live preview iframe and drives the hp-preview postMessage\n * protocol: answers the frame's ready handshake with a config payload fetched\n * from data-uri, auto-saves watched forms on change, refreshes the preview\n * after each save (its own, or a shell-driven save of a `refresh-on` form),\n * accepts a theme payload via setTheme() that is retained and replayed\n * after every ready handshake, and grows the frame to a content height the\n * embed reports so the panel scrolls an overflowing page.\n *\n * @documentation https://zinc.style/components/preview-frame\n * @status experimental\n * @since 1.0\n *\n * @event zn-error - Emitted when the preview reports a render error or a save fails.\n *\n * @csspart base - The component's base wrapper.\n * @csspart stage - The device-width wrapper around the iframe.\n * @csspart iframe - The preview iframe.\n * @csspart error - The error overlay.\n *\n * @cssproperty --zn-preview-frame-dot-spacing - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.\n * @cssproperty --zn-preview-frame-dot-opacity - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.\n */",
+          "documentation": "https://zinc.style/components/preview-frame",
           "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
+          "since": "1.0"
         }
       ],
       "exports": [
@@ -31908,510 +31913,652 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ZnPopup",
-            "module": "components/popup/popup.js"
+            "name": "ZnPreviewFrame",
+            "module": "components/preview-frame/preview-frame.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/preview-frame/preview-frame.js",
+      "path": "components/priority-list/priority-list.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ZnPreviewFrame",
+          "name": "ZnPriorityList",
           "cssProperties": [
             {
-              "description": "Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.",
-              "name": "--zn-preview-frame-dot-spacing"
+              "description": "The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.",
+              "name": "--zn-priority-list-item-gap"
             },
             {
-              "description": "Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.",
-              "name": "--zn-preview-frame-dot-opacity"
+              "description": "The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.",
+              "name": "--zn-priority-list-item-padding"
+            },
+            {
+              "description": "The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`.",
+              "name": "--zn-priority-list-actions-gap"
+            },
+            {
+              "description": "The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.",
+              "name": "--zn-priority-list-handle-color"
+            },
+            {
+              "description": "The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.",
+              "name": "--zn-priority-list-priority-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The form control wrapper.",
+              "name": "form-control"
             },
             {
-              "description": "The device-width wrapper around the iframe.",
-              "name": "stage"
+              "description": "The label wrapper.",
+              "name": "form-control-label"
             },
             {
-              "description": "The preview iframe.",
-              "name": "iframe"
+              "description": "The input area wrapper.",
+              "name": "form-control-input"
             },
             {
-              "description": "The error overlay.",
-              "name": "error"
+              "description": "The help text wrapper.",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The list container.",
+              "name": "list"
+            },
+            {
+              "description": "An individual list item row.",
+              "name": "item"
+            },
+            {
+              "description": "The drag handle icon.",
+              "name": "drag-handle"
+            },
+            {
+              "description": "The priority number badge.",
+              "name": "priority"
+            },
+            {
+              "description": "The content area of an item.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "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": ""
+            },
+            {
+              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.",
+              "name": "label"
+            },
+            {
+              "description": "Used to add text displayed in a tooltip next to the label.",
+              "name": "label-tooltip"
+            },
+            {
+              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "src",
+              "name": "dependencies",
               "type": {
-                "text": "string"
+                "text": "object"
               },
-              "default": "''",
-              "description": "URL of the preview shell page (tokened embed URL).",
-              "attribute": "src"
+              "static": true,
+              "default": "{ 'zn-icon': ZnIcon, }"
             },
             {
               "kind": "field",
-              "name": "frameOrigin",
+              "name": "formControlController",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FormControlController(this, { value: (control: ZnPriorityList) => { return JSON.stringify(control.getPriorityMap()); }, defaultValue: (control: ZnPriorityList) => control.defaultValue, // A form reset passes defaultValue straight back in, so this has to accept the // key array as well as the serialised value other callers set. setValue: (control: ZnPriorityList, value: string | string[]) => { if (!value || (Array.isArray(value) && value.length === 0)) return; const keys: unknown = Array.isArray(value) ? value : safeParse(value); if (Array.isArray(keys) && keys.every((item: unknown): item is string => typeof item === 'string')) { control.value = keys as string[]; } }, })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text', 'label')"
+            },
+            {
+              "kind": "field",
+              "name": "hiddenInputsContainer",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
-              "attribute": "frame-origin"
+                "text": "HTMLDivElement"
+              }
             },
             {
               "kind": "field",
-              "name": "dataUri",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
-              "attribute": "data-uri"
+              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "watch",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "default": "'form[data-auto-save]'",
-              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
-              "attribute": "watch"
+              "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.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "refreshOn",
+              "name": "_value",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "default": "'form'",
-              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\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.",
-              "attribute": "refresh-on"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "debounce",
+              "name": "defaultValue",
               "type": {
-                "text": "number"
+                "text": "string[]"
               },
-              "default": "400",
-              "description": "Debounce in ms between a form change and its auto-save.",
-              "attribute": "debounce"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "zoom",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "1",
-              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
-              "attribute": "zoom"
+              "default": "''",
+              "description": "The component's label. Required for proper accessibility.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "minHeight",
+              "name": "labelTooltip",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "480",
-              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
-              "attribute": "min-height"
+              "default": "''",
+              "description": "Text that appears in a tooltip next to the label.",
+              "attribute": "label-tooltip"
             },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "helpText",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
-              "attribute": "fill"
+              "default": "''",
+              "description": "Help text that describes how to use the component.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "device",
+              "name": "form",
               "type": {
-                "text": "PreviewFrameDevice"
+                "text": "string"
               },
-              "default": "'desktop'",
-              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
-              "attribute": "device",
+              "default": "''",
+              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+              "attribute": "form",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "backdrop",
+              "name": "size",
               "type": {
-                "text": "'dots' | 'panel'"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "'dots'",
-              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
-              "attribute": "backdrop",
+              "default": "'medium'",
+              "description": "The size of the list items.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "interactive",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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.",
-              "attribute": "interactive",
+              "description": "Whether the priority list is disabled.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "frame",
-              "type": {
-                "text": "HTMLIFrameElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "false",
+              "description": "Ensures the form control has a value before allowing submission.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_contentHeight",
+              "name": "priorityStart",
               "type": {
                 "text": "number"
               },
-              "privacy": "private",
-              "default": "0",
-              "description": "Height of the embedded page's content, when it's known: reported by the\nembed (`height` on hp-preview:rendered, or an hp-preview:height message) or\nmeasured directly for a same-origin embed. The frame is laid out at this\nheight rather than the panel's, so the page never scrolls inside the frame\n— the panel scrolls instead, which is what makes an overflowing preview\nreachable while pointer input to the frame is blocked. 0 = unknown, and the\nframe falls back to filling the panel. Kept up to date either way, but only\nlaid out when the frame is inert: an `interactive` frame scrolls itself."
+              "default": "1",
+              "description": "The starting priority number. Defaults to 1.",
+              "attribute": "priority-start"
             },
             {
               "kind": "field",
-              "name": "_generation",
+              "name": "formAction",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "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.",
+              "attribute": "formaction"
             },
             {
               "kind": "field",
-              "name": "_theme",
+              "name": "order",
               "type": {
-                "text": "Record<string, unknown> | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "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.",
+              "attribute": "order"
             },
             {
               "kind": "field",
-              "name": "_contentObserver",
+              "name": "draggedKey",
               "type": {
-                "text": "ResizeObserver | undefined"
+                "text": "string | null"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_watchedForms",
               "privacy": "private",
-              "readonly": true,
-              "default": "new Set<HTMLFormElement>()"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "_debounceTimers",
+              "name": "isDragging",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "readonly": true,
-              "default": "new Map<HTMLFormElement, number>()"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "_shellSaveRoots",
+              "name": "dragOverKey",
               "type": {
-                "text": "EventTarget[]"
+                "text": "string | null"
               },
               "privacy": "private",
-              "default": "[]"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "_lastShellSave",
+              "name": "validity",
               "type": {
-                "text": "Event | undefined"
+                "text": "ValidityState"
               },
-              "privacy": "private"
+              "description": "Gets the validity state object.",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_formObserver",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new MutationController(this, { target: null, config: {subtree: true, childList: true}, callback: () => this._attachForms(), })"
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "description": "Gets the validation message.",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "_onMessage",
+              "kind": "method",
+              "name": "_initializeOrderFromSlot",
               "privacy": "private",
-              "readonly": true
+              "description": "Initialize item order from slotted children if no explicit value was provided.\nIf an `order` attribute is set, use it to define the initial order,\nappending any slotted items not listed in the order at the end."
             },
             {
               "kind": "method",
-              "name": "_applyContentHeight",
+              "name": "_getSlottedItems",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "height",
-                  "type": {
-                    "text": "unknown"
-                  }
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
                 }
-              ]
+              },
+              "description": "Gets all direct children with a `value` attribute (excluding those in reserved slots)."
             },
             {
               "kind": "method",
-              "name": "_resetContentHeight",
-              "privacy": "private"
+              "name": "_assignSlotNames",
+              "privacy": "private",
+              "description": "Assigns `slot` attributes to light DOM children based on their `value` attribute,\nso they project into the correct named slot in the shadow DOM."
             },
             {
-              "kind": "field",
-              "name": "_onFrameLoad",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "getPriorityMap",
+              "return": {
+                "type": {
+                  "text": "PriorityItem[]"
+                }
+              },
+              "description": "Returns the priority map: an array of { key, priority } objects."
             },
             {
               "kind": "method",
-              "name": "refresh",
-              "description": "Re-fetches the payload and pushes a fresh config to the preview."
+              "name": "_syncHiddenInputs",
+              "privacy": "private",
+              "description": "Syncs hidden inputs so form data includes priority values."
             },
             {
               "kind": "method",
-              "name": "setTheme",
+              "name": "_moveItem",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "theme",
+                  "name": "fromIndex",
                   "type": {
-                    "text": "Record<string, unknown>"
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "toIndex",
+                  "type": {
+                    "text": "number"
                   }
                 }
               ],
-              "description": "Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme."
+              "description": "Moves an item from one index to another."
             },
             {
               "kind": "method",
-              "name": "_postTheme",
-              "privacy": "private"
+              "name": "_submitForm",
+              "privacy": "private",
+              "description": "Submits the associated form if a `formaction` attribute is set."
             },
             {
               "kind": "method",
-              "name": "_sendConfig",
-              "privacy": "private"
+              "name": "_handleDragStart",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_attachForms",
+              "name": "_handleDragEnd",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "_onShellSave",
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "method",
-              "name": "_detachForm",
+              "name": "_handleDragOver",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "form",
+                  "name": "event",
                   "type": {
-                    "text": "HTMLFormElement"
+                    "text": "DragEvent"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "_onChange",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "_onSubmit",
+              "kind": "method",
+              "name": "_handleDragLeave",
               "privacy": "private",
-              "readonly": true
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "DragEvent"
+                  }
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_save",
+              "name": "_handleDrop",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "form",
+                  "name": "event",
                   "type": {
-                    "text": "HTMLFormElement"
+                    "text": "DragEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_fail",
+              "name": "_handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "message",
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "key",
                   "type": {
                     "text": "string"
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Checks for validity but does not show a validation message."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "_message",
+                  "default": "''"
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the preview reports a render error or a save fails.",
-              "name": "zn-error"
+              "description": "Emitted when the order of items changes.",
+              "name": "zn-change"
+            },
+            {
+              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.",
+              "name": "zn-reorder"
             }
           ],
           "attributes": [
             {
-              "name": "src",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "URL of the preview shell page (tokened embed URL).",
-              "fieldName": "src"
+              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
+              "fieldName": "name"
             },
             {
-              "name": "frame-origin",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "string[]"
               },
-              "default": "''",
-              "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
-              "fieldName": "frameOrigin"
+              "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.",
+              "fieldName": "value"
             },
             {
-              "name": "data-uri",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
-              "fieldName": "dataUri"
+              "description": "The component's label. Required for proper accessibility.",
+              "fieldName": "label"
             },
             {
-              "name": "watch",
+              "name": "label-tooltip",
               "type": {
                 "text": "string"
               },
-              "default": "'form[data-auto-save]'",
-              "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
-              "fieldName": "watch"
+              "default": "''",
+              "description": "Text that appears in a tooltip next to the label.",
+              "fieldName": "labelTooltip"
             },
             {
-              "name": "refresh-on",
+              "name": "help-text",
               "type": {
                 "text": "string"
               },
-              "default": "'form'",
-              "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\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.",
-              "fieldName": "refreshOn"
+              "default": "''",
+              "description": "Help text that describes how to use the component.",
+              "fieldName": "helpText"
             },
             {
-              "name": "debounce",
+              "name": "form",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "400",
-              "description": "Debounce in ms between a form change and its auto-save.",
-              "fieldName": "debounce"
+              "default": "''",
+              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
+              "fieldName": "form"
             },
             {
-              "name": "zoom",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "1",
-              "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
-              "fieldName": "zoom"
+              "default": "'medium'",
+              "description": "The size of the list items.",
+              "fieldName": "size"
             },
             {
-              "name": "min-height",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "480",
-              "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
-              "fieldName": "minHeight"
+              "default": "false",
+              "description": "Whether the priority list is disabled.",
+              "fieldName": "disabled"
             },
             {
-              "name": "fill",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
-              "fieldName": "fill"
+              "description": "Ensures the form control has a value before allowing submission.",
+              "fieldName": "required"
             },
             {
-              "name": "device",
+              "name": "priority-start",
               "type": {
-                "text": "PreviewFrameDevice"
+                "text": "number"
               },
-              "default": "'desktop'",
-              "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
-              "fieldName": "device"
+              "default": "1",
+              "description": "The starting priority number. Defaults to 1.",
+              "fieldName": "priorityStart"
             },
             {
-              "name": "backdrop",
+              "name": "formaction",
               "type": {
-                "text": "'dots' | 'panel'"
+                "text": "string"
               },
-              "default": "'dots'",
-              "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
-              "fieldName": "backdrop"
+              "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.",
+              "fieldName": "formAction"
             },
             {
-              "name": "interactive",
+              "name": "order",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "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.",
-              "fieldName": "interactive"
+              "default": "''",
+              "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.",
+              "fieldName": "order"
             }
           ],
           "superclass": {
             "name": "ZincElement",
             "module": "/src/internal/zinc-element"
           },
-          "summary": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, 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.",
-          "tagNameWithoutPrefix": "preview-frame",
-          "tagName": "zn-preview-frame",
+          "summary": "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.",
+          "tagNameWithoutPrefix": "priority-list",
+          "tagName": "zn-priority-list",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Embeds a live preview iframe and drives the hp-preview postMessage\n * protocol: answers the frame's ready handshake with a config payload fetched\n * from data-uri, auto-saves watched forms on change, refreshes the preview\n * after each save (its own, or a shell-driven save of a `refresh-on` form),\n * accepts a theme payload via setTheme() that is retained and replayed\n * after every ready handshake, and grows the frame to a content height the\n * embed reports so the panel scrolls an overflowing page.\n *\n * @documentation https://zinc.style/components/preview-frame\n * @status experimental\n * @since 1.0\n *\n * @event zn-error - Emitted when the preview reports a render error or a save fails.\n *\n * @csspart base - The component's base wrapper.\n * @csspart stage - The device-width wrapper around the iframe.\n * @csspart iframe - The preview iframe.\n * @csspart error - The error overlay.\n *\n * @cssproperty --zn-preview-frame-dot-spacing - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px.\n * @cssproperty --zn-preview-frame-dot-opacity - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08.\n */",
-          "documentation": "https://zinc.style/components/preview-frame",
+          "jsDoc": "/**\n * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\n *   and keyboard reordering. Priority values are submitted as form data via hidden inputs.\n *\n * @documentation https://zinc.style/components/priority-list\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that\n *   uniquely identifies the item. The component automatically assigns slot names to project each item into the\n *   correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.\n * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n *\n * @event zn-change - Emitted when the order of items changes.\n * @event zn-reorder - Emitted when items are reordered. Call `getPriorityMap()` on the component to get\n *   the updated `{ key: string, priority: number }[]` array.\n *\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input area wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart list - The list container.\n * @csspart item - An individual list item row.\n * @csspart drag-handle - The drag handle icon.\n * @csspart priority - The priority number badge.\n * @csspart content - The content area of an item.\n *\n * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.\n * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.\n * @cssproperty --zn-priority-list-actions-gap - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`.\n * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.\n * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.\n */",
+          "documentation": "https://zinc.style/components/priority-list",
           "status": "experimental",
-          "since": "1.0"
+          "since": "1.0",
+          "dependencies": [
+            "zn-icon"
+          ]
         }
       ],
       "exports": [
@@ -32419,651 +32566,542 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ZnPreviewFrame",
-            "module": "components/preview-frame/preview-frame.js"
+            "name": "ZnPriorityList",
+            "module": "components/priority-list/priority-list.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/priority-list/priority-list.js",
+      "path": "components/popup/popup.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ZnPriorityList",
+          "name": "ZnPopup",
           "cssProperties": [
             {
-              "description": "The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.",
-              "name": "--zn-priority-list-item-gap"
-            },
-            {
-              "description": "The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.",
-              "name": "--zn-priority-list-item-padding"
-            },
-            {
-              "description": "The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`.",
-              "name": "--zn-priority-list-actions-gap"
-            },
-            {
-              "description": "The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.",
-              "name": "--zn-priority-list-handle-color"
-            },
-            {
-              "description": "The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.",
-              "name": "--zn-priority-list-priority-color"
+              "description": "An example CSS custom property.",
+              "name": "--example"
             }
           ],
           "cssParts": [
             {
-              "description": "The form control wrapper.",
-              "name": "form-control"
-            },
-            {
-              "description": "The label wrapper.",
-              "name": "form-control-label"
-            },
-            {
-              "description": "The input area wrapper.",
-              "name": "form-control-input"
-            },
-            {
-              "description": "The help text wrapper.",
-              "name": "form-control-help-text"
-            },
-            {
-              "description": "The list container.",
-              "name": "list"
-            },
-            {
-              "description": "An individual list item row.",
-              "name": "item"
-            },
-            {
-              "description": "The drag handle icon.",
-              "name": "drag-handle"
-            },
-            {
-              "description": "The priority number badge.",
-              "name": "priority"
-            },
-            {
-              "description": "The content area of an item.",
-              "name": "content"
+              "description": "The component's base wrapper.",
+              "name": "base"
             }
           ],
           "slots": [
             {
-              "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).",
+              "description": "The default slot.",
               "name": ""
             },
             {
-              "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.",
-              "name": "label"
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "anchorEl",
+              "type": {
+                "text": "Element | VirtualElement | null"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Used to add text displayed in a tooltip next to the label.",
-              "name": "label-tooltip"
+              "kind": "field",
+              "name": "cleanup",
+              "type": {
+                "text": "ReturnType<typeof autoUpdate> | undefined"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
+            },
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "arrowEl",
               "type": {
-                "text": "object"
+                "text": "HTMLElement"
               },
-              "static": true,
-              "default": "{ 'zn-icon': ZnIcon, }"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "protected",
-              "readonly": true,
-              "default": "new FormControlController(this, { value: (control: ZnPriorityList) => { return JSON.stringify(control.getPriorityMap()); }, defaultValue: (control: ZnPriorityList) => control.defaultValue, // A form reset passes defaultValue straight back in, so this has to accept the // key array as well as the serialised value other callers set. setValue: (control: ZnPriorityList, value: string | string[]) => { if (!value || (Array.isArray(value) && value.length === 0)) return; const keys: unknown = Array.isArray(value) ? value : safeParse(value); if (Array.isArray(keys) && keys.every((item: unknown): item is string => typeof item === 'string')) { control.value = keys as string[]; } }, })"
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement"
+              },
+              "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.",
+              "attribute": "anchor"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text', 'label')"
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hiddenInputsContainer",
+              "name": "placement",
               "type": {
-                "text": "HTMLDivElement"
-              }
+                "text": "| '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'",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "strategy",
               "type": {
-                "text": "string"
+                "text": "'absolute' | 'fixed'"
               },
-              "default": "''",
-              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
-              "attribute": "name"
+              "default": "'fixed'",
+              "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.",
+              "attribute": "strategy",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "distance",
               "type": {
-                "text": "string[]"
+                "text": "number"
               },
-              "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.",
-              "attribute": "value"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "attribute": "distance"
             },
             {
               "kind": "field",
-              "name": "_value",
+              "name": "skidding",
               "type": {
-                "text": "string[]"
+                "text": "number"
               },
-              "privacy": "private",
-              "default": "[]"
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "attribute": "skidding"
             },
             {
               "kind": "field",
-              "name": "defaultValue",
+              "name": "arrow",
               "type": {
-                "text": "string[]"
+                "text": "boolean"
               },
-              "default": "[]"
+              "default": "false",
+              "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.",
+              "attribute": "arrow"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "arrowPlacement",
               "type": {
-                "text": "string"
+                "text": "'start' | 'end' | 'center' | 'anchor'"
               },
-              "default": "''",
-              "description": "The component's label. Required for proper accessibility.",
-              "attribute": "label"
+              "default": "'anchor'",
+              "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.",
+              "attribute": "arrow-placement"
             },
             {
               "kind": "field",
-              "name": "labelTooltip",
+              "name": "arrowPadding",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "Text that appears in a tooltip next to the label.",
-              "attribute": "label-tooltip"
+              "default": "10",
+              "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.",
+              "attribute": "arrow-padding"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "flip",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Help text that describes how to use the component.",
-              "attribute": "help-text"
+              "default": "false",
+              "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.",
+              "attribute": "flip"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "flipFallbackPlacements",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
-              "attribute": "form",
-              "reflects": true
+              "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.",
+              "attribute": "flip-fallback-placements"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "flipFallbackStrategy",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'best-fit' | 'initial'"
               },
-              "default": "'medium'",
-              "description": "The size of the list items.",
-              "attribute": "size",
-              "reflects": true
+              "default": "'best-fit'",
+              "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.",
+              "attribute": "flip-fallback-strategy"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "flipBoundary",
               "type": {
-                "text": "boolean"
+                "text": "Element | Element[]"
               },
-              "default": "false",
-              "description": "Whether the priority list is disabled.",
-              "attribute": "disabled",
-              "reflects": true
+              "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.",
+              "attribute": "flipBoundary"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "flipPadding",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Ensures the form control has a value before allowing submission.",
-              "attribute": "required",
-              "reflects": true
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "attribute": "flip-padding"
             },
             {
               "kind": "field",
-              "name": "priorityStart",
+              "name": "shift",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "The starting priority number. Defaults to 1.",
-              "attribute": "priority-start"
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "attribute": "shift"
             },
             {
               "kind": "field",
-              "name": "formAction",
+              "name": "shiftBoundary",
               "type": {
-                "text": "string"
+                "text": "Element | Element[]"
               },
-              "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.",
-              "attribute": "formaction"
+              "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.",
+              "attribute": "shiftBoundary"
             },
             {
               "kind": "field",
-              "name": "order",
+              "name": "shiftPadding",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "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.",
-              "attribute": "order"
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "attribute": "shift-padding"
             },
             {
               "kind": "field",
-              "name": "draggedKey",
+              "name": "autoSize",
               "type": {
-                "text": "string | null"
+                "text": "'horizontal' | 'vertical' | 'both'"
               },
-              "privacy": "private",
-              "default": "null"
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "attribute": "auto-size"
             },
             {
               "kind": "field",
-              "name": "isDragging",
+              "name": "sync",
               "type": {
-                "text": "boolean"
+                "text": "'width' | 'height' | 'both'"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "attribute": "sync"
             },
             {
               "kind": "field",
-              "name": "dragOverKey",
+              "name": "autoSizeBoundary",
               "type": {
-                "text": "string | null"
+                "text": "Element | Element[]"
               },
-              "privacy": "private",
-              "default": "null"
+              "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.",
+              "attribute": "autoSizeBoundary"
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "autoSizePadding",
               "type": {
-                "text": "ValidityState"
+                "text": "number"
               },
-              "description": "Gets the validity state object.",
-              "readonly": true
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "attribute": "auto-size-padding"
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "hoverBridge",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "Gets the validation message.",
-              "readonly": true
+              "default": "false",
+              "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.",
+              "attribute": "hover-bridge"
             },
             {
               "kind": "method",
-              "name": "_initializeOrderFromSlot",
-              "privacy": "private",
-              "description": "Initialize item order from slotted children if no explicit value was provided.\nIf an `order` attribute is set, use it to define the initial order,\nappending any slotted items not listed in the order at the end."
+              "name": "handleAnchorChange",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "_getSlottedItems",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "HTMLElement[]"
-                }
-              },
-              "description": "Gets all direct children with a `value` attribute (excluding those in reserved slots)."
+              "kind": "field",
+              "name": "handleAnchorHover",
+              "privacy": "public"
             },
             {
               "kind": "method",
-              "name": "_assignSlotNames",
-              "privacy": "private",
-              "description": "Assigns `slot` attributes to light DOM children based on their `value` attribute,\nso they project into the correct named slot in the shadow DOM."
+              "name": "start",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getPriorityMap",
+              "name": "stop",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "PriorityItem[]"
+                  "text": "Promise<void>"
                 }
-              },
-              "description": "Returns the priority map: an array of { key, priority } objects."
-            },
-            {
-              "kind": "method",
-              "name": "_syncHiddenInputs",
-              "privacy": "private",
-              "description": "Syncs hidden inputs so form data includes priority values."
+              }
             },
             {
               "kind": "method",
-              "name": "_moveItem",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "fromIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "toIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "Moves an item from one index to another."
+              "name": "reposition",
+              "description": "Forces the popup to recalculate and reposition itself."
             },
             {
-              "kind": "method",
-              "name": "_submitForm",
-              "privacy": "private",
-              "description": "Submits the associated form if a `formaction` attribute is set."
-            },
+              "kind": "field",
+              "name": "updateHoverBridge",
+              "privacy": "private"
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_handleDragStart",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "DragEvent"
-                  }
-                },
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "method",
-              "name": "_handleDragEnd",
-              "privacy": "private"
+              "name": "anchor",
+              "type": {
+                "text": "Element | string | VirtualElement"
+              },
+              "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.",
+              "fieldName": "anchor"
             },
             {
-              "kind": "method",
-              "name": "_handleDragOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "DragEvent"
-                  }
-                },
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "fieldName": "active"
             },
             {
-              "kind": "method",
-              "name": "_handleDragLeave",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "DragEvent"
-                  }
-                },
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "placement",
+              "type": {
+                "text": "| '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'",
+              "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
+              "fieldName": "placement"
             },
             {
-              "kind": "method",
-              "name": "_handleDrop",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "DragEvent"
-                  }
-                }
-              ]
+              "name": "strategy",
+              "type": {
+                "text": "'absolute' | 'fixed'"
+              },
+              "default": "'fixed'",
+              "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.",
+              "fieldName": "strategy"
             },
             {
-              "kind": "method",
-              "name": "_handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                },
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its anchor.",
+              "fieldName": "distance"
             },
             {
-              "kind": "method",
-              "name": "_handleSlotChange",
-              "privacy": "private"
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its anchor.",
+              "fieldName": "skidding"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "arrow",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Checks for validity but does not show a validation message."
+              "default": "false",
+              "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.",
+              "fieldName": "arrow"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "name": "arrow-placement",
+              "type": {
+                "text": "'start' | 'end' | 'center' | 'anchor'"
               },
-              "description": "Gets the associated form, if one exists."
+              "default": "'anchor'",
+              "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.",
+              "fieldName": "arrowPlacement"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "arrow-padding",
+              "type": {
+                "text": "number"
               },
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "default": "10",
+              "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.",
+              "fieldName": "arrowPadding"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "_message",
-                  "default": "''"
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the order of items changes.",
-              "name": "zn-change"
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "fieldName": "flip"
             },
             {
-              "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.",
-              "name": "zn-reorder"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
+              "name": "flip-fallback-placements",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
-              "fieldName": "name"
+              "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.",
+              "fieldName": "flipFallbackPlacements"
             },
             {
-              "name": "value",
+              "name": "flip-fallback-strategy",
               "type": {
-                "text": "string[]"
+                "text": "'best-fit' | 'initial'"
               },
-              "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.",
-              "fieldName": "value"
+              "default": "'best-fit'",
+              "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.",
+              "fieldName": "flipFallbackStrategy"
             },
             {
-              "name": "label",
+              "name": "flipBoundary",
               "type": {
-                "text": "string"
+                "text": "Element | Element[]"
               },
-              "default": "''",
-              "description": "The component's label. Required for proper accessibility.",
-              "fieldName": "label"
+              "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.",
+              "fieldName": "flipBoundary"
             },
             {
-              "name": "label-tooltip",
+              "name": "flip-padding",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "Text that appears in a tooltip next to the label.",
-              "fieldName": "labelTooltip"
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
+              "fieldName": "flipPadding"
             },
             {
-              "name": "help-text",
+              "name": "shift",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Help text that describes how to use the component.",
-              "fieldName": "helpText"
+              "default": "false",
+              "description": "Moves the popup along the axis to keep it in view when clipped.",
+              "fieldName": "shift"
             },
             {
-              "name": "form",
+              "name": "shiftBoundary",
               "type": {
-                "text": "string"
+                "text": "Element | Element[]"
               },
-              "default": "''",
-              "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
-              "fieldName": "form"
+              "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.",
+              "fieldName": "shiftBoundary"
             },
             {
-              "name": "size",
+              "name": "shift-padding",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "number"
               },
-              "default": "'medium'",
-              "description": "The size of the list items.",
-              "fieldName": "size"
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
+              "fieldName": "shiftPadding"
             },
             {
-              "name": "disabled",
+              "name": "auto-size",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical' | 'both'"
               },
-              "default": "false",
-              "description": "Whether the priority list is disabled.",
-              "fieldName": "disabled"
+              "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
+              "fieldName": "autoSize"
             },
             {
-              "name": "required",
+              "name": "sync",
               "type": {
-                "text": "boolean"
+                "text": "'width' | 'height' | 'both'"
               },
-              "default": "false",
-              "description": "Ensures the form control has a value before allowing submission.",
-              "fieldName": "required"
+              "description": "Syncs the popup's width or height to that of the anchor element.",
+              "fieldName": "sync"
             },
             {
-              "name": "priority-start",
+              "name": "autoSizeBoundary",
               "type": {
-                "text": "number"
+                "text": "Element | Element[]"
               },
-              "default": "1",
-              "description": "The starting priority number. Defaults to 1.",
-              "fieldName": "priorityStart"
+              "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.",
+              "fieldName": "autoSizeBoundary"
             },
             {
-              "name": "formaction",
+              "name": "auto-size-padding",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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.",
-              "fieldName": "formAction"
+              "default": "0",
+              "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
+              "fieldName": "autoSizePadding"
             },
             {
-              "name": "order",
+              "name": "hover-bridge",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "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.",
-              "fieldName": "order"
+              "default": "false",
+              "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.",
+              "fieldName": "hoverBridge"
             }
           ],
           "superclass": {
             "name": "ZincElement",
             "module": "/src/internal/zinc-element"
           },
-          "summary": "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.",
-          "tagNameWithoutPrefix": "priority-list",
-          "tagName": "zn-priority-list",
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "popup",
+          "tagName": "zn-popup",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\n *   and keyboard reordering. Priority values are submitted as form data via hidden inputs.\n *\n * @documentation https://zinc.style/components/priority-list\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that\n *   uniquely identifies the item. The component automatically assigns slot names to project each item into the\n *   correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.\n * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n *\n * @event zn-change - Emitted when the order of items changes.\n * @event zn-reorder - Emitted when items are reordered. Call `getPriorityMap()` on the component to get\n *   the updated `{ key: string, priority: number }[]` array.\n *\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input area wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart list - The list container.\n * @csspart item - An individual list item row.\n * @csspart drag-handle - The drag handle icon.\n * @csspart priority - The priority number badge.\n * @csspart content - The content area of an item.\n *\n * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.\n * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.\n * @cssproperty --zn-priority-list-actions-gap - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`.\n * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.\n * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.\n */",
-          "documentation": "https://zinc.style/components/priority-list",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/popup\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/popup",
           "status": "experimental",
           "since": "1.0",
           "dependencies": [
-            "zn-icon"
+            "zn-example"
           ]
         }
       ],
@@ -33072,8 +33110,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ZnPriorityList",
-            "module": "components/priority-list/priority-list.js"
+            "name": "ZnPopup",
+            "module": "components/popup/popup.js"
           }
         }
       ]
@@ -40205,6 +40243,16 @@
               "default": "\"\"",
               "attribute": "conditional"
             },
+            {
+              "kind": "field",
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "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.",
+              "attribute": "requires"
+            },
             {
               "kind": "field",
               "name": "dataUri",
@@ -41129,6 +41177,15 @@
               "default": "\"\"",
               "fieldName": "conditional"
             },
+            {
+              "name": "requires",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "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.",
+              "fieldName": "requires"
+            },
             {
               "name": "data-uri",
               "type": {
@@ -52948,7 +53005,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.134",
+    "version": "1.1.135",
     "author": "",
     "license": "MIT"
   }