@fusion.dev/helix-headless 0.165.0 → 0.167.0

package/dist/canvas/root/canvas-root.js

@@ -4,16 +4,18 @@ 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 { assignSlots, auditName, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
+import { assignSlots, auditName, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforePasteEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixPastedEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { arrangement } from '../arrange.js';
 import { descriptionOf } from '../describe.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
 import { EdgePan } from '../edge-pan.js';
 import { neighborOf } from '../neighbor.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
+import { parseCanvas, pasteInto } from '../paste.js';
 import { snapBox, snapTo, stepTo } from '../snap.js';
-import { colorOf, connector, distanceTo, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
+import { colorOf, connector, distanceTo, ends, extent, fromJsonCanvas, inside, port, reading, sideNear, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 const MARGIN = 32;
 const ARROW = 'canvas-arrow';
@@ -43,6 +45,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     constructor() {
         super(...arguments);
         this.activateHintLabel = 'Press the board to use it';
+        this.arrangedLabel = 'Cards arranged';
         this.comesFromLabel = 'from {cards}';
         this.connectedLabel = 'Asked to connect {from} to {to}.';
         this.connectingLabel = 'Connecting from {from}. Move to another card and press Enter, or Escape to stop.';
@@ -55,9 +58,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.leadsToLabel = 'leads to {cards}';
         this.linkedLabel = '{leadsTo}; {comesFrom}';
         this.movedLabel = '{name} moved to {x}, {y}';
+        this.pastedLabel = '{count, plural, one {# card pasted} other {# cards pasted}}';
         this.readOnly = false;
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
         this.redoneLabel = 'Move made again';
+        this.removedLabel = '{count, plural, one {Asked to remove {name}.} other {Asked to remove # items.}}';
         this.resizedLabel = '{name} resized to {width} by {height}';
         this.roleLabel = 'canvas';
         this.selected = '';
@@ -106,6 +111,15 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             event.preventDefault();
             this.say(formatWords(this, 'copiedLabel', { count: copy.nodes?.length ?? 0 }));
         };
+        this.handlePaste = (event) => {
+            const origin = event.composedPath()[0];
+            if (event.defaultPrevented || origin?.closest?.(INTERACTIVE)) {
+                return;
+            }
+            if (this.paste(event.clipboardData?.getData('text/plain') ?? '')) {
+                event.preventDefault();
+            }
+        };
         this.handleHistoryKey = (event) => {
             if (event.defaultPrevented || event.altKey || !(event.ctrlKey || event.metaKey)) {
                 return;
@@ -129,6 +143,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
         });
         this.handlePointerDown = (event) => {
+            this.settle();
             if (!this.gestureAllowed(event)) {
                 return;
             }
@@ -494,6 +509,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             }
         };
         this.handleStopKeydown = (event) => {
+            this.settle();
             const origin = event.composedPath()[0];
             const edge = this.edgeOf(event);
             const card = edge === undefined ? this.cardOf(event) : undefined;
@@ -1122,6 +1138,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const at = Math.min(...asked.map((one) => walk.findIndex((stop) => stop.key === one)));
         const next = neighborOf(walk.map((one) => one.key), at, (key) => !gone.has(key));
         this.refocus = { gone: [...gone], next };
+        const only = asked[0];
+        const edge = only?.startsWith('edge:')
+            ? edges.find((one) => this.keyOf(one) === only)
+            : undefined;
+        this.say(formatWords(this, 'removedLabel', {
+            count: asked.length,
+            name: edge
+                ? formatWords(this, 'connectionLabel', {
+                    from: this.nameOf(edge.fromNode),
+                    to: this.nameOf(edge.toNode),
+                })
+                : this.nameOf(only ?? ''),
+        }));
         this.dispatchEvent(new HelixRemoveEvent(detail));
     }
     clicked(key, event) {
@@ -1290,6 +1319,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return name === undefined ? undefined : this.byName.get(name);
     }
     requestMove(detail) {
+        this.settle();
         if (!this.dispatchEvent(new HelixBeforeMoveEvent(detail))) {
             return false;
         }
@@ -1359,6 +1389,125 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.say(words);
         return true;
     }
+    paste(document) {
+        const read = typeof document === 'string' ? parseCanvas(document) : document;
+        if (this.readOnly || !read?.nodes?.length) {
+            return false;
+        }
+        const taken = new Set(this.edgeElements.map((one) => one.name).filter(Boolean));
+        const placed = pasteInto(read, this.nodes, taken, (this.snap ?? 0) > 0 ? this.snap : NUDGE * 2);
+        if (!this.dispatchEvent(new HelixBeforePasteEvent({ document: placed }))) {
+            return false;
+        }
+        const tier = this.constructor.tier;
+        const add = (name, attributes, color, text = '') => {
+            const element = this.ownerDocument.createElement(`${tier}${name}`);
+            for (const [key, value] of Object.entries(attributes)) {
+                if (value !== undefined && value !== false && value !== '') {
+                    element.setAttribute(key, value === true ? '' : String(value));
+                }
+            }
+            if (color) {
+                element.style.setProperty(`--${name}-color`, color);
+            }
+            element.textContent = text;
+            this.append(element);
+        };
+        const { edges, nodes } = fromJsonCanvas(placed);
+        for (const one of nodes) {
+            const { color, group, height, label, name, text, tone, width, x, y } = one;
+            add('canvas-node', { group, height, label, name, tone, width, x, y }, color, text ?? one.url ?? one.file);
+        }
+        for (const one of edges) {
+            add('canvas-edge', {
+                from: one.from,
+                'from-end': one.fromEnd,
+                'from-side': one.fromSide,
+                label: one.label,
+                name: one.name,
+                to: one.to,
+                'to-end': one.toEnd,
+                'to-side': one.toSide,
+                tone: one.tone,
+            }, one.color);
+        }
+        this.requestUpdate();
+        this.choose(nodes.map((one) => one.name));
+        this.say(formatWords(this, 'pastedLabel', { count: nodes.length }));
+        this.dispatchEvent(new HelixPastedEvent({ document: placed }));
+        return true;
+    }
+    settle() {
+        const glide = this.gliding;
+        if (!glide) {
+            return;
+        }
+        cancelAnimationFrame(glide.frame);
+        this.gliding = undefined;
+        for (const { name, x, y } of glide.to) {
+            const card = this.byName.get(name);
+            if (card) {
+                card.x = x;
+                card.y = y;
+            }
+        }
+        this.requestUpdate();
+    }
+    arrange(options = {}) {
+        this.settle();
+        const places = arrangement(this.nodes, this.edges, options, this.snap);
+        const from = new Map(this.cards.map((card) => [card.name, { x: card.x, y: card.y }]));
+        const detail = {
+            nodes: [...places]
+                .filter(([name, at]) => from.get(name)?.x !== at.x || from.get(name)?.y !== at.y)
+                .map(([name, at]) => ({ name, ...at })),
+        };
+        if (this.readOnly || detail.nodes.length === 0 || !this.requestMove(detail)) {
+            return false;
+        }
+        this.finishMove(detail);
+        this.say(this.arrangedLabel);
+        const board = this.partNamed('board');
+        let time = 0;
+        if (board && !globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+            this.toggleState('direct', false);
+            time = Number.parseFloat(getComputedStyle(board).transitionDuration) * 1000;
+            this.toggleState('direct', this.direct);
+        }
+        if (!(time > 0) || typeof requestAnimationFrame === 'undefined') {
+            return true;
+        }
+        for (const { name } of detail.nodes) {
+            const card = this.byName.get(name);
+            const start = from.get(name);
+            if (card && start) {
+                card.x = start.x;
+                card.y = start.y;
+            }
+        }
+        const begun = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - begun) / time);
+            const eased = t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+            for (const { name, x, y } of detail.nodes) {
+                const card = this.byName.get(name);
+                const start = from.get(name);
+                if (card && start) {
+                    card.x = start.x + (x - start.x) * eased;
+                    card.y = start.y + (y - start.y) * eased;
+                }
+            }
+            this.requestUpdate();
+            if (t < 1 && this.gliding) {
+                this.gliding.frame = requestAnimationFrame(step);
+            }
+            else {
+                this.gliding = undefined;
+            }
+        };
+        this.gliding = { frame: requestAnimationFrame(step), to: detail.nodes };
+        return true;
+    }
     panCarrying(by) {
         const last = this.carryPointer;
         if (!last) {
@@ -1925,6 +2074,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.addEventListener('keydown', this.handleStopKeydown);
         this.addEventListener('keydown', this.handleHistoryKey);
         this.addEventListener('copy', this.handleCopy);
+        this.addEventListener('paste', this.handlePaste);
         this.addEventListener('pointercancel', this.handlePointerUp);
         this.addEventListener('pointerdown', this.handlePointerDown);
         this.addEventListener('pointermove', this.handlePointerMove);
@@ -1947,6 +2097,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.removeEventListener('keydown', this.handleStopKeydown);
         this.removeEventListener('keydown', this.handleHistoryKey);
         this.removeEventListener('copy', this.handleCopy);
+        this.removeEventListener('paste', this.handlePaste);
+        this.settle();
         this.removeEventListener('pointercancel', this.handlePointerUp);
         this.removeEventListener('pointerdown', this.handlePointerDown);
         this.removeEventListener('pointermove', this.handlePointerMove);
@@ -2323,6 +2475,10 @@ __decorate([
     words,
     property({ attribute: 'activate-hint-label' })
 ], HelixHeadlessCanvas.prototype, "activateHintLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'arranged-label' })
+], HelixHeadlessCanvas.prototype, "arrangedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'comes-from-label' })
@@ -2376,6 +2532,10 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvas.prototype, "order", void 0);
+__decorate([
+    words,
+    property({ attribute: 'pasted-label' })
+], HelixHeadlessCanvas.prototype, "pastedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCanvas.prototype, "path", void 0);
@@ -2390,6 +2550,10 @@ __decorate([
     words,
     property({ attribute: 'redone-label' })
 ], HelixHeadlessCanvas.prototype, "redoneLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'removed-label' })
+], HelixHeadlessCanvas.prototype, "removedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'resized-label' })

package/dist/chat/composer/chat-composer.js

@@ -120,7 +120,11 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.addEventListener('invalid', this.touch);
+        this.addEventListener('invalid', () => {
+            if (!this.checkingValidity) {
+                this.touch();
+            }
+        });
     }
     willUpdate(changed) {
         super.willUpdate(changed);

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

@@ -71,6 +71,18 @@ import '../../copy-button/index.js';
  * keeps hydration clean, and draws the diff once it can read the content. Diff
  * mode is experimental. The rest of the family is stable.
  *
+ * **Several blocks are files**, one shown at a time under a row of tabs, as
+ * Sandbox shows its source panes. Put Code Blocks in the default slot of a
+ * Code Block, and each is a file named on its tab by its `label` or, without
+ * one, its `language`. `file` holds the name of the file shown. The tabs are a
+ * tab list: the arrow keys move to a tab and show its file, the two swapping
+ * on a right-to-left page, and Home and End go to the first and the last.
+ * Choosing one sends `helix-before-change` with the file's name, which you can
+ * cancel, and `change` once `file` holds it. The files not shown carry
+ * `hidden`, and the one shown draws no name of its own, its tab naming it. One
+ * block draws no tabs. A server cannot see the blocks inside, so the client
+ * draws the tabs once it upgrades.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -82,7 +94,11 @@ import '../../copy-button/index.js';
  * @slot copied-icon - The copy button's icon after a copy. Defaults to a check mark.
  * @slot copy-icon - The copy button's icon before a copy. Defaults to a clipboard.
  *
+ * @event {Event} change - A file tab showed its file, whose name `file` now holds.
+ * @event {HelixBeforeChangeEvent} helix-before-change - A file tab is about to show its file, with the file's name in `detail.value`. Cancelable: cancel it to keep the file shown.
  * @event {HelixBeforeToggleEvent} helix-before-toggle - The wrap button was pressed, with the `wrap` it asks for in `detail.checked`. Cancelable: cancel it to keep the lines as they are.
+ * @event {HelixCopyEvent} helix-copy - The copy button put the code on the clipboard, with the text in `detail.value`.
+ * @event {HelixCopyErrorEvent} helix-copy-error - A press on the copy button put nothing on the clipboard: the browser did not allow the write, or there was no code.
  * @event {HelixToggleEvent} helix-toggle - Fired after the wrap button changed `wrap`, with the new value in `detail.checked`.
  *
  * @csspart actions - The box in the header that holds the `actions` slot, drawn while something is slotted there.
@@ -109,6 +125,8 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Applied with `copy-tooltip`.
  * @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 file-tab - One file tab, `aria-selected` while its file is shown.
+ * @csspart files - The file tabs over the blocks a block holds, where there are several.
  * @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.
@@ -132,6 +150,7 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-mark-start - Written by the block on each `mark`: how far down the code its run of lines starts. Do not set it.
  *
  * @cssstate expanded - The expand button has shown every line of a capped block.
+ * @cssstate tabbed - The block is one of several files under another block's tabs, which name it, so it draws no name of its own.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
     /**
@@ -198,6 +217,17 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The expand button's words while the cap hides lines.
      */
     expandLabel: string;
+    /**
+     * The name of the file shown, where the block holds several Code Blocks:
+     * the `label` of one, or its `language` without one.
+     *
+     * Unset, or a name no file has, shows the first.
+     */
+    file?: string;
+    /**
+     * The name of the file tabs, read by screen readers.
+     */
+    filesLabel: 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
@@ -395,6 +425,39 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * block computed and CSS cannot, and no render follows from them.
      */
     private placeLines;
+    /** The Code Blocks this block holds as its code, once its children can be read. */
+    private get blocks();
+    /**
+     * Whether the block is one of several files under another block's tabs,
+     * which name it. Read from the parent, so a block needs no telling.
+     */
+    private get tabbed();
+    /** The file shown among several: the one `file` names, or the first. */
+    private shownFile;
+    /** Shows the file a tab names, once nobody refused. */
+    private chooseFile;
+    /**
+     * Arrow keys, `Home` and `End` on the file tabs, which move to a tab and
+     * show its file, as a tab list that follows focus does and as Sandbox's file
+     * tabs do. Left and Right swap on a right-to-left page.
+     */
+    private readonly handleFileKey;
+    /** The blocks this element hid, to show them again. */
+    private readonly hid;
+    /** How many files the block last held, so each is told when that changes. */
+    private fileCount;
+    /**
+     * Hides the files not shown, shows any this element hid that is now, and
+     * tells each file when how many there are changes, since a file draws its
+     * own name only while it is alone.
+     */
+    private showFile;
+    /**
+     * The tabs over several files, and the file shown under them. One file
+     * draws no tabs, only itself.
+     */
+    private renderFiles;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/code-block/root/code-block-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, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, requestChange, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -13,6 +13,17 @@ import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { foldContext, pairLines, parsePatch, } from '../patch.js';
+const stopPress = (event) => event.stopPropagation();
+const isBlock = (element) => element?.localName.endsWith('code-block') === true;
+const blocksIn = (host) => [...host.children].filter((child) => child.slot === '' && isBlock(child));
+const nameOf = (block) => {
+    const { label, language } = block;
+    return ((typeof label === 'string' && label) ||
+        block.getAttribute('label') ||
+        (typeof language === 'string' && language) ||
+        block.getAttribute('language') ||
+        '');
+};
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
@@ -25,6 +36,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
+        this.filesLabel = 'Files';
         this.hideUnchangedLabel = '{count, plural, one {Hide # unchanged line} other {Hide # unchanged lines}}';
         this.label = '';
         this.language = '';
@@ -49,6 +61,30 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
                         [...this.renderRoot.querySelectorAll('[part="block"], [part="code"]')].some((box) => box.scrollHeight > box.clientHeight + 1);
             }
         };
+        this.handleFileKey = (event) => {
+            const blocks = this.blocks;
+            const count = blocks.length;
+            const at = blocks.indexOf(this.shownFile(blocks));
+            const step = inlineStep(this, event.key);
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? count - 1
+                    : step === 0
+                        ? -1
+                        : (at + step + count) % count;
+            const block = blocks[to];
+            if (!block) {
+                return;
+            }
+            event.preventDefault();
+            this.chooseFile(block);
+            void this.updateComplete.then(() => {
+                this.renderRoot.querySelector('[part="file-tab"][aria-selected="true"]')?.focus();
+            });
+        };
+        this.hid = new Set();
+        this.fileCount = 0;
     }
     static { this.words = 'helix-code-block'; }
     toggleWrap() {
@@ -213,6 +249,67 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         });
     }
+    get blocks() {
+        return this.childrenKnown ? blocksIn(this) : [];
+    }
+    get tabbed() {
+        const parent = this.childrenKnown ? this.parentElement : null;
+        return this.slot === '' && isBlock(parent) && blocksIn(parent).length > 1;
+    }
+    shownFile(blocks) {
+        return blocks.find((block) => nameOf(block) === this.file) ?? blocks[0];
+    }
+    chooseFile(block) {
+        if (block !== this.shownFile(this.blocks)) {
+            requestValue(this, nameOf(block), (name) => {
+                this.file = name;
+            });
+        }
+    }
+    showFile() {
+        const blocks = this.blocks;
+        const files = blocks.length > 1 ? blocks : [];
+        const shown = this.shownFile(files);
+        for (const block of files) {
+            if (block !== shown && !block.hidden) {
+                block.hidden = true;
+                this.hid.add(block);
+            }
+        }
+        for (const block of this.hid) {
+            if (block === shown || !files.includes(block)) {
+                ;
+                block.hidden = false;
+                this.hid.delete(block);
+            }
+        }
+        if (blocks.length !== this.fileCount) {
+            this.fileCount = blocks.length;
+            for (const block of blocks) {
+                block.requestUpdate?.();
+            }
+        }
+    }
+    renderFiles(blocks) {
+        const slot = html `<slot @slotchange=${() => this.requestUpdate()}></slot>`;
+        if (blocks.length < 2) {
+            return slot;
+        }
+        const shown = this.shownFile(blocks);
+        return html `<div part="files" role="tablist" aria-label=${this.filesLabel} @keydown=${this.handleFileKey}>
+        ${blocks.map((block, at) => {
+            const selected = block === shown;
+            return html `<button part="file-tab" id=${`file-${at}`} role="tab" type="button"
+            aria-controls="files-panel" aria-selected=${selected ? 'true' : 'false'}
+            tabindex=${selected ? '0' : '-1'} @click=${() => this.chooseFile(block)}>${nameOf(block)}</button>`;
+        })}
+      </div>
+      <div id="files-panel" role="tabpanel" aria-labelledby=${`file-${blocks.indexOf(shown)}`}>${slot}</div>`;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('tabbed', this.tabbed);
+    }
     updated(changed) {
         super.updated(changed);
         if (typeof ResizeObserver !== 'undefined') {
@@ -220,6 +317,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             this.sizes.observe(this);
         }
         this.measure();
+        this.showFile();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -239,6 +337,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.finishHydration();
     }
     render() {
+        const blocks = this.blocks;
+        if (blocks.length > 0) {
+            return this.renderFiles(blocks);
+        }
         const files = this.files;
         if (files.length > 0) {
             return this.renderDiff(files);
@@ -273,10 +375,11 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             ? html `<span part="gutter" aria-hidden="true">${numbers}</span>`
             : nothing;
         const name = this.label || this.language;
-        return html `${this.renderHeader(name)}
+        const drawn = this.tabbed ? '' : name;
+        return html `${this.renderHeader(name, undefined, drawn)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
-        ${this.headed(name) ? nothing : this.renderCopy()}
+        ${this.headed(drawn) ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -299,10 +402,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     headed(name) {
         return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
     }
-    renderHeader(name, value) {
+    renderHeader(name, value, drawn = name) {
         const acting = this.slotted('actions');
-        return this.headed(name)
-            ? html `<div part="header">${name ? html `<span part="label">${name}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
+        return this.headed(drawn)
+            ? html `<div part="header">${drawn ? html `<span part="label">${drawn}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
     renderWrapToggle() {
@@ -331,6 +434,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
+      @helix-press=${stopPress}
       label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
     >${this.renderCopyIcons()}</${this.tag('copy-button')}>`;
@@ -434,6 +538,13 @@ __decorate([
     words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeBlock.prototype, "file", void 0);
+__decorate([
+    words,
+    property({ attribute: 'files-label' })
+], HelixHeadlessCodeBlock.prototype, "filesLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'hide-unchanged-label' })

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

@@ -1,7 +1,7 @@
 import { AriaForwardController, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A text field that filters a list of options as you type.
@@ -668,6 +668,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * slot is for the page and the method is for whoever is building the styled
      * layer, and a fallback with only the first is one a tier can restyle and
      * cannot change.
+     *
+     * **One em square by its own attributes**, which any stylesheet overrides.
+     * An inline `<svg>` with a `viewBox` and no size fills the width it is given:
+     * measured with no stylesheet, the caret was 1,264px tall, the field 1,289px,
+     * and the panel opened above the top of the page.
      */
     protected renderIndicator(): TemplateResult;
     /**

package/dist/combobox/root/combobox-root.js

@@ -13,7 +13,7 @@ import { html } from 'lit/static-html.js';
 import { optionsAmong } from '../../option/root/option-root.js';
 import { HelixHeadlessTag } from '../../tag/root/tag-root.js';
 import '../../listbox/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 const isInsertion = (event) => !event.inputType?.startsWith('delete');
 let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
@@ -612,7 +612,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     renderIndicator() {
         return html `<slot name="indicator">
-      <svg part="indicator" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
+      <svg part="indicator" fill="currentColor" width="1em" height="1em" viewBox=${caretDown.viewBox} aria-hidden="true">
         ${unsafeSVG(caretDown.content)}
       </svg>
     </slot>`;

package/dist/date-input/root/date-input-root.d.ts

@@ -51,7 +51,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
  * | Home, End on a segment | Goes to the segment's first or last value. |
  * | Digits on a segment | Fill it, and move to the next once it can take no more. |
- * | Backspace, Delete on a segment | Empty the segment. |
+ * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
  * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
  *
  * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a