@contraagent/elements 0.0.0-stage → 0.1.0

package/dist/primitives/legend.js

@@ -0,0 +1,28 @@
+// A legend: a swatch and a word per entry.
+import { css, html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { toneAttr } from '../core/tone.js';
+/** The swatch of an entry; none for an entry that is only a word (a note at the end). */
+const swatch = (it) => it.icon ??
+    (it.swatch || it.tone || it.shape || it.cls
+        ? html `<i class=${it.cls || nothing} data-tone=${toneAttr(it.tone)} data-shape=${it.shape ?? nothing}
+        style=${it.swatch ? styleMap({ background: it.swatch }) : nothing}></i>`
+        : nothing);
+/** A row of entries (`.legend`, part `legend`), each its swatch and its word, as a list. */
+export function legend(items, o = {}) {
+    return html `<div class="legend ${o.cls ?? ''}" part="legend" role="list" aria-label=${o.label || nothing}>
+    ${items.map((it) => html `<span role="listitem" aria-hidden=${it.decorative ? 'true' : nothing}>${swatch(it)}${it.label}</span>`)}
+  </div>`;
+}
+export const legendStyles = css `
+  .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--text-muted); }
+  .legend > span { white-space: nowrap; }
+  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
+  .legend i[data-tone] { background: var(--tone); }
+  .legend i[data-shape='round'] { border-radius: 50%; }
+  .legend i[data-shape='square'] { border-radius: 2px; }
+  .legend i[data-shape='ring'] { background: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tone, var(--line2)); }
+  .legend i[data-shape='half'] { border-radius: 50%; background: linear-gradient(0deg, var(--tone, var(--line2)) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tone, var(--line2)); }
+  .legend i[data-shape='hatched'] { border-radius: 2px; background: repeating-linear-gradient(135deg, transparent 0 2px, var(--tone, var(--line2)) 2px 3px); }
+`;
+//# sourceMappingURL=legend.js.map

package/dist/primitives/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../src/primitives/legend.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAa,MAAM,iBAAiB,CAAC;AA2BtD,yFAAyF;AACzF,MAAM,MAAM,GAAG,CAAC,EAAc,EAAW,EAAE,CACzC,EAAE,CAAC,IAAI;IACP,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG;QACzC,CAAC,CAAC,IAAI,CAAA,YAAY,EAAE,CAAC,GAAG,IAAI,OAAO,cAAc,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,KAAK,IAAI,OAAO;gBACxF,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,OAAO;QAC5E,CAAC,CAAC,OAAO,CAAC,CAAC;AAEf,4FAA4F;AAC5F,MAAM,UAAU,MAAM,CAAC,KAA4B,EAAE,IAAmB,EAAE;IACxE,OAAO,IAAI,CAAA,sBAAsB,CAAC,CAAC,GAAG,IAAI,EAAE,0CAA0C,CAAC,CAAC,KAAK,IAAI,OAAO;MACpG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,qCAAqC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;SAC3H,CAAC;AACV,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;CAU9B,CAAC"}

package/dist/primitives/pill.d.ts

@@ -0,0 +1,23 @@
+import { type TemplateResult } from 'lit';
+import { type Tone } from '../core/tone.js';
+/** The shape before a status word. */
+export type Mark = 'done' | 'failed' | 'pending';
+/** The mark a tone takes by default: ✓ done, ✕ failed, ◌ attention; none for running, muted or neutral. */
+export declare function markOf(tone: Tone): Mark | null;
+export interface PillSpec {
+    /** The word (a template may add a count after it). */
+    text: unknown;
+    tone?: Tone;
+    /** The mark: `markOf(tone)` when not given (or true); false or null for none. */
+    mark?: Mark | boolean | null;
+    title?: string | null;
+    /** More classes on the element. */
+    cls?: string;
+}
+/** A status as a pill (`.pill`, part `pill tone-<tone>`): tinted by its tone, a done pill quiet with its ✓. */
+export declare function pill(p: PillSpec): TemplateResult;
+/** A status as a word in a row (`.jstop`, part `status tone-<tone>`): coloured for a problem, done quiet with its ✓. */
+export declare function statusWord(p: PillSpec): TemplateResult;
+/** A status as a chip of the class `cls` (an element styles it): the tone and the mark, as on a pill. */
+export declare function statusChip(cls: string, p: PillSpec): TemplateResult;
+//# sourceMappingURL=pill.d.ts.map

package/dist/primitives/pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../src/primitives/pill.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEtD,sCAAsC;AACtC,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,2GAA2G;AAC3G,wBAAgB,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAW9C;AAED,MAAM,WAAW,QAAQ;IACvB,sDAAsD;IACtD,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iFAAiF;IACjF,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAQD,+GAA+G;AAC/G,wBAAgB,IAAI,CAAC,CAAC,EAAE,QAAQ,GAAG,cAAc,CAGhD;AAED,wHAAwH;AACxH,wBAAgB,UAAU,CAAC,CAAC,EAAE,QAAQ,GAAG,cAAc,CAGtD;AAED,yGAAyG;AACzG,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,GAAG,cAAc,CAGnE"}

package/dist/primitives/pill.js

@@ -0,0 +1,40 @@
+// A status shown as a pill or as a word: the word, its tone (`data-tone`) and,
+// where a mark belongs, its mark (`data-mark`: ✓ done, ✕ failed, ◌ pending).
+// The look of each is in `styles/status.ts`; the mark is drawn by CSS and hidden
+// from screen readers, which read the word.
+import { html, nothing } from 'lit';
+import { toneAttr } from '../core/tone.js';
+/** The mark a tone takes by default: ✓ done, ✕ failed, ◌ attention; none for running, muted or neutral. */
+export function markOf(tone) {
+    switch (tone) {
+        case 'done':
+            return 'done';
+        case 'failed':
+            return 'failed';
+        case 'attention':
+            return 'pending';
+        default:
+            return null;
+    }
+}
+/** The `data-mark` of a spec. */
+const markAttr = (p) => {
+    const m = p.mark === undefined || p.mark === true ? markOf(p.tone ?? 'neutral') : p.mark || null;
+    return m ?? nothing;
+};
+/** A status as a pill (`.pill`, part `pill tone-<tone>`): tinted by its tone, a done pill quiet with its ✓. */
+export function pill(p) {
+    const tone = p.tone ?? 'neutral';
+    return html `<span class="pill ${p.cls ?? ''}" part="pill tone-${tone}" data-tone=${toneAttr(tone)} data-mark=${markAttr(p)} title=${p.title || nothing}>${p.text}</span>`;
+}
+/** A status as a word in a row (`.jstop`, part `status tone-<tone>`): coloured for a problem, done quiet with its ✓. */
+export function statusWord(p) {
+    const tone = p.tone ?? 'neutral';
+    return html `<span class="jstop ${p.cls ?? ''}" part="status tone-${tone}" data-tone=${toneAttr(tone)} data-mark=${markAttr(p)} title=${p.title || nothing}>${p.text}</span>`;
+}
+/** A status as a chip of the class `cls` (an element styles it): the tone and the mark, as on a pill. */
+export function statusChip(cls, p) {
+    const tone = p.tone ?? 'neutral';
+    return html `<span class="${cls} ${p.cls ?? ''}" data-tone=${toneAttr(tone)} data-mark=${markAttr(p)} title=${p.title || nothing}>${p.text}</span>`;
+}
+//# sourceMappingURL=pill.js.map

package/dist/primitives/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","sourceRoot":"","sources":["../../src/primitives/pill.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,6EAA6E;AAC7E,iFAAiF;AACjF,4CAA4C;AAC5C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAa,MAAM,iBAAiB,CAAC;AAKtD,2GAA2G;AAC3G,MAAM,UAAU,MAAM,CAAC,IAAU;IAC/B,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC;AAaD,iCAAiC;AACjC,MAAM,QAAQ,GAAG,CAAC,CAAW,EAAyB,EAAE;IACtD,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC;IACjG,OAAO,CAAC,IAAI,OAAO,CAAC;AACtB,CAAC,CAAC;AAEF,+GAA+G;AAC/G,MAAM,UAAU,IAAI,CAAC,CAAW;IAC9B,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC;IACjC,OAAO,IAAI,CAAA,qBAAqB,CAAC,CAAC,GAAG,IAAI,EAAE,qBAAqB,IAAI,eAAe,QAAQ,CAAC,IAAI,CAAC,cAAc,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,SAAS,CAAC;AAC5K,CAAC;AAED,wHAAwH;AACxH,MAAM,UAAU,UAAU,CAAC,CAAW;IACpC,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC;IACjC,OAAO,IAAI,CAAA,sBAAsB,CAAC,CAAC,GAAG,IAAI,EAAE,uBAAuB,IAAI,eAAe,QAAQ,CAAC,IAAI,CAAC,cAAc,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,SAAS,CAAC;AAC/K,CAAC;AAED,yGAAyG;AACzG,MAAM,UAAU,UAAU,CAAC,GAAW,EAAE,CAAW;IACjD,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC;IACjC,OAAO,IAAI,CAAA,gBAAgB,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,EAAE,eAAe,QAAQ,CAAC,IAAI,CAAC,cAAc,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,CAAC,IAAI,SAAS,CAAC;AACrJ,CAAC"}

package/dist/primitives/roving-focus.d.ts

@@ -0,0 +1,47 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface RovingFocusOptions {
+    /** The items, in order (row by row in a grid). */
+    items: () => readonly HTMLElement[];
+    /** Which arrow keys move: Left and Right, Up and Down, or both (a grid). */
+    layout: 'horizontal' | 'vertical' | 'grid';
+    /** The number of columns of a grid. */
+    columns?: () => number;
+    /** From the last item to the first and back (not in a grid). */
+    wrap?: boolean;
+    /** Called after the focus moved to `el`. */
+    onMove?: (el: HTMLElement, index: number) => void;
+}
+/**
+ * Where a key moves the focus among `n` items from `i`, or null when it does not
+ * move. A grid has `cols` columns: Left and Right move in the row, Up and Down in
+ * the column, Home and End to the row's ends, with Ctrl to the first and last
+ * item.
+ */
+export declare function rovingStep(n: number, i: number, key: string, o: {
+    layout: RovingFocusOptions['layout'];
+    cols?: number;
+    wrap?: boolean;
+    ctrl?: boolean;
+}): number | null;
+/**
+ * A roving tabindex over the host's items: the current item has `tabindex=0`, the
+ * others -1, and the keys of `rovingStep` move the focus. `current` follows a
+ * click or a focus too.
+ */
+export declare class RovingFocusController implements ReactiveController {
+    private readonly host;
+    private readonly o;
+    /** The index of the item that holds the tab stop. */
+    current: number;
+    constructor(host: ReactiveControllerHost & HTMLElement, o: RovingFocusOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /** Gives the tab stop to item `i`, without moving the focus. */
+    set(i: number): void;
+    private sync;
+    private indexOf;
+    private readonly onFocus;
+    private readonly onKey;
+}
+//# sourceMappingURL=roving-focus.d.ts.map

package/dist/primitives/roving-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-focus.d.ts","sourceRoot":"","sources":["../../src/primitives/roving-focus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,KAAK,EAAE,MAAM,SAAS,WAAW,EAAE,CAAC;IACpC,4EAA4E;IAC5E,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC3C,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,MAAM,CAAC;IACvB,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,GAAG,EAAE,MAAM,EACX,CAAC,EAAE;IAAE,MAAM,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GACzF,MAAM,GAAG,IAAI,CAqCf;AAED;;;;GAIG;AACH,qBAAa,qBAAsB,YAAW,kBAAkB;IAK5D,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ,CAAC,CAAC;IALpB,qDAAqD;IACrD,OAAO,SAAK;gBAGO,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAC1C,CAAC,EAAE,kBAAkB;IAKxC,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAKxB,WAAW,IAAI,IAAI;IAInB,gEAAgE;IAChE,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAKpB,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAGtB;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAgBpB;CACH"}

package/dist/primitives/roving-focus.js

@@ -0,0 +1,111 @@
+/**
+ * Where a key moves the focus among `n` items from `i`, or null when it does not
+ * move. A grid has `cols` columns: Left and Right move in the row, Up and Down in
+ * the column, Home and End to the row's ends, with Ctrl to the first and last
+ * item.
+ */
+export function rovingStep(n, i, key, o) {
+    if (n <= 0)
+        return null;
+    const to = (j) => (j === i || j < 0 || j >= n ? null : j);
+    if (o.layout === 'grid') {
+        const cols = Math.max(1, o.cols ?? 1);
+        const row = Math.floor(i / cols) * cols;
+        switch (key) {
+            case 'ArrowRight':
+                return (i + 1) % cols && i + 1 < n ? to(i + 1) : null;
+            case 'ArrowLeft':
+                return i % cols ? to(i - 1) : null;
+            case 'ArrowDown':
+                return to(i + cols);
+            case 'ArrowUp':
+                return to(i - cols);
+            case 'Home':
+                return to(o.ctrl ? 0 : row);
+            case 'End':
+                return to(o.ctrl ? n - 1 : Math.min(row + cols, n) - 1);
+            default:
+                return null;
+        }
+    }
+    const [prev, next] = o.layout === 'horizontal' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
+    const step = (s) => (o.wrap ? to((i + s + n) % n) : to(i + s));
+    switch (key) {
+        case next:
+            return step(1);
+        case prev:
+            return step(-1);
+        case 'Home':
+            return to(0);
+        case 'End':
+            return to(n - 1);
+        default:
+            return null;
+    }
+}
+/**
+ * A roving tabindex over the host's items: the current item has `tabindex=0`, the
+ * others -1, and the keys of `rovingStep` move the focus. `current` follows a
+ * click or a focus too.
+ */
+export class RovingFocusController {
+    constructor(host, o) {
+        this.host = host;
+        this.o = o;
+        /** The index of the item that holds the tab stop. */
+        this.current = 0;
+        this.onFocus = (e) => {
+            const i = this.indexOf(e);
+            if (i >= 0 && i !== this.current)
+                this.set(i);
+        };
+        this.onKey = (e) => {
+            const items = this.o.items();
+            const i = this.indexOf(e);
+            if (i < 0)
+                return;
+            const j = rovingStep(items.length, i, e.key, {
+                layout: this.o.layout,
+                cols: this.o.columns?.(),
+                wrap: this.o.wrap,
+                ctrl: e.ctrlKey || e.metaKey,
+            });
+            const el = j === null ? undefined : items[j];
+            if (j === null || !el)
+                return;
+            e.preventDefault();
+            this.set(j);
+            el.focus();
+            this.o.onMove?.(el, j);
+        };
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', this.onKey);
+        this.host.addEventListener('focusin', this.onFocus);
+    }
+    hostDisconnected() {
+        this.host.removeEventListener('keydown', this.onKey);
+        this.host.removeEventListener('focusin', this.onFocus);
+    }
+    hostUpdated() {
+        this.sync();
+    }
+    /** Gives the tab stop to item `i`, without moving the focus. */
+    set(i) {
+        this.current = i;
+        this.sync();
+    }
+    sync() {
+        const items = this.o.items();
+        if (!items.length)
+            return;
+        this.current = Math.min(Math.max(0, this.current), items.length - 1);
+        items.forEach((el, j) => (el.tabIndex = j === this.current ? 0 : -1));
+    }
+    indexOf(e) {
+        const items = this.o.items();
+        return items.findIndex((el) => e.composedPath().includes(el));
+    }
+}
+//# sourceMappingURL=roving-focus.js.map

package/dist/primitives/roving-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-focus.js","sourceRoot":"","sources":["../../src/primitives/roving-focus.ts"],"names":[],"mappings":"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"}

package/dist/primitives/segmented.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    title?: string;
+    disabled?: boolean;
+    /** The option's language (`lang`), when its label is in another language than the page. */
+    lang?: string;
+}
+/**
+ * One choice among a few, as a row of buttons (a radio group): a click, or the
+ * arrow keys, Home and End, choose. The group is one tab stop.
+ *
+ * Its look: `--cae-segmented-radius`, `--cae-segmented-height`,
+ * `--cae-segmented-padding`, `--cae-segmented-font-size`,
+ * `--cae-segmented-divider` (the line between options) and
+ * `--cae-segmented-hover` (an option's text under the pointer), or the parts.
+ *
+ * @tagname cae-segmented
+ * @fires cae-change - `{value}`: the option the reader chose
+ * @csspart group - the row of options
+ * @csspart option - each option
+ * @csspart option-selected - the chosen option
+ */
+export declare class CaeSegmented extends LitElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    options: readonly SegmentedOption[];
+    value: string;
+    /** The group's accessible name. */
+    label: string;
+    private readonly roving;
+    willUpdate(): void;
+    private choose;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cae-segmented': CaeSegmented;
+    }
+}
+//# sourceMappingURL=segmented.d.ts.map

package/dist/primitives/segmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/primitives/segmented.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0DAcpB;IAE8B,OAAO,EAAE,SAAS,eAAe,EAAE,CAAM;IAC7D,KAAK,SAAM;IACvB,mCAAmC;IACvB,KAAK,SAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAKpB;IAEM,UAAU,IAAI,IAAI;IAK3B,OAAO,CAAC,MAAM;IAML,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/primitives/segmented.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { emit } from '../core/events.js';
+import { base } from '../styles/index.js';
+import { RovingFocusController } from './roving-focus.js';
+/**
+ * One choice among a few, as a row of buttons (a radio group): a click, or the
+ * arrow keys, Home and End, choose. The group is one tab stop.
+ *
+ * Its look: `--cae-segmented-radius`, `--cae-segmented-height`,
+ * `--cae-segmented-padding`, `--cae-segmented-font-size`,
+ * `--cae-segmented-divider` (the line between options) and
+ * `--cae-segmented-hover` (an option's text under the pointer), or the parts.
+ *
+ * @tagname cae-segmented
+ * @fires cae-change - `{value}`: the option the reader chose
+ * @csspart group - the row of options
+ * @csspart option - each option
+ * @csspart option-selected - the chosen option
+ */
+export class CaeSegmented extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.value = '';
+        /** The group's accessible name. */
+        this.label = '';
+        this.roving = new RovingFocusController(this, {
+            items: () => [...(this.renderRoot.querySelectorAll('button:not(:disabled)') ?? [])],
+            layout: 'horizontal',
+            wrap: true,
+            onMove: (el) => this.choose(el.dataset['value'] ?? ''),
+        });
+    }
+    static { this.styles = [
+        base,
+        css `
+      :host { display: inline-flex; vertical-align: middle; }
+      .group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--cae-segmented-radius, 6px); overflow: hidden; }
+      button { min-width: 22px; height: var(--cae-segmented-height, 20px); line-height: var(--cae-segmented-height, 20px); padding: var(--cae-segmented-padding, 0 10px);
+        margin: 0; border: 0; border-radius: 0; background: none; font-size: var(--cae-segmented-font-size, 11.5px); text-align: center;
+        color: var(--text-muted); cursor: pointer; }
+      button + button { border-left: var(--cae-segmented-divider, 1px solid var(--line)); }
+      button:hover { color: var(--cae-segmented-hover, var(--text)); }
+      button[aria-checked='true'] { background: var(--raise); color: var(--text); cursor: default; }
+      button:disabled { opacity: 0.5; cursor: default; }
+      button:focus-visible { outline-offset: -2px; }
+    `,
+    ]; }
+    willUpdate() {
+        const i = this.options.filter((o) => !o.disabled).findIndex((o) => o.value === this.value);
+        if (i >= 0)
+            this.roving.current = i;
+    }
+    choose(value) {
+        if (value === this.value)
+            return;
+        this.value = value;
+        emit(this, 'cae-change', { value });
+    }
+    render() {
+        return html `<div class="group" part="group" role="radiogroup" aria-label=${this.label || nothing}>
+      ${repeat(this.options, (o) => o.value, (o) => {
+            const on = o.value === this.value;
+            return html `<button type="button" role="radio" part=${on ? 'option option-selected' : 'option'} aria-checked=${on ? 'true' : 'false'}
+            data-value=${o.value} lang=${o.lang || nothing} title=${o.title || nothing} ?disabled=${!!o.disabled}
+            @click=${() => this.choose(o.value)}>${o.label}</button>`;
+        })}
+    </div>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], CaeSegmented.prototype, "options", void 0);
+__decorate([
+    property()
+], CaeSegmented.prototype, "value", void 0);
+__decorate([
+    property()
+], CaeSegmented.prototype, "label", void 0);
+//# sourceMappingURL=segmented.js.map

package/dist/primitives/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","sourceRoot":"","sources":["../../src/primitives/segmented.ts"],"names":[],"mappings":"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"}

package/dist/primitives/share-bar.d.ts

@@ -0,0 +1,37 @@
+import { type TemplateResult } from 'lit';
+export interface SharePart {
+    /** What tells the part apart (a stable key). */
+    id: string;
+    /** The part's name, the same as in the legend beside the bar. */
+    label: string;
+    /** Its amount; a part of 0 draws nothing. */
+    value: number;
+    /** Its colour: a CSS colour or `var(...)`, the same as its swatch in the legend. */
+    color: string;
+    /** The amount in words, for the tooltip (`$0.12`, `1.2k`). */
+    text?: string;
+}
+export interface ShareBarOptions {
+    /** The bar's accessible name. */
+    label?: string;
+    /** The smallest share (0..1) whose part is named under the bar; default 0.15. */
+    labelAt?: number;
+}
+/**
+ * Whole percents (0..100) for `values`, summing to exactly 100 when any is above 0
+ * (the largest remainders round up); all 0 when none is.
+ */
+export declare function wholePercents(values: readonly number[]): number[];
+/** A share in words: `42%`, `<1%` for a part above 0 that rounds to 0. */
+export declare const sharePercent: (pct: number, value: number) => string;
+/**
+ * The parts of a whole as one bar (`.share`, part `share`): each part a segment as
+ * wide as its share, 2px apart, in the order given (so a part keeps its place when
+ * the amounts change), with its name and share under it when it is wide enough.
+ * Hovering or focusing a segment shows its name, share and amount; each segment is
+ * a tab stop with the same words. Name every part beside the bar too (a legend or a
+ * table): a colour alone never says which part is which.
+ */
+export declare function shareBar(parts: readonly SharePart[], o?: ShareBarOptions): TemplateResult;
+export declare const shareBarStyles: import("lit").CSSResult;
+//# sourceMappingURL=share-bar.d.ts.map

package/dist/primitives/share-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-bar.d.ts","sourceRoot":"","sources":["../../src/primitives/share-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,MAAM,WAAW,SAAS;IACxB,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,CAQjE;AAED,0EAA0E;AAC1E,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,KAAG,MAAsD,CAAC;AAEjH;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,EAAE,CAAC,GAAE,eAAoB,GAAG,cAAc,CAsB7F;AAED,eAAO,MAAM,cAAc,yBAoB1B,CAAC"}

package/dist/primitives/share-bar.js

@@ -0,0 +1,69 @@
+// A share bar: one whole, as a single 100% bar of its parts, side by side.
+import { css, html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+/**
+ * Whole percents (0..100) for `values`, summing to exactly 100 when any is above 0
+ * (the largest remainders round up); all 0 when none is.
+ */
+export function wholePercents(values) {
+    const total = values.reduce((a, v) => a + Math.max(v, 0), 0);
+    if (!total)
+        return values.map(() => 0);
+    const exact = values.map((v) => (100 * Math.max(v, 0)) / total);
+    const out = exact.map(Math.floor);
+    const order = exact.map((x, i) => [x - Math.floor(x), i]).sort((a, b) => b[0] - a[0] || a[1] - b[1]);
+    for (let k = 0, left = 100 - out.reduce((a, v) => a + v, 0); k < left; k++)
+        out[order[k][1]] += 1;
+    return out;
+}
+/** A share in words: `42%`, `<1%` for a part above 0 that rounds to 0. */
+export const sharePercent = (pct, value) => (pct === 0 && value > 0 ? '<1%' : `${pct}%`);
+/**
+ * The parts of a whole as one bar (`.share`, part `share`): each part a segment as
+ * wide as its share, 2px apart, in the order given (so a part keeps its place when
+ * the amounts change), with its name and share under it when it is wide enough.
+ * Hovering or focusing a segment shows its name, share and amount; each segment is
+ * a tab stop with the same words. Name every part beside the bar too (a legend or a
+ * table): a colour alone never says which part is which.
+ */
+export function shareBar(parts, o = {}) {
+    const shown = parts.filter((p) => p.value > 0);
+    const pcts = wholePercents(shown.map((p) => p.value));
+    const total = shown.reduce((a, p) => a + p.value, 0);
+    const labelAt = o.labelAt ?? 0.15;
+    const words = (p, i) => [p.label, sharePercent(pcts[i], p.value), p.text].filter(Boolean).join(' | ');
+    return html `<div class="share" part="share">
+    <div class="share-bar" role="list" aria-label=${o.label || nothing}>
+      ${shown.map((p, i) => html `<span class="share-seg" role="listitem" tabindex="0" aria-label=${words(p, i)} data-id=${p.id}
+          data-edge=${i === 0 ? 'start' : i === shown.length - 1 ? 'end' : nothing}
+          style=${styleMap({ flexGrow: String(p.value / total), background: p.color })}
+          ><span class="share-tip" aria-hidden="true">${words(p, i)}</span></span>`)}
+    </div>
+    <div class="share-names" aria-hidden="true">
+      ${shown.map((p, i) => html `<span style=${styleMap({ flexGrow: String(p.value / total) })}
+          >${p.value / total >= labelAt ? html `<b>${p.label}</b> ${sharePercent(pcts[i], p.value)}` : nothing}</span>`)}
+    </div>
+  </div>`;
+}
+export const shareBarStyles = css `
+  .share { display: grid; gap: 6px; }
+  .share-bar, .share-names { display: flex; gap: 2px; min-width: 0; }
+  .share-bar { height: 14px; }
+  .share-seg { position: relative; flex: 0 1 0; min-width: 3px; height: 100%; border-radius: 1px; cursor: default; outline-offset: 2px; }
+  .share-seg[data-edge='start'] { border-radius: 4px 1px 1px 4px; }
+  .share-seg[data-edge='end'] { border-radius: 1px 4px 4px 1px; }
+  .share-seg:only-child { border-radius: 4px; }
+  /* A hit area taller than the bar. */
+  .share-seg::before { content: ''; position: absolute; inset: -6px 0; }
+  .share-seg:hover, .share-seg:focus-visible { box-shadow: 0 0 0 2px var(--card); }
+  .share-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 2;
+    padding: 4px 8px; border-radius: var(--radius-sm); background: var(--raise); border: 1px solid var(--line2); box-shadow: 0 4px 14px var(--shadow);
+    color: var(--text); font-size: var(--font-size-sm); white-space: nowrap; pointer-events: none; }
+  .share-seg[data-edge='start'] .share-tip, .share-seg:only-child .share-tip { left: 0; transform: none; }
+  .share-seg[data-edge='end'] .share-tip { left: auto; right: 0; transform: none; }
+  .share-seg:hover .share-tip, .share-seg:focus-visible .share-tip { display: block; }
+  .share-names span { flex: 0 1 0; min-width: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-size: var(--font-size-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
+  .share-names b { font-weight: 600; color: var(--text-2); }
+`;
+//# sourceMappingURL=share-bar.js.map

package/dist/primitives/share-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-bar.js","sourceRoot":"","sources":["../../src/primitives/share-bar.ts"],"names":[],"mappings":"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"}

package/dist/primitives/states.d.ts

@@ -0,0 +1,19 @@
+import type { Tone } from '../core/tone.js';
+import type { MarkShape } from './legend.js';
+export interface StateStyle {
+    /** The word beside a mark and in the legend. */
+    label: string;
+    tone: Tone;
+    shape: MarkShape;
+    /** Higher is more severe: what a mark standing for several items shows. */
+    rank: number;
+    /** How many items are in this state, number first ("3 failed"); default: the number and `label`. */
+    count?: (n: number) => string;
+}
+/** State id → look. The key order is the legend order. */
+export type StateStyles = Readonly<Record<string, StateStyle>>;
+/** The most severe of `states` by `styles` (an unknown state ranks lowest); '' for none. */
+export declare function worstState(states: Iterable<string>, styles: StateStyles): string;
+/** How many items are in state `s`, in words. */
+export declare const stateCount: (styles: StateStyles, s: string, n: number) => string;
+//# sourceMappingURL=states.d.ts.map

package/dist/primitives/states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../src/primitives/states.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,oGAAoG;IACpG,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/B;AAED,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AAE/D,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,CAIhF;AAED,iDAAiD;AACjD,eAAO,MAAM,UAAU,GAAI,QAAQ,WAAW,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,MAAkE,CAAC"}

package/dist/primitives/states.js

@@ -0,0 +1,11 @@
+/** The most severe of `states` by `styles` (an unknown state ranks lowest); '' for none. */
+export function worstState(states, styles) {
+    let worst = '';
+    for (const s of states)
+        if (worst === '' || (styles[s]?.rank ?? -Infinity) > (styles[worst]?.rank ?? -Infinity))
+            worst = s;
+    return worst;
+}
+/** How many items are in state `s`, in words. */
+export const stateCount = (styles, s, n) => styles[s]?.count?.(n) ?? `${n} ${styles[s]?.label ?? s}`;
+//# sourceMappingURL=states.js.map

package/dist/primitives/states.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.js","sourceRoot":"","sources":["../../src/primitives/states.ts"],"names":[],"mappings":"AAmBA,4FAA4F;AAC5F,MAAM,UAAU,UAAU,CAAC,MAAwB,EAAE,MAAmB;IACtE,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,KAAK,MAAM,CAAC,IAAI,MAAM;QAAE,IAAI,KAAK,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC;YAAE,KAAK,GAAG,CAAC,CAAC;IAC3H,OAAO,KAAK,CAAC;AACf,CAAC;AAED,iDAAiD;AACjD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAmB,EAAE,CAAS,EAAE,CAAS,EAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC"}

package/dist/primitives/window.d.ts

@@ -0,0 +1,24 @@
+export interface RowWindow {
+    /** The first row drawn. */
+    from: number;
+    /** The row after the last drawn. */
+    to: number;
+    /** The height that stands for the rows above `from`. */
+    padTop: number;
+    /** The height that stands for the rows from `to` on. */
+    padBottom: number;
+}
+/**
+ * The rows of `total` rows of `rowHeight` px that a viewport of `viewport` px,
+ * scrolled to `scrollTop`, shows, with `overscan` more rows on each side.
+ */
+export declare function windowRows(total: number, scrollTop: number, viewport: number, rowHeight: number, overscan?: number): RowWindow;
+/**
+ * The rows a viewport of `viewport` px, scrolled to `scrollTop`, shows, when rows
+ * differ in height: `offsets[i]` is where row `i` starts and `offsets[total]` is
+ * the height of all of them (`rowOffsets`), with `overscan` more rows on each side.
+ */
+export declare function windowRowsAt(offsets: readonly number[], scrollTop: number, viewport: number, overscan?: number): RowWindow;
+/** Where each of `total` rows starts, and the height of all of them last: `height(i)` is row `i`'s. */
+export declare function rowOffsets(total: number, height: (i: number) => number): number[];
+//# sourceMappingURL=window.d.ts.map

package/dist/primitives/window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../src/primitives/window.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,MAAM,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,SAAS,CAQzH;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,SAAS,CAUrH;AAED,uGAAuG;AACvG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,CAKjF"}