@kubex/zinc 1.1.94 → 1.1.95

package/src/components/slash-menu/slash-menu-items.ts

@@ -120,3 +120,51 @@ export function filterSlashItems(items: SlashMenuItem[], query: string): SlashMe
       a.index - b.index)
     .map(entry => entry.item);
 }
+
+const RECENT_PREFIX = 'zn-slash-recent:';
+/** Kept deeper than any menu shows, so history survives items that aren't in the current list. */
+const RECENT_LIMIT = 10;
+
+/** The identity an item is remembered by in a menu's recently used list. */
+export function slashItemKey(item: SlashMenuItem): string {
+  return item.action ? `action:${item.action}` : `value:${item.value || item.label}`;
+}
+
+/** The keys of the items most recently chosen from the menu stored under `key`, newest first. */
+export function readRecentSlashItems(key: string): string[] {
+  if (!key) return [];
+
+  try {
+    const parsed: unknown = JSON.parse(localStorage.getItem(RECENT_PREFIX + key) ?? '[]');
+    return Array.isArray(parsed) ? parsed.filter((entry): entry is string => typeof entry === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+/** Moves an item to the front of the recently used list stored under `key`, and returns the list. */
+export function recordRecentSlashItem(key: string, item: SlashMenuItem): string[] {
+  if (!key) return [];
+
+  const itemKey = slashItemKey(item);
+  const keys = [itemKey, ...readRecentSlashItems(key).filter(entry => entry !== itemKey)].slice(0, RECENT_LIMIT);
+
+  try {
+    localStorage.setItem(RECENT_PREFIX + key, JSON.stringify(keys));
+  } catch {
+    // No storage (private browsing, quota) — the list just doesn't outlive the page
+  }
+
+  return keys;
+}
+
+/** Forgets the recently used items stored under `key`. */
+export function clearRecentSlashItems(key: string) {
+  if (!key) return;
+
+  try {
+    localStorage.removeItem(RECENT_PREFIX + key);
+  } catch {
+    // As above
+  }
+}

package/src/components/slash-menu/slash-menu.component.ts

@@ -1,10 +1,11 @@
 import {autoUpdate, computePosition, flip, offset, shift, size} from '@floating-ui/dom';
 import {classMap} from 'lit/directives/class-map.js';
+import {clearRecentSlashItems, readRecentSlashItems, recordRecentSlashItem, slashItemKey} from './slash-menu-items';
 import {html, unsafeCSS} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from '../icon';
-import type {CSSResultGroup, PropertyValues} from 'lit';
+import type {CSSResultGroup, PropertyValues, TemplateResult} from 'lit';
 import type {Placement, VirtualElement} from '@floating-ui/dom';
 import type {SlashMenuItem} from './slash-menu-items';
 
@@ -29,12 +30,19 @@ function sameItems(a: SlashMenuItem[] | undefined, b: SlashMenuItem[]): boolean
  *  component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`.
  *
  * @csspart panel - The floating panel that holds the list.
- * @csspart heading - The panel's heading.
+ * @csspart list - The scrolling list of items.
  * @csspart item - An item in the list.
+ * @csspart icon - The chip holding an item's icon.
  * @csspart group-heading - A group heading between items.
+ * @csspart divider - The rule closing the recently used section, when the items below it have no heading of their own.
  * @csspart footer - The truncation footer, shown when not every match fits.
+ * @csspart hints - The pinned footer of keyboard hints.
+ * @csspart hint - A single keyboard hint within the footer.
+ * @csspart hint-key - The key shown against a hint.
  *
  * @cssproperty --slash-menu-width - The width of the panel.
+ * @cssproperty --slash-menu-border-radius - The corner radius of the panel.
+ * @cssproperty --slash-menu-item-border-radius - The corner radius of the items and their icon chips.
  * @cssproperty --slash-menu-max-height - The maximum height of the panel before it scrolls.
  */
 export default class ZnSlashMenu extends ZincElement {
@@ -44,6 +52,7 @@ export default class ZnSlashMenu extends ZincElement {
   };
 
   @query('.slash-menu__panel') private panel: HTMLElement;
+  @query('.slash-menu__list') private list: HTMLElement;
 
   private stopAutoUpdate?: () => void;
 
@@ -56,7 +65,7 @@ export default class ZnSlashMenu extends ZincElement {
   /** The query the items were matched against, shown in the heading. */
   @property() query = '';
 
-  /** The heading shown when there is no query. */
+  /** The name the list is announced by when there is no query. */
   @property() heading = 'Insert';
 
   /** Shown in place of the list when there are no items. */
@@ -68,6 +77,22 @@ export default class ZnSlashMenu extends ZincElement {
   /** Hides the insertion key (the item's value) normally shown against each item. */
   @property({attribute: 'hide-keys', type: Boolean}) hideKeys = false;
 
+  /** Hides the pinned footer of keyboard hints. */
+  @property({attribute: 'hide-hints', type: Boolean}) hideHints = false;
+
+  /**
+   * Remembers the items chosen here and lists the most recent of them first, under their own heading.
+   * The key scopes the list to where the menu is used, so each place keeps its own history in
+   * `localStorage`. Leave unset to offer no recently used section.
+   */
+  @property({attribute: 'recent-key'}) recentKey = '';
+
+  /** The most recently used items to list. */
+  @property({attribute: 'max-recent', type: Number}) maxRecent = 3;
+
+  /** The heading shown above the recently used items. */
+  @property({attribute: 'recent-heading'}) recentHeading = 'Recently used';
+
   /** The element or caret rect the panel is positioned against. */
   @property({attribute: false}) anchor: Element | VirtualElement | null = null;
 
@@ -78,11 +103,41 @@ export default class ZnSlashMenu extends ZincElement {
   @property({type: Number}) distance = 4;
 
   @state() private activeIndex = 0;
+  @state() private recentKeys: string[] = [];
 
-  private get visibleItems(): SlashMenuItem[] {
+  /** How many recently used items the last update listed, to spot the list appearing or reordering. */
+  private recentCount = 0;
+
+  private get listItems(): SlashMenuItem[] {
     return this.maxItems > 0 ? this.items.slice(0, this.maxItems) : this.items;
   }
 
+  /**
+   * The remembered items that are in the current list, newest first. Only offered without a query —
+   * once the user is searching, the ranked matches are the better answer.
+   */
+  private get recentItems(): SlashMenuItem[] {
+    if (!this.recentKey || this.maxRecent < 1 || this.query.trim() !== '') return [];
+
+    const available = new Map<string, SlashMenuItem>();
+    for (const item of this.items) {
+      const key = slashItemKey(item);
+      if (!item.disabled && !available.has(key)) available.set(key, item);
+    }
+
+    const recent = this.recentKeys
+      .map(key => available.get(key))
+      .filter((item): item is SlashMenuItem => item !== undefined)
+      .slice(0, this.maxRecent);
+
+    // A section holding everything on offer is nothing but a second copy of the list
+    return recent.length < this.items.length ? recent : [];
+  }
+
+  private get visibleItems(): SlashMenuItem[] {
+    return [...this.recentItems, ...this.listItems];
+  }
+
   /** The item that Enter would insert. */
   get activeItem(): SlashMenuItem | undefined {
     return this.visibleItems[this.activeIndex];
@@ -96,6 +151,12 @@ export default class ZnSlashMenu extends ZincElement {
     this.open = false;
   }
 
+  /** Forgets the items remembered under `recent-key`. */
+  clearRecent() {
+    clearRecentSlashItems(this.recentKey);
+    this.recentKeys = [];
+  }
+
   /** Sets the active item by index, wrapping at both ends and skipping disabled items. */
   setActiveIndex(index: number) {
     const items = this.visibleItems;
@@ -198,6 +259,8 @@ export default class ZnSlashMenu extends ZincElement {
   private selectItem(item: SlashMenuItem) {
     if (item.disabled) return;
 
+    if (this.recentKey) this.recentKeys = recordRecentSlashItem(this.recentKey, item);
+
     this.dispatchEvent(new CustomEvent(SLASH_ITEM_SELECT, {
       bubbles: true,
       cancelable: true,
@@ -211,17 +274,17 @@ export default class ZnSlashMenu extends ZincElement {
     if (!active) return;
 
     const items = this.visibleItems;
-    const panel = this.panel;
+    const list = this.list;
 
-    // The heading and footer scroll with the list, and `nearest` stops at the item's own box — so
-    // landing on the first or last item goes all the way to the panel's edge to bring them back
-    if (panel && items.slice(0, this.activeIndex).every(item => item.disabled)) {
-      panel.scrollTop = 0;
+    // Group headings scroll with the items, and `nearest` stops at the item's own box — so landing
+    // on the first or last item goes all the way to the list's edge to bring them back
+    if (list && items.slice(0, this.activeIndex).every(item => item.disabled)) {
+      list.scrollTop = 0;
       return;
     }
 
-    if (panel && items.slice(this.activeIndex + 1).every(item => item.disabled)) {
-      panel.scrollTop = panel.scrollHeight;
+    if (list && items.slice(this.activeIndex + 1).every(item => item.disabled)) {
+      list.scrollTop = list.scrollHeight;
       return;
     }
 
@@ -244,9 +307,20 @@ export default class ZnSlashMenu extends ZincElement {
   protected willUpdate(changed: PropertyValues) {
     super.willUpdate(changed);
 
+    // Another field may share the key, so the list is re-read each time the menu is shown
+    if (changed.has('recentKey') || (changed.has('open') && this.open)) {
+      this.recentKeys = readRecentSlashItems(this.recentKey);
+    }
+
     // A genuinely new result set starts on its first selectable item. Re-resolving the same query
     // hands over an equal-but-new array, which must not move the user's place in the list.
-    if (changed.has('items') && !sameItems(changed.get('items') as SlashMenuItem[] | undefined, this.items)) {
+    const isNewList = changed.has('items')
+      && !sameItems(changed.get('items') as SlashMenuItem[] | undefined, this.items);
+
+    // Items above the list shift every index below them, so the place is given up either way
+    const recentCount = this.recentItems.length;
+    if (isNewList || recentCount !== this.recentCount) {
+      this.recentCount = recentCount;
       this.activeIndex = this.visibleItems.findIndex(item => !item.disabled);
     }
   }
@@ -292,7 +366,9 @@ export default class ZnSlashMenu extends ZincElement {
         @mousedown=${this.handleItemMouseDown}>
         ${showIcons
           ? html`
-            <span class="slash-menu__icon">
+            <span
+              part="icon"
+              class=${classMap({'slash-menu__icon': true, 'slash-menu__icon--empty': !item.icon})}>
               ${item.icon ? html`
                 <zn-icon src=${item.icon} size="16"></zn-icon>` : ''}
             </span>`
@@ -309,41 +385,72 @@ export default class ZnSlashMenu extends ZincElement {
 
   private renderItems() {
     const items = this.visibleItems;
+    const recentCount = this.recentItems.length;
     const showIcons = items.some(item => item.icon);
     let lastGroup: string | undefined;
 
     return items.map((item, index) => {
-      const group = item.group;
+      const group = index < recentCount ? this.recentHeading : item.group;
       const heading = group && group !== lastGroup
         ? html`
           <div part="group-heading" class="slash-menu__group-heading">${group}</div>`
         : '';
       lastGroup = group;
 
-      return html`${heading}${this.renderItem(item, index, showIcons)}`;
+      // The recently used section needs closing off; a heading of its own does that for the items
+      // below it, and where they have none, a rule does it instead
+      const divider = index === recentCount && recentCount > 0 && !heading
+        ? html`
+          <div part="divider" class="slash-menu__divider"></div>`
+        : '';
+
+      return html`${divider}${heading}${this.renderItem(item, index, showIcons)}`;
     });
   }
 
+  private renderHint(keys: (TemplateResult | string)[], label: string) {
+    return html`
+      <span part="hint" class="slash-menu__hint">
+        ${keys.map(key => html`
+          <kbd part="hint-key" class="slash-menu__key">${key}</kbd>`)}
+        ${label}
+      </span>`;
+  }
+
+  private renderHints() {
+    const key = (icon: string) => html`
+      <zn-icon src="${icon}@lu" size="12"></zn-icon>`;
+
+    return html`
+      <div part="hints" class="slash-menu__hints">
+        ${this.renderHint([key('arrow-up'), key('arrow-down')], 'navigate')}
+        ${this.renderHint([key('corner-down-left')], 'select')}
+        ${this.renderHint(['esc'], 'dismiss')}
+      </div>`;
+  }
+
   render() {
-    const hidden = this.items.length - this.visibleItems.length;
+    const hidden = this.items.length - this.listItems.length;
 
     return html`
       <div
         part="panel"
         class="slash-menu__panel"
         popover="manual"
-        role="listbox"
-        aria-hidden=${this.open ? 'false' : 'true'}
-        aria-label=${this.query ? `Matches for ${this.query}` : this.heading}>
-        <div part="heading" class="slash-menu__heading">
-          ${this.query ? html`Matching <strong>${this.query}</strong>` : this.heading}
+        aria-hidden=${this.open ? 'false' : 'true'}>
+        <div
+          part="list"
+          class="slash-menu__list"
+          role="listbox"
+          aria-label=${this.query ? `Matches for ${this.query}` : this.heading}>
+          ${this.items.length
+            ? this.renderItems()
+            : html`
+              <div class="slash-menu__empty">${this.emptyText}</div>`}
+          ${hidden > 0 ? html`
+            <div part="footer" class="slash-menu__footer">${hidden} more — keep typing to narrow</div>` : ''}
         </div>
-        ${this.items.length
-          ? this.renderItems()
-          : html`
-            <div class="slash-menu__empty">${this.emptyText}</div>`}
-        ${hidden > 0 ? html`
-          <div part="footer" class="slash-menu__footer">${hidden} more — keep typing to narrow</div>` : ''}
+        ${this.hideHints ? '' : this.renderHints()}
       </div>`;
   }
 }

package/src/components/slash-menu/slash-menu.scss

@@ -3,6 +3,8 @@
 :host {
   --slash-menu-width: 320px;
   --slash-menu-max-height: 260px;
+  --slash-menu-border-radius: 12px;
+  --slash-menu-item-border-radius: 8px;
 
   display: contents;
 }
@@ -20,24 +22,32 @@
   width: var(--slash-menu-width);
   max-width: var(--auto-size-available-width, none);
   max-height: min(var(--slash-menu-max-height), var(--auto-size-available-height, 100vh));
-  overflow-y: auto;
-  overscroll-behavior: none;
   z-index: var(--zn-z-index-dropdown);
-  padding: var(--zn-spacing-2x-small, 4px) 0;
+  overflow: hidden;
   background: var(--zn-panel-background-color);
   border: solid var(--zn-panel-border-width, 1px) var(--zn-panel-border-color);
-  border-radius: var(--zn-border-radius, 6px);
+  border-radius: var(--slash-menu-border-radius);
   box-shadow: var(--zn-shadow-medium);
   font-family: var(--zn-font-sans);
   font-size: var(--zn-font-size-medium);
   color: rgb(var(--zn-text));
 }
 
-.slash-menu__heading,
+.slash-menu__list {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--zn-spacing-3x-small, 2px);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  padding: var(--zn-spacing-2x-small, 4px) var(--zn-spacing-x-small, 8px);
+}
+
 .slash-menu__group-heading,
 .slash-menu__footer,
 .slash-menu__empty {
-  padding: var(--zn-spacing-2x-small, 4px) var(--zn-spacing-small, 12px);
+  padding: var(--zn-spacing-2x-small, 4px) var(--zn-spacing-x-small, 8px);
   font-size: var(--zn-font-size-x-small);
   color: var(--zn-color-neutral-500);
   user-select: none;
@@ -45,9 +55,11 @@
 }
 
 .slash-menu__group-heading {
+  padding-top: var(--zn-spacing-x-small, 8px);
   font-weight: var(--zn-font-weight-semibold);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.06em;
+  color: var(--zn-color-neutral-400);
 }
 
 .slash-menu__footer {
@@ -55,24 +67,72 @@
   margin-top: var(--zn-spacing-2x-small, 4px);
 }
 
+.slash-menu__divider {
+  height: var(--zn-panel-border-width, 1px);
+  margin: var(--zn-spacing-2x-small, 4px) 0;
+  background: var(--zn-panel-border-color);
+}
+
+.slash-menu__hints {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--zn-spacing-small, 12px);
+  padding: var(--zn-spacing-x-small, 8px) var(--zn-spacing-small, 12px);
+  border-top: solid var(--zn-panel-border-width, 1px) var(--zn-panel-border-color);
+  font-size: var(--zn-font-size-x-small);
+  color: var(--zn-color-neutral-500);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.slash-menu__hint {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small, 4px);
+}
+
+.slash-menu__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 var(--zn-spacing-2x-small, 4px);
+  border: solid var(--zn-panel-border-width, 1px) var(--zn-panel-border-color);
+  border-radius: var(--zn-border-radius, 6px);
+  background: var(--zn-panel-background-color);
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-font-size-2x-small);
+  line-height: 1;
+  color: var(--zn-color-neutral-600);
+}
+
 .slash-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--zn-spacing-x-small, 8px);
+  gap: var(--zn-spacing-small, 12px);
   width: 100%;
-  padding: var(--zn-spacing-x-small, 8px) var(--zn-spacing-small, 12px);
+  padding: var(--zn-spacing-2x-small, 4px) var(--zn-spacing-x-small, 8px);
   border: none;
+  border-radius: var(--slash-menu-item-border-radius);
   background: transparent;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
 
-  &--active,
   &:hover:not(&--disabled) {
     background: var(--zn-input-background-color-hover);
   }
 
+  // The active item is where Enter lands, so it is tinted rather than merely shaded like a hover.
+  // The tints throughout are translucent, so one set of them suits a light and a dark panel alike.
+  &--active,
+  &--active:hover:not(&--disabled) {
+    background: rgba(var(--zn-color-primary), 0.08);
+  }
+
   &--disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -83,8 +143,25 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 16px;
-  color: var(--zn-color-neutral-500);
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border: solid var(--zn-panel-border-width, 1px) rgba(var(--zn-color-primary), 0.18);
+  border-radius: var(--slash-menu-item-border-radius);
+  background: rgba(var(--zn-color-primary), 0.06);
+  color: var(--zn-color-neutral-700);
+
+  // Icons are all-or-nothing across a list, so an item without one still holds the column
+  &--empty {
+    border-color: transparent;
+    background: none;
+  }
+
+  .slash-menu__item--active & {
+    border-color: rgba(var(--zn-color-primary), 0.3);
+    background: rgba(var(--zn-color-primary), 0.14);
+    color: rgb(var(--zn-color-primary));
+  }
 }
 
 .slash-menu__text {
@@ -95,6 +172,7 @@
 }
 
 .slash-menu__label {
+  font-weight: var(--zn-font-weight-semibold);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/slash-menu/slash-menu.test.ts

@@ -81,6 +81,113 @@ describe('<zn-slash-menu>', () => {
     expect(reachedDocument, 'mousedown does not bubble to document').to.be.false;
   });
 
+  it('shows the keyboard hints unless they are hidden', async () => {
+    const el = await fixture<ZnSlashMenu>(html`
+      <zn-slash-menu></zn-slash-menu>`);
+    el.items = [{label: 'One'}];
+    el.show();
+    await el.updateComplete;
+
+    const hints = el.shadowRoot!.querySelector('[part="hints"]')!;
+    expect(hints).to.exist;
+    expect(hints.textContent).to.contain('navigate');
+    expect(hints.textContent).to.contain('select');
+    expect(hints.textContent).to.contain('dismiss');
+    expect(hints.querySelectorAll('kbd').length).to.equal(4);
+
+    el.hideHints = true;
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('[part="hints"]')).to.not.exist;
+  });
+
+  describe('recently used', () => {
+    const key = 'slash-menu-test';
+    const labelsOf = (el: ZnSlashMenu) =>
+      [...el.shadowRoot!.querySelectorAll('[data-slash-item] .slash-menu__label')].map(node => node.textContent);
+
+    const choose = async (el: ZnSlashMenu, label: string) => {
+      const buttons = [...el.shadowRoot!.querySelectorAll<HTMLElement>('[data-slash-item]')];
+      const button = buttons.find(item => item.querySelector('.slash-menu__label')?.textContent === label);
+      button!.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true}));
+      await el.updateComplete;
+    };
+
+    const items = [
+      {label: 'One', value: '1'},
+      {label: 'Two', value: '2'},
+      {label: 'Three', value: '3'}
+    ];
+
+    beforeEach(() => localStorage.removeItem('zn-slash-recent:' + key));
+
+    it('lists the items chosen here first, newest first, and remembers them', async () => {
+      const el = await fixture<ZnSlashMenu>(html`
+        <zn-slash-menu recent-key=${key} max-recent="2"></zn-slash-menu>`);
+      el.items = items;
+      el.show();
+      await el.updateComplete;
+
+      expect(labelsOf(el), 'nothing has been chosen yet').to.eql(['One', 'Two', 'Three']);
+
+      await choose(el, 'Three');
+      await choose(el, 'Two');
+
+      expect(labelsOf(el)).to.eql(['Two', 'Three', 'One', 'Two', 'Three']);
+      expect(el.shadowRoot!.querySelector('[part="group-heading"]')!.textContent).to.contain('Recently used');
+      expect(el.activeItem?.label, 'starts on the most recent item').to.equal('Two');
+
+      const other = await fixture<ZnSlashMenu>(html`
+        <zn-slash-menu recent-key=${key} max-recent="2" recent-heading="Your favourites"></zn-slash-menu>`);
+      other.items = items;
+      other.show();
+      await other.updateComplete;
+
+      expect(labelsOf(other), 'the list outlives the element').to.eql(['Two', 'Three', 'One', 'Two', 'Three']);
+      expect(other.shadowRoot!.querySelector('[part="group-heading"]')!.textContent).to.contain('Your favourites');
+
+      other.clearRecent();
+      await other.updateComplete;
+      expect(labelsOf(other)).to.eql(['One', 'Two', 'Three']);
+    });
+
+    it('closes the section with a rule only when the items below it have no heading', async () => {
+      const el = await fixture<ZnSlashMenu>(html`
+        <zn-slash-menu recent-key=${key}></zn-slash-menu>`);
+      el.items = items;
+      el.show();
+      await el.updateComplete;
+
+      await choose(el, 'Two');
+      expect(el.shadowRoot!.querySelector('[part="divider"]'), 'ungrouped items get a rule').to.exist;
+
+      el.items = items.map(item => ({...item, group: 'Basic blocks'}));
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.querySelector('[part="divider"]'), 'a group heading separates them already').to.not.exist;
+      expect(el.shadowRoot!.querySelectorAll('[part="group-heading"]').length).to.equal(2);
+    });
+
+    it('stands aside while the user is searching, and stays off without a key', async () => {
+      const el = await fixture<ZnSlashMenu>(html`
+        <zn-slash-menu recent-key=${key}></zn-slash-menu>`);
+      el.items = items;
+      el.show();
+      await el.updateComplete;
+
+      await choose(el, 'Three');
+      el.query = 'o';
+      await el.updateComplete;
+
+      expect(labelsOf(el), 'the ranked matches are the answer to a query').to.eql(['One', 'Two', 'Three']);
+
+      el.recentKey = '';
+      el.query = '';
+      await el.updateComplete;
+
+      expect(labelsOf(el)).to.eql(['One', 'Two', 'Three']);
+    });
+  });
+
   it('reports how many matches were not rendered', async () => {
     const el = await fixture<ZnSlashMenu>(html`
       <zn-slash-menu max-items="2"></zn-slash-menu>`);

package/src/components/textarea/textarea.component.ts

@@ -200,12 +200,18 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** The characters that open the slash menu. */
   @property({attribute: 'slash-trigger'}) slashTrigger = '/';
 
-  /** The heading shown above the slash menu's items. */
+  /** The name the slash menu's list is announced by. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
   /** Hides the insertion keys normally shown against the slash menu's items. */
   @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
 
+  /**
+   * Lists the items most recently chosen here above the rest, remembered in `localStorage` under this
+   * key. Share a key between the fields that should share a history; leave unset to offer no such list.
+   */
+  @property({attribute: 'slash-recent-key'}) slashRecentKey = '';
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -587,7 +593,11 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
+              <zn-slash-menu
+                part="slash-menu"
+                heading=${this.slashHeading}
+                recent-key=${this.slashRecentKey}
+                ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

package/src/components/textarea/textarea.test.ts

@@ -151,8 +151,8 @@ describe('<zn-textarea>', () => {
 
       expect(el.shadowRoot!.querySelector('zn-slash-menu'), 'no second menu is created').to.be.null;
       expect(slotted.items.map(item => item.label)).to.deep.equal(['Brand name', 'Support email']);
-      expect(slotted.shadowRoot!.querySelector('[part="heading"]')?.textContent?.trim())
-        .to.contain('Replacements');
+      expect(slotted.shadowRoot!.querySelector('[part="list"]')?.getAttribute('aria-label'))
+        .to.equal('Replacements');
       expect(menuItemLabels(slotted), 'the author\'s max-items is respected').to.deep.equal(['Brand name']);
 
       press(el, 'Enter');