@fusion.dev/helix-headless 0.159.0 → 0.161.0

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

@@ -4,14 +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, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, requestChange, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
-import { gutterNumbers, lineCount } from '../lines.js';
+import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
@@ -28,12 +28,17 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.label = '';
         this.language = '';
         this.lineNumbers = false;
+        this.markLines = '';
         this.noCopy = false;
+        this.wrap = false;
+        this.wrapLabel = 'Wrap lines';
+        this.wrappable = false;
         this.parsed = { files: [], text: '' };
         this.capped = false;
         this.expanded = false;
         this.measure = () => {
             this.markScrollers();
+            this.placeLines();
             if (!this.expanded) {
                 this.capped =
                     this.expandable &&
@@ -43,6 +48,20 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         };
     }
     static { this.words = 'helix-code-block'; }
+    toggleWrap() {
+        const next = !this.wrap;
+        const applied = requestChange({
+            apply: (checked) => {
+                this.wrap = checked;
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: this,
+            next,
+        });
+        if (applied) {
+            this.dispatchEvent(new HelixToggleEvent({ checked: next }));
+        }
+    }
     get files() {
         if (!this.diff) {
             return [];
@@ -85,6 +104,89 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         }
     }
+    lineBoxes(code) {
+        const slot = code.querySelector('slot');
+        const roots = slot && !slot.hidden ? slot.assignedNodes({ flatten: true }) : [code];
+        const texts = [];
+        for (const root of roots) {
+            if (root.nodeType === Node.TEXT_NODE) {
+                texts.push(root);
+                continue;
+            }
+            const walker = (root.ownerDocument ?? document).createTreeWalker(root, NodeFilter.SHOW_TEXT);
+            for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+                texts.push(node);
+            }
+        }
+        const starts = [];
+        let total = 0;
+        for (const text of texts) {
+            starts.push(total);
+            total += text.data.length;
+        }
+        const at = (offset) => {
+            for (let index = texts.length - 1; index >= 0; index -= 1) {
+                const start = starts[index] ?? 0;
+                if (offset >= start) {
+                    const text = texts[index];
+                    return [text, Math.min(offset - start, text.data.length)];
+                }
+            }
+            return undefined;
+        };
+        const box = code.getBoundingClientRect();
+        const origin = box.top + code.clientTop - code.scrollTop;
+        const row = Number.parseFloat(getComputedStyle(code).lineHeight) || 0;
+        const boxes = [];
+        for (const [from, to] of lineSpans(texts.map((text) => text.data).join(''))) {
+            const start = at(from);
+            const end = at(to === from ? Math.min(to + 1, total) : to);
+            const previous = boxes.at(-1);
+            let top = previous ? previous.bottom : 0;
+            let bottom = top + row;
+            if (start && end) {
+                const range = (code.ownerDocument ?? document).createRange();
+                range.setStart(start[0], start[1]);
+                range.setEnd(end[0], end[1]);
+                const rects = [...range.getClientRects()].filter((rect) => rect.height > 0);
+                if (rects.length > 0) {
+                    const half = Math.max(0, (row - (rects[0]?.height ?? row)) / 2);
+                    top = Math.min(...rects.map((rect) => rect.top)) - origin - half;
+                    bottom = Math.max(...rects.map((rect) => rect.bottom)) - origin + half;
+                }
+            }
+            boxes.push({ bottom, top });
+        }
+        return boxes;
+    }
+    placeLines() {
+        const code = this.renderRoot.querySelector('[part="code"]');
+        const marks = [...this.renderRoot.querySelectorAll('[part="mark"]')];
+        const numbers = [
+            ...this.renderRoot.querySelectorAll('[part="gutter"] > [part="number"]'),
+        ];
+        if (!code || (marks.length === 0 && numbers.length === 0)) {
+            return;
+        }
+        const boxes = this.lineBoxes(code);
+        for (const mark of marks) {
+            const [first, last] = (mark.dataset.lines ?? '').split('-').map(Number);
+            const top = boxes[(first ?? 0) - 1];
+            const bottom = boxes[Math.min(last ?? 0, boxes.length) - 1];
+            mark.hidden = !top || !bottom;
+            if (top && bottom) {
+                mark.style.setProperty('--code-block-mark-start', `${top.top}px`);
+                mark.style.setProperty('--code-block-mark-size', `${bottom.bottom - top.top}px`);
+                mark.style.setProperty('--code-block-mark-inline-size', `${code.scrollWidth}px`);
+            }
+        }
+        numbers.forEach((number, index) => {
+            const line = boxes[index];
+            if (line) {
+                number.style.setProperty('--code-block-line-size', `${line.bottom - line.top}px`);
+            }
+        });
+    }
     updated(changed) {
         super.updated(changed);
         if (typeof ResizeObserver !== 'undefined') {
@@ -126,21 +228,29 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         catch (error) {
             globalThis.reportError?.(error);
         }
+        const runs = this.childrenKnown ? lineRuns(this.markLines) : [];
+        const marks = runs.map(([first, last]) => html `<span part="mark" aria-hidden="true" data-lines="${first}-${last}"></span>`);
         const code = highlighted === undefined
-            ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
-            : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
+            ? html `<code part="code">${marks}<slot @slotchange=${() => this.requestUpdate()}></slot></code>`
+            : html `<code part="code">${marks}${unsafeHTML(highlighted)}</code><slot
               hidden
               @slotchange=${() => this.requestUpdate()}
             ></slot>`;
         const lines = lineCount(text);
+        const numbers = lines === 0
+            ? nothing
+            : this.wrap
+                ? Array.from({ length: lines }, (_, index) => html `<span part="number">${index + 1}
+</span>`)
+                : gutterNumbers(lines);
         const gutter = this.lineNumbers
-            ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
+            ? html `<span part="gutter" aria-hidden="true">${numbers}</span>`
             : nothing;
         const name = this.label || this.language;
         return html `${this.renderHeader(name)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
-        ${name ? nothing : this.renderCopy()}
+        ${this.headed(name) ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -160,11 +270,29 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
       ${this.expanded ? this.collapseLabel : this.expandLabel}
     </button>`;
     }
+    headed(name) {
+        return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
+    }
     renderHeader(name, value) {
-        return name
-            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value, name)}</div>`
+        const acting = this.slotted('actions');
+        return this.headed(name)
+            ? html `<div part="header">${name ? html `<span part="label">${name}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
+    renderWrapToggle() {
+        if (!this.wrappable || this.diff) {
+            return nothing;
+        }
+        return html `<button
+      part="wrap-toggle"
+      type="button"
+      aria-pressed=${this.wrap ? 'true' : 'false'}
+      @click=${() => this.toggleWrap()}
+    >${this.wrapLabel}</button>`;
+    }
+    slotted(name) {
+        return this.knownChildren.some((child) => child.getAttribute('slot') === name);
+    }
     renderCopy(value, name) {
         return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
@@ -179,7 +307,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
       copied-label=${this.copiedLabel}
       label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
-    ></${this.tag('copy-button')}>`;
+    >${this.renderCopyIcons()}</${this.tag('copy-button')}>`;
+    }
+    renderCopyIcons() {
+        return html `${this.slotted('copy-icon') ? html `<slot name="copy-icon"></slot>` : nothing}${this.slotted('copied-icon') ? html `<slot name="copied-icon" slot="copied"></slot>` : nothing}`;
     }
     renderNumber(value, width) {
         return html `<span part="number" aria-hidden="true">${String(value ?? '').padStart(width)} </span>`;
@@ -223,7 +354,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
           ${this.variant === 'split'
                 ? this.renderSplit(file, width)
                 : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
-          ${name ? nothing : this.renderCopy(now)}
+          ${this.headed(name) ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
@@ -275,12 +406,25 @@ __decorate([
 __decorate([
     property({ attribute: 'line-numbers', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
+__decorate([
+    property({ attribute: 'mark-lines' })
+], HelixHeadlessCodeBlock.prototype, "markLines", void 0);
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "wrap", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wrap-label' })
+], HelixHeadlessCodeBlock.prototype, "wrapLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "wrappable", void 0);
 __decorate([
     state()
 ], HelixHeadlessCodeBlock.prototype, "capped", void 0);

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, type DateCalendar, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, type DateCalendar, HelixFormElement, type MonthCalendar, type MonthSystem } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
@@ -15,17 +15,24 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * gives a picker and locale formatting but allows almost no styling, so the
  * field is a text field. Typing sends `input` on each keystroke and `change`
  * when you leave the field, as a text field does. A date picked from the
- * calendar sends both.
+ * calendar sends both. The field reads ISO, `2026-08-04`, and a date written
+ * in the order, the digits, and the month names of `locale`, `8/4/2026` or
+ * `Aug 4, 2026` in `en-US` and `4.8.2026` in `de-DE`, which becomes the value
+ * as you leave the field.
  *
  * The trigger and ArrowDown open the calendar with focus on the selected day,
  * Tab moves between the calendar's controls without leaving it, and Escape
  * closes it and returns focus to the field. A press into the field opens the
  * calendar too. Tab into the field opens nothing, and Tab out of the field
- * closes the calendar.
+ * closes the calendar. The text field is a `combobox` with
+ * `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls`, as in the
+ * APG date picker combobox, since Down opens the calendar from it.
  *
  * With `segmented`, the field is a row of segments in place of the text: a
  * month, a day and a year in the order the locale writes them, each set with
- * digits or the arrow keys. Alt+Down opens the calendar from a segment.
+ * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
+ * `range` is two rows with a dash between them, the start and the end, as
+ * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
  *
  * Text that is not a date gives the form an empty value, as a native date
  * field does, and `value` keeps the text so it can be corrected.
@@ -57,6 +64,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @aliases DatePicker, DateField, InputDate
  * @documentation https://fusion.dev/helix/components/date-input
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @slot end - Content after the date, before the trigger, such as a clear button.
  * @slot feedback - The error message under the field.
  * @slot hint - The help text under the field.
@@ -72,9 +80,11 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the date changes. Cancelable: call `preventDefault()` to keep the current date.
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the calendar closes. Cancelable: call `preventDefault()` to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the calendar opens. Cancelable: call `preventDefault()` to keep it closed.
+ * @event {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired after the value changes.
  * @event {ToggleEvent} toggle - Fired when the calendar opens or closes, with `newState` and `oldState`.
  *
+ * @csspart clear - The button that empties the field, under `clearable`, while it holds a date.
  * @csspart control - The text input.
  * @csspart date - One held date, as a tag, in `multiple`.
  * @csspart date-cell - The tag's grid cell, which a tag draws only inside a tag group.
@@ -116,8 +126,10 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-periods - The grid of months or years.
  * @csspart picker-previous - The control that moves to the previous month.
  * @csspart picker-previous-mark - The icon on the previous month control.
+ * @csspart picker-selection - The chosen date or range in words, which screen readers hear when it changes. Drawn for screen readers only.
  * @csspart picker-week - One row of days.
  * @csspart picker-weekday - A column header naming a day of the week.
+ * @csspart range-separator - The dash between a range's two rows of segments, in `segmented`, beside `literal`.
  * @csspart rest - The count of dates beyond the ones shown. It is a `<button>` with `expandable` and a `<span>` without it.
  * @csspart segment - One part of the date, a year, a month or a day, in `segmented`.
  * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
@@ -127,6 +139,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart trigger - The control that opens the calendar.
  * @csspart trigger-icon - The icon on the button that opens the calendar.
  *
+ * @cssstate blank - The field holds no date.
  * @cssstate invalid - The field has an error to show, from the browser's validation or from your `feedback`.
  * @cssstate open - The calendar is open.
  */
@@ -138,28 +151,43 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     static words: string;
     protected readonly aria: AriaForwardController;
     /**
-     * What the browser may autofill here, as one of the platform's own tokens.
+     * What the browser may autofill here, as one of the platform's own tokens,
+     * such as `bday`.
      *
      * Empty leaves the attribute off, which is the browser's default and is what
      * lets autofill work at all: hardcoding `off` here means a birthday or a
-     * postal code can never be filled in for a reader.
+     * postal code can never be filled in for a reader. With `segmented`, a
+     * hidden native date input carries it, since no browser fills the segments.
      */
     autocomplete: string;
     /**
-     * The calendar the written date and the calendar's days are in: `gregory`,
-     * `buddhist`, `japanese`, `roc`, or `iso8601`.
+     * The calendar the written date, the segments, and the calendar's days are
+     * in: `gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, or a calendar
+     * with months of its own that Date Picker's `calendar` names, such as
+     * `persian`, `hebrew`, `islamic-umalqura`, `ethiopic`, or `chinese`.
      *
-     * Absent is the locale's own where it is one of the five, and `gregory` for
-     * every other, as Date Picker's `calendar` is. The value is `YYYY-MM-DD` in
-     * every calendar, and a focused field is ISO in every calendar. In
-     * `segmented`, the segments are the Gregorian day, month, and year, in the
-     * order the locale writes them, or ISO order for `iso8601`.
+     * Absent is the locale's own where its months are the Gregorian months, and
+     * `gregory` for every other, as Date Picker's `calendar` is. The value is
+     * `YYYY-MM-DD` in every calendar, and a focused text field is ISO in every
+     * calendar. In `segmented`, the segments are the day, month, and year as
+     * the calendar counts them, in the order the locale writes them: Mehr 14,
+     * 1405 is month 7 and day 14 of 1405 under `persian`. Under the five with
+     * Gregorian months they are the Gregorian day, month, and year, or ISO order
+     * for `iso8601`.
      */
-    calendar?: DateCalendar;
+    calendar?: DateCalendar | MonthCalendar;
     /**
      * The name of the calendar's grid of days, read by screen readers.
      */
     calendarLabel: string;
+    /**
+     * Whether the field shows a button that empties it, as Input's `clearable`
+     * does. Shown only while the field holds something to clear and is neither
+     * disabled nor read-only.
+     */
+    clearable: boolean;
+    /** The accessible name of the clear button, which shows only an icon. */
+    clearLabel: string;
     /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
     protected readonly announcesInput = true;
     /**
@@ -168,8 +196,9 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * **The field renders when it is idle and holds the value when it is being
      * edited.** A written date is a rendering, and a document being edited must
      * not be a rendering of something else: `Intl.DateTimeFormat` formats and does
-     * not parse, so `4 August 2026` cannot be typed back, and writing a parser per
-     * locale is how a field ends up rejecting what it just displayed.
+     * not parse, so a rendering such as `Tuesday, August 4, 2026` is no text to
+     * edit. The field does read a date typed in the locale's order and digits as
+     * you leave it, which covers what a reader types.
      *
      * The way out is not to choose between the two but to separate them in time.
      * Idle, the field shows `4 August 2026`, which is what a date is for reading.
@@ -348,6 +377,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * removes rather than as "Remove" said once per date.
      */
     removeLabel: string;
+    /**
+     * What a screen reader hears about the dates chosen in the calendar, with
+     * `{kind}`, `{start}`, `{end}` and `{count}` filled in as Date Picker's
+     * `selection-label` says.
+     */
+    selectionLabel: string;
     /**
      * How far apart the selectable dates are, in days.
      *
@@ -361,6 +396,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when a date is not on `step`.
      */
     stepMismatchMessage: string;
+    /**
+     * The time zone today is read in, such as `America/New_York`, handed to the
+     * calendar: the day marked today, and the month an empty field opens on.
+     * Empty is the reader's own. Dates are plain `YYYY-MM-DD` and carry no zone.
+     */
+    timeZone: string;
     /**
      * The name of the button that opens the calendar, read by screen readers.
      */
@@ -375,17 +416,23 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     private get picked();
     /**
-     * Segments hold one date, so `range` and `multiple` keep the line of text,
-     * whose separators and tags are how those modes write several.
+     * A row of segments holds one date, and `range` takes two rows with a dash
+     * between them, as React Aria's range fields do. `multiple` keeps the line
+     * of text, whose tags are how it writes several.
      */
     protected get segmentable(): boolean;
+    protected get segmentGroups(): number;
     protected get segmentedKind(): 'date';
     /**
      * The segments are the Gregorian day, month and year, which is what they
      * hold, in ISO order where the calendar is `iso8601`. A year shown as 2569
-     * or Reiwa 8 would be a year the segment does not hold.
+     * or Reiwa 8 would be a year the segment does not hold. Under a calendar
+     * with months of its own they hold that calendar's parts, so they are laid
+     * out and named in it.
      */
     protected get segmentLocale(): string;
+    /** The calendar the segments count in, where it has months of its own. */
+    protected get segmentSystem(): MonthSystem | undefined;
     /** One date, written the way `dateStyle` asks for. */
     private written;
     protected get display(): string;
@@ -401,6 +448,20 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     private draft;
     /** Relayed under this element's name, so a consumer hears one control. */
     private readonly handleInput;
+    /**
+     * A date as the reader wrote it, as `YYYY-MM-DD`: ISO as it is, and the
+     * order, the digits, and the month names of the field's locale and calendar
+     * read back, so `8/4/2026` in `en-US` is August 4, 2026. Empty where it is
+     * no date.
+     */
+    private read;
+    /**
+     * The text the reader leaves, read in the field's locale: a date written as
+     * the locale writes one becomes the value, as ISO, when the field commits.
+     * Not on each key, where `8/4/202` is a date in the year 202 and taking it
+     * would move the caret mid-year.
+     */
+    private readonly handleTextCommit;
     /** Adds what was typed to the set, or takes the last one back out. */
     private readonly handleDraftKey;
     /** The dates that get a tag, which is all of them until the cap says not. */
@@ -423,6 +484,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */
     unavailableMessage: string;
+    /**
+     * The message for text that is no date, where `bad-input-message` is not
+     * set. `{mode}` is `single`, `range`, or `multiple`.
+     */
+    unreadableMessage: string;
     /**
      * The name of the calendar's heading where it shows a page of years, with
      * `{heading}` filled in.
@@ -477,6 +543,29 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
+    /**
+     * A native date input a browser's autofill can fill, where the field shows
+     * segments: a row of spans that no browser fills. React Aria's
+     * `HiddenDateInput` is the same answer for its segmented field.
+     *
+     * Drawn and never seen, a pixel and see-through, as Select's hidden select
+     * is, since Safari skips a field that is `display: none`. `aria-hidden` and
+     * out of the tab order, and in this shadow root, so the form still takes
+     * the value once, from the host. A fill is taken as a pick, with `input`
+     * and `change` from the host.
+     */
+    private renderAutofill;
+    private readonly handleAutofill;
+    /** Whether there is a clear button on screen right now. */
+    private get showsClear();
+    /**
+     * Empties the field, through `requestValue` so a consumer who owns the
+     * value decides, then says `change` and `helix-clear` and puts focus back
+     * in the field, the button having gone.
+     */
+    private readonly handleClear;
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     /** The line of text the dates are typed into, where the field shows no segments. */
     private renderControl;
     protected render(): TemplateResult;