@kubex/zinc 1.1.185 → 2.0.0

package/src/internal/tab-indicator.ts

@@ -0,0 +1,92 @@
+import {EASE_DRAWER, EASE_OUT, parseDuration, prefersReducedMotion} from './animate';
+
+const SQUISH = 'tab-indicator-squish';
+
+function token(style: CSSStyleDeclaration, name: string, fallback: string) {
+  return parseDuration(style.getPropertyValue(name).trim() || fallback);
+}
+
+/**
+ * Squishes a sliding tab indicator's height to `--zn-navbar-tab-indicator-squash` during
+ * `--zn-navbar-tab-indicator-delay`, then lets it recover as it travels. Does nothing unless a squash is set.
+ */
+export function squishTabIndicator(indicator: HTMLElement) {
+  const style = getComputedStyle(indicator);
+  const squash = parseFloat(style.getPropertyValue('--zn-navbar-tab-indicator-squash'));
+  if (!squash || squash === 1 || prefersReducedMotion()) {
+    return;
+  }
+
+  const delay = token(style, '--zn-navbar-tab-indicator-delay', '0ms');
+  const total = delay + token(style, '--zn-navbar-tab-indicator-duration', '300ms');
+  // A squish cut short by another tab change carries on from where it was rather than jumping back to full height
+  const from = style.scale === 'none' ? '1 1' : style.scale;
+  indicator.getAnimations().filter(animation => animation.id === SQUISH).forEach(animation => animation.cancel());
+
+  const animation = indicator.animate([
+    {scale: from, easing: EASE_OUT},
+    {scale: `1 ${squash}`, offset: delay > 0 ? delay / total : 0.25, easing: EASE_DRAWER},
+    {scale: '1 1'},
+  ], {duration: total});
+  animation.id = SQUISH;
+}
+
+const SLIDE = 'tab-indicator-slide';
+// Enough samples that the stretch reads as a curve, not steps
+const SLIDE_FRAMES = 40;
+
+export interface IndicatorEdges {
+  left: number;
+  right: number;
+}
+
+/** Eased progress of one edge at each sample time, as the browser itself evaluates the easing. */
+function edgeProgress(easing: string, duration: number, delay: number) {
+  let effect: KeyframeEffect;
+  try {
+    effect = new KeyframeEffect(null, null, {duration, delay, easing, fill: 'both'});
+  } catch {
+    effect = new KeyframeEffect(null, null, {duration, delay, easing: 'ease', fill: 'both'});
+  }
+  const timing = new Animation(effect);
+  return (time: number) => {
+    timing.currentTime = time;
+    return effect.getComputedTiming().progress ?? 1;
+  };
+}
+
+/**
+ * Slides an indicator, already placed at `to` by `left` and `width`, from the box `from` using only `transform`, so the
+ * browser can run it off the main thread while the new tab loads. The edge heading for the new tab moves on
+ * `--zn-navbar-tab-indicator-duration`/`-easing`/`-delay`, the other on the `-trail-` tokens, stretching the indicator mid-move.
+ */
+export function slideTabIndicator(indicator: HTMLElement, from: IndicatorEdges, to: IndicatorEdges) {
+  indicator.getAnimations().filter(animation => animation.id === SLIDE).forEach(animation => animation.cancel());
+  const width = to.right - to.left;
+  if (width <= 0 || prefersReducedMotion()) {
+    return;
+  }
+
+  const style = getComputedStyle(indicator);
+  const easing = style.getPropertyValue('--zn-navbar-tab-indicator-easing').trim() || 'cubic-bezier(0.4, 0, 0.2, 1)';
+  const leadDuration = token(style, '--zn-navbar-tab-indicator-duration', '300ms');
+  const leadDelay = token(style, '--zn-navbar-tab-indicator-delay', '0ms');
+  const trailDuration = token(style, '--zn-navbar-tab-indicator-trail-duration', `${leadDuration}ms`);
+  const trailDelay = token(style, '--zn-navbar-tab-indicator-trail-delay', `${leadDelay}ms`);
+  const trailEasing = style.getPropertyValue('--zn-navbar-tab-indicator-trail-easing').trim() || easing;
+  const lead = edgeProgress(easing, leadDuration, leadDelay);
+  const trail = edgeProgress(trailEasing, trailDuration, trailDelay);
+  const forward = to.left > from.left;
+  const total = Math.max(leadDelay + leadDuration, trailDelay + trailDuration);
+
+  const keyframes: Keyframe[] = [];
+  for (let frame = 0; frame <= SLIDE_FRAMES; frame++) {
+    const time = total * frame / SLIDE_FRAMES;
+    const left = from.left + (to.left - from.left) * (forward ? trail : lead)(time);
+    const right = from.right + (to.right - from.right) * (forward ? lead : trail)(time);
+    keyframes.push({transform: `translateX(${left - to.left}px) scaleX(${Math.max(right - left, 0) / width})`});
+  }
+
+  const animation = indicator.animate(keyframes, {duration: total});
+  animation.id = SLIDE;
+}

package/src/internal/table-sort.ts

@@ -0,0 +1,25 @@
+import {html, type TemplateResult} from 'lit';
+
+export type SortState = 'ascending' | 'descending' | 'none';
+
+export function renderSortIcon(state: SortState): TemplateResult {
+  if (state === 'none') {
+    return html`
+      <div class="table__head__sort">
+        <zn-icon src="chevrons_up_down@lu" size="14"></zn-icon>
+      </div>`;
+  }
+
+  return html`
+    <div class="table__head__sort table__head__sort--active">
+      <zn-icon src="${state === 'ascending' ? 'arrow-up@lu' : 'arrow-down@lu'}" size="14"></zn-icon>
+    </div>`;
+}
+
+export function sortKeyHandler(onSort: () => void): (e: KeyboardEvent) => void {
+  return (e: KeyboardEvent) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    onSort();
+  };
+}

package/src/internal/table-tabs.ts

@@ -0,0 +1,108 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {html, nothing, type ReactiveController, type ReactiveControllerHost, type TemplateResult} from 'lit';
+import {ref} from 'lit/directives/ref.js';
+import {squishTabIndicator} from './tab-indicator';
+
+export interface TableTab {
+  value: string;
+  label: string;
+  count?: number | string;
+}
+
+export class TabRowController implements ReactiveController {
+  private readonly onSelect: (value: string) => void;
+  private indicator: HTMLElement | null = null;
+  private indicatorTab: HTMLElement | null = null;
+  private observer: ResizeObserver | null = null;
+
+  constructor(host: ReactiveControllerHost, opts: { onSelect: (value: string) => void }) {
+    this.onSelect = opts.onSelect;
+    host.addController(this);
+  }
+
+  hostUpdated() {
+    this.syncTabIndicator();
+  }
+
+  hostDisconnected() {
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+
+  render(tabs: TableTab[], active: string, pill: boolean): TemplateResult | typeof nothing {
+    if (tabs.length === 0) return nothing;
+
+    return html`
+      <div class="${classMap({'table__tabs': true, 'table__tabs--pill': pill})}" role="tablist" ${ref(this.observeBar)}>
+        <span class="table__tabs__indicator" part="tab-indicator" aria-hidden="true" ${ref(this.setIndicator)}></span>
+        ${tabs.map(tab => html`
+          <button role="tab"
+                  aria-selected="${tab.value === active ? 'true' : 'false'}"
+                  class="${classMap({'table__tab': true, 'table__tab--active': tab.value === active})}"
+                  @click="${() => this.onSelect(tab.value)}">
+            ${tab.label}
+            ${tab.count !== undefined && tab.count !== null && tab.count !== '' ? html`
+              <span class="table__tab__count">${tab.count}</span>` : nothing}
+          </button>`)}
+      </div>`;
+  }
+
+  private setIndicator = (el: Element | undefined) => {
+    this.indicator = (el as HTMLElement) ?? null;
+  };
+
+  private observeBar = (el: Element | undefined) => {
+    this.observer?.disconnect();
+    this.observer = null;
+    if (!el) return;
+    this.observer = new ResizeObserver(() => this.syncTabIndicator());
+    this.observer.observe(el);
+  };
+
+  /**
+   * One indicator shared by every tab, positioned by its two edges as zn-navbar's is: on a tab
+   * change the edge nearest the destination leads and the other trails, so it slides across.
+   */
+  syncTabIndicator() {
+    const indicator = this.indicator;
+    const bar = indicator?.parentElement;
+    const active = bar?.querySelector<HTMLElement>('.table__tab--active');
+    if (!indicator || !bar || !active || active.offsetWidth === 0) {
+      indicator?.classList.remove('table__tabs__indicator--shown');
+      return;
+    }
+
+    const left = active.offsetLeft;
+    const right = bar.clientWidth - left - active.offsetWidth;
+    const previousLeft = parseFloat(indicator.style.left);
+    const ready = indicator.classList.contains('table__tabs__indicator--ready');
+    const tabChanged = active !== this.indicatorTab;
+    if (ready && tabChanged && !Number.isNaN(previousLeft) && Math.abs(left - previousLeft) > 0.5) {
+      indicator.classList.toggle('table__tabs__indicator--forward', left > previousLeft);
+      indicator.classList.toggle('table__tabs__indicator--backward', left < previousLeft);
+      squishTabIndicator(indicator);
+    }
+    this.indicatorTab = active;
+
+    // Only a tab change slides; a resize under the same tab follows it instantly, unless a slide is still running
+    const follow = ready && !tabChanged && indicator.getAnimations().length === 0;
+    if (follow) {
+      indicator.style.transition = 'none';
+    }
+
+    indicator.style.left = `${left}px`;
+    indicator.style.right = `${right}px`;
+    indicator.classList.add('table__tabs__indicator--shown');
+
+    if (follow) {
+      // Commit the jump before transitions come back on
+      void indicator.offsetWidth;
+      indicator.style.removeProperty('transition');
+    }
+
+    // The first placement jumps into position; only later moves animate
+    if (!ready) {
+      requestAnimationFrame(() => indicator.classList.add('table__tabs__indicator--ready'));
+    }
+  }
+}

package/src/internal/test-drag.ts

@@ -0,0 +1,35 @@
+// Drives the pointer drag of a ReorderController from a test.
+
+const init = (x: number, y: number): PointerEventInit => ({
+  pointerId: 1,
+  pointerType: 'mouse',
+  isPrimary: true,
+  button: 0,
+  clientX: x,
+  clientY: y,
+  bubbles: true,
+  composed: true,
+  cancelable: true,
+});
+
+/** The centre of an element. */
+export function centre(el: Element) {
+  const rect = el.getBoundingClientRect();
+  return {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2};
+}
+
+/** Presses on an element and moves far enough to start dragging it. */
+export function startDrag(el: Element) {
+  const {x, y} = centre(el);
+  el.dispatchEvent(new PointerEvent('pointerdown', init(x, y)));
+  window.dispatchEvent(new PointerEvent('pointermove', init(x, y + 1)));
+  window.dispatchEvent(new PointerEvent('pointermove', init(x + 6, y + 6)));
+}
+
+export function dragTo(x: number, y: number) {
+  window.dispatchEvent(new PointerEvent('pointermove', init(x, y)));
+}
+
+export function drop(x: number, y: number) {
+  window.dispatchEvent(new PointerEvent('pointerup', init(x, y)));
+}

package/src/internal/theme-openbyte.test.ts

@@ -0,0 +1,126 @@
+import '../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+const root = document.documentElement;
+// The minifier strips the spaces inside RGB triplets.
+const token = (el: Element, name: string) => getComputedStyle(el).getPropertyValue(name).replace(/\s+/g, '');
+
+function setTheme(m = 'light', density?: string) {
+  root.removeAttribute('t');
+  root.setAttribute('m', m);
+  if (density) root.setAttribute('data-density', density);
+  else root.removeAttribute('data-density');
+}
+
+describe('openbyte theme tokens (default)', () => {
+  before(async () => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '/dist/zn.min.css';
+    const loaded = new Promise(resolve => link.addEventListener('load', resolve));
+    document.head.append(link);
+    await loaded;
+  });
+
+  afterEach(() => setTheme());
+
+  it('re-points the brand and derived tokens in light mode', () => {
+    setTheme();
+    expect(token(root, '--zn-color-primary')).to.equal('8,94,253');
+    expect(token(root, '--zn-primary')).to.equal('8,94,253');
+    expect(token(root, '--zn-border-color')).to.equal('214,224,235');
+    expect(token(root, '--zn-panel-border-radius')).to.equal('12px');
+  });
+
+  it('pins --zn-primary in dark mode over the base dark accent', () => {
+    setTheme('dark');
+    expect(token(root, '--zn-primary')).to.equal('53,106,212');
+    expect(token(root, '--zn-color-body')).to.equal('24,25,30');
+  });
+
+  it('applies comfortable density by default and compact on a nested container', async () => {
+    setTheme();
+    const el = await fixture(html`<div data-density="compact"><span></span></div>`);
+    expect(token(root, '--zn-input-height-medium')).to.equal('36px');
+    expect(token(el.firstElementChild!, '--zn-input-height-medium')).to.equal('28px');
+  });
+
+  it('switches the whole page to compact from the root', () => {
+    setTheme('light', 'compact');
+    expect(token(root, '--zn-input-height-medium')).to.equal('28px');
+  });
+
+  it('sizes plain table rows to the density row height', async () => {
+    setTheme();
+    const table = await fixture(html`<table><tbody><tr><td>One</td></tr></tbody></table>`);
+    const cell = table.querySelector('td')!;
+    expect(cell.getBoundingClientRect().height).to.equal(44);
+    expect(getComputedStyle(cell).paddingTop).to.equal('4px');
+  });
+
+  it('sets a table cell meta line below its main text in muted small type', async () => {
+    setTheme();
+    const table = await fixture(html`<table><tbody><tr><td><a href="#">Name</a><span class="zn-table-meta">Meta</span></td></tr></tbody></table>`);
+    const meta = getComputedStyle(table.querySelector('.zn-table-meta')!);
+    expect(meta.display).to.equal('block');
+    expect(meta.fontSize).to.equal('12px');
+    expect(meta.color).to.equal('rgb(80, 97, 122)');
+  });
+
+  it('gives chart labels the subtle text colour', () => {
+    setTheme();
+    expect(getComputedStyle(root).getPropertyValue('--zn-chart-text-color').trim().toLowerCase()).to.equal('#66768e');
+  });
+
+  it('puts a toggle\'s side label first with the switch at the far edge', () => {
+    setTheme();
+    expect(token(root, '--zn-toggle-side-label-direction')).to.equal('row');
+    expect(token(root, '--zn-toggle-side-label-justify')).to.equal('space-between');
+  });
+
+  it('keeps the secondary button border neutral when a host re-points the active border', async () => {
+    setTheme();
+    root.style.setProperty('--zn-color-border-active', '8, 94, 253');
+    try {
+      const button = await fixture(html`<zn-button color="secondary">Add</zn-button>`);
+      await (button as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+      const base = button.shadowRoot!.querySelector('.button')!;
+      expect(getComputedStyle(base).borderTopColor).to.equal('rgb(186, 200, 217)');
+    } finally {
+      root.style.removeProperty('--zn-color-border-active');
+    }
+  });
+
+  it('gives a bordered icon button the secondary button edge', async () => {
+    setTheme();
+    const secondary = await fixture(html`<zn-button color="secondary">Add</zn-button>`);
+    const icon = await fixture(html`<zn-button icon="ellipsis" icon-button="small"></zn-button>`);
+    await (secondary as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    await (icon as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const secondaryBase = getComputedStyle(secondary.shadowRoot!.querySelector('.button')!);
+    const iconBase = getComputedStyle(icon.shadowRoot!.querySelector('.button')!);
+    expect(iconBase.borderTopColor).to.equal(secondaryBase.borderTopColor);
+    expect(iconBase.boxShadow).to.equal(secondaryBase.boxShadow);
+  });
+
+  it('sizes a modal page title as a dialog heading', async () => {
+    setTheme();
+    const page = await fixture<HTMLElement>(html`<zn-page modal caption="Add section"></zn-page>`);
+    await (page as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+    const caption = page.shadowRoot!.querySelector('.header__caption')!;
+    expect(getComputedStyle(caption).fontSize).to.equal('16px');
+  });
+
+  it('draws the openbyte dark palette for a host that sets only the legacy t="dark"', () => {
+    root.removeAttribute('m');
+    root.setAttribute('t', 'dark');
+    expect(token(root, '--zn-primary')).to.equal('53,106,212');
+  });
+
+  it('keeps openbyte tokens on a component that reflects a legacy t', async () => {
+    root.setAttribute('t', 'light');
+    const button = await fixture(html`<zn-button>Add</zn-button>`);
+    expect(button.getAttribute('t')).to.equal('light');
+    expect(token(button, '--zn-color-primary')).to.equal('8,94,253');
+  });
+});

package/src/internal/theme.ts

@@ -1,10 +1,10 @@
 import {signal, SignalWatcher} from '@lit-labs/signals';
 
-// Theming has two independent dimensions:
-//   `t` — the theme family (base, aura, ...), carrying the identity/palette.
-//   `m` — the rendered mode ('light' | 'dark') the family is currently drawn in.
+// Theming is driven by two attributes:
+//   `t` — a legacy theme name; OpenByte is the only theme and applies without it.
+//   `m` — the rendered mode ('light' | 'dark').
 // The host shell owns both attributes on <html>; components mirror them so CSS
-// selectors like `[m="dark"]` and `:host-context([t="aura"])` keep working.
+// selectors like `[m="dark"]` keep working.
 
 function readRootAttribute(name: string, fallback: string): string {
   if (typeof document === 'undefined') return fallback;

package/src/internal/zinc-element.ts

@@ -19,13 +19,13 @@ const ZincElementBase: typeof LitElement & Constructor<SignalWatcherApi> = Signa
 export default class ZincElement extends ZincElementBase {
   @property() dir: string; // LTR or RTL direction
   @property() lang: string; // Language
-  @property({reflect: true}) t: string; // Theme family (base, aura, ...)
+  @property({reflect: true}) t: string; // Legacy theme name
   @property({reflect: true}) m: string; // Rendered mode (light or dark)
 
   protected override willUpdate(changed: PropertyValues): void {
     // Reading these signals here subscribes this component to theme changes via
     // the SignalWatcher mixin. The reflected attributes keep CSS selectors like
-    // `[m="dark"]` and `:host-context([t="aura"])` working inside shadow roots.
+    // `[m="dark"]` working inside shadow roots.
     this.t = themeSignal.get();
     this.m = modeSignal.get();
     super.willUpdate(changed);

package/src/selection-card.scss

@@ -183,6 +183,31 @@ $control-positions: (
   }
 }
 
+/* A plain contained radio or checkbox shows its state through the container, so it drops the indicator too. */
+:host([contained]) [part~="base"]:not(.selection-card) {
+  padding-inline-start: var(--zn-spacing-large);
+
+  .selection-card__control {
+    display: none;
+  }
+
+  .selection-card__content {
+    margin-inline-start: 0;
+  }
+
+  &:has(input:focus-visible) {
+    outline: var(--zn-focus-ring);
+    outline-offset: var(--zn-focus-ring-offset);
+  }
+}
+
+/* `centered` centres a plain contained radio or checkbox's text, evening out the start padding left for the indicator. */
+:host([contained][centered]) [part~="base"]:not(.selection-card) {
+  justify-content: center;
+  padding-inline: var(--zn-spacing-large);
+  text-align: center;
+}
+
 /* Contained radios and checkboxes are rounded by default; `square` opts out. */
 :host([contained]) [part~="base"] {
   border-radius: var(--zn-selection-card-border-radius, var(--zn-border-radius));

package/src/types/web-test-runner-commands.d.ts

@@ -4,3 +4,4 @@
 // return type. Runtime resolution (Vite/esbuild) is untouched - only `tsc`
 // reads `paths`.
 export function setViewport(viewport: {width: number; height: number}): Promise<void>;
+export function emulateMedia(media: {reducedMotion?: 'reduce' | 'no-preference'}): Promise<void>;

package/src/utilities/color.test.ts

@@ -0,0 +1,43 @@
+import {detectColorFormat, formatColor, oklchParts, parseColor} from './color';
+import {expect} from '@open-wc/testing';
+
+describe('color utilities', () => {
+  it('parses every supported syntax', () => {
+    expect(parseColor('#085EFD')).to.deep.equal([8, 94, 253]);
+    expect(parseColor('085efd')).to.deep.equal([8, 94, 253]);
+    expect(parseColor('#abc')).to.deep.equal([170, 187, 204]);
+    expect(parseColor('rgb(8, 94, 253)')).to.deep.equal([8, 94, 253]);
+    expect(parseColor('8 94 253')).to.deep.equal([8, 94, 253]);
+    expect(parseColor('hsl(0, 100%, 50%)')).to.deep.equal([255, 0, 0]);
+    expect(parseColor('oklch(62.8% 0.258 29.2)')).to.deep.equal([255, 0, 0]);
+    expect(parseColor('oklch(0.628 0.258 29.2)')).to.deep.equal([255, 0, 0]);
+    expect(parseColor('rebeccapurple')).to.deep.equal([102, 51, 153]);
+  });
+
+  it('rejects text that is not a colour', () => {
+    expect(parseColor('not a colour')).to.equal(null);
+    expect(parseColor('rgb(0, 0)')).to.equal(null);
+    expect(parseColor('')).to.equal(null);
+  });
+
+  it('detects the format a colour is written in', () => {
+    expect(detectColorFormat('#085EFD')).to.equal('hex');
+    expect(detectColorFormat('rgb(8, 94, 253)')).to.equal('rgb');
+    expect(detectColorFormat('hsl(219, 98%, 51%)')).to.equal('hsl');
+    expect(detectColorFormat('oklch(58% 0.2 262)')).to.equal('oklch');
+    expect(detectColorFormat('rebeccapurple')).to.equal(null);
+  });
+
+  it('writes a colour out in each format', () => {
+    const rgb = parseColor('#085EFD')!;
+    expect(formatColor(rgb, 'hex')).to.equal('#085EFD');
+    expect(formatColor(rgb, 'rgb')).to.equal('rgb(8, 94, 253)');
+    expect(formatColor(rgb, 'hsl')).to.equal('hsl(219, 98%, 51%)');
+    expect(formatColor(rgb, 'oklch')).to.equal('oklch(54.8% 0.247 262)');
+  });
+
+  it('computes OKLCH from the OKLab transform', () => {
+    expect(oklchParts([255, 0, 0])).to.deep.equal([62.8, 0.258, 29.2]);
+    expect(oklchParts([255, 255, 255])).to.deep.equal([100, 0, 0]);
+  });
+});