@kubex/zinc 1.1.125 → 1.1.127

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.125",
+  "version": "1.1.127",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6671,93 +6671,93 @@
           }
         },
         {
-          "name": "zn-opt-group",
-          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
+          "name": "zn-option",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "name": "value",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Disables all options within the group.",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
+            { "name": "", "description": "The option's label." },
             {
-              "name": "",
-              "description": "The default slot for `<zn-option>` elements."
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the menu item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the menu item."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              { "name": "multiple", "type": "boolean" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "current", "type": "boolean" },
+              { "name": "hasHover", "type": "boolean" },
               {
-                "name": "label",
-                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+                "name": "value",
+                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Disables all options within the group.",
+                "description": "Draws the option in a disabled state, preventing selection.",
                 "type": "boolean"
-              }
+              },
+              { "name": "selected", "type": "boolean" }
             ],
             "events": []
           }
         },
         {
-          "name": "zn-option",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+          "name": "zn-opt-group",
+          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
+              "name": "label",
+              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Draws the option in a disabled state, preventing selection.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "selected",
+              "description": "Disables all options within the group.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The option's label." },
-            {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the menu item."
-            },
             {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the menu item."
+              "name": "",
+              "description": "The default slot for `<zn-option>` elements."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "multiple", "type": "boolean" },
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "current", "type": "boolean" },
-              { "name": "hasHover", "type": "boolean" },
               {
-                "name": "value",
-                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
+                "name": "label",
+                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Draws the option in a disabled state, preventing selection.",
+                "description": "Disables all options within the group.",
                 "type": "boolean"
-              },
-              { "name": "selected", "type": "boolean" }
+              }
             ],
             "events": []
           }
@@ -6933,7 +6933,7 @@
         },
         {
           "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.",
+          "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- **setSectionColumns(id: _string_, columns: _number_)** - Sets how many slots per row a container whose type allows a choice lays out,\nclamped to the declared bounds. Children keep their order and reflow into the\nnew width, so nothing is lost by narrowing one.\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 that many slots wide — rows are added as they fill — and `slots-min`/ `slots-max` let each placed section choose its own width; `accepts` is a comma-separated list of the type keys its slots allow.\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
           "doc-url": "",
           "attributes": [
             {
@@ -6983,7 +6983,7 @@
           "slots": [
             {
               "name": "config",
-              "description": "`<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container with that many child slots; `accepts` is a comma-separated list of the type keys its slots allow."
+              "description": "`<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `slots` makes the section a container that many slots wide — rows are added as they fill — and `slots-min`/ `slots-max` let each placed section choose its own width; `accepts` is a comma-separated list of the type keys its slots allow."
             },
             {
               "name": "header-left",
@@ -8253,161 +8253,6 @@
             ]
           }
         },
-        {
-          "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 - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label-tooltip",
-              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "help-text",
-              "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "name",
-              "description": "The name of the radio group, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "size",
-              "description": "The radio group's size. This size will be applied to all child radios",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "horizontal",
-              "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "contained",
-              "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "square",
-              "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "wrap",
-              "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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 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.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "required",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "validationInput", "type": "HTMLInputElement" },
-              { "name": "defaultValue", "type": "string" },
-              {
-                "name": "label",
-                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-                "type": "string"
-              },
-              {
-                "name": "labelTooltip",
-                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "helpText",
-                "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "name",
-                "description": "The name of the radio group, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The radio group's size. This size will be applied to all child radios",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "horizontal",
-                "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
-                "type": "boolean"
-              },
-              {
-                "name": "contained",
-                "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
-                "type": "boolean"
-              },
-              {
-                "name": "square",
-                "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
-                "type": "boolean"
-              },
-              {
-                "name": "wrap",
-                "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
-                "type": "boolean"
-              },
-              {
-                "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 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.",
-                "type": "string"
-              },
-              {
-                "name": "required",
-                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-                "type": "boolean"
-              },
-              { "name": "validity" },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "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- **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.",
@@ -8709,6 +8554,161 @@
             ]
           }
         },
+        {
+          "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 - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label-tooltip",
+              "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The radio group's size. This size will be applied to all child radios",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "horizontal",
+              "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "contained",
+              "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "square",
+              "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "wrap",
+              "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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 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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "validationInput", "type": "HTMLInputElement" },
+              { "name": "defaultValue", "type": "string" },
+              {
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "type": "string"
+              },
+              {
+                "name": "labelTooltip",
+                "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the radio group, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The radio group's size. This size will be applied to all child radios",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "horizontal",
+                "description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
+                "type": "boolean"
+              },
+              {
+                "name": "contained",
+                "description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
+                "type": "boolean"
+              },
+              {
+                "name": "square",
+                "description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
+                "type": "boolean"
+              },
+              {
+                "name": "wrap",
+                "description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
+                "type": "boolean"
+              },
+              {
+                "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 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.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              { "name": "validity" },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-schedule-builder",
           "description": "Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of\ntime ranges, and posts the result as JSON.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the schedule changes.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks 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: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **setDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, in the save timezone.\n- **getDay(day: _ScheduleDay_): _ScheduleRange[]_** - Reads the hours for a single day, in the save timezone.\n- **setDisplayDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, given in the display timezone.\n\n### **Slots:**\n - **label** - The schedule's label. Alternatively, use the `label` attribute.\n- **help-text** - Text that describes how to use the schedule. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--slot-height** - The height of a single time slot in the calendar. Defaults to `18px`. _(default: undefined)_\n- **--gutter-width** - The width of the calendar's time gutter. Defaults to `64px`. _(default: undefined)_\n- **--open-color** - The fill used for open hours. _(default: undefined)_\n- **--reduced-color** - The fill used for hours an exception removes. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the builder, label and help text.\n- **base** - The component's base wrapper.\n- **toolbar** - The row above the builder holding the hint, legend and view toggle.\n- **calendar** - The calendar view wrapper.\n- **list** - The form (list) view wrapper.\n- **summary** - The summary panel beside the calendar.",

package/dist/zn.d.ts

@@ -11372,7 +11372,9 @@ declare module "components/page-builder/page.types" {
         label?: string;
         /** Section content, keyed by field name (the inspector's `name` attributes). */
         data: Record<string, unknown>;
-        /** Slot contents for container sections, sized to the type's `slots`. Empty slots are null. */
+        /** Slots per row for a container whose type allows a choice; the type's default applies otherwise. */
+        columns?: number;
+        /** Slot contents for container sections, sized to {@link slotCount}. Empty slots are null. */
         children?: (PageSection | null)[];
     }
     /** The complete serialisable state of a page. Order = render order. */
@@ -11401,14 +11403,32 @@ declare module "components/page-builder/page.types" {
         /** Programmatic inspector body — takes precedence over `configTemplate`. */
         renderConfig?: (section: PageSection, update: (data: Record<string, unknown>) => void) => TemplateResult;
         /**
-         * Number of child slots this section offers on the canvas (a container tile);
-         * rendered as a 3-column grid. Containers cannot be placed inside other containers.
+         * Slots per row on the canvas, and what makes a section a container. Rows are
+         * added as they fill, so this is a width and not a capacity. Containers cannot
+         * be placed inside other containers.
          */
         slots?: number;
+        /** Lower bound of a per-section column count. Defaults to 1 when `slotsMax` is set. */
+        slotsMin?: number;
+        /** Upper bound of a per-section column count. Its presence is what makes the width editable. */
+        slotsMax?: number;
         /** Section type keys allowed in this container's slots. Omit to allow any non-container type. */
         accepts?: string[];
     }
-    /** A container section's slot contents, padded/truncated to the type's slot count. */
+    /** Per-container children beyond this are dropped when external state is applied. */
+    export const MAX_SLOTS = 24;
+    /**
+     * Slots per row for a placed container: its own choice when the type allows one,
+     * clamped to the declared bounds, else the type's fixed width.
+     */
+    export function slotColumns(section: PageSection, type: PageSectionType): number;
+    /**
+     * How many slots a placed container shows: enough rows to hold every child it
+     * already has, plus a fresh row once the last one fills. Empty rows are never
+     * offered ahead of being needed, and the total stays within {@link MAX_SLOTS}.
+     */
+    export function slotCount(section: PageSection, type: PageSectionType): number;
+    /** A container section's slot contents, padded/truncated to its slot count. */
     export function sectionChildren(section: PageSection, type: PageSectionType): (PageSection | null)[];
     /** Drag-and-drop MIME carrying a section type id from the palette to the canvas. */
     export const PAGE_TYPE_MIME = "application/x-zn-page-type";
@@ -11569,8 +11589,9 @@ declare module "components/page-builder/page-builder.component" {
      * @slot 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.
+     *   section a container that many slots wide — rows are added as they fill — and `slots-min`/
+     *   `slots-max` let each placed section choose its own width; `accepts` is a comma-separated
+     *   list of the type keys its slots allow.
      * @slot header-left - Actions shown on the left of the header bar.
      * @slot header-right - Actions shown on the right of the header bar.
      *
@@ -11701,6 +11722,13 @@ declare module "components/page-builder/page-builder.component" {
         protected willUpdate(changed: PropertyValues): void;
         protected firstUpdated(changed: PropertyValues): void;
         private _typeFromTemplate;
+        /**
+         * `slots="N"` is a container N slots wide; adding `slots-max` lets each placed
+         * section choose its own width between `slots-min` (1 by default) and that. A
+         * width past the slot cap would leave a container with no usable row, so an
+         * out-of-bounds bound is ignored rather than honoured.
+         */
+        private _slotsFromAttributes;
         private _registerSlottedTemplates;
         /** Normalises and installs an externally provided state; resets selection. */
         private _applyExternalState;
@@ -11736,6 +11764,12 @@ declare module "components/page-builder/page-builder.component" {
         addSection(type: string, index?: number): PageSection | null;
         /** Adds a new section of a registered type into a container's slot. Returns null if not allowed. */
         addSectionToSlot(type: string, containerId: string, slotIndex: number): PageSection | null;
+        /**
+         * Sets how many slots per row a container whose type allows a choice lays out,
+         * clamped to the declared bounds. Children keep their order and reflow into the
+         * new width, so nothing is lost by narrowing one.
+         */
+        setSectionColumns(id: string, columns: number): void;
         private _removeSection;
         private _duplicateSection;
         /** Moves a section (top-level or slotted) to a top-level position. */