@kubex/zinc 1.1.185 → 2.0.1

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,6 +84,13 @@ 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();
   }
 

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

@@ -182,4 +182,21 @@ describe('<zn-cols>', () => {
       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;

package/src/components/content-block/content-block.scss

@@ -18,6 +18,11 @@
 
 .content-block--collapsible .content-block-header {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 .content-block-header__icon {
@@ -37,6 +42,7 @@
 }
 
 .content-block-header__caption {
+  font-family: var(--zn-text-h1-font-family, inherit);
   font-weight: var(--zn-text-h1-font-weight);
   font-size: var(--zn-text-h1-font-size);
   color: rgba(var(--zn-text-panel-title), 100%);
@@ -130,18 +136,18 @@
   }
 
   code {
-    background-color: #f0f0f0;
+    background-color: var(--zn-code-inline-background, #f0f0f0);
     border-radius: 3px;
     font-size: 85%;
     padding: 2px 4px;
   }
 
   pre {
-    background-color: #23241f;
+    background-color: var(--zn-code-background, #23241f);
     border-radius: 3px;
     margin-block: 5px;
     padding: 5px 10px;
-    color: #f8f8f2;
+    color: var(--zn-code-color, #f8f8f2);
     overflow: auto;
   }
 
@@ -176,7 +182,7 @@ li > ol, li > ul {
 }
 
 li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
-  color: #777;
+  color: var(--zn-content-block-meta-color, #777);
 }
 
 li {
@@ -207,7 +213,7 @@ li[data-list="unchecked"]::before {
 
 li[data-list="checked"]::before,
 li[data-list="unchecked"]::before {
-  color: #777;
+  color: var(--zn-content-block-meta-color, #777);
 }
 
 ol li::before,

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

@@ -17,6 +17,13 @@ describe('<zn-content-block>', () => {
     expect(el).to.exist;
   });
 
+  it('should only create the html preview frame when there is html', async () => {
+    const el = await fixture<LitElement>('<zn-content-block><div slot="text">plain</div></zn-content-block>');
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('iframe')).to.be.null;
+  });
+
   it('should decode escaped source in the html body once', async () => {
     const el = await fixture<LitElement>(
       '<zn-content-block><div slot="html">&lt;p&gt;Test&amp;nbsp;Format&lt;/p&gt;</div></zn-content-block>'
@@ -27,6 +34,25 @@ describe('<zn-content-block>', () => {
     expect(iframe.srcdoc).to.contain('<p>Test&nbsp;Format</p>');
   });
 
+  it('should read the text slot without forcing layout', async () => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerText')!;
+    let reads = 0;
+    Object.defineProperty(HTMLElement.prototype, 'innerText', {
+      ...descriptor,
+      get() {
+        reads++;
+        return descriptor.get!.call(this);
+      }
+    });
+    try {
+      const content = await textSection('line one<br>\nline two');
+      expect(content.textContent).to.contain('line two');
+    } finally {
+      Object.defineProperty(HTMLElement.prototype, 'innerText', descriptor);
+    }
+    expect(reads).to.equal(0);
+  });
+
   it('should render plain text in the text body as text', async () => {
     const content = await textSection('1 &lt; 2 &amp;&amp; 3 &gt; 2');
 

package/src/components/copy-button/copy-button.component.ts

@@ -44,7 +44,7 @@ export default class ZnCopyButton extends ZincElement {
 
   @property() src = '';
 
-  @property({type: Number, reflect: true}) size: number = 24;
+  @property({type: Number, reflect: true}) size: number = 16;
 
   /**
    * An id that references an element in the same document from which data will be copied. If both this and `value` are
@@ -68,7 +68,7 @@ export default class ZnCopyButton extends ZincElement {
         content=${copyLabel}>
         <button class="copy-button__button" part="button" @click=${this.handleCopy}>
           <slot part="copy-icon" name="copy-icon">
-            <zn-icon src="${this.src ? this.src : 'content_copy'}" size="${this.size}"></zn-icon>
+            <zn-icon src="${this.src ? this.src : 'copy@lu'}" size="${this.size}"></zn-icon>
           </slot>
           <slot part="success-icon" name="success-icon" hidden>
             <zn-icon src="check" size="${this.size}"></zn-icon>