@kubex/zinc 1.1.125 → 1.1.126

package/dist/custom-elements.json

@@ -27991,7 +27991,7 @@
           ],
           "slots": [
             {
-              "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": "config"
             },
             {
@@ -28510,6 +28510,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_slotsFromAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Pick<PageSectionType, 'slots' | 'slotsMin' | 'slotsMax'>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLTemplateElement"
+                  }
+                }
+              ],
+              "description": "`slots=\"N\"` is a container N slots wide; adding `slots-max` lets each placed\nsection choose its own width between `slots-min` (1 by default) and that. A\nwidth past the slot cap would leave a container with no usable row, so an\nout-of-bounds bound is ignored rather than honoured."
+            },
             {
               "kind": "field",
               "name": "_registerSlottedTemplates",
@@ -28754,6 +28773,25 @@
               ],
               "description": "Adds a new section of a registered type into a container's slot. Returns null if not allowed."
             },
+            {
+              "kind": "method",
+              "name": "setSectionColumns",
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "columns",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "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."
+            },
             {
               "kind": "method",
               "name": "_removeSection",
@@ -29313,7 +29351,7 @@
           "tagNameWithoutPrefix": "page-builder",
           "tagName": "zn-page-builder",
           "customElement": true,
-          "jsDoc": "/**\n * @summary A config-driven page composer: a palette of predefined section types, a linear\n *   canvas of section cards, and an inspector for editing each section's content.\n * @documentation https://zinc.style/components/page-builder\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-collapsible\n * @dependency zn-icon\n * @dependency zn-input\n * @dependency zn-page-palette-item\n * @dependency zn-page-section-card\n *\n * @event zn-page-change - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n * @event zn-page-selection-change - Emitted when the selected section changes. `event.detail.sectionId`.\n *\n * @slot config - `<template type=\"…\">` declarations; never displayed. Each template's attributes\n *   (type, label, icon, icon-library, color, category, description, slots, accepts) declare a\n *   palette entry and its content declares the inspector form for that type. `slots` makes the\n *   section a container with that many child slots; `accepts` is a comma-separated list of the\n *   type keys its slots allow.\n * @slot header-left - Actions shown on the left of the header bar.\n * @slot header-right - Actions shown on the right of the header bar.\n *\n * @csspart base - The grid wrapper.\n * @csspart header - The full-width header action bar (only rendered when header slots are filled).\n * @csspart palette - The left palette panel.\n * @csspart canvas - The centre section-card canvas.\n * @csspart inspector - The right panel while a section is selected.\n * @csspart inspector-header - The inspector's fixed header (icon, section name, type, close).\n * @csspart inspector-body - The inspector's scrolling form area.\n */",
+          "jsDoc": "/**\n * @summary A config-driven page composer: a palette of predefined section types, a linear\n *   canvas of section cards, and an inspector for editing each section's content.\n * @documentation https://zinc.style/components/page-builder\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-collapsible\n * @dependency zn-icon\n * @dependency zn-input\n * @dependency zn-page-palette-item\n * @dependency zn-page-section-card\n *\n * @event zn-page-change - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n * @event zn-page-selection-change - Emitted when the selected section changes. `event.detail.sectionId`.\n *\n * @slot config - `<template type=\"…\">` declarations; never displayed. Each template's attributes\n *   (type, label, icon, icon-library, color, category, description, slots, accepts) declare a\n *   palette entry and its content declares the inspector form for that type. `slots` makes the\n *   section a container that many slots wide — rows are added as they fill — and `slots-min`/\n *   `slots-max` let each placed section choose its own width; `accepts` is a comma-separated\n *   list of the type keys its slots allow.\n * @slot header-left - Actions shown on the left of the header bar.\n * @slot header-right - Actions shown on the right of the header bar.\n *\n * @csspart base - The grid wrapper.\n * @csspart header - The full-width header action bar (only rendered when header slots are filled).\n * @csspart palette - The left palette panel.\n * @csspart canvas - The centre section-card canvas.\n * @csspart inspector - The right panel while a section is selected.\n * @csspart inspector-header - The inspector's fixed header (icon, section name, type, close).\n * @csspart inspector-body - The inspector's scrolling form area.\n */",
           "documentation": "https://zinc.style/components/page-builder",
           "status": "experimental",
           "since": "1.0",
@@ -52643,7 +52681,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.125",
+    "version": "1.1.126",
     "author": "",
     "license": "MIT"
   }

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

@@ -2942,7 +2942,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.",
       "attributes": [
         {
           "name": "name",

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.126",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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",

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. */