@fusion.dev/helix-headless 0.163.0 → 0.164.0

package/dist/callout/root/callout-root.d.ts

@@ -15,8 +15,12 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * region around it.
  *
  * Set `dismissible` for a note a reader may put away, as Shoelace's `closable`
- * alert does. The button fires `helix-dismiss` and the callout stays until a
- * listener removes it, so the page decides whether it comes back.
+ * alert does. The button fires `helix-dismiss`, and unless a listener cancels
+ * it the callout hides itself: `open` turns false, `:state(exiting)` holds
+ * while its exit animations run, and then it is `hidden`. Remove it in your
+ * listener to take it out of the page, or set `open` to show it again, which
+ * holds `:state(entering)` while it comes back. Focus on its dismiss button
+ * moves to the next callout's, or to the tab stop beside it, once it hides.
  *
  * A callout sets a passage apart inside a document and is read where it sits.
  * For page-level chrome above the masthead that is a live region and can be
@@ -33,13 +37,19 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
- * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable.
+ * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. Unless a listener cancels it, the callout hides itself, and a listener may remove it instead. Cancelable: cancel it to keep the callout showing.
  *
  * @csspart content - The content region.
  * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
  * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
  * @csspart icon - The icon region, an image named for the tone.
  * @csspart icon-mark - The icon for the tone, shown when no icon is slotted.
+ *
+ * @cssstate closed - While `open` is false: the callout was dismissed, and is leaving or hidden.
+ * @cssstate entering - While a callout shown again by `open` runs its entrance animations.
+ * @cssstate exiting - While a dismissed callout runs its exit animations, before it is hidden.
+ * @cssstate has-heading - Something is slotted into `heading`.
+ * @cssstate has-icon - An icon of your own is slotted into `icon`, in place of the tone's.
  */
 export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
     /**
@@ -47,7 +57,6 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * `registerWords('de', { 'helix-callout': { toneLabels: { danger: 'Fehler' } } })`.
      */
     static words: string;
-    protected willUpdate(changed: PropertyValues): void;
     /**
      * The dismiss button's name, read by screen readers, with `{label}` for
      * what the callout is called: its heading, or the tone's name where it has
@@ -58,6 +67,23 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * read as written.
      */
     dismissLabel: string;
+    /** Which journey is the latest, so an entrance settling late leaves an exit alone. */
+    private turn;
+    /** Hidden from a reader once hidden, for the focus hand-off. */
+    protected get present(): boolean;
+    /**
+     * Hides the callout once a dismissal stands, unless the page removed it in
+     * its listener, which is the page's answer and leaves `open` as it was.
+     */
+    dismiss(): boolean;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Whether the callout is showing. A dismissal nobody canceled turns it
+     * false and the callout hides itself, and setting it true shows the callout
+     * again. Not reflected: open is the resting state, so an `open` attribute
+     * would appear on markup a server sent without it.
+     */
+    open: boolean;
     /**
      * What kind of attention the passage needs.
      *
@@ -116,6 +142,19 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      */
     private dismissName;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * The way out after a dismissal, or back in after `open` is set again.
+     *
+     * **Hidden only once the exit has run**, since a hidden element draws no
+     * animation: `:state(exiting)` holds until every animation on the callout
+     * has finished, or two frames where it has none, and then `hidden` takes it
+     * out of the page and out of the accessibility tree. Shown again at once,
+     * with `:state(entering)` while it arrives.
+     */
+    private journey;
+    /** Says which regions hold something, one call apiece so each pairs with its `@cssstate`. */
+    private readonly readRegions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/callout/root/callout-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { animationsSettled, customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -12,6 +12,8 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Dismiss {label}';
+        this.turn = 0;
+        this.open = true;
         this.toneLabel = '';
         this.toneLabels = {
             danger: 'Error',
@@ -20,14 +22,34 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
             success: 'Success',
             warning: 'Warning',
         };
+        this.readRegions = () => {
+            const filled = (name) => {
+                const slot = this.renderRoot?.querySelector(`slot[name="${name}"]`);
+                return (slot?.assignedNodes({ flatten: true }) ?? []).some((node) => node.parentNode !== slot &&
+                    (node.nodeType === Node.ELEMENT_NODE || node.textContent?.trim() !== ''));
+            };
+            this.toggleState('has-heading', filled('heading'));
+            this.toggleState('has-icon', filled('icon'));
+        };
     }
     static { this.words = 'helix-callout'; }
+    get present() {
+        return this.isConnected && !this.hasAttribute('hidden');
+    }
+    dismiss() {
+        const stands = super.dismiss();
+        if (stands && this.isConnected) {
+            this.open = false;
+        }
+        return stands;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'note' });
+        this.toggleState('closed', !this.open);
     }
     renderIcon(icon, _label) {
-        return html `<slot name="icon" aria-hidden="true">
+        return html `<slot name="icon" aria-hidden="true" @slotchange=${this.readRegions}>
       <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
@@ -48,6 +70,37 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    updated(changed) {
+        super.updated(changed);
+        this.readRegions();
+        if (changed.has('open') && changed.get('open') !== undefined) {
+            this.journey();
+        }
+        else if (changed.has('open') && !this.open) {
+            this.setAttribute('hidden', '');
+        }
+    }
+    journey() {
+        this.turn += 1;
+        const turn = this.turn;
+        const open = this.open;
+        this.toggleState('entering', open);
+        this.toggleState('exiting', !open);
+        if (open) {
+            this.removeAttribute('hidden');
+        }
+        void animationsSettled(this).then(() => {
+            if (turn !== this.turn) {
+                return;
+            }
+            this.toggleState('entering', false);
+            this.toggleState('exiting', false);
+            if (!open) {
+                this.setAttribute('hidden', '');
+                this.handFocusOn();
+            }
+        });
+    }
     render() {
         const tone = this.tone === 'neutral' ? 'neutral' : toneMark(this.tone) ? (this.tone ?? 'info') : 'info';
         const { icon } = toneMark(tone) ?? TONE_MARKS.info;
@@ -69,6 +122,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessCallout.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCallout.prototype, "open", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);

package/dist/code-block/patch.d.ts

@@ -8,11 +8,21 @@
  * depends on, out of a component library. What is left is punctuation: a header
  * per file, a `@@` per hunk, and a first character per line.
  *
+ * **Within a changed line it does compare.** A removed line and the added line
+ * paired with it are compared word by word, which takes two short strings and
+ * no dependency, so a reader sees which words changed without comparing two
+ * whole lines by eye.
+ *
  * **Line numbers come from the hunk headers**, so they are the file's numbers
  * rather than the diff's, which is the only kind a reader can look up. A line
  * that is not in a hunk is not in the output: file headers, `index` lines and
  * `diff --git` are metadata, and a name is taken from them and nothing else.
  */
+/** A run of a changed line's text, and whether the line it is paired with lacks it. */
+export interface DiffPiece {
+    changed: boolean;
+    text: string;
+}
 /** One line of a hunk, as the unified format marks it. */
 export interface DiffLine {
     kind: 'added' | 'context' | 'removed';
@@ -21,6 +31,11 @@ export interface DiffLine {
     /** The number on the new side, absent for a line that only the old side has. */
     new?: number;
     text: string;
+    /**
+     * The line's text in runs, where it replaced a line or was replaced by one
+     * and the two share some words. Absent for every other line.
+     */
+    pieces?: DiffPiece[];
 }
 /** A `@@` header and the lines under it. */
 export interface DiffHunk {
@@ -51,6 +66,16 @@ export interface DiffRow {
  * before it rather than a line of its own, so it is dropped.
  */
 export declare const parsePatch: (patch: string) => DiffFile[];
+/**
+ * The runs of two paired lines that the other line does not have, by the
+ * longest run of words they share in order.
+ *
+ * **Space between two changes is part of the change**, so "a b" replaced by
+ * "c d" is one run, with no gap for the eye to bridge. Two lines
+ * that share no word share nothing worth marking: the whole line is the
+ * change, which its own wash already says, and `undefined` draws it whole.
+ */
+export declare const changedWords: (before: string, after: string) => [DiffPiece[], DiffPiece[]] | undefined;
 /**
  * A hunk's lines paired for a side-by-side view.
  *
@@ -60,3 +85,20 @@ export declare const parsePatch: (patch: string) => DiffFile[];
  * across rather than hunting for it further down.
  */
 export declare const pairLines: (lines: DiffLine[]) => DiffRow[];
+/** A stretch of a hunk's lines: drawn, or unchanged lines folded behind a control. */
+export interface DiffRun {
+    /** Whether the lines are unchanged ones folded away. */
+    folded: boolean;
+    lines: DiffLine[];
+    /** Where the run starts among the hunk's lines, which names a fold. */
+    start: number;
+}
+/**
+ * A hunk's lines with each long run of unchanged lines folded, keeping `keep`
+ * lines on the side of each change, as a code host draws a diff with more
+ * context than a reader needs.
+ *
+ * A fold hides two lines or more: a control in place of one line is no
+ * shorter than the line.
+ */
+export declare const foldContext: (lines: DiffLine[], keep: number) => DiffRun[];

package/dist/code-block/patch.js

@@ -63,8 +63,79 @@ export const parsePatch = (patch) => {
             }
         }
     }
+    for (const one of files) {
+        for (const { lines } of one.hunks) {
+            markWords(lines);
+        }
+    }
     return files;
 };
+const TOKEN = /[\p{L}\p{N}_]+|\s+|[^\p{L}\p{N}_\s]/gu;
+const MOST_TOKENS = 200;
+const joined = (pieces) => {
+    const out = [];
+    for (const piece of pieces) {
+        const last = out.at(-1);
+        if (last && last.changed === piece.changed) {
+            last.text += piece.text;
+        }
+        else {
+            out.push({ ...piece });
+        }
+    }
+    return out;
+};
+export const changedWords = (before, after) => {
+    const a = before.match(TOKEN) ?? [];
+    const b = after.match(TOKEN) ?? [];
+    if (a.length === 0 || b.length === 0 || a.length > MOST_TOKENS || b.length > MOST_TOKENS) {
+        return undefined;
+    }
+    const width = b.length + 1;
+    const table = new Uint16Array((a.length + 1) * width);
+    for (let i = a.length - 1; i >= 0; i -= 1) {
+        for (let j = b.length - 1; j >= 0; j -= 1) {
+            table[i * width + j] =
+                a[i] === b[j]
+                    ? table[(i + 1) * width + j + 1] + 1
+                    : Math.max(table[(i + 1) * width + j], table[i * width + j + 1]);
+        }
+    }
+    const left = [];
+    const right = [];
+    let shared = false;
+    let i = 0;
+    let j = 0;
+    while (i < a.length || j < b.length) {
+        if (i < a.length && j < b.length && a[i] === b[j]) {
+            shared ||= a[i].trim() !== '';
+            left.push({ changed: false, text: a[i] });
+            right.push({ changed: false, text: b[j] });
+            i += 1;
+            j += 1;
+        }
+        else if (j >= b.length ||
+            (i < a.length &&
+                table[(i + 1) * width + j] >= table[i * width + j + 1])) {
+            left.push({ changed: true, text: a[i] });
+            i += 1;
+        }
+        else {
+            right.push({ changed: true, text: b[j] });
+            j += 1;
+        }
+    }
+    if (!shared) {
+        return undefined;
+    }
+    const bridged = (pieces) => joined(pieces.map((piece, at) => !piece.changed &&
+        piece.text.trim() === '' &&
+        pieces[at - 1]?.changed &&
+        pieces[at + 1]?.changed
+        ? { ...piece, changed: true }
+        : piece));
+    return [bridged(left), bridged(right)];
+};
 export const pairLines = (lines) => {
     const rows = [];
     let at = 0;
@@ -91,3 +162,50 @@ export const pairLines = (lines) => {
     }
     return rows;
 };
+const markWords = (lines) => {
+    for (const { left, right } of pairLines(lines)) {
+        if (left?.kind !== 'removed' || right?.kind !== 'added') {
+            continue;
+        }
+        const pieces = changedWords(left.text, right.text);
+        if (pieces) {
+            ;
+            [left.pieces, right.pieces] = pieces;
+        }
+    }
+};
+export const foldContext = (lines, keep) => {
+    const runs = [];
+    const add = (start, end, folded) => {
+        if (end <= start) {
+            return;
+        }
+        const last = runs.at(-1);
+        if (last && !last.folded && !folded) {
+            last.lines.push(...lines.slice(start, end));
+        }
+        else {
+            runs.push({ folded, lines: lines.slice(start, end), start });
+        }
+    };
+    let at = 0;
+    while (at < lines.length) {
+        const context = lines[at]?.kind === 'context';
+        let end = at;
+        while (end < lines.length && (lines[end]?.kind === 'context') === context) {
+            end += 1;
+        }
+        const head = context && at > 0 ? keep : 0;
+        const tail = context && end < lines.length ? keep : 0;
+        if (context && end - at - head - tail >= 2) {
+            add(at, at + head, false);
+            add(at + head, end - tail, true);
+            add(end - tail, end, false);
+        }
+        else {
+            add(at, end, false);
+        }
+        at = end;
+    }
+    return runs;
+};

package/dist/code-block/root/code-block-root.d.ts

@@ -45,9 +45,14 @@ import '../../copy-button/index.js';
  * removed. The block never computes a diff itself. Line numbers come from the
  * hunk headers and are hidden from the accessibility tree. Changed lines are
  * `<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not
- * depend on color. Each file in the patch is its own block under its own name,
+ * depend on color. Where a removed line is paired with the added line that
+ * replaced it, the words each does not share with the other are the `changed`
+ * part, so the eye goes to what changed within the line. Each file in the patch is its own block under its own name,
  * and its copy button copies the new version of the file. `variant="split"`
  * shows the old version beside the new, each removal opposite its replacement.
+ * `context-lines` folds each long run of unchanged lines, keeping that many
+ * beside each change, behind a button that shows them and hides them again,
+ * as a code host draws a diff written with more context than a reader needs.
  *
  * **A block that scrolls is a tab stop.** While its lines run past its width or
  * its cap, the scroller is a region named for the block, such as "Code,
@@ -83,6 +88,7 @@ import '../../copy-button/index.js';
  * @csspart actions - The box in the header that holds the `actions` slot, drawn while something is slotted there.
  * @csspart added - In a diff, a line only the new version has, an `<ins>`.
  * @csspart block - The scrolling `<pre>`.
+ * @csspart changed - In a diff, the words of a changed line that the line opposite it does not have, inside its `text`.
  * @csspart code - The `<code>` inside it.
  * @csspart context - In a diff, a line both versions share.
  * @csspart copy - The copy button. It sits in the header when there is one, and beside the code otherwise.
@@ -104,6 +110,7 @@ import '../../copy-button/index.js';
  * @csspart expand - The button under a capped block that shows every line, and fewer again. Drawn when `expandable` is set and the cap hides something.
  * @csspart file - In a diff, one file's header and block.
  * @csspart filler - In a split diff, the empty row opposite a line the other side does not have.
+ * @csspart fold - In a diff with `context-lines`, the button that shows a folded run of unchanged lines, and hides it again, saying which with `aria-expanded`.
  * @csspart frame - The code, and the copy button beside it where there is no header.
  * @csspart gutter - The line numbers beside the code, shown when `line-numbers` is set.
  * @csspart header - The bar that holds the name and the copy button, shown when there is a name.
@@ -148,6 +155,12 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the block shows every line.
      */
     collapseLabel: string;
+    /**
+     * In a diff, how many unchanged lines to keep beside each change. Each
+     * longer run of unchanged lines is folded behind a button that shows it.
+     * Unset shows every line the diff holds.
+     */
+    contextLines?: number;
     /**
      * The copy button's name and tooltip text after a copy.
      */
@@ -185,6 +198,12 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the cap hides lines.
      */
     expandLabel: string;
+    /**
+     * The words of a button that hides a run of unchanged lines it showed, in a
+     * diff with `context-lines`. `{count}` is how many, and each language
+     * writes the forms it has.
+     */
+    hideUnchangedLabel: string;
     /**
      * Turns the code into highlighted markup, which the block draws in place of
      * the plain text.
@@ -263,6 +282,11 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false`.
      */
     noCopy: boolean;
+    /**
+     * The words of a button that shows a folded run of unchanged lines, in a
+     * diff with `context-lines`. `{count}` is how many.
+     */
+    showUnchangedLabel: string;
     /**
      * How a diff's two versions are arranged. It has no effect without `diff`.
      *
@@ -295,6 +319,18 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
     private parsed;
     /** The files in the content, when it is a diff and it can be read yet. */
     private get files();
+    /** The folds a reader opened, by file, hunk and the line each starts at. */
+    private readonly unfolded;
+    /** A hunk's lines in runs, folded where `context-lines` asks. */
+    private runsOf;
+    /**
+     * The button over a folded run, and the run once it is open.
+     *
+     * A disclosure, so focus stays on the button as the lines appear under it.
+     * The new side of a split diff draws the same words hidden from the
+     * accessibility tree, there to keep the rows level and to answer a press.
+     */
+    private renderFold;
     /**
      * The code as text, read from what the default slot is given rather than
      * stored.

package/dist/code-block/root/code-block-root.js

@@ -12,7 +12,7 @@ import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
-import { pairLines, parsePatch } from '../patch.js';
+import { foldContext, pairLines, parsePatch, } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
@@ -25,15 +25,18 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
+        this.hideUnchangedLabel = '{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}';
         this.label = '';
         this.language = '';
         this.lineNumbers = false;
         this.markLines = '';
         this.noCopy = false;
+        this.showUnchangedLabel = '{count, plural, one {Show # unchanged line} other {Show # unchanged lines}}';
         this.wrap = false;
         this.wrapLabel = 'Wrap lines';
         this.wrappable = false;
         this.parsed = { files: [], text: '' };
+        this.unfolded = new Set();
         this.capped = false;
         this.expanded = false;
         this.measure = () => {
@@ -69,9 +72,32 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const text = this.text;
         if (text !== this.parsed.text) {
             this.parsed = { files: parsePatch(text), text };
+            this.unfolded.clear();
         }
         return this.parsed.files;
     }
+    runsOf(hunk) {
+        const keep = this.contextLines;
+        return keep === undefined || keep < 0
+            ? [{ folded: false, lines: hunk.lines, start: 0 }]
+            : foldContext(hunk.lines, Math.floor(keep));
+    }
+    renderFold(run, key, line, hidden = false) {
+        const open = this.unfolded.has(key);
+        const words = formatWords(this, open ? 'hideUnchangedLabel' : 'showUnchangedLabel', {
+            count: run.lines.length,
+        });
+        const toggle = () => {
+            if (!this.unfolded.delete(key)) {
+                this.unfolded.add(key);
+            }
+            this.requestUpdate();
+        };
+        const control = hidden
+            ? html `<span part="fold" aria-hidden="true" @click=${toggle}>${words}</span>`
+            : html `<button part="fold" type="button" aria-expanded=${open ? 'true' : 'false'} @click=${toggle}>${words}</button>`;
+        return html `${control}\n${open ? run.lines.map(line) : nothing}`;
+    }
     get text() {
         if (this.hydrating) {
             return '';
@@ -319,7 +345,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const numbers = side
             ? this.renderNumber(side === 'old' ? line.old : line.new, width)
             : html `${this.renderNumber(line.old, width)}${this.renderNumber(line.new, width)}`;
-        const text = html `<span part="text">${line.text}\n</span>`;
+        const words = line.pieces
+            ? line.pieces.map((piece) => piece.changed ? html `<span part="changed">${piece.text}</span>` : piece.text)
+            : line.text;
+        const text = html `<span part="text">${words}\n</span>`;
         if (line.kind === 'added') {
             return html `<ins part="added">${numbers}<span part="marker">+</span>${text}</ins>`;
         }
@@ -331,16 +360,22 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderHunk(hunk, hidden = false) {
         return html `<span part="hunk" aria-hidden=${hidden ? 'true' : nothing}>${hunk.header}\n</span>`;
     }
-    renderSplit(file, width) {
-        const hunks = file.hunks.map((hunk) => ({ hunk, rows: pairLines(hunk.lines) }));
+    renderSplit(file, width, at) {
+        const hunks = file.hunks.map((hunk) => ({ hunk, runs: this.runsOf(hunk) }));
         const filler = html `<span part="filler" aria-hidden="true">\n</span>`;
+        const side = (old) => hunks.map(({ hunk, runs }, h) => html `${this.renderHunk(hunk, !old)}${runs.map((run) => run.folded
+            ? this.renderFold(run, `${at}:${h}:${run.start}`, (line) => this.renderLine(line, width, old ? 'old' : 'new'), !old)
+            : pairLines(run.lines).map(({ left, right }) => {
+                const line = old ? left : right;
+                return line ? this.renderLine(line, width, old ? 'old' : 'new') : filler;
+            }))}`);
         return html `<div part="split">
-      <pre part="old" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk)}${rows.map(({ left }) => left ? this.renderLine(left, width, 'old') : filler)}`)}</code></pre>
-      <pre part="new" translate="no"><code part="code">${hunks.map(({ hunk, rows }) => html `${this.renderHunk(hunk, true)}${rows.map(({ right }) => right ? this.renderLine(right, width, 'new') : filler)}`)}</code></pre>
+      <pre part="old" translate="no"><code part="code">${side(true)}</code></pre>
+      <pre part="new" translate="no"><code part="code">${side(false)}</code></pre>
     </div>`;
     }
     renderDiff(files) {
-        return html `${files.map((file) => {
+        return html `${files.map((file, at) => {
             const name = file.name || this.label;
             const widest = Math.max(0, ...file.hunks.flatMap((hunk) => hunk.lines.map((line) => Math.max(line.old ?? 0, line.new ?? 0))));
             const width = String(widest).length;
@@ -352,8 +387,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         ${this.renderHeader(name, now)}
         <div part="frame">
           ${this.variant === 'split'
-                ? this.renderSplit(file, width)
-                : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
+                ? this.renderSplit(file, width, at)
+                : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk, h) => html `${this.renderHunk(hunk)}${this.runsOf(hunk).map((run) => run.folded
+                    ? this.renderFold(run, `${at}:${h}:${run.start}`, (line) => this.renderLine(line, width))
+                    : run.lines.map((line) => this.renderLine(line, width)))}`)}</code></pre>`}
           ${this.headed(name) ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
@@ -372,6 +409,9 @@ __decorate([
     words,
     property({ attribute: 'collapse-label' })
 ], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
+__decorate([
+    property({ attribute: 'context-lines', type: Number })
+], HelixHeadlessCodeBlock.prototype, "contextLines", void 0);
 __decorate([
     words,
     property({ attribute: 'copied-label' })
@@ -394,6 +434,10 @@ __decorate([
     words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'hide-unchanged-label' })
+], HelixHeadlessCodeBlock.prototype, "hideUnchangedLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
@@ -412,6 +456,10 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
+__decorate([
+    words,
+    property({ attribute: 'show-unchanged-label' })
+], HelixHeadlessCodeBlock.prototype, "showUnchangedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);

package/dist/color-picker/root/color-picker-root.d.ts

@@ -22,8 +22,10 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * gray after you drag to the bottom of the square and back.
  *
  * The square is one tab stop. In it, the up and down arrows move brightness
- * and the left and right arrows move saturation, and PageUp and PageDown move
- * brightness by ten. The picker sends `input` as the color moves and `change`
+ * and the left and right arrows move saturation, by ten with Shift. PageUp and
+ * PageDown move brightness by ten, and Home and End move saturation by ten,
+ * turned on a right-to-left page as the arrows are, as React Aria's ColorArea
+ * does. The picker sends `input` as the color moves and `change`
  * when a drag, a key, a typed value or a preset settles it, as
  * `<input type="color">` does.
  *
@@ -546,7 +548,9 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * its own one axis: on the saturation input, ArrowUp moved the handle
      * sideways. Here the vertical keys move brightness and the horizontal keys
      * move saturation, turned on a right-to-left page as the pointer is, which is
-     * what React Aria's ColorArea does.
+     * what React Aria's ColorArea does. Shift makes an arrow a step of ten, and
+     * Home and End are saturation's steps of ten, as PageUp and PageDown are
+     * brightness's.
      */
     private readonly handleAreaKeydown;
     /**

package/dist/color-picker/root/color-picker-root.js

@@ -211,11 +211,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
             const color = this.color;
             const along = isRtl(this) ? -1 : 1;
             const held = (at) => clamp(at, 0, 100);
+            const step = event.shiftKey ? 10 : 1;
             const moves = {
-                ArrowDown: { brightness: held(color.brightness - 1) },
-                ArrowLeft: { saturation: held(color.saturation - along) },
-                ArrowRight: { saturation: held(color.saturation + along) },
-                ArrowUp: { brightness: held(color.brightness + 1) },
+                ArrowDown: { brightness: held(color.brightness - step) },
+                ArrowLeft: { saturation: held(color.saturation - along * step) },
+                ArrowRight: { saturation: held(color.saturation + along * step) },
+                ArrowUp: { brightness: held(color.brightness + step) },
+                End: { saturation: held(color.saturation + along * 10) },
+                Home: { saturation: held(color.saturation - along * 10) },
                 PageDown: { brightness: held(color.brightness - 10) },
                 PageUp: { brightness: held(color.brightness + 10) },
             };