@kubex/zinc 1.1.94 → 1.1.96

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');

package/src/components/translations/translations.component.ts

@@ -69,12 +69,15 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   /** 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 slash menu items most recently chosen here above the rest, remembered under this key. */
+  @property({attribute: 'slash-recent-key'}) slashRecentKey = '';
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({attribute: false}) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -447,6 +450,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
               slash-trigger="${this.slashTrigger}"
               slash-heading="${this.slashHeading}"
               slash-preset="${this.slashPreset}"
+              slash-recent-key="${this.slashRecentKey}"
               ?slash-hide-keys="${this.slashHideKeys}"
               .slashItems="${this.slashItems}"
               .slashItemsProvider="${this.slashItemsProvider}"