@kubex/zinc 1.1.78 → 1.1.80

package/docs/pages/components/inline-edit.md

@@ -117,6 +117,27 @@ Use `input-type="textarea"` for multi-line text content.
 </div>
 ```
 
+#### Slash Menu Quick Insertions
+
+{% raw %}
+
+`slash-items`, `slash-preset`, `slash-trigger` and `slash-heading` are forwarded to the inner
+[`zn-textarea`](/components/textarea#slash-menu-quick-insertions), so typing `/` offers replacement strings at the
+caret. The menu claims `Enter` and `Escape` while it is open, so choosing an item neither submits nor cancels the edit.
+
+```html:preview
+<zn-inline-edit
+  name="terms"
+  input-type="textarea"
+  textarea-rows="4"
+  value="This agreement is between you and "
+  slash-heading="Replacement strings"
+  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+</zn-inline-edit>
+```
+
+{% endraw %}
+
 ### Number Input Type
 
 Use `input-type="number"` for numeric values.

package/docs/pages/components/rating.md

@@ -328,7 +328,8 @@ Available CSS custom properties:
 - `--symbol-color` - Color of unfilled symbols
 - `--symbol-color-active` - Color of filled/active symbols
 - `--symbol-size` - Size of the symbols
-- `--symbol-spacing` - Spacing between symbols
+- `--symbol-spacing` - Gap between symbols. The rating adds no padding of its own, so the first symbol sits flush with
+  the component's edge and lines up with other form controls.
 - `--preview-color` - Color of the preview value (see [Preview](#preview))
 - `--preview-size` - Font size of the preview value
 

package/docs/pages/components/slash-item.md

@@ -0,0 +1,126 @@
+---
+meta:
+  title: Slash Item
+  description: Slash items declare the quick insertions offered by a slash menu.
+layout: component
+---
+
+{% raw %}
+
+`<zn-slash-item>` renders nothing on its own. It describes one entry for the component it sits in — today that is
+[`zn-textarea`](/components/textarea#slash-menu-quick-insertions), which picks up items placed anywhere inside it,
+including inside a slotted [`zn-slash-menu`](/components/slash-menu).
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="5" help-text="Type / to insert">
+  <zn-slash-item
+    icon="tag@lu"
+    label="Brand name"
+    description="The merchant's trading name"
+    value="{{BRAND_NAME}}"></zn-slash-item>
+  <zn-slash-item
+    icon="mail@lu"
+    label="Support email"
+    value="{{SUPPORT_EMAIL}}"></zn-slash-item>
+</zn-textarea>
+```
+
+## Examples
+
+### Inserting Long Or Multi-Line Text
+
+Leave `value` off and the element's text content is inserted instead, which keeps whole clauses readable in markup.
+
+```html:preview
+<zn-textarea label="Policy" rows="6" help-text="Type / to insert">
+  <zn-slash-item icon="scale@lu" label="Governing law">This agreement is governed by the laws of {{JURISDICTION}}, and the parties submit to the exclusive jurisdiction of its courts.</zn-slash-item>
+  <zn-slash-item icon="undo-2@lu" label="Refund window">Refunds are available within {{REFUND_DAYS}} days of purchase.</zn-slash-item>
+</zn-textarea>
+```
+
+### Searching, Grouping And Ordering
+
+`keywords` adds terms an item can be found by, `group` collects items under a heading, and `order` overrides the
+position an item takes in the list.
+
+```html:preview
+<zn-textarea label="Grouped insertions" rows="5" help-text="Type / then try 'company'">
+  <zn-slash-item
+    group="Merchant"
+    icon="tag@lu"
+    label="Brand name"
+    keywords="company, trading"
+    value="{{BRAND_NAME}}"></zn-slash-item>
+  <zn-slash-item
+    group="Merchant"
+    icon="building@lu"
+    label="Legal entity"
+    keywords="company, registered"
+    value="{{LEGAL_ENTITY}}"></zn-slash-item>
+  <zn-slash-item
+    group="Customer"
+    icon="user@lu"
+    label="Customer name"
+    value="{{CUSTOMER_NAME}}"></zn-slash-item>
+</zn-textarea>
+```
+
+### Placing The Caret Inside An Insertion
+
+`caret-offset` sets where the caret lands after insertion, as an offset into the inserted text. Here it lands between
+the tags, ready for the conditional's body.
+
+```html:preview
+<zn-textarea label="Conditional block" rows="5" help-text="Type / to insert">
+  <zn-slash-item
+    icon="git-branch@lu"
+    label="If trial customer"
+    caret-offset="12"
+    value="{{IF_TRIAL}}{{END_IF}}"></zn-slash-item>
+</zn-textarea>
+```
+
+### Disabled Items
+
+A disabled item is listed but cannot be chosen — useful for showing a replacement string that is not available in the
+current context.
+
+```html:preview
+<zn-textarea label="Available insertions" rows="5" help-text="Type / to insert">
+  <zn-slash-item label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+  <zn-slash-item
+    label="Invoice number"
+    description="Only available on invoice templates"
+    value="{{INVOICE_NUMBER}}"
+    disabled></zn-slash-item>
+</zn-textarea>
+```
+
+### Handling An Item Yourself
+
+An item with an `action` and no `value` inserts nothing. Listen for `zn-slash-select`, call `preventDefault()`, and do
+whatever the action means in your application. The typed trigger and query are removed either way — they are a command,
+not content.
+
+```html:preview
+<zn-textarea id="action-textarea" label="Notes" rows="5" help-text="Type / to insert">
+  <zn-slash-item label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+  <zn-slash-item icon="clock@lu" label="Timestamp" action="timestamp"></zn-slash-item>
+</zn-textarea>
+
+<script type="module">
+  const textarea = document.getElementById('action-textarea');
+
+  await customElements.whenDefined('zn-textarea');
+
+  textarea.addEventListener('zn-slash-select', (event) => {
+    if (event.detail.item.action !== 'timestamp') return;
+
+    event.preventDefault();
+    textarea.setRangeText(new Date().toISOString());
+    textarea.focus();
+  });
+</script>
+```
+
+{% endraw %}

package/docs/pages/components/slash-menu.md

@@ -0,0 +1,168 @@
+---
+meta:
+  title: Slash Menu
+  description: A keyboard-driven list of quick insertions, anchored to the caret of the field that opened it.
+layout: component
+---
+
+{% raw %}
+
+`<zn-slash-menu>` is the panel behind a slash menu. Most of the time you don't use it directly — a component drives it
+for you, as [`zn-textarea`](/components/textarea#slash-menu-quick-insertions) does with its
+[`zn-slash-item`](/components/slash-item) entries:
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="5" help-text="Type / to insert a replacement string"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}"></zn-textarea>
+```
+
+Slot one into a textarea when you want the panel's own settings — `heading`, `max-items`, `placement`, `empty-text`, or
+its width — declared in markup. The textarea then drives your menu instead of building its own:
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="6" help-text="Type / to insert">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
+    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+```
+
+Reach for the component on its own when you are adding a slash menu to a control the library doesn't cover. It renders
+and positions the list; the `SlashMenuController` watches a text field, tracks the query and inserts the result.
+
+## Examples
+
+### Driving It Directly
+
+Set `items`, position the panel with `anchor` (an element or a
+[virtual element](https://floating-ui.com/docs/virtual-elements)), and call `show()`. The menu emits
+`zn-slash-item-select` when an item is chosen. That event does not cross shadow boundaries, so a component that hosts
+the menu in its shadow root re-emits it as its own public event.
+
+```html:preview
+<zn-button id="menu-anchor">Open the menu</zn-button>
+<zn-slash-menu id="standalone-menu"></zn-slash-menu>
+<div id="standalone-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const anchor = document.getElementById('menu-anchor');
+  const menu = document.getElementById('standalone-menu');
+  const log = document.getElementById('standalone-log');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = [
+    {label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu', group: 'Merchant'},
+    {label: 'Legal entity', value: '{{LEGAL_ENTITY}}', icon: 'building@lu', group: 'Merchant'},
+    {label: 'Jurisdiction', value: '{{JURISDICTION}}', icon: 'scale@lu', group: 'Policy'}
+  ];
+  menu.anchor = anchor;
+
+  anchor.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+
+  menu.addEventListener('zn-slash-item-select', (event) => {
+    log.textContent = `selected ${event.detail.item.label} → ${event.detail.item.value}`;
+    menu.hide();
+  });
+</script>
+```
+
+### Keyboard Navigation
+
+The menu doesn't listen for keys itself — whatever owns the field decides which keys belong to the menu, then calls
+`moveActive()`, `selectActive()` and `hide()`. Disabled items are skipped, and moving past either end wraps around.
+
+```html:preview
+<zn-button id="nav-toggle">Toggle</zn-button>
+<zn-button id="nav-up">↑</zn-button>
+<zn-button id="nav-down">↓</zn-button>
+<zn-button id="nav-select">Enter</zn-button>
+<zn-slash-menu id="nav-menu"></zn-slash-menu>
+<div id="nav-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const menu = document.getElementById('nav-menu');
+  const toggle = document.getElementById('nav-toggle');
+  const log = document.getElementById('nav-log');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = [
+    {label: 'Brand name', value: '{{BRAND_NAME}}'},
+    {label: 'Not available here', value: '{{INVOICE_NUMBER}}', disabled: true},
+    {label: 'Jurisdiction', value: '{{JURISDICTION}}'}
+  ];
+  menu.anchor = toggle;
+
+  toggle.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+  document.getElementById('nav-up').addEventListener('click', () => menu.moveActive(-1));
+  document.getElementById('nav-down').addEventListener('click', () => menu.moveActive(1));
+  document.getElementById('nav-select').addEventListener('click', () => menu.selectActive());
+
+  menu.addEventListener('zn-slash-item-select', (event) => {
+    log.textContent = `selected ${event.detail.item.label}`;
+  });
+</script>
+```
+
+### Truncating Long Lists
+
+`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The panel
+scrolls when its content exceeds `--slash-menu-max-height`.
+
+```html:preview
+<zn-button id="capped-toggle">Show 3 of 9</zn-button>
+<zn-slash-menu id="capped-menu" max-items="3"></zn-slash-menu>
+
+<script type="module">
+  const menu = document.getElementById('capped-menu');
+  const toggle = document.getElementById('capped-toggle');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = Array.from({length: 9}, (_, i) => ({label: `Replacement ${i + 1}`, value: `{{TOKEN_${i + 1}}}`}));
+  menu.anchor = toggle;
+
+  toggle.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+</script>
+```
+
+### Attaching It To Your Own Field
+
+`SlashMenuController` is the reusable half. Give it the field, the menu, and the items; it handles trigger detection,
+filtering, keyboard handling and insertion.
+
+```js
+import {SlashMenuController} from '@kubex/zinc';
+
+class MyEditor extends ZincElement {
+  private slash = new SlashMenuController(this, {
+    menu: () => this.shadowRoot.querySelector('zn-slash-menu'),
+    items: () => [{label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu'}],
+    trigger: () => '/',
+    onSelect: (item, query) => !this.emit('my-select', {detail: {item, query}}).defaultPrevented,
+    onInsert: (item, value) => this.emit('my-insert', {detail: {item, value}})
+  });
+
+  firstUpdated() {
+    this.slash.attach(this.shadowRoot.querySelector('textarea'));
+  }
+}
+```
+
+Items can be shared between fields by registering them once as a preset:
+
+```js
+import {registerSlashMenuPreset} from '@kubex/zinc';
+
+registerSlashMenuPreset('legal', [
+  {label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu'},
+  {label: 'Jurisdiction', value: '{{JURISDICTION}}', icon: 'scale@lu'}
+]);
+```
+
+Any component that reads presets — `zn-textarea` via `slash-preset="legal"` — then offers the same list.
+
+{% endraw %}

package/docs/pages/components/textarea.md

@@ -408,6 +408,154 @@ Use methods to programmatically control the textarea.
 </script>
 ```
 
+### Slash Menu Quick Insertions
+
+{% raw %}
+
+Give a textarea a list of quick insertions and typing `/` opens a menu at the caret, in the same way the
+[editor](/components/editor)'s context menu works. It is built for replacement strings — merge fields such as
+`{{BRAND_NAME}}` in legal copy — but any text can be inserted.
+
+The list can be declared as an attribute, which accepts the shorthand `Label={{TOKEN}}` for each entry:
+
+```html:preview
+<zn-textarea
+  label="Terms and conditions"
+  rows="6"
+  help-text="Type / to insert a replacement string"
+  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}, Support email={{SUPPORT_EMAIL}}">
+This agreement is between you and {{LEGAL_ENTITY}}, trading as
+</zn-textarea>
+```
+
+Type `/` at the start of a word, keep typing to filter, then choose an item with `↑`/`↓` and `Enter` (or `Tab`), or by
+clicking it. `Escape` closes the menu without inserting and leaves the field focused. The trigger and the query that
+follows it are replaced by the item's value.
+
+#### Declaring Items With `zn-slash-item`
+
+For richer entries — icons, descriptions, groups, or multi-line values — put [`zn-slash-item`](/components/slash-item)
+elements inside the textarea. No `slot` attribute is needed: items are picked up wherever they sit. An item's text
+content is inserted when it has no `value` attribute, which keeps long clauses readable in markup.
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="8" help-text="Type / to insert">
+  <zn-slash-item
+    group="Merchant"
+    icon="tag@lu"
+    label="Brand name"
+    description="The merchant's trading name"
+    keywords="company, trading"
+    value="{{BRAND_NAME}}"></zn-slash-item>
+  <zn-slash-item
+    group="Merchant"
+    icon="mail@lu"
+    label="Support email"
+    value="{{SUPPORT_EMAIL}}"></zn-slash-item>
+  <zn-slash-item
+    group="Clauses"
+    icon="scale@lu"
+    label="Governing law"
+    description="Full clause, inserted inline">This agreement is governed by the laws of {{JURISDICTION}}, and the parties submit to the exclusive jurisdiction of its courts.</zn-slash-item>
+</zn-textarea>
+```
+
+#### Slotting The Menu Itself
+
+Wrap the items in a [`zn-slash-menu`](/components/slash-menu) on the `slash-menu` slot to keep the whole configuration
+in one place and set the panel's own attributes — `heading`, `max-items`, `placement`, `empty-text` — in markup. The
+textarea uses that menu instead of building its own, so anything you style on it applies.
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="7" help-text="Type / to insert">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
+    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item icon="mail@lu" label="Support email" value="{{SUPPORT_EMAIL}}"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+```
+
+#### Reusable Presets
+
+Register a list once and reference it by name from any textarea with `slash-preset`. This keeps a single definition of
+the merge fields an application allows.
+
+```html:preview
+<zn-textarea
+  label="Refund policy"
+  rows="5"
+  slash-preset="legal"
+  help-text="Type / to insert a replacement string"></zn-textarea>
+
+<script type="module">
+  import {registerSlashMenuPreset} from '/dist/zn.min.js';
+
+  registerSlashMenuPreset('legal', [
+    {label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu', group: 'Merchant'},
+    {label: 'Legal entity', value: '{{LEGAL_ENTITY}}', icon: 'building@lu', group: 'Merchant'},
+    {label: 'Refund window', value: '{{REFUND_DAYS}} days', icon: 'calendar@lu', group: 'Policy'},
+    {label: 'Jurisdiction', value: '{{JURISDICTION}}', icon: 'scale@lu', group: 'Policy'}
+  ]);
+</script>
+```
+
+#### Changing the Trigger
+
+Set `slash-trigger` to any characters. Using `{{` lets someone who already knows the token they want type it directly
+and get the list as they go.
+
+```html:preview
+<zn-textarea
+  label="Email footer"
+  rows="4"
+  slash-trigger="{{"
+  help-text="Type {{ to insert a replacement string"
+  slash-items="Brand name={{BRAND_NAME}}, Unsubscribe link={{UNSUBSCRIBE_URL}}"></zn-textarea>
+```
+
+#### Custom And Remote Items
+
+`slashItemsProvider` resolves extra items each time the menu opens, so a list can come from an API. `zn-slash-select` is
+cancelable: call `preventDefault()` to handle an item yourself instead of inserting its value, which is how items that
+open a dialog or run a command are built. The trigger and query the user typed are removed either way.
+
+```html:preview
+<zn-textarea id="provider-textarea" label="Notes" rows="5" help-text="Type / to insert"></zn-textarea>
+<div id="provider-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const textarea = document.getElementById('provider-textarea');
+  const log = document.getElementById('provider-log');
+
+  await customElements.whenDefined('zn-textarea');
+
+  textarea.slashItemsProvider = async (query) => {
+    // In a real application this would be a fetch
+    return [
+      {label: 'Today', value: new Date().toLocaleDateString(), icon: 'calendar@lu'},
+      {label: 'Clear the field', icon: 'trash-2@lu', action: 'clear', description: 'Handled by the page'}
+    ];
+  };
+
+  textarea.addEventListener('zn-slash-select', (event) => {
+    log.textContent = `zn-slash-select: ${event.detail.item.label}`;
+
+    if (event.detail.item.action === 'clear') {
+      event.preventDefault();
+      textarea.value = '';
+    }
+  });
+
+  textarea.addEventListener('zn-slash-insert', (event) => {
+    log.textContent = `zn-slash-insert: ${event.detail.value}`;
+  });
+</script>
+```
+
+{% endraw %}
+
 ### Selection and Range Methods
 
 Use `setSelectionRange()` and `setRangeText()` methods to work with text selections.

package/docs/pages/components/translations.md

@@ -323,6 +323,36 @@ A complete example showing product content management with translations.
 </div>
 ```
 
+### Slash Menu Quick Insertions
+
+{% raw %}
+
+Copy that carries replacement strings — `{{BRAND_NAME}}` and the like — needs the same tokens in every language. Set
+`slash-items` alongside `input-type="textarea"` and typing `/` offers them at the caret, in whichever language is
+being edited. The attribute takes the same shorthand and JSON that
+[`zn-textarea`](/components/textarea#slash-menu-quick-insertions) accepts, and `slash-preset`, `slash-trigger` and
+`slash-heading` are forwarded too.
+
+```html:preview
+<zn-translations
+  label="Confirmation message"
+  input-type="textarea"
+  textarea-rows="4"
+  languages='{"en": "EN", "fr": "FR", "de": "DE"}'
+  values='{"en": "Look for /"}'
+  slash-heading="Replacement strings"
+  slash-items='[
+    {"label": "Brand name", "value": "{{BRAND_NAME}}", "description": "The product / company name", "icon": "sell"},
+    {"label": "Customer email", "value": "{{CUSTOMER_EMAIL}}", "description": "The customer&#39;s email address", "icon": "mail"},
+    {"label": "Renewal price", "value": "{{RENEWAL_PRICE}}", "description": "The renewal price amount", "icon": "payments"}
+  ]'></zn-translations>
+```
+
+The menu claims `↑`, `↓`, `Enter`, `Tab` and `Escape` while it is open, so choosing an item never submits the form the
+way `Enter` otherwise would.
+
+{% endraw %}
+
 ## Properties
 
 | Property    | Type                        | Default         | Description                                                          |
@@ -335,6 +365,10 @@ A complete example showing product content management with translations.
 | `flush`     | `boolean`                   | `false`         | Removes padding for compact layout                                   |
 | `languages` | `Record<string, string>`    | `{en: "EN"}`    | Object mapping language codes to display names                       |
 | `values`    | `Record<string, string>`    | `{}`            | Object mapping language codes to translation text                    |
+| `slash-items`   | `SlashMenuItem[]`       | `[]`            | Quick insertions offered by the slash menu on a `textarea` input     |
+| `slash-preset`  | `string`                | `''`            | Registered item sets to offer, comma separated                       |
+| `slash-trigger` | `string`                | `'/'`           | The characters that open the slash menu                              |
+| `slash-heading` | `string`                | `'Insert'`      | Heading shown above the slash menu's items                           |
 
 ## Events
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.78",
+  "version": "1.1.80",
   "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

@@ -5,6 +5,7 @@ import { defaultValue } from "../../internal/default-value";
 import { FormControlController } from "../../internal/form";
 import { HasSlotController } from "../../internal/slot";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { parseSlashItems, type SlashMenuItem } from "../slash-menu/slash-menu-items";
 import { property, query, state } from 'lit/decorators.js';
 import { watch } from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
@@ -97,6 +98,31 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   @property({ attribute: "input-type" }) inputType: 'select' | 'text' | 'data-select' | 'number' | 'textarea' = 'text';
   @property({ attribute: "textarea-rows", type: Number }) textareaRows: 1;
 
+  /**
+   * Quick insertions offered by the slash menu of a `textarea` input. Accepts a JSON array of items, or the
+   * shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Forwarded to the inner `zn-textarea`.
+   */
+  @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[]>;
+
   @property({ type: Object }) options: { [key: string]: string } = {};
 
   @property({ attribute: 'provider' }) selectProvider: string;
@@ -434,6 +460,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         pattern=${ifDefined(this.pattern)}
         autocomplete=${ifDefined(this.autocomplete)}
         dir="${this.dir}"
+        slash-trigger="${this.slashTrigger}"
+        slash-heading="${this.slashHeading}"
+        slash-preset="${this.slashPreset}"
+        .slashItems="${this.slashItems}"
+        .slashItemsProvider="${this.slashItemsProvider}"
         @zn-input="${this.handleInput}"
         @zn-blur="${this.handleBlur}">
       </zn-textarea>`;