@kubex/zinc 1.1.127 → 1.1.129

package/package.json

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

package/scss/themes/_light.scss

@@ -191,6 +191,9 @@
   --zn-focus-ring-width: 3px;
   --zn-focus-ring: var(--zn-focus-ring-style) var(--zn-focus-ring-width) var(--zn-focus-ring-color);
   --zn-focus-ring-offset: 1px;
+  // Space a focus ring needs outside a control's box, for boxes that clip around
+  // one. Must stay a plain length: overflow-clip-margin rejects calc(), silently 0.
+  --zn-focus-ring-outset: 4px;
 
   /**************************************************************
    * Forms

package/src/components/button/button.scss

@@ -114,7 +114,8 @@
 
 .button:focus-visible {
   outline: 2px solid rgb(var(--btn-color));
-  outline-offset: 2px;
+  // the token is a total (width + offset), not the offset itself
+  outline-offset: calc(var(--zn-focus-ring-outset) - 2px);
 }
 
 [disabled] {

package/src/components/header/header.scss

@@ -131,8 +131,7 @@
     flex-grow: 1;
     flex-shrink: 1;
     overflow-x: clip;
-    // Enough slack for a focused control's ring to sit outside its box uncut
-    overflow-clip-margin: var(--zn-focus-ring-width);
+    overflow-clip-margin: var(--zn-focus-ring-outset);
     overflow-y: visible;
     min-width: 20px;
   }

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

@@ -666,6 +666,19 @@ export default class ZnPageBuilder extends ZincElement {
     this._commit({ sections: this._patchSection(id, s => ({ ...s, columns: next })) });
   }
 
+  /**
+   * Snaps the field back to the width the container will use. A re-render alone
+   * would not: once the state already sits at a bound, an out-of-range entry
+   * changes nothing to re-render from.
+   */
+  private _onColumnsEntered(section: PageSection, input: ZnInput) {
+    const type = this.registry.get(section.type);
+    if (type?.slotsMax === undefined) return;
+    const next = slotColumns({...section, columns: Number(input.value)}, type);
+    input.value = String(next);
+    this.setSectionColumns(section.id, next);
+  }
+
   private _removeSection(id: string) {
     if (this._isPinned(id)) return;
     const [removed, sections] = this._extract(id);
@@ -1229,9 +1242,9 @@ export default class ZnPageBuilder extends ZincElement {
               label="Slots per row"
               min="${type.slotsMin ?? 1}"
               max="${type.slotsMax}"
-              help-text="A new row is added as the last one fills."
+              help-text="Between ${type.slotsMin ?? 1} and ${type.slotsMax}. 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>`}
+              @zn-change="${(e: Event) => this._onColumnsEntered(section, e.target as ZnInput)}"></zn-input>`}
           ${type?.renderConfig
             ? type.renderConfig(section, data => this._updateSectionData(section.id, data))
             : this._form}

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

@@ -476,6 +476,38 @@ describe('<zn-page-builder>', () => {
       .to.have.length(6);
   });
 
+  it('should snap an out-of-range width back on every entry and state the range', 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="3" slots-max="4"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    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.getAttribute('help-text'), 'the control names its range').to.contain('1 and 4');
+
+    const enter = async (value: string) => {
+      width.value = value;
+      width.dispatchEvent(new Event('zn-change', {bubbles: true}));
+      await el.updateComplete;
+    };
+
+    await enter('9');
+    expect(el.state.sections[0].columns, 'clamped to the max').to.equal(4);
+    expect(width.value, 'and shown clamped').to.equal('4');
+
+    await enter('9');
+    expect(width.value, 'a second over-max entry snaps back too').to.equal('4');
+    expect(el.state.sections[0].columns).to.equal(4);
+
+    await enter('0');
+    expect(el.state.sections[0].columns, 'clamped to the min').to.equal(1);
+    expect(width.value).to.equal('1');
+  });
+
   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}]}'>

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

@@ -64,7 +64,8 @@ export const MAX_SLOTS = 24;
 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);
+  const chosen = Math.round(Number(section.columns ?? NaN));
+  return Math.min(Math.max(Number.isFinite(chosen) ? chosen : columns, type.slotsMin ?? 1), type.slotsMax);
 }
 
 /**