@kubex/zinc 1.1.97 → 1.1.99

package/src/components/navbar/navbar.scss

@@ -303,6 +303,17 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
   }
 }
 
+// Icon-bar items are standalone pills, not tabs — the tab-strip rule above
+// leaves them with a top+right border only, which reads as an unfinished box
+:host([icon-bar]:not([stacked])) {
+  ul.navbar {
+    > li {
+      border-width: 1px;
+      border-radius: 6px;
+    }
+  }
+}
+
 :host {
   display: block;
   width: 100%;

package/src/components/page/page.scss

@@ -180,7 +180,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     display: flex;
-    gap: var(--zn-spacing-x-small);
+    gap: var(--zn-spacing-2x-small);
     align-items: center;
     text-wrap: auto;
   }

package/src/components/radio/radio.component.ts

@@ -9,6 +9,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import type {SelectionCardControlPosition, SelectionCardImagePosition} from '../../internal/selection-card';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './radio.scss';
@@ -22,6 +23,7 @@ import styles from './radio.scss';
  * @dependency zn-icon
  *
  * @slot - The radio's label.
+ * @slot image - Replaces the built-in image used by contained radios.
  * @slot description - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.
  * @slot selected-content - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.
  *
@@ -35,9 +37,22 @@ import styles from './radio.scss';
  * @csspart control - The square container that wraps the radio's checked state.
  * @csspart control--checked - Matches the control part when the radio is checked.
  * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
+ * @csspart image-container - The wrapper around the built-in image or image slot.
+ * @csspart image - The built-in image.
+ * @csspart card-title - The title inside a selection card.
  * @csspart label - The container that wraps the radio's label.
  * @csspart description - The container that wraps the radio's description.
  * @csspart selected-content - The container that wraps optional content that appears when a radio is checked.
+ *
+ * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+ * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+ * @cssproperty --zn-selection-card-min-height - Minimum height of a contained radio with an image.
+ * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+ * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+ * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+ * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+ * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+ * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnRadio extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -48,7 +63,7 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
     defaultValue: (control: ZnRadio) => control.defaultChecked,
     setValue: (control: ZnRadio, checked: boolean) => (control.checked = checked)
   });
-  private readonly hasSlotController = new HasSlotController(this, 'description');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="radio"]') input: HTMLInputElement;
 
@@ -62,6 +77,9 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   /** The current value of the radio, submitted as a name/value pair with form data. */
   @property() value: string;
 
+  /** Title rendered inside the card. The default slot takes precedence when provided. */
+  @property({attribute: 'card-title'}) cardTitle = '';
+
   /** The radio's size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -74,6 +92,24 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   /** Draws a container around the radio. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /** URL for the image shown in a contained radio. */
+  @property() src = '';
+
+  /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+  @property({attribute: 'image-alt'}) imageAlt = '';
+
+  /** Places the image above, beside, or below the radio's text. Requires `contained`. */
+  @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
+
+  /**
+   * Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself
+   * shows the selected state. Requires `contained`.
+   */
+  @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
+
   /** Applies styles relevant to radios in a horizontal layout. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
@@ -198,6 +234,9 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   render() {
     const hasDescriptionSlot = this.hasSlotController.test('description');
     const hasDescription = this.description ? true : hasDescriptionSlot;
+    const hasImage = this.contained && (Boolean(this.src) || this.hasSlotController.test('image'));
+    const hasDefaultSlot = this.hasSlotController.test('[default]');
+    const isCard = this.contained && (hasImage || Boolean(this.cardTitle) || this.controlPosition !== 'start');
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltip = this.hasSlotController.test('label-tooltip');
     const hasLabel = this.label || hasLabelSlot;
@@ -248,7 +287,11 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
             'radio--medium': this.size === 'medium',
             'radio--large': this.size === 'large',
             'radio--has-description': hasDescription,
-            'radio--has-selected-content': this.hasSlotController.test('selected-content')
+            'radio--has-selected-content': this.hasSlotController.test('selected-content'),
+            'selection-card': isCard,
+            'selection-card--has-image': hasImage,
+            [`selection-card--image-${this.imagePosition}`]: hasImage,
+            [`selection-card--control-${this.controlPosition}`]: isCard && this.controlPosition !== 'start'
           })}>
 
           <input
@@ -261,7 +304,7 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
             .disabled=${this.disabled}
             .required=${this.required}
             aria-checked=${this.checked ? 'true' : 'false'}
-            aria-describedby=${hasDescription ? '' : 'description'}
+            aria-describedby=${hasDescription ? 'description' : ''}
             @click=${this.handleClick}
             @input=${this.handleInput}
             @invalid=${this.handleInvalid}
@@ -270,16 +313,29 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
           />
           <span
             part="control${this.checked ? ' control--checked' : ''}"
-            class="radio__control">
+            class="radio__control selection-card__control">
             ${this.checked
               ? html`
                 <zn-icon part="checked-icon" size="18" class="radio__checked-icon"
                          src="radio_button_checked"></zn-icon>`
               : ''}
-        </span>
+          </span>
+
+          ${hasImage
+            ? html`
+              <span part="image-container" class="selection-card__image-container">
+                <slot name="image">
+                  ${this.src
+                    ? html`<img part="image" class="selection-card__image" src=${this.src} alt=${this.imageAlt}>`
+                    : ''}
+                </slot>
+              </span>`
+            : ''}
 
-          <div part="label" class="radio__label">
-            <slot></slot>
+          <div part="label" class="radio__label selection-card__content">
+            <span part="card-title" class="selection-card__title">
+              <slot></slot>${hasDefaultSlot ? '' : this.cardTitle}
+            </span>
             <div
               aria-hidden=${hasDescription ? 'false' : 'true'}
               class="radio__description"

package/src/components/radio/radio.scss

@@ -1,5 +1,6 @@
 @use "../../wc";
 @use "../../form-control";
+@use "../../selection-card";
 
 :host {
   display: block;

package/src/components/radio/radio.test.ts

@@ -7,4 +7,60 @@ describe('<zn-radio>', () => {
 
     expect(el).to.exist;
   });
+
+  it('renders card content and a built-in image', async () => {
+    const el = await fixture(html`
+      <zn-radio
+        contained
+        card-title="Basic"
+        description="For smaller businesses."
+        src="plan.svg"
+        image-alt="Basic plan">
+      </zn-radio>
+    `);
+
+    const image = el.shadowRoot!.querySelector('[part="image"]')!;
+    expect(image.getAttribute('src')).to.equal('plan.svg');
+    expect(image.getAttribute('alt')).to.equal('Basic plan');
+    expect(el.shadowRoot!.querySelector('[part="label"]')!.textContent).to.include('Basic');
+  });
+
+  it('renders card-title when formatting whitespace is present in the default slot', async () => {
+    const el = await fixture(html`
+      <zn-radio contained card-title="Complete">
+        <zn-icon slot="image" src="potted_plant"></zn-icon>
+      </zn-radio>
+    `);
+
+    expect(el.shadowRoot!.querySelector('[part="card-title"]')!.textContent).to.include('Complete');
+  });
+
+  it('positions card images and controls', async () => {
+    const el = await fixture(html`
+      <zn-radio contained image-position="top" control-position="bottom-right">
+        Complete
+        <zn-icon slot="image" src="potted_plant"></zn-icon>
+      </zn-radio>
+    `);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(base).to.have.class('selection-card--image-top');
+    expect(base).to.have.class('selection-card--control-bottom-right');
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
+  it('leaves a plain contained radio without card styles', async () => {
+    const el = await fixture(html`<zn-radio contained description="Supporting text">Basic</zn-radio>`);
+
+    expect(el.shadowRoot!.querySelector('[part="base"]')).not.to.have.class('selection-card');
+    expect(el.shadowRoot!.querySelector('[part="image-container"]')).to.be.null;
+  });
+
+  it('can hide the visual control without removing the native input', async () => {
+    const el = await fixture(html`<zn-radio contained control-position="none">Basic</zn-radio>`);
+
+    expect(el.shadowRoot!.querySelector('input[type="radio"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="control"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.have.class('selection-card--control-none');
+  });
 });

package/src/components/radio-group/radio-group.component.ts

@@ -30,7 +30,7 @@ import styles from './radio-group.scss';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-radio-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnRadioGroup extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -67,12 +67,21 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
   /** The radio group's size. This size will be applied to all child radios */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
+  /** The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
-  /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
+  /** The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of every contained radio in the group, which are rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /**
+   * Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
+   * `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+   */
+  @property({type: Boolean, reflect: true}) wrap = false;
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
@@ -190,6 +199,10 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
         radio.size = this.size;
         radio.horizontal = this.horizontal;
         radio.contained = this.contained;
+
+        if (this.square) {
+          radio.square = true;
+        }
       })
     );
 

package/src/components/radio-group/radio-group.scss

@@ -8,18 +8,21 @@
 
 :host([horizontal]) .form-control-input {
   display: flex;
+  flex-wrap: wrap;
   column-gap: var(--zn-spacing-2x-large);
+  row-gap: var(--zn-spacing-small);
 }
 
-:host([contained]) .form-control-input {
+/* The label supplies the gap above the options, so a group without one starts flush. */
+:host([contained]) .form-control--has-label .form-control-input {
   margin-top: var(--zn-spacing-medium);
 }
 
 :host([horizontal][contained]) .form-control-input {
-  margin-top: var(--zn-spacing-medium);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
-  gap: var(--zn-spacing-x-small);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zn-radio-group-column-width, 152px)), 1fr));
+  align-items: stretch;
+  gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-radio) {
@@ -36,6 +39,22 @@
   height: 100%;
 }
 
+/* `wrap` swaps the equal-width grid for a flex row: cards start from their basis and wrap onto new lines. */
+:host([horizontal][contained][wrap]) .form-control-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--zn-base-gap);
+}
+
+:host([wrap]) ::slotted(zn-radio[horizontal][contained]) {
+  flex: 1 1 var(--zn-radio-group-column-width, 152px);
+  min-width: 0;
+
+  /* A percentage height would resolve against every line, not the card's own. */
+  height: auto;
+}
+
 .form-control {
   position: relative;
   border: none;

package/src/components/radio-group/radio-group.test.ts

@@ -7,4 +7,19 @@ describe('<zn-radio-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('propagates contained and square to its radios', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-radio-group contained square>
+        <zn-radio value="one">One</zn-radio>
+        <zn-radio value="two">Two</zn-radio>
+      </zn-radio-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    el.querySelectorAll('zn-radio').forEach(child => {
+      expect(child).to.have.attribute('contained');
+      expect(child).to.have.attribute('square');
+    });
+  });
 });

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

@@ -110,6 +110,8 @@ const SLASH_ITEMS: SlashMenuItem[] = BLOCK_TYPES.map(item => item.image || item.
  * @csspart image-controls - The caption / alignment / size panel shown when an image block is clicked.
  * @csspart include - The chip rendered in place of an `include::` directive.
  * @csspart include-picker - The inline Include picker opened from the toolbar or "/include".
+ *
+ * @cssproperty --remarkd-editor-max-height - The tallest the editor grows before its body scrolls. Defaults to `100dvh`.
  */
 export default class ZnRemarkdEditor extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -165,6 +167,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   private dragStartX = 0;
   private dragStartY = 0;
   private dragGhost: HTMLElement | null = null;
+  private dragPointerY = 0;
+  private autoScrollFrame: number | null = null;
 
   /** The name of the control, submitted as part of form data. */
   @property() name = '';
@@ -440,14 +444,14 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     this.updateBlocks(blocks);
   }
 
-  private startEdit(index: number, draft?: string) {
+  private startEdit(index: number, draft?: string, align: 'nearest' | 'center' = 'nearest') {
     if (this.disabled || this.readonly) return;
     this.editingDraft = draft ?? this.blocks[index] ?? '';
     this.editingIndex = index;
     this.imageEdit = null;
     this.editShell = this.computeEditShell(this.editingDraft);
     this.slashController.close();
-    void this.focusInput();
+    void this.focusInput(align);
   }
 
   private updateImageEdit(patch: Partial<ImageBlockData>) {
@@ -507,24 +511,83 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     return '';
   }
 
-  private async focusInput() {
+  private async focusInput(align: 'nearest' | 'center' = 'nearest') {
     await this.updateComplete;
     const input = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input');
     if (input) {
       // Each edit renders its own textarea, so the slash menu is re-pointed at it.
       this.slashController.attach(input);
       this.autosize(input);
-      input.focus();
+      // preventScroll because the browser's own focus scroll walks every scrollable
+      // ancestor — including the surrounding page panel. reveal() stays in the editor.
+      input.focus({preventScroll: true});
       input.setSelectionRange(input.value.length, input.value.length);
+      this.reveal(input, align);
     }
     this.suppressBlurCommit = false;
   }
 
+  /**
+   * Scrolls the editor's own body to bring `el` into view. Never `scrollIntoView()` and
+   * never `focus()` without preventScroll: both walk every scrollable ancestor, and an
+   * `overflow: hidden`/`auto` panel around the editor is scrollable too — that shifts a
+   * container the user never asked to move.
+   */
+  private reveal(el: Element | null | undefined, align: 'nearest' | 'center' = 'nearest') {
+    const body = this.shadowRoot?.querySelector('.remarkd-editor__body');
+    if (!el || !body) return;
+
+    const target = el.getBoundingClientRect();
+    const view = body.getBoundingClientRect();
+
+    // scrollTop clamps itself, so an overshoot at either end lands at the limit.
+    if (align === 'center') {
+      // Taller than the view — a large image, say — can't be centred without hiding its
+      // top, so anchor the top and let the rest run off the bottom.
+      body.scrollTop += target.height > view.height
+        ? target.top - view.top
+        : (target.top + target.height / 2) - (view.top + view.height / 2);
+    } else if (target.top < view.top) {
+      body.scrollTop += target.top - view.top;
+    } else if (target.bottom > view.bottom) {
+      body.scrollTop += target.bottom - view.bottom;
+    }
+  }
+
+  private async revealAfterUpdate(selector: string, align: 'nearest' | 'center' = 'nearest') {
+    await this.updateComplete;
+    this.reveal(this.shadowRoot?.querySelector(selector), align);
+  }
+
+  /**
+   * Centres a block added without opening an editor. An image has no height until it
+   * loads, so the first pass scrolls against a layout that is still short — the second
+   * pass corrects it once the real dimensions are in.
+   */
+  private async revealBlock(index: number) {
+    await this.updateComplete;
+    const blockAt = () => this.shadowRoot?.querySelectorAll('.remarkd-editor__block')[index];
+    const block = blockAt();
+    if (!block) return;
+    this.reveal(block, 'center');
+
+    const loading = [...block.querySelectorAll('img')].filter(img => !img.complete);
+    if (!loading.length) return;
+
+    await Promise.all(loading.map(img => new Promise<void>(resolve => {
+      img.addEventListener('load', () => resolve(), {once: true});
+      img.addEventListener('error', () => resolve(), {once: true});
+    })));
+    await new Promise(requestAnimationFrame);
+    this.reveal(blockAt(), 'center');
+  }
+
   private addBlockAt(index: number, content: string) {
     if (this.disabled || this.readonly) return;
     const blocks = [...this.blocks];
     blocks.splice(index, 0, content);
     this.updateBlocks(blocks);
+    void this.revealBlock(index);
   }
 
   private deleteBlock(index: number) {
@@ -540,7 +603,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     const blocks = [...this.blocks];
     blocks.splice(index, 0, '');
     this.blocks = blocks;
-    this.startEdit(index, prefill);
+    this.startEdit(index, prefill, 'center');
   }
 
   /**
@@ -714,10 +777,56 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       document.body.style.cursor = 'grabbing';
     }
 
+    this.dragPointerY = e.clientY;
     this.moveDragGhost(e.clientX, e.clientY);
     this.dropIndicator = this.insertionIndexFromY(e.clientY);
+    this.autoScrollFrame ??= requestAnimationFrame(this.stepAutoScroll);
   };
 
+  /**
+   * Holding the pointer near a scroll edge keeps the content moving, so a block can
+   * be dragged past the visible slice of a long document. Runs per frame rather than
+   * per pointermove — a pointer parked at the edge stops emitting moves.
+   */
+  private stepAutoScroll = () => {
+    this.autoScrollFrame = null;
+    if (this.dragIndex === null || !this.autoScroll()) return;
+    // The content moved under a possibly stationary pointer, so the drop target shifts.
+    this.dropIndicator = this.insertionIndexFromY(this.dragPointerY);
+    this.autoScrollFrame = requestAnimationFrame(this.stepAutoScroll);
+  };
+
+  /** Scrolls the editor body, falling through to the page once the body is at its limit. */
+  private autoScroll(): boolean {
+    const body = this.shadowRoot?.querySelector('.remarkd-editor__body');
+    if (body) {
+      const {top, bottom} = body.getBoundingClientRect();
+      const delta = this.edgeScrollDelta(top, bottom);
+      const before = body.scrollTop;
+      if (delta) {
+        body.scrollTop += delta;
+        if (body.scrollTop !== before) return true;
+      }
+    }
+
+    const pageDelta = this.edgeScrollDelta(0, window.innerHeight);
+    if (!pageDelta) return false;
+    const before = window.scrollY;
+    window.scrollBy(0, pageDelta);
+    return window.scrollY !== before;
+  }
+
+  /** Scroll step for this frame: nothing until the pointer is within `edge` of a boundary. */
+  private edgeScrollDelta(top: number, bottom: number): number {
+    const edge = 56;
+    const max = 18;
+    const ramp = (depth: number) => Math.ceil((Math.min(depth, edge) / edge) * max);
+
+    if (this.dragPointerY < top + edge) return -ramp(top + edge - this.dragPointerY);
+    if (this.dragPointerY > bottom - edge) return ramp(this.dragPointerY - (bottom - edge));
+    return 0;
+  }
+
   private handleDragPointerUp = (e: PointerEvent) => {
     const from = this.dragIndex;
     let to = from !== null ? (this.dropIndicator ?? this.insertionIndexFromY(e.clientY)) : null;
@@ -732,6 +841,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   private cancelDrag = () => {
     this.pendingDragHandle = null;
+    if (this.autoScrollFrame !== null) cancelAnimationFrame(this.autoScrollFrame);
+    this.autoScrollFrame = null;
     document.removeEventListener('pointermove', this.handleDragPointerMove);
     document.removeEventListener('pointerup', this.handleDragPointerUp);
     document.removeEventListener('pointercancel', this.cancelDrag);
@@ -761,6 +872,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     if (this.disabled || this.readonly) return;
     this.includePickerIndex = null;
     this.imagePickerIndex = index;
+    void this.revealAfterUpdate('.remarkd-editor__image-picker', 'center');
   }
 
   private pickInclude(index: number) {
@@ -769,6 +881,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     this.includeQuery = '';
     this.includePickerIndex = index;
     void this.loadIncludeOptions();
+    void this.revealAfterUpdate('.remarkd-editor__include-picker', 'center');
   }
 
   private closeIncludePicker = () => {

package/src/components/remarkd-editor/remarkd-editor.scss

@@ -4,10 +4,16 @@
 
 :host {
   display: block;
+  overflow: hidden;
 }
 
 .remarkd-editor {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  // A long document scrolls the body instead of growing the page past one screenful,
+  // which also keeps the toolbar in reach.
+  max-height: var(--remarkd-editor-max-height, 100dvh);
   border: 1px solid rgb(var(--zn-border-color));
   border-radius: var(--zn-border-radius);
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
@@ -15,6 +21,7 @@
 
 .remarkd-editor__toolbar {
   display: flex;
+  flex: none;
   gap: 2px;
   flex-wrap: wrap;
   padding: var(--zn-spacing-x-small);
@@ -24,6 +31,7 @@
 .remarkd-editor__body {
   padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 52px;
   min-height: 10rem;
+  overflow-y: auto;
 }
 
 // Raw mode has no gutter handles, so it reclaims the left padding.
@@ -92,7 +100,6 @@
 }
 
 
-
 .remarkd-editor__drag-handle {
   display: inline-flex;
   align-items: center;