@kubex/zinc 1.1.185 → 2.0.1

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

@@ -77,12 +77,21 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
   /** Squares off the corners of every contained radio in the group, which are rounded by default. */
   @property({type: Boolean, reflect: true}) square = false;
 
+  /** Centres the text of every contained radio in the group. */
+  @property({type: Boolean, reflect: true}) centered = false;
+
   /**
    * Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
    * `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
    */
   @property({type: Boolean, reflect: true}) wrap = false;
 
+  /**
+   * Lays the radios out as a segmented scale, in document order, filling every segment up to the checked one. Suits
+   * ordered answers such as 1 to 10, and unlike a range input it has no value until one is picked.
+   */
+  @property({type: Boolean, reflect: true}) scale = false;
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
@@ -151,14 +160,23 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Enter'].includes(event.key)) {
+      return;
+    }
+
+    // Keys typed into controls inside a radio's selected content belong to those controls
+    if (event.composedPath().some(el => el instanceof HTMLElement && el.slot === 'selected-content')) {
       return;
     }
 
     const radios = this.getAllRadios().filter(radio => !radio.disabled);
     const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];
-    const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
-    let index = radios.indexOf(checkedRadio) + incr;
+    const isSelectKey = event.key === ' ' || event.key === 'Enter';
+    // Each radio is its own tab stop, so Space/Enter select the focused radio rather than the checked one.
+    const focusedRadio = (event.target as HTMLElement).closest<ZnRadio>('zn-radio');
+    const fromRadio = isSelectKey && focusedRadio && radios.includes(focusedRadio) ? focusedRadio : checkedRadio;
+    const incr = isSelectKey ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;
+    let index = radios.indexOf(fromRadio) + incr;
 
     if (index < 0) {
       index = radios.length - 1;
@@ -172,10 +190,14 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
       radio.checked = false;
     });
 
+    const oldValue = this.value;
     this.value = radios[index].value;
     radios[index].checked = true;
-    radios[index].shadowRoot!.querySelector('button')!.focus();
+    radios[index].focus();
 
+    if (this.value !== oldValue) {
+      this.emit('zn-change');
+    }
 
     event.preventDefault();
   }
@@ -204,12 +226,22 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
         if (this.square) {
           radio.square = true;
         }
+
+        if (this.centered) {
+          radio.centered = true;
+        }
       })
     );
+    this.syncScale();
+  }
 
-    if (radios.length > 0 && !radios.some(radio => radio.checked)) {
-      radios[0].setAttribute('tabindex', '0');
-    }
+  private syncScale() {
+    const radios = this.getAllRadios();
+    const checkedIndex = radios.findIndex(radio => radio.value === this.value);
+    radios.forEach((radio, index) => {
+      radio.scale = this.scale;
+      radio.filled = this.scale && checkedIndex >= 0 && index <= checkedIndex;
+    });
   }
 
   private syncRadios() {
@@ -228,6 +260,7 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
   private updateCheckedRadio() {
     const radios = this.getAllRadios();
     radios.forEach(radio => (radio.checked = radio.value === this.value));
+    this.syncScale();
     this.formControlController.setValidity(this.validity?.valid);
   }
 
@@ -236,6 +269,11 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
     this.syncRadios();
   }
 
+  @watch('scale', {waitUntilFirstUpdate: true})
+  handleScaleChange() {
+    this.syncRadios();
+  }
+
   @watch('value')
   handleValueChange() {
     if (this.hasUpdated) {

package/src/components/radio-group/radio-group.scss

@@ -54,6 +54,23 @@
   height: auto;
 }
 
+/* A scale is one row of equal segments, however many radios it has. */
+:host([scale]) .form-control-input {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  // Wider than the checked segment's ring and its offset, so the ring never touches a neighbour.
+  gap: var(--zn-spacing-x-small);
+}
+
+:host([scale]) .form-control--has-label .form-control-input {
+  margin-top: var(--zn-spacing-small);
+}
+
+:host([scale]) ::slotted(zn-radio) {
+  margin-top: 0;
+}
+
 .form-control {
   position: relative;
   border: none;

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

@@ -8,9 +8,9 @@ describe('<zn-radio-group>', () => {
     expect(el).to.exist;
   });
 
-  it('propagates contained and square to its radios', async () => {
+  it('propagates contained, square and centered to its radios', async () => {
     const el = await fixture<HTMLElement>(html`
-      <zn-radio-group contained square>
+      <zn-radio-group contained square centered>
         <zn-radio value="one">One</zn-radio>
         <zn-radio value="two">Two</zn-radio>
       </zn-radio-group>
@@ -20,6 +20,67 @@ describe('<zn-radio-group>', () => {
     el.querySelectorAll('zn-radio').forEach(child => {
       expect(child).to.have.attribute('contained');
       expect(child).to.have.attribute('square');
+      expect(child).to.have.attribute('centered');
     });
   });
+
+  it('selects the next radio and emits zn-change on arrow key', async () => {
+    const el = await fixture<HTMLElement & { value: string }>(html`
+      <zn-radio-group value="one">
+        <zn-radio value="one">One</zn-radio>
+        <zn-radio value="two">Two</zn-radio>
+      </zn-radio-group>
+    `);
+    const radios = el.querySelectorAll<HTMLElement & { checked: boolean }>('zn-radio');
+    let changes = 0;
+    el.addEventListener('zn-change', () => changes++);
+
+    radios[0].dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, composed: true}));
+
+    expect(el.value).to.equal('two');
+    expect(radios[1].checked).to.be.true;
+    expect(changes).to.equal(1);
+  });
+
+  it('selects the focused radio on Enter', async () => {
+    const el = await fixture<HTMLElement & { value: string }>(html`
+      <zn-radio-group value="one">
+        <zn-radio value="one">One</zn-radio>
+        <zn-radio value="two">Two</zn-radio>
+        <zn-radio value="three">Three</zn-radio>
+      </zn-radio-group>
+    `);
+    const radios = el.querySelectorAll<HTMLElement & { checked: boolean }>('zn-radio');
+    let changes = 0;
+    el.addEventListener('zn-change', () => changes++);
+
+    radios[2].dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, composed: true}));
+
+    expect(el.value).to.equal('three');
+    expect(radios[2].checked).to.be.true;
+    expect(changes).to.equal(1);
+  });
+
+  it('fills a scale up to the checked radio and leaves it unanswered until one is picked', async () => {
+    const el = await fixture<HTMLElement & { value: string }>(html`
+      <zn-radio-group scale>
+        <zn-radio value="1">1</zn-radio>
+        <zn-radio value="2">2</zn-radio>
+        <zn-radio value="3">3</zn-radio>
+      </zn-radio-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    const radios = [...el.querySelectorAll<HTMLElement & { filled: boolean }>('zn-radio')];
+
+    expect(el.value).to.equal('');
+    radios.forEach(radio => {
+      expect(radio).to.have.attribute('scale');
+      expect(radio.filled).to.be.false;
+    });
+
+    el.value = '2';
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    expect(radios.map(radio => radio.filled)).to.deep.equal([true, true, false]);
+  });
 });

package/src/components/rating/rating.component.ts

@@ -154,6 +154,27 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
   }
 
 
+  private _handleKeyDown(event: KeyboardEvent) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    const step = {ArrowRight: 1, ArrowUp: 1, ArrowLeft: -1, ArrowDown: -1}[event.key];
+    let value: number;
+    if (event.key === 'Home') {
+      value = 0;
+    } else if (event.key === 'End') {
+      value = this.max;
+    } else if (step !== undefined) {
+      value = Math.min(Math.max(this.value + step * this.precision, 0), this.max);
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    this.value = value;
+  }
+
   private _handleClick(event: MouseEvent) {
     if (this.readonly || this.disabled) {
       return;
@@ -231,6 +252,8 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
           aria-valuenow="${this.value}"
           aria-valuemin="0"
           aria-valuemax="${this.max}"
+          tabindex="${this.disabled ? '-1' : '0'}"
+          @keydown="${this._handleKeyDown}"
         >
           <span
             class="rating__symbols"

package/src/components/rating/rating.scss

@@ -23,7 +23,7 @@
   }
 
   &:focus-visible {
-    outline: rgb(var(--zn-primary));
+    outline: var(--zn-focus-ring);
     outline-offset: 2px;
   }
 

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

@@ -4,6 +4,7 @@ import {continueList, indentList, isEmptyListItem} from './list-continuation';
 import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {pastedRemarkd} from './paste';
 import {property, query, state} from 'lit/decorators.js';
 import {parse as remarkdParse} from "remarkd-js";
@@ -652,7 +653,11 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   }
 
-  private handleRenderedClick(e: MouseEvent, index: number) {
+  private get editable() {
+    return !this.disabled && !this.readonly;
+  }
+
+  private handleRenderedClick(e: Event, index: number) {
     const checkbox = (e.target as HTMLElement).closest<HTMLInputElement>('input[type="checkbox"]');
     if (checkbox) {
       // Toggle the task in the source rather than opening the editor.
@@ -791,7 +796,9 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   private handleImageControlsKeydown = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       e.preventDefault();
+      const index = this.editingIndex;
       this.closeImageEdit();
+      if (index !== null) void this.focusRenderedBlock(index);
     } else if (e.key === 'Enter' && (e.target as HTMLElement).tagName === 'INPUT') {
       e.preventDefault();
       this.saveImageEdit();
@@ -992,13 +999,40 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       this.insertDraftBlock(next);
     } else if (e.key === 'Escape' || (e.key === 'Enter' && (e.metaKey || e.ctrlKey))) {
       e.preventDefault();
-      input.blur();
+      this.suppressBlurCommit = true;
+      const index = this.editingIndex ?? 0;
+      this.commitEdit();
+      void this.focusRenderedBlock(index);
     } else if (e.key === 'Backspace' && input.value === '') {
       e.preventDefault();
-      input.blur();
+      this.suppressBlurCommit = true;
+      const index = this.editingIndex ?? 0;
+      this.commitEdit();
+      void this.focusRenderedBlock(index - 1);
     }
   };
 
+  /** Focuses the rendered block at `index`, clamped to the blocks there are; the add row when there are none. */
+  private async focusRenderedBlock(index: number) {
+    await this.updateComplete;
+    this.suppressBlurCommit = false;
+    const blocks = this.shadowRoot?.querySelectorAll('.remarkd-editor__block') ?? [];
+    const block = blocks[Math.max(0, Math.min(index, blocks.length - 1))];
+    const target = block?.querySelector<HTMLElement>(':scope > .remarkd-editor__rendered')
+      ?? this.shadowRoot?.querySelector<HTMLElement>('.remarkd-editor__add');
+    target?.focus({preventScroll: true});
+    this.reveal(target);
+  }
+
+  private moveBlock(from: number, to: number) {
+    if (!this.editable || to < 0 || to >= this.blocks.length) return;
+    const blocks = [...this.blocks];
+    const [moved] = blocks.splice(from, 1);
+    blocks.splice(to, 0, moved);
+    this.updateBlocks(blocks);
+    void this.focusRenderedBlock(to);
+  }
+
   /**
    * The draft to commit when Enter should finish the block — pressed on a trailing blank line or
    * empty list item, outside any container — with that line dropped. Null otherwise.
@@ -1865,7 +1899,19 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                // its own inner body div carries the marker instead, see renderConditional.
                'remarkd-editor__rendered--parsed': !include && !conditional && !meta,
              })}
-             @click=${(e: MouseEvent) => this.handleRenderedClick(e, index)}>${
+             tabindex=${ifDefined(this.editable ? '0' : undefined)}
+             @click=${(e: MouseEvent) => this.handleRenderedClick(e, index)}
+             @keydown=${(e: KeyboardEvent) => {
+               // Links and task checkboxes inside the block keep their own keys
+               if (e.target !== e.currentTarget) return;
+               if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+                 e.preventDefault();
+                 this.moveBlock(index, index + (e.key === 'ArrowUp' ? -1 : 1));
+               } else if (e.key === 'Enter') {
+                 e.preventDefault();
+                 this.handleRenderedClick(e, index);
+               }
+             }}>${
           include ? this.renderIncludeChip(include)
             : conditional ? conditional
               : meta ? this.renderMetaChips(meta)
@@ -2012,7 +2058,16 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
         })}>
           ${this.rawMode ? this.renderRaw() : html`
             ${this.renderBody()}
-            <div class="remarkd-editor__add" @click=${() => this.insertDraftBlock(this.blocks.length)}>
+            <div class="remarkd-editor__add"
+                 role=${ifDefined(this.editable ? 'button' : undefined)}
+                 tabindex=${ifDefined(this.editable ? '0' : undefined)}
+                 aria-label=${ifDefined(this.editable ? 'Add block' : undefined)}
+                 @click=${() => this.insertDraftBlock(this.blocks.length)}
+                 @keydown=${(e: KeyboardEvent) => {
+                   if (e.key !== 'Enter' && e.key !== ' ') return;
+                   e.preventDefault();
+                   this.insertDraftBlock(this.blocks.length);
+                 }}>
               ${this.blocks.length === 0 && this.editingIndex === null ? this.placeholder : ''}
             </div>`}
         </div>

package/src/components/remarkd-editor/remarkd-editor.scss

@@ -187,6 +187,14 @@
   }
 }
 
+.remarkd-editor__rendered,
+.remarkd-editor__add {
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius);
+  }
+}
+
 // The shell keeps the block's rendered chrome while its source is edited —
 // remarkd hint classes (hint-note, hint-tip, …) apply their own styling here.
 .remarkd-editor__edit-shell {
@@ -248,10 +256,10 @@
 }
 
 .remarkd-editor__edit-shell--code {
-  background: var(--rmd-code-bg, #0f1626);
+  background: var(--rmd-code-bg, var(--zn-code-background, #0f1626));
 
   .remarkd-editor__input {
-    color: var(--rmd-code-text, #f5f8ff);
+    color: var(--rmd-code-text, var(--zn-code-color, #f5f8ff));
   }
 }
 
@@ -299,7 +307,7 @@
   align-items: center;
   gap: 4px;
   margin-bottom: var(--zn-spacing-x-small);
-  color: rgb(var(--zn-primary));
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -328,7 +336,7 @@
   padding: 0 2px;
   border-radius: 3px;
   background: rgba(var(--zn-primary), 0.12);
-  color: rgb(var(--zn-primary));
+  color: var(--zn-color-primary-fg, rgb(var(--zn-primary)));
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 

package/src/components/report-table/index.ts

@@ -0,0 +1,12 @@
+import ZnReportTable from './report-table.component';
+
+export * from './report-table.component';
+export default ZnReportTable;
+
+ZnReportTable.define('zn-report-table');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-report-table': ZnReportTable;
+  }
+}

package/src/components/report-table/report-format.test.ts

@@ -0,0 +1,86 @@
+import {expect} from '@open-wc/testing';
+import {formatValue, toneClass, unitLabel} from './report-format';
+import type {ReportColumn} from './report-math';
+
+const col = (c: Partial<ReportColumn>): ReportColumn => ({key: 'k', label: 'K', ...c});
+const opts = {currency: 'USD', locale: 'en-US'};
+
+describe('formatValue', () => {
+  it('formats currency with bracketed negatives', () => {
+    const c = col({format: 'currency'});
+    expect(formatValue(c, -1396.73, opts)).to.equal('($1,396.73)');
+    expect(formatValue(c, 3000.39, opts)).to.equal('$3,000.39');
+    expect(formatValue(c, -0.0001, opts)).to.equal('$0.00');
+  });
+
+  it('shows the narrow currency symbol in any locale', () => {
+    const c = col({format: 'currency'});
+    expect(formatValue(c, 3000.39, {currency: 'USD', locale: 'en-GB'})).to.equal('$3,000.39');
+    expect(formatValue(c, -1396.73, {currency: 'USD', locale: 'en-GB'})).to.equal('($1,396.73)');
+  });
+
+  it('formats financial in decimal style', () => {
+    expect(formatValue(col({format: 'financial'}), -1396.73, opts)).to.equal('(1,396.73)');
+  });
+
+  it('formats numbers with a leading minus', () => {
+    expect(formatValue(col({format: 'number'}), -32128, opts)).to.equal('-32,128');
+    expect(formatValue(col({format: 'number'}), -0.2, opts)).to.equal('0');
+  });
+
+  it('formats durations in seconds as hours, minutes and seconds', () => {
+    expect(formatValue(col({format: 'duration'}), 5400, opts)).to.equal('01:30:00');
+    expect(formatValue(col({format: 'duration'}), 59, opts)).to.equal('00:00:59');
+    expect(formatValue(col({format: 'duration'}), 453906, opts)).to.equal('126:05:06');
+    expect(formatValue(col({format: 'duration'}), -3600, opts)).to.equal('-01:00:00');
+  });
+
+  it('labels the unit of durations, currency and percent', () => {
+    expect(unitLabel(col({format: 'duration'}), 'USD')).to.equal('hh:mm:ss');
+    expect(unitLabel(col({format: 'currency'}), 'USD')).to.equal('USD');
+    expect(unitLabel(col({format: 'currency', currency: 'GBP'}), 'USD')).to.equal('GBP');
+    expect(unitLabel(col({format: 'percent'}), 'USD')).to.equal('%');
+    expect(unitLabel(col({format: 'number'}), 'USD')).to.equal('');
+  });
+
+  it('formats percent', () => {
+    expect(formatValue(col({format: 'percent', decimals: 2}), -0.0157, opts)).to.equal('-1.57%');
+  });
+
+  it('defaults to number format with 0 decimals', () => {
+    expect(formatValue(col({}), 1234.5, opts)).to.equal('1,235');
+  });
+
+  it('shows no sign on rounded zeros for financial and percent', () => {
+    expect(formatValue(col({format: 'financial'}), -0.0001, opts)).to.equal('0.00');
+    expect(formatValue(col({format: 'percent'}), -0.00001, opts)).to.equal('0.00%');
+  });
+
+  it('honours the column currency override', () => {
+    expect(formatValue(col({format: 'currency', currency: 'EUR'}), 5, opts)).to.contain('€');
+  });
+
+  it('handles null and text', () => {
+    expect(formatValue(col({format: 'number'}), null, opts)).to.equal('–');
+    expect(formatValue(col({format: 'text'}), 'abc', opts)).to.equal('abc');
+  });
+});
+
+describe('toneClass', () => {
+  it('colours breakeven columns', () => {
+    expect(toneClass(col({style: 'breakeven'}), 5)).to.equal('report__pos');
+    expect(toneClass(col({style: 'breakeven'}), -5)).to.equal('report__neg');
+    expect(toneClass(col({style: 'ibreakeven'}), 5)).to.equal('report__neg');
+    expect(toneClass(col({style: 'none'}), -5)).to.equal('');
+  });
+
+  it('scales percent values to display units', () => {
+    const c = col({style: 'breakeven', format: 'percent'});
+    expect(toneClass(c, 0.004)).to.equal('report__pos');
+    expect(toneClass(c, -0.00004)).to.equal('');
+  });
+
+  it('ignores values that round to the threshold', () => {
+    expect(toneClass(col({style: 'breakeven', format: 'currency'}), -0.0001)).to.equal('');
+  });
+});

package/src/components/report-table/report-format.ts

@@ -0,0 +1,72 @@
+import type {ReportColumn} from './report-math';
+
+export function displayDecimals(column: ReportColumn): number {
+  return column.decimals ?? ((column.format ?? 'number') === 'number' ? 0 : 2);
+}
+
+function round(value: number, decimals: number): number {
+  const rounded = Number(value.toFixed(decimals));
+  return rounded === 0 ? 0 : rounded;
+}
+
+export function formatValue(column: ReportColumn, value: number | string | null, opts: {currency: string; locale?: string}): string {
+  if (value === null || value === undefined) {
+    return '–';
+  }
+  const format = column.format ?? 'number';
+  if (format === 'text' || typeof value === 'string') {
+    return String(value);
+  }
+
+  if (format === 'duration') {
+    const seconds = Math.round(Math.abs(value));
+    const pad = (part: number) => String(part).padStart(2, '0');
+    const text = `${pad(Math.floor(seconds / 3600))}:${pad(Math.floor(seconds / 60) % 60)}:${pad(seconds % 60)}`;
+    return value < 0 && seconds > 0 ? `-${text}` : text;
+  }
+
+  const decimals = displayDecimals(column);
+  const scaled = format === 'percent' ? value * 100 : value;
+  const rounded = round(scaled, decimals);
+  const digits = {minimumFractionDigits: decimals, maximumFractionDigits: decimals};
+  const abs = Math.abs(rounded);
+
+  if (format === 'currency' || format === 'financial') {
+    const style = format === 'currency'
+      ? {style: 'currency' as const, currency: column.currency ?? opts.currency, currencyDisplay: 'narrowSymbol' as const}
+      : {style: 'decimal' as const};
+    const text = new Intl.NumberFormat(opts.locale, {...style, ...digits}).format(abs);
+    return rounded < 0 ? `(${text})` : text;
+  }
+
+  const text = new Intl.NumberFormat(opts.locale, {style: 'decimal', ...digits}).format(abs);
+  const signed = rounded < 0 ? `-${text}` : text;
+  return format === 'percent' ? `${signed}%` : signed;
+}
+
+export function unitLabel(column: ReportColumn, currency: string): string {
+  switch (column.format) {
+    case 'duration':
+      return 'hh:mm:ss';
+    case 'currency':
+      return column.currency ?? currency;
+    case 'percent':
+      return '%';
+    default:
+      return '';
+  }
+}
+
+export function toneClass(column: ReportColumn, value: number | null): 'report__pos' | 'report__neg' | '' {
+  if ((column.style !== 'breakeven' && column.style !== 'ibreakeven') || value === null || value === undefined) {
+    return '';
+  }
+  const decimals = displayDecimals(column);
+  const scale = column.format === 'percent' ? 100 : 1;
+  const diff = round(value * scale, decimals) - round((column.threshold ?? 0) * scale, decimals);
+  if (round(diff, decimals) === 0) {
+    return '';
+  }
+  const positive = diff > 0;
+  return positive === (column.style === 'breakeven') ? 'report__pos' : 'report__neg';
+}

package/src/components/report-table/report-math.test.ts

@@ -0,0 +1,74 @@
+import {aggregate, columnValue, compileFormula, computeTotals} from './report-math';
+import {expect} from '@open-wc/testing';
+import type { ReportColumn, ReportRow, ReportValues} from './report-math';
+
+describe('report-math', () => {
+  it('evaluates arithmetic with precedence, parentheses, unary minus and a leading =', () => {
+    expect(compileFormula('1 + 2 * 3')({})).to.equal(7);
+    expect(compileFormula('(1 + 2) * 3')({})).to.equal(9);
+    expect(compileFormula('-{a} + 4')({a: 1})).to.equal(3);
+    expect(compileFormula('=10 / 4')({})).to.equal(2.5);
+  });
+
+  it('resolves placeholders to 0 when missing, zero-divided or non-numeric, and parses numeric strings', () => {
+    expect(compileFormula('{a} / {b}')({a: 5, b: 0})).to.equal(0);
+    expect(compileFormula('{x.y.z}')({})).to.equal(0);
+    expect(compileFormula('{a}')({a: '12.5'})).to.equal(12.5);
+  });
+
+  it('evaluates min and max with any number of arguments', () => {
+    expect(compileFormula('max(0, {a} - {b})')({a: 1, b: 5})).to.equal(0);
+    expect(compileFormula('min(1, {a} / {b})')({a: 9, b: 3})).to.equal(1);
+    expect(compileFormula('MAX(1, 2, 3)')({})).to.equal(3);
+  });
+
+  it('throws SyntaxError on bad syntax', () => {
+    expect(() => compileFormula('1 +')).to.throw(SyntaxError);
+    expect(() => compileFormula('{a')).to.throw(SyntaxError);
+    expect(() => compileFormula('sum(1, 2)')).to.throw(SyntaxError);
+    expect(() => compileFormula('max 1')).to.throw(SyntaxError);
+  });
+
+  it('shows 0 for an invalid formula and warns once', () => {
+    const original = console.warn;
+    const warnings: unknown[] = [];
+    console.warn = (...args: unknown[]) => warnings.push(args);
+    try {
+      const column: ReportColumn = {key: 'x', label: 'X', formula: '{a} * (2'};
+      expect(columnValue(column, {a: 3})).to.equal(0);
+      expect(columnValue(column, {a: 4})).to.equal(0);
+      expect(warnings).to.have.length(1);
+      expect(() => compileFormula('{a} * (2')).to.throw(SyntaxError);
+    } finally {
+      console.warn = original;
+    }
+  });
+
+  it('aggregates numeric leaves by path and skips non-numeric strings', () => {
+    expect(aggregate([
+      {d1: {i: {unique: 2}}, label: 'x'},
+      {d1: {i: {unique: 3}}, d2: {total: {revenue: '1.5'}}},
+    ])).to.deep.equal({d1: {i: {unique: 5}}, d2: {total: {revenue: 1.5}}});
+  });
+
+  it('ignores prototype-polluting keys when aggregating', () => {
+    aggregate([JSON.parse('{"__proto__": {"polluted": 1}}') as ReportValues]);
+    expect(({} as Record<string, unknown>).polluted).to.be.undefined;
+  });
+
+  it('recalculates ratio totals from summed inputs', () => {
+    const columns: ReportColumn[] = [{key: 'r', label: 'R', format: 'percent', formula: '{a} / {b}'}];
+    const rows: ReportRow[] = [{a: 1, b: 10}, {a: 9, b: 10}, {a: 0, b: 80}].map((values, i) => ({id: `${i}`, label: `${i}`, values}));
+    expect(computeTotals(columns, rows).r).to.equal(0.1);
+  });
+
+  it('returns null totals for non-summable and text columns', () => {
+    const columns: ReportColumn[] = [
+      {key: 'a', label: 'A', summable: false},
+      {key: 'b', label: 'B', format: 'text'},
+    ];
+    const totals = computeTotals(columns, [{id: '1', label: '1', values: {a: 1, b: 2}}]);
+    expect(totals.a).to.be.null;
+    expect(totals.b).to.be.null;
+  });
+});