@kubex/zinc 1.1.76 → 1.1.78

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

@@ -13,6 +13,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -53,17 +64,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -3023,7 +3023,7 @@
         },
         {
           "name": "interactive",
-          "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).",
+          "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.",
           "values": []
         }
       ],
@@ -3302,15 +3302,25 @@
     },
     {
       "name": "zn-rating",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
       "attributes": [
         { "name": "label", "values": [] },
+        {
+          "name": "help-text",
+          "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
         { "name": "name", "values": [] },
         { "name": "value", "values": [] },
         { "name": "max", "values": [] },
         { "name": "precision", "values": [] },
         { "name": "readonly", "values": [] },
         { "name": "disabled", "values": [] },
+        {
+          "name": "preview",
+          "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
+          "values": []
+        },
         {
           "name": "size",
           "values": [
@@ -3961,6 +3971,36 @@
         }
       ]
     },
+    {
+      "name": "zn-tabs",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        { "name": "master-id", "values": [] },
+        { "name": "default-uri", "values": [] },
+        { "name": "active", "values": [] },
+        { "name": "split", "values": [] },
+        { "name": "split-min", "values": [] },
+        { "name": "split-min-secondary", "values": [] },
+        { "name": "split-max", "values": [] },
+        { "name": "primary-caption", "values": [] },
+        { "name": "secondary-caption", "values": [] },
+        { "name": "no-prefetch", "values": [] },
+        { "name": "no-cache", "values": [] },
+        { "name": "local-storage", "values": [] },
+        { "name": "store-key", "values": [] },
+        { "name": "store-ttl", "values": [] },
+        { "name": "padded", "values": [] },
+        { "name": "fetch-style", "values": [] },
+        { "name": "full-width", "values": [] },
+        { "name": "padded-right", "values": [] },
+        { "name": "monitor", "values": [] },
+        { "name": "caption", "values": [] },
+        { "name": "description", "values": [] }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://zinc.style/components/tabs" }
+      ]
+    },
     {
       "name": "zn-textarea",
       "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textareas label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
@@ -4123,36 +4163,6 @@
         }
       ]
     },
-    {
-      "name": "zn-tabs",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        { "name": "master-id", "values": [] },
-        { "name": "default-uri", "values": [] },
-        { "name": "active", "values": [] },
-        { "name": "split", "values": [] },
-        { "name": "split-min", "values": [] },
-        { "name": "split-min-secondary", "values": [] },
-        { "name": "split-max", "values": [] },
-        { "name": "primary-caption", "values": [] },
-        { "name": "secondary-caption", "values": [] },
-        { "name": "no-prefetch", "values": [] },
-        { "name": "no-cache", "values": [] },
-        { "name": "local-storage", "values": [] },
-        { "name": "store-key", "values": [] },
-        { "name": "store-ttl", "values": [] },
-        { "name": "padded", "values": [] },
-        { "name": "fetch-style", "values": [] },
-        { "name": "full-width", "values": [] },
-        { "name": "padded-right", "values": [] },
-        { "name": "monitor", "values": [] },
-        { "name": "caption", "values": [] },
-        { "name": "description", "values": [] }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://zinc.style/components/tabs" }
-      ]
-    },
     {
       "name": "zn-theme-editor",
       "description": "A theme editor: slotted form controls drive a live preview frame,\nwith a toolbar for the preview's light/dark mode and device width.\n---\n\n\n### **Events:**\n - **zn-theme-change** - Emitted when the values, mode or device change.\n- **zn-theme-submit** - Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save.\n- **zn-error** - Emitted when a save fails. Also seen for preview render failures: the frame's zn-error is composed and not stopped, so it bubbles out through the editor too.\n\n### **Slots:**\n - _default_ - Ungrouped theme controls, rendered above any sections. Controls assigned `slot=\"<name>\"` matching a `sections` entry (or, when nested, a `groups` entry) render inside that section/group instead. Harvesting and change detection walk every slot's full assigned subtree, not just direct children. With `sections` left unset, the structure is instead derived from the controls' own attributes: `group=\"<label>\"` becomes a tab and `category=\"<label>\"` a collapsible within it, and the control is slotted into that collapsible automatically. Either attribute works alone - a control with only `group` sits directly in its tab, and one with only `category` becomes its own top-level section. Setting `sections` explicitly disables the derivation entirely.\n- **toolbar** - Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs.\n- **footer** - Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here.\n\n### **CSS Properties:**\n - **--zn-theme-editor-controls-width** - Width of the controls column. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **controls** - The left-hand controls column, full height.\n- **controls-header** - The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.\n- **toolbar** - The preview column's header row: `preview-caption` on the left, the device switcher (and sources/submit) on the right. Spans the preview column only.\n- **section** - A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).\n- **footer** - The footer wrapper beneath the controls.\n- **preview** - The preview column.\n- **error** - The inline error strip.\n- **preview__base** - The frame's base wrapper (forwarded from zn-preview-frame).\n- **preview__stage** - The frame's device-width wrapper (forwarded from zn-preview-frame).\n- **preview__iframe** - The frame's iframe (forwarded from zn-preview-frame).\n- **preview__error** - The frame's own error overlay (forwarded from zn-preview-frame).",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.76",
+  "version": "1.1.78",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -83,28 +105,6 @@
             ]
           }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -6999,7 +6999,7 @@
             },
             {
               "name": "interactive",
-              "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).",
+              "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -7068,7 +7068,7 @@
               },
               {
                 "name": "interactive",
-                "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).",
+                "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
                 "type": "boolean"
               },
               { "name": "frame", "type": "HTMLIFrameElement" }
@@ -7709,10 +7709,15 @@
         },
         {
           "name": "zn-rating",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
           "doc-url": "",
           "attributes": [
             { "name": "label", "value": { "type": "string" } },
+            {
+              "name": "help-text",
+              "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "name", "value": { "type": "string" } },
             { "name": "value", "value": { "type": "number", "default": "0" } },
             { "name": "max", "value": { "type": "number", "default": "5" } },
@@ -7728,6 +7733,11 @@
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "preview",
+              "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "size",
               "value": {
@@ -7742,7 +7752,11 @@
           ],
           "slots": [
             { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
+            { "name": "example", "description": "An example slot." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute."
+            }
           ],
           "events": [
             { "name": "zn-event-name", "description": "Emitted as an example." }
@@ -7750,13 +7764,24 @@
           "js": {
             "properties": [
               { "name": "rating", "type": "HTMLElement" },
+              { "name": "symbols", "type": "HTMLElement" },
               { "name": "label", "type": "string" },
+              {
+                "name": "helpText",
+                "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
               { "name": "name", "type": "string" },
               { "name": "value", "type": "number" },
               { "name": "max", "type": "number" },
               { "name": "precision", "type": "number" },
               { "name": "readonly", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
+              {
+                "name": "preview",
+                "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
+                "type": "boolean"
+              },
               { "name": "size", "type": "'small' | 'medium' | 'large'" },
               { "name": "getSymbol", "type": "(value: number) => string" },
               {
@@ -9364,6 +9389,110 @@
             ]
           }
         },
+        {
+          "name": "zn-tabs",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "master-id", "value": { "type": "string" } },
+            {
+              "name": "default-uri",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "active",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "split", "value": { "type": "number" } },
+            {
+              "name": "split-min",
+              "value": { "type": "number", "default": "60" }
+            },
+            { "name": "split-min-secondary", "value": { "type": "number" } },
+            { "name": "split-max", "value": { "type": "number" } },
+            {
+              "name": "primary-caption",
+              "value": { "type": "string", "default": "'Navigation'" }
+            },
+            {
+              "name": "secondary-caption",
+              "value": { "type": "string", "default": "'Content'" }
+            },
+            {
+              "name": "no-prefetch",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-cache",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "local-storage", "value": { "type": "boolean" } },
+            { "name": "store-key", "value": { "type": "string" } },
+            {
+              "name": "store-ttl",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "padded",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "fetch-style",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "full-width",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "padded-right",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "monitor", "value": { "type": "string" } },
+            { "name": "caption", "value": { "type": "string" } },
+            { "name": "description", "value": { "type": "string" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "masterId", "type": "string" },
+              { "name": "defaultUri", "type": "string" },
+              { "name": "_current", "type": "string" },
+              { "name": "_split", "type": "number" },
+              { "name": "_splitMin", "type": "number" },
+              { "name": "_splitMinSecondary", "type": "number" },
+              { "name": "_splitMax", "type": "number" },
+              { "name": "primaryCaption", "type": "string" },
+              { "name": "secondaryCaption", "type": "string" },
+              { "name": "noPrefetch", "type": "boolean" },
+              { "name": "noCache", "type": "boolean" },
+              { "name": "localStorage", "type": "boolean" },
+              { "name": "storeKey", "type": "string" },
+              { "name": "storeTtl", "type": "number" },
+              { "name": "padded", "type": "boolean" },
+              { "name": "fetchStyle", "type": "string" },
+              { "name": "fullWidth", "type": "boolean" },
+              { "name": "paddedRight", "type": "boolean" },
+              { "name": "monitor", "type": "string" },
+              { "name": "caption", "type": "string" },
+              { "name": "description", "type": "string" },
+              { "name": "reRegisterTabs" },
+              { "name": "_registerTabs" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textareas label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
@@ -9707,110 +9836,6 @@
             ]
           }
         },
-        {
-          "name": "zn-tabs",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            { "name": "master-id", "value": { "type": "string" } },
-            {
-              "name": "default-uri",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "active",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "split", "value": { "type": "number" } },
-            {
-              "name": "split-min",
-              "value": { "type": "number", "default": "60" }
-            },
-            { "name": "split-min-secondary", "value": { "type": "number" } },
-            { "name": "split-max", "value": { "type": "number" } },
-            {
-              "name": "primary-caption",
-              "value": { "type": "string", "default": "'Navigation'" }
-            },
-            {
-              "name": "secondary-caption",
-              "value": { "type": "string", "default": "'Content'" }
-            },
-            {
-              "name": "no-prefetch",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "no-cache",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "local-storage", "value": { "type": "boolean" } },
-            { "name": "store-key", "value": { "type": "string" } },
-            {
-              "name": "store-ttl",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "padded",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "fetch-style",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "full-width",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "padded-right",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "monitor", "value": { "type": "string" } },
-            { "name": "caption", "value": { "type": "string" } },
-            { "name": "description", "value": { "type": "string" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "masterId", "type": "string" },
-              { "name": "defaultUri", "type": "string" },
-              { "name": "_current", "type": "string" },
-              { "name": "_split", "type": "number" },
-              { "name": "_splitMin", "type": "number" },
-              { "name": "_splitMinSecondary", "type": "number" },
-              { "name": "_splitMax", "type": "number" },
-              { "name": "primaryCaption", "type": "string" },
-              { "name": "secondaryCaption", "type": "string" },
-              { "name": "noPrefetch", "type": "boolean" },
-              { "name": "noCache", "type": "boolean" },
-              { "name": "localStorage", "type": "boolean" },
-              { "name": "storeKey", "type": "string" },
-              { "name": "storeTtl", "type": "number" },
-              { "name": "padded", "type": "boolean" },
-              { "name": "fetchStyle", "type": "string" },
-              { "name": "fullWidth", "type": "boolean" },
-              { "name": "paddedRight", "type": "boolean" },
-              { "name": "monitor", "type": "string" },
-              { "name": "caption", "type": "string" },
-              { "name": "description", "type": "string" },
-              { "name": "reRegisterTabs" },
-              { "name": "_registerTabs" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-theme-editor",
           "description": "A theme editor: slotted form controls drive a live preview frame,\nwith a toolbar for the preview's light/dark mode and device width.\n---\n\n\n### **Events:**\n - **zn-theme-change** - Emitted when the values, mode or device change.\n- **zn-theme-submit** - Emitted on submit (button click), carrying the current values. With `action` set, only fires after a successful save.\n- **zn-error** - Emitted when a save fails. Also seen for preview render failures: the frame's zn-error is composed and not stopped, so it bubbles out through the editor too.\n\n### **Slots:**\n - _default_ - Ungrouped theme controls, rendered above any sections. Controls assigned `slot=\"<name>\"` matching a `sections` entry (or, when nested, a `groups` entry) render inside that section/group instead. Harvesting and change detection walk every slot's full assigned subtree, not just direct children. With `sections` left unset, the structure is instead derived from the controls' own attributes: `group=\"<label>\"` becomes a tab and `category=\"<label>\"` a collapsible within it, and the control is slotted into that collapsible automatically. Either attribute works alone - a control with only `group` sits directly in its tab, and one with only `category` becomes its own top-level section. Setting `sections` explicitly disables the derivation entirely.\n- **toolbar** - Actions in the toolbar, right-aligned beside the device controls. Where a save button belongs.\n- **footer** - Actions pinned beneath the controls. The built-in submit button lives in the toolbar, not here.\n\n### **CSS Properties:**\n - **--zn-theme-editor-controls-width** - Width of the controls column. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **controls** - The left-hand controls column, full height.\n- **controls-header** - The controls column's header row: `controls-caption` on the left, the light/dark mode toggle on the right.\n- **toolbar** - The preview column's header row: `preview-caption` on the left, the device switcher (and sources/submit) on the right. Spans the preview column only.\n- **section** - A rendered section's or group's collapsible (`section-layout=\"collapsible\"`, or any nested group).\n- **footer** - The footer wrapper beneath the controls.\n- **preview** - The preview column.\n- **error** - The inline error strip.\n- **preview__base** - The frame's base wrapper (forwarded from zn-preview-frame).\n- **preview__stage** - The frame's device-width wrapper (forwarded from zn-preview-frame).\n- **preview__iframe** - The frame's iframe (forwarded from zn-preview-frame).\n- **preview__error** - The frame's own error overlay (forwarded from zn-preview-frame).",

package/dist/zn.d.ts

@@ -6939,24 +6939,36 @@ declare module "components/rating/rating.component" {
      *
      * @slot - The default slot.
      * @slot example - An example slot.
+     * @slot help-text - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.
      *
+     * @csspart form-control - The form control that wraps the symbols and help text.
+     * @csspart form-control-help-text - The help text's wrapper.
      * @csspart base - The component's base wrapper.
+     * @csspart preview - The value shown next to the symbols when `preview` is enabled.
      *
      * @cssproperty --example - An example CSS custom property.
+     * @cssproperty --preview-color - The color of the preview value.
+     * @cssproperty --preview-size - The font size of the preview value.
      */
     export default class ZnRating extends ZincElement implements ZincFormControl {
         static styles: CSSResultGroup;
         private readonly formControlController;
+        private readonly hasSlotController;
         rating: HTMLElement;
+        symbols: HTMLElement;
         private hoverValue;
         private isHovering;
         label: string;
+        /** The rating's help text. If you need to display HTML, use the `help-text` slot instead. */
+        helpText: string;
         name: string;
         value: number;
         max: number;
         precision: number;
         readonly: boolean;
         disabled: boolean;
+        /** Displays the value alongside the symbols, updating live as the pointer moves across them. */
+        preview: boolean;
         size: 'small' | 'medium' | 'large';
         getSymbol: (value: number) => string;
         /** Gets the validity state object */
@@ -6973,6 +6985,7 @@ declare module "components/rating/rating.component" {
         setCustomValidity(): void;
         private _roundToPrecision;
         private _getValueFromXCoordinate;
+        private _formatValue;
         private _getValueFromMousePosition;
         private _getValueFromTouchPosition;
         private _setValue;
@@ -10556,6 +10569,12 @@ declare module "components/preview-frame/preview-frame.component" {
          * be reached from here to cancel its own handlers, so this blocks pointer
          * input entirely — hover goes with it. Scrolling doesn't: an overflowing
          * page is scrolled by the panel rather than by the frame (see _contentHeight).
+         *
+         * Set, the frame becomes a real viewport instead: it stays the panel's own
+         * height and the embed scrolls itself, so there is one scrollbar rather than
+         * a panel scrolling an oversized frame, and the embed's viewport-relative
+         * layout (`100vh`, `position: fixed`, sticky headers) sizes to what's on
+         * screen. _contentHeight is ignored while this is set.
          */
         interactive: boolean;
         frame: HTMLIFrameElement;
@@ -10567,7 +10586,8 @@ declare module "components/preview-frame/preview-frame.component" {
          * height rather than the panel's, so the page never scrolls inside the frame
          * — the panel scrolls instead, which is what makes an overflowing preview
          * reachable while pointer input to the frame is blocked. 0 = unknown, and the
-         * frame falls back to filling the panel.
+         * frame falls back to filling the panel. Kept up to date either way, but only
+         * laid out when the frame is inert: an `interactive` frame scrolls itself.
          */
         private _contentHeight;
         private _generation;