@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -4,12 +4,12 @@ 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, HelixElement, hostAria, TONE_MARKS, toneMark } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const NOTE = { icon: TONE_MARKS.info.icon, label: 'Note' };
-let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
+let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.toneLabel = '';
@@ -25,6 +25,11 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
       </svg>
     </slot>`;
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
     render() {
         const { icon, label } = this.tone === 'neutral' ? NOTE : (toneMark(this.tone) ?? TONE_MARKS.info);
         const named = this.toneLabel || label;
@@ -32,7 +37,13 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
       <div part="content">
         <slot name="heading"></slot>
         <slot></slot>
-      </div>`;
+      </div>${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.dismiss(),
+            })
+            : nothing}`;
     }
 };
 __decorate([

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

@@ -14,7 +14,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * Name the card with `aria-label` or `aria-labelledby`. These are the only
  * names that work with server rendering, because reading a title from the light
- * DOM needs a DOM, and the server has none.
+ * DOM needs a DOM, and the server has none. **A named card is a group**, so a
+ * reader entering it hears its name; an unnamed one has no role, since a group
+ * with no name only adds "group" to what a reader says.
+ *
+ * `header-actions` and `footer-actions` hold controls at the end of the
+ * header's and the footer's line, as Web Awesome's card does. While one holds
+ * something, its line is a `header-row` or `footer-row` part; otherwise there
+ * is no wrapper and every region is a bare slot. A server cannot see slotted
+ * content, so served actions sit on their own line until the script runs.
  *
  * @since 0.1.0
  * @status stable
@@ -24,8 +32,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The card's main content.
  * @slot footer - Actions that conclude the card.
+ * @slot footer-actions - Controls at the end of the footer's line, with the footer at its start.
  * @slot header - Title and any actions for the whole card.
+ * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
+ *
+ * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
  */
 export declare class HelixHeadlessCard extends HelixElement {
     /**
@@ -42,7 +55,23 @@ export declare class HelixHeadlessCard extends HelixElement {
      * with no attribute on it and the stylesheet only describes the departure.
      */
     mediaPlacement?: 'end';
+    /**
+     * @internal The host's `aria-labelledby`, observed so the card becomes a
+     * group once it is named. Not reflected: the attribute is the consumer's.
+     */
+    protected labelledBy: string | null;
+    /**
+     * @internal The host's `aria-label`, observed for the same reason as
+     * `labelledBy`. Not reflected: the attribute is the consumer's.
+     */
+    protected namedBy: string | null;
+    /** Whether `footer-actions` holds something, read from the slot. */
+    private footerActions;
+    /** Whether `header-actions` holds something, read from the slot. */
+    private headerActions;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private readonly readActions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/card/root/card-root.js

@@ -4,26 +4,59 @@ 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, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.labelledBy = null;
+        this.namedBy = null;
+        this.footerActions = false;
+        this.headerActions = false;
+        this.readActions = () => {
+            const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
+            this.headerActions = filled('header-actions');
+            this.footerActions = filled('footer-actions');
+        };
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'group' });
+        const named = Boolean(this.namedBy?.trim() || this.labelledBy?.trim());
+        hostAria(this.internals, { role: named ? 'group' : '' });
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.readActions();
     }
     render() {
+        const header = html `<slot name="header"></slot
+      ><slot name="header-actions" @slotchange=${this.readActions}></slot>`;
+        const footer = html `<slot name="footer"></slot
+      ><slot name="footer-actions" @slotchange=${this.readActions}></slot>`;
         return html `
       <slot name="media"></slot>
-      <slot name="header"></slot>
+      ${this.headerActions ? html `<div part="header-row">${header}</div>` : header}
       <slot></slot>
-      <slot name="footer"></slot>
+      ${this.footerActions ? html `<div part="footer-row">${footer}</div>` : footer}
     `;
     }
 };
 __decorate([
     property({ attribute: 'media-placement', reflect: true })
 ], HelixHeadlessCard.prototype, "mediaPlacement", void 0);
+__decorate([
+    property({ attribute: 'aria-labelledby' })
+], HelixHeadlessCard.prototype, "labelledBy", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], HelixHeadlessCard.prototype, "namedBy", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "footerActions", void 0);
+__decorate([
+    state()
+], HelixHeadlessCard.prototype, "headerActions", void 0);
 HelixHeadlessCard = __decorate([
     customElement('helix-headless-card')
 ], HelixHeadlessCard);

package/dist/checkbox/root/checkbox-root.js

@@ -86,7 +86,9 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
           ?required=${this.required}
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
+          aria-readonly=${this.readOnly ? 'true' : nothing}
           @change=${this.handleChange}
+          @click=${this.holdReadOnly}
           @input=${this.stopInner}
         />
         <span

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -1,6 +1,7 @@
 import { DisabledCascadeController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
+import '../../checkbox/index.js';
 declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A group of related checkboxes under one label, with one value for the set.
@@ -19,6 +20,11 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * checkboxes are written, read from the boxes themselves. Setting it checks
  * exactly those values and unchecks the rest.
  *
+ * `select-all` draws a box above the set that checks every enabled box, or
+ * unchecks them all once every one is checked. It shows a dash while only some
+ * are checked, and changes the set through the same cancelable
+ * `helix-before-change` a box does.
+ *
  * A checkbox is a member wherever it sits inside the group, in a row or a grid
  * cell of your own, unless another group inside this one holds it. A field of
  * another kind inside the group, such as an "Other" text field, sends its own
@@ -47,19 +53,47 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * @csspart hint - The help under the checkboxes.
  * @csspart items - The element that holds the checkboxes, laid out by `orientation`.
  * @csspart label - The group's label, above the checkboxes.
+ * @csspart select-all - The box that checks or unchecks every box, under `select-all`.
+ * @csspart select-all-box - The select-all box's box, under the mark.
+ * @csspart select-all-control - The select-all box's native input.
+ * @csspart select-all-feedback - The select-all box's own message, which it never shows.
+ * @csspart select-all-field - The row that holds the select-all box and its label.
+ * @csspart select-all-hint - The select-all box's own help, which it never shows.
+ * @csspart select-all-label - The words beside the select-all box.
+ * @csspart select-all-mark - The select-all box's check mark, or its dash while only some boxes are checked.
+ * @csspart select-all-mark-checked - Added to `select-all-mark` while every box is checked.
+ * @csspart select-all-mark-dash - Added to `select-all-mark` while only some boxes are checked, and kept until every one is.
+ * @csspart select-all-mark-indeterminate - Added to `select-all-mark` while only some boxes are checked.
  *
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGroup_base {
+    /**
+     * Whether a box above the set checks or unchecks every enabled box.
+     */
+    selectAll: boolean;
+    /**
+     * The words beside the box `select-all` draws.
+     */
+    selectAllLabel: string;
     /**
      * The checked values, comma separated.
      *
      * Read from the boxes once they are known, so a box a script ticks directly
-     * is in it at once. Written, it is pushed onto the boxes.
+     * is in it at once. Written, it is pushed onto the boxes. A box whose value
+     * holds a comma cannot be named here: use `values`.
      */
     get value(): string;
     set value(next: string);
-    /** The value last written, which the boxes are given at the next update. */
+    /**
+     * The checked values, as a list, in the order the boxes are written.
+     *
+     * The same set as `value`, and the one to use where a value may hold a
+     * comma. Written, it checks exactly those boxes and unchecks the rest.
+     */
+    get values(): string[];
+    set values(next: string[]);
+    /** The values last written, which the boxes are given at the next update. */
     private declared;
     /**
      * Whether `declared` has yet to reach the boxes.
@@ -179,6 +213,22 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      */
     private validate;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Checks every enabled box, or unchecks them all once every one is checked.
+     *
+     * The box's own request is refused, since the box shows what the set holds
+     * and the set is moved here, through one cancelable `helix-before-change`
+     * for the whole set, as a box moves it.
+     */
+    private readonly handleSelectAll;
+    /**
+     * The box above the set that checks or unchecks every box, under
+     * `select-all`, behind a seam a tier can move.
+     *
+     * Checked while every box is, and showing a dash while only some are. It is
+     * in this shadow root, so it is no member of the set and submits nothing.
+     */
+    protected renderSelectAll(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -5,19 +5,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCheckboxGroup_1;
-import { customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
+import '../../checkbox/index.js';
 let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
-        this.declared = '';
+        this.selectAll = false;
+        this.selectAllLabel = 'Select all';
+        this.declared = [];
         this.pending = false;
         this.watched = new Set();
         this.member = {
             hostUpdated: () => {
-                if (this.isConnected && this.value !== this.judged) {
+                if (this.isConnected && (this.selectAll || this.value !== this.judged)) {
                     this.requestUpdate();
                 }
             },
@@ -38,13 +42,12 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
             const wanted = event.detail.checked;
             const next = this.boxes
                 .filter((box) => (box === changed ? wanted : box.checked))
-                .map((box) => box.value)
-                .join(',');
-            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next }))) {
+                .map((box) => box.value);
+            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 event.preventDefault();
                 return;
             }
-            this.value = next;
+            this.values = next;
             this.announceInput();
             this.announceChange();
         };
@@ -53,22 +56,40 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
                 event.stopImmediatePropagation();
             }
         };
+        this.handleSelectAll = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const enabled = this.boxes.filter((box) => !box.isDisabled);
+            const every = enabled.length > 0 && enabled.every((box) => box.checked);
+            const next = this.boxes
+                .filter((box) => (enabled.includes(box) ? !every : box.checked))
+                .map((box) => box.value);
+            if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
+                return;
+            }
+            this.values = next;
+            this.announceInput();
+            this.announceChange();
+        };
     }
     get value() {
+        return this.values.join(',');
+    }
+    set value(next) {
+        this.values = commaList(next);
+    }
+    get values() {
         if (this.pending || !this.hasUpdated || !this.childrenKnown) {
-            return this.declared;
+            return [...this.declared];
         }
         const boxes = this.boxes;
         return boxes.length === 0
-            ? this.declared
-            : boxes
-                .filter((box) => box.checked)
-                .map((box) => box.value)
-                .join(',');
+            ? [...this.declared]
+            : boxes.filter((box) => box.checked).map((box) => box.value);
     }
-    set value(next) {
-        const previous = this.declared;
-        this.declared = next;
+    set values(next) {
+        const previous = this.value;
+        this.declared = [...next];
         this.pending = true;
         this.requestUpdate('value', previous);
     }
@@ -105,10 +126,7 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
             return;
         }
         this.pending = false;
-        const wanted = new Set(this.declared
-            .split(',')
-            .map((entry) => entry.trim())
-            .filter(Boolean));
+        const wanted = new Set(this.declared);
         for (const box of boxes) {
             box.checked = wanted.has(box.value);
         }
@@ -159,8 +177,30 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.validate();
         this.linkHost();
     }
+    renderSelectAll() {
+        if (!this.selectAll) {
+            return nothing;
+        }
+        const boxes = this.childrenKnown ? this.boxes : [];
+        const ticked = boxes.filter((box) => box.checked).length;
+        const every = boxes.length > 0 && ticked === boxes.length;
+        const box = this.tag('checkbox');
+        return html `<${box}
+      part="select-all"
+      exportparts="box: select-all-box, control: select-all-control,
+        feedback: select-all-feedback, field: select-all-field, hint: select-all-hint,
+        label: select-all-label, mark: select-all-mark, mark-checked: select-all-mark-checked,
+        mark-dash: select-all-mark-dash, mark-indeterminate: select-all-mark-indeterminate"
+      .checked=${every}
+      .indeterminate=${ticked > 0 && !every}
+      ?disabled=${this.isDisabled}
+      label=${this.selectAllLabel}
+      @helix-before-toggle=${this.handleSelectAll}
+      @input=${(event) => event.stopPropagation()}
+    ></${box}>`;
+    }
     render() {
-        return html `${this.renderGroupLabel()}
+        return html `${this.renderGroupLabel()}${this.renderSelectAll()}
       <div part="items">
         ${''}
         <slot @slotchange=${() => this.requestUpdate()}></slot>
@@ -168,9 +208,18 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
       ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'select-all', type: Boolean })
+], HelixHeadlessCheckboxGroup.prototype, "selectAll", void 0);
+__decorate([
+    property({ attribute: 'select-all-label' })
+], HelixHeadlessCheckboxGroup.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCheckboxGroup.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCheckboxGroup.prototype, "values", null);
 HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = __decorate([
     customElement('helix-headless-checkbox-group')
 ], HelixHeadlessCheckboxGroup);

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

@@ -0,0 +1,13 @@
+/**
+ * How many lines a block of code shows.
+ *
+ * A final line break ends the last line rather than starting another, which is
+ * how an editor counts a file and how the block draws one: `a\nb\n` is two
+ * lines. A Windows line break is one break. Empty code has no lines.
+ */
+export declare const lineCount: (code: string) => number;
+/**
+ * The numbers for a gutter of `count` lines, one to a line, as the text a
+ * `<pre>` draws beside the code. The stylesheet aligns them to the end.
+ */
+export declare const gutterNumbers: (count: number) => string;

package/dist/code-block/lines.js

@@ -0,0 +1,2 @@
+export const lineCount = (code) => code === '' ? 0 : code.replace(/\r?\n$/, '').split(/\r?\n/).length;
+export const gutterNumbers = (count) => Array.from({ length: count }, (_, index) => String(index + 1)).join('\n');

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

@@ -14,6 +14,12 @@ import '../../copy-button/index.js';
  *
  * For a fragment of code inside a sentence, use `Code`.
  *
+ * Set `line-numbers` to number the lines in a gutter beside the code, hidden
+ * from the accessibility tree and left out of a copy. Set `highlight` to a
+ * function that turns the code into highlighted markup, such as one wrapping
+ * Shiki or Prism, and the block draws what it returns; the code stays in the
+ * slot, so the copy button and the page's own text are the code as written.
+ *
  * Set `diff` to show a change. Put a unified diff, the output of `git diff` or
  * `diff -u`, in the same slot, and the block draws the lines it added and
  * removed. The block never computes a diff itself. Line numbers come from the
@@ -42,6 +48,7 @@ import '../../copy-button/index.js';
  * @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.
  * @csspart copy-button - The inner button.
+ * @csspart copy-live - The copy button's live region, which speaks while the button is pending.
  * @csspart copy-mark - The clipboard icon, and the check mark that replaces it after a copy.
  * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The copy button's tooltip.
@@ -57,6 +64,7 @@ import '../../copy-button/index.js';
  * @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 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.
  * @csspart hunk - In a diff, a `@@` line saying where the lines under it are.
  * @csspart label - The file name or language, where one is given.
@@ -84,6 +92,19 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false` reflects as no attribute at all.
      */
     diff: boolean;
+    /**
+     * Turns the code into highlighted markup, which the block draws in place of
+     * the plain text.
+     *
+     * Called with the code as written and returning HTML, such as the output of
+     * Shiki's `codeToHtml` or Prism's `highlight`. **The markup is drawn as
+     * given**, so it has to escape the code it was handed, which those
+     * highlighters do. Bind the language in the function you pass. The code
+     * stays in the slot, so the copy button copies it as written and a reader
+     * without the script still has it. Not called on a server, which has no code
+     * to read, nor for a diff.
+     */
+    highlight?: (code: string) => string;
     /**
      * The block's name, usually a file name or a language.
      *
@@ -91,6 +112,15 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * carries no name of its own.
      */
     label: string;
+    /**
+     * Whether the lines are numbered in a gutter beside the code.
+     *
+     * The numbers are hidden from the accessibility tree and are not part of a
+     * copy, which takes the code alone. Reflected, because the stylesheet lays
+     * the gutter out beside the code. A diff numbers its lines from its hunks
+     * whether or not this is set.
+     */
+    lineNumbers: boolean;
     /**
      * Whether to leave the copy button off.
      *

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

@@ -7,8 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
+import { gutterNumbers, lineCount } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
@@ -17,6 +19,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.copyLabel = 'Copy code';
         this.diff = false;
         this.label = '';
+        this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
     }
@@ -60,9 +63,21 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         if (files.length > 0) {
             return this.renderDiff(files);
         }
+        const text = this.text;
+        const highlighted = this.highlight && text !== '' ? this.highlight(text) : undefined;
+        const code = highlighted === undefined
+            ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
+            : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
+              hidden
+              @slotchange=${() => this.requestUpdate()}
+            ></slot>`;
+        const lines = lineCount(text);
+        const gutter = this.lineNumbers
+            ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
+            : nothing;
         return html `${this.renderHeader(this.label)}
       <div part="frame">
-        <pre part="block"><code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code></pre>
+        <pre part="block">${gutter}${code}</pre>
         ${this.label ? nothing : this.renderCopy()}
       </div>`;
     }
@@ -77,7 +92,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopyButton(value = this.text) {
         return html `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
@@ -144,9 +159,15 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
 __decorate([
     property()
 ], HelixHeadlessCodeBlock.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'line-numbers', reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type ColorFormat, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type ColorFormat, type ColorWords, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../color-picker/index.js';
 declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
@@ -28,6 +28,10 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * waits until you are done. Dragging in the panel sends `input` as the color
  * moves and `change` when it settles.
  *
+ * The trigger and ArrowDown open the panel with focus in the square. Tab moves
+ * between the panel's controls without leaving it, and Escape closes it and
+ * returns focus to the field.
+ *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
  * parsing the value.
@@ -72,10 +76,16 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-controls - The row under the square.
  * @csspart picker-eyedropper - The control that samples a color from the screen.
  * @csspart picker-eyedropper-button - The button inside `picker-eyedropper`.
+ * @csspart picker-eyedropper-live - The live region of the button inside `picker-eyedropper`, which says its pending label.
  * @csspart picker-eyedropper-text - The words on the button inside `picker-eyedropper`.
+ * @csspart picker-field - One channel's number field with its label, in `channel-fields`.
+ * @csspart picker-field-input - The number input in a channel's field.
+ * @csspart picker-field-label - The name above a channel's number input.
+ * @csspart picker-fields - The row of channel number fields, in `channel-fields`.
  * @csspart picker-footer - The row holding the value and the tools.
  * @csspart picker-format - The control that changes the syntax the value is written in.
  * @csspart picker-format-button - The button inside `picker-format`.
+ * @csspart picker-format-live - The live region of the button inside `picker-format`, which says its pending label.
  * @csspart picker-format-text - The words on the button inside `picker-format`.
  * @csspart picker-grid - The saturation and brightness square.
  * @csspart picker-grid-brightness - The range input for the square's vertical axis.
@@ -110,6 +120,20 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * Whether the panel shows a number field for each channel of the color.
+     * Passed to the panel; see Color Picker's `channel-fields`.
+     */
+    channelFields: boolean;
+    /**
+     * The words a color's name is spoken in, as JSON keyed by their English,
+     * such as `{"red": "rot", "vibrant": "kräftiges"}`.
+     *
+     * Passed to the panel, whose square, hue ramp and presets say the color's
+     * name, and read by the swatch in `swatch`, which says it before the value.
+     * Color Picker lists the keys.
+     */
+    colorWords: Partial<ColorWords>;
     /**
      * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
      *
@@ -196,6 +220,15 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
     protected get anchor(): HTMLElement | null;
     /** What the picker should show, which is only ever a color. */
     private get picked();
+    /**
+     * What the swatch says in `swatch`: the color's name and then the value, or
+     * the trigger's words where there is no color yet.
+     *
+     * The name first, because it is what a sighted reader takes from the block of
+     * color, and the value after it, because it is what the field holds and what
+     * a reader may need to copy.
+     */
+    private get swatchWords();
     /** What the trigger's swatch paints, which is only ever a color. */
     private get painted();
     /** Relayed under this element's name, so a consumer hears one control. */