@kubex/zinc 1.1.140 → 1.1.142

package/package.json

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

package/src/components/form-group/form-group.scss

@@ -102,8 +102,18 @@
   }
 }
 
+// The 70px is the gutter between the label column and the fields. Once zn-cols
+// wraps them into one column it is dead space above the fields instead, so it
+// only applies at the width the two columns actually fit — the same 670px the
+// sticky label uses.
 zn-cols::part(base) {
-  gap: 70px;
+  gap: var(--zn-gap);
+}
+
+@container (min-width: 670px) {
+  zn-cols::part(base) {
+    gap: 70px;
+  }
 }
 
 

package/src/components/form-group/form-group.test.ts

@@ -126,4 +126,20 @@ describe('<zn-form-group>', () => {
       expect(after).to.be.closeTo(before, 4);
     });
   });
+
+  it('should gutter the label column only while it sits beside the fields', async () => {
+    const wide = await fixture<HTMLElement>(html`
+      <div style="width: 900px; container-type: inline-size;">
+        <zn-form-group label="Wide"><div>Field</div></zn-form-group>
+      </div>`);
+    const wideCols = wide.querySelector('zn-form-group')!.shadowRoot!.querySelector('zn-cols')!;
+    expect(getComputedStyle(wideCols.shadowRoot!.querySelector('.cols')!).columnGap).to.equal('70px');
+
+    const narrow = await fixture<HTMLElement>(html`
+      <div style="width: 400px; container-type: inline-size;">
+        <zn-form-group label="Narrow"><div>Field</div></zn-form-group>
+      </div>`);
+    const narrowCols = narrow.querySelector('zn-form-group')!.shadowRoot!.querySelector('zn-cols')!;
+    expect(getComputedStyle(narrowCols.shadowRoot!.querySelector('.cols')!).rowGap).to.not.equal('70px');
+  });
 });

package/src/components/linked-select/linked-select.component.ts

@@ -39,10 +39,10 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property() name: string = "";
-  @property() value: string;
+  @property() value: string | string[] = '';
 
   /** The default value of the form control. Primarily used for resetting the form control. */
-  @defaultValue() defaultValue: string = '';
+  @defaultValue() defaultValue: string | string[] = '';
 
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Array}) options: linkedSelectOptions;
@@ -54,6 +54,14 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   /** Automatically select the first option of the linked group when no value is set. */
   @property({attribute: 'select-first', type: Boolean}) selectFirst = false;
 
+  /** Allows more than one option of the linked group to be selected. */
+  @property({type: Boolean, reflect: true}) multiple = false;
+
+  @property() placeholder = '';
+  @property({type: Boolean}) clearable = false;
+  @property({type: Boolean}) search = false;
+  @property({attribute: 'help-text'}) helpText = '';
+
   @query('zn-select') input: ZnSelect;
 
   private linkedSelectElement: HTMLSelectElement | ZnSelect;
@@ -100,6 +108,15 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
     }
   }
 
+  protected willUpdate(_changedProperties: PropertyValues) {
+    super.willUpdate(_changedProperties);
+    // An unset value is the empty string, which the inner select would read as a
+    // single selection of "".
+    if (this.multiple && !Array.isArray(this.value)) {
+      this.value = this.value ? this.value.split(' ') : [];
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     this.linkedSelectElement?.addEventListener('zn-change', this.handleLinkedSelectChange);
     this.input.addEventListener('zn-change', this.handleChange);
@@ -131,21 +148,31 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   }
 
   public handleLinkedSelectChange = () => {
+    const previous = this.serialisedValue();
     // The inner select only auto-selects on slotchange, which lit skips when it
     // can reuse the option elements of the outgoing group, so the first option of
     // the new group is resolved here rather than left to the select.
-    this.value = this.selectFirst ? Object.keys(this.currentOptions())[0] ?? "" : "";
+    this.value = this.multiple ? [] : this.selectFirst ? Object.keys(this.currentOptions())[0] ?? "" : "";
     this.requestUpdate();
     this.formControlController.updateValidity();
+    // A host reading the value off change events would otherwise keep the
+    // selection made against the previous group.
+    if (previous !== this.serialisedValue()) {
+      this.emit('zn-change');
+    }
   };
 
+  private serialisedValue(): string {
+    return Array.isArray(this.value) ? this.value.join(' ') : this.value;
+  }
+
   public handleChange(e: Event) {
     this.value = (e.target as HTMLSelectElement).value;
     this.formControlController.updateValidity();
   }
 
   handleSelectChange = (e: ZnSelectEvent) => {
-    this.value = (e.target as ZnSelect).value as string;
+    this.value = (e.target as ZnSelect).value;
   }
 
   /** The options of the group the linked select currently points at. */
@@ -171,7 +198,12 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
                  id="main-input"
                  cache-key="${this.cacheKey}"
                  ?select-first="${this.selectFirst}"
-                 value="${this.value}"
+                 ?multiple="${this.multiple}"
+                 ?clearable="${this.clearable}"
+                 ?search="${this.search}"
+                 placeholder="${this.placeholder}"
+                 help-text="${this.helpText}"
+                 .value="${this.value}"
                  @zn-change=${this.handleSelectChange}
                  label="${this.label}">
         ${options && Object.entries(options).map(([key, value]) => html`

package/src/components/linked-select/linked-select.test.ts

@@ -1,17 +1,103 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import type ZnLinkedSelect from './linked-select.component';
+import type ZnSelect from '../select';
+
+const options = {
+  '': {},
+  'cat-1': { 'cat-1-a': 'Disputes', 'cat-1-b': 'Refunds' },
+  'cat-2': { 'cat-2-a': 'Delivery' },
+};
+
+async function group(multiple = false) {
+  const wrapper = await fixture<HTMLDivElement>(html`
+    <div>
+      <zn-select id="parent" name="parent">
+        <zn-option value="cat-1">Billing</zn-option>
+        <zn-option value="cat-2">Orders</zn-option>
+      </zn-select>
+      <zn-linked-select linked-select="parent" name="child"
+                        ?multiple=${multiple} .options=${options}></zn-linked-select>
+    </div>`);
+
+  return {
+    parent: wrapper.querySelector<ZnSelect>('zn-select')!,
+    child: wrapper.querySelector<ZnLinkedSelect>('zn-linked-select')!,
+  };
+}
+
+function childOptions(child: ZnLinkedSelect): string[] {
+  return [...child.shadowRoot!.querySelectorAll('zn-option')].map(option => option.getAttribute('value')!);
+}
 
 describe('<zn-linked-select>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html`
-      <zn-select name="linked-select" id="select-1">
-        <option value="option1">Option 1</option>
-      </zn-select>
+    const { child } = await group();
+    expect(child).to.exist;
+  });
+
+  it('should only offer the options of the linked select group', async () => {
+    const { parent, child } = await group();
+
+    parent.value = 'cat-1';
+    parent.emit('zn-change');
+    await waitUntil(() => childOptions(child).length === 2);
+
+    expect(childOptions(child)).to.deep.equal(['cat-1-a', 'cat-1-b']);
+
+    parent.value = 'cat-2';
+    parent.emit('zn-change');
+    await waitUntil(() => childOptions(child).length === 1);
+
+    expect(childOptions(child)).to.deep.equal(['cat-2-a']);
+  });
+
+  it('should offer no options until the linked select has a value', async () => {
+    const { child } = await group();
+    expect(childOptions(child)).to.deep.equal([]);
+  });
+
+  it('should keep an array value when multiple', async () => {
+    const { parent, child } = await group(true);
+    parent.value = 'cat-1';
+    parent.emit('zn-change');
+    await waitUntil(() => childOptions(child).length === 2);
+
+    child.value = ['cat-1-a', 'cat-1-b'];
+    await child.updateComplete;
+
+    expect(child.input.multiple).to.be.true;
+    expect(child.input.value).to.deep.equal(['cat-1-a', 'cat-1-b']);
+  });
+
+  it('should start a multiple select with no selection', async () => {
+    const { child } = await group(true);
+    expect(child.value).to.deep.equal([]);
+    expect(child.input.value).to.deep.equal([]);
+  });
+
+  it('should clear a multiple selection when the linked select changes', async () => {
+    const { parent, child } = await group(true);
+    child.value = ['cat-1-a'];
+    await child.updateComplete;
+
+    parent.value = 'cat-2';
+    const changed = oneEvent(child, 'zn-change');
+    parent.emit('zn-change');
+    await changed;
+
+    expect(child.value).to.deep.equal([]);
+  });
+
+  it('should not announce a change when the value was already empty', async () => {
+    const { parent, child } = await group(true);
+    let changes = 0;
+    child.addEventListener('zn-change', () => changes++);
 
-      <zn-linked-select linked-select="select-1"
-                        options="{&quot;-&quot;:{&quot;-&quot;:&quot;Select Department&quot;},&quot;FID:DEP:1677585809:MZxvTiWlzBlSG&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:DFP20NM0Q&quot;:&quot;Generic&quot;,&quot;FID:TKT:QUE:1678099064:8nGJ5OQfp&quot;:&quot;Money Back&quot;},&quot;FID:DEP:1677585809:Kd83L0aIhsGpB&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:ma9I3ORGu&quot;:&quot;Generic&quot;},&quot;FID:DEP:1677585809:3mBpgQnrkzLSO&quot;:{&quot;-&quot;:&quot;Select Queue&quot;,&quot;FID:TKT:QUE:1677585809:cFvFFL8o6&quot;:&quot;Generic&quot;}}">
-      </zn-linked-select> `);
+    parent.value = 'cat-2';
+    parent.emit('zn-change');
+    await child.updateComplete;
 
-    expect(el).to.exist;
+    expect(changes).to.equal(0);
   });
 });

package/src/components/opt-group/opt-group.component.ts

@@ -47,6 +47,25 @@ export default class ZnOptGroup extends ZincElement {
     this.hidden = options.length > 0 && options.every(option => option.hidden);
   }
 
+  /**
+   * @internal - Marks the group as the first visible one so it doesn't draw a separator against the top of the
+   * listbox. Structural `:first-child` can't see that earlier siblings were hidden by a search filter.
+   */
+  updateSeparator() {
+    let previous = this.previousElementSibling;
+    while (previous && !ZnOptGroup.isRendered(previous)) {
+      previous = previous.previousElementSibling;
+    }
+    this.toggleAttribute('data-first-visible', previous === null);
+  }
+
+  private static isRendered(el: Element): boolean {
+    if (el instanceof HTMLSlotElement) {
+      return el.assignedElements().some(assigned => ZnOptGroup.isRendered(assigned));
+    }
+    return !(el instanceof HTMLElement) || !el.hidden;
+  }
+
   render() {
     return html`
       <div part="base" class="opt-group">

package/src/components/opt-group/opt-group.scss

@@ -8,7 +8,7 @@
   display: none !important;
 }
 
-:host(:not(:first-child)) {
+:host(:not(:first-child):not([data-first-visible])) {
   border-block-start: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
   margin-block-start: var(--zn-spacing-2x-small);
 }

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

@@ -1,4 +1,4 @@
-import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS } from 'lit';
 import {
   emptyDragImage,
   emptyPageState,
@@ -35,6 +35,12 @@ const MAX_SECTIONS = 500;
 /** Builder width below which the palette auto-collapses — keep in sync with the @container query in page-builder.scss. */
 const NARROW_WIDTH = 768;
 
+// 300 matches the narrow-container floor in the stylesheet: below it the
+// inspector's toggle rows wrap their switch under the label.
+const MIN_INSPECTOR_WIDTH = 300;
+const MIN_CANVAS_WIDTH = 200;
+const RESIZE_STEP = 20;
+
 const AUTO_SAVE_DEFAULT_MINUTES = 5;
 const AUTO_SAVE_TTL_MS = 24 * 60 * 60 * 1000;
 
@@ -158,6 +164,8 @@ export default class ZnPageBuilder extends ZincElement {
   @state() private _slotPicker: { containerId: string; index: number } | null = null;
   /** The stamped config form for the selected section; rebuilt on selection change. */
   @state() private _form: HTMLDivElement | null = null;
+  @state() private _inspectorWidth: number | null = null;
+  @state() private _inspectorWide = false;
 
   private readonly _hasSlot = new HasSlotController(this, 'header-left', 'header-right');
 
@@ -1301,6 +1309,7 @@ export default class ZnPageBuilder extends ZincElement {
     // A content-free template stamps no controls — leave the form null so the
     // inspector shows its "no settings" hint rather than a blank gap.
     this._form = form.childElementCount ? form : null;
+    this._inspectorWide = Boolean(this._form?.querySelector('zn-remarkd-editor, [input-type="remarkd"]'));
   }
 
   private _isBooleanControl(control: HTMLElement, value: unknown): boolean {
@@ -1336,6 +1345,41 @@ export default class ZnPageBuilder extends ZincElement {
     this._commit({ sections: this._patchSection(id, s => ({ ...s, label: label || undefined })) });
   }
 
+  /** Width the inspector may be dragged to, against the builder's own width. */
+  private _clampInspector(width: number): number {
+    const room = this.getBoundingClientRect().width - MIN_CANVAS_WIDTH;
+    return Math.round(Math.min(Math.max(width, MIN_INSPECTOR_WIDTH), Math.max(room, MIN_INSPECTOR_WIDTH)));
+  }
+
+  private _inspectorRect(): number {
+    return this.shadowRoot?.querySelector('.inspector')?.getBoundingClientRect().width ?? MIN_INSPECTOR_WIDTH;
+  }
+
+  private _onResizeStart = (e: PointerEvent) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = this._inspectorWidth ?? this._inspectorRect();
+    // The handle is on the inspector's left edge, so dragging left widens it.
+    const move = (ev: PointerEvent) => {
+      this._inspectorWidth = this._clampInspector(startWidth + startX - ev.clientX);
+    };
+    const stop = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', stop);
+      window.removeEventListener('pointercancel', stop);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', stop);
+    window.addEventListener('pointercancel', stop);
+  };
+
+  private _onResizeKey = (e: KeyboardEvent) => {
+    const step = e.key === 'ArrowLeft' ? RESIZE_STEP : e.key === 'ArrowRight' ? -RESIZE_STEP : 0;
+    if (!step) return;
+    e.preventDefault();
+    this._inspectorWidth = this._clampInspector((this._inspectorWidth ?? this._inspectorRect()) + step);
+  };
+
   private _renderInspector() {
     const section = this._selectedSection();
     if (!section) return html``;
@@ -1345,6 +1389,15 @@ export default class ZnPageBuilder extends ZincElement {
     const typeLabel = type?.label ?? section.type;
     return html`
       <aside part="inspector" class="inspector">
+        <div
+          part="inspector-resize"
+          class="inspector-resize"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize section settings"
+          tabindex="0"
+          @pointerdown="${this._onResizeStart}"
+          @keydown="${this._onResizeKey}"></div>
         <div part="inspector-header" class="inspector-head">
           <span
             class="inspector-head__icon"
@@ -1401,7 +1454,8 @@ export default class ZnPageBuilder extends ZincElement {
     return html`
       <div
         part="base"
-        class="builder ${this._selectedId ? 'builder--inspecting' : ''} ${this.paletteCollapsed ? 'builder--palette-collapsed' : ''} ${this.inspectorCollapsed ? 'builder--inspector-collapsed' : ''}"
+        class="builder ${this._selectedId ? 'builder--inspecting' : ''} ${this.paletteCollapsed ? 'builder--palette-collapsed' : ''} ${this.inspectorCollapsed ? 'builder--inspector-collapsed' : ''} ${this._inspectorWide ? 'builder--inspector-wide' : ''}"
+        style="${this._inspectorWidth === null || this.inspectorCollapsed ? nothing : `--inspector-col: ${this._inspectorWidth}px`}"
         @dragend="${() => {
           this._dragOverIndex = null;
           this._slotDragOver = null;

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

@@ -39,6 +39,13 @@
 
   // Side panels tuck away via the canvas-edge chevrons (flow-builder pattern).
   // Their border would floor the width above zero, so it collapses too.
+  // A section whose settings are mostly a remarkd editor needs a writing
+  // measure, not a form column. Declared before the collapsed rules so tucking
+  // the panel away still wins.
+  &--inspector-wide {
+    --inspector-col: 520px;
+  }
+
   &--palette-collapsed {
     --palette-col: 0px;
 
@@ -254,6 +261,7 @@ zn-page-palette-item {
 // 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 {
+  position: relative;
   display: flex;
   flex-direction: column;
   border-left: 1px solid rgb(var(--zn-border-color));
@@ -328,6 +336,10 @@ zn-page-palette-item {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
+    // Fields inside a narrow panel have to answer to its width, not the whole
+    // builder's — the host is the only container otherwise, and a form group
+    // would lay out as if it had the canvas to spread into.
+    container-type: inline-size;
     // Extra bottom padding so the last field isn't flush against the scroll end.
     padding: 18px 16px 24px;
     gap: var(--pb-field-gap);
@@ -391,6 +403,35 @@ zn-page-palette-item {
   }
 }
 
+// Straddles the inspector's left border so the grab area is wider than the 1px
+// line it appears to be.
+.inspector-resize {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  z-index: 5;
+  width: 7px;
+  cursor: col-resize;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0 3px;
+    background: transparent;
+    transition: background 0.15s ease;
+  }
+
+  &:hover::after,
+  &:focus-visible::after {
+    background: rgb(var(--zn-color-primary));
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 .inspector-close {
   display: flex;
   align-items: center;