@kubex/zinc 1.1.159 → 1.1.161

package/docs/pages/components/page.md

@@ -133,6 +133,21 @@ Use `priority` to control tab order. Lower numbers appear first after the empty-
 </zn-page>
 ```
 
+### Linking to a Tab
+
+Give any element in the page content a `tab` attribute holding a tab's `id` to open that tab when it is clicked. Links inside a nested `zn-page` or `zn-tabs` open tabs in that nested container.
+
+```html:preview
+<zn-page caption="Scorecard">
+  <zn-tab caption="Details" id="details">
+    <zn-button tab="section-general" icon="edit">Edit General section</zn-button>
+  </zn-tab>
+  <zn-tab caption="General" id="section-general">
+    General section settings
+  </zn-tab>
+</zn-page>
+```
+
 ### Dynamic Tabs
 
 Set `uri` on `zn-tab` to create a dynamic tab. The generated navigation item receives `tab-uri`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.159",
+  "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

@@ -2,6 +2,7 @@ import {classMap} from 'lit/directives/class-map.js';
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from '../../internal/slot';
 import {property, state} from 'lit/decorators.js';
+import {tabContainerSelector} from '../tabs/tabs.component';
 import ZnButton from '../button';
 import ZnCopyButton from '../copy-button';
 import ZnExpandingAction from '../expanding-action';
@@ -30,6 +31,7 @@ interface TabDefinition {
  * @since 1.0
  *
  * @slot - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.
+ *   Clicking an element in the content with `tab="<tab id>"` opens that tab.
  * @slot description - Rich subtitle/description content. Falls back to the `summary` attribute when empty.
  * @slot bottom - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.
  */
@@ -68,6 +70,7 @@ export default class ZnPage extends ZnTabs {
     const connected = super.connectedCallback();
     window.addEventListener('alt-press', this.handleAltPress);
     window.addEventListener('alt-up', this.handleAltUp);
+    this.addEventListener('click', this.handleContentTabClick);
     this.prepareTabs();
     this.refreshExpandingActionsState();
     this.tabObserver = new MutationObserver((mutations) => {
@@ -90,6 +93,7 @@ export default class ZnPage extends ZnTabs {
     super.disconnectedCallback();
     window.removeEventListener('alt-press', this.handleAltPress);
     window.removeEventListener('alt-up', this.handleAltUp);
+    this.removeEventListener('click', this.handleContentTabClick);
     this.tabObserver?.disconnect();
     this.tabObserver = null;
     this.actionObserver?.disconnect();
@@ -280,6 +284,23 @@ export default class ZnPage extends ZnTabs {
     }
   }
 
+  // Only elements whose nearest tab container is this page count, so links inside a nested
+  // zn-tabs or zn-page drive that container instead.
+  private handleContentTabClick = (event: MouseEvent) => {
+    const link = event.composedPath().find((node): node is HTMLElement =>
+      node instanceof HTMLElement && node.hasAttribute('tab') && node.closest(tabContainerSelector) === this
+    );
+    if (!link || link.hasAttribute('disabled')) {
+      return;
+    }
+
+    const definition = this.tabDefinitions.find(tab => tab.id === link.getAttribute('tab'));
+    if (definition) {
+      event.preventDefault();
+      this.activateTabDefinition(definition, true, true);
+    }
+  };
+
   private handleNavigationSelect(event: ZnSelectEvent) {
     const item = event.detail.item as HTMLElement;
     if (this.getNavigationItemPage(item) !== this) {
@@ -383,16 +404,16 @@ export default class ZnPage extends ZnTabs {
     return this.pageHistoryKey;
   }
 
-  private activateTabDefinition(tab: TabDefinition, store = false) {
+  private activateTabDefinition(tab: TabDefinition, store = false, pushHistory = false) {
     if (tab.uri) {
       const navItem = this.findNavItemForUri(tab.uri);
       if (navItem) {
-        this.clickTab(navItem, false);
+        this.clickTab(navItem, false, pushHistory);
         this.syncNavigationActive(navItem);
         return;
       }
     }
-    this.activateTab(tab.id, store);
+    this.activateTab(tab.id, store, pushHistory);
   }
 
   private findNavItemForUri(uri: string): HTMLElement | null {
@@ -517,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"]')!;
@@ -350,6 +350,58 @@ describe('<zn-page>', () => {
     expect(innerDynamicPanel.hasAttribute('selected')).to.equal(true);
   });
 
+  it('opens a tab when an element in the content with a tab attribute is clicked', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Content Tab Link">
+        <zn-tab caption="Overview" id="overview">
+          <zn-button tab="details">Open details</zn-button>
+          <zn-button tab="details" disabled>Disabled link</zn-button>
+        </zn-tab>
+        <zn-tab caption="Details" id="details">Details Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(40);
+
+    // zn-button.click() skips event dispatch, so click the rendered button as a user would.
+    const [link, disabledLink] = Array.from(el.querySelectorAll('zn-button'))
+      .map(button => button.shadowRoot!.querySelector<HTMLElement>('button')!);
+
+    disabledLink.click();
+    await aTimeout(40);
+    expect(el.getAttribute('active')).to.equal('overview');
+
+    link.click();
+    await aTimeout(40);
+    expect(el.getAttribute('active')).to.equal('details');
+    expect(el.shadowRoot!.querySelector('#details')!.hasAttribute('selected')).to.equal(true);
+    const activeItem = el.shadowRoot!.querySelector<HTMLElement>('zn-navbar li.active');
+    expect(activeItem?.getAttribute('tab')).to.equal('details');
+  });
+
+  it('leaves content tab links inside a nested page to that page', async () => {
+    const outerPage = await fixture<ZnPage>(html`
+      <zn-page caption="Nested Content Tab Link">
+        <zn-tab caption="Outer One" id="outer-one">
+          <zn-page caption="Nested Content Tab Link Inner" nested>
+            <zn-tab caption="Inner One" id="inner-one">
+              <zn-button tab="inner-two">Inner link</zn-button>
+            </zn-tab>
+            <zn-tab caption="Inner Two" id="inner-two">Inner Two Content</zn-tab>
+          </zn-page>
+        </zn-tab>
+        <zn-tab caption="Outer Two" id="inner-two">Outer Two Content</zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(80);
+
+    const innerPage = outerPage.querySelector<ZnPage>('zn-page')!;
+    innerPage.querySelector('zn-button')!.shadowRoot!.querySelector<HTMLElement>('button')!.click();
+    await aTimeout(40);
+
+    expect(innerPage.getAttribute('active')).to.equal('inner-two');
+    expect(outerPage.getAttribute('active')).to.equal('outer-one');
+  });
+
   it('keeps nested page tab selections scoped to the nested page', async () => {
     const outerPage = await fixture<ZnPage>(html`
       <zn-page caption="Outer Page">
@@ -536,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);
@@ -604,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>
@@ -624,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/tabs/tabs.component.ts

@@ -25,7 +25,7 @@ import styles from './tabs.scss';
 // Every element that manages its own tabs (ZnTabs and its subclasses). Tab
 // registration must stop at these so an outer container never claims a nested
 // container's tabs.
-const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
+export const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
 
 /**
  * @summary Short summary of the component's intended use.

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>