@kubex/zinc 1.1.97 → 1.1.99

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",
@@ -138,6 +138,58 @@
         }
       ]
     },
+    {
+      "name": "zn-background",
+      "description": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n---\n\n\n### **Slots:**\n - _default_ - Content displayed above the background layers.\n\n### **CSS Properties:**\n - **--zn-background-color** - Fallback colour when the `color` attribute is not set. _(default: undefined)_\n- **--zn-background-image-position** - Position of the background image. Defaults to `center`. _(default: undefined)_\n- **--zn-background-overlay-angle** - Direction of the overlay gradient. Defaults to `110deg`. _(default: undefined)_\n- **--zn-background-floating-icon-color** - Colour of the floating icons. Defaults to `currentColor`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's full-size background canvas.\n- **image** - The decorative background image.\n- **overlay** - The contrast overlay between the image and content.\n- **floating-icons** - The non-interactive layer containing the floating icons.\n- **floating-icon** - Each floating `zn-icon`.\n- **content** - The wrapper around the default slot.",
+      "attributes": [
+        {
+          "name": "image",
+          "description": "URL of the decorative background image.",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "CSS colour painted beneath the image.",
+          "values": []
+        },
+        {
+          "name": "image-strength",
+          "description": "Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%).",
+          "values": [{ "name": "BackgroundImageStrength" }]
+        },
+        {
+          "name": "motion",
+          "description": "Subtle animation applied to the image. Motion stops when reduced motion is requested.",
+          "values": [{ "name": "BackgroundMotion" }]
+        },
+        {
+          "name": "overlay",
+          "description": "Strength of the contrast gradient above the image.",
+          "values": [{ "name": "BackgroundOverlay" }]
+        },
+        {
+          "name": "overlay-tone",
+          "description": "Whether the overlay uses a light or dark contrast treatment.",
+          "values": [{ "name": "BackgroundOverlayTone" }]
+        },
+        {
+          "name": "floating-icons",
+          "description": "Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered.",
+          "values": []
+        },
+        {
+          "name": "paused",
+          "description": "Pauses background motion without changing the selected motion treatment.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/background"
+        }
+      ]
+    },
     {
       "name": "zn-bulk-actions",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -266,6 +318,11 @@
         },
         { "name": "rel", "values": [] },
         { "name": "tooltip", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
+          "values": []
+        },
         { "name": "auto-click", "values": [] },
         { "name": "auto-click-delay", "values": [] },
         { "name": "loading-text", "values": [] },
@@ -435,6 +492,8 @@
         { "name": "type", "values": [{ "name": "ChartType" }] },
         { "name": "data", "values": [{ "name": "SeriesItem[]" }] },
         { "name": "categories", "values": [{ "name": "string[]" }] },
+        { "name": "y-categories", "values": [{ "name": "string[]" }] },
+        { "name": "indicators", "values": [{ "name": "RadarIndicator[]" }] },
         {
           "name": "xaxis",
           "values": [
@@ -454,6 +513,11 @@
         { "name": "colors", "values": [{ "name": "string[]" }] },
         { "name": "sync-group", "values": [] },
         { "name": "smooth", "values": [] },
+        { "name": "inner-radius", "values": [] },
+        { "name": "outer-radius", "values": [] },
+        { "name": "show-labels", "values": [] },
+        { "name": "min-value", "values": [] },
+        { "name": "max-value", "values": [] },
         { "name": "scale", "values": [] }
       ],
       "references": [
@@ -554,7 +618,7 @@
     },
     {
       "name": "zn-checkbox",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
       "attributes": [
         { "name": "title", "values": [] },
         {
@@ -567,6 +631,11 @@
           "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
           "values": []
         },
+        {
+          "name": "card-title",
+          "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+          "values": []
+        },
         {
           "name": "unchecked-value",
           "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.",
@@ -601,6 +670,31 @@
           "description": "Draws a container around the checkbox.",
           "values": []
         },
+        {
+          "name": "square",
+          "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "URL for the image shown in a contained checkbox.",
+          "values": []
+        },
+        {
+          "name": "image-alt",
+          "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+          "values": []
+        },
+        {
+          "name": "image-position",
+          "description": "Places the image above, beside, or below the checkbox's text. Requires `contained`.",
+          "values": [{ "name": "SelectionCardImagePosition" }]
+        },
+        {
+          "name": "control-position",
+          "description": "Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+          "values": [{ "name": "SelectionCardControlPosition" }]
+        },
         {
           "name": "borderless",
           "description": "Removes a container around the checkbox.",
@@ -668,7 +762,7 @@
     },
     {
       "name": "zn-checkbox-group",
-      "description": "Shotrt summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the checkbox group's selected value changes.\n- **zn-input** - Emitted when the checkbox group receives user input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<zn-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **help-text** - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
+      "description": "Shotrt summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the checkbox group's selected value changes.\n- **zn-input** - Emitted when the checkbox group receives user input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<zn-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **help-text** - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-checkbox-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.",
       "attributes": [
         {
           "name": "label",
@@ -714,6 +808,16 @@
           "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
           "values": []
         },
+        {
+          "name": "square",
+          "description": "Squares off the corners of every contained checkbox in the group, which are rounded by default.",
+          "values": []
+        },
+        {
+          "name": "wrap",
+          "description": "Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
+          "values": []
+        },
         {
           "name": "form",
           "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
@@ -2718,45 +2822,6 @@
         }
       ]
     },
-    {
-      "name": "zn-page",
-      "description": "Combines a page header with tab navigation and tab panels.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n- **description** - Rich subtitle/description content. Falls back to the `summary` attribute when empty.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        { "name": "caption", "values": [] },
-        { "name": "entity-id", "values": [] },
-        { "name": "entity-id-show", "values": [] },
-        { "name": "full-location", "values": [] },
-        { "name": "modal", "values": [] },
-        { "name": "nested", "values": [] },
-        { "name": "primary", "values": [] },
-        { "name": "previous-path", "values": [] },
-        { "name": "previous-target", "values": [] },
-        { "name": "summary", "values": [] },
-        { "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": "description", "values": [] }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://zinc.style/components/page" }
-      ]
-    },
     {
       "name": "zn-page-builder",
       "description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToSlot(type: _string_, containerId: _string_, slotIndex: _number_): _PageSection | null_** - Adds a new section of a registered type into a container's slot. Returns null if not allowed.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
@@ -2806,6 +2871,45 @@
         }
       ]
     },
+    {
+      "name": "zn-page",
+      "description": "Combines a page header with tab navigation and tab panels.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n- **description** - Rich subtitle/description content. Falls back to the `summary` attribute when empty.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        { "name": "caption", "values": [] },
+        { "name": "entity-id", "values": [] },
+        { "name": "entity-id-show", "values": [] },
+        { "name": "full-location", "values": [] },
+        { "name": "modal", "values": [] },
+        { "name": "nested", "values": [] },
+        { "name": "primary", "values": [] },
+        { "name": "previous-path", "values": [] },
+        { "name": "previous-target", "values": [] },
+        { "name": "summary", "values": [] },
+        { "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": "description", "values": [] }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://zinc.style/components/page" }
+      ]
+    },
     {
       "name": "zn-page-nav",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3242,7 +3346,7 @@
     },
     {
       "name": "zn-radio",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the radio loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the radio gains focus.\n- **zn-input** - Emitted when the radio receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n- **description** - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the radio's checked state.\n- **control--checked** - Matches the control part when the radio is checked.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **label** - The container that wraps the radio's label.\n- **description** - The container that wraps the radio's description.\n- **selected-content** - The container that wraps optional content that appears when a radio is checked.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the radio loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the radio gains focus.\n- **zn-input** - Emitted when the radio receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the radio.\n- **focus(options: _FocusOptions_)** - Sets focus on the radio.\n- **blur()** - Removes focus from the radio.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The radio's label.\n- **image** - Replaces the built-in image used by contained radios.\n- **description** - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained radio with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the radio's checked state.\n- **control--checked** - Matches the control part when the radio is checked.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the radio's label.\n- **description** - The container that wraps the radio's description.\n- **selected-content** - The container that wraps optional content that appears when a radio is checked.",
       "attributes": [
         { "name": "title", "values": [] },
         {
@@ -3255,6 +3359,11 @@
           "description": "The current value of the radio, submitted as a name/value pair with form data.",
           "values": []
         },
+        {
+          "name": "card-title",
+          "description": "Title rendered inside the card. The default slot takes precedence when provided.",
+          "values": []
+        },
         {
           "name": "size",
           "description": "The radio's size.",
@@ -3279,6 +3388,31 @@
           "description": "Draws a container around the radio.",
           "values": []
         },
+        {
+          "name": "square",
+          "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.",
+          "values": []
+        },
+        {
+          "name": "src",
+          "description": "URL for the image shown in a contained radio.",
+          "values": []
+        },
+        {
+          "name": "image-alt",
+          "description": "Accessible text for the built-in image. Leave empty when the image is decorative.",
+          "values": []
+        },
+        {
+          "name": "image-position",
+          "description": "Places the image above, beside, or below the radio's text. Requires `contained`.",
+          "values": [{ "name": "SelectionCardImagePosition" }]
+        },
+        {
+          "name": "control-position",
+          "description": "Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.",
+          "values": [{ "name": "SelectionCardControlPosition" }]
+        },
         {
           "name": "horizontal",
           "description": "Applies styles relevant to radios in a horizontal layout.",
@@ -3311,7 +3445,7 @@
     },
     {
       "name": "zn-radio-group",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         {
           "name": "label",
@@ -3349,12 +3483,22 @@
         },
         {
           "name": "horizontal",
-          "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
+          "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
           "values": []
         },
         {
           "name": "contained",
-          "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.",
+          "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
+          "values": []
+        },
+        {
+          "name": "square",
+          "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
+          "values": []
+        },
+        {
+          "name": "wrap",
+          "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
           "values": []
         },
         {
@@ -3418,7 +3562,7 @@
     },
     {
       "name": "zn-remarkd-editor",
-      "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.\n- **include** - The chip rendered in place of an `include::` directive.\n- **include-picker** - The inline Include picker opened from the toolbar or \"/include\".",
+      "description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Properties:**\n - **--remarkd-editor-max-height** - The tallest the editor grows before its body scrolls. Defaults to `100dvh`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.\n- **include** - The chip rendered in place of an `include::` directive.\n- **include-picker** - The inline Include picker opened from the toolbar or \"/include\".",
       "attributes": [
         {
           "name": "slash-recent-key",
@@ -3628,8 +3772,15 @@
     },
     {
       "name": "zn-scroll-container",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [{ "name": "start-scrolled", "values": [] }],
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "height",
+          "description": "The height and maximum height of the scroll container.",
+          "values": []
+        },
+        { "name": "start-scrolled", "values": [] }
+      ],
       "references": [
         {
           "name": "Documentation",
@@ -4651,6 +4802,170 @@
         }
       ]
     },
+    {
+      "name": "zn-thumbnail",
+      "description": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n---\n\n\n### **Events:**\n - **zn-select** - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.\n- **actions** - Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "Image URL for the built-in `<img>`.",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "Alternative text for the built-in image. Falls back to the caption.",
+          "values": []
+        },
+        {
+          "name": "caption",
+          "description": "The title shown beneath the media.",
+          "values": []
+        },
+        {
+          "name": "aspect-ratio",
+          "description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "Renders the thumbnail as a link to this URL.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Where to open `href` (e.g. `_blank`).",
+          "values": []
+        },
+        {
+          "name": "full-uri",
+          "description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
+          "values": []
+        },
+        {
+          "name": "preview-trigger",
+          "description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
+          "values": [{ "name": "click" }, { "name": "button" }]
+        },
+        {
+          "name": "preview-label",
+          "description": "Accessible label for the built-in preview trigger and the preview overlay.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
+          "values": []
+        },
+        {
+          "name": "selectable",
+          "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Dims the thumbnail and blocks selection, navigation and preview.",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
+          "values": []
+        },
+        {
+          "name": "hide-caption",
+          "description": "Hides the caption row, leaving just the media frame.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/thumbnail"
+        }
+      ]
+    },
+    {
+      "name": "zn-thumbnail-group",
+      "description": "Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a\n\"Show All\" toggle that expands them into a wrapping grid.\n---\n\n\n### **Events:**\n - **zn-expand** - Emitted when the group expands into the full grid.\n- **zn-collapse** - Emitted when the group collapses back to a single row.\n- **zn-change** - Emitted when the selected thumbnail changes (`selectable` groups only).\n\n### **Methods:**\n - **show()** - Expands the group into the full grid.\n- **hide()** - Collapses the group back to a single row.\n\n### **Slots:**\n - _default_ - One or more `zn-thumbnail` elements.\n- **caption** - Replaces the heading text.\n- **actions** - Extra content in the header, before the toggle.\n\n### **CSS Properties:**\n - **--zn-thumbnail-width** - Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute. _(default: undefined)_\n- **--zn-thumbnail-gap** - Gap between thumbnails. Also settable with the `gap` attribute. _(default: undefined)_\n- **--zn-thumbnail-aspect-ratio** - Aspect ratio of every thumbnail in the group. Also settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is inherited by the slotted thumbnails. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header row holding the caption and toggle.\n- **caption** - The heading text.\n- **toggle** - The show all / show less button.\n- **items** - The scrolling row / expanded grid that holds the thumbnails.",
+      "attributes": [
+        {
+          "name": "caption",
+          "description": "The heading shown at the top left of the group.",
+          "values": []
+        },
+        {
+          "name": "expanded",
+          "description": "Expands the group into the full wrapping grid.",
+          "values": []
+        },
+        {
+          "name": "total",
+          "description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
+          "values": []
+        },
+        {
+          "name": "show-all-label",
+          "description": "Label of the expand toggle. The count is appended in brackets.",
+          "values": []
+        },
+        {
+          "name": "show-less-label",
+          "description": "Label of the collapse toggle.",
+          "values": []
+        },
+        {
+          "name": "hide-toggle",
+          "description": "Never render the toggle, even when the row overflows.",
+          "values": []
+        },
+        {
+          "name": "always-toggle",
+          "description": "Always render the toggle, even when every thumbnail already fits on the row.",
+          "values": []
+        },
+        {
+          "name": "selectable",
+          "description": "Manages single selection across the slotted thumbnails.",
+          "values": []
+        },
+        {
+          "name": "aspect-ratio",
+          "description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
+          "values": []
+        },
+        {
+          "name": "thumbnail-width",
+          "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
+          "values": []
+        },
+        {
+          "name": "gap",
+          "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The `value` of the selected thumbnail (`selectable` groups only).",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/thumbnail-group"
+        }
+      ]
+    },
     {
       "name": "zn-tile",
       "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.",
@@ -4956,10 +5271,20 @@
     },
     {
       "name": "zn-well",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **action** - Content displayed on the right hand side of the well.",
       "attributes": [
         { "name": "icon", "values": [] },
-        { "name": "inline", "values": [] }
+        { "name": "inline", "values": [] },
+        {
+          "name": "pre",
+          "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
+          "values": []
+        },
+        {
+          "name": "break-long",
+          "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
+          "values": []
+        }
       ],
       "references": [
         { "name": "Documentation", "url": "https://zinc.style/components/well" }