@kubex/zinc 1.1.154 → 1.1.156

package/docs/pages/components/select.md

@@ -117,6 +117,22 @@ Use the `placeholder` attribute to add a placeholder.
 </zn-select>
 ```
 
+### Empty State
+
+A select with nothing to choose from says so when opened, rather than showing an empty dropdown. The wording distinguishes a list that is empty from one a search has filtered down to nothing: type `zzz` into the second select below to see it.
+
+```html:preview
+<zn-select label="No options" placeholder="Select a reason"></zn-select>
+<br />
+<zn-select label="Searched to nothing" search placeholder="Type to search...">
+  <zn-option value="au">Australia</zn-option>
+  <zn-option value="br">Brazil</zn-option>
+  <zn-option value="ca">Canada</zn-option>
+</zn-select>
+```
+
+Options that arrive later — from `data-uri`, a remote search, or appended `zn-option` elements — clear the message as soon as they land, so an empty list at first render is safe.
+
 ### Clearable
 
 Use the `clearable` attribute to make the control clearable. The clear button only appears when an option is selected.

package/package.json

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

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/page-builder/page-builder.component.ts

@@ -24,8 +24,10 @@ import ZincElement from '../../internal/zinc-element';
 import ZnCollapsible from '../collapsible';
 import ZnIcon from '../icon';
 import ZnInput from '../input';
+import ZnOption from '../option';
 import ZnPagePaletteItem from './modules/page-palette-item';
 import ZnPageSectionCard from './modules/page-section-card';
+import ZnSelect from '../select';
 
 import styles from './page-builder.scss';
 
@@ -96,8 +98,10 @@ export default class ZnPageBuilder extends ZincElement {
     'zn-collapsible': ZnCollapsible,
     'zn-icon': ZnIcon,
     'zn-input': ZnInput,
+    'zn-option': ZnOption,
     'zn-page-palette-item': ZnPagePaletteItem,
     'zn-page-section-card': ZnPageSectionCard,
+    'zn-select': ZnSelect,
   };
 
   private readonly formControlController = new FormControlController(this);
@@ -115,10 +119,12 @@ export default class ZnPageBuilder extends ZincElement {
   @property({ reflect: true }) subheading = '';
 
   /**
-   * Section type key that must lead the page. The builder hoists an existing section of
-   * that type to the top, or inserts an empty one, and pins it there: it can't be
-   * removed, reordered or dragged into a slot, and nothing can be dropped above it.
-   * Its content stays fully editable in the inspector.
+   * Section type keys that may lead the page, comma separated. The builder hoists an
+   * existing section of any of them to the top, or inserts an empty one of the first,
+   * and pins it there: it can't be removed, reordered or dragged into a slot, and
+   * nothing can be dropped above it. Its content stays fully editable in the
+   * inspector, which offers a swap between the allowed types when there is more
+   * than one.
    */
   @property({ attribute: 'required-first', reflect: true }) requiredFirst = '';
 
@@ -520,27 +526,45 @@ export default class ZnPageBuilder extends ZincElement {
    */
   private get _pinnedId(): string | null {
     const first = this._state.sections[0];
-    return this.requiredFirst && first?.type === this.requiredFirst ? first.id : null;
+    const types = this._requiredFirstTypes;
+    return first && types.includes(first.type) ? first.id : null;
+  }
+
+  /** The types `required-first` allows to lead the page, in the order given. */
+  private get _requiredFirstTypes(): string[] {
+    return this.requiredFirst.split(',').map(t => t.trim()).filter(Boolean);
   }
 
   private _isPinned(id: string): boolean {
     return this._pinnedId === id;
   }
 
+  /**
+   * Whether the pinned section may be removed: only while another section can take
+   * the lead in its place, so the page is never left without one. It stays undraggable
+   * either way — the replacement arrives by removing this one, not by reordering.
+   */
+  private get _canUnpin(): boolean {
+    const types = this._requiredFirstTypes;
+    return this._state.sections.slice(1).some(s => types.includes(s.type));
+  }
+
   /** Lowest top-level index a section may be added or moved to. */
   private get _firstFreeIndex(): number {
     return this._pinnedId === null ? 0 : 1;
   }
 
   /**
-   * Sections reordered so `required-first` leads the page: an existing section of that
-   * type is hoisted to the front, otherwise an empty one is prepended. Returns the
+   * Sections reordered so `required-first` leads the page: an existing section of an
+   * allowed type is hoisted to the front, otherwise an empty one of the first type is
+   * prepended. Returns the
    * argument unchanged when there is nothing to do, so callers can compare by identity.
    */
   private _requireFirst(sections: PageSection[]): PageSection[] {
-    if (!this.requiredFirst || sections[0]?.type === this.requiredFirst) return sections;
-    const at = sections.findIndex(s => s.type === this.requiredFirst);
-    if (at === -1) return [{ id: generateSectionId(), type: this.requiredFirst, data: {} }, ...sections];
+    const types = this._requiredFirstTypes;
+    if (!types.length || types.includes(sections[0]?.type)) return sections;
+    const at = sections.findIndex(s => types.includes(s.type));
+    if (at === -1) return [{ id: generateSectionId(), type: types[0], data: {} }, ...sections];
     const hoisted = [...sections];
     hoisted.unshift(...hoisted.splice(at, 1));
     return hoisted;
@@ -693,7 +717,7 @@ export default class ZnPageBuilder extends ZincElement {
   }
 
   private _removeSection(id: string) {
-    if (this._isPinned(id)) return;
+    if (this._isPinned(id) && !this._canUnpin) return;
     const [removed, sections] = this._extract(id);
     if (!removed) return;
     this._pushHistory();
@@ -704,7 +728,8 @@ export default class ZnPageBuilder extends ZincElement {
     if (this._selectedId === id || removed.children?.some(c => c?.id === this._selectedId)) {
       this._select(null);
     }
-    this._commit({ sections });
+    // Removing the leading section hands the lead to the next one that may hold it.
+    this._commit({ sections: this._requireFirst(sections) });
   }
 
   private _duplicateSection(id: string) {
@@ -1139,6 +1164,7 @@ export default class ZnPageBuilder extends ZincElement {
   ) {
     const type = this.registry.get(section.type);
     const pinned = this._isPinned(section.id);
+    const locked = pinned && !this._canUnpin;
     return html`
       <zn-page-section-card
         class="${extraClass} ${this._draggingId === section.id ? 'dragging' : ''}"
@@ -1152,7 +1178,7 @@ export default class ZnPageBuilder extends ZincElement {
         color="${ifDefined(type?.color)}"
         ?selected="${this._selectedId === section.id}"
         ?unknown="${!type}"
-        ?locked="${pinned}"
+        ?locked="${locked}"
         @click="${(e: Event) => {
           e.stopPropagation();
           this._select(section.id);
@@ -1340,6 +1366,21 @@ export default class ZnPageBuilder extends ZincElement {
     this._commit({ sections: this._patchSection(id, s => ({ ...s, data: { ...s.data, ...patch } })) });
   }
 
+  /**
+   * Retypes the pinned section, keeping its id, name and data so the copy shared by
+   * the allowed types survives; keys the new type has no field for stay unread. The
+   * inspector form is stamped from the type's template, so it is rebuilt by hand —
+   * selection has not changed.
+   */
+  private _swapPinnedType(type: string) {
+    const id = this._pinnedId;
+    const section = this._findSection(id);
+    if (!id || !section || section.type === type || !this._requiredFirstTypes.includes(type)) return;
+    this._pushHistory();
+    this._commit({ sections: this._patchSection(id, s => ({ ...s, type })) });
+    this._buildInspectorForm();
+  }
+
   private _renameSection(id: string, label: string) {
     this._pushHistory();
     this._commit({ sections: this._patchSection(id, s => ({ ...s, label: label || undefined })) });
@@ -1380,6 +1421,22 @@ export default class ZnPageBuilder extends ZincElement {
     this._inspectorWidth = this._clampInspector((this._inspectorWidth ?? this._inspectorRect()) + step);
   };
 
+  /** Offered on the pinned section alone, and only where there is another type to take. */
+  private _renderSwapControl(section: PageSection) {
+    const types = this._requiredFirstTypes;
+    if (types.length < 2 || !this._isPinned(section.id)) return '';
+    return html`
+      <zn-select
+        class="inspector__swap"
+        label="Section type"
+        help-text="Swaps the section leading the page, keeping the settings both types share."
+        .value="${section.type}"
+        @zn-change="${(e: Event) => this._swapPinnedType(String((e.target as ZnSelect).value ?? ''))}">
+        ${types.map(t => html`
+          <zn-option value="${t}">${this.registry.get(t)?.label ?? t}</zn-option>`)}
+      </zn-select>`;
+  }
+
   private _renderInspector() {
     const section = this._selectedSection();
     if (!section) return html``;
@@ -1430,6 +1487,7 @@ 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>
+          ${this._renderSwapControl(section)}
           ${type?.slotsMax === undefined ? '' : html`
             <zn-input
               class="inspector__slots"

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

@@ -988,6 +988,112 @@ describe('<zn-page-builder>', () => {
     expect(el.state.sections[1].children?.[0] ?? null, 'slot left empty').to.be.null;
   });
 
+  it('should accept any of several required-first types', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder required-first="hero,hero-split"
+                       config='{"sections":[{"id":"t","type":"rich-text","data":{}},{"id":"h","type":"hero-split","data":{"title":"Help"}}]}'>
+        <template type="hero" slot="config" label="Hero"></template>
+        <template type="hero-split" slot="config" label="Split Hero"></template>
+        <template type="rich-text" slot="config" label="Rich Text"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    expect(el.state.sections.map(s => s.id), 'the alternate type is hoisted too').to.deep.equal(['h', 't']);
+    expect(el.shadowRoot!.querySelector('zn-page-section-card')!.hasAttribute('locked')).to.be.true;
+
+    const empty = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder required-first="hero,hero-split">
+        <template type="hero" slot="config" label="Hero"></template>
+        <template type="hero-split" slot="config" label="Split Hero"></template>
+      </zn-page-builder>`);
+    await empty.updateComplete;
+    expect(empty.state.sections.map(s => s.type), 'an empty page gets the first type').to.deep.equal(['hero']);
+  });
+
+  it('should swap the pinned section for another allowed type, keeping its content', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder required-first="hero,hero-split"
+                       config='{"sections":[{"id":"h","type":"hero","label":"Top","data":{"title":"Help","search":true}},{"id":"t","type":"rich-text","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero"></template>
+        <template type="hero-split" slot="config" label="Split Hero">
+          <zn-input name="title"></zn-input>
+        </template>
+        <template type="rich-text" slot="config" label="Rich Text"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot!.querySelector('zn-page-section-card')!.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const swap = el.shadowRoot!.querySelector<HTMLElement & { value: string }>('.inspector__swap')!;
+    expect(swap, 'swap control on the pinned section').to.exist;
+    expect([...swap.querySelectorAll('zn-option')].map(o => o.getAttribute('value')))
+      .to.deep.equal(['hero', 'hero-split']);
+
+    swap.value = 'hero-split';
+    swap.dispatchEvent(new CustomEvent('zn-change', {bubbles: true}));
+    await el.updateComplete;
+
+    const [pinned, rest] = el.state.sections;
+    expect(pinned.type, 'type swapped').to.equal('hero-split');
+    expect(pinned.id, 'same section').to.equal('h');
+    expect(pinned.label, 'keeps its name').to.equal('Top');
+    expect(pinned.data, 'keeps its content').to.deep.equal({title: 'Help', search: true});
+    expect(rest.id, 'the rest of the page is untouched').to.equal('t');
+    expect(el.shadowRoot!.querySelector('zn-page-section-card')!.hasAttribute('locked'), 'still pinned').to.be.true;
+
+    // The inspector now stamps the new type's fields, filled from the kept data.
+    const title = el.shadowRoot!.querySelector<HTMLInputElement>('.inspector__form [name="title"]');
+    expect(title?.value, 'inspector rebuilt for the new type').to.equal('Help');
+
+    el.undo();
+    await el.updateComplete;
+    expect(el.state.sections[0].type, 'undo puts the original type back').to.equal('hero');
+  });
+
+  it('should let the pinned section go once another may lead in its place', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder required-first="hero,hero-split"
+                       config='{"sections":[{"id":"h","type":"hero","data":{}},{"id":"t","type":"rich-text","data":{}},{"id":"s","type":"hero-split","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero"></template>
+        <template type="hero-split" slot="config" label="Split Hero"></template>
+        <template type="rich-text" slot="config" label="Rich Text"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    const pinnedCard = el.shadowRoot!.querySelector('zn-page-section-card')!;
+    expect(pinnedCard.hasAttribute('locked'), 'a replaceable hero shows no lock').to.be.false;
+    expect(pinnedCard.getAttribute('draggable'), 'but still cannot be dragged').to.equal('false');
+    expect(pinnedCard.shadowRoot!.querySelector('zn-button[title="Remove section"]'), 'remove offered').to.exist;
+
+    pinnedCard.dispatchEvent(new CustomEvent('page-card-remove', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.state.sections.map(s => s.id), 'the other hero takes the lead').to.deep.equal(['s', 't']);
+    const nowPinned = el.shadowRoot!.querySelector('zn-page-section-card')!;
+    expect(nowPinned.hasAttribute('locked'), 'the last hero locks again').to.be.true;
+
+    nowPinned.dispatchEvent(new CustomEvent('page-card-remove', {bubbles: true, composed: true}));
+    await el.updateComplete;
+    expect(el.state.sections.map(s => s.id), 'the last hero cannot go').to.deep.equal(['s', 't']);
+
+    el.undo();
+    await el.updateComplete;
+    expect(el.state.sections.map(s => s.id), 'undo brings the removed hero back').to.deep.equal(['h', 't', 's']);
+  });
+
+  it('should offer no swap control when only one type may lead', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder required-first="hero" config='{"sections":[{"id":"h","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('.inspector__swap')).to.not.exist;
+  });
+
   it('should leave the page alone without required-first', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"t","type":"rich-text","data":{}}]}'>

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;
+  });
+});