@kubex/zinc 1.1.78 → 1.1.80

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

@@ -2,13 +2,17 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
+import {getSlashMenuPreset, parseSlashItems, type SlashMenuItem} from "../slash-menu/slash-menu-items";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {SlashMenuController} from "../slash-menu/slash-menu-controller";
 import {watch} from '../../internal/watch';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import ZnSlashItem from "../slash-item";
+import ZnSlashMenu from "../slash-menu";
 
 import styles from './textarea.scss';
 
@@ -22,12 +26,22 @@ import styles from './textarea.scss';
  * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
  * @slot context-note - Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot slash-items - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are
+ *  picked up wherever they sit inside the textarea, so this slot name is optional.
+ * @slot slash-menu - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can
+ *  be set in markup. Any `<zn-slash-item>` children of it become the menu's items.
+ *
+ * @dependency zn-slash-item
+ * @dependency zn-slash-menu
  *
  * @event zn-blur - Emitted when the control loses focus.
  * @event zn-change - Emitted when an alteration to the control's value is committed by the user.
  * @event zn-focus - Emitted when the control gains focus.
  * @event zn-input - Emitted when the control receives input.
  * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event zn-slash-select - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to
+ *  suppress the insertion and handle the item yourself.
+ * @event zn-slash-insert - Emitted after a slash menu item's value has been inserted.
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -35,9 +49,14 @@ import styles from './textarea.scss';
  * @csspart form-control-help-text - The help text's wrapper.
  * @csspart base - The component's base wrapper.
  * @csspart textarea - The internal `<textarea>` control.
+ * @csspart slash-menu - The slash menu shown at the caret.
  */
 export default class ZnTextarea extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-slash-item': ZnSlashItem,
+    'zn-slash-menu': ZnSlashMenu
+  };
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-blur', 'zn-input']
@@ -50,11 +69,26 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** Ensures we only attempt to derive the initial value from light DOM content once */
   private _didInitFromContent = false;
 
+  private readonly slashController = new SlashMenuController(this, {
+    menu: () => this.mountSlashMenu(),
+    items: search => this.resolveSlashItems(search),
+    trigger: () => this.slashTrigger,
+    onSelect: (item, search) => !this.emit('zn-slash-select', {
+      detail: {item, query: search}
+    }).defaultPrevented,
+    // The field's own input event has already synced `value` by this point
+    onInsert: (item, value) => this.emit('zn-slash-insert', {detail: {item, value}})
+  });
+
   @query('.form-control-input') formControl: HTMLElement;
   @query('.textarea__control') input: HTMLTextAreaElement;
+  @query('zn-slash-menu') slashMenuElement: ZnSlashMenu | null;
 
   @state() hasFocus = false;
 
+  /** Renders the slash menu only once it has been needed, keeping unused textareas cheap. */
+  @state() private hasSlashMenu = false;
+
   @property() title = ''; // make reactive to pass through
 
   /** The name of the textarea, submitted as a name/value pair with form data. */
@@ -146,6 +180,35 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
    */
   @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 
+  /**
+   * Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand
+   * `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of
+   * `SlashMenuItem` objects in JavaScript.
+   */
+  @property({
+    attribute: 'slash-items',
+    converter: {
+      fromAttribute: (value: string) => parseSlashItems(value),
+      toAttribute: (value: SlashMenuItem[]) => JSON.stringify(value)
+    }
+  })
+  slashItems: SlashMenuItem[] = [];
+
+  /** Names of item sets registered with `registerSlashMenuPreset`, comma separated. */
+  @property({attribute: 'slash-preset'}) slashPreset = '';
+
+  /** The characters that open the slash menu. */
+  @property({attribute: 'slash-trigger'}) slashTrigger = '/';
+
+  /** The heading shown above the slash menu's items. */
+  @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
+
+  /**
+   * 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.
+   */
+  @property({attribute: false}) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
+
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
@@ -202,6 +265,77 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
 
   firstUpdated() {
     this.formControlController.updateValidity();
+    this.slashController.attach(this.input);
+  }
+
+  /** The insertions the slash menu offers, gathered from every source, in the order they were declared. */
+  async resolveSlashItems(search = ''): Promise<SlashMenuItem[]> {
+    const items = [
+      ...getSlashMenuPreset(this.slashPreset),
+      ...this.slashItems,
+      ...this.slottedSlashItems()
+    ];
+
+    const provided = await this.slashItemsProvider?.(search);
+    return provided ? [...items, ...provided] : items;
+  }
+
+  /** Opens the slash menu at the caret, inserting the trigger if it isn't already there. */
+  async showSlashMenu() {
+    this.focus();
+
+    const caret = this.input.selectionStart ?? this.input.value.length;
+    const precedes = this.input.value.slice(caret - this.slashTrigger.length, caret);
+    if (precedes !== this.slashTrigger) {
+      this.setRangeText(this.slashTrigger, caret, caret, 'end');
+    }
+
+    await this.updateComplete;
+    this.slashController.requestOpen();
+  }
+
+  /** Closes the slash menu. */
+  hideSlashMenu() {
+    this.slashController.close();
+  }
+
+  private slottedSlashItems(): SlashMenuItem[] {
+    const elements = [...this.querySelectorAll<ZnSlashItem>('zn-slash-item')];
+
+    return elements.map(element => {
+      // Elements from a different zinc build may not have upgraded, so fall back to their markup
+      if (typeof element.toSlashMenuItem === 'function') return element.toSlashMenuItem();
+
+      const value = element.getAttribute('value') ?? (element.textContent ?? '').trim();
+      const order = element.getAttribute('order');
+      const caretOffset = element.getAttribute('caret-offset');
+
+      return {
+        label: element.getAttribute('label') ?? value,
+        value,
+        icon: element.getAttribute('icon') ?? undefined,
+        description: element.getAttribute('description') ?? undefined,
+        keywords: element.getAttribute('keywords') ?? undefined,
+        group: element.getAttribute('group') ?? undefined,
+        action: element.getAttribute('action') ?? undefined,
+        order: order === null ? undefined : Number(order),
+        caretOffset: caretOffset === null ? undefined : Number(caretOffset),
+        disabled: element.hasAttribute('disabled')
+      };
+    });
+  }
+
+  private async mountSlashMenu(): Promise<ZnSlashMenu | null> {
+    // A slotted menu is the author's own: it keeps its own heading, sizing and styling
+    const slotted = this.querySelector<ZnSlashMenu>('zn-slash-menu');
+    if (slotted) return slotted;
+
+    if (!this.hasSlashMenu) {
+      this.hasSlashMenu = true;
+      await this.updateComplete;
+    }
+
+    return this.slashMenuElement;
   }
 
   private handleBlur() {
@@ -231,6 +365,9 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    // The slash menu claims its own keys before this handler runs; Escape closes it, not the field
+    if (this.slashController.open) return;
+
     if (event.key === 'Escape') {
       this.input.blur();
       event.stopPropagation();
@@ -445,6 +582,12 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
               @blur=${this.handleBlur}
             ></textarea>
           </div>
+          ${this.hasSlashMenu
+            ? html`
+              <zn-slash-menu part="slash-menu" heading=${this.slashHeading}></zn-slash-menu>`
+            : ''}
+          <slot name="slash-menu"></slot>
+          <slot name="slash-items" hidden></slot>
         </div>
 
         <div

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

@@ -1,7 +1,51 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {aTimeout, expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnSlashMenu from '../slash-menu/slash-menu.component';
 import type ZnTextarea from './textarea.component';
 
+/** Types `text` into the field the way a user would, leaving the caret at the end. */
+function type(el: ZnTextarea, text: string) {
+  const field = el.input;
+  field.value = text;
+  field.setSelectionRange(text.length, text.length);
+  field.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));
+}
+
+function press(el: ZnTextarea, key: string) {
+  const event = new KeyboardEvent('keydown', {key, bubbles: true, composed: true, cancelable: true});
+  el.input.dispatchEvent(event);
+  return event;
+}
+
+/**
+ * A real key press, keyup included — the menu has to survive the caret checks that run on it.
+ * Item resolution is async, so this settles anything the keyup kicked off before returning.
+ */
+async function pressAndRelease(el: ZnTextarea, key: string) {
+  press(el, key);
+  el.input.dispatchEvent(new KeyboardEvent('keyup', {key, bubbles: true, composed: true}));
+
+  await aTimeout(0);
+  await el.updateComplete;
+  await slashMenuOf(el)?.updateComplete;
+}
+
+function slashMenuOf(el: ZnTextarea) {
+  return el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu');
+}
+
+function menuItemLabels(menu: ZnSlashMenu) {
+  return [...menu.shadowRoot!.querySelectorAll('.slash-menu__label')].map(item => item.textContent?.trim());
+}
+
+async function openSlashMenu(el: ZnTextarea, text = '/') {
+  el.focus();
+  type(el, text);
+  await waitUntil(() => slashMenuOf(el)?.open, 'the slash menu never opened');
+
+  return slashMenuOf(el)!;
+}
+
 describe('<zn-textarea>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-textarea></zn-textarea> `);
@@ -16,7 +60,7 @@ describe('<zn-textarea>', () => {
           <zn-textarea></zn-textarea>
         </div>
       `);
-      const el = wrapper.querySelector('zn-textarea') as ZnTextarea;
+      const el = wrapper.querySelector<ZnTextarea>('zn-textarea')!;
       await el.updateComplete;
 
       let wrapperEscapes = 0;
@@ -40,4 +84,268 @@ describe('<zn-textarea>', () => {
       expect(wrapperEscapes, 'wrapper should not see Escape on press 1').to.equal(0);
     });
   });
+
+  describe('slash menu', () => {
+    it('stays closed when no items are configured', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea></zn-textarea>`);
+      await el.updateComplete;
+
+      el.focus();
+      type(el, '/');
+      await el.updateComplete;
+      await el.updateComplete;
+
+      expect(slashMenuOf(el)?.open ?? false, 'nothing to insert, so nothing to show').to.be.false;
+    });
+
+    it('opens on the trigger with items from the slash-items attribute', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      expect(menuItemLabels(menu)).to.deep.equal(['Brand name', 'Support email']);
+    });
+
+    it('collects items from slotted zn-slash-item elements', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea>
+          <zn-slash-item slot="slash-items" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+          <zn-slash-item slot="slash-items" label="Governing law">This agreement is governed by {{JURISDICTION}}.
+          </zn-slash-item>
+        </zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      expect(menuItemLabels(menu)).to.deep.equal(['Brand name', 'Governing law']);
+      expect(menu.items[1].value, 'text content is used when no value attribute is set')
+        .to.equal('This agreement is governed by {{JURISDICTION}}.');
+    });
+
+    it('picks up zn-slash-item children with no slot attribute', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea>
+          <zn-slash-item label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+          <zn-slash-item label="Support email" value="{{SUPPORT_EMAIL}}"></zn-slash-item>
+        </zn-textarea>`);
+      await el.updateComplete;
+      expect(el.value, 'the items must not be read as initial content').to.equal('');
+
+      const menu = await openSlashMenu(el);
+      expect(menuItemLabels(menu)).to.deep.equal(['Brand name', 'Support email']);
+    });
+
+    it('uses a slotted zn-slash-menu and the items inside it', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea>
+          <zn-slash-menu slot="slash-menu" heading="Replacements" max-items="1">
+            <zn-slash-item label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+            <zn-slash-item label="Support email" value="{{SUPPORT_EMAIL}}"></zn-slash-item>
+          </zn-slash-menu>
+        </zn-textarea>`);
+      const slotted = el.querySelector<ZnSlashMenu>('zn-slash-menu')!;
+
+      el.focus();
+      type(el, '/');
+      await waitUntil(() => slotted.open, 'the slotted menu never opened');
+      await slotted.updateComplete;
+
+      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(menuItemLabels(slotted), 'the author\'s max-items is respected').to.deep.equal(['Brand name']);
+
+      press(el, 'Enter');
+      await el.updateComplete;
+      expect(el.value).to.equal('{{BRAND_NAME}}');
+    });
+
+    it('filters as the query is typed', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el, 'Legal text /sup');
+
+      expect(menuItemLabels(menu)).to.deep.equal(['Support email']);
+    });
+
+    it('closes when the query matches nothing', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      type(el, '/zzz');
+      await waitUntil(() => !menu.open, 'the menu stayed open with no matches');
+    });
+
+    it('ignores a trigger in the middle of a word', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      await el.updateComplete;
+
+      el.focus();
+      type(el, 'http://example.com/br');
+      await el.updateComplete;
+      await el.updateComplete;
+
+      expect(slashMenuOf(el)?.open ?? false).to.be.false;
+    });
+
+    it('inserts the active item on Enter, replacing the trigger and query', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el, 'Provided by /bra');
+
+      const inserted: string[] = [];
+      el.addEventListener('zn-slash-insert', (event: Event) => {
+        inserted.push((event as CustomEvent<{value: string}>).detail.value);
+      });
+
+      const event = press(el, 'Enter');
+      await el.updateComplete;
+
+      expect(event.defaultPrevented, 'Enter is claimed by the menu').to.be.true;
+      expect(el.value).to.equal('Provided by {{BRAND_NAME}}');
+      expect(el.input.selectionStart, 'the caret lands after the insertion').to.equal(el.value.length);
+      expect(inserted).to.deep.equal(['{{BRAND_NAME}}']);
+      expect(menu.open).to.be.false;
+    });
+
+    it('moves the active item with the arrow keys', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      press(el, 'ArrowDown');
+      await menu.updateComplete;
+      expect(menu.activeItem?.label).to.equal('Support email');
+
+      press(el, 'Enter');
+      await el.updateComplete;
+      expect(el.value).to.equal('{{SUPPORT_EMAIL}}');
+    });
+
+    it('keeps its place in the list once the arrow key is released', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea
+          slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}, Jurisdiction={{JURISDICTION}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      await pressAndRelease(el, 'ArrowDown');
+      expect(menu.activeItem?.label, 'keyup must not rebuild the list').to.equal('Support email');
+
+      await pressAndRelease(el, 'ArrowDown');
+      expect(menu.activeItem?.label).to.equal('Jurisdiction');
+
+      await pressAndRelease(el, 'ArrowUp');
+      expect(menu.activeItem?.label).to.equal('Support email');
+
+      press(el, 'Enter');
+      await el.updateComplete;
+      expect(el.value).to.equal('{{SUPPORT_EMAIL}}');
+    });
+
+    it('lets zn-slash-select cancel the insertion', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      await openSlashMenu(el);
+
+      const selected: string[] = [];
+      el.addEventListener('zn-slash-select', (event: Event) => {
+        selected.push((event as CustomEvent<{item: {label: string}}>).detail.item.label);
+        event.preventDefault();
+      });
+
+      press(el, 'Enter');
+      await el.updateComplete;
+
+      expect(selected).to.deep.equal(['Brand name']);
+      expect(el.value, 'the value is not inserted, but the command text still goes').to.equal('');
+    });
+
+    it('closes on Escape without blurring the field', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      press(el, 'Escape');
+      await el.updateComplete;
+
+      expect(menu.open).to.be.false;
+      expect(el.shadowRoot!.activeElement, 'Escape closed the menu, not the field').to.equal(el.input);
+    });
+
+    it('does not reopen at a dismissed trigger while the query grows', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+
+      press(el, 'Escape');
+      await el.updateComplete;
+
+      type(el, '/br');
+      await el.updateComplete;
+      await el.updateComplete;
+      expect(menu.open).to.be.false;
+    });
+
+    it('supports a custom trigger', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-trigger="{{" slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      const menu = await openSlashMenu(el, '{{bra');
+
+      expect(menu.items.map(item => item.label)).to.deep.equal(['Brand name']);
+
+      press(el, 'Enter');
+      await el.updateComplete;
+      expect(el.value).to.equal('{{BRAND_NAME}}');
+    });
+
+    it('appends items from slashItemsProvider', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      el.slashItemsProvider = () => [{label: 'Merchant name', value: '{{MERCHANT_NAME}}'}];
+      await el.updateComplete;
+
+      const menu = await openSlashMenu(el);
+      expect(menuItemLabels(menu)).to.deep.equal(['Brand name', 'Merchant name']);
+    });
+
+    it('removes the command text for items that only carry an action', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea></zn-textarea>`);
+      el.slashItems = [{label: 'Timestamp', action: 'timestamp'}];
+      await el.updateComplete;
+
+      await openSlashMenu(el, 'Logged at /time');
+      press(el, 'Enter');
+      await el.updateComplete;
+
+      expect(el.value).to.equal('Logged at ');
+    });
+
+    it('renders the panel at the caret', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}" style="margin-top: 100px"></zn-textarea>`);
+      const menu = await openSlashMenu(el);
+      await menu.updateComplete;
+
+      const panel = menu.shadowRoot!.querySelector('[part="panel"]')!.getBoundingClientRect();
+      const field = el.input.getBoundingClientRect();
+
+      expect(panel.width, 'the panel is laid out').to.be.greaterThan(0);
+      expect(panel.height, 'the panel is laid out').to.be.greaterThan(0);
+      expect(panel.top, 'the panel sits below the first line of the field').to.be.greaterThan(field.top);
+    });
+
+    it('is opened programmatically by showSlashMenu()', async () => {
+      const el = await fixture<ZnTextarea>(html`
+        <zn-textarea slash-items="Brand name={{BRAND_NAME}}"></zn-textarea>`);
+      await el.updateComplete;
+
+      await el.showSlashMenu();
+      await waitUntil(() => slashMenuOf(el)?.open, 'showSlashMenu() did not open the menu');
+
+      expect(el.value).to.equal('/');
+    });
+  });
 });

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

@@ -5,6 +5,7 @@ import {html, nothing, unsafeCSS} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {keyed} from 'lit/directives/keyed.js';
 import {live} from 'lit/directives/live.js';
+import {parseSlashItems, type SlashMenuItem} from '../slash-menu/slash-menu-items';
 import {property, state} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import ZincElement from '../../internal/zinc-element';
@@ -43,6 +44,31 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({attribute: "input-type"}) inputType: 'select' | 'text' | 'number' | 'textarea' = 'text';
   @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
+  /**
+   * Quick insertions offered by the slash menu when `input-type` is `textarea`. Accepts a JSON array of items, or
+   * the shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.
+   */
+  @property({
+    attribute: 'slash-items',
+    converter: {
+      fromAttribute: (value: string) => parseSlashItems(value),
+      toAttribute: (value: SlashMenuItem[]) => JSON.stringify(value)
+    }
+  })
+  slashItems: SlashMenuItem[] = [];
+
+  /** Names of item sets registered with `registerSlashMenuPreset`, comma separated. */
+  @property({attribute: 'slash-preset'}) slashPreset = '';
+
+  /** The characters that open the slash menu. */
+  @property({attribute: 'slash-trigger'}) slashTrigger = '/';
+
+  /** The heading shown above the slash menu's items. */
+  @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
+
+  /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
+  @property({attribute: false}) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
+
   /** When true, hides the individual language navbar and defers language control to a parent zn-translation-group. */
   @property({type: Boolean, reflect: true}) grouped = false;
 
@@ -406,6 +432,11 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
               name="${this.name}"
               placeholder="Enter translation..."
               dir="${isRTL ? 'rtl' : 'ltr'}"
+              slash-trigger="${this.slashTrigger}"
+              slash-heading="${this.slashHeading}"
+              slash-preset="${this.slashPreset}"
+              .slashItems="${this.slashItems}"
+              .slashItemsProvider="${this.slashItemsProvider}"
               @zn-change="${this.handleValueUpdate}"
               @zn-input="${this.handleValueUpdate}"
               @zn-submit="${this.handleSubmit}"