@fusion.dev/helix-headless 0.145.0 → 0.146.0

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

@@ -20,6 +20,12 @@ import '../../copy-button/index.js';
  * 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 `expandable` on a block whose height is capped, such as by
+ * `--code-block-max-block-size`, and a button under it shows every line and
+ * then fewer again, as a docs site's long example does. The button is drawn
+ * only while the cap hides something, says whether the block is expanded, and
+ * the block carries `:state(expanded)` while it is.
+ *
  * 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
@@ -61,6 +67,7 @@ import '../../copy-button/index.js';
  * @csspart copy-tooltip-left - The tooltip while it is left of the copy button. Applied with `copy-tooltip`.
  * @csspart copy-tooltip-right - The tooltip while it is right of the copy button. Applied with `copy-tooltip`.
  * @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 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.
@@ -75,8 +82,14 @@ import '../../copy-button/index.js';
  * @csspart removed - In a diff, a line only the old version has, a `<del>`.
  * @csspart split - In a split diff, the two versions side by side.
  * @csspart text - In a diff, a line's code.
+ *
+ * @cssstate expanded - The expand button has shown every line of a capped block.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The expand button's words while the block shows every line.
+     */
+    collapseLabel: string;
     /**
      * The copy button's name and tooltip text after a copy.
      */
@@ -96,6 +109,19 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * `false` reflects as no attribute at all.
      */
     diff: boolean;
+    /**
+     * Whether a block whose height is capped takes a button that shows every
+     * line, and fewer again.
+     *
+     * The cap is the page's, `--code-block-max-block-size` on the styled tier;
+     * the button is drawn only while the cap hides something, measured as the
+     * block lays out. Not for a diff, whose files each scroll on their own.
+     */
+    expandable: boolean;
+    /**
+     * The expand button's words while the cap hides lines.
+     */
+    expandLabel: string;
     /**
      * Turns the code into highlighted markup, which the block draws in place of
      * the plain text.
@@ -103,7 +129,9 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * 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
+     * highlighters do. A `<pre>` and `<code>` around the whole of it, which
+     * Shiki writes, are taken off, so the lines sit level with the gutter's
+     * numbers and the block keeps one tab stop. 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.
@@ -184,10 +212,30 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * was not redrawn.
      */
     private observer;
+    /** Whether the cap hides lines, measured from the drawn block. */
+    private capped;
+    /** Whether the expand button has shown every line. */
+    private expanded;
+    /** Watches the block's size, while it is expandable. */
+    private sizes;
+    /**
+     * Reads whether the cap hides lines: the scroller is taller inside than it
+     * is drawn. The styled tier caps the `<code>`, and a page may cap the
+     * `<pre>`, so both are asked. Left as it was while expanded, which shows
+     * everything.
+     */
+    private readonly measure;
+    protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The button that shows every line of a capped block, and fewer again, or
+     * nothing while the cap hides nothing. Not on a server, which cannot
+     * measure, so a served block draws none and the client adds it.
+     */
+    private renderExpand;
     /**
      * The name with the copy button beside it, or nothing when there is no name.
      *

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

@@ -6,22 +6,36 @@ 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 { property, state } 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 { highlightedLines } from '../highlight.js';
 import { gutterNumbers, lineCount } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.collapseLabel = 'Show fewer lines';
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy code';
         this.diff = false;
+        this.expandable = false;
+        this.expandLabel = 'Show all lines';
         this.label = '';
         this.lineNumbers = false;
         this.noCopy = false;
         this.parsed = { files: [], text: '' };
+        this.capped = false;
+        this.expanded = false;
+        this.measure = () => {
+            if (!this.expanded) {
+                this.capped =
+                    this.expandable &&
+                        !this.diff &&
+                        [...this.renderRoot.querySelectorAll('[part="block"], [part="code"]')].some((box) => box.scrollHeight > box.clientHeight + 1);
+            }
+        };
     }
     get files() {
         if (!this.diff) {
@@ -43,6 +57,14 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             .map((node) => node.textContent ?? '')
             .join('');
     }
+    updated(changed) {
+        super.updated(changed);
+        if (this.expandable && typeof ResizeObserver !== 'undefined') {
+            this.sizes ??= new ResizeObserver(this.measure);
+            this.sizes.observe(this);
+        }
+        this.measure();
+    }
     connectedCallback() {
         super.connectedCallback();
         if (typeof MutationObserver !== 'undefined') {
@@ -52,6 +74,8 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.sizes?.disconnect();
+        this.sizes = undefined;
         this.observer?.disconnect();
     }
     firstUpdated(changed) {
@@ -64,7 +88,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             return this.renderDiff(files);
         }
         const text = this.text;
-        const highlighted = this.highlight && text !== '' ? this.highlight(text) : undefined;
+        const highlighted = this.highlight && text !== '' ? highlightedLines(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
@@ -79,7 +103,23 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
       <div part="frame">
         <pre part="block">${gutter}${code}</pre>
         ${this.label ? nothing : this.renderCopy()}
-      </div>`;
+      </div>${this.renderExpand()}`;
+    }
+    renderExpand() {
+        if (!this.expandable || !(this.capped || this.expanded)) {
+            return nothing;
+        }
+        return html `<button
+      aria-expanded=${this.expanded ? 'true' : 'false'}
+      part="expand"
+      type="button"
+      @click=${() => {
+            this.expanded = !this.expanded;
+            this.toggleState('expanded', this.expanded);
+        }}
+    >
+      ${this.expanded ? this.collapseLabel : this.expandLabel}
+    </button>`;
     }
     renderHeader(name, value) {
         return name
@@ -150,6 +190,9 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'collapse-label' })
+], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
@@ -159,6 +202,12 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "expandable", void 0);
+__decorate([
+    property({ attribute: 'expand-label' })
+], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCodeBlock.prototype, "highlight", void 0);
@@ -174,6 +223,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeBlock.prototype, "capped", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeBlock.prototype, "expanded", void 0);
 HelixHeadlessCodeBlock = __decorate([
     customElement('helix-headless-code-block')
 ], HelixHeadlessCodeBlock);

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

@@ -45,6 +45,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @slot end - Content at the trailing end, before the trigger.
  * @slot feedback - The message that says what is wrong with the value.
  * @slot hint - Help text under the field.
+ * @slot panel-footer - Content in the panel under the picker, such as a note or an action.
+ * @slot panel-header - Content in the panel above the picker, such as a heading or a shortcut.
  * @slot start - Content at the leading end of the field, inside its border.
  * @slot trigger - The icon on the trigger, which shows that the field opens a panel.
  *
@@ -78,6 +80,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @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-feedback - The field's message inside the open panel, under the picker, where the panel covers the one under the field.
  * @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.

package/dist/color-input/root/color-input-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 { AriaForwardController, colorName, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, } from '@fusion.dev/helix-core';
+import { AriaForwardController, colorName, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, parseColor, toCss, wordsConverter, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -117,13 +117,14 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         channel-markers: picker-channel-markers, channel-output: picker-channel-output,
         channels: picker-channels, controls: picker-controls, eyedropper: picker-eyedropper,
         eyedropper-button: picker-eyedropper-button, eyedropper-live: picker-eyedropper-live, eyedropper-text: picker-eyedropper-text,
-        field: picker-field, field-input: picker-field-input, field-label: picker-field-label,
+        feedback: picker-feedback, field: picker-field, field-input: picker-field-input, field-label: picker-field-label,
         fields: picker-fields, footer: picker-footer, format: picker-format,
         format-button: picker-format-button, format-live: picker-format-live, format-text: picker-format-text, grid: picker-grid,
         grid-brightness: picker-grid-brightness, grid-handle: picker-grid-handle,
         grid-saturation: picker-grid-saturation, icon: picker-icon, sample: picker-sample,
         swatch: picker-swatch, swatches: picker-swatches, value: picker-value"
       ?invalid=${this.resolvedFeedback !== ''}
+      .feedback=${this.resolvedFeedback}
       ?alpha=${this.alpha}
       ?channel-fields=${this.channelFields}
       ?no-format=${this.noFormat}
@@ -209,7 +210,9 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         popover="manual"
         ?hidden=${!this.open}
       >
+        <slot name="panel-header"></slot>
         ${this.renderPicker()}
+        <slot name="panel-footer"></slot>
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -224,7 +227,7 @@ __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorInput.prototype, "channelFields", void 0);
 __decorate([
-    property({ attribute: 'color-words', type: Object })
+    property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorInput.prototype, "colorWords", void 0);
 __decorate([
     property({ reflect: true })

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

@@ -29,8 +29,12 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  *
  * A screen reader hears the color's name, such as "vibrant red", after the two
  * numbers on the square and after the number on the hue ramp, and each preset
- * is named by its color. Set `color-words` to speak the names in another
- * language.
+ * is named by its color. The opacity ramp is heard as a percentage. Set
+ * `color-words` to speak the names in another language.
+ *
+ * The presets are a listbox with the current color selected, and one tab
+ * stop. The arrow keys move between them, Home and End go to the ends, and
+ * Enter, Space or a press chooses one.
  *
  * @since 0.1.0
  * @status stable
@@ -64,6 +68,7 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart eyedropper-button - The button inside `eyedropper`.
  * @csspart eyedropper-live - The live region of the button inside `eyedropper`, which says its pending label.
  * @csspart eyedropper-text - The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
+ * @csspart feedback - The message under the picker, while `feedback` is set.
  * @csspart field - One channel's number field with its label, in `channel-fields`.
  * @csspart field-input - The number input in a channel's field.
  * @csspart field-label - The name above a channel's number input.
@@ -80,8 +85,8 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart grid-brightness - The range input for the square's vertical axis.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
  * @csspart sample - A chip of the current color. Pressing it copies the value.
- * @csspart swatch - One preset.
- * @csspart swatches - The row of presets.
+ * @csspart swatch - One preset, an option in the `swatches` listbox.
+ * @csspart swatches - The row of presets, a listbox.
  * @csspart value - The text field that holds the color. It accepts a typed or pasted color.
  *
  * @cssproperty --color-picker-brightness - The chosen brightness, 0 to 100, as a percentage.
@@ -160,6 +165,15 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * What the eyedropper is called.
      */
     eyedropperLabel: string;
+    /**
+     * A message under the picker, such as what is wrong with the color.
+     *
+     * While set, the picker is invalid and does not submit, as a field's
+     * `feedback` is, and the square and the value text are described by it.
+     * Color Input shows its own message here, so a reader in the open panel
+     * still sees it.
+     */
+    feedback: string;
     /**
      * The syntax the value is written in: `hex`, `rgb`, or `hsl`.
      *
@@ -322,6 +336,8 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * server's markup, which was rendered without it.
      */
     private sampling;
+    /** The preset the reader was last on, which holds the row's one tab stop. */
+    private swatchAt;
     /**
      * Whether the value on this element was produced here.
      *
@@ -393,6 +409,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     private readonly copier;
     /** Takes a preset, in this picker's syntax rather than as the preset spelled it. */
     private readonly handleSwatch;
+    /**
+     * The arrows, Home and End in the presets: focus moves, and nothing is
+     * chosen until Enter, Space or a press, as in React Aria's swatch picker.
+     */
+    private readonly handleSwatchKeydown;
     /** Walks the format on, and rewrites the value in it. */
     private readonly handleFormat;
     /**
@@ -449,6 +470,8 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * what React Aria's ColorArea does.
      */
     private readonly handleAreaKeydown;
+    /** @internal `feedback` marks the picker invalid, as a field's does. */
+    protected get validityFeedback(): string;
     /**
      * Reports "required and empty", or clears it.
      *
@@ -557,6 +580,12 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * tiers.
      */
     protected renderTools(): TemplateResult;
+    /**
+     * The presets, as a listbox of colors with the current one selected, which
+     * is React Aria's ColorSwatchPicker: one tab stop, held by the preset the
+     * reader was last on, then the selected one, then the first.
+     */
+    private renderSwatches;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,13 +4,14 @@ 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 { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, isRtl, MixinControllerValue, parseColor, splitValues, toCss, } from '@fusion.dev/helix-core';
+import { CopyController, capturePointer, colorName, customElement, drawIcon, fillTemplate, formatColor, HelixFormElement, HelixSampleEndEvent, HelixSampleStartEvent, hostAria, hueName, inlineStep, isRtl, MixinControllerValue, parseColor, rovingStop, splitValues, toCss, wordsConverter, } from '@fusion.dev/helix-core';
 import { eyedropper } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import { channelFields, writeChannel } from '../channels.js';
+import { swatchMove } from '../swatches.js';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -28,6 +29,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy {value}';
         this.eyedropperLabel = 'Sample a color from the screen';
+        this.feedback = '';
         this.formatLabel = 'Syntax: {format}. Change it.';
         this.greenLabel = 'Green';
         this.hueLabel = 'Hue';
@@ -79,10 +81,33 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.copier = new CopyController(this);
         this.handleSwatch = (preset) => {
             const parsed = parseColor(preset);
-            if (parsed) {
+            if (!parsed) {
+                return;
+            }
+            const format = this.format ?? 'hex';
+            const fields = channelFields(preset, parsed, format, this.alpha);
+            const first = fields[0];
+            const exact = first && writeChannel(fields, format, this.alpha, first.channel, first.value);
+            if (exact) {
+                this.takeWritten(exact);
+            }
+            else {
                 this.move(parsed);
-                this.settle();
             }
+            this.settle();
+        };
+        this.handleSwatchKeydown = (event) => {
+            const row = [
+                ...(this.renderRoot.querySelectorAll('[part="swatches"] [part="swatch"]') ?? []),
+            ];
+            const at = row.indexOf(event.target);
+            const next = swatchMove(event.key, inlineStep(this, event.key), at, row.length);
+            if (at < 0 || next === null) {
+                return;
+            }
+            event.preventDefault();
+            this.swatchAt = next;
+            row[next]?.focus();
         };
         this.handleFormat = () => {
             if (this.readOnly) {
@@ -214,6 +239,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         this.internals.setFormValue(this.value === '' ? null : this.value);
         this.reportRequired();
     }
+    get validityFeedback() {
+        return this.feedback;
+    }
     reportRequired() {
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a color.', this.partNamed('grid') ?? undefined);
@@ -370,6 +398,40 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                       </${this.tag('button')}>`}
               </${this.tag('button-group')}>`;
     }
+    renderSwatches(painted) {
+        const presets = this.presets;
+        const chosen = presets.map((preset) => {
+            const parsed = parseColor(preset);
+            return parsed !== null && toCss(parsed) === painted;
+        });
+        const indexes = presets.map((_, index) => index);
+        const stop = rovingStop(indexes, this.swatchAt, { selected: (index) => chosen[index] === true });
+        return html `<div
+      part="swatches"
+      role="listbox"
+      aria-label=${this.presetsLabel}
+      aria-orientation="horizontal"
+      @keydown=${this.handleSwatchKeydown}
+    >
+      ${presets.map((preset, index) => {
+            const parsed = parseColor(preset);
+            return html `<button
+          part="swatch"
+          type="button"
+          role="option"
+          tabindex=${index === stop ? '0' : '-1'}
+          aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
+          aria-selected=${chosen[index] ? 'true' : 'false'}
+          style="--color-picker-swatch: ${preset}"
+          ?disabled=${this.isDisabled}
+          @click=${() => {
+                this.swatchAt = index;
+                this.handleSwatch(preset);
+            }}
+        ></button>`;
+        })}
+    </div>`;
+    }
     render() {
         const color = this.color;
         const painted = toCss(color);
@@ -394,6 +456,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           min="0"
           max="100"
           aria-label=${axisName(this.saturationLabel)}
+          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${both}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.saturation)}
@@ -409,6 +472,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
           max="100"
           tabindex="-1"
           aria-label=${axisName(this.brightnessLabel)}
+          aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
           aria-valuetext=${reversed}
           aria-invalid=${this.invalid ? 'true' : nothing}
           .value=${String(color.brightness)}
@@ -431,7 +495,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         ></button>
         <div part="channels">
           ${this.renderChannel('hue', this.hueLabel, 360, color.hue, `{value}, ${hue}`)}
-          ${this.alpha ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha) : nothing}
+          ${this.alpha
+            ? this.renderChannel('alpha', this.opacityLabel, 100, color.alpha, new Intl.NumberFormat(this.lang || undefined, { style: 'percent' }).format(color.alpha / 100))
+            : nothing}
         </div>
       </div>
       ${this.channelFields ? this.renderFields(color) : nothing}
@@ -447,6 +513,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 part="value"
                 type="text"
                 aria-label=${this.valueLabel}
+                aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
                 aria-invalid=${this.invalid ? 'true' : nothing}
                 autocomplete=${this.autocomplete || nothing}
                 spellcheck="false"
@@ -462,22 +529,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         ${this.tools ? html `${this.renderTools()}` : nothing}
       </div>
 
-      ${this.presets.length === 0
-            ? nothing
-            : html `<div part="swatches" role="group" aria-label=${this.presetsLabel}>
-                ${this.presets.map((preset) => {
-                const parsed = parseColor(preset);
-                return html `<button
-                    part="swatch"
-                    type="button"
-                    aria-label=${parsed ? colorName(parsed, this.colorWords, this.lang) : preset}
-                    aria-pressed=${parsed !== null && toCss(parsed) === painted ? 'true' : 'false'}
-                    style="--color-picker-swatch: ${preset}"
-                    ?disabled=${this.isDisabled}
-                    @click=${() => this.handleSwatch(preset)}
-                  ></button>`;
-            })}
-              </div>`}`;
+      ${this.presets.length === 0 ? nothing : this.renderSwatches(painted)}
+      ${this.feedback === '' ? nothing : html `<p part="feedback" id="feedback">${this.feedback}</p>`}`;
     }
 };
 __decorate([
@@ -499,7 +552,7 @@ __decorate([
     property({ attribute: 'channel-fields', type: Boolean })
 ], HelixHeadlessColorPicker.prototype, "channelFields", void 0);
 __decorate([
-    property({ attribute: 'color-words', type: Object })
+    property({ attribute: 'color-words', converter: wordsConverter })
 ], HelixHeadlessColorPicker.prototype, "colorWords", void 0);
 __decorate([
     property({ attribute: 'copied-label' })
@@ -510,6 +563,9 @@ __decorate([
 __decorate([
     property({ attribute: 'eyedropper-label' })
 ], HelixHeadlessColorPicker.prototype, "eyedropperLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessColorPicker.prototype, "feedback", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessColorPicker.prototype, "format", void 0);
@@ -573,6 +629,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "sampling", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
 HelixHeadlessColorPicker = __decorate([
     customElement('helix-headless-color-picker')
 ], HelixHeadlessColorPicker);

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

@@ -0,0 +1,12 @@
+/**
+ * Where a key moves focus in a row of presets, or `null` for a key that moves
+ * nothing.
+ *
+ * The presets are a listbox, React Aria's ColorSwatchPicker: one tab stop, and
+ * the arrows move between the colors without choosing one. `along` is the
+ * horizontal arrow's direction along the line of text, from `inlineStep`, so
+ * the row reverses with it; Up and Down go to the previous and the next as a
+ * list does, since the row wraps. Home and End go to the ends. Focus stops at
+ * the ends; a row of colors does not wrap around.
+ */
+export declare const swatchMove: (key: string, along: -1 | 0 | 1, at: number, count: number) => number | null;

package/dist/color-picker/swatches.js

@@ -0,0 +1,26 @@
+export const swatchMove = (key, along, at, count) => {
+    if (count === 0) {
+        return null;
+    }
+    const last = count - 1;
+    let next;
+    if (along !== 0) {
+        next = at + along;
+    }
+    else if (key === 'ArrowUp') {
+        next = at - 1;
+    }
+    else if (key === 'ArrowDown') {
+        next = at + 1;
+    }
+    else if (key === 'Home') {
+        next = 0;
+    }
+    else if (key === 'End') {
+        next = last;
+    }
+    else {
+        return null;
+    }
+    return Math.min(last, Math.max(0, next));
+};