@kubex/zinc 1.1.179 → 1.1.181

package/src/components/chart/live.ts

@@ -0,0 +1,164 @@
+import type { SeriesItem } from './builders';
+
+export interface LivePoint { at: number; value: number | null }
+export interface LivePrediction {
+  status: string; average_rates?: boolean;
+  points: { at: number; expected: number; lower: number; upper: number; available: boolean }[];
+}
+export interface LiveFrame {
+  from: number; until: number; server_time: number; expires_at: number;
+  resolution_seconds: number; metric: string; points: LivePoint[]; prediction?: LivePrediction;
+}
+export interface LiveGrant { stream_url: string; expires_at: number; server_time: number }
+
+const finite = (n: unknown): n is number => typeof n === 'number' && Number.isFinite(n);
+
+/** Authoritative bucket replacement, never increment counts on delivery/reconnect. */
+export class LiveWindow {
+  frame?: LiveFrame;
+  private points = new Map<number, number | null>();
+  private prediction?: LivePrediction;
+
+  apply(value: unknown, snapshot: boolean): LiveFrame {
+    const f = value as LiveFrame;
+    if (!f || !finite(f.from) || !finite(f.until) || f.until <= f.from || !finite(f.server_time) ||
+        !finite(f.expires_at) || !finite(f.resolution_seconds) || f.resolution_seconds <= 0 ||
+        !['hits', 'sum', 'average'].includes(f.metric) || !Array.isArray(f.points) || f.points.length > 10000 ||
+        f.points.some(p => !p || !finite(p.at) || !(p.value === null || finite(p.value)))) throw new Error('Invalid chart frame');
+    if (!snapshot && (!this.frame || this.frame.resolution_seconds !== f.resolution_seconds || this.frame.metric !== f.metric)) throw new Error('Snapshot required');
+    if (f.prediction && (!Array.isArray(f.prediction.points) || f.prediction.points.length > 10000 ||
+        f.prediction.points.some(p => !p || !finite(p.at) || !finite(p.lower) || !finite(p.upper) || !finite(p.expected) || p.upper < p.lower))) throw new Error('Invalid prediction');
+    if (snapshot) { this.points.clear(); this.prediction = f.prediction; }
+    else if (f.prediction) this.prediction = f.prediction;
+    const start = Math.floor(f.from / (f.resolution_seconds * 1000)) * f.resolution_seconds * 1000;
+    for (const p of f.points) if (p.at >= start && p.at < f.until) this.points.set(p.at, p.value);
+    for (const at of this.points.keys()) if (at < start || at >= f.until) this.points.delete(at);
+    // Never keep an unbounded history, including malformed streams with many timestamps.
+    if (this.points.size > 10000) {
+      const ordered = [...this.points.keys()].sort((a, b) => a - b);
+      for (const at of ordered.slice(0, ordered.length - 10000)) this.points.delete(at);
+    }
+    this.frame = f;
+    return f;
+  }
+
+  advance(serverTime: number) {
+    if (!this.frame || !finite(serverTime) || serverTime <= this.frame.server_time) return;
+    const delta = serverTime - this.frame.server_time;
+    this.frame = { ...this.frame, server_time: serverTime, from: this.frame.from + delta, until: this.frame.until + delta };
+    const start = Math.floor(this.frame.from / (this.frame.resolution_seconds * 1000)) * this.frame.resolution_seconds * 1000;
+    for (const at of this.points.keys()) if (at < start) this.points.delete(at);
+  }
+
+  get predictionStatus() { return this.prediction?.status ?? 'unavailable'; }
+
+  series(hideZero = false): SeriesItem[] {
+    const points = [...this.points].sort((a,b) => a[0]-b[0]);
+    const series: SeriesItem[] = [];
+    if (this.prediction && this.frame) {
+      const ps = this.prediction.points.filter(p => p.at < this.frame!.until && p.at >= this.frame!.from - 86400000);
+      const name = this.prediction.average_rates ? 'Expected range (average rate)' : 'Expected range';
+      const data = (pick: (p: typeof ps[number]) => number) => ps.map(p => ({ name: String(p.at), value: [p.at, p.available ? pick(p) : null] }));
+      if (ps.some(p => p.available)) {
+        series.push({ id: 'live-range-base', animation: false, name: '_range_base', data: data(p => p.lower), stack: 'expected', stackStrategy: 'all', symbol: 'none', silent: true,
+          lineStyle: { opacity: 0 }, areaStyle: { opacity: 0 }, z: 1 });
+        series.push({ id: 'live-range', animation: false, name, data: data(p => p.upper - p.lower), stack: 'expected', stackStrategy: 'all', symbol: 'none', silent: true,
+          color: '#93c5fd', lineStyle: { opacity: 0 }, areaStyle: { opacity: 0.3 }, z: 1 });
+      }
+    }
+    series.push({ id: 'live-values', animation: false, name: this.frame?.metric ?? 'Values', data: points.map(([at, value]) => ({ name: String(at), value: [at, hideZero && value === 0 ? null : value] })), symbol: 'none', z: 3 });
+    return series;
+  }
+}
+
+/** One transport per chart. Grants renew only through a same-origin login gate. */
+export class LiveTransport {
+  private source?: EventSource;
+  private timer?: ReturnType<typeof setTimeout>;
+  private expiryTimer?: ReturnType<typeof setTimeout>;
+  private abort?: AbortController;
+  private stopped = true;
+  private generation = 0;
+  private retry = 0;
+  private renewing = false;
+  private readonly frame: (data: unknown, snapshot: boolean) => void;
+  private readonly status: (status: string) => void;
+  private readonly heartbeat?: (serverTime: number) => void;
+  constructor(frame: (data: unknown, snapshot: boolean) => void, status: (status: string) => void,
+              heartbeat?: (serverTime: number) => void) {
+    this.frame = frame; this.status = status; this.heartbeat = heartbeat;
+  }
+
+  start(streamURL: string, renewURL: string) {
+    this.stop(); this.stopped = false;
+    const generation = this.generation;
+    if (streamURL) {
+      this.deadline(Date.now() + 60000, Date.now(), renewURL, generation);
+      this.connect(streamURL, renewURL, generation);
+    }
+    else if (renewURL) void this.renew(renewURL, generation);
+  }
+  stop() {
+    this.stopped = true; this.generation++;
+    this.source?.close(); this.source = undefined;
+    clearTimeout(this.timer); clearTimeout(this.expiryTimer); this.abort?.abort();
+    this.retry = 0; this.renewing = false;
+  }
+  private active(generation: number) { return !this.stopped && generation === this.generation; }
+  private deadline(expires: number, serverTime: number, renewURL: string, generation: number) {
+    if (!finite(expires) || !finite(serverTime)) throw new Error('Invalid grant expiry');
+    const remaining = expires - serverTime;
+    clearTimeout(this.expiryTimer); clearTimeout(this.timer);
+    this.expiryTimer = setTimeout(() => {
+      if (!this.active(generation)) return;
+      this.source?.close(); this.source = undefined; this.status('expired');
+    }, Math.max(0, remaining));
+    if (renewURL && !this.renewing) this.timer = setTimeout(() => void this.renew(renewURL, generation), Math.max(0, remaining - 10000));
+  }
+  private connect(streamURL: string, renewURL: string, generation: number) {
+    const url = new URL(streamURL, location.href);
+    if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) throw new Error('Invalid stream URL');
+    this.source?.close();
+    const source = new EventSource(url.href); // No cross-origin cookies or app credentials.
+    this.source = source;
+    this.status('connecting');
+    source.onopen = () => { if (this.active(generation)) this.status('connected'); };
+    for (const event of ['snapshot', 'delta', 'heartbeat']) source.addEventListener(event, (message: MessageEvent<string>) => {
+      if (!this.active(generation) || this.source !== source) return;
+      try {
+        const f = JSON.parse(message.data) as LiveFrame;
+        if (event !== 'heartbeat') this.frame(f, event === 'snapshot');
+        else this.heartbeat?.(f.server_time);
+        this.deadline(f.expires_at, f.server_time, renewURL, generation);
+        this.status('connected');
+      } catch { this.stop(); this.status('invalid'); }
+    });
+    source.onerror = () => { if (this.active(generation) && this.source === source) this.status('reconnecting'); };
+  }
+  private async renew(renewURL: string, generation: number) {
+    if (!this.active(generation) || this.renewing) return;
+    const url = new URL(renewURL, location.href);
+    if (url.origin !== location.origin || url.username || url.password) { this.stop(); this.status('denied'); return; }
+    this.renewing = true;
+    const controller = new AbortController(); this.abort = controller;
+    const timeout = setTimeout(() => controller.abort(), 8000);
+    try {
+      const response = await fetch(url.href, { credentials: 'same-origin', redirect: 'error', cache: 'no-store', signal: controller.signal, headers: { Accept: 'application/json', 'x-kx-fetch-style': 'raw-json' } });
+      if (!this.active(generation)) return;
+      if ([401,403].includes(response.status)) { this.stop(); this.status('denied'); return; }
+      if (!response.ok) throw new Error('Grant unavailable');
+      const grant = await response.json() as LiveGrant;
+      if (!this.active(generation)) return;
+      if (!finite(grant.expires_at) || !finite(grant.server_time) || grant.expires_at <= grant.server_time || typeof grant.stream_url !== 'string') throw new Error('Invalid grant');
+      this.renewing = false;
+      this.deadline(grant.expires_at, grant.server_time, renewURL, generation);
+      this.connect(grant.stream_url, renewURL, generation); this.retry = 0;
+    } catch {
+      if (this.active(generation)) {
+        if (this.retry >= 4) { this.stop(); this.status('unavailable'); return; }
+        this.status('reconnecting');
+        this.timer = setTimeout(() => void this.renew(renewURL, generation), Math.min(10000, 1000 * 2 ** Math.min(this.retry++, 4)));
+      }
+    } finally { clearTimeout(timeout); if (this.active(generation)) this.renewing = false; }
+  }
+}

package/src/components/cols/cols.scss

@@ -69,6 +69,11 @@
     gap: 0;
   }
 
+  // Without a gap to sit in, the divider goes on the column's own edge.
+  &--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
+    right: 0;
+  }
+
   // The row rule below each child is drawn by a pseudo reaching to -100vw, so border mode has to clip. Clipping
   // every layout would cut the focus ring off any control sitting flush against a column edge.
   &--border {
@@ -146,6 +151,17 @@ $stack-sizes: (sm, smp, ph, md, lg, hd, '3k', '4k');
       .cols--divide ::slotted(*:not(:last-child)):after {
         display: none;
       }
+
+      // Edge-to-edge columns keep their separation as a rule between the stacked rows
+      .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
+        display: block;
+        top: auto;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: auto;
+        height: 1px;
+      }
     }
   }
 }

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

@@ -368,7 +368,8 @@ export default class ZnDataTable extends ZincElement {
         inputs.forEach((input) => {
           const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
           if (allowedInputs.includes(input.tagName.toLowerCase())) {
-            const value = (input as AllowedInputElement).value as string || input.getAttribute('value');
+            const raw = (input as AllowedInputElement).value as string || input.getAttribute('value');
+            const value = typeof raw === 'string' ? raw.trim() : raw;
             const name = (input as AllowedInputElement).name || input.getAttribute('name');
             if (name) {
               params[name] = value;
@@ -836,7 +837,7 @@ export default class ZnDataTable extends ZincElement {
   searchChangeListener = (e: ZnSearchChangeEvent) => {
     const target = e.target as ZnDataTableSearch | null;
     if (target && target.tagName === 'ZN-DATA-TABLE-SEARCH') {
-      this.search = target.value as string;
+      this.search = (target.value as string).trim();
 
       // Get form data and search URI from event detail if available
       if (e.detail) {

package/src/components/data-table-filter/data-table-filter.component.ts

@@ -278,8 +278,8 @@ export default class ZnDataTableFilter extends ZincElement implements ZincFormCo
 
   private emitChange() {
     const data = this._active
-      .filter(item => item.value.length > 0)
-      .map(item => ({key: item.key, comparator: item.comparator, value: item.value}));
+      .filter(item => item.value.trim().length > 0)
+      .map(item => ({key: item.key, comparator: item.comparator, value: item.value.trim()}));
 
     this.value = data.length > 0 ? btoa(JSON.stringify(data)) : '';
     this._formController.updateValidity();

package/src/components/data-table-search/data-table-search.component.ts

@@ -114,7 +114,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
     const collect = (element: Element): void => {
       if (!allowedInputs.includes(element.tagName.toLowerCase())) return;
       const input = element as AllowedInputElement;
-      const value = input.value as string;
+      const value: unknown = typeof input.value === 'string' ? input.value.trim() : input.value;
       const name = input.name || element.getAttribute('name');
       if (name) {
         params[name] = value;
@@ -174,7 +174,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
     const formData = this.getFormData();
     this.emit('zn-search-change', {
       detail: {
-        value: this.value,
+        value: this.value.trim(),
         formData: formData,
         searchUri: this.searchUri
       }

package/src/components/defined-label/defined-label.component.ts

@@ -112,7 +112,7 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
   }
 
   private getFilteredLabels(): PredefinedLabel[] {
-    const filter = this.value.toLowerCase();
+    const filter = this.value.trim().toLowerCase();
     return this.predefinedLabels
       .map(label => typeof label === 'string' ? {name: label} : label)
       .filter((label): label is PredefinedLabel => Boolean(label?.name))

package/src/components/filter-container/filter-container.component.ts

@@ -29,7 +29,7 @@ export default class ZnFilterContainer extends ZincElement {
   private _filterFrame = 0;
 
   public handleSearchChange(event: Event) {
-    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    const searchTerm = (event.target as HTMLInputElement).value.trim().toLowerCase();
     cancelAnimationFrame(this._filterFrame);
     this._filterFrame = requestAnimationFrame(() => this.applyFilter(searchTerm));
   }

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -1,5 +1,6 @@
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {property} from "lit/decorators.js";
+import {trimControlValue} from '../../internal/form';
 import ZincElement from '../../internal/zinc-element';
 
 import type ZnDataSelect from "../data-select";
@@ -51,6 +52,7 @@ export default class ZnFilterWrapper extends ZincElement {
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
       inputs.forEach(input => {
+        trimControlValue(input);
         if (!input.value && input.hasAttribute('omit-empty')) {
           return;
         }

package/src/components/filter-wrapper/filter-wrapper.test.ts

@@ -1,5 +1,9 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import type ZnDataTable from '../data-table';
+import type ZnFilterWrapper from './filter-wrapper.component';
+import type ZnInput from '../input';
 
 describe('<zn-filter-wrapper>', () => {
   it('should render a component', async () => {
@@ -7,4 +11,46 @@ describe('<zn-filter-wrapper>', () => {
 
     expect(el).to.exist;
   });
+
+  it('trims input values on submit', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper>
+          <zn-input name="external_reference" value="  abc  "></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    table.refresh = () => undefined;
+    const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
+    const input = table.querySelector<ZnInput>('zn-input')!;
+    await input.updateComplete;
+
+    wrapper.handleSubmit(new Event('click'));
+
+    expect(table.requestParams).to.deep.equal({external_reference: 'abc'});
+    expect(input.value).to.equal('abc');
+  });
+
+  it('clears displayed whitespace from a focused email input on submit', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email" type="email" style="width: 40px"></zn-input>
+          <zn-input name="clean" type="email" value="a@b.com" style="width: 40px"></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    table.refresh = () => undefined;
+    const [input, clean] = table.querySelectorAll<ZnInput>('zn-input');
+    await input.updateComplete;
+
+    input.focus();
+    await sendKeys({type: '  a@b.com'});
+    expect(input.input.scrollWidth).to.be.greaterThan(clean.input.scrollWidth);
+
+    table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!.handleSubmit(new Event('click'));
+
+    expect(table.requestParams.email).to.equal('a@b.com');
+    expect(input.input.scrollWidth).to.equal(clean.input.scrollWidth);
+  });
 });

package/src/components/icon-picker/icon-picker.component.ts

@@ -264,7 +264,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
 
   private handleSearchInput(e: Event) {
     const input = e.target as HTMLInputElement;
-    this._searchQuery = input.value.toLowerCase();
+    this._searchQuery = input.value.trim().toLowerCase();
     this.filterIcons();
   }
 

package/src/components/input/input.component.ts

@@ -607,6 +607,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
       // If invalid, keep the previous value
     } else {
       this.value = this.input.value;
+      this.syncEmailDisplay();
     }
 
     this.emit('zn-change');
@@ -644,6 +645,13 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  // Email inputs already strip whitespace from .value but keep it on screen
+  private syncEmailDisplay() {
+    if (this.type === 'email') {
+      this.input.value = this.value;
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent) {
     // The slash menu claims its own keys; while it is open Escape closes it and Enter picks an item,
     // rather than blurring the field or submitting the form
@@ -660,6 +668,8 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     // Pressing enter when focused on the input should submit the form like a native input, be we wait a tick before
     // submitting to allow users to cancel the keydown event if they need to
     if (event.key === 'Enter' && !hasModifier) {
+      this.syncEmailDisplay();
+
       // When using a Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way
       // to check for this is to look at event.isComposing, which will be true when the IME is open.
       if (!event.defaultPrevented && !event.isComposing) {

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

@@ -1314,7 +1314,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     clearTimeout(this.linkSearchTimer);
     const token = ++this.linkSearchToken;
     this.linkSearchTimer = setTimeout(() => {
-      const url = `${this.linkUrl}${this.linkUrl.includes('?') ? '&' : '?'}q=${encodeURIComponent(term)}`;
+      const url = `${this.linkUrl}${this.linkUrl.includes('?') ? '&' : '?'}q=${encodeURIComponent(term.trim())}`;
       fetch(url, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`link search failed: ${res.status}`);

package/src/components/select/select.component.ts

@@ -788,7 +788,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this._addOptionActive = false;
 
     this._searchDisplayValue = this.displayInput.value;
-    this._searchQuery = this._searchDisplayValue.toLowerCase();
+    this._searchQuery = this._searchDisplayValue.trim().toLowerCase();
 
     // Open the dropdown when the user starts typing
     if (!this.open) {

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

@@ -1,26 +1,19 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
+import type {IconColor} from '../icon';
 
 import styles from './stat.scss';
 
 /**
- * @summary Short summary of the component's intended use.
+ * @summary Displays a key metric, optionally compared with a previous value.
  * @documentation https://zinc.style/components/stats-tile
  * @status experimental
  * @since 1.0
  *
- * @dependency zn-example
- *
- * @event zn-event-name - Emitted as an example.
- *
- * @slot - The default slot.
- * @slot example - An example slot.
- *
- * @csspart base - The component's base wrapper.
- *
- * @cssproperty --example - An example CSS custom property.
+ * @dependency zn-icon
  */
 export default class ZnStatsTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -34,6 +27,25 @@ export default class ZnStatsTile extends ZincElement {
   @property({type: Boolean, attribute: 'show-delta'}) showDelta = false;
   @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';
+
+  /** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
+  @property({attribute: 'delta-format'}) deltaFormat: 'percent' | 'points' = 'percent';
+
+  /** An icon shown beside the amount. */
+  @property() icon = '';
+
+  /** The icon's color; without one it takes the amount's. */
+  @property({attribute: 'icon-color'}) iconColor: IconColor;
+
+  /** `large` gives the amount more weight, for a summary row of a few headline figures. */
+  @property({reflect: true}) size: 'medium' | 'large' = 'medium';
+
+  /** 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;
+
   calcPercentageDifference() {
     const previous = parseFloat(this.previous);
     const amount = parseFloat(this.amount);
@@ -93,16 +105,73 @@ export default class ZnStatsTile extends ZincElement {
         diffIcon = '-';
       }
 
+      if (this.deltaFormat === 'points') {
+        return html`<p class="diff">${this.pointsDelta()} on Previous Period</p>`;
+      }
+
       return html`<p class="diff"><span class="${diffClass}">${diffIcon}${diff}%</span> on Previous Period</p>`;
     }
 
     return null;
   }
 
+  private pointsDelta() {
+    const diff = Math.round((parseFloat(this.amount) - parseFloat(this.previous)) * 10) / 10;
+    if (diff > 0) {
+      return html`<span class="positive">+${diff} pts</span>`;
+    }
+    if (diff < 0) {
+      return html`<span class="negative">-${Math.abs(diff)} pts</span>`;
+    }
+    return html`<span class="neutral">No change</span>`;
+  }
+
+  private renderAmount() {
+    return html`${this.getDisplayAmount()}${this.icon ? html`
+      <zn-icon class="icon" src="${this.icon}" size="20" color="${ifDefined(this.iconColor)}"></zn-icon>` : null}`;
+  }
+
+  private renderValueFirst() {
+    const delta = this.showDelta
+      ? (this.deltaFormat === 'points' ? this.pointsDelta() : this.percentDelta())
+      : null;
+
+    return html`
+      <div class="${classMap({
+        'stat-tile': true,
+        'stat-tile--value-first': true,
+        'stat-tile--large': this.size === 'large',
+        'stat-tile--padded': this.padded,
+        [`stat-tile--${this.color}`]: true
+      })}">
+        <h3 class="caption">${this.caption}</h3>
+        <p class="amount">${this.renderAmount()}${delta ? html`<span class="diff">${delta}</span>` : null}</p>
+        ${this.description ? html`<p class="description">${this.description}</p>` : null}
+      </div>
+    `;
+  }
+
+  private percentDelta() {
+    const diff = this.calcPercentageDifference();
+    if (diff > 0) {
+      return html`<span class="positive">+${diff}%</span>`;
+    }
+    if (diff < 0) {
+      return html`<span class="negative">${diff}%</span>`;
+    }
+    return html`<span class="neutral">No change</span>`;
+  }
+
   render() {
+    if (this.layout === 'value-first') {
+      return this.renderValueFirst();
+    }
+
     return html`
       <div class="${classMap({
         'stat-tile': true,
+        'stat-tile--large': this.size === 'large',
+        'stat-tile--padded': this.padded,
         [`stat-tile--${this.color}`]: true
       })}">
         <div class="container">
@@ -111,7 +180,7 @@ export default class ZnStatsTile extends ZincElement {
               <h3 class="caption">${this.caption}</h3>
               <p class="description">${this.description}</p>
             </div>
-            <p class="amount">${this.getDisplayAmount()}</p>
+            <p class="amount">${this.renderAmount()}</p>
             <p class="bottom">${this.diffText()}</p>
           </div>
         </div>

package/src/components/stat/stat.scss

@@ -5,6 +5,11 @@
   display: contents;
 }
 
+// A box of its own lets zn-cols draw its dividers between value-first stats.
+:host([layout="value-first"]) {
+  display: block;
+}
+
 .stat-tile {
 
   .caption, .description, .amount, .bottom {
@@ -68,6 +73,55 @@
     }
   }
 
+  .icon {
+    margin-left: var(--zn-spacing-x-small);
+  }
+
+  &--value-first {
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-2x-small);
+    color: var(--zn-text-chart-major-color);
+
+    .caption {
+      margin-bottom: 0;
+    }
+
+    .amount {
+      flex-grow: 0;
+      gap: var(--zn-spacing-x-small);
+      color: inherit;
+    }
+
+    .diff {
+      font-size: var(--zn-font-size-small);
+      font-weight: 400;
+    }
+
+    .diff .neutral,
+    .description {
+      color: rgba(var(--zn-color-text), 0.6);
+    }
+
+    .description {
+      font-size: var(--zn-font-size-x-small);
+    }
+
+    .icon {
+      margin-left: 0;
+    }
+  }
+
+  &--padded {
+    padding: var(--zn-spacing-large);
+  }
+
+  &--large .amount {
+    font-size: var(--zn-font-size-3x-large);
+    font-weight: var(--zn-font-weight-semibold);
+    line-height: 1.15;
+  }
+
   &--chart {
     .amount {
       padding-top: var(--zn-spacing-small);
@@ -102,6 +156,10 @@
     color: rgb(var(--zn-text));
   }
 
+  &--value-first.stat-tile--neutral {
+    color: var(--zn-text-chart-major-color);
+  }
+
   @container (max-width:550px) {
     ::slotted(.zn-col-1) {
       flex-basis: 170px;
@@ -112,5 +170,11 @@
       line-height: 20px;
       padding-top: 5px;
     }
+
+    &--large .amount {
+      font-size: var(--zn-font-size-2x-large);
+      line-height: 1.15;
+      padding-top: 0;
+    }
   }
 }

package/src/components/tile/tile.component.ts

@@ -53,6 +53,9 @@ export default class ZnTile extends ZincElement {
   /** Renders the caption in the normal table-content weight instead of bold. */
   @property({type: Boolean}) plain: boolean;
 
+  /** Moves the actions under the caption and description when the tile is narrower than 600px. */
+  @property({attribute: 'stack-actions', type: Boolean, reflect: true}) stackActions: boolean;
+
   /** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
   @property({type: Boolean, reflect: true}) grouped: boolean;