@jungherz-de/notionkit-elements 1.15.0 → 1.17.0

package/dist/components/nk-menu.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import { p as placeUnder } from './shared/floating-DOK73b_D.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
@@ -20,7 +20,7 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // close it too, a switch row does not. Opened from the keyboard, focus moves
 // to the first item; closing returns it to where it was.
 const floatSheet = new CSSStyleSheet();
-floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; }`);
+floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; top: 0; left: 0; z-index: 106; pointer-events: none; }`);
 
 class NkMenu extends NkElement {
   static get hostStyles() { return floatSheet; }

package/dist/components/nk-modal.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-modal id="settings">
@@ -23,7 +23,7 @@ class NkModal extends NkElement {
     this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
     this._backdrop.inert = true;
     this._box = this.createElement('div', ['nk-modal'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
-    this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': 'Settings' });
+    this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': this.str('settings') });
     this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
     this._rows = document.createElement('div');
     this._nav.appendChild(this._rows);
@@ -141,6 +141,8 @@ class NkModal extends NkElement {
     if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
   }
 
+  onStringsChanged() { this._nav.setAttribute('aria-label', this.str('settings')); }
+
   onAttributeChanged(name) {
     if (name === 'open') {
       this._syncOpen();

package/dist/components/nk-page-title.js

@@ -24,7 +24,7 @@ class NkPageTitle extends NkElement {
       this._h1.setAttribute('contenteditable', 'plaintext-only');
       this._h1.setAttribute('spellcheck', 'false');
       this._h1.setAttribute('role', 'textbox');
-      this._h1.setAttribute('aria-label', 'Title');
+      this._h1.setAttribute('aria-label', this.str('title'));
       const text = this.getAttribute('value') ?? this.textContent.trim();
       if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
       this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
@@ -59,6 +59,7 @@ class NkPageTitle extends NkElement {
   }
 
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { if (this._h1.hasAttribute('role')) this._h1.setAttribute('aria-label', this.str('title')); }
 
   get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
   set value(v) { this.setAttribute('value', v); }

package/dist/components/nk-page.js

@@ -20,7 +20,7 @@ class NkPage extends NkElement {
 
   render() {
     this._page = this.createElement('div', ['nk-page']);
-    this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
+    this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: this.str('changeIcon') });
     this._iconSlot = this.createElement('slot', [], { name: 'icon' });
     this._iconSlot.appendChild(this._icon);
     this._page.appendChild(this._iconSlot);
@@ -76,6 +76,8 @@ class NkPage extends NkElement {
     this._iconSlot?.removeEventListener('slotchange', this._onCover);
   }
 
+  onStringsChanged() { this._icon.title = this.str('changeIcon'); }
+
   onAttributeChanged(name) {
     if (name === 'narrow') this._build();
     else this._sync();

package/dist/components/nk-panel.js

@@ -43,7 +43,10 @@ class NkPanel extends NkElement {
     const href = this.getAttribute('href');
     if (href) { this._box.setAttribute('href', href); this._box.target = this.getAttribute('target') || ''; }
     const cover = this.getAttribute('cover');
-    this._cover.style.display = cover === null ? 'none' : '';
+    // The band is in the tree only with `cover`: hidden, it still matched
+    // `.nk-cover + .nk-page-icon` and pulled a lone icon over the tile's edge.
+    if (cover === null) this._cover.remove();
+    else if (!this._cover.isConnected) this._box.prepend(this._cover);
     if (cover) { this._img.src = cover; if (!this._img.isConnected) this._cover.appendChild(this._img); }
     else this._img.remove();
     const icon = this.getAttribute('icon');

package/dist/components/nk-peek.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-peek id="peek" label="Database Table-View">
@@ -27,7 +27,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // Notion: from `min` (380) to `max` (all but 320px of the window). The width
 // is the token --nk-peek-width, set on :root; `width` (px) sets it too, and
 // nk-resize { width } fires when a drag or a key ends – the moment to keep
-// it. resize-label names the edge (default "Resize").
+// it. resize-label names the edge (default "Resize", in German "Breite
+// ändern").
 // `inset`: while it is open on the desktop, the page's <nk-app> gets
 // `peek-inset` – its main column makes room instead of lying under the peek.
 const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
@@ -74,7 +75,7 @@ class NkPeek extends NkElement {
 
   _syncResize() {
     this._handle.hidden = !this.getBoolAttr('resizable');
-    this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || 'Resize');
+    this._handle.setAttribute('aria-label', this.getAttribute('resize-label') || this.str('resize'));
     this._handle.setAttribute('aria-valuemin', this._min);
     this._handle.setAttribute('aria-valuenow', Math.round(this.width));
   }
@@ -91,7 +92,7 @@ class NkPeek extends NkElement {
   _syncLabels() {
     const label = this.getAttribute('label');
     if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
-    this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
+    this._close.setAttribute('aria-label', this.getAttribute('close-label') || this.str('close'));
   }
 
   _syncOpen() {
@@ -176,6 +177,8 @@ class NkPeek extends NkElement {
     this._wasOpen = false;
   }
 
+  onStringsChanged() { this._syncResize(); this._syncLabels(); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'width') { this._setWidth(Number(value)); return; }
     if (name === 'inset') { this._syncInset(); return; }

package/dist/components/nk-select.js

@@ -9,8 +9,10 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // The light-DOM <option>s are copied into the shadow <select>. A
 // MutationObserver keeps the copy in step when a framework swaps them; the
 // empty string is a valid value; the live selection survives a rebuild. A
-// value set before its option exists – a framework sets properties before
-// children – waits and is applied once the option arrives.
+// value – attribute or property – whose option is not there yet waits and
+// wins over the browser's preselection once the option arrives, unless
+// someone has chosen another option in the meantime; settling on it fires
+// no nk-change.
 class NkSelect extends NkFormElement {
   static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
@@ -20,6 +22,7 @@ class NkSelect extends NkFormElement {
     this._forwardAll();
     this._wrapper.appendChild(this._select);
     this._defaultValue = this.getAttribute('value');
+    this._pending = this._defaultValue;
     // Children may not be parsed yet when connectedCallback runs.
     this.projectLightDom();
     requestAnimationFrame(() => this.projectLightDom());
@@ -53,11 +56,11 @@ class NkSelect extends NkFormElement {
     this._select.innerHTML = '';
     for (const node of nodes) this._select.appendChild(node.cloneNode(true));
 
-    // A value that waited for its option first; then the live selection when
-    // it survived; otherwise the value attribute; otherwise the browser
-    // default (first option / `selected`).
-    if (this._pending != null && this._applyValue(this._pending)) this._pending = null;
-    else if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // A value that waits for its option first – it keeps waiting while the
+    // option is missing; else the live selection when it survived; else the
+    // browser default (first option / `selected`).
+    if (this._pending != null) { if (this._applyValue(this._pending)) this._pending = null; }
+    else this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -86,7 +89,8 @@ class NkSelect extends NkFormElement {
   onAttributeChanged(name) {
     if (!this._select) return;
     if (name === 'value') {
-      this._applyValue(this.getAttribute('value'));
+      const value = this.getAttribute('value');
+      this._pending = value === null || this._applyValue(value) ? null : value;
       this._syncFormValue();
       return;
     }
@@ -100,6 +104,7 @@ class NkSelect extends NkFormElement {
   }
 
   resetValue() {
+    this._pending = null;
     if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }

package/dist/components/nk-sheet.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sheet id="more" title="More">

package/dist/components/nk-sidebar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">
@@ -24,7 +24,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // brings it back; ⌘\ or Ctrl+\ toggles it (on a phone the drawer).
 // `collapsed` is the state, collapse() / expand() / toggleCollapsed() the
 // API, nk-collapse { collapsed } the moment to keep it. collapse-label names
-// the « (default "Close sidebar") and is its tooltip for <nk-tooltip>.
+// the « (default "Close sidebar", in German "Seitenleiste schließen") and is
+// its tooltip for <nk-tooltip>.
 const COLLAPSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m18 17-5-5 5-5M11 17l-5-5 5-5"/></svg>';
 const phone = () => matchMedia('(max-width: 860px)').matches;
 
@@ -54,7 +55,7 @@ class NkSidebar extends NkElement {
   }
 
   _syncCollapse() {
-    const label = this.getAttribute('collapse-label') || 'Close sidebar';
+    const label = this.getAttribute('collapse-label') || this.str('closeSidebar');
     this._collapse.hidden = !this.getBoolAttr('collapsible');
     this._collapse.setAttribute('aria-label', label);
     this._collapse.dataset.tooltip = label;
@@ -106,6 +107,8 @@ class NkSidebar extends NkElement {
     document.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { this._syncCollapse(); }
+
   onAttributeChanged(name) {
     if (name === 'open') {
       this._syncOpen();

package/dist/components/nk-steps.js

@@ -18,6 +18,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // nk-select { index, value, step } – index counts from 1, like `current` –
 // and, unless cancelled, makes that step current. `horizontal` sets the
 // steps in one row above a wizard.
+// A step with `href` (1.17.0) shows its label as a link, <a class="st-label">,
+// with or without `selectable` – to open a chapter in a new tab or copy its
+// address. A plain click, or Enter, fires the same nk-select; cancelling it
+// keeps the browser from following the link, for a router of your own. A
+// middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does
+// what a link does.
 class NkSteps extends NkElement {
   static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
 
@@ -45,7 +51,7 @@ class NkSteps extends NkElement {
     // Rebuilding drops the focused label; the new one at that place takes it back.
     const focused = this.shadowRoot?.activeElement?.closest?.('li')?.dataset.index;
     this._list.replaceChildren(...this._items().map((_, i) => {
-      const n = i + 1, { label: text, desc, state } = this._step(i);
+      const n = i + 1, { label: text, desc, state, href } = this._step(i);
       // A state of its own wins; without one, the steps before `current` are done.
       const done = state ? state === 'done' : n < current, skipped = state === 'skipped';
       const li = this.createElement('li', ['nk-step'], { 'data-index': String(n) });
@@ -55,7 +61,8 @@ class NkSteps extends NkElement {
       if (n === current) li.setAttribute('aria-current', 'step');
       const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
       mark.textContent = done ? '✓' : skipped ? '–' : String(n);
-      const body = selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
+      const body = href != null && href !== '' ? this.createElement('a', ['st-label'], { href: String(href) })
+        : selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
       body.textContent = text ?? '';
       if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
       li.append(mark, body);
@@ -66,9 +73,18 @@ class NkSteps extends NkElement {
 
   setupEvents() {
     this._onClick = (e) => {
-      if (!this.getBoolAttr('selectable')) return;
       const li = e.target.closest?.('li.nk-step');
-      if (li && this._list.contains(li)) this.select(Number(li.dataset.index));
+      if (!li || !this._list.contains(li)) return;
+      const link = li.querySelector('a.st-label');
+      if (link) {
+        // The link contract: a plain left click is a selection, any other
+        // one the browser's. The mark beside the link counts as the link.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (!link.contains(e.target)) { link.click(); return; }
+        if (!this.select(Number(li.dataset.index))) e.preventDefault();
+        return;
+      }
+      if (this.getBoolAttr('selectable')) this.select(Number(li.dataset.index));
     };
     this._list.addEventListener('click', this._onClick);
   }

package/dist/components/nk-synced.js

@@ -15,8 +15,9 @@ class NkSynced extends NkElement {
     this._sync();
   }
 
-  _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
+  _sync() { this._badge.textContent = this.getAttribute('badge') ?? this.str('synced'); }
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
 
   get badge() { return this.getAttribute('badge'); }
   set badge(v) { this.setAttribute('badge', v); }

package/dist/components/nk-table-view.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DcsfnUNF.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
 import './shared/dates-a32DcW1l.js';
@@ -66,7 +66,7 @@ class NkTableView extends NkElement {
       }
       this._tbody.appendChild(r);
     }
-    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
   }
 
@@ -116,6 +116,7 @@ class NkTableView extends NkElement {
 
   _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
   onAttributeChanged() { this._render(); }
+  onStringsChanged() { this._render(); }
 
   get name() { return this.getAttribute('name') || 'table'; }
   get columns() { return this._columns; }

package/dist/components/nk-theme-toggle.js

@@ -15,7 +15,7 @@ class NkThemeToggle extends NkElement {
 
   render() {
     this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
-    this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    this._syncTitle();
     this._wrapper.appendChild(this._btn);
     const root = document.documentElement;
     let stored = null;
@@ -46,8 +46,11 @@ class NkThemeToggle extends NkElement {
     window.removeEventListener('message', this._onMessage);
   }
 
+  _syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
+  onStringsChanged() { this._syncTitle(); }
+
   onAttributeChanged(name) {
-    if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    if (name === 'title' && this._btn) this._syncTitle();
   }
 
   /** Sets the theme on <html>, persists it and reports it. */

package/dist/components/nk-tooltip.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { a as placeNear } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]

package/dist/components/nk-tree-item.js

@@ -34,7 +34,7 @@ class NkTreeItem extends NkElement {
     this._labelSlot.appendChild(this._labelText);
     this._label.appendChild(this._labelSlot);
     this._actions = this.createElement('span', ['actions']);
-    for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
+    for (const [action, glyph, title] of [['add', '＋', this.str('add')], ['more', '⋯', this.str('more')]]) {
       const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
       b.textContent = glyph;
       this._actions.appendChild(b);
@@ -120,6 +120,8 @@ class NkTreeItem extends NkElement {
     this._row?.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { for (const b of this._actions.children) b.title = this.str(b.dataset.action); }
+
   onAttributeChanged(name) {
     if (name === 'label') this.assignSlots();
     else this._sync();

package/dist/components/shared/{focus-BNAChOXO.js → focus-C4tbSNND.js}

@@ -15,7 +15,12 @@ function unlockScroll() {
   if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
 }
 
-/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+// Floating layers under <body> that open from inside an overlay – a menu, a
+// date picker – and the tooltip and toast stay usable: made inert, a date
+// picker opened from a dialog showed but took no click.
+const LAYERS = 'nk-menu[floating], nk-calendar[floating], nk-tooltip, nk-toast';
+
+/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included), floating layers aside; returns the undo. */
 function inertOutside(el) {
   const made = [];
   let node = el;
@@ -23,7 +28,7 @@ function inertOutside(el) {
     const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
     if (!parent) break;
     for (const sib of parent.children) {
-      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName) || sib.matches(LAYERS)) continue;
       sib.inert = true;
       made.push(sib);
     }

package/dist/components/shared/{property-cell-BSVcETss.js → property-cell-DcsfnUNF.js}

@@ -16,6 +16,8 @@ import { r as resolveLocale } from './dates-a32DcW1l.js';
 // text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
 // nine text colours for a tone, a quiet second line under it, the whole
 // text in a tooltip (served by <nk-tooltip>), a value to sort by.
+// progress: 0–100, the bar and its percentage as Intl writes it in
+// column.locale, else the page's language ("45 %" in German).
 // date: the value as given, or with column.format ('short', 'relative' or
 // Intl.DateTimeFormat options) and column.locale formatted from an ISO date
 // or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
@@ -81,7 +83,7 @@ function renderPropertyCell(column, value, row = {}) {
   if (type === 'actions') return actions(column, value);
   if (value === undefined || value === null || value === '') {
     if (type === 'checkbox') return checkbox(column, false, row);
-    if (type === 'progress') return progress(0);
+    if (type === 'progress') return progress(column, 0);
     return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
   }
   switch (type) {
@@ -113,7 +115,7 @@ function renderPropertyCell(column, value, row = {}) {
     }
     // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
     case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
-    case 'progress': return progress(Number(value) || 0);
+    case 'progress': return progress(column, Number(value) || 0);
     default: {
       const o = typeof value === 'object' ? value : { text: value };
       let t;
@@ -159,15 +161,23 @@ function checkbox(column, checked, row) {
   return label;
 }
 
-function progress(value) {
+function progress(column, value) {
   const frag = document.createDocumentFragment();
   const bar = el('span', 'nk-progress');
   const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
   bar.appendChild(fill);
-  frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+  frag.append(bar, el('span', 'nk-progress-label', formatPercent(column, value)));
   return frag;
 }
 
+/** A progress value of 0–100 as Intl writes a percentage in column.locale, else the page's language: 45 → "45%", in German "45 %". */
+function formatPercent(column, value) {
+  const n = Number(value) || 0;
+  try {
+    return new Intl.NumberFormat(column.locale || resolveLocale(), { style: 'percent', maximumFractionDigits: 0 }).format(n / 100);
+  } catch { return `${Math.round(n)}%`; }  // a lang Intl does not take
+}
+
 /** A select's place among its options: the order Notion sorts by. */
 function rankOf(column, value) {
   const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
@@ -201,4 +211,4 @@ function compareBy(column, dir = 1) {
   };
 }
 
-export { textOf as a, compareBy as c, formatDate as f, renderPropertyCell as r, tagFor as t };
+export { textOf as a, formatDate as b, compareBy as c, formatPercent as f, renderPropertyCell as r, tagFor as t };