@kubex/zinc 1.1.155 → 1.1.157

package/src/components/button/button.scss

@@ -200,15 +200,23 @@
 }
 
 .button--with-icon.button--with-content:not(.button--icon-button) {
+  // Icon glyphs are drawn inset ~2 units inside their 24-unit box, so the icon
+  // is narrower than the space it takes. Pull that slack out on both sides so
+  // the gaps read as equal to the text edge opposite.
+  --icon-optical-inset: calc(var(--button-icon-size, 20px) / 12);
+  --icon-gap: calc(var(--zn-base-px) - var(--icon-optical-inset));
+
   &.button--icon-left {
     zn-icon {
-      margin-right: var(--zn-base-px);
+      margin-left: calc(var(--icon-optical-inset) * -1);
+      margin-right: var(--icon-gap);
     }
   }
 
   &.button--icon-right {
     zn-icon {
-      margin-left: var(--zn-base-px);
+      margin-left: var(--icon-gap);
+      margin-right: calc(var(--icon-optical-inset) * -1);
     }
   }
 }

package/src/components/inline-edit/inline-edit.component.ts

@@ -368,8 +368,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasHelpText = this.helpText ? true : hasHelpTextSlot;
 
-    // Default input type to select if options are provided
-    if (Object.keys(this.options).length > 0) {
+    // An options list that renders empty is still a select — never silently fall back to free text
+    if (Object.keys(this.options).length > 0 || this.hasAttribute('options')) {
       this.inputType = 'select';
     }
 

package/src/components/inline-edit/inline-edit.scss

@@ -59,6 +59,9 @@
 
   &__input::part(form-control-input) {
     margin: 0;
+    // Block wrapper round an inline-flex base adds baseline strut, leaving the input
+    // ~1.4px taller than the reveal that replaces it
+    display: flex;
   }
 
   &__input {
@@ -133,7 +136,8 @@
   }
 
   &__reveal {
-    line-height: var(--zn-line-height-looser);
+    // Matches the height of the input it stands in for, so entering edit mode doesn't resize the row
+    line-height: var(--zn-input-height-medium);
     color: rgb(var(--zn-text));
 
     // Fill the row so hovering anywhere over the field reveals the value
@@ -199,4 +203,10 @@ zn-textarea::part(textarea) {
   resize: none;
 }
 
+:host([size="small"]) .ai__reveal {
+  line-height: var(--zn-input-height-small);
+}
 
+:host([size="large"]) .ai__reveal {
+  line-height: var(--zn-input-height-large);
+}

package/src/components/inline-edit/inline-edit.test.ts

@@ -565,4 +565,28 @@ describe('<zn-inline-edit>', () => {
       expect(submits, 'Enter belongs to the open menu, not the form').to.equal(0);
     });
   });
+
+  // The theme stylesheet isn't loaded in tests, so the sizing tokens the reveal and the input both
+  // key off have to be supplied for the comparison to mean anything.
+  it('should keep the same height whether it shows a reveal or the input it replaces', async () => {
+    const tokens = 'display: contents; --zn-input-height-medium: 36px; --zn-line-height-looser: 3;';
+    const plain = await fixture<HTMLDivElement>(html`
+      <div style="${tokens}">
+        <zn-inline-edit name="email" value="alan.jones@example.com"></zn-inline-edit>
+      </div>
+    `);
+    const masked = await fixture<HTMLDivElement>(html`
+      <div style="${tokens}">
+        <zn-inline-edit name="email" value="alan.jones@example.com"
+                        display-value="\u2022\u2022\u2022\u2022\u2022@example.com"></zn-inline-edit>
+      </div>
+    `);
+    const [plainEdit, maskedEdit] = [plain, masked].map(el => el.querySelector<ZnInlineEdit>('zn-inline-edit')!);
+    await Promise.all([plainEdit.updateComplete, maskedEdit.updateComplete]);
+
+    const height = (el: ZnInlineEdit) =>
+      el.shadowRoot!.querySelector<HTMLElement>('.ai')!.getBoundingClientRect().height;
+
+    expect(height(maskedEdit)).to.equal(height(plainEdit));
+  });
 });

package/src/components/reveal/reveal.component.ts

@@ -44,6 +44,11 @@ export default class ZnReveal extends ZincElement {
   /** Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent. */
   @property({type: Boolean, attribute: 'no-toggle'}) noToggle: boolean = false;
 
+  /** Nothing is hidden when the revealed value is what's already on show, so there is nothing to reveal. */
+  private get _isMasked(): boolean {
+    return this.revealed !== '' && this.revealed !== this.initial;
+  }
+
   private _isRevealed: boolean = false;
   private _isToggled: boolean = false;
   private _hideTimer?: ReturnType<typeof setTimeout>;
@@ -102,10 +107,19 @@ export default class ZnReveal extends ZincElement {
   }
 
   render() {
+    if (!this._isMasked) {
+      return html`
+        <div part="base" class="reveal reveal--static">
+          <span class="reveal__text">${this.initial || this.revealed}</span>
+        </div>
+      `;
+    }
+
     return html`
       <div part="base"
            class=${classMap({
         'reveal': true,
+        'reveal--clickable': !this.noToggle,
         'reveal--revealed': this._isRevealed,
         'reveal--toggled': this._isToggled,
       })}

package/src/components/reveal/reveal.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: pointer;
 }
 
 
@@ -13,6 +12,16 @@
   overflow: hidden;
 }
 
+// Only a click that toggles earns the pointer: a static or hover-only reveal does nothing on click.
+.reveal--clickable {
+  cursor: pointer;
+}
+
+// cursor inherits, so a static reveal has to opt out of a clickable container's pointer
+.reveal--static {
+  cursor: auto;
+}
+
 .reveal__text {
   grid-area: stack;
   line-height: inherit;

package/src/components/reveal/reveal.test.ts

@@ -21,6 +21,42 @@ describe('<zn-reveal>', () => {
     expect(container.classList.contains('reveal--revealed')).to.be.true;
   });
 
+  it('should render static text when the revealed value matches the initial', async () => {
+    const el = await fixture<ZnReveal>(html`
+      <zn-reveal initial="real" revealed="real"></zn-reveal>
+    `);
+    const container = el.shadowRoot!.querySelector<HTMLElement>('.reveal')!;
+
+    expect(container.classList.contains('reveal--static')).to.be.true;
+
+    container.click();
+    await el.updateComplete;
+
+    expect(container.classList.contains('reveal--revealed')).to.be.false;
+  });
+
+  it('should only show a pointer cursor when a click would toggle the value', async () => {
+    const cursorOf = (el: ZnReveal) =>
+      getComputedStyle(el.shadowRoot!.querySelector<HTMLElement>('.reveal')!).cursor;
+
+    const toggleable = await fixture<ZnReveal>(html`
+      <zn-reveal initial="****" revealed="real"></zn-reveal>
+    `);
+    // Inside a clickable row (an inline edit, say) the inherited pointer has to be shaken off
+    const unmasked = (await fixture<HTMLDivElement>(html`
+      <div style="cursor: pointer">
+        <zn-reveal initial="real" revealed="real"></zn-reveal>
+      </div>
+    `)).querySelector<ZnReveal>('zn-reveal')!;
+    const hoverOnly = await fixture<ZnReveal>(html`
+      <zn-reveal initial="****" revealed="real" no-toggle></zn-reveal>
+    `);
+
+    expect(cursorOf(toggleable)).to.equal('pointer');
+    expect(cursorOf(unmasked)).to.not.equal('pointer');
+    expect(cursorOf(hoverOnly)).to.not.equal('pointer');
+  });
+
   it('should not toggle on click when no-toggle is set', async () => {
     const el = await fixture<ZnReveal>(html`
       <zn-reveal initial="****" revealed="real" no-toggle></zn-reveal>

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

@@ -846,7 +846,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         group.hidden = false;
       });
       this.updateOptGroupSeparators();
-      this._noResultsVisible = false;
+      this.updateEmptyState();
       return;
     }
 
@@ -887,6 +887,19 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
+  /**
+   * Nothing for the user to pick: either the option list is empty or every option is filtered out.
+   * The search paths track this themselves, so this covers opening a dropdown with no query.
+   */
+  private updateEmptyState() {
+    const options = this.getAllOptions();
+    this._noResultsVisible = options.length === 0 || options.every(option => option.hidden);
+  }
+
+  private get emptyStateText(): string {
+    return this._searchQuery ? 'No matching options' : 'No options available';
+  }
+
   /** Clears the search query and shows all options */
   private clearSearch() {
     this._searchQuery = '';
@@ -1132,6 +1145,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.emit('zn-input');
       this.emit('zn-change');
     }
+
+    if (this.open) {
+      this.updateEmptyState();
+    }
   }
 
   private handleTagRemove(event: ZnRemoveEvent, option: ZnOption) {
@@ -1653,6 +1670,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.displayInput.readOnly = false;
       }
 
+      this.updateEmptyState();
+
       // Show
       this.emit('zn-show');
       this.addOpenListeners();
@@ -2041,7 +2060,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
                   : html`
                     <div part="empty-state" class="select__empty-state"
                          ?hidden=${!this._noResultsVisible || this._freeTextAddValue !== null}>
-                      No matching options
+                      ${this.emptyStateText}
                     </div>`
               }
             </div>

package/src/components/select/select.scss

@@ -444,7 +444,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--zn-spacing-small);
-  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
   color: var(--zn-color-neutral-500);
   font-size: var(--zn-font-size-medium);
 }
@@ -463,7 +463,8 @@
 /* Empty state (no search results) */
 .select__empty-state {
   display: block;
-  padding: var(--zn-spacing-medium) var(--zn-spacing-2x-large);
+  // Keeps the one-line popup close to the height of a single option row
+  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
   text-align: center;
   color: var(--zn-color-neutral-500);
   font-size: var(--zn-font-size-medium);

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

@@ -978,3 +978,62 @@ describe('<zn-select> requires', () => {
     expect(c.disabled, 'both filled').to.be.false;
   });
 });
+
+describe('<zn-select> empty state', () => {
+  const emptyState = (el: ZnSelect) =>
+    el.shadowRoot!.querySelector<HTMLElement>('[part="empty-state"]')!;
+
+  it('should tell the user there is nothing to pick when opened with no options', async () => {
+    const el = await fixture<ZnSelect>(html`
+      <zn-select placeholder="Select a reason"></zn-select>`);
+    await el.show();
+    await el.updateComplete;
+
+    expect(emptyState(el).hidden).to.be.false;
+    expect(emptyState(el).textContent!.trim()).to.equal('No options available');
+  });
+
+  it('should stay hidden when the select has options', async () => {
+    const el = await fixture<ZnSelect>(html`
+      <zn-select>
+        <zn-option value="apple">Apple</zn-option>
+      </zn-select>`);
+    await el.show();
+    await el.updateComplete;
+
+    expect(emptyState(el).hidden).to.be.true;
+  });
+
+  it('should distinguish a filtered-out list from an empty one', async () => {
+    const el = await fixture<ZnSelect>(html`
+      <zn-select search>
+        <zn-option value="apple">Apple</zn-option>
+      </zn-select>`);
+    await el.show();
+    await el.updateComplete;
+
+    const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;
+    displayInput.value = 'zzz';
+    displayInput.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(emptyState(el).hidden).to.be.false;
+    expect(emptyState(el).textContent!.trim()).to.equal('No matching options');
+  });
+
+  it('should drop the empty state once options arrive while open', async () => {
+    const el = await fixture<ZnSelect>(html`
+      <zn-select></zn-select>`);
+    await el.show();
+    await el.updateComplete;
+    expect(emptyState(el).hidden, 'empty before options').to.be.false;
+
+    const option = document.createElement('zn-option');
+    option.value = 'apple';
+    option.textContent = 'Apple';
+    el.appendChild(option);
+    await waitUntil(() => emptyState(el).hidden);
+
+    expect(emptyState(el).hidden).to.be.true;
+  });
+});