@kubex/zinc 1.1.91 → 1.1.94

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

@@ -50,7 +50,6 @@
     --inspector-col: 0px;
 
     .inspector {
-      padding: 0;
       border-left: none;
     }
   }
@@ -63,8 +62,10 @@
     --palette-col: 240px;
   }
 
+  // 300, not 280: below that the inspector's toggle rows wrap their switch
+  // under the label and the field rhythm breaks down.
   .builder:not(.builder--inspector-collapsed) {
-    --inspector-col: 280px;
+    --inspector-col: 300px;
   }
 }
 
@@ -249,21 +250,177 @@ zn-page-palette-item {
     rgb(var(--zn-body));
 }
 
+// Right column — anatomy shared with flow-builder's inspector (icon tile +
+// title/type head over a scrolling body), so the two builders read alike.
 .inspector {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 14px;
   border-left: 1px solid rgb(var(--zn-border-color));
-  overflow-y: auto;
+  overflow: hidden; // the body scrolls, not the panel — the head stays put
+  animation: inspector-in 0.18s ease;
+
+  &-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 0 0 auto;
+    padding: 16px;
+    border-bottom: 1px solid rgb(var(--zn-border-color));
+
+    &__icon {
+      --section-accent: rgb(var(--zn-color-primary));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      color: var(--section-accent);
+      background: color-mix(in srgb, var(--section-accent) 15%, transparent);
+    }
+
+    // Long section names truncate rather than pushing the close button out.
+    &__text {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    &__title {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    &__type {
+      font-size: 0.75rem;
+      color: rgb(var(--zn-color-muted-text));
+    }
+
+    &__title,
+    &__type {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // Field typography and rhythm for the stamped config form. Host themes size
+  // form labels for full-width forms, which reads oversized in a ~343px panel —
+  // the --zn-input-* tokens inherit into every zinc control's shadow root, so
+  // retuning them here needs no per-control ::part() list.
+  &-body {
+    --pb-field-label-size: 0.8125rem;
+    --pb-field-note-size: 0.75rem;
+    --pb-field-gap: 22px;
+    --pb-label-gap: 6px;
+    --pb-note-gap: 5px;
+    --zn-input-label-font-size-medium: var(--pb-field-label-size);
+    --zn-input-label-font-weight: 600;
+    --zn-input-label-line-height: 1.3;
+    --zn-input-label-color: rgb(var(--zn-text));
+    --zn-input-help-text-font-size-medium: var(--pb-field-note-size);
+    --zn-input-help-text-color: rgb(var(--zn-color-muted-text));
+    --zn-toggle-margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    // Extra bottom padding so the last field isn't flush against the scroll end.
+    padding: 18px 16px 24px;
+    gap: var(--pb-field-gap);
+
+    // A field's own internal spacing comes from --zn-spacing-* tokens, which
+    // zinc leaves to the host theme — undefined here, so those declarations
+    // drop out and every field collapses onto the flex gap alone. Set the
+    // rhythm explicitly instead: tight inside a field, wide between them, so
+    // a label reads as belonging to the control below it rather than floating
+    // between two.
+    ::part(form-control-label) {
+      margin-bottom: var(--pb-label-gap);
+    }
+
+    ::part(form-control-input) {
+      margin: 0;
+    }
+
+    ::part(form-control-help-text) {
+      margin-top: var(--pb-note-gap);
+    }
 
+    // zn-toggle sizes its own label and description from a fixed type scale
+    // rather than the --zn-input-label-* tokens, so bring it into line through
+    // its parts — otherwise a toggle row outweighs every field around it.
+    zn-toggle::part(label) {
+      font-size: var(--pb-field-label-size);
+      font-weight: 600;
+    }
+
+    zn-toggle::part(description) {
+      font-size: var(--pb-field-note-size);
+      margin-top: var(--pb-note-gap);
+    }
+
+    // The icon picker's trigger is a content-width button, which reads as a
+    // stranded chip in a column of full-width fields. Fill the row (the clear
+    // button, when there is a value, still takes its space beside it).
+    zn-icon-picker::part(trigger) {
+      flex: 1 1 auto;
+    }
+
+    > *,
+    .inspector__form > * {
+      margin-block: 0;
+    }
+
+    // The stamped wrapper is a layout box, not a field — it carries the same
+    // rhythm as the body so the host's controls space identically.
+    > .inspector__form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--pb-field-gap);
+    }
+  }
+
+  &-hint {
+    margin: 0;
+    font-size: 0.75rem;
+    color: rgb(var(--zn-color-muted-text));
+  }
 }
 
-.inspector__body,
-.inspector__form {
+.inspector-close {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  color: rgb(var(--zn-color-muted-text));
+  background: transparent;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(var(--zn-text));
+    background: rgb(var(--zn-color-tab));
+  }
+}
+
+// The panel slides in from the right as a section is selected (as flow-builder).
+@keyframes inspector-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .declarations {

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

@@ -112,6 +112,35 @@ describe('<zn-page-builder>', () => {
     expect(el.state.sections[0].type).to.equal('gone'); // preserved through save
   });
 
+  it('should summarise a card with the chosen option label, not the stored value', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder
+        config='{"sections":[{"id":"s1","type":"tile","data":{"icon":"folder","article":"1a2b3c"}}]}'>
+        <template type="tile" slot="config" label="Article">
+          <zn-icon-picker name="icon"></zn-icon-picker>
+          <zn-select name="article">
+            <zn-option value="1a2b3c">Getting Started</zn-option>
+          </zn-select>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    const card = el.shadowRoot?.querySelector('zn-page-section-card');
+    expect(card?.getAttribute('summary')).to.equal('Getting Started');
+  });
+
+  it('should fall back to the first string value when nothing matches an option', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{"title":"Welcome"}}]}'>
+        <template type="hero" slot="config" label="Hero">
+          <input name="title">
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('zn-page-section-card')?.getAttribute('summary')).to.equal('Welcome');
+  });
+
   it('should round-trip section data through the inspector name binding', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{"title":"Before"}}]}'>
@@ -206,6 +235,34 @@ describe('<zn-page-builder>', () => {
     expect(el.state.sections[0].data.categories).to.deep.equal(['billing', 'setup']);
   });
 
+  // zn-icon-picker keeps `value` as a plain accessor over its reactive `icon`,
+  // so it only prefills if the stamped element is upgraded before assignment —
+  // otherwise the assignment shadows the setter and the picker renders empty.
+  it('should prefill a control whose value is a plain accessor', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{"icon":"receipt"}}]}'>
+        <template type="hero" slot="config" label="Hero">
+          <zn-icon-picker name="icon" label="Icon" no-color no-library></zn-icon-picker>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const picker = el.shadowRoot!.querySelector<HTMLElement & { value: string; icon: string }>(
+      '.inspector__form zn-icon-picker[name="icon"]')!;
+    expect(picker, 'stamped icon picker').to.exist;
+    expect(picker.value).to.equal('receipt');
+    expect(picker.icon, 'reached the reactive property, not an own shadowing one').to.equal('receipt');
+
+    picker.value = 'payments';
+    picker.dispatchEvent(new CustomEvent('zn-change', {bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.state.sections[0].data.icon).to.equal('payments');
+  });
+
   it('should rename a section from the inspector', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>
@@ -224,6 +281,83 @@ describe('<zn-page-builder>', () => {
     expect(el.state.sections[0].label).to.equal('My Hero');
   });
 
+  it('should head the inspector with the section name and its type', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[
+        {"id":"s1","type":"hero","label":"Top banner","data":{}},
+        {"id":"s2","type":"hero","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero" icon="star">
+          <zn-input name="title" label="Title"></zn-input>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    const cards = el.shadowRoot?.querySelectorAll('zn-page-section-card');
+    cards?.[0].dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const head = el.shadowRoot?.querySelector('[part="inspector-header"]');
+    expect(head, 'inspector header').to.exist;
+    expect(head?.querySelector('.inspector-head__title')?.textContent?.trim()).to.equal('Top banner');
+    expect(head?.querySelector('.inspector-head__type')?.textContent?.trim()).to.equal('Hero');
+    expect(head?.querySelector('zn-icon')?.getAttribute('src')).to.equal('star');
+    expect(el.shadowRoot?.querySelector('[part="inspector-body"] .inspector__rename'), 'rename in body').to.exist;
+
+    // An unnamed section's title already is the type label — don't print it twice.
+    cards?.[1].dispatchEvent(new Event('click'));
+    await el.updateComplete;
+    const unnamed = el.shadowRoot?.querySelector('[part="inspector-header"]');
+    expect(unnamed?.querySelector('.inspector-head__title')?.textContent?.trim()).to.equal('Hero');
+    expect(unnamed?.querySelector('.inspector-head__type'), 'no duplicate type line').to.not.exist;
+  });
+
+  it('should clear the selection from the inspector close button', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector('[part="inspector"]')).to.exist;
+
+    el.shadowRoot?.querySelector<HTMLButtonElement>('.inspector-close')?.click();
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector('[part="inspector"]'), 'inspector closes').to.not.exist;
+  });
+
+  it('should hint when the selected type has no settings', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"s1","type":"divider","data":{}}]}'>
+        <template type="divider" slot="config" label="Divider"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.inspector-hint')).to.exist;
+  });
+
+  it('should lay stamped toggles out as a row, honouring a host-set position', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero">
+          <zn-toggle name="showSearch" label="Show search"></zn-toggle>
+          <zn-toggle name="showNav" label="Show nav" label-position="top"></zn-toggle>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const form = el.shadowRoot?.querySelector('.inspector__form');
+    expect(form?.querySelector('zn-toggle[name="showSearch"]')?.getAttribute('label-position')).to.equal('left');
+    expect(form?.querySelector('zn-toggle[name="showNav"]')?.getAttribute('label-position')).to.equal('top');
+  });
+
   it('should undo and redo a section add', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder>

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

@@ -68,8 +68,28 @@ export function generateSectionId(): string {
   return `s-${Date.now().toString(36)}-${(sectionCounter++).toString(36)}`;
 }
 
-/** Card summary: the section's first non-empty string value, else the type description. */
+/**
+ * The visible text of the option a value was chosen from, so a card summarises a
+ * select by what the user picked rather than by the opaque id it stores.
+ */
+function optionLabel(type: PageSectionType | undefined, name: string, value: string): string {
+  const control = type?.configTemplate?.content.querySelector(`[name="${CSS.escape(name)}"]`);
+  const escaped = CSS.escape(value);
+  const option = control?.querySelector(`option[value="${escaped}"], zn-option[value="${escaped}"]`);
+  return option?.textContent?.trim() ?? '';
+}
+
+/**
+ * Card summary: the label of the first value chosen from a select, else the first
+ * non-empty string value, else the type description. Options win over field order
+ * so a tile reads as its linked item however its other fields were filled in.
+ */
 export function sectionSummary(section: PageSection, type?: PageSectionType): string {
-  const first = Object.values(section.data).find(v => typeof v === 'string' && v.trim() !== '');
-  return (first as string) ?? type?.description ?? '';
+  const strings = Object.entries(section.data)
+    .filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1].trim() !== '');
+  for (const [name, value] of strings) {
+    const label = optionLabel(type, name, value);
+    if (label) return label;
+  }
+  return strings[0]?.[1] ?? type?.description ?? '';
 }

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

@@ -56,16 +56,23 @@
   display: flex;
   flex-direction: column;
   gap: var(--zn-spacing-medium);
+
+  padding-top: var(--zn-spacing-medium);
+}
+
+.navigation-group:first-of-type {
+  padding-top: 0;
 }
 
 .navigation-group h4 {
   margin: 0;
-  padding: var(--zn-spacing-medium) 0;
+  padding: 0;
   color: rgb(var(--zn-text-heading));
   font-size: var(--zn-font-size-medium);
   font-weight: var(--zn-font-weight-semibold);
 }
 
+
 .navigation-group .navigation-item {
   color: rgb(var(--zn-text));
   font-size: var(--zn-font-size-medium);
@@ -73,6 +80,7 @@
   display: flex;
   align-items: center;
   gap: var(--zn-spacing-small);
+  min-height: var(--zn-icon-size);
 }
 
 .navigation-item.active {

package/src/components/panel/panel.component.ts

@@ -76,6 +76,10 @@ export default class ZnPanel extends ZincElement {
     const hasActionSlot = this.hasSlotController.test('actions');
     const hasFooterSlot = this.hasSlotController.test('footer');
     const hasHeader = this.caption || hasActionSlot;
+    // Transparent panels with no vertical body padding have nothing to separate the header from,
+    // so the underline is just a stray rule across the page.
+    const isFlushY = this.flush || this.tabbed || this.flushY;
+    const underlineHeader = !this.headerBorderless && !(this.transparent && isFlushY);
 
     return html`
       <div class="${classMap({
@@ -98,7 +102,7 @@ export default class ZnPanel extends ZincElement {
           ${hasHeader ? html`
             <zn-header class="${classMap({
               "panel__header": true,
-              "panel__header--underline": !this.headerBorderless,
+              "panel__header--underline": underlineHeader,
             })}"
                        icon="${this.icon}"
                        caption="${this.caption}"

package/src/components/priority-list/priority-list.component.ts

@@ -51,6 +51,7 @@ export interface PriorityItem {
  *
  * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.
  * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.
+ * @cssproperty --zn-priority-list-actions-gap - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`.
  * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.
  * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.
  */

package/src/components/priority-list/priority-list.scss

@@ -7,6 +7,7 @@
 
   --zn-priority-list-item-gap: var(--zn-spacing-2x-small);
   --zn-priority-list-item-padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  --zn-priority-list-actions-gap: var(--zn-spacing-small);
   --zn-priority-list-handle-color: var(--zn-color-neutral-400);
   --zn-priority-list-priority-color: var(--zn-color-neutral-600);
 }
@@ -134,7 +135,7 @@
 .priority-list__actions {
   display: flex;
   align-items: center;
-  gap: var(--zn-spacing-2x-small);
+  gap: var(--zn-priority-list-actions-gap);
   flex-shrink: 0;
   // Re-enable pointer events so action buttons are clickable
   pointer-events: auto;

package/src/components/schedule-builder/index.ts

@@ -0,0 +1,12 @@
+import ZnScheduleBuilder from './schedule-builder.component';
+
+export * from './schedule-builder.component';
+export default ZnScheduleBuilder;
+
+ZnScheduleBuilder.define('zn-schedule-builder');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-schedule-builder': ZnScheduleBuilder;
+  }
+}