@fusion.dev/helix-headless 0.150.0 → 0.151.0

package/dist/area-chart/root/area-chart-root.d.ts

@@ -52,6 +52,9 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * compare the parts with each other; the scale then fits the largest part
  * rather than the total.
  *
+ * `value-axis` draws the scale's numbers beside the plot, at the levels
+ * `gridlines` rules: amounts in `locale`, or percentages under `share`.
+ *
  * The drawing is hidden from screen readers. The text summary gives the latest
  * reading's total and each part's share of it, and the table beside the chart
  * has every number.
@@ -65,13 +68,22 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * Every numeric column is a part, so leave a total column out of the table the
  * chart reads, or it is counted twice. A negative reading is drawn as zero.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
+ * pressed with Enter or Space, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
  * @csspart area - One part's band.
+ * @csspart axis - The numbers of the scale beside the plot, under `value-axis`.
  * @csspart baseline - The rule at zero, which is the floor of the drawing.
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart guide - A rule down the reading a pointer is resting on.
@@ -83,6 +95,7 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart summary - The total and each part's share at the latest reading, written as a sentence for screen readers.
  * @csspart svg - The drawing surface the bands sit on.
+ * @csspart tick - One number on the axis, placed with `inset-block-start` at its level.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
  * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
@@ -99,6 +112,8 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-right - The bubble while it is right of the reading, beside `tooltip`.
  * @csspart tooltip-top - The bubble while it is above the reading, beside `tooltip`.
  * @csspart tooltip-value - A column's value inside the tooltip.
+ *
+ * @cssproperty --area-chart-axis - The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis.
  */
 export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base {
     /**
@@ -106,6 +121,13 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      * `registerWords('de', { 'helix-area-chart': { totalLabel: 'Summe' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * How a band's edge gets from one reading to the next.
      *
@@ -161,6 +183,14 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      * The name for the sum of the parts, shown in the tooltip and the summary.
      */
     totalLabel: string;
+    /**
+     * Draws the scale's numbers beside the plot, the `axis` part, at the levels
+     * `gridlines` rules: amounts, or percentages under `share`.
+     *
+     * Absent draws none: bands read as a composition need no numbers beside
+     * them, and the tooltip and the table hold every reading.
+     */
+    valueAxis: boolean;
     private warnedAboutNegatives;
     /** Whether the levels are ruled, which is every value but `category`. */
     protected get rulesValue(): boolean;
@@ -184,6 +214,12 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      */
     private warnNegative;
     protected render(): TemplateResult;
+    /**
+     * The scale's numbers beside the plot, under `value-axis`: amounts written
+     * in the chart's locale, or percentages under `share`. A seam, so a
+     * subclass can write the numbers its own way, such as a currency.
+     */
+    protected renderAxis(y: (value: number) => number, domain: [number, number]): TemplateResult;
     /**
      * The bands, behind a seam the styled tier can move.
      *

package/dist/area-chart/root/area-chart-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 { CHART_PLOT, customElement, drawTooltip, formatNumbers, formatWords, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, drawValueAxis, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -27,9 +27,16 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         this.share = false;
         this.summaryLabel = '{reading}: {totalLabel} {total}; {shares}.';
         this.totalLabel = 'Total';
+        this.valueAxis = false;
         this.warnedAboutNegatives = false;
     }
     static { this.words = 'helix-area-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -100,9 +107,14 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const y = linear(domain, [PLOT_HEIGHT, 0]);
         const slot = PLOT_WIDTH / rows.length;
         const x = linear([0, Math.max(rows.length - 1, 1)], [slot / 2, PLOT_WIDTH - slot / 2]);
-        return html `${this.renderPlot(stack, rows.length, x, y, domain)}
+        return html `${this.valueAxis ? this.renderAxis(y, domain) : nothing}${this.renderPlot(stack, rows.length, x, y, domain)}
       ${this.renderLabels(rows.map((row) => row.label))} ${this.renderSummary(stack, rows)}`;
     }
+    renderAxis(y, domain) {
+        const locale = wordsLocale(this);
+        const percent = percentIn(locale);
+        return drawValueAxis(domain, (value) => (y(value) / PLOT_HEIGHT) * 100, this.share ? (value) => percent.format(value) : formatNumbers(locale), (widest) => `--area-chart-axis: ${widest}ch`);
+    }
     renderPlot(stack, count, x, y, domain) {
         const order = stack.layers.map((_, depth) => depth).reverse();
         return html `<div
@@ -249,6 +261,9 @@ __decorate([
     words,
     property({ attribute: 'total-label' })
 ], HelixHeadlessAreaChart.prototype, "totalLabel", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessAreaChart.prototype, "valueAxis", void 0);
 HelixHeadlessAreaChart = __decorate([
     customElement('helix-headless-area-chart')
 ], HelixHeadlessAreaChart);

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -30,13 +30,21 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * The component writes the custom properties below with numbers it computes,
  * and the stylesheet that draws the chart reads them. Do not set them yourself.
  *
+ * **A tap shows the reading under it**, and keeps it until a tap lands
+ * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
+ * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
+ * pressed with Enter or Space, for a page that opens what a reading stands for.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
  * @aliases Column Chart, Categorical Chart
  * @documentation https://fusion.dev/helix/components/bar-chart
  *
- * @csspart axis - The numbers of one scale, drawn only when `secondary` splits the chart into two scales.
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
+ *
+ * @csspart axis - The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
  * @csspart band - The category band under the pointer.
  * @csspart bar - One column.
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
@@ -83,6 +91,13 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * `registerWords('de', { 'helix-bar-chart': { highestLabel: 'Höchster Wert' } })`.
      */
     static words: string;
+    /**
+     * Sends the reading's moves and presses as `helix-reading-change` and
+     * `helix-reading-press`, which the pointer hears. Here and not in a
+     * constructor, where the manifest's analyzer reads the assignment as a
+     * member of this class.
+     */
+    connectedCallback(): void;
     /**
      * Which gridlines are drawn across the plot, if any.
      *
@@ -199,6 +214,15 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * the reading as the table writes it.
      */
     summaryLabel: string;
+    /**
+     * Draws the numbers of the scale the bars are measured on, the `axis` part,
+     * at the levels `gridlines` rules: down the side of columns, and along the
+     * bottom of bars under `orientation="horizontal"`.
+     *
+     * Absent draws none with one scale, since bars compared with each other need
+     * no numbers. With `secondary` both scales are drawn whatever this says.
+     */
+    valueAxis: boolean;
     /** The series names on the second scale, lowercased and trimmed. */
     private get scaled();
     /** The series names drawn as a line, lowercased and trimmed for matching. */
@@ -251,8 +275,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * a small chart is furniture that makes the drawing smaller for no reading a
      * reader was going to do. With two scales that argument inverts: a reader
      * cannot tell there are two, cannot tell which series is on which, and cannot
-     * recover either from the picture. So this appears with `secondary` and never
-     * without it.
+     * recover either from the picture. So this appears with `secondary`, and
+     * with one scale only where `value-axis` asks for its numbers.
      *
      * **Beside the plot and not inside it.** Inside, the numbers are drawn over
      * the drawing, and a horizontal chart shows it immediately: its value axis
@@ -263,7 +287,7 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * to the right.
      *
      * A column of the host grid instead, which the stylesheet grows only when
-     * `secondary` is set. That is what the property reflects for.
+     * `secondary` or `value-axis` is set. That is what the two reflect for.
      *
      * The primary hugs the edge the drawing starts at and the secondary the edge
      * it ends at: down the two sides for columns, along the bottom and top for

package/dist/bar-chart/root/bar-chart-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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
@@ -15,8 +15,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         this.highestLabel = 'Highest';
         this.stacked = false;
         this.summaryLabel = '{highestLabel}: {readings}.';
+        this.valueAxis = false;
     }
     static { this.words = 'helix-bar-chart'; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
+            ? new HelixReadingPressEvent(detail)
+            : new HelixReadingChangeEvent(detail));
+    }
     get scaled() {
         return new Set(seriesNames(this.secondary));
     }
@@ -61,14 +68,17 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const other = [Math.min(0, second), Math.max(0, top)];
         const z = scaled.size > 0 ? linear(other, range) : undefined;
         const format = formatNumbers(wordsLocale(this));
-        const widest = z === undefined
+        const levels = [...ticks(domain), ...(z === undefined ? [] : ticks(other))];
+        const widest = z === undefined && !this.valueAxis
             ? 0
-            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => format(level).length));
+            : Math.max(1, ...levels.map((level) => format(level).length));
         const lone = series.filter(own);
         const tint = lone.length === 1 && lone[0] !== undefined
             ? `--bar-chart-secondary: var(--chart-series-${seriesIndex(series.indexOf(lone[0]))})`
             : undefined;
-        return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}`;
+        return html `${z === undefined && !this.valueAxis
+            ? nothing
+            : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}`;
     }
     renderSummary(series) {
         const rows = this.sourceRows;
@@ -309,6 +319,9 @@ __decorate([
     words,
     property({ attribute: 'summary-label' })
 ], HelixHeadlessBarChart.prototype, "summaryLabel", void 0);
+__decorate([
+    property({ attribute: 'value-axis', reflect: true, type: Boolean })
+], HelixHeadlessBarChart.prototype, "valueAxis", void 0);
 HelixHeadlessBarChart = __decorate([
     customElement('helix-headless-bar-chart')
 ], HelixHeadlessBarChart);

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

@@ -48,6 +48,16 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      */
     static words: string;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The dismiss button's name, read by screen readers, with `{label}` for
+     * what the callout is called: its heading, or the tone's name where it has
+     * none.
+     *
+     * "Dismiss Scheduled maintenance" says which of several callouts the button
+     * takes away, where every button was "Dismiss". A label without `{label}` is
+     * read as written.
+     */
+    dismissLabel: string;
     /**
      * What kind of attention the passage needs.
      *
@@ -96,6 +106,16 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
      * above.
      */
     protected renderDismissIcon(): TemplateResult;
+    /**
+     * The dismiss button's name: `dismissLabel` with the heading's words, or the
+     * tone's name.
+     *
+     * The heading is read from the children, so a server and a hydrating render
+     * name the button for the tone, and the update after names it for the
+     * heading.
+     */
+    private dismissName;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/callout/root/callout-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 { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, drawDismiss, drawDismissGlyph, formatWords, HelixElement, hostAria, MixinDismissible, slottedWords, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.dismissLabel = 'Dismiss {label}';
         this.toneLabel = '';
         this.toneLabels = {
             danger: 'Error',
@@ -26,7 +27,7 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
         hostAria(this.internals, { role: 'note' });
     }
     renderIcon(icon, _label) {
-        return html `<slot name="icon">
+        return html `<slot name="icon" aria-hidden="true">
       <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
@@ -37,23 +38,37 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
       ${drawDismissGlyph()}
     </slot>`;
     }
+    dismissName(tone) {
+        const heading = this.childrenKnown ? slottedWords(this, ['heading']) : '';
+        return this.dismissLabel.includes('{label}')
+            ? formatWords(this, 'dismissLabel', { label: heading || tone }).trim()
+            : this.dismissLabel;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         const tone = this.tone === 'neutral' ? 'neutral' : toneMark(this.tone) ? (this.tone ?? 'info') : 'info';
         const { icon } = toneMark(tone) ?? TONE_MARKS.info;
         const named = this.toneLabel || (this.toneLabels[tone] ?? '');
         return html `<span part="icon" role="img" aria-label=${named}>${this.renderIcon(icon, named)}</span>
       <div part="content">
-        <slot name="heading"></slot>
+        <slot name="heading" @slotchange=${() => this.requestUpdate()}></slot>
         <slot></slot>
       </div>${this.dismissible
             ? drawDismiss({
-                label: this.dismissLabel,
+                label: this.dismissName(named),
                 mark: this.renderDismissIcon(),
                 onDismiss: () => this.dismiss(),
             })
             : nothing}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessCallout.prototype, "dismissLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);

package/dist/chat/composer/chat-composer.d.ts

@@ -20,6 +20,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * disabled>` turns the composer off. Sending is still `helix-send`, and it
  * does not submit the form.
  *
+ * **`required`, `minlength` and `maxlength` are checked by the browser**, as
+ * on a `<textarea>`, and the message is the browser's. `maxlength` stops the
+ * field taking more. A draft that fails them does not send, and the composer
+ * takes `:state(invalid)` and `aria-invalid` once the reader has tried to send
+ * it, the form was submitted, or the reader edited the field and left it.
+ * Tabbing past an empty composer marks nothing.
+ *
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
  * each time it changes: when they start, and when they send or stop for
  * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -45,6 +52,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart send - The send button.
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
+ *
+ * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
  */
 export declare class HelixHeadlessChatComposer extends HelixFormElement {
     /**
@@ -56,10 +65,24 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * The field's name, read by screen readers.
      */
     label: string;
+    /**
+     * The most characters a draft can have. The field stops taking more.
+     */
+    maxLength?: number;
+    /**
+     * The fewest characters a draft can have, once the reader has written in
+     * the field, as on a `<textarea>`.
+     */
+    minLength?: number;
     /**
      * Placeholder text shown in an empty field.
      */
     placeholder: string;
+    /**
+     * Whether the form needs a draft to submit. An empty draft never sends,
+     * required or not.
+     */
+    required: boolean;
     /**
      * How many rows the field opens at.
      *
@@ -97,6 +120,10 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     readonly isChatComposer = true;
     /** Whether the user is writing, which `helix-typing` announces. */
     private writing;
+    /** Whether the reader has tried to send or submit the draft, or edited it and left. */
+    private touched;
+    /** Whether the composer shows that its draft is wrong. */
+    private shownInvalid;
     /** The pause after which the user has stopped writing. */
     private readonly pause;
     /**
@@ -121,6 +148,8 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     private get declared();
     /** Puts back the draft the markup declared when the form is reset. */
     formResetCallback(): void;
+    /** The reader has had a go at the draft, so whether it is wrong can be shown. */
+    private readonly touch;
     /** Brings back the draft when the browser restores the form. */
     formStateRestoreCallback(state: string | File | FormData | null): void;
     /**
@@ -133,6 +162,7 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      */
     private markEmpty;
     protected updated(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * The control that offers the turn, behind a seam so a tier can draw its own.

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, words, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
@@ -15,6 +15,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         super(...arguments);
         this.label = 'Message';
         this.placeholder = '';
+        this.required = false;
         this.rows = 1;
         this.sendLabel = 'Send';
         this.submitOn = 'enter';
@@ -22,7 +23,13 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         this.value = '';
         this.isChatComposer = true;
         this.writing = false;
+        this.touched = false;
+        this.shownInvalid = false;
         this.pause = new DelayController(this, { renders: false });
+        this.touch = () => {
+            this.touched = true;
+            this.requestUpdate();
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
@@ -65,10 +72,15 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (value === '' || this.isDisabled) {
             return false;
         }
+        if (!this.internals.validity.valid) {
+            this.touch();
+            return false;
+        }
         if (!this.dispatchEvent(new HelixSendEvent({ value }))) {
             return false;
         }
         this.value = '';
+        this.touched = false;
         this.markTyping(false);
         return true;
     }
@@ -78,6 +90,8 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
     formResetCallback() {
         super.formResetCallback();
         this.value = this.declared;
+        this.touched = false;
+        this.requestUpdate();
     }
     formStateRestoreCallback(state) {
         this.value = typeof state === 'string' ? state : this.declared;
@@ -93,6 +107,20 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (changed.has('value')) {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
+        const field = this.partNamed('field');
+        if (field?.validity) {
+            this.internals.setValidity(field.validity, field.validationMessage, field);
+        }
+        const invalid = this.touched && !this.internals.validity.valid;
+        this.toggleState('invalid', invalid);
+        this.internals.ariaInvalid = invalid ? 'true' : null;
+        if (invalid !== this.shownInvalid) {
+            this.shownInvalid = invalid;
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.addEventListener('invalid', this.touch);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -124,7 +152,12 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         aria-label=${this.label}
         placeholder=${this.placeholder}
         rows=${this.rows}
+        ?required=${this.required}
+        minlength=${this.minLength ?? nothing}
+        maxlength=${this.maxLength ?? nothing}
+        aria-invalid=${this.shownInvalid ? 'true' : nothing}
         ?disabled=${this.isDisabled}
+        @change=${this.touch}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
@@ -140,9 +173,18 @@ __decorate([
     words,
     property()
 ], HelixHeadlessChatComposer.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'maxlength', type: Number })
+], HelixHeadlessChatComposer.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'minlength', type: Number })
+], HelixHeadlessChatComposer.prototype, "minLength", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessChatComposer.prototype, "required", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessChatComposer.prototype, "rows", void 0);
@@ -159,6 +201,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessChatComposer.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessChatComposer.prototype, "shownInvalid", void 0);
 HelixHeadlessChatComposer = __decorate([
     customElement('helix-headless-chat-composer')
 ], HelixHeadlessChatComposer);

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

@@ -331,6 +331,16 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     get messages(): HelixHeadlessChatMessage[];
     /** The element that scrolls, once there is one. */
     private get log();
+    /**
+     * Makes the log a tab stop while it scrolls, and takes the stop away when it
+     * does not.
+     *
+     * **A reader on a keyboard scrolls the history from the log itself.**
+     * Chromium and Firefox make a box that scrolls focusable on their own, and
+     * Safari does not, so there the arrow keys could not reach a long history.
+     * A log that fits is no stop at all, so Tab goes straight to the composer.
+     */
+    private markScroller;
     /** Whether the reader is within `threshold` of the bottom right now. */
     private get atBottom();
     /** What identifies a turn fed as data: its key, or the object it is. */

package/dist/chat/root/chat-root.js

@@ -78,6 +78,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         });
         this.filled = undefined;
         this.handleResize = () => {
+            this.markScroller();
             if (this.pinned) {
                 this.stick();
             }
@@ -141,6 +142,18 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     get log() {
         return this.partNamed('log');
     }
+    markScroller() {
+        const log = this.log;
+        if (!log) {
+            return;
+        }
+        if (log.scrollHeight > log.clientHeight) {
+            log.tabIndex = 0;
+        }
+        else {
+            log.removeAttribute('tabindex');
+        }
+    }
     get atBottom() {
         const log = this.log;
         if (!log) {
@@ -421,6 +434,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.virtualize.measure();
         }
         this.watchSizes();
+        this.markScroller();
         this.remember();
         this.reachHistory();
         this.announce();