@kubex/zinc 1.1.125 → 1.1.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.125",
+  "version": "1.1.126",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/collapsible/collapsible.scss

@@ -80,6 +80,9 @@
 // constant so the content never reflows (and re-wraps) mid-transition.
 .content {
   display: grid;
+  // minmax(0, 1fr), not the implicit auto track: auto floors the column at the
+  // content's min-content width, so nowrap children overflow the host.
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: 0fr;
   opacity: 0;
   transition: grid-template-rows var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),

package/src/components/expanding-action/expanding-action.component.ts

@@ -309,11 +309,13 @@ export default class ZnExpandingAction extends ZincElement {
     return html`
       <zn-dropdown class="expanding-action__dropdown"
                    placement="bottom-end"
-                   @zn-show="${() => {
+                   @zn-show="${(e: Event) => {
+                     if (e.target !== e.currentTarget) return;
                      this.open = true;
                      this._observePlacement();
                    }}"
-                   @zn-hide="${() => {
+                   @zn-hide="${(e: Event) => {
+                     if (e.target !== e.currentTarget) return;
                      this.open = false;
                    }}">
         <zn-button slot="trigger"

package/src/components/page-builder/modules/page-palette-item/page-palette-item.scss

@@ -62,9 +62,12 @@
 }
 
 .item__description {
-  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 0.75rem;
+  line-height: 1.3;
   color: rgb(var(--zn-color-muted-text));
 }

package/src/components/page-builder/page-builder.component.ts

@@ -2,6 +2,7 @@ import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import {
   emptyPageState,
   generateSectionId,
+  MAX_SLOTS,
   PAGE_SECTION_MIME,
   PAGE_TYPE_MIME,
   type PageSection,
@@ -9,6 +10,8 @@ import {
   type PageState,
   sectionChildren,
   sectionSummary,
+  slotColumns,
+  slotCount,
 } from './page.types';
 import { FormControlController, validValidityState } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
@@ -28,8 +31,6 @@ import styles from './page-builder.scss';
 const HISTORY_LIMIT = 50;
 /** Sections beyond this are dropped (with a warning) when external state is applied. */
 const MAX_SECTIONS = 500;
-/** Per-container children beyond this are dropped when external state is applied. */
-const MAX_CHILDREN = 24;
 /** Builder width below which the palette auto-collapses — keep in sync with the @container query in page-builder.scss. */
 const NARROW_WIDTH = 768;
 
@@ -67,8 +68,9 @@ function timeAgo(ms: number): string {
  * @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.
  *
@@ -407,7 +409,6 @@ export default class ZnPageBuilder extends ZincElement {
   private _typeFromTemplate(el: HTMLTemplateElement): PageSectionType | null {
     const type = el.getAttribute('type');
     if (!type) return null;
-    const slots = parseInt(el.getAttribute('slots') ?? '', 10);
     return {
       type,
       label: el.getAttribute('label') ?? type,
@@ -417,11 +418,29 @@ export default class ZnPageBuilder extends ZincElement {
       category: el.getAttribute('category') ?? undefined,
       description: el.getAttribute('description') ?? undefined,
       configTemplate: el,
-      slots: slots > 0 ? slots : undefined,
+      ...this._slotsFromAttributes(el),
       accepts: el.getAttribute('accepts')?.split(',').map(s => s.trim()).filter(Boolean),
     };
   }
 
+  /**
+   * `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(el: HTMLTemplateElement): Pick<PageSectionType, 'slots' | 'slotsMin' | 'slotsMax'> {
+    const bound = (name: string) => {
+      const value = parseInt(el.getAttribute(name) ?? '', 10);
+      return value > 0 && value <= MAX_SLOTS ? value : undefined;
+    };
+    const slots = bound('slots');
+    if (!slots) return {};
+    const max = bound('slots-max');
+    if (max === undefined || max < slots) return { slots };
+    return { slots, slotsMin: Math.min(bound('slots-min') ?? 1, slots), slotsMax: max };
+  }
+
   private _registerSlottedTemplates = () => {
     let added = false;
     this.querySelectorAll<HTMLTemplateElement>('template[slot="config"][type]').forEach(el => {
@@ -446,14 +465,19 @@ export default class ZnPageBuilder extends ZincElement {
     const normalise = (s: PageSection, depth: number): PageSection => {
       const id = !s.id || seen.has(s.id) ? generateSectionId() : s.id;
       seen.add(id);
-      if (depth === 0 && (s.children?.length ?? 0) > MAX_CHILDREN) clippedChildren = true;
+      if (depth === 0 && (s.children?.length ?? 0) > MAX_SLOTS) clippedChildren = true;
+      const type = this.registry.get(s.type);
+      // A hand-edited config can name any width; clamp it to the declared bounds so
+      // the canvas lays the children out the same way the site will.
+      const columns = type?.slotsMax === undefined ? undefined : slotColumns(s, type);
       return {
         id,
         type: s.type,
         label: s.label,
+        ...(columns === undefined ? {} : { columns }),
         data: structuredClone(s.data ?? {}),
         ...(s.children && depth === 0
-          ? { children: s.children.slice(0, MAX_CHILDREN).map(c => (c && typeof c.type === 'string' ? normalise(c, depth + 1) : null)) }
+          ? { children: s.children.slice(0, MAX_SLOTS).map(c => (c && typeof c.type === 'string' ? normalise(c, depth + 1) : null)) }
           : {}),
       };
     };
@@ -463,7 +487,7 @@ export default class ZnPageBuilder extends ZincElement {
     }
     const sections = incoming.slice(0, MAX_SECTIONS).map(s => normalise(s, 0));
     if (clippedChildren) {
-      console.warn(`<zn-page-builder> some sections had more than ${MAX_CHILDREN} children; extras were dropped`);
+      console.warn(`<zn-page-builder> some sections had more than ${MAX_SLOTS} children; extras were dropped`);
     }
     this._history = [];
     this._redoStack = [];
@@ -615,7 +639,7 @@ export default class ZnPageBuilder extends ZincElement {
     const container = this._findSection(containerId);
     const containerType = container ? this.registry.get(container.type) : undefined;
     if (!sectionType || sectionType.slots || !container || !containerType?.slots) return null;
-    if (slotIndex < 0 || slotIndex >= containerType.slots) return null;
+    if (slotIndex < 0 || slotIndex >= slotCount(container, containerType)) return null;
     if (containerType.accepts && !containerType.accepts.includes(type)) return null;
     const children = sectionChildren(container, containerType);
     if (children[slotIndex]) return null;
@@ -627,6 +651,21 @@ export default class ZnPageBuilder extends ZincElement {
     return section;
   }
 
+  /**
+   * 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) {
+    const section = this._findSection(id);
+    const type = section ? this.registry.get(section.type) : undefined;
+    if (!section || type?.slotsMax === undefined) return;
+    const next = slotColumns({ ...section, columns }, type);
+    if (next === slotColumns(section, type)) return;
+    this._pushHistory();
+    this._commit({ sections: this._patchSection(id, s => ({ ...s, columns: next })) });
+  }
+
   private _removeSection(id: string) {
     if (this._isPinned(id)) return;
     const [removed, sections] = this._extract(id);
@@ -706,7 +745,7 @@ export default class ZnPageBuilder extends ZincElement {
     if (this._isPinned(id)) return; // the pinned section stays at the top of the page
     if (this.registry.get(moved.type)?.slots) return; // no containers inside slots
     if (containerType.accepts && !containerType.accepts.includes(moved.type)) return;
-    if (slotIndex < 0 || slotIndex >= containerType.slots) return;
+    if (slotIndex < 0 || slotIndex >= slotCount(container, containerType)) return;
 
     const target = container.children?.[slotIndex] ?? null;
     if (target?.id === id) return;
@@ -716,7 +755,7 @@ export default class ZnPageBuilder extends ZincElement {
     this._pushHistory();
     const sections = structuredClone(this._state.sections);
     const containerRef = sections.find(s => s.id === containerId)!;
-    containerRef.children = Array.from({ length: containerType.slots }, (_, i) => containerRef.children?.[i] ?? null);
+    containerRef.children = sectionChildren(containerRef, containerType);
     const movedCopy = structuredClone(moved);
 
     if (fromTop) {
@@ -973,7 +1012,7 @@ export default class ZnPageBuilder extends ZincElement {
     return html`
       <div class="container">
         ${card}
-        <div class="slots">
+        <div class="slots" style="--pb-slot-columns:${slotColumns(section, type)}">
           ${sectionChildren(section, type).map((child, i) => this._renderSlot(section, child, i))}
         </div>
       </div>`;
@@ -1183,6 +1222,16 @@ export default class ZnPageBuilder extends ZincElement {
             label="Section name"
             .value="${section.label ?? type?.label ?? ''}"
             @zn-change="${(e: Event) => this._renameSection(section.id, String((e.target as ZnInput).value ?? ''))}"></zn-input>
+          ${type?.slotsMax === undefined ? '' : html`
+            <zn-input
+              class="inspector__slots"
+              type="number"
+              label="Slots per row"
+              min="${type.slotsMin ?? 1}"
+              max="${type.slotsMax}"
+              help-text="A new row is added as the last one fills."
+              .value="${String(slotColumns(section, type))}"
+              @zn-change="${(e: Event) => this.setSectionColumns(section.id, Number((e.target as ZnInput).value))}"></zn-input>`}
           ${type?.renderConfig
             ? type.renderConfig(section, data => this._updateSectionData(section.id, data))
             : this._form}

package/src/components/page-builder/page-builder.scss

@@ -510,7 +510,7 @@ zn-page-palette-item {
   display: grid;
   // minmax(0) lets cells shrink below their content's min width — otherwise a
   // child card's text forces the tracks wider than the parent tile.
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(var(--pb-slot-columns, 3), minmax(0, 1fr));
   gap: 8px;
 }
 

package/src/components/page-builder/page-builder.test.ts

@@ -416,6 +416,96 @@ describe('<zn-page-builder>', () => {
     expect(el.addSectionToSlot('article-tile', 'grid', 1), 'occupied slot').to.be.null;
   });
 
+  it('should grow a container by a row as its last row fills', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"grid","type":"article-grid","data":{}}]}'>
+        <template type="article-grid" slot="config" label="Article Grid" slots="3"></template>
+        <template type="article-tile" slot="config" label="Article"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    const slots = () => el.shadowRoot?.querySelectorAll('.slot, .slot__card').length;
+    expect(slots(), 'one empty row to start').to.equal(3);
+
+    el.addSectionToSlot('article-tile', 'grid', 0);
+    el.addSectionToSlot('article-tile', 'grid', 1);
+    await el.updateComplete;
+    expect(slots(), 'a part-filled row grows nothing').to.equal(3);
+
+    el.addSectionToSlot('article-tile', 'grid', 2);
+    await el.updateComplete;
+    expect(slots(), 'the full row adds the next one').to.equal(6);
+
+    el.addSectionToSlot('article-tile', 'grid', 3);
+    await el.updateComplete;
+    expect(slots(), 'and stays at two rows until that one fills').to.equal(6);
+  });
+
+  it('should lay a container out at its own width and reflow children when it changes', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"row","type":"category-row","data":{}}]}'>
+        <template type="category-row" slot="config" label="Category Row" slots="6" slots-max="6"></template>
+        <template type="category-tile" slot="config" label="Category"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    const grid = () => el.shadowRoot?.querySelector<HTMLElement>('.slots');
+    expect(grid()?.style.getPropertyValue('--pb-slot-columns'), 'declared width').to.equal('6');
+    expect(el.shadowRoot?.querySelectorAll('.slot--empty'), 'one row of six').to.have.length(6);
+
+    el.shadowRoot?.querySelector('.canvas zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const width = el.shadowRoot?.querySelector<HTMLInputElement>('.inspector__slots');
+    expect(width, 'slots-per-row control').to.exist;
+    expect(width!.getAttribute('min')).to.equal('1');
+    expect(width!.getAttribute('max')).to.equal('6');
+    expect(width!.value).to.equal('6');
+
+    const kept = el.addSectionToSlot('category-tile', 'row', 4)!;
+    await el.updateComplete;
+
+    width!.value = '3';
+    width!.dispatchEvent(new Event('zn-change', {bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.state.sections[0].columns).to.equal(3);
+    expect(grid()?.style.getPropertyValue('--pb-slot-columns')).to.equal('3');
+    expect(el.state.sections[0].children?.[4]?.id, 'narrowing reflows rather than drops').to.equal(kept.id);
+    expect(el.shadowRoot?.querySelectorAll('.slot, .slot__card'), 'six slots hold it as two rows of three')
+      .to.have.length(6);
+  });
+
+  it('should clamp a container width to the declared bounds', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"row","type":"category-row","data":{},"columns":99}]}'>
+        <template type="category-row" slot="config" label="Category Row" slots="3" slots-max="6"></template>
+        <template type="category-tile" slot="config" label="Category"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    expect(el.state.sections[0].columns, 'clamped to the max').to.equal(6);
+
+    el.setSectionColumns('row', 0);
+    await el.updateComplete;
+    expect(el.state.sections[0].columns, 'clamped to the min').to.equal(1);
+  });
+
+  it('should offer no width control for a fixed-width container', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"grid","type":"article-grid","data":{},"columns":6}]}'>
+        <template type="article-grid" slot="config" label="Article Grid" slots="4"></template>
+        <template type="article-tile" slot="config" label="Article"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelectorAll('.slot--empty'), 'per-instance width ignored').to.have.length(4);
+
+    el.shadowRoot?.querySelector('.canvas zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector('.inspector__slots')).to.not.exist;
+  });
+
   it('should swap children when dropping one filled slot onto another', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"grid","type":"article-grid","data":{}}]}'>

package/src/components/page-builder/page.types.ts

@@ -8,7 +8,9 @@ export interface PageSection {
   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)[];
 }
 
@@ -39,17 +41,50 @@ export interface PageSectionType {
   /** 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 {
+  const columns = type.slots ?? 0;
+  if (type.slotsMax === undefined) return columns;
+  return Math.min(Math.max(section.columns ?? columns, type.slotsMin ?? 1), type.slotsMax);
+}
+
+/**
+ * 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 {
+  const columns = slotColumns(section, type);
+  if (columns < 1) return 0;
+  const placed = section.children?.reduce((last, c, i) => (c ? i + 1 : last), 0) ?? 0;
+  const rows = Math.ceil(placed / columns) || 1;
+  const full = section.children?.slice((rows - 1) * columns, rows * columns)
+    .filter(Boolean).length === columns;
+  return Math.min(columns * (full ? rows + 1 : rows), Math.floor(MAX_SLOTS / columns) * columns);
+}
+
+/** A container section's slot contents, padded/truncated to its slot count. */
 export function sectionChildren(section: PageSection, type: PageSectionType): (PageSection | null)[] {
-  return Array.from({length: type.slots ?? 0}, (_, i) => section.children?.[i] ?? null);
+  return Array.from({length: slotCount(section, type)}, (_, i) => section.children?.[i] ?? null);
 }
 
 /** Drag-and-drop MIME carrying a section type id from the palette to the canvas. */