@kubex/zinc 1.1.184 → 2.0.0

package/src/components/stat/stat.test.ts

@@ -1,10 +1,151 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnStatsTile from './stat.component';
 
-describe('<zn-stats-tile>', () => {
+describe('<zn-stat>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-stats-tile></zn-stats-tile> `);
+    const el = await fixture(html` <zn-stat></zn-stat> `);
 
     expect(el).to.exist;
+    expect(el.shadowRoot).to.exist;
+  });
+
+  it('renders a positive delta in the success text colour', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat amount="110" previous="100" show-delta style="--zn-color-success-fg: rgb(1, 2, 3)"></zn-stat>`);
+    const positive = el.shadowRoot!.querySelector('.positive')!;
+
+    expect(positive).to.exist;
+    expect(getComputedStyle(positive).color).to.equal('rgb(1, 2, 3)');
+  });
+
+  it('renders the whole stat as a link with an arrow when given an href', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat layout="value-first" caption="Fails" amount="3" href="/fails" data-target="primary"></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const link = el.shadowRoot!.querySelector('a.stat-link')!;
+
+    expect(link).to.exist;
+    expect(link.getAttribute('href')).to.equal('/fails');
+    expect(link.getAttribute('data-target')).to.equal('primary');
+    expect(link.querySelector('.caption')!.textContent).to.equal('Fails');
+    expect(link.querySelector('zn-icon.stat-link__icon')).to.exist;
+  });
+
+  it('renders no link without an href', async () => {
+    const el = await fixture<HTMLElement>(html` <zn-stat amount="3"></zn-stat> `);
+
+    expect(el.shadowRoot!.querySelector('a')).to.not.exist;
+  });
+
+  it('compares amounts written with separators and symbols', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat layout="tile" amount="$2,941" previous="$2,875" show-delta></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const delta = el.shadowRoot!.querySelector('.delta')!;
+
+    expect(delta.classList.contains('delta--good')).to.be.true;
+    expect(delta.textContent!.trim()).to.equal('2.3%');
+  });
+
+  it('shows the plain difference from a previous zero', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat layout="tile" amount="5" previous="0" show-delta invert-delta></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const delta = el.shadowRoot!.querySelector('.delta')!;
+
+    expect(delta.classList.contains('delta--bad')).to.be.true;
+    expect(delta.textContent!.trim()).to.equal('5');
+  });
+
+  it('shows no change from a previous zero that stays zero', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat layout="tile" amount="0" previous="0" show-delta></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const delta = el.shadowRoot!.querySelector('.delta')!;
+
+    expect(delta.classList.contains('delta--flat')).to.be.true;
+    expect(delta.textContent!.trim()).to.equal('No change');
+  });
+
+  it('colours a rise as bad news with invert-delta', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-stat layout="tile" amount="148" previous="140" show-delta invert-delta></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.delta')!.classList.contains('delta--bad')).to.be.true;
+  });
+
+  it('draws a sparkline from the spark values', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-stat layout="tile" amount="1" spark="1,3,2"></zn-stat>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    expect(el.shadowRoot!.querySelectorAll('.spark path')).to.have.length(2);
+  });
+
+  it('toggles a selectable tile', async () => {
+    const el = await fixture<HTMLElement & {selected: boolean; updateComplete: Promise<unknown>}>(html`
+      <zn-stat layout="tile" selectable caption="Declined" amount="148"></zn-stat>`);
+    await el.updateComplete;
+    const button = el.shadowRoot!.querySelector('button')!;
+
+    expect(button.getAttribute('aria-pressed')).to.equal('false');
+    button.click();
+    await el.updateComplete;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute('aria-pressed')).to.equal('true');
+  });
+});
+
+describe('<zn-stat> data-url', () => {
+  const original = window.fetch;
+  afterEach(() => { window.fetch = original; });
+
+  it('keeps its own attributes until the data loads, then takes the response', async () => {
+    let resolve!: (r: Response) => void;
+    window.fetch = (() => new Promise<Response>(r => { resolve = r; })) as typeof fetch;
+    const el = await fixture<ZnStatsTile>(html`
+      <zn-stat layout="tile" caption="Sent" amount="—" data-url="/metrics/stats"></zn-stat>`);
+
+    expect(el.amount).to.equal('—');
+    resolve(new Response(JSON.stringify({amount: '1,204', description: '80 in 24 hours', spark: '1,2,3'})));
+    await new Promise(r => setTimeout(r, 50));
+    await el.updateComplete;
+
+    expect(el.caption).to.equal('Sent');
+    expect(el.amount).to.equal('1,204');
+    expect(el.description).to.equal('80 in 24 hours');
+    expect(el.spark).to.equal('1,2,3');
+  });
+
+  it('shows a placeholder while loading and the sparkline once loaded', async () => {
+    let resolve!: (r: Response) => void;
+    window.fetch = (() => new Promise<Response>(r => { resolve = r; })) as typeof fetch;
+    const el = await fixture<ZnStatsTile>(html`
+      <zn-stat layout="tile" caption="Sent" data-url="/metrics/stats"></zn-stat>`);
+
+    expect(el.loading).to.equal(true);
+    expect(el.shadowRoot!.querySelector('.amount__skeleton')).to.exist;
+    expect(el.shadowRoot!.querySelector('.loading-text')).to.exist;
+    expect(el.shadowRoot!.querySelector('.spark__track')).to.exist;
+
+    resolve(new Response(JSON.stringify({amount: '12', spark: '1,2,3'})));
+    await new Promise(r => setTimeout(r, 50));
+    await el.updateComplete;
+
+    expect(el.loading).to.equal(false);
+    expect(el.shadowRoot!.querySelector('.amount__skeleton')).to.not.exist;
+    expect(el.shadowRoot!.querySelector('.spark svg')).to.exist;
+  });
+
+  it('stops loading when the request fails', async () => {
+    window.fetch = (() => Promise.resolve(new Response('', {status: 500}))) as typeof fetch;
+    const el = await fixture<ZnStatsTile>(html`
+      <zn-stat layout="tile" caption="Sent" amount="0" data-url="/metrics/stats"></zn-stat>`);
+    await new Promise(r => setTimeout(r, 50));
+    await el.updateComplete;
+
+    expect(el.loading).to.equal(false);
+    expect(el.amount).to.equal('0');
   });
 });

package/src/components/status-indicator/status-indicator.scss

@@ -1,65 +1,66 @@
 @use "../../wc";
 
 :host {
-  --zn-indicator-info: 100, 117, 242;
-  --zn-indicator-warning: 255, 136, 0;
-  --zn-indicator-error: 237, 84, 109;
-  --zn-indicator-success: 43, 192, 145;
-  --zn-indicator-disabled: 220, 220, 220;
-
-  --indicator-color: var(--zn-indicator-disabled);
-  --indicator-alt-color: var(--zn-indicator-disabled);
+  // Read through fallbacks so a theme can set --zn-indicator-* on the root.
+  --indicator-info: var(--zn-indicator-info, 100, 117, 242);
+  --indicator-warning: var(--zn-indicator-warning, 255, 136, 0);
+  --indicator-error: var(--zn-indicator-error, 237, 84, 109);
+  --indicator-success: var(--zn-indicator-success, 43, 192, 145);
+  --indicator-disabled: var(--zn-indicator-disabled, 220, 220, 220);
+
+  --indicator-color: var(--indicator-disabled);
+  --indicator-alt-color: var(--indicator-disabled);
   white-space: nowrap;
   display: inline-block;
 }
 
 .indicator {
   display: inline-block;
-  background-color: rgba(var(--indicator-color), 0.7);
+  background-color: rgba(var(--indicator-color), var(--zn-status-indicator-fill-alpha, 0.7));
   border: 1px solid rgb(var(--indicator-color));
-  width: 10px;
-  height: 10px;
+  width: var(--zn-status-indicator-size, 10px);
+  height: var(--zn-status-indicator-size, 10px);
   border-radius: 50%;
 
   &--info {
-    --indicator-color: var(--zn-indicator-info);
+    --indicator-color: var(--indicator-info);
   }
 
   &--error {
-    --indicator-color: var(--zn-indicator-error);
+    --indicator-color: var(--indicator-error);
   }
 
   &--warning {
-    --indicator-color: var(--zn-indicator-warning);
+    --indicator-color: var(--indicator-warning);
   }
 
   &--success {
-    --indicator-color: var(--zn-indicator-success);
+    --indicator-color: var(--indicator-success);
   }
 
   &--disabled {
-    --indicator-color: var(--zn-indicator-disabled);
+    --indicator-color: var(--indicator-disabled);
   }
 
   // Alternate (secondary) colour, used by the alternating animation.
   &--alt-info {
-    --indicator-alt-color: var(--zn-indicator-info);
+    --indicator-alt-color: var(--indicator-info);
   }
 
   &--alt-error {
-    --indicator-alt-color: var(--zn-indicator-error);
+    --indicator-alt-color: var(--indicator-error);
   }
 
   &--alt-warning {
-    --indicator-alt-color: var(--zn-indicator-warning);
+    --indicator-alt-color: var(--indicator-warning);
   }
 
   &--alt-success {
-    --indicator-alt-color: var(--zn-indicator-success);
+    --indicator-alt-color: var(--indicator-success);
   }
 
   &--alt-disabled {
-    --indicator-alt-color: var(--zn-indicator-disabled);
+    --indicator-alt-color: var(--indicator-disabled);
   }
 
   &--glow {

package/src/components/stepper/stepper.scss

@@ -51,11 +51,11 @@
   width: 100%;
   left: 2px;
   height: 2px;
-  background-color: rgb(var(--zn-border-color));
+  background-color: var(--zn-stepper-track-color, rgb(var(--zn-border-color)));
 }
 
 .step-progress {
-  background-color: rgb(var(--zn-primary));
+  background-color: var(--zn-stepper-progress-color, rgb(var(--zn-primary)));
   height: 8px;
   position: absolute;
   top: 2px;
@@ -77,7 +77,7 @@
   width: 17px;
   height: 17px;
   border-radius: 50%;
-  background-color: rgb(var(--zn-border-color));
+  background-color: var(--zn-stepper-track-color, rgb(var(--zn-border-color)));
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/tab/tab.component.ts

@@ -16,6 +16,7 @@ export default class ZnTab extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property() caption: string;
+  @property() icon: string;
   @property({type: Number}) priority: number;
   @property() uri: string;
   /** When present, zn-page opens this tab on load instead of the first tab. */

package/src/components/table/table.component.ts

@@ -231,7 +231,8 @@ export default class ZnTable extends ZincElement {
         'table-row--info': color === 'info',
         'table-row--warning': color === 'warning',
         'table-row--success': color === 'success',
-      })}">${rowHtml}
+        'table-row--link': typeof uri === 'string' && uri !== '',
+      })}" @click="${this.handleRowClick}">${rowHtml}
         </tr>`);
     });
 
@@ -239,6 +240,16 @@ export default class ZnTable extends ZincElement {
       <tbody>${rows}</tbody>`;
   }
 
+  // A row with a uri opens it from anywhere in the row, through its caption link so the link's target applies.
+  // Clicks on the row's own controls, and drags that select text, are left to them.
+  private handleRowClick = (e: MouseEvent) => {
+    const row = e.currentTarget as HTMLElement;
+    if (!row.classList.contains('table-row--link') || window.getSelection()?.toString()) return;
+    const control = e.composedPath().find(el => el instanceof HTMLElement && el.matches('a, button, input, select, textarea, zn-dropdown, zn-button'));
+    if (control) return;
+    row.querySelector<HTMLAnchorElement>('td.capcol a')?.click();
+  };
+
   columnContent(col: any) {
     if (typeof col !== 'object' || col === null) {
       if (this.boolIcons && (col.toString() === 'true' || col.toString() === 'false')) {

package/src/components/table/table.scss

@@ -40,7 +40,7 @@ table, thead, tbody, tr, td, th {
 
 tr td {
   min-height: 40px;
-  height: 52px;
+  height: var(--zn-table-row-height, 52px);
 }
 
 tr.with-summary td {
@@ -49,27 +49,27 @@ tr.with-summary td {
 }
 
 .table-row.table-row--error {
-  color: rgb(var(--zn-color-error));
-  border-color: rgb(var(--zn-color-error));
-  background: rgba(var(--zn-color-error), .10);
+  color: var(--zn-color-danger-fg);
+  border-color: var(--zn-color-danger-solid);
+  background: var(--zn-color-danger-bg);
 }
 
 .table-row.table-row--info {
-  color: rgb(var(--zn-color-info));
-  border-color: rgb(var(--zn-color-info));
-  background: rgba(var(--zn-color-info), .10);
+  color: var(--zn-color-info-fg);
+  border-color: var(--zn-color-info-solid);
+  background: var(--zn-color-info-bg);
 }
 
 .table-row.table-row--warning {
-  color: rgb(var(--zn-color-warning));
-  border-color: rgb(var(--zn-color-warning));
-  background: rgba(var(--zn-color-warning), .10);
+  color: var(--zn-color-warning-fg);
+  border-color: var(--zn-color-warning-solid);
+  background: var(--zn-color-warning-bg);
 }
 
 .table-row.table-row--success {
-  color: rgb(var(--zn-color-success)) !important;
-  border-color: rgb(var(--zn-color-success));
-  background: rgba(var(--zn-color-success), .10);
+  color: var(--zn-color-success-fg) !important;
+  border-color: var(--zn-color-success-solid);
+  background: var(--zn-color-success-bg);
 }
 
 .table-row.table-row--nested td:first-of-type {
@@ -204,3 +204,11 @@ zn-table[fixed] {
     table-layout: fixed;
   }
 }
+
+.table-row--link {
+  cursor: pointer;
+
+  &:hover td {
+    background-color: var(--zn-table-row-hover-background, rgba(var(--zn-primary), 0.05));
+  }
+}

package/src/components/table/table.test.ts

@@ -7,4 +7,21 @@ describe('<zn-table>', () => {
 
     expect(el).to.exist;
   });
+
+  it('opens a row with a uri from anywhere in the row through its caption link', async () => {
+    const data = {header: ['Type', 'Connector'], items: [{uri: '/tx/1', target: 'slide', caption: 'AUTH', data: ['sandbanx']}]};
+    const el = await fixture<HTMLElement>(html`<zn-table data="${JSON.stringify(data)}"></zn-table>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    const link = el.shadowRoot!.querySelector<HTMLAnchorElement>('td.capcol a')!;
+    let clicks = 0;
+    link.addEventListener('click', e => { e.preventDefault(); clicks++; });
+
+    const row = el.shadowRoot!.querySelector<HTMLElement>('tr.table-row--link')!;
+    row.querySelectorAll('td')[1].click();
+    expect(clicks).to.equal(1);
+
+    link.click();
+    expect(clicks).to.equal(2);
+  });
 });

package/src/components/tabs/tabs.component.ts

@@ -9,7 +9,7 @@ import {
   replaceHistoryTab,
   TAB_STORE_PREFIX
 } from './tabs-navigation';
-import {getScrolledAncestors, scrollToTop} from "../../internal/scroll";
+import {getScrolledAncestors, revealTop} from "../../internal/scroll";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {md5} from "../../utilities/md5";
@@ -17,15 +17,17 @@ import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
+import {onHoverIntent} from '../../internal/hover-intent';
+import {pointerInitiated} from '../../internal/input-modality';
 
 // Tabs load in such a way that the global sheet has to be re-applied inside the shadow root.
 import bootStyles from '../../../scss/boot.scss';
 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.
-export const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
+// Every element that manages its own tabs (ZnTabs and its subclasses), plus a navbar
+// linked to a container elsewhere. Tab registration must stop at these so an outer
+// container never claims a nested or linked container's tabs.
+export const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav, zn-navbar[tabs]';
 
 /**
  * @summary Short summary of the component's intended use.
@@ -49,6 +51,7 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'default-uri', reflect: true}) defaultUri = '';
   @property({attribute: 'active', reflect: true}) _current = '';
+  private _hasSelected = false;
   @property({attribute: 'split', type: Number, reflect: true}) _split: number;
   @property({attribute: 'split-min', type: Number, reflect: true}) _splitMin = 60;
   @property({attribute: 'split-min-secondary', type: Number, reflect: true}) _splitMinSecondary: number;
@@ -62,6 +65,14 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'store-key'}) storeKey: string;
   @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
   @property({attribute: 'padded', type: Boolean, reflect: true}) padded = false;
+  /**
+   * With `store-key`, opens a tab that has appeared since the page was last shown, such as one for an item just
+   * added, in place of the remembered tab.
+   */
+  @property({attribute: 'select-added', type: Boolean, reflect: true}) selectAdded = false;
+
+  /** Spaces a left or right slot from the content, for side navigation laid out as its own card. */
+  @property({type: Boolean, reflect: true}) gap = false;
   @property({attribute: 'fetch-style', type: String, reflect: true}) fetchStyle = "";
   @property({attribute: 'full-width', type: Boolean, reflect: true}) fullWidth = false;
   @property({attribute: 'padded-right', type: Boolean, reflect: true}) paddedRight = false;
@@ -232,9 +243,43 @@ export default class ZnTabs extends ZincElement {
     }
 
     this._prepareTab(stored);
+    // The stored tab can be gone, say after deleting what it showed; fall back to the tab the container starts on.
+    // A tab still on screen keeps its selection even before its panel loads.
+    const gone = !this._panels.has(stored) && !this._tabs.some(tab => tab.getAttribute('tab') === stored);
+    if (gone && this._defaultTab !== '' && this._panels.has(this._defaultTab)) {
+      this.setActiveTab(this._defaultTab, true, false);
+      return;
+    }
     this.setActiveTab(stored, true, false);
   }
 
+  /**
+   * The tabs present now that were not when the page was last shown, oldest first, remembering the current set for
+   * next time. Empty without `select-added`, or on the first showing.
+   */
+  private takeAddedTabs(): string[] {
+    const key = this.getTabStoreKey();
+    if (!this.selectAdded || key === null || !this._store) {
+      return [];
+    }
+
+    const storeKey = locationScopedKey(`${key}:tabs`);
+    const current = this._tabs.map(tab => tab.getAttribute('tab')).filter((id): id is string => id !== null);
+    const known = this._store.get(storeKey);
+    this._store.set(storeKey, JSON.stringify(current));
+    if (known === null) {
+      return [];
+    }
+
+    let knownIds: Set<string>;
+    try {
+      knownIds = new Set(JSON.parse(known) as string[]);
+    } catch {
+      return [];
+    }
+    return current.filter(id => !knownIds.has(id));
+  }
+
   /** Activates the tab the container starts on, ignoring any stored selection. */
   protected activateDefaultTab() {
     if (!this._panels.has(this._defaultTab) && this._tabs.length > 0) {
@@ -300,11 +345,43 @@ export default class ZnTabs extends ZincElement {
     }
     this._tabs.push(tab);
     if (this.preload) {
-      tab.addEventListener('mouseover', this.fetchUriTab.bind(this, tab));
+      onHoverIntent(tab, () => this.fetchUriTab(tab));
     }
     tab.addEventListener('click', this._handleClick.bind(this));
+
+    // Plain elements (usually <li>) are not focusable; custom elements and tabs wrapping a control manage their own
+    const focusable = 'a[href], button, input, select, textarea, [tabindex]';
+    if (!tab.localName.includes('-') && !tab.matches(focusable) && !tab.querySelector(focusable)) {
+      tab.tabIndex = 0;
+      tab.addEventListener('keydown', this._handleTabKeyDown);
+    }
   }
 
+  private readonly _handleTabKeyDown = (event: KeyboardEvent) => {
+    const tab = event.currentTarget as HTMLElement;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      tab.click();
+      return;
+    }
+
+    const siblings = this._tabs.filter(t => t.parentElement === tab.parentElement && t.tabIndex >= 0);
+    const index = siblings.indexOf(tab);
+    const target = {
+      ArrowRight: index + 1,
+      ArrowDown: index + 1,
+      ArrowLeft: index - 1,
+      ArrowUp: index - 1,
+      Home: 0,
+      End: siblings.length - 1
+    }[event.key];
+    if (target === undefined) {
+      return;
+    }
+    event.preventDefault();
+    siblings[(target + siblings.length) % siblings.length].focus();
+  };
+
   reRegisterTabs = () => {
     this._registerTabs();
   }
@@ -314,6 +391,16 @@ export default class ZnTabs extends ZincElement {
     setTimeout(() => {
       this._registerTabs();
       this._defaultTab = this._current || '';
+      // A linked navbar renders its items after this container can be ready
+      this._linkedNavbars().forEach(navbar => {
+        void (navbar as ZincElement).updateComplete?.then(this.reRegisterTabs);
+      });
+
+      const added = this.takeAddedTabs();
+      if (added.length > 0) {
+        this.setActiveTab(added[added.length - 1], true, false);
+        return;
+      }
 
       const storedValue = this.getStoredTab();
       if (storedValue !== null) {
@@ -361,7 +448,8 @@ export default class ZnTabs extends ZincElement {
       }
     }
 
-    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, tabContainerSelector)) {
+    const uriTabs = [this, ...this._linkedNavbars()].flatMap(root => deepQuerySelectorAll("[tab-uri]", root, tabContainerSelector));
+    for (const uriTab of uriTabs) {
       const uri: string = uriTab.getAttribute("tab-uri")!;
       const eleTabId = this._uriToId(uri);
       if (eleTabId === tabId) {
@@ -412,21 +500,14 @@ export default class ZnTabs extends ZincElement {
 
   _handleClick(event: PointerEvent) {
     // ts-ignore
-    const target = (event.relatedTarget ?? event.target) as HTMLElement;
+    // The listener is on the tab itself; event.target could be an icon or tooltip inside it
+    const target = (event.relatedTarget ?? event.currentTarget) as HTMLElement;
     if (!target) {
       return;
     }
 
-    if (!('startViewTransition' in document)) {
-      this.clickTab(target, event.altKey, true);
-      return;
-    }
-
-    const transition = document.startViewTransition(() => this.clickTab(target, event.altKey, true));
-
-    void transition.ready.catch(() => undefined);
-    void transition.finished.catch(() => undefined);
-    void transition.updateCallbackDone.catch(() => undefined);
+    // No view transition: a root transition snapshots the whole page, which costs Safari hundreds of ms per switch.
+    this.clickTab(target, event.altKey, true);
   }
 
   fetchUriTab(target: HTMLElement) {
@@ -555,15 +636,36 @@ export default class ZnTabs extends ZincElement {
       this._current = tabName;
     };
 
-    const scrolled = sameTab ? [] : getScrolledAncestors(this._panel);
+    // Reading scroll positions forces a layout; the first selection has no reader's place to reset.
+    const firstSelection = !this._hasSelected;
+    const scrolled = sameTab || firstSelection ? [] : getScrolledAncestors(this._panel);
+    this._hasSelected = true;
 
     updateTabs();
 
-    scrollToTop(scrolled);
+    // Only a pointer press on these tabs animates: keyboard, history and first-render selections stay instant, as
+    // does a nested tab group picking its default while an outer tab is opened.
+    if (!sameTab && !firstSelection && pointerInitiated(this)) {
+      this._panels.get(tabName)?.forEach(panel => this._enterPanel(panel));
+    }
+
+    revealTop(scrolled, this);
 
     return true;
   }
 
+  // Started here rather than as a CSS animation, which would replay in every nested tab panel whenever an ancestor
+  // panel is shown again. Opacity and translate only, so the compositor runs it without restyling the page.
+  private _enterPanel(panel: Element) {
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    // keep in sync with --zn-ease-out
+    // Offset upward: overflow past the top edge isn't scrollable, so a panel that just fits never flashes a scrollbar
+    panel.animate(reduceMotion ? [{opacity: 0}, {}] : [{opacity: 0, translate: '0 -4px'}, {}], {
+      duration: reduceMotion ? 150 : 160,
+      easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    });
+  }
+
   getActiveTab(): Element[] {
     return this._panels.get(this._current) || [];
   }
@@ -608,26 +710,37 @@ export default class ZnTabs extends ZincElement {
     }
   }
 
+  /** Navbars elsewhere in this container's root that drive it through `tabs="<this id>"`. */
+  private _linkedNavbars(): Element[] {
+    if (!this.id) {
+      return [];
+    }
+    const root = this.getRootNode() as Document | ShadowRoot;
+    return Array.from(root.querySelectorAll(`zn-navbar[tabs="${CSS.escape(this.id)}"]`));
+  }
+
   _registerTabs = () => {
-    deepQuerySelectorAll('[tab]', this, tabContainerSelector).forEach(ele => {
-      this._addTab(ele as HTMLElement);
-    });
+    for (const root of [this, ...this._linkedNavbars()]) {
+      deepQuerySelectorAll('[tab]', root, tabContainerSelector).forEach(ele => {
+        this._addTab(ele as HTMLElement);
+      });
 
-    deepQuerySelectorAll('[tab-uri]', this, tabContainerSelector).forEach(ele => {
-      if (ele.getAttribute('tab-uri') === "") {
-        ele.setAttribute('tab', "");
-        ele.removeAttribute('tab-uri');
-      }
-      this._addTab(ele as HTMLElement);
-    });
+      deepQuerySelectorAll('[tab-uri]', root, tabContainerSelector).forEach(ele => {
+        if (ele.getAttribute('tab-uri') === "") {
+          ele.setAttribute('tab', "");
+          ele.removeAttribute('tab-uri');
+        }
+        this._addTab(ele as HTMLElement);
+      });
 
-    deepQuerySelectorAll('[ref-tab-uri]', this, tabContainerSelector).forEach(ele => {
-      if (!ele.hasAttribute('ref-tab')) {
-        ele.setAttribute('ref-tab', this._uriToId(ele.getAttribute('ref-tab-uri')!));
-        ele.removeAttribute('ref-tab-uri');
-        this._actions.push(ele as HTMLElement);
-      }
-    });
+      deepQuerySelectorAll('[ref-tab-uri]', root, tabContainerSelector).forEach(ele => {
+        if (!ele.hasAttribute('ref-tab')) {
+          ele.setAttribute('ref-tab', this._uriToId(ele.getAttribute('ref-tab-uri')!));
+          ele.removeAttribute('ref-tab-uri');
+          this._actions.push(ele as HTMLElement);
+        }
+      });
+    }
   }
 
   render() {