@kubex/zinc 1.1.184 → 2.0.0

package/src/components/color-picker/color-picker.scss

@@ -0,0 +1,141 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: var(--zn-color-picker-width, 280px);
+  padding: 12px;
+  background: var(--zn-panel-background-color, rgb(var(--zn-panel)));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius-medium);
+  box-shadow: var(--zn-shadow-large);
+  font-family: var(--zn-font-family-sans);
+}
+
+.color-picker__area {
+  position: relative;
+  height: 152px;
+  border-radius: var(--zn-border-radius);
+  cursor: crosshair;
+  touch-action: none;
+  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+}
+
+// Not @extend: a merged selector list holding an unknown vendor pseudo-element is dropped whole.
+@mixin thumb {
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
+}
+
+.color-picker__dot {
+  @include thumb;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  pointer-events: none;
+}
+
+.color-picker__hue {
+  appearance: none;
+  width: 100%;
+  height: 12px;
+  margin: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+
+  &::-webkit-slider-thumb {
+    @include thumb;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: transparent;
+  }
+
+  &::-moz-range-thumb {
+    @include thumb;
+    width: 12px;
+    height: 12px;
+    background: transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+}
+
+.color-picker__values {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.color-picker__row {
+  display: grid;
+  grid-template-columns: 48px 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-picker__row-label {
+  font-size: 11px;
+  font-weight: var(--zn-font-weight-semibold);
+  line-height: 1;
+  letter-spacing: 0.04em;
+  color: var(--zn-input-placeholder-color);
+}
+
+.color-picker__trio {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.color-picker__field {
+  width: 100%;
+  min-width: 0;
+  height: var(--zn-input-height-small);
+  padding: 0 8px;
+  font-family: var(--zn-font-family-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--zn-input-color);
+  background: var(--zn-input-background-color);
+  border: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border-radius: var(--zn-input-border-radius-small);
+  box-shadow: var(--zn-input-shadow, none);
+  transition: var(--zn-transition-fast) border-color, var(--zn-transition-fast) box-shadow;
+
+  &:hover {
+    border-color: var(--zn-input-border-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--zn-input-border-color-focus);
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+
+  &[aria-invalid='true'] {
+    color: var(--zn-color-danger-fg);
+    border-color: var(--zn-input-border-color-invalid);
+  }
+}
+
+.color-picker__row--hex .color-picker__field {
+  text-align: left;
+}

package/src/components/color-picker/color-picker.test.ts

@@ -0,0 +1,57 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, oneEvent} from '@open-wc/testing';
+import type ZnColorPicker from './color-picker.component';
+
+const field = (el: ZnColorPicker, key: string) => el.shadowRoot!.querySelector<HTMLInputElement>(`[data-k="${key}"]`)!;
+
+const type = (input: HTMLInputElement, value: string) => {
+  input.focus();
+  input.value = value;
+  input.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+};
+
+describe('<zn-color-picker>', () => {
+  it('shows the colour in every format', async () => {
+    const el = await fixture<ZnColorPicker>(html`<zn-color-picker value="rgb(8, 94, 253)"></zn-color-picker>`);
+
+    expect(el.value).to.equal('#085EFD');
+    expect(field(el, 'hex').value).to.equal('#085EFD');
+    expect([field(el, 'r').value, field(el, 'g').value, field(el, 'b').value]).to.deep.equal(['8', '94', '253']);
+    expect([field(el, 'h').value, field(el, 's').value, field(el, 'l').value]).to.deep.equal(['219', '98', '51']);
+    expect([field(el, 'ol').value, field(el, 'oc').value, field(el, 'oh').value]).to.deep.equal(['54.8', '0.247', '262']);
+  });
+
+  it('updates the other rows when one is edited and switches to its format', async () => {
+    const el = await fixture<ZnColorPicker>(html`<zn-color-picker value="#085EFD"></zn-color-picker>`);
+
+    const changed = oneEvent(el, 'zn-input');
+    type(field(el, 'g'), '200');
+    await changed;
+    await el.updateComplete;
+
+    expect(el.value).to.equal('#08C8FD');
+    expect(el.format).to.equal('rgb');
+    expect(field(el, 'hex').value).to.equal('#08C8FD');
+    expect(field(el, 'g').value).to.equal('200');
+  });
+
+  it('marks an out-of-range value red without changing the colour', async () => {
+    const el = await fixture<ZnColorPicker>(html`<zn-color-picker value="#085EFD"></zn-color-picker>`);
+
+    type(field(el, 'r'), '300');
+    await el.updateComplete;
+
+    expect(field(el, 'r').getAttribute('aria-invalid')).to.equal('true');
+    expect(el.value).to.equal('#085EFD');
+  });
+
+  it('moves brightness with the arrow keys', async () => {
+    const el = await fixture<ZnColorPicker>(html`<zn-color-picker value="#FFFFFF"></zn-color-picker>`);
+    const area = el.shadowRoot!.querySelector<HTMLElement>('.color-picker__area')!;
+
+    area.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('#FCFCFC');
+  });
+});

package/src/components/color-picker/index.ts

@@ -0,0 +1,12 @@
+import ZnColorPicker from './color-picker.component';
+
+export * from './color-picker.component';
+export default ZnColorPicker;
+
+ZnColorPicker.define('zn-color-picker');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-color-picker': ZnColorPicker;
+  }
+}

package/src/components/cols/cols.component.ts

@@ -48,6 +48,9 @@ export default class ZnCols extends ZincElement {
 
   @property({attribute: 'mc', type: Number, reflect: true}) maxColumns: number = 0;
 
+  /** Minimum width in px of a one-unit column before the row wraps; a column of layout `n` asks for n times this. Defaults to 250. */
+  @property({type: Number}) basis: number;
+
   @property({attribute: 'no-gap', type: Boolean}) noGap: boolean = false;
 
   @property({type: Boolean}) border: boolean = false;
@@ -81,17 +84,27 @@ export default class ZnCols extends ZincElement {
 
   protected updated(changed: PropertyValues<this>) {
     super.updated(changed);
+    if (changed.has('basis')) {
+      if (this.basis > 0) {
+        this.style.setProperty('--zn-col-basis', `${this.basis}px`);
+      } else {
+        this.style.removeProperty('--zn-col-basis');
+      }
+    }
     this.markRowEnds();
   }
 
   /**
-   * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
-   * however the columns have wrapped.
+   * Flags each child that ends its row, and each child on the last row, as laid out, so `divide` only draws
+   * between neighbours however the columns have wrapped.
    */
   private markRowEnds() {
     const children = Array.from(this.querySelectorAll(':scope > *:not([slot])'));
     if (!this.divide) {
-      children.forEach((child) => child.removeAttribute('data-row-end'));
+      children.forEach((child) => {
+        child.removeAttribute('data-row-end');
+        child.removeAttribute('data-last-row');
+      });
       return;
     }
 
@@ -101,6 +114,7 @@ export default class ZnCols extends ZincElement {
       const rowEnd = !rects.some((other) =>
         other !== rect && other.top < rect.bottom && other.bottom > rect.top && other.left > rect.left);
       child.toggleAttribute('data-row-end', rowEnd);
+      child.toggleAttribute('data-last-row', !rects.some((other) => other.top >= rect.bottom));
     });
   }
 

package/src/components/cols/cols.scss

@@ -67,6 +67,22 @@
     ::slotted([data-row-end]):after {
       display: none;
     }
+
+    ::slotted(:not([data-last-row])) {
+      position: relative;
+    }
+  }
+
+  // Border mode owns :before for its own row rules.
+  &--divide:not(.cols--border) ::slotted(:not([data-last-row])):before {
+    content: "";
+    position: absolute;
+    display: block;
+    height: 1px;
+    left: 0;
+    right: 0;
+    bottom: calc((var(--zn-spacing-small) / 2) * -1);
+    background-color: rgb(var(--zn-border-color));
   }
 
   &--no-gap {
@@ -74,8 +90,14 @@
   }
 
   // Without a gap to sit in, the divider goes on the column's own edge.
-  &--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
-    right: 0;
+  &--no-gap.cols--divide {
+    ::slotted(*:not(:last-child)):after {
+      right: 0;
+    }
+
+    ::slotted(:not([data-last-row])):before {
+      bottom: 0;
+    }
   }
 
   // The row rule below each child is drawn by a pseudo reaching to -100vw, so border mode has to clip. Clipping
@@ -155,17 +177,6 @@ $stack-sizes: (sm, smp, ph, md, lg, hd, '3k', '4k');
       .cols--divide ::slotted(*:not(:last-child)):after {
         display: none;
       }
-
-      // Edge-to-edge columns keep their separation as a rule between the stacked rows
-      .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
-        display: block;
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: auto;
-        height: 1px;
-      }
     }
   }
 }

package/src/components/cols/cols.test.ts

@@ -165,5 +165,38 @@ describe('<zn-cols>', () => {
 
       expect(dividerOf(el.querySelector('#a'))).to.equal('none');
     });
+
+    it('should rule between wrapped rows', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+          <div id="c" style="height: 20px"></div>
+          <div id="d" style="height: 20px"></div>
+        </zn-cols>`);
+      const ruleOf = (id: string) => getComputedStyle(el.querySelector(id)!, '::before').content;
+
+      expect(ruleOf('#a')).to.not.equal('none');
+      expect(ruleOf('#b')).to.not.equal('none');
+      expect(ruleOf('#c')).to.equal('none');
+      expect(ruleOf('#d')).to.equal('none');
+    });
+  });
+
+  it('sizes columns from the basis attribute', async () => {
+    const el = await cols(`
+      <zn-cols layout="1,2" basis="140">
+        <div id="one"></div>
+        <div id="two"></div>
+      </zn-cols>`);
+
+    expect(getComputedStyle(el.querySelector('#one')!).flexBasis).to.equal('140px');
+    expect(getComputedStyle(el.querySelector('#two')!).flexBasis).to.equal('280px');
+  });
+
+  it('keeps the default basis without the attribute', async () => {
+    const el = await cols(`<zn-cols layout="1"><div id="one"></div></zn-cols>`);
+
+    expect(getComputedStyle(el.querySelector('#one')!).flexBasis).to.equal('250px');
   });
 });

package/src/components/confirm/confirm.component.ts

@@ -6,6 +6,7 @@ import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query, state} from 'lit/decorators.js';
 import ZincElement from "../../internal/zinc-element";
 import ZnDialog from "../dialog";
+import type ZnButton from "../button";
 
 import styles from './confirm.scss';
 
@@ -66,11 +67,11 @@ export default class ZnConfirm extends ZincElement {
 
   @property() content: string = '';
 
-  @property() confirmText: string = "Confirm";
+  @property({attribute: 'confirm-text'}) confirmText: string = "Confirm";
 
-  @property() cancelText: string = "Cancel";
+  @property({attribute: 'cancel-text'}) cancelText: string = "Cancel";
 
-  @property() closeText: string = "Close";
+  @property({attribute: 'close-text'}) closeText: string = "Close";
 
   @property({type: Boolean, attribute: 'hide-icon'}) hideIcon: boolean = false;
 
@@ -102,6 +103,8 @@ export default class ZnConfirm extends ZincElement {
 
   private submitted: HTMLFormElement | null = null;
 
+  private generatedForm: HTMLFormElement | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.open) {
@@ -132,11 +135,13 @@ export default class ZnConfirm extends ZincElement {
     });
   }
 
-  show = (event: Event | undefined = undefined) => {
+  show = async (event: Event | undefined = undefined) => {
     const trigger = event?.target as HTMLButtonElement
     if (trigger?.disabled) return;
     this.reset();
     this.dialog.show();
+    await this.updateComplete;
+    this.renderRoot.querySelector<ZnButton>('zn-button[dialog-closer]')?.button?.focus();
   }
 
   hide() {
@@ -169,7 +174,7 @@ export default class ZnConfirm extends ZincElement {
    * The console dispatches the pagelet lifecycle on the form it submitted. Without it the loading
    * state only ends when a response happens to reload the page, so every failure hangs the dialog.
    */
-  private settle = (event: Event) => {
+  private settle = async (event: Event) => {
     const response = (event as CustomEvent<{ response?: PageletResponse }>).detail?.response;
     this.stopWatching();
     if (event.type === 'error' || this.responseFailed(response)) {
@@ -179,6 +184,8 @@ export default class ZnConfirm extends ZincElement {
       if (this.dialog?.closer) {
         this.dialog.closer.disabled = false;
       }
+      await this.updateComplete;
+      this.renderRoot.querySelector<ZnButton>('zn-button[dialog-closer]')?.button?.focus();
       return;
     }
     this.hide();
@@ -237,7 +244,7 @@ export default class ZnConfirm extends ZincElement {
           <zn-button outline color="${this.type}" slot="footer" dialog-closer disabled=${this.loading || nothing}>
             ${this.cancelText}
           </zn-button>
-          <zn-button color="${this.type}" slot="footer" @click="${this.submitDialog}" disabled=${this.loading || nothing}>
+          <zn-button color="${this.type}" slot="footer" @click="${this.submitDialog}" ?processing=${this.loading}>
             ${this.confirmText}
           </zn-button>`}
 
@@ -246,10 +253,17 @@ export default class ZnConfirm extends ZincElement {
   }
 
   submitDialog() {
+    if (this.loading) return;
+
+    // Rebuilt per submit: a re-rendered list can reuse this element for another row with a different action
+    this.generatedForm?.remove();
+    this.generatedForm = null;
+
     // get the form from the slot
     let form = this.querySelector('form');
     if (!form && this.action) {
       form = document.createElement('form') as HTMLFormElement;
+      this.generatedForm = form;
       form.action = this.action;
       form.method = 'POST';
 

package/src/components/confirm/confirm.test.ts

@@ -61,6 +61,15 @@ describe('<zn-confirm-modal>', () => {
     expect(confirm.shadowRoot!.textContent).to.contain('Loading');
   });
 
+  it('keeps the confirm button focusable while loading', async () => {
+    const {confirm} = await submittedConfirm();
+
+    const buttons = confirm.shadowRoot!.querySelectorAll('zn-button[slot="footer"]');
+    expect(buttons[0].hasAttribute('disabled')).to.be.true;
+    expect(buttons[1].hasAttribute('disabled')).to.be.false;
+    expect(buttons[1].hasAttribute('processing')).to.be.true;
+  });
+
   it('reports failure when the response carries a danger alert', async () => {
     const {confirm, form, dialog} = await submittedConfirm();
 
@@ -75,6 +84,16 @@ describe('<zn-confirm-modal>', () => {
     expect(closer(dialog).disabled).to.be.false;
   });
 
+  it('focuses cancel when opened', async () => {
+    const confirm = await fixture<HTMLElement>(html`<zn-confirm caption="Deploy"></zn-confirm>`);
+
+    await (confirm as never as {show: () => Promise<void>}).show();
+
+    const cancel = confirm.shadowRoot!.querySelector('zn-button[dialog-closer]');
+    expect(cancel!.textContent!.trim()).to.equal('Cancel');
+    expect(confirm.shadowRoot!.activeElement).to.equal(cancel);
+  });
+
   it('offers only a close button once the request has failed', async () => {
     const {confirm, form} = await submittedConfirm();
 
@@ -85,6 +104,7 @@ describe('<zn-confirm-modal>', () => {
     expect(buttons.length).to.equal(1);
     expect(buttons[0].textContent!.trim()).to.equal('Close');
     expect(buttons[0].hasAttribute('dialog-closer')).to.be.true;
+    expect(confirm.shadowRoot!.activeElement).to.equal(buttons[0]);
   });
 
   it('reports failure when the request errors', async () => {
@@ -117,4 +137,36 @@ describe('<zn-confirm-modal>', () => {
 
     expect(confirm.shadowRoot!.textContent).to.not.contain('Failed');
   });
+  it('submits to its current action after the action changes', async () => {
+    const confirm = await fixture<HTMLElement & {action: string; updateComplete: Promise<void>; show: () => void}>(
+      html`<zn-confirm caption="Delete" action="/items/1/delete"></zn-confirm>`);
+    const posted: string[] = [];
+    document.addEventListener('submit', e => {
+      e.preventDefault();
+      posted.push(new URL((e.target as HTMLFormElement).action).pathname);
+    });
+    const submit = async () => {
+      confirm.show();
+      await confirm.updateComplete;
+      click(confirm.shadowRoot!.querySelectorAll('zn-button[slot="footer"]')[1]);
+    };
+
+    await submit();
+    confirm.action = '/items/2/delete';
+    await confirm.updateComplete;
+    await submit();
+
+    expect(posted).to.deep.equal(['/items/1/delete', '/items/2/delete']);
+  });
+
+  it('labels its buttons from the dashed text attributes', async () => {
+    const confirm = await fixture<HTMLElement & {updateComplete: Promise<void>}>(html`
+      <zn-confirm confirm-text="Archive" cancel-text="Keep"></zn-confirm>
+    `);
+    await confirm.updateComplete;
+
+    const buttons = confirm.shadowRoot!.querySelectorAll('zn-button[slot="footer"]');
+    expect(buttons[0].textContent!.trim()).to.equal('Keep');
+    expect(buttons[1].textContent!.trim()).to.equal('Archive');
+  });
 });

package/src/components/content-block/content-block.component.ts

@@ -3,6 +3,7 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {htmlToText, looksLikeHtml} from './html-text';
+import {ifDefined} from "lit/directives/if-defined.js";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
 import {sanitizeHtml} from '../../utilities/sanitize-html';
@@ -82,6 +83,7 @@ export default class ContentBlock extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
     this.iframe.then((iframe) => {
+      if (!iframe) return;
       if (iframe.contentDocument) {
         const div = this.htmlNodes[0] as HTMLDivElement;
         if (div) {
@@ -109,6 +111,23 @@ export default class ContentBlock extends ZincElement {
     super.disconnectedCallback();
   }
 
+  private _handleHeaderKeyDown(e: KeyboardEvent) {
+    // Keys from the header's own actions belong to them
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) {
+      return;
+    }
+
+    e.preventDefault();
+    this._collapseContent(e);
+  }
+
+  private _handleReplyKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      (e.currentTarget as HTMLElement).click();
+    }
+  }
+
   private _collapseContent(e: Event) {
     if (this.noCollapse) {
       return;
@@ -136,7 +155,7 @@ export default class ContentBlock extends ZincElement {
   private _toggleText() {
     const textContent = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
     this.iframe.then((iframe) => {
-      if (textContent) {
+      if (iframe && textContent) {
         iframe.classList.add('hidden');
         textContent.classList.remove('hidden');
       }
@@ -146,7 +165,7 @@ export default class ContentBlock extends ZincElement {
   private _toggleHtml() {
     const textContent = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
     this.iframe.then((iframe) => {
-      if (textContent) {
+      if (iframe && textContent) {
         iframe.classList.remove('hidden');
         textContent.classList.add('hidden');
         setTimeout(() => this._resizeIframe(iframe), 0);
@@ -230,7 +249,12 @@ export default class ContentBlock extends ZincElement {
         'content-block--collapsible': !this.noCollapse
       })}">
 
-        <div class="content-block-header" @click="${this._collapseContent}">
+        <div class="content-block-header"
+             role="${ifDefined(this.noCollapse ? undefined : 'button')}"
+             tabindex="${ifDefined(this.noCollapse ? undefined : '0')}"
+             aria-expanded="${ifDefined(this.noCollapse ? undefined : String(!this.short))}"
+             @click="${this._collapseContent}"
+             @keydown="${this._handleHeaderKeyDown}">
           <div class="content-block-header__icon">
             <slot name="icon">
               <zn-icon src="${this.avatar}"
@@ -270,13 +294,16 @@ export default class ContentBlock extends ZincElement {
         </div>
 
         <zn-sp no-gap flush-x flush-t>
-          <iframe class="${classMap({'hidden': !initialShowHtml})}" title="Content block HTML preview"></iframe>
+          ${hasHtmlSlot ? html`
+            <iframe class="${classMap({'hidden': !initialShowHtml})}" title="Content block HTML preview"></iframe>` : ''}
           <slot class="html-content" name="html" style="display: none;"></slot>
           <slot name="text" style="display: none;"></slot>
           <div class="${classMap({'text-content': true, 'hidden': initialShowHtml})}">
             ${text.map((section) => html`
               ${section.type === 'reply' ? html`
-                <div class="toggle-reply" @click="${this.showReply}">...</div>` : ''}
+                <div class="toggle-reply" role="button" tabindex="0" aria-label="Show quoted text"
+                     @click="${this.showReply}"
+                     @keydown="${this._handleReplyKeyDown}">...</div>` : ''}
               <div class=${classMap({
                 'text-section': true,
                 'text-section--reply': section.type === 'reply',
@@ -307,7 +334,7 @@ export default class ContentBlock extends ZincElement {
   protected truncateText() {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     if (!textContent) return '';
-    const trimmed = htmlToText(textContent.innerText);
+    const trimmed = htmlToText(textContent.textContent ?? '');
     return trimmed.length > 32 ? trimmed.substring(0, 32) + '...' : trimmed;
   }
 
@@ -379,13 +406,15 @@ export default class ContentBlock extends ZincElement {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     const textRows: TextRow[] = [];
 
-    if (textContent && looksLikeHtml(textContent.innerText)) {
-      this._textRows = [{lines: [sanitizeHtml(textContent.innerText, EDITOR_TAGS, true)], type: 'text', html: true}];
+    // Not innerText: it forces a layout per read (~6ms each in Safari), and this slot is never rendered.
+    const source = textContent?.textContent ?? '';
+    if (textContent && looksLikeHtml(source)) {
+      this._textRows = [{lines: [sanitizeHtml(source, EDITOR_TAGS, true)], type: 'text', html: true}];
       return this._textRows;
     }
 
     if (textContent) {
-      const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
+      const text = source.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');
       let previousType: TextRow['type'] | null = null;
       let forceReply = false;