@fusion.dev/helix-core 0.149.1 → 0.151.0

package/dist/mixins/mixin-picker-editing/mixin-picker-editing.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property, state } from 'lit/decorators.js';
+const caretKeys = new Set(['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'End', 'Home']);
 export const MixinPickerEditing = (Base) => {
     class PickerEditingElement extends Base {
         constructor() {
@@ -18,6 +19,37 @@ export const MixinPickerEditing = (Base) => {
             this.handlePress = (event) => {
                 this.pressing = event.type === 'pointerdown' && event.composedPath()[0] === this.control;
             };
+            this.handleEditKey = (event) => {
+                const control = this.control;
+                if (this.editing ||
+                    this.readOnly ||
+                    this.isDisabled ||
+                    !control ||
+                    event.composedPath()[0] !== control ||
+                    event.altKey ||
+                    event.ctrlKey ||
+                    event.metaKey ||
+                    event.isComposing ||
+                    (event.key.length !== 1 && !caretKeys.has(event.key))) {
+                    return;
+                }
+                const shown = control.value.length;
+                const start = control.selectionStart ?? shown;
+                const end = control.selectionEnd ?? shown;
+                this.editing = true;
+                const text = this.display;
+                if (text === control.value) {
+                    return;
+                }
+                control.value = text;
+                if (start === 0 && end === shown) {
+                    control.setSelectionRange(0, text.length);
+                }
+                else {
+                    const at = end === 0 ? 0 : text.length;
+                    control.setSelectionRange(at, at);
+                }
+            };
             this.handleFocus = (event) => {
                 this.editing = !this.returning;
                 const pressed = this.pressing;
@@ -49,12 +81,14 @@ export const MixinPickerEditing = (Base) => {
             this.addEventListener('pointerdown', this.handlePress);
             this.addEventListener('pointercancel', this.handlePress);
             this.addEventListener('click', this.handlePress);
+            this.addEventListener('keydown', this.handleEditKey);
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.removeEventListener('pointerdown', this.handlePress);
             this.removeEventListener('pointercancel', this.handlePress);
             this.removeEventListener('click', this.handlePress);
+            this.removeEventListener('keydown', this.handleEditKey);
         }
     }
     __decorate([

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts

@@ -62,8 +62,9 @@ export declare class MixinSegmentedFieldInterface {
  * `04.08.2026` in German and `08/04/2026` in English with nothing to parse.
  *
  * **What a segment does with a key**, which is React Aria's: digits fill it and
- * move on once it cannot take another, Up and Down step it and wrap, Home and
- * End go to its ends, Backspace and Delete empty it, Left and Right move between
+ * move on once it cannot take another, Up and Down step it and wrap, Page Up
+ * and Page Down step it by a page, a week of days, five years or fifteen
+ * minutes, Home and End go to its ends, Backspace and Delete empty it, Left and Right move between
  * segments along the line of text, and Alt+Down opens the picker. Each segment
  * is a tab stop, as each is in React Aria.
  *

package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js

@@ -236,6 +236,7 @@ export const MixinSegmentedField = (Base) => {
             aria-valuenow=${spin ? (shown ?? nothing) : nothing}
             aria-valuetext=${spin ? (empty ? this.emptySegmentLabel : segmentValueText(kind, this.parts, twelve, locale)) : nothing}
             aria-disabled=${this.isDisabled ? 'true' : nothing}
+            aria-required=${this.required ? 'true' : nothing}
             aria-readonly=${this.readOnly ? 'true' : nothing}
             @keydown=${this.handleSegmentKeydown}
             >${text}</span

package/dist/mixins/mixin-tokens/mixin-tokens.d.ts

@@ -99,6 +99,14 @@ export declare class MixinTokensInterface {
      * of its selection, and a filter field takes a token out of its own list.
      */
     protected removeLastToken(): void;
+    /**
+     * The tokens the arrow keys move between, in the order they are shown.
+     *
+     * Each is an element whose remove button is its `dismiss` part and whose
+     * `dismiss()` asks it to go, which `Tag` and `FilterInput.Chip` both are.
+     * None by default.
+     */
+    protected tokenElements(): HTMLElement[];
 }
 /**
  * A row of tokens inside a field, and the behavior that goes with it.

package/dist/mixins/mixin-tokens/mixin-tokens.js

@@ -8,6 +8,7 @@ import { caretUp } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { drawIcon } from '../../utils/draw-icon/draw-icon.js';
+import { inlineStep } from '../../utils/inline-step/inline-step.js';
 import { formatWords, words } from '../../words/words.js';
 export const MixinTokens = (Base) => {
     class TokensElement extends Base {
@@ -22,6 +23,42 @@ export const MixinTokens = (Base) => {
             this.toggleExpanded = () => {
                 this.expanded = !this.expanded;
             };
+            this.handleTokenKeydown = (event) => {
+                if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+                    return;
+                }
+                const stops = this.tokenStops();
+                const path = event.composedPath();
+                const at = stops.findIndex((stop) => path.includes(stop));
+                if (at < 0) {
+                    return;
+                }
+                const step = inlineStep(this, event.key);
+                if (step !== 0) {
+                    event.preventDefault();
+                    const next = stops[at + step];
+                    if (next) {
+                        next.focus();
+                    }
+                    else if (step > 0) {
+                        this.tokenControl?.focus();
+                        this.tokenControl?.setSelectionRange(0, 0);
+                    }
+                    return;
+                }
+                if (event.key !== 'Delete' && event.key !== 'Backspace') {
+                    return;
+                }
+                event.preventDefault();
+                const stop = stops[at];
+                const token = this.tokenElements().find((one) => one.shadowRoot?.contains(stop ?? null));
+                token?.dismiss?.();
+                requestAnimationFrame(() => {
+                    if (!this.matches(':focus-within')) {
+                        this.tokenControl?.focus();
+                    }
+                });
+            };
         }
         static { this.words = ''; }
         get shownLimit() {
@@ -30,6 +67,26 @@ export const MixinTokens = (Base) => {
         renderTokenRow(content, over) {
             return html `<span part="tags">${content}${this.renderRest(over)}</span>`;
         }
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener('keydown', this.handleTokenKeydown);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.removeEventListener('keydown', this.handleTokenKeydown);
+        }
+        tokenElements() {
+            return [];
+        }
+        tokenStops() {
+            return this.tokenElements()
+                .filter((token) => !token.hidden)
+                .map((token) => token.shadowRoot?.querySelector('[part~="dismiss"]'))
+                .filter((stop) => stop !== null && stop !== undefined);
+        }
+        get tokenControl() {
+            return this.renderRoot.querySelector('[part~="control"]');
+        }
         renderRest(over) {
             if (!this.expandable) {
                 return over > 0
@@ -59,6 +116,22 @@ export const MixinTokens = (Base) => {
             return limit > 0 ? Math.max(0, tokens.length - limit) : 0;
         }
         tokenKeydown(event, typed) {
+            const control = event.target;
+            if (inlineStep(this, event.key) === -1 &&
+                !event.shiftKey &&
+                !event.altKey &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                control?.selectionStart === 0 &&
+                control.selectionEnd === 0) {
+                const last = this.tokenStops().at(-1);
+                if (last) {
+                    event.preventDefault();
+                    last.focus();
+                    return true;
+                }
+                return false;
+            }
             if (event.key !== 'Backspace' || typed !== '') {
                 return false;
             }

package/dist/utils/chord/key-names.d.ts

@@ -7,10 +7,16 @@
  */
 /** A chord's keys as they are shown, and what is shown between two of them. */
 export interface KeyNames {
-    /** Each key's label, in the order the chord names them. */
+    /** Each key's label, modifiers first in the platform's order, then the rest as written. */
     keys: string[];
     /** What goes between two keys: `+`, a hyphen, or nothing. */
     separator: string;
+    /**
+     * The chord in words for a screen reader, such as `Shift Command P`, where a
+     * label is a glyph a reader would hear as a symbol. Empty when every label
+     * is a word already.
+     */
+    spoken: string;
 }
 /**
  * The labels of a chord's keys on a platform, with `own` labels in place of
@@ -18,7 +24,9 @@ export interface KeyNames {
  *
  * `parts` are the chord's names as `chordParts` splits them. A name `own`
  * holds takes that label, a name the platform knows takes its glyph or word,
- * and any other single character is shown in capitals.
+ * and any other single character is shown in capitals. **Modifiers come first,
+ * in the platform's order**, so one `keys` value is right on every platform:
+ * `mod+shift+p` is `⇧⌘P` on an Apple keyboard and `Ctrl+Shift+P` elsewhere.
  *
  * **On an Apple keyboard glyphs run together and words are joined with a
  * hyphen**, as Apple writes `Command-K`. A label of more than one character
@@ -26,5 +34,9 @@ export interface KeyNames {
  * nothing between the two ran them into `CommandK`. The platform's own `Esc`
  * and `Space` keep running on from a glyph, as `⌘Esc` always has. Everywhere
  * else keys are joined with `+`.
+ *
+ * `spoken` says the chord in words where a label is one of the platform's
+ * glyphs, such as `⌘` or `↑`, which a screen reader reads as a symbol or
+ * skips. A label from `own` is taken as words already.
  */
 export declare const keyNames: (parts: readonly string[], apple: boolean, own?: Readonly<Record<string, string>>) => KeyNames;

package/dist/utils/chord/key-names.js

@@ -36,17 +36,72 @@ const ELSEWHERE = {
     tab: 'Tab',
     up: '↑',
 };
+const SPOKEN = {
+    alt: 'Option',
+    backspace: 'Delete',
+    cmd: 'Command',
+    ctrl: 'Control',
+    del: 'Forward Delete',
+    down: 'Down Arrow',
+    enter: 'Return',
+    left: 'Left Arrow',
+    meta: 'Command',
+    mod: 'Command',
+    opt: 'Option',
+    right: 'Right Arrow',
+    shift: 'Shift',
+    tab: 'Tab',
+    up: 'Up Arrow',
+};
+const ORDER_APPLE = {
+    alt: 1,
+    cmd: 3,
+    ctrl: 0,
+    meta: 3,
+    mod: 3,
+    opt: 1,
+    shift: 2,
+};
+const ORDER_ELSEWHERE = {
+    alt: 2,
+    cmd: 0,
+    ctrl: 1,
+    meta: 0,
+    mod: 1,
+    opt: 2,
+    shift: 3,
+};
+const ordered = (parts, apple) => {
+    const order = apple ? ORDER_APPLE : ORDER_ELSEWHERE;
+    const rank = (part) => order[part.toLowerCase()] ?? Number.POSITIVE_INFINITY;
+    return parts
+        .map((part, index) => ({ index, part }))
+        .sort((a, b) => rank(a.part) - rank(b.part) || a.index - b.index)
+        .map(({ part }) => part);
+};
 export const keyNames = (parts, apple, own = {}) => {
     const names = apple ? APPLE : ELSEWHERE;
     let worded = false;
-    const keys = parts.map((part) => {
+    let glyphs = false;
+    const words = [];
+    const keys = ordered(parts, apple).map((part) => {
         const name = part.toLowerCase();
         const mine = own[name];
         if (mine !== undefined) {
             worded ||= [...mine].length > 1;
+            words.push(mine);
             return mine;
         }
-        return names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+        const shown = names[name] ?? (part.length === 1 ? part.toUpperCase() : part);
+        const said = SPOKEN[name];
+        const glyph = said !== undefined && [...shown].length === 1;
+        glyphs ||= glyph;
+        words.push(glyph ? said : shown);
+        return shown;
     });
-    return { keys, separator: apple ? (worded ? '-' : '') : '+' };
+    return {
+        keys,
+        separator: apple ? (worded ? '-' : '') : '+',
+        spoken: glyphs ? words.join(' ') : '',
+    };
 };

package/dist/utils/date-segments/date-segments.d.ts

@@ -86,10 +86,11 @@ export interface SegmentKeyState {
  * What an editing key does to a segment, or `null` for a key that edits
  * nothing.
  *
- * The arrows step it and wrap, Home and End take it to its lowest and highest,
- * Backspace and Delete empty it, a digit is typed as `typeDigit` types it, and
- * on the meridiem a letter picks the half whose word starts with it. `advance`
- * says the segment is full and focus moves on.
+ * The arrows step it and wrap, Page Up and Page Down step it by a page, Home
+ * and End take it to its lowest and highest, Backspace and Delete empty it, a
+ * digit is typed as `typeDigit` types it, and on the meridiem a letter picks
+ * the half whose word starts with it. `advance` says the segment is full and
+ * focus moves on.
  */
 export declare const segmentKey: (key: string, { kind, locale, segments, twelve, typed }: SegmentKeyState) => {
     advance: boolean;

package/dist/utils/date-segments/date-segments.js

@@ -119,11 +119,23 @@ export const typeDigit = (segments, kind, typed, digit, twelve) => {
     const next = value >= min ? setSegment(segments, kind, value, twelve) : segments;
     return { advance: full && value >= min, segments: next, typed: full ? '' : text };
 };
+const pageStep = {
+    day: 7,
+    hour: 2,
+    minute: 15,
+    month: 2,
+    second: 15,
+    year: 5,
+};
 export const segmentKey = (key, { kind, locale, segments, twelve, typed }) => {
     const done = (next) => next === undefined ? null : { advance: false, segments: next, typed: '' };
     if (key === 'ArrowUp' || key === 'ArrowDown') {
         return done(stepSegment(segments, kind, key === 'ArrowUp' ? 1 : -1, twelve));
     }
+    if (key === 'PageUp' || key === 'PageDown') {
+        const by = (key === 'PageUp' ? 1 : -1) * (pageStep[kind] ?? 1);
+        return done(stepSegment(segments, kind, by, twelve));
+    }
     if (key === 'Home' || key === 'End') {
         const { max, min } = segmentRange(kind, segments, twelve);
         return done(setSegment(segments, kind, key === 'Home' ? min : max, twelve));

package/dist/utils/draw-value-axis/draw-value-axis.d.ts

@@ -0,0 +1,22 @@
+import { type TemplateResult } from 'lit';
+/**
+ * The numbers of a chart's value scale, beside its drawing: an `axis` part
+ * holding a `tick` part at each level `ticks` picks, which are the levels
+ * `gridlines` rules.
+ *
+ * HTML beside the plot, for the reason a chart's reading names are: text
+ * inside an `<svg>` that fills its box scales with the box. Each tick is placed
+ * with `inset-block-start`, as a percentage of the axis, so a stylesheet that
+ * makes the axis as tall as the plot puts each number on its level.
+ *
+ * `width` builds the axis's style from the number of characters in its widest
+ * number. The ticks are positioned absolutely and give the column no width of
+ * their own, so each family writes its own custom property there, such as
+ * `--line-chart-axis` in `ch`, and a stylesheet sizes the column from it.
+ *
+ * @param domain The scale's lowest and highest values.
+ * @param place Where a value sits down the plot, from 0 at the top to 100 at the bottom.
+ * @param format How a value is written, such as a number in the chart's locale.
+ * @param width The style the axis carries, from the number of characters in its widest number.
+ */
+export declare const drawValueAxis: (domain: readonly [number, number], place: (value: number) => number, format: (value: number) => string, width: (widest: number) => string) => TemplateResult;

package/dist/utils/draw-value-axis/draw-value-axis.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+import { ticks } from '../scale/ticks.js';
+export const drawValueAxis = (domain, place, format, width) => {
+    const levels = ticks(domain);
+    const widest = Math.max(1, ...levels.map((level) => format(level).length));
+    return html `<div aria-hidden="true" part="axis" style=${width(widest)}>
+    ${levels.map((level) => html `<span part="tick" style=${`inset-block-start: ${place(level)}%`}>${format(level)}</span>`)}
+  </div>`;
+};

package/dist/utils/read-color/read-color.d.ts

@@ -7,8 +7,16 @@
  */
 /** A color as three sRGB bytes, which is what a canvas reports and takes. */
 export type ColorBytes = [number, number, number];
+/** A color as three sRGB bytes and its alpha, from 0 to 1. */
+export type ColorBytesAlpha = [number, number, number, number];
 /**
- * A computed color as three sRGB bytes, or nothing where it cannot be read.
+ * `value` painted onto a clear pixel and read back, alpha and all, or nothing
+ * where the engine does not parse it.
+ */
+export declare const paintedColor: (context: CanvasRenderingContext2D, value: string) => ColorBytesAlpha | undefined;
+/**
+ * A computed color as three sRGB bytes and its alpha, or nothing where it
+ * cannot be read.
  *
  * **Painting it is the only way to read it.** A color-typed property is
  * resolved before it is reported, but resolved is not the same as converted:
@@ -18,13 +26,11 @@ export type ColorBytes = [number, number, number];
  * `lab(0 0 0)`, which scrapes to black and looks right, so only dark mode
  * showed it: dark red mixed toward black, on a near-black ground.
  *
- * **Painted twice, over two different grounds, which is what makes the refusal
- * honest.** Assigning a value the engine will not parse leaves `fillStyle`
- * exactly where it was, so a single paint cannot tell a color apart from the
- * ground it failed to replace. Over black and over white, a value that parsed
- * gives the same answer twice and one that did not gives two. A caller then
- * chooses its own fallback rather than being handed a color nobody picked,
- * which is the half both earlier copies of this had to guess at.
+ * **A value the engine does not parse is refused**, so a caller chooses its
+ * own fallback rather than being handed a color nobody picked. A see-through
+ * color is read with its alpha: `rgb(255 0 0 / 50%)` is `[255, 0, 0, 0.5]`.
+ * It was refused too, when the test for parsing was painting over black and
+ * over white, and Orb drew it gray.
  *
  * A readback is not free, so the answer is held against the string it came
  * from, refusals included. The oldest goes when the store is full rather than
@@ -33,6 +39,16 @@ export type ColorBytes = [number, number, number];
  *
  * @param value A resolved color, as `getComputedStyle` reports one.
  */
+export declare const readColorAlpha: (value: string) => ColorBytesAlpha | undefined;
+/**
+ * A computed color as three sRGB bytes, or nothing where it cannot be read or
+ * is see-through.
+ *
+ * `readColorAlpha` is the reading, and this keeps an opaque color only, which
+ * is what a caller with no use for alpha can draw as it is.
+ *
+ * @param value A resolved color, as `getComputedStyle` reports one.
+ */
 export declare const readColor: (value: string) => ColorBytes | undefined;
 /**
  * A computed color as `rgb()`, or `rgba()` where it is see-through, which

package/dist/utils/read-color/read-color.js

@@ -1,14 +1,24 @@
 let swatch;
 const known = new Map();
 const KEPT = 64;
-const painted = (context, value, under) => {
-    context.fillStyle = under;
+const parses = (context, value) => {
+    context.fillStyle = '#000000';
     context.fillStyle = value;
+    const overBlack = String(context.fillStyle);
+    context.fillStyle = '#ffffff';
+    context.fillStyle = value;
+    return String(context.fillStyle) === overBlack;
+};
+export const paintedColor = (context, value) => {
+    if (!parses(context, value)) {
+        return undefined;
+    }
+    context.clearRect(0, 0, 1, 1);
     context.fillRect(0, 0, 1, 1);
-    const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
-    return [red ?? 0, green ?? 0, blue ?? 0];
+    const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+    return [red ?? 0, green ?? 0, blue ?? 0, Math.round(((alpha ?? 0) / 255) * 1000) / 1000];
 };
-export const readColor = (value) => {
+export const readColorAlpha = (value) => {
     if (known.has(value)) {
         const seen = known.get(value);
         return seen ? [...seen] : undefined;
@@ -22,9 +32,7 @@ export const readColor = (value) => {
     if (!swatch) {
         return undefined;
     }
-    const over = painted(swatch, value, '#000000');
-    const under = painted(swatch, value, '#ffffff');
-    const read = over.every((one, at) => one === under[at]) ? over : undefined;
+    const read = paintedColor(swatch, value);
     if (known.size >= KEPT) {
         const oldest = known.keys().next().value;
         if (oldest !== undefined) {
@@ -34,6 +42,10 @@ export const readColor = (value) => {
     known.set(value, read);
     return read ? [...read] : undefined;
 };
+export const readColor = (value) => {
+    const read = readColorAlpha(value);
+    return read && read[3] === 1 ? [read[0], read[1], read[2]] : undefined;
+};
 export const rgbOf = (color) => {
     const pixel = typeof document === 'undefined' ? null : document.createElement('canvas');
     const context = pixel?.getContext?.('2d', { willReadFrequently: true });

package/dist/version.d.ts

@@ -6,4 +6,4 @@
  * release, so the two never disagree; a spec beside this holds them to it.
  * Nothing else in the running code knows which release it is.
  */
-export declare const VERSION = "0.149.1";
+export declare const VERSION = "0.151.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = '0.149.1';
+export const VERSION = '0.151.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.149.1",
+  "version": "0.151.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -56,11 +56,11 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.149.1"
+    "@fusion.dev/helix-icons": "0.151.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.149.1",
-    "@fusion.dev/helix-testing": "0.149.1",
+    "@fusion.dev/helix-cem": "0.151.0",
+    "@fusion.dev/helix-testing": "0.151.0",
     "@lit-labs/ssr": "^4.1.0",
     "lit": "^3.2.1"
   },