@kubex/zinc 1.1.160 → 1.1.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.160",
+  "version": "1.1.161",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

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

@@ -128,6 +128,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   /** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */
   @property() label: string;
 
+  /** Toggle state, forwarded to the inner button's `aria-pressed`. */
+  @property({attribute: 'aria-pressed'}) pressed: 'true' | 'false' | 'mixed';
+
   // Auto Click Specific
   @property({type: Boolean, attribute: 'auto-click'}) autoClick = false;
   @property({type: Number, attribute: 'auto-click-delay'}) autoClickDelay = 2000;
@@ -436,6 +439,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
         aria-label="${ifDefined(ariaLabel)}"
+        aria-pressed="${ifDefined(isLink ? undefined : this.pressed)}"
         data-notification="${ifDefined(notification)}"
         disabled="${this.disabled || nothing}"
         style=${styleMap(buttonStyles)}

package/src/components/button/button.test.ts

@@ -29,4 +29,14 @@ describe('<zn-button>', () => {
     expect(el.color).to.equal('default');
   });
 
+  it('forwards aria-pressed to the inner button', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button icon="sun" label="Toggle" aria-pressed="true"></zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.getAttribute('aria-pressed')).to.equal('true');
+
+    el.setAttribute('aria-pressed', 'false');
+    await el.updateComplete;
+    expect(base.getAttribute('aria-pressed')).to.equal('false');
+  });
+
 });

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

@@ -4,7 +4,6 @@ import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
-import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -280,7 +279,7 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${unsafeHTML(line)}<br>`)}
+                ${section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -375,7 +374,7 @@ export default class ContentBlock extends ZincElement {
     const textRows: TextRow[] = [];
 
     if (textContent) {
-      const text = textContent.innerText;
+      const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');
       let previousType: TextRow['type'] | null = null;
       let forceReply = false;

package/src/components/flow-builder/modules/flow-node/flow-node.test.ts

@@ -19,7 +19,7 @@ describe('<zn-flow-node>', () => {
     expect(el).to.exist;
   });
 
-  it('should render the type label and one port per output', async () => {
+  it('should render the type label and a single output stem', async () => {
     const el = await fixture<ZnFlowNode>(html`
       <zn-flow-node></zn-flow-node>`);
     el.node = node;
@@ -27,8 +27,7 @@ describe('<zn-flow-node>', () => {
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.title')?.textContent).to.contain('Conditional Split');
-    expect(el.shadowRoot?.querySelectorAll('.port--out')?.length).to.equal(2);
-    expect(el.shadowRoot?.querySelector('.port-label')?.textContent).to.contain('TRUE');
+    expect(el.shadowRoot?.querySelectorAll('.port--out')?.length).to.equal(1);
   });
 
   it('should emit flow-node-grab when the card body is pressed', async () => {

package/src/components/flow-builder/modules/flow-step-group/flow-step-group.test.ts

@@ -1,20 +1,26 @@
 import '../../../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
+import type ZnCollapsible from '../../../collapsible/collapsible.component';
 import type ZnFlowStepGroup from './flow-step-group.component';
 
+async function collapsibleOf(el: ZnFlowStepGroup): Promise<ZnCollapsible> {
+  const collapsible = el.shadowRoot!.querySelector<ZnCollapsible>('zn-collapsible')!;
+  await collapsible.updateComplete;
+  return collapsible;
+}
+
 describe('<zn-flow-step-group>', () => {
-  it('should render a component with its caption', async () => {
+  it('should render a collapsible with its caption', async () => {
     const el = await fixture<ZnFlowStepGroup>(html`
       <zn-flow-step-group caption="Contacts"></zn-flow-step-group>`);
-    expect(el.shadowRoot?.querySelector('.header')?.textContent).to.contain('Contacts');
+    const collapsible = await collapsibleOf(el);
+    expect(collapsible.caption).to.equal('Contacts');
+    expect(collapsible.expanded).to.equal(true);
   });
 
-  it('should toggle collapsed when the header is clicked', async () => {
+  it('should start closed when collapsed', async () => {
     const el = await fixture<ZnFlowStepGroup>(html`
-      <zn-flow-step-group caption="Contacts"></zn-flow-step-group>`);
-    const header = el.shadowRoot?.querySelector('.header') as HTMLElement;
-    header.click();
-    await el.updateComplete;
-    expect(el.collapsed).to.equal(true);
+      <zn-flow-step-group caption="Contacts" collapsed></zn-flow-step-group>`);
+    expect((await collapsibleOf(el)).expanded).to.equal(false);
   });
 });

package/src/components/form-actions/form-actions.test.ts

@@ -5,6 +5,9 @@ import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 const clickButton = (button: HTMLElement) =>
   button.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }));
 
+// The test harness loads no theme stylesheet, so a layout test stamps on the spacing token a themed page provides.
+const spacingTokens = '--zn-spacing-small: 16px;';
+
 describe('<zn-form-actions>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-form-actions></zn-form-actions> `);
@@ -24,7 +27,7 @@ describe('<zn-form-actions>', () => {
 
   it('holds align="start" children left and the rest right, one gap apart on each side', async () => {
     const el = await fixture<HTMLElement>(html`
-      <zn-form-actions with-cancel style="width: 600px">
+      <zn-form-actions with-cancel style="width: 600px; ${spacingTokens}">
         <zn-button align="start" id="translate">Translate</zn-button>
         <zn-button align="start" id="slug">Slug</zn-button>
       </zn-form-actions>

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

@@ -54,12 +54,18 @@ export default class ZnFormGroup extends ZincElement {
   private rebind: boolean = false;
   private offset: number = 0;
   private resizeObserver: ResizeObserver | null = null;
+  private observedAncestors: Set<HTMLElement> = new Set();
 
   connectedCallback() {
     super.connectedCallback();
 
-    // Whether an ancestor scrolls depends on how tall this form has grown.
-    this.resizeObserver ??= new ResizeObserver(() => this.schedule(true));
+    // Whether an ancestor scrolls depends on how tall this form has grown. Re-measured before paint rather than on the
+    // next frame, or the label is drawn for a frame against the old layout and flickers.
+    this.resizeObserver ??= new ResizeObserver(() => {
+      this.rebind = false;
+      this.bind();
+      this.positionLabel();
+    });
     this.resizeObserver.observe(this);
     window.addEventListener('resize', this.onViewportResize);
   }
@@ -67,6 +73,7 @@ export default class ZnFormGroup extends ZincElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
+    this.observedAncestors.clear();
     window.removeEventListener('resize', this.onViewportResize);
     this.detach();
     cancelAnimationFrame(this.frame);
@@ -82,7 +89,7 @@ export default class ZnFormGroup extends ZincElement {
     return this.shadowRoot?.querySelector('.form-control__text') ?? null;
   }
 
-  /** Coalesces scroll and resize work into one frame, and out of the ResizeObserver callback. */
+  /** Coalesces scroll and resize work into one frame. */
   private schedule(rebind: boolean = false) {
     this.rebind ||= rebind;
     if (this.frame) return;
@@ -120,6 +127,7 @@ export default class ZnFormGroup extends ZincElement {
     // A `top` inset against a box that never scrolls has nothing to hold the label back from:
     // it only pushes the label down the page, so drop it and stand in for sticky below.
     column.style.top = '0px';
+    this.observeAncestors(column, scroller);
     if (!scroller) return;
 
     this.tracked = scroller;
@@ -154,24 +162,26 @@ export default class ZnFormGroup extends ZincElement {
     // The stylesheet drops sticky while the columns are stacked, and there is nothing to follow.
     if (getComputedStyle(column).position !== 'sticky') return null;
 
+    if (!('rangeStart' in Animation.prototype)) return null;
+
     const travel = Math.max(0, fieldset.clientHeight - column.offsetHeight);
-    const range = scroller.scrollHeight - scroller.clientHeight;
-    if (travel < 1 || range < 1) return null;
+    if (travel < 1) return null;
 
     const start = scroller.scrollTop + column.getBoundingClientRect().top
       - this.visibleTop(scroller) - this.stickyTop;
-    const held = (scroll: number) => Math.min(Math.max(scroll - start, 0), travel);
 
-    const knees = [start, start + travel].filter(scroll => scroll > 0 && scroll < range);
-    const keyframes = [0, ...knees, range].map(scroll => ({
-      offset: Math.min(Math.max(scroll / range, 0), 1),
-      transform: `translateY(${held(scroll)}px)`
-    }));
-
-    return new Animation(
-      new KeyframeEffect(column, keyframes, { fill: 'both' }),
+    const animation = new Animation(
+      new KeyframeEffect(column, [
+        { transform: 'translateY(0px)' },
+        { transform: `translateY(${travel}px)` }
+      ], { fill: 'both' }),
       new ScrollTimeline({ source: scroller, axis: 'block' })
-    );
+    ) as Animation & { rangeStart: string; rangeEnd: string };
+
+    // In scroll pixels rather than progress, so the scroller growing or shrinking can't shift the label.
+    animation.rangeStart = `${start}px`;
+    animation.rangeEnd = `${start + travel}px`;
+    return animation;
   }
 
   /** Drops everything this component has put on the label or on the scroller. */
@@ -190,6 +200,26 @@ export default class ZnFormGroup extends ZincElement {
     column.style.transform = '';
   }
 
+  /**
+   * The label's travel is measured against the scroller, so content growing elsewhere in it — a sibling group revealing
+   * more fields — leaves the label at a stale position until something re-measures. Any such growth resizes a box
+   * between this group and the scroller.
+   */
+  private observeAncestors(from: HTMLElement, scroller: HTMLElement | null) {
+    const ancestors = this.ancestors(from);
+    const end = scroller ? ancestors.indexOf(scroller) : -1;
+    const wanted = new Set(ancestors.slice(0, end < 0 ? undefined : end).filter(element => element !== this));
+
+    // Observing fires once straight away, so re-observing on every bind would rebind every frame.
+    for (const element of this.observedAncestors) {
+      if (!wanted.has(element)) this.resizeObserver?.unobserve(element);
+    }
+    for (const element of wanted) {
+      if (!this.observedAncestors.has(element)) this.resizeObserver?.observe(element);
+    }
+    this.observedAncestors = wanted;
+  }
+
   /** The document scrolls through the window, every other scroller reports its own events. */
   private scrollTarget(scroller: HTMLElement | null): EventTarget | null {
     if (!scroller) return null;

package/src/components/navbar/navbar.test.ts

@@ -154,7 +154,7 @@ describe('<zn-navbar>', () => {
     expect(nav.classList.contains('has-hidden')).to.equal(true);
   });
 
-  it('rounds the last visible nav item when items are hidden behind more', async () => {
+  it('rounds the more button instead of the last visible nav item when items are hidden', async () => {
     const el = await fixture<ZnNavbar>(html`
       <zn-navbar>
         <li>One</li>
@@ -187,7 +187,8 @@ describe('<zn-navbar>', () => {
     expect(nav.classList.contains('has-hidden')).to.equal(true);
     expect(items[0].classList.contains('last-visible')).to.equal(true);
     expect(items[1].classList.contains('hidden')).to.equal(true);
-    expect(getComputedStyle(items[0]).borderTopRightRadius).to.equal('6px');
+    expect(getComputedStyle(items[0]).borderTopRightRadius).to.equal('0px');
+    expect(getComputedStyle(more).borderTopRightRadius).to.equal('6px');
   });
 
   it('keeps the left border when only the more button is visible', async () => {

package/src/components/page/page.component.ts

@@ -538,7 +538,7 @@ export default class ZnPage extends ZnTabs {
         </div>
 
         <div class="page__tabs">
-          <div id="content" class="page__content" part="content">
+          <div id="content" class="page__content" part="content" @scroll="${this.handlePageScroll}">
             ${this.tabDefinitions
               .filter(tab => tab.slotName !== null)
               .map(tab => html`

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

@@ -17,9 +17,9 @@ describe('<zn-page>', () => {
     await aTimeout(20);
 
     const header = el.shadowRoot!.querySelector('[part="header"]')!;
-    const caption = el.shadowRoot!.querySelector('[part="header-caption"]')!;
-    const description = el.shadowRoot!.querySelector('[part="header-description"]')!;
-    const headerRight = el.shadowRoot!.querySelector('[part="header-right"]')!;
+    const caption = el.shadowRoot!.querySelector('.header__caption')!;
+    const description = el.shadowRoot!.querySelector('.header__description')!;
+    const headerRight = el.shadowRoot!.querySelector('.header__right')!;
     const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
     const navItems = navbar.shadowRoot!.querySelectorAll('li:not(.more)');
     const actionsSlot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="actions"]')!;
@@ -588,25 +588,25 @@ describe('<zn-page>', () => {
     `);
     await aTimeout(20);
 
-    const page = el.shadowRoot!.querySelector<HTMLElement>('.page')!;
+    const content = el.shadowRoot!.querySelector<HTMLElement>('#content')!;
     const header = el.shadowRoot!.querySelector<HTMLElement>('.page__header')!;
 
     expect(header.classList.contains('page__header--scrolled-no-navigation')).to.equal(false);
 
-    page.scrollTop = 10;
-    page.dispatchEvent(new Event('scroll'));
+    content.scrollTop = 10;
+    content.dispatchEvent(new Event('scroll'));
     await el.updateComplete;
 
     expect(header.classList.contains('page__header--scrolled-no-navigation')).to.equal(false);
 
-    page.scrollTop = 25;
-    page.dispatchEvent(new Event('scroll'));
+    content.scrollTop = 25;
+    content.dispatchEvent(new Event('scroll'));
     await el.updateComplete;
 
     expect(header.classList.contains('page__header--scrolled-no-navigation')).to.equal(true);
 
-    page.scrollTop = 0;
-    page.dispatchEvent(new Event('scroll'));
+    content.scrollTop = 0;
+    content.dispatchEvent(new Event('scroll'));
     await el.updateComplete;
 
     expect(header.classList.contains('page__header--scrolled-no-navigation')).to.equal(false);
@@ -656,18 +656,18 @@ describe('<zn-page>', () => {
     await aTimeout(20);
 
     const page = el.querySelector<ZnPage>('zn-page')!;
-    const scroller = page.shadowRoot!.querySelector<HTMLElement>('.page')!;
+    const content = page.shadowRoot!.querySelector<HTMLElement>('.page__tabs')!;
     const header = page.shadowRoot!.querySelector<HTMLElement>('.page__header')!;
 
-    expect(getComputedStyle(scroller).backgroundColor).to.equal('rgb(12, 34, 56)');
+    expect(getComputedStyle(content).backgroundColor).to.equal('rgb(12, 34, 56)');
     expect(getComputedStyle(header).backgroundColor).to.equal('rgba(12, 34, 56, 0.95)');
   });
 
-  it('uses the panel background when placed inside a panel', async () => {
+  it('uses the panel background for a page flagged as sitting in a panel', async () => {
     const el = await fixture<HTMLElement>(html`
       <div style="--zn-body: 12, 34, 56; --zn-panel: 1, 2, 3;">
         <zn-panel flush>
-          <zn-page caption="Page Title" modal>
+          <zn-page caption="Page Title" modal panel panel-head>
             <zn-tab caption="Overview">Overview Content</zn-tab>
           </zn-page>
         </zn-panel>
@@ -676,10 +676,10 @@ describe('<zn-page>', () => {
     await aTimeout(20);
 
     const page = el.querySelector<ZnPage>('zn-page')!;
-    const scroller = page.shadowRoot!.querySelector<HTMLElement>('.page')!;
+    const content = page.shadowRoot!.querySelector<HTMLElement>('.page__tabs')!;
     const header = page.shadowRoot!.querySelector<HTMLElement>('.page__header')!;
 
-    expect(getComputedStyle(scroller).backgroundColor).to.equal('rgb(1, 2, 3)');
+    expect(getComputedStyle(content).backgroundColor).to.equal('rgb(1, 2, 3)');
     expect(getComputedStyle(header).backgroundColor).to.equal('rgba(1, 2, 3, 0.95)');
   });
 

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

@@ -39,10 +39,10 @@ describe('<zn-sp>', () => {
     expect(getComputedStyle(parent.querySelector('form')!).display).to.equal('block');
   });
 
-  it('should fill its parent container height', async () => {
+  it('should fill its parent container height when growing', async () => {
     const parent = await fixture(html`
       <div style="height: 300px;">
-        <zn-sp>
+        <zn-sp grow>
           <div>Content</div>
         </zn-sp>
       </div>

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

@@ -830,8 +830,8 @@ export default class ZnThemeEditor extends ZincElement {
                          icon-size="20"
                          icon="${this.mode === 'dark' ? 'sun@lu' : 'moon@lu'}"
                          data-mode-toggle
+                         label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
                          tooltip="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
-                         aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
                          @click="${this._toggleMode}"></zn-button>
             </div>
             <div class="editor__controls-body">
@@ -881,7 +881,8 @@ export default class ZnThemeEditor extends ZincElement {
                              icon-size="20"
                              icon="${d.icon}@lu"
                              data-device="${d.id}"
-                             aria-label="${d.label}"
+                             label="${d.label}"
+                             tooltip="${d.label}"
                              aria-pressed="${this.device === d.id ? 'true' : 'false'}"
                              @click="${() => this._setDevice(d.id)}"></zn-button>`)}
               </zn-button-group>

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

@@ -19,6 +19,11 @@ function spyOnFrame(el: Element): ThemeCall[] {
   return calls;
 }
 
+// zn-button overrides click() without dispatching a DOM event, so fire a real one.
+function press(el: Element) {
+  el.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+}
+
 describe('<zn-theme-editor>', () => {
   const FIXTURE = html`
     <zn-theme-editor src="about:blank" frame-origin="https://site.example" debounce="10">
@@ -174,7 +179,7 @@ describe('<zn-theme-editor>', () => {
     const el = await fixture(FIXTURE);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-device="mobile"]')!.click();
+    press(el.shadowRoot!.querySelector('[data-device="mobile"]')!);
     await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
 
     expect((el as HTMLElement & {device: string}).device).to.equal('mobile');
@@ -192,7 +197,7 @@ describe('<zn-theme-editor>', () => {
       detail = (e as CustomEvent<{device: string}>).detail;
     });
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-device="tablet"]')!.click();
+    press(el.shadowRoot!.querySelector('[data-device="tablet"]')!);
 
     await waitUntil(() => detail !== null);
     expect(detail!.device).to.equal('tablet');
@@ -205,7 +210,7 @@ describe('<zn-theme-editor>', () => {
     expect(desktop.getAttribute('aria-pressed')).to.equal('true');
     expect(mobile.getAttribute('aria-pressed')).to.equal('false');
 
-    mobile.click();
+    press(mobile);
     await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
 
     expect(desktop.getAttribute('aria-pressed')).to.equal('false');
@@ -216,7 +221,7 @@ describe('<zn-theme-editor>', () => {
     const el = await fixture(FIXTURE);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
 
     await waitUntil(() => calls.length === 1);
     expect((el as HTMLElement & {mode: string}).mode).to.equal('dark');
@@ -232,7 +237,7 @@ describe('<zn-theme-editor>', () => {
       </zn-theme-editor>`);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
     await waitUntil(() => calls.length === 1);
 
     expect(calls[0]['values']).to.deep.equal({background: '#000000'});
@@ -256,7 +261,7 @@ describe('<zn-theme-editor>', () => {
     const el = await fixture(FIXTURE);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
     await waitUntil(() => calls.length === 1);
 
     expect(calls[0]['values']).to.deep.equal({radius: '8'});
@@ -269,7 +274,7 @@ describe('<zn-theme-editor>', () => {
     const calls = spyOnFrame(el);
     const input = el.querySelector('zn-input')! as HTMLElement & {value: string};
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click(); // -> dark, radius '8'
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!); // -> dark, radius '8'
     await waitUntil(() => calls.length === 1);
 
     input.value = '99';
@@ -277,7 +282,7 @@ describe('<zn-theme-editor>', () => {
     await waitUntil(() => calls.length === 2);
     expect(calls[1]['values']).to.deep.equal({radius: '99'});
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click(); // -> light, untouched
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!); // -> light, untouched
     await waitUntil(() => calls.length === 3);
     expect(calls[2]['values']).to.deep.equal({radius: '8'});
     expect(input.value).to.equal('8');
@@ -290,7 +295,7 @@ describe('<zn-theme-editor>', () => {
       </zn-theme-editor>`);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
     await waitUntil(() => calls.length === 1);
 
     expect(calls[0]['values']).to.deep.equal({rounded: true});
@@ -305,7 +310,7 @@ describe('<zn-theme-editor>', () => {
       </zn-theme-editor>`);
     const calls = spyOnFrame(el);
 
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
     await waitUntil(() => calls.length === 1);
 
     expect(calls[0]['values']).to.deep.equal({rounded: true});
@@ -334,7 +339,7 @@ describe('<zn-theme-editor>', () => {
     input.value = '99';
     input.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
     // toggle before the 50ms push debounce fires - no await in between
-    el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+    press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
 
     await waitUntil(() => calls.length >= 1);
     // give the (now-cancelled) original debounce timer a chance to prove it's gone
@@ -572,7 +577,7 @@ describe('<zn-theme-editor>', () => {
       expect((el as HTMLElement & {values: {light: Record<string, unknown>; dark: Record<string, unknown>}}).values)
         .to.deep.equal({light: {accent: '#ffffff'}, dark: {accent: '#000000'}});
 
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+      press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
       await waitUntil(() => calls.length === 1);
 
       expect(calls[0]['values']).to.deep.equal({accent: '#000000'});
@@ -1378,7 +1383,7 @@ describe('<zn-theme-editor>', () => {
         </zn-theme-editor>`);
       spyOnFrame(el);
 
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+      press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
 
       await new Promise(resolve => setTimeout(resolve, 100));
       expect(fetchCalls.length).to.equal(0);
@@ -1400,7 +1405,7 @@ describe('<zn-theme-editor>', () => {
         </zn-theme-editor>`);
       spyOnFrame(el);
 
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+      press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
 
       await new Promise(resolve => setTimeout(resolve, 100));
       expect(fetchCalls.length).to.equal(0);
@@ -1423,7 +1428,7 @@ describe('<zn-theme-editor>', () => {
         </zn-theme-editor>`);
       const calls = spyOnFrame(el);
 
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
+      press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
 
       await waitUntil(() => calls.length === 1);
       await new Promise(resolve => setTimeout(resolve, 100));
@@ -1443,8 +1448,8 @@ describe('<zn-theme-editor>', () => {
         </zn-theme-editor>`);
       spyOnFrame(el);
 
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-mode-toggle]')!.click();
-      el.shadowRoot!.querySelector<HTMLButtonElement>('[data-device="mobile"]')!.click();
+      press(el.shadowRoot!.querySelector('[data-mode-toggle]')!);
+      press(el.shadowRoot!.querySelector('[data-device="mobile"]')!);
 
       await new Promise(resolve => setTimeout(resolve, 100));
       expect(fetchCalls.length).to.equal(0);
@@ -1522,11 +1527,8 @@ describe('<zn-theme-editor>', () => {
     let fetchCalls: {uri: string; init?: RequestInit}[];
     const realFetch = window.fetch;
 
-    // zn-button overrides click() to call its handler directly without dispatching -
-    // a real click event is needed for the theme-editor's own @click listener to fire.
     function clickButton(el: Element) {
-      const button = el.shadowRoot!.querySelector('zn-button')!;
-      button.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+      press(el.shadowRoot!.querySelector('zn-button.editor__submit')!);
     }
 
     beforeEach(() => {
@@ -1543,7 +1545,7 @@ describe('<zn-theme-editor>', () => {
 
     it('renders no button without submit-label', async () => {
       const el = await fixture(FIXTURE);
-      expect(el.shadowRoot!.querySelector('zn-button')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('zn-button.editor__submit')).to.not.exist;
     });
 
     it('renders the button in the toolbar, not the footer, and leaves the footer slot working', async () => {
@@ -1553,11 +1555,11 @@ describe('<zn-theme-editor>', () => {
           <span slot="footer">extra</span>
         </zn-theme-editor>`);
 
-      const button = el.shadowRoot!.querySelector('zn-button')!;
+      const button = el.shadowRoot!.querySelector('zn-button.editor__submit')!;
       expect(button).to.exist;
       expect(button.textContent?.trim()).to.equal('Save theme');
-      expect(el.shadowRoot!.querySelector('[part="toolbar"] zn-button')).to.equal(button);
-      expect(el.shadowRoot!.querySelector('[part="footer"] zn-button')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('[part="toolbar"] zn-button.editor__submit')).to.equal(button);
+      expect(el.shadowRoot!.querySelector('[part="footer"] zn-button.editor__submit')).to.not.exist;
       expect(el.shadowRoot!.querySelector('[part="footer"] slot[name="footer"]')).to.exist;
     });
 
@@ -1567,7 +1569,7 @@ describe('<zn-theme-editor>', () => {
           <zn-input name="radius" label="Radius" value="8"></zn-input>
         </zn-theme-editor>`);
 
-      expect(el.shadowRoot!.querySelector('zn-button')).to.exist;
+      expect(el.shadowRoot!.querySelector('zn-button.editor__submit')).to.exist;
       expect(el.shadowRoot!.querySelector('[part="footer"]')).to.not.exist;
     });
 
@@ -1681,7 +1683,7 @@ describe('<zn-theme-editor>', () => {
       await waitUntil(() => fetchCalls.length === 1);
       await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
 
-      const button = el.shadowRoot!.querySelector('zn-button')! as HTMLElement & {loading: boolean};
+      const button = el.shadowRoot!.querySelector('zn-button.editor__submit')! as HTMLElement & {loading: boolean};
       expect(button.loading).to.be.true;
 
       clickButton(el); // second click while in flight - must not stack
@@ -1729,7 +1731,7 @@ describe('<zn-theme-editor>', () => {
 
       clickButton(el); // flushes '99' and bypasses the save debounce, but a save is already in flight
       await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
-      const button = el.shadowRoot!.querySelector('zn-button')! as HTMLElement & {loading: boolean};
+      const button = el.shadowRoot!.querySelector('zn-button.editor__submit')! as HTMLElement & {loading: boolean};
       expect(button.loading).to.be.true;
 
       await new Promise(resolve => setTimeout(resolve, 20));

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

@@ -198,7 +198,6 @@ describe('<zn-translation-group>', () => {
         </zn-translation-group>`);
       // The input tokens live in the theme stylesheet, which the bundle under test does not carry.
       group.style.setProperty('--zn-input-background-color', 'rgb(1, 2, 3)');
-      group.style.setProperty('--zn-shadow-x-small', '0 1px 2px rgb(7, 8, 9)');
       group.style.setProperty('--zn-input-border-width', '1px');
       group.style.setProperty('--zn-input-border-color', 'rgb(9, 9, 9)');
       await group.updateComplete;
@@ -208,7 +207,6 @@ describe('<zn-translation-group>', () => {
       const styles = getComputedStyle(select.shadowRoot!.querySelector<HTMLElement>('[part~="combobox"]')!);
 
       expect(styles.backgroundColor, 'the fill').to.equal('rgb(1, 2, 3)');
-      expect(styles.boxShadow, 'the shadow').to.include('rgb(7, 8, 9)');
       expect(styles.borderTopWidth, 'the border').to.equal('1px');
       expect(styles.borderTopColor, 'the border').to.equal('rgb(9, 9, 9)');
     });