@kubex/zinc 1.1.140 → 1.1.142

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

@@ -12,6 +12,21 @@ describe('<zn-page-builder>', () => {
     expect(el.shadowRoot?.querySelector('[part="canvas"]')).to.exist;
   });
 
+  it('should fill the height it is given inside a growing panel', async () => {
+    const parent = await fixture(html`
+      <div style="display: flex; flex-direction: column; height: 700px; width: 900px;">
+        <zn-sp grow flush>
+          <form>
+            <zn-page-builder name="config"></zn-page-builder>
+          </form>
+        </zn-sp>
+      </div>`);
+    const el = parent.querySelector<ZnPageBuilder>('zn-page-builder')!;
+    await el.updateComplete;
+
+    expect(el.getBoundingClientRect().height).to.equal(700);
+  });
+
   it('should build the palette from slotted config templates', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder>
@@ -312,6 +327,201 @@ describe('<zn-page-builder>', () => {
     expect(unnamed?.querySelector('.inspector-head__type'), 'no duplicate type line').to.not.exist;
   });
 
+  it('should resize the inspector by dragging its edge handle', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero">
+          <zn-input name="title" label="Title"></zn-input>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    const handle = el.shadowRoot!.querySelector<HTMLElement>('.inspector-resize');
+    expect(handle, 'resize handle').to.exist;
+
+    const before = el.shadowRoot!.querySelector('.inspector')!.getBoundingClientRect().width;
+    handle!.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true, clientX: 800, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointermove', {bubbles: true, clientX: 600, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointerup', {bubbles: true, pointerId: 1}));
+    await el.updateComplete;
+
+    expect(builder.style.getPropertyValue('--inspector-col')).to.equal(`${Math.round(before + 200)}px`);
+  });
+
+  it('should hold the dragged inspector above its minimum width', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","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;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    const handle = el.shadowRoot!.querySelector<HTMLElement>('.inspector-resize')!;
+    handle.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true, clientX: 800, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointermove', {bubbles: true, clientX: 5000, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointerup', {bubbles: true, pointerId: 1}));
+    await el.updateComplete;
+
+    expect(parseInt(builder.style.getPropertyValue('--inspector-col'), 10)).to.equal(300);
+  });
+
+  it('should resize the inspector from the keyboard', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","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;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    const handle = el.shadowRoot!.querySelector<HTMLElement>('.inspector-resize')!;
+    expect(handle.getAttribute('role')).to.equal('separator');
+
+    handle.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowLeft', bubbles: true}));
+    await el.updateComplete;
+    expect(parseInt(builder.style.getPropertyValue('--inspector-col'), 10)).to.equal(363);
+
+    handle.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+    await el.updateComplete;
+    expect(parseInt(builder.style.getPropertyValue('--inspector-col'), 10)).to.equal(343);
+  });
+
+  it('should still tuck a resized inspector fully away', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","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;
+
+    const handle = el.shadowRoot!.querySelector<HTMLElement>('.inspector-resize')!;
+    handle.dispatchEvent(new PointerEvent('pointerdown', {bubbles: true, clientX: 800, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointermove', {bubbles: true, clientX: 600, pointerId: 1}));
+    window.dispatchEvent(new PointerEvent('pointerup', {bubbles: true, pointerId: 1}));
+    await el.updateComplete;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    expect(parseInt(builder.style.getPropertyValue('--inspector-col'), 10), 'resized').to.be.greaterThan(343);
+
+    // An inline width outranks the collapsed rule's 0px, so it has to step aside.
+    el.inspectorCollapsed = true;
+    await el.updateComplete;
+    expect(getComputedStyle(builder).getPropertyValue('--inspector-col').trim()).to.equal('0px');
+  });
+
+  const richBuilder = (height: number) => fixture<ZnPageBuilder>(html`
+    <zn-page-builder style="width: 1200px; height: ${height}px" config='{"sections":[{"id":"s1","type":"rich","data":{}}]}'>
+      <template type="rich" slot="config" label="Rich Text">
+        <zn-translations name="content" label="Content" input-type="remarkd"></zn-translations>
+      </template>
+    </zn-page-builder>`);
+
+  it('should widen the inspector by default for a remarkd editor', async () => {
+    const el = await richBuilder(600);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    expect(builder.classList.contains('builder--inspector-wide'), 'wide').to.be.true;
+    expect(getComputedStyle(builder).getPropertyValue('--inspector-col').trim()).to.equal('520px');
+  });
+
+  it('should leave the inspector at its usual width without a remarkd editor', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>
+        <template type="hero" slot="config" label="Hero">
+          <zn-input name="title" label="Title"></zn-input>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const builder = el.shadowRoot!.querySelector<HTMLElement>('.builder')!;
+    expect(builder.classList.contains('builder--inspector-wide')).to.be.false;
+    expect(getComputedStyle(builder).getPropertyValue('--inspector-col').trim()).to.equal('343px');
+  });
+
+  it('should prefill translations stamped inside a translation group', async () => {
+    const state = JSON.stringify({
+      sections: [{
+        id: 's1', type: 'tile', data: {
+          title: JSON.stringify({en: 'Billing'}),
+          subtitle: JSON.stringify({en: 'How to pay'})
+        }
+      }]
+    });
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder .config="${state}">
+        <template type="tile" slot="config" label="Tile">
+          <zn-translation-group inline languages='{"en":"English","fr":"French"}'>
+            <zn-translations name="title" label="Title"></zn-translations>
+            <zn-translations name="subtitle" label="Subtitle"></zn-translations>
+          </zn-translation-group>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const fields = [...el.shadowRoot!.querySelectorAll<HTMLElement & {
+      values: Record<string, string>; languages: Record<string, string>; grouped: boolean;
+      updateComplete: Promise<unknown>;
+    }>('.inspector__form zn-translations')];
+    expect(fields.length, 'both fields stamped').to.equal(2);
+    await Promise.all(fields.map(f => f.updateComplete));
+
+    expect(fields[0].values.en).to.equal('Billing');
+    expect(fields[1].values.en).to.equal('How to pay');
+    // The group owns the select and the language list, so the children drop theirs.
+    fields.forEach(field => {
+      expect(field.grouped, 'grouped').to.be.true;
+      expect(field.languages).to.have.property('fr');
+      expect(field.shadowRoot!.querySelector('[part="language-select"]'), 'child select').to.not.exist;
+    });
+    expect(el.shadowRoot!.querySelectorAll('.inspector__form [part="language-select"]').length).to.equal(0);
+  });
+
+  it('should not strand the group language select above its fields', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder style="width: 1200px; height: 600px" config='{"sections":[{"id":"s1","type":"tile","data":{}}]}'>
+        <template type="tile" slot="config" label="Tile">
+          <zn-translation-group inline languages='{"en":"English","fr":"French"}'>
+            <zn-translations name="title" label="Title" flush></zn-translations>
+            <zn-translations name="subtitle" label="Subtitle" flush></zn-translations>
+          </zn-translation-group>
+        </template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const group = el.shadowRoot!.querySelector<HTMLElement & { updateComplete: Promise<unknown> }>(
+      '.inspector__form zn-translation-group')!;
+    await group.updateComplete;
+    const select = group.shadowRoot!.querySelector<HTMLElement>('[part="language-field"]')!;
+    const first = group.querySelector<HTMLElement>('zn-translations')!;
+
+    const gap = first.getBoundingClientRect().top - select.getBoundingClientRect().bottom;
+    expect(gap, 'gap under the language select').to.be.at.most(24);
+  });
+
   it('should clear the selection from the inspector close button', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"s1","type":"hero","data":{}}]}'>

package/src/components/remarkd-editor/remarkd-editor.component.ts

@@ -1778,12 +1778,14 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   /** A picker action with no endpoint configured is not offered at all. */
   private actionAvailable(action: EditorAction): boolean {
+    if (action.opens === 'image') return !!this.attachmentUrl;
     if (action.opens === 'include') return !!this.includeUrl;
     if (action.opens === 'link') return !!this.linkUrl;
     return true;
   }
 
   private slashItemAvailable(item: SlashMenuItem): boolean {
+    if (item.action === 'image') return !!this.attachmentUrl;
     if (item.action === 'include') return !!this.includeUrl;
     if (item.action === 'link') return !!this.linkUrl;
     return true;

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -331,7 +331,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should group the toolbar buttons', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     const groups = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar .toolbar__group');
 
     expect(groups.length).to.be.greaterThan(5);
@@ -343,7 +343,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should move toolbar groups into an overflow menu when narrow', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor style="width: 240px"></zn-remarkd-editor>`);
+      <zn-remarkd-editor attachment-url="/attachments" style="width: 240px"></zn-remarkd-editor>`);
     await el.updateComplete;
     await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__toolbar-more'),
       'the overflow trigger never appeared');
@@ -748,7 +748,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should list every action in the slash menu under its group', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -761,20 +761,32 @@ Second"></zn-remarkd-editor>`);
 
   it('should omit the Include action from the slash menu without an include-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
     await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
 
     const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
-    expect(menu.items.length).to.equal(EDITOR_ACTIONS.length - 2);
+    expect(menu.items.length).to.equal(EDITOR_ACTIONS.length - 1);
     expect(menu.items.every(item => item.action !== 'include')).to.be.true;
   });
 
+  it('should omit the Image action from the slash menu without an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+    typeInBlock(el, '/');
+    await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
+
+    const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
+    expect(menu.items.every(item => item.action !== 'image')).to.be.true;
+  });
+
   it('should omit the article link action without a link-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -787,7 +799,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should offer the article link action with a link-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -1179,6 +1191,22 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     expect(options[0].textContent).to.contain('Refund Policy');
   });
 
+  it('should offer no image entry points without an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);
+    const tooltips = Array.from(el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button'))
+      .map(button => button.getAttribute('tooltip'));
+    expect(tooltips).to.not.contain('Image');
+  });
+
+  it('should offer the Image action with an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title" attachment-url="/attachments"></zn-remarkd-editor>`);
+    const tooltips = Array.from(el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button'))
+      .map(button => button.getAttribute('tooltip'));
+    expect(tooltips).to.contain('Image');
+  });
+
   it('should offer no include entry points without an include-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);

package/src/components/select/select.component.ts

@@ -845,6 +845,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.getAllOptGroups().forEach(group => {
         group.hidden = false;
       });
+      this.updateOptGroupSeparators();
       this._noResultsVisible = false;
       return;
     }
@@ -872,6 +873,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // Update opt-group visibility based on whether any child options are visible
     this.getAllOptGroups().forEach(group => group.updateVisibility());
+    this.updateOptGroupSeparators();
 
     // Show empty state when no non-selected options match (selected-but-hidden items are value anchors, not results)
     this._noResultsVisible = allOptions.filter(o => !o.selected).every(option => option.hidden);
@@ -907,6 +909,12 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.getAllOptGroups().forEach(group => {
       group.hidden = false;
     });
+    this.updateOptGroupSeparators();
+  }
+
+  // Runs after every visibility change so group separators reflect which groups are actually showing
+  private updateOptGroupSeparators() {
+    this.getAllOptGroups().forEach(group => group.updateSeparator());
   }
 
   /**
@@ -1099,6 +1107,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     // Select only the options that match the new value (re-query in case options were materialised)
     this.setSelectedOptions(this.getAllOptions().filter(el => value.includes(el.value)));
 
+    this.updateOptGroupSeparators();
+
     // of check if an option has selected attribute set initially
     if (!this.valueHasChanged) {
       const initiallySelectedOptions = allOptions.filter(el => el.hasAttribute('selected'));
@@ -1330,6 +1340,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  protected updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    this.updateOptGroupSeparators();
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 

package/src/components/select/select.test.ts

@@ -220,6 +220,16 @@ describe('<zn-select>', () => {
 
       expect(visibleValues()).to.deep.equal(['lemon']);
     });
+
+    it('drops the separator on the first visible group when earlier groups are filtered out', async () => {
+      const groups = el.querySelectorAll('zn-opt-group');
+
+      await type('berr');
+      expect(groups[1].hasAttribute('data-first-visible'), 'Berries group while alone').to.be.true;
+
+      await type('');
+      expect(groups[1].hasAttribute('data-first-visible'), 'Berries group with Citrus restored').to.be.false;
+    });
   });
 
   describe('Escape key', () => {

package/src/components/sp/sp.scss

@@ -15,6 +15,12 @@
   height: 100%;
 }
 
+// A form wrapping the whole panel is there to submit it, not to lay it out —
+// leaving it in the box tree floors the panel at the form's content height.
+:host([grow]) ::slotted(form:only-child) {
+  display: contents;
+}
+
 :host([max-full]) {
   max-height: 100%;
   overflow: hidden;

package/src/components/sp/sp.test.ts

@@ -8,6 +8,37 @@ describe('<zn-sp>', () => {
     expect(el).to.exist;
   });
 
+  it('should lay out through a form that wraps the whole panel', async () => {
+    const parent = await fixture(html`
+      <div style="display: flex; flex-direction: column; height: 400px; width: 600px;">
+        <zn-sp grow flush>
+          <form>
+            <div id="panel" style="height: 100%;">Content</div>
+          </form>
+        </zn-sp>
+      </div>
+    `);
+
+    const form = parent.querySelector('form')!;
+    expect(getComputedStyle(form).display).to.equal('contents');
+    expect(parent.querySelector<HTMLElement>('#panel')!.getBoundingClientRect().height).to.equal(400);
+  });
+
+  it('should leave a form that shares the panel with siblings alone', async () => {
+    const parent = await fixture(html`
+      <div style="display: flex; flex-direction: column; height: 400px;">
+        <zn-sp grow>
+          <h2>Heading</h2>
+          <form>
+            <div>Content</div>
+          </form>
+        </zn-sp>
+      </div>
+    `);
+
+    expect(getComputedStyle(parent.querySelector('form')!).display).to.equal('block');
+  });
+
   it('should fill its parent container height', async () => {
     const parent = await fixture(html`
       <div style="height: 300px;">

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

@@ -13,6 +13,7 @@ import ZnChip from '../chip';
 import ZnInlineEdit from '../inline-edit';
 import ZnInput from '../input';
 import ZnOption from '../option';
+import ZnRemarkdEditor from '../remarkd-editor';
 import ZnSelect from '../select';
 import ZnTextarea from '../textarea';
 import type {PropertyValues} from 'lit';
@@ -64,6 +65,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     'zn-inline-edit': ZnInlineEdit,
     'zn-input': ZnInput,
     'zn-option': ZnOption,
+    'zn-remarkd-editor': ZnRemarkdEditor,
     'zn-select': ZnSelect,
     'zn-textarea': ZnTextarea
   };
@@ -96,11 +98,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Boolean, reflect: true}) flush = false;
 
   /** The control each translation is edited through. */
-  @property({attribute: "input-type"}) inputType: 'text' | 'number' | 'textarea' = 'text';
+  @property({attribute: "input-type"}) inputType: 'text' | 'number' | 'textarea' | 'remarkd' = 'text';
 
   /** Rows of the textarea, when `input-type` is `textarea`. */
   @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
+  /** Allows raw HTML blocks, when `input-type` is `remarkd`. */
+  @property({type: Boolean, attribute: 'allow-raw'}) allowRaw = false;
+
+  /** Where the remarkd editor uploads images, when `input-type` is `remarkd`. */
+  @property({attribute: 'attachment-url'}) attachmentUrl = '';
+
+  /** Where the remarkd editor lists embeddable includes, when `input-type` is `remarkd`. */
+  @property({attribute: 'include-url'}) includeUrl = '';
+
+  /** Where the remarkd editor searches link targets, when `input-type` is `remarkd`. */
+  @property({attribute: 'link-url'}) linkUrl = '';
+
   /**
    * Edits the translation through a `zn-inline-edit` — the value reads as text until it is clicked — rather than a
    * plain input or textarea.
@@ -325,7 +339,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   };
 
   private handleValueUpdate = (e: CustomEvent) => {
-    const target = e.target as (ZnInput | ZnInlineEdit | ZnTextarea);
+    const target = e.target as (ZnInput | ZnInlineEdit | ZnRemarkdEditor | ZnTextarea);
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
       if (newValue !== this.values[this._activeLanguage]) {
@@ -387,6 +401,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
         ></zn-inline-edit>`;
     }
 
+    if (this.inputType === 'remarkd') {
+      return html`
+        <zn-remarkd-editor
+          .value=${live(value)}
+          name="${this.name}"
+          placeholder="${placeholder}"
+          dir="${dir}"
+          ?disabled="${this.disabled}"
+          ?allow-raw="${this.allowRaw}"
+          attachment-url="${this.attachmentUrl}"
+          include-url="${this.includeUrl}"
+          link-url="${this.linkUrl}"
+          @zn-change="${this.handleValueUpdate}"
+          @zn-input="${this.handleValueUpdate}"
+        ></zn-remarkd-editor>`;
+    }
+
     if (this.inputType === 'textarea') {
       return html`
         <zn-textarea

package/src/components/translations/translations.test.ts

@@ -219,6 +219,47 @@ describe('<zn-translations>', () => {
       expect(el.shadowRoot!.querySelector('zn-input')).to.be.null;
     });
 
+    it('renders a remarkd editor for input-type="remarkd"', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd" values='{"en":"= Hello"}'></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector<HTMLElement & { value: string }>('zn-remarkd-editor');
+      expect(editor).to.exist;
+      expect(editor!.value).to.equal('= Hello');
+      expect(el.shadowRoot!.querySelector('zn-input')).to.be.null;
+      expect(el.shadowRoot!.querySelector('zn-textarea')).to.be.null;
+    });
+
+    it('passes its editor endpoints through to the remarkd editor', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd"
+                         allow-raw
+                         attachment-url="/a"
+                         include-url="/i"
+                         link-url="/l"></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector('zn-remarkd-editor')!;
+      expect(editor.getAttribute('attachment-url')).to.equal('/a');
+      expect(editor.getAttribute('include-url')).to.equal('/i');
+      expect(editor.getAttribute('link-url')).to.equal('/l');
+      expect(editor.hasAttribute('allow-raw')).to.be.true;
+    });
+
+    it('writes a remarkd edit back to the active language', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd" values='{"en":"one"}'></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector<HTMLElement & { value: string }>('zn-remarkd-editor')!;
+      editor.value = 'two';
+      editor.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+      await el.updateComplete;
+
+      expect(el.values.en).to.equal('two');
+    });
+
     it('renders an inline edit when asked for one', async () => {
       const el = await fixture<ZnTranslations>(html`
         <zn-translations inline-edit values='{"en":"Hello"}'></zn-translations>`);