@kubex/zinc 1.1.185 → 2.0.1

package/src/components/split-pane/split-pane.test.ts

@@ -1,7 +1,10 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import type ZnSplitPane from './split-pane.component';
 
+// Narrow-parent merging is applied from the ResizeObserver, which delivers after layout and before paint.
+const afterLayout = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
 describe('<zn-split-pane>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-split-pane></zn-split-pane> `);
@@ -71,6 +74,7 @@ describe('<zn-split-pane>', () => {
       </zn-split-pane>
     `);
     await el.updateComplete;
+    await afterLayout();
     const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
     await nested.updateComplete;
     const navItems = Array.from(el.shadowRoot!.querySelectorAll('#split-nav li'));
@@ -99,6 +103,7 @@ describe('<zn-split-pane>', () => {
       </zn-split-pane>
     `);
     await el.updateComplete;
+    await afterLayout();
     const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
     await nested.updateComplete;
 
@@ -140,6 +145,7 @@ describe('<zn-split-pane>', () => {
       </zn-split-pane>
     `);
     await el.updateComplete;
+    await afterLayout();
     const nested = el.querySelector<ZnSplitPane>('zn-split-pane')!;
     const deepNested = nested.querySelector<ZnSplitPane>('zn-split-pane')!;
     await nested.updateComplete;
@@ -174,7 +180,7 @@ describe('<zn-split-pane>', () => {
     window.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
 
     expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--min-secondary-panel-size: 25%');
-    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--initial-size: 75%');
+    expect(el.shadowRoot!.querySelector<HTMLElement>('#primary-pane')!.style.getPropertyValue('--zn-split-pane-size')).to.equal('75%');
   });
 
   it('should keep the secondary pane above the configured pixel minimum', async () => {
@@ -192,6 +198,20 @@ describe('<zn-split-pane>', () => {
     window.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
 
     expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--min-secondary-panel-size: 125px');
-    expect((el.shadowRoot?.querySelector('style')?.textContent ?? '')).to.contain('--initial-size: 275px');
+    expect(el.shadowRoot!.querySelector<HTMLElement>('#primary-pane')!.style.getPropertyValue('--zn-split-pane-size')).to.equal('275px');
+  });
+
+  it('keeps a preferred secondary pane at its pixel size when the container resizes', async () => {
+    const el = await fixture<ZnSplitPane>(html`
+      <zn-split-pane vertical secondary pixels min-size="50" initial-size="100" style="display: flex; height: 400px;">
+        <div slot="primary">Primary content</div>
+        <div slot="secondary">Secondary content</div>
+      </zn-split-pane>
+    `);
+    const secondaryHeight = () => el.shadowRoot!.querySelector('#secondary-pane')!.getBoundingClientRect().height;
+    await waitUntil(() => Math.abs(secondaryHeight() - 100) < 2);
+
+    el.style.height = '600px';
+    await waitUntil(() => Math.abs(secondaryHeight() - 100) < 2, 'secondary pane stays at 100px');
   });
 });

package/src/components/stat/stat.component.ts

@@ -1,7 +1,8 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property} from 'lit/decorators.js';
+import {keyed} from "lit/directives/keyed.js";
+import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import type {IconColor} from '../icon';
 
@@ -28,8 +29,27 @@ export default class ZnStatsTile extends ZincElement {
   @property() color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral' = 'primary';
 
   /** `value-first` puts the amount under the caption with the description beneath it, and tints the amount rather
-   * than the description with `color`. */
-  @property({reflect: true}) layout: 'default' | 'value-first' = 'default';
+   * than the description with `color`. `tile` is a self-contained card: caption, amount, a footer with the delta and
+   * `description`, an optional sparkline, and the default slot beneath. */
+  @property({reflect: true}) layout: 'default' | 'value-first' | 'tile' = 'default';
+
+  /** Comma-separated values drawn as a sparkline under a `tile`. */
+  @property() spark = '';
+
+  /** The sparkline's colour: a tone (`primary`, `info`, `success`, `warning`, `danger`, `ai`) or any CSS colour. */
+  @property({attribute: 'spark-color'}) sparkColor = '';
+
+  /** Treats a rise as bad news, so an increase is coloured as a loss (declines, refunds, failures). */
+  @property({type: Boolean, attribute: 'invert-delta'}) invertDelta = false;
+
+  /** A coloured dot before a `tile`'s caption. */
+  @property({reflect: true}) tone: '' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' = '';
+
+  /** Renders a `tile` as a toggle button, for tiles that filter the content below them. */
+  @property({type: Boolean}) selectable = false;
+
+  /** Whether a `selectable` tile is pressed, or a linked tile marks the view the page is showing. */
+  @property({type: Boolean, reflect: true}) selected = false;
 
   /** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
   @property({attribute: 'delta-format'}) deltaFormat: 'percent' | 'points' = 'percent';
@@ -46,9 +66,62 @@ export default class ZnStatsTile extends ZincElement {
   /** Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`. */
   @property({type: Boolean}) padded = false;
 
+  /** Makes the whole stat a link, marked with an arrow in its corner. */
+  @property() href: string;
+
+  @property({attribute: 'data-target'}) dataTarget: string;
+
+  @property() gaid: string;
+
+  /** JSON fetched once to fill the stat: any of `caption`, `amount`, `description`, `previous`, `spark` and
+   * `sparkColor`. The stat's own attributes show until it loads. */
+  @property({attribute: 'data-url'}) dataUrl = '';
+
+  /** Shows a `tile` as a placeholder. Set while `data-url` loads; the sparkline draws in once it clears. */
+  @property({type: Boolean, reflect: true}) loading = false;
+
+  @state() private loaded = false;
+
+  private static readonly loadableKeys = ['caption', 'amount', 'description', 'previous', 'spark', 'sparkColor'] as const;
+
+  protected willUpdate(changed: PropertyValues) {
+    super.willUpdate(changed);
+    if (changed.has('dataUrl') && this.dataUrl) this.loading = true;
+  }
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    if (changed.has('dataUrl') && this.dataUrl) void this.loadData(this.dataUrl);
+  }
+
+  private async loadData(url: string) {
+    try {
+      const res = await fetch(url, {
+        credentials: 'same-origin',
+        headers: {Accept: 'application/json', 'x-kx-fetch-style': 'raw-json'},
+      });
+      if (url !== this.dataUrl) return;
+      if (res.ok) {
+        const body = await res.json() as Partial<Record<typeof ZnStatsTile.loadableKeys[number], unknown>>;
+        for (const key of ZnStatsTile.loadableKeys) {
+          if (body[key] !== undefined && body[key] !== null) this[key] = String(body[key]);
+        }
+      }
+    } catch { /* fall back to the stat's own attributes */ }
+    if (url === this.dataUrl) {
+      this.loaded = true;
+      this.loading = false;
+    }
+  }
+
+  // Amounts are display strings, so drop separators and symbols ("48,201", "$2,941") before comparing.
+  private parseNumber(value: string) {
+    return parseFloat(String(value).replace(/[^0-9.-]/g, ''));
+  }
+
   calcPercentageDifference() {
-    const previous = parseFloat(this.previous);
-    const amount = parseFloat(this.amount);
+    const previous = this.parseNumber(this.previous);
+    const amount = this.parseNumber(this.amount);
 
     let diff = ((amount - previous) / previous) * 100;
     diff = Math.round(diff * 10) / 10;
@@ -105,8 +178,8 @@ export default class ZnStatsTile extends ZincElement {
         diffIcon = '-';
       }
 
-      if (this.deltaFormat === 'points') {
-        return html`<p class="diff">${this.pointsDelta()} on Previous Period</p>`;
+      if (this.deltaFormat === 'points' || this.fromZero()) {
+        return html`<p class="diff">${this.pointsDelta(this.deltaFormat === 'points' ? ' pts' : '')} on Previous Period</p>`;
       }
 
       return html`<p class="diff"><span class="${diffClass}">${diffIcon}${diff}%</span> on Previous Period</p>`;
@@ -115,13 +188,18 @@ export default class ZnStatsTile extends ZincElement {
     return null;
   }
 
-  private pointsDelta() {
-    const diff = Math.round((parseFloat(this.amount) - parseFloat(this.previous)) * 10) / 10;
+  // A change from zero has no percentage, so it shows as the plain difference.
+  private fromZero() {
+    return this.parseNumber(this.previous) === 0;
+  }
+
+  private pointsDelta(unit = ' pts') {
+    const diff = Math.round((this.parseNumber(this.amount) - this.parseNumber(this.previous)) * 10) / 10;
     if (diff > 0) {
-      return html`<span class="positive">+${diff} pts</span>`;
+      return html`<span class="positive">+${diff}${unit}</span>`;
     }
     if (diff < 0) {
-      return html`<span class="negative">-${Math.abs(diff)} pts</span>`;
+      return html`<span class="negative">-${Math.abs(diff)}${unit}</span>`;
     }
     return html`<span class="neutral">No change</span>`;
   }
@@ -152,6 +230,9 @@ export default class ZnStatsTile extends ZincElement {
   }
 
   private percentDelta() {
+    if (this.fromZero()) {
+      return this.pointsDelta('');
+    }
     const diff = this.calcPercentageDifference();
     if (diff > 0) {
       return html`<span class="positive">+${diff}%</span>`;
@@ -162,11 +243,125 @@ export default class ZnStatsTile extends ZincElement {
     return html`<span class="neutral">No change</span>`;
   }
 
+  private tileDelta() {
+    if (!this.showDelta) {
+      return null;
+    }
+
+    const points = this.deltaFormat === 'points';
+    const absolute = points || this.fromZero();
+    const diff = absolute
+      ? Math.round((this.parseNumber(this.amount) - this.parseNumber(this.previous)) * 10) / 10
+      : this.calcPercentageDifference();
+    const direction = diff > 0 ? 'up' : diff < 0 ? 'down' : 'flat';
+    const outcome = direction === 'flat' ? 'flat' : (direction === 'up') !== this.invertDelta ? 'good' : 'bad';
+    const text = direction === 'flat' && absolute ? 'No change'
+      : points ? `${Math.abs(diff)} pts` : absolute ? `${Math.abs(diff)}` : `${Math.abs(diff)}%`;
+
+    return html`
+      <span class="delta delta--${outcome}">
+        ${direction === 'flat' ? null : html`
+          <zn-icon src="${direction === 'up' ? 'arrow-up-right@lu' : 'arrow-down-right@lu'}" size="14"></zn-icon>`}
+        ${text}
+      </span>`;
+  }
+
+  private sparkStroke() {
+    const tones: Record<string, string> = {
+      primary: 'var(--zn-chart-color-1, rgb(var(--zn-primary)))',
+      info: 'var(--zn-chart-color-1, rgb(var(--zn-color-info)))',
+      success: 'var(--zn-chart-color-2, rgb(var(--zn-color-success)))',
+      ai: 'var(--zn-chart-color-3, rgb(var(--zn-color-ai)))',
+      warning: 'var(--zn-chart-color-4, rgb(var(--zn-color-warning)))',
+      danger: 'var(--zn-chart-color-5, rgb(var(--zn-color-error)))',
+      error: 'var(--zn-chart-color-5, rgb(var(--zn-color-error)))',
+    };
+    return tones[this.sparkColor] ?? (this.sparkColor || tones.primary);
+  }
+
+  private renderSpark() {
+    if (this.loading) {
+      return html`<div class="spark spark--loading" part="spark">
+        <span class="spark__track" style="--stat-spark: ${this.sparkStroke()}"></span>
+      </div>`;
+    }
+
+    const data = this.spark.split(',').map(v => parseFloat(v)).filter(v => !Number.isNaN(v));
+    if (data.length < 2) {
+      return null;
+    }
+
+    const width = 100;
+    const height = 28;
+    const max = Math.max(...data);
+    const min = Math.min(...data);
+    const range = max - min || 1;
+    const line = data
+      .map((v, i) => `${i ? 'L' : 'M'}${((i / (data.length - 1)) * width).toFixed(1)} ${(height - 3 - ((v - min) / range) * (height - 6)).toFixed(1)}`)
+      .join(' ');
+    const color = this.sparkStroke();
+
+    return html`
+      <div class="spark" part="spark">
+        <svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" aria-hidden="true">
+          <defs>
+            <linearGradient id="spark-fill" x1="0" x2="0" y1="0" y2="1">
+              <stop offset="0" style="stop-color: ${color}; stop-opacity: .22"></stop>
+              <stop offset="1" style="stop-color: ${color}; stop-opacity: 0"></stop>
+            </linearGradient>
+          </defs>
+          <path d="${line} L${width} ${height} L0 ${height} Z" fill="url(#spark-fill)"></path>
+          <path d="${line}" fill="none" style="stroke: ${color}" stroke-width="1.75"
+                vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round"></path>
+        </svg>
+      </div>`;
+  }
+
+  private renderTile() {
+    const delta = this.loading ? null : this.tileDelta();
+    const description = this.description
+      || (this.loading ? html`<span class="loading-text">Loading</span>` : '');
+    const classes = classMap({
+      'stat-tile': true,
+      'stat-tile--card': true,
+      'stat-tile--selectable': this.selectable,
+      'stat-tile--loaded': this.loaded,
+      [`stat-tile--tone-${this.tone}`]: !!this.tone,
+    });
+    // Keyed so the loaded content is new nodes, which replays its entrance animations
+    const body = keyed(this.loading, html`
+      <span class="caption" part="caption">${this.caption}</span>
+      <span class="amount" part="amount">${this.loading
+        ? html`<span class="amount__skeleton"></span>`
+        : this.renderAmount()}</span>
+      ${delta || description ? html`
+        <span class="foot" part="foot">${delta}${description ? html`<span>${description}</span>` : null}</span>` : null}
+      ${this.renderSpark()}
+      <slot></slot>`);
+
+    return this.selectable
+      ? html`<button type="button" part="base" class="${classes}" aria-pressed="${this.selected ? 'true' : 'false'}"
+                     @click="${() => { this.selected = !this.selected; }}">${body}</button>`
+      : html`<div part="base" class="${classes}">${body}</div>`;
+  }
+
   render() {
-    if (this.layout === 'value-first') {
-      return this.renderValueFirst();
+    const tile = this.layout === 'tile'
+      ? this.renderTile()
+      : this.layout === 'value-first' ? this.renderValueFirst() : this.renderDefault();
+    if (!this.href) {
+      return tile;
     }
 
+    return html`
+      <a class="stat-link" part="link" href="${this.href}" data-target="${ifDefined(this.dataTarget)}"
+         gaid="${ifDefined(this.gaid)}">
+        ${tile}
+        <zn-icon class="stat-link__icon" src="arrow-up-right@lu" size="${this.layout === 'tile' ? 18 : 16}" aria-hidden="true"></zn-icon>
+      </a>`;
+  }
+
+  private renderDefault() {
     return html`
       <div class="${classMap({
         'stat-tile': true,

package/src/components/stat/stat.scss

@@ -6,10 +6,307 @@
 }
 
 // A box of its own lets zn-cols draw its dividers between value-first stats.
-:host([layout="value-first"]) {
+:host([layout="value-first"]),
+:host([layout="tile"]) {
   display: block;
 }
 
+// Doubled class out-ranks the default layout's `.stat-tile .x` rules, which the card also matches.
+.stat-tile.stat-tile--card {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: var(--zn-density-card-padding, var(--zn-spacing-medium));
+  background: rgba(var(--zn-panel), var(--zn-panel-opacity, 1));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-panel-border-radius, var(--zn-border-radius));
+  box-shadow: var(--zn-panel-shadow, none);
+  font: inherit;
+  color: inherit;
+  text-align: left;
+
+  .caption {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    font-family: var(--zn-text-chart-minor-font-family, inherit);
+    font-size: var(--zn-text-chart-minor-font-size);
+    line-height: 1.2;
+    font-weight: var(--zn-text-chart-minor-font-weight);
+    color: var(--zn-text-chart-minor-color);
+  }
+
+  .amount {
+    display: block;
+    flex-grow: 0;
+    padding: 0;
+    font-family: var(--zn-text-chart-major-font-family, inherit);
+    font-size: var(--zn-text-chart-major-font-size);
+    font-weight: var(--zn-text-chart-major-font-weight);
+    line-height: 1.1;
+    letter-spacing: var(--zn-text-chart-major-letter-spacing, normal);
+    font-variant-numeric: tabular-nums;
+    color: var(--zn-text-chart-major-color);
+  }
+
+  .foot {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--zn-font-size-x-small);
+    color: var(--zn-text-color-muted);
+  }
+
+  .spark {
+    height: 28px;
+    margin-top: 2px;
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+  }
+
+  // Holds the line box of a loaded amount, so the tile doesn't jump when the value arrives
+  .amount__skeleton {
+    position: relative;
+    display: block;
+    width: 2.4em;
+    height: .85em;
+    margin: .125em 0;
+  }
+
+  .spark--loading {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .spark__track {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 3px;
+    border-radius: 2px;
+    background: var(--zn-skeleton-background, rgb(var(--zn-border-color)));
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    // A soft glow with no edges, so the placeholder never reads as a box
+    .amount__skeleton::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      width: 60%;
+      background: radial-gradient(ellipse at center, rgb(var(--zn-border-color)) 0%, transparent 70%);
+      animation: skeleton-sweep 1.4s ease-in-out infinite;
+    }
+
+    .spark__track::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      width: 40%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, transparent, var(--stat-spark), transparent);
+      animation: spark-sweep 1.4s ease-in-out infinite;
+    }
+
+    .loading-text::after {
+      content: "";
+      display: inline-block;
+      width: 1.2em;
+      text-align: left;
+      animation: loading-dots 1.2s steps(1) infinite;
+    }
+
+    &.stat-tile--loaded {
+      .amount {
+        animation: stat-fade .4s ease-out both;
+      }
+
+      .foot {
+        animation: stat-rise .4s .1s var(--zn-ease-out, ease-out) both;
+      }
+
+      .spark svg {
+        animation: spark-draw .8s .15s var(--zn-ease-out, ease-out) both;
+      }
+    }
+  }
+}
+
+@keyframes spark-draw {
+  from { clip-path: inset(-2px 100% -2px -2px); }
+  to { clip-path: inset(-2px); }
+}
+
+// Fades at both ends instead of being clipped, so the glow has no edge to cut off
+@keyframes skeleton-sweep {
+  from { transform: translateX(-40%); opacity: 0; }
+  25%, 75% { opacity: 1; }
+  to { transform: translateX(140%); opacity: 0; }
+}
+
+@keyframes spark-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+
+@keyframes stat-fade {
+  from { opacity: 0; }
+}
+
+@keyframes stat-rise {
+  from { opacity: 0; transform: translateY(6px); }
+}
+
+@keyframes loading-dots {
+  0% { content: ""; }
+  25% { content: "."; }
+  50% { content: ".."; }
+  75% { content: "..."; }
+}
+
+.stat-tile--tone-info { --stat-tone: var(--zn-chart-color-1, rgb(var(--zn-color-info))); }
+.stat-tile--tone-success { --stat-tone: var(--zn-chart-color-2, rgb(var(--zn-color-success))); }
+.stat-tile--tone-warning { --stat-tone: var(--zn-chart-color-4, rgb(var(--zn-color-warning))); }
+.stat-tile--tone-danger { --stat-tone: var(--zn-chart-color-5, rgb(var(--zn-color-error))); }
+
+[class*="stat-tile--tone-"] .caption::before {
+  content: "";
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--stat-tone, var(--zn-color-neutral-400));
+}
+
+@mixin selected-tile {
+  border-color: rgb(var(--zn-primary));
+  background: var(--zn-color-primary-50);
+  // Inset, so a container clipping at the tile's edge can't cut the ring off
+  box-shadow: inset 0 0 0 1px rgb(var(--zn-primary));
+}
+
+.stat-tile--selectable {
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--zn-color-primary-300);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+
+  &[aria-pressed="true"] {
+    @include selected-tile;
+  }
+}
+
+// A linked tile marks the view it is showing, such as the filter a page is on.
+:host([selected][href]) .stat-tile--card {
+  @include selected-tile;
+}
+
+.delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-weight: var(--zn-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+
+  &--good { color: var(--zn-color-success-fg); }
+  &--bad { color: var(--zn-color-danger-fg); }
+  &--flat { color: var(--zn-text-color-muted); }
+}
+
+.stat-link {
+  position: relative;
+  display: block;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--zn-stat-hover-background, var(--zn-tile-hover-background, var(--zn-color-neutral-100)));
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -2px;
+  }
+}
+
+// A linked tile is a card in its own right, so it lifts rather than tinting the row.
+:host([layout="tile"]) .stat-link {
+  height: 100%;
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  // Gated so a tap doesn't leave the lift stuck on touch screens.
+  @media (hover: hover) and (pointer: fine) {
+    &:hover .stat-tile--card {
+      border-color: var(--zn-color-primary-400);
+      box-shadow: var(--zn-shadow-medium);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    .stat-tile--card {
+      border-color: rgb(var(--zn-primary));
+      box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+    }
+  }
+
+  .stat-tile--card {
+    transition: border-color var(--zn-transition-fast), box-shadow var(--zn-transition-fast);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :host([layout="tile"][selected]) .stat-link:hover .stat-tile--card {
+    border-color: rgb(var(--zn-primary));
+    box-shadow: inset 0 0 0 1px rgb(var(--zn-primary)), var(--zn-shadow-medium);
+  }
+}
+
+.stat-link__icon {
+  position: absolute;
+  top: var(--zn-spacing-medium);
+  right: var(--zn-spacing-medium);
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
+}
+
+:host([layout="tile"]) .stat-link__icon {
+  top: var(--zn-density-card-padding, var(--zn-spacing-medium));
+  right: var(--zn-density-card-padding, var(--zn-spacing-medium));
+  transition: transform var(--zn-transition-fast) var(--zn-ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :host([layout="tile"]) .stat-link:hover .stat-link__icon {
+    transform: translate(1px, -1px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([layout="tile"]) .stat-link__icon {
+    transition: none;
+  }
+}
+
 .stat-tile {
 
   .caption, .description, .amount, .bottom {
@@ -40,9 +337,12 @@
 
   .amount {
     color: var(--zn-text-chart-major-color);
+    font-family: var(--zn-text-chart-major-font-family, inherit);
     font-weight: var(--zn-text-chart-major-font-weight);
     font-size: var(--zn-text-chart-major-font-size);
     line-height: var(--zn-text-chart-major-line-height);
+    letter-spacing: var(--zn-text-chart-major-letter-spacing, normal);
+    font-variant-numeric: var(--zn-stat-numeric, normal);
     display: flex;
     flex-grow: 1;
     align-items: center;
@@ -61,15 +361,15 @@
 
   .diff {
     .positive {
-      color: rgb(var(--zn-color-success));
+      color: var(--zn-color-success-fg);
     }
 
     .negative {
-      color: rgb(var(--zn-color-error));
+      color: var(--zn-color-danger-fg);
     }
 
     .neutral {
-      color: rgb(var(--zn-color-warning));
+      color: var(--zn-color-warning-fg);
     }
   }
 
@@ -145,7 +445,7 @@
   }
 
   &--primary {
-    color: rgb(var(--zn-primary));
+    color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
   }
 
   &--error {