@fusion.dev/helix-headless 0.2.0 → 0.4.0

package/dist/date-input/root/date-input-root.js

@@ -12,286 +12,57 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
-/** Whether a string is a date the rest of this component can reason about. */
 const isIso = (value) => /^\d{4}-\d{2}-\d{2}$/.test(value);
-/**
- * The dates in a value, which may hold more than one.
- *
- * A range is two and a multiple is any number, comma separated, which is what
- * the calendar announces and what a form field can carry as one string. Empty
- * entries are dropped so a trailing comma while typing is not a date.
- */
-const dates = (value) => 
-/* The en dash and the spaced hyphen both mean "to", because a range is shown
-   that way and what is shown is what gets typed back. An ISO date holds
-   hyphens of its own, so only a spaced one separates: `2026-08-04-2026-08-11`
-   is not a thing anybody writes, and treating a bare hyphen as a separator
-   would take `2026-08-04` apart into three numbers. */
-value
+const dates = (value) => value
     .replace(/\s+[–-]\s+/g, ',')
     .split(',')
     .map((one) => one.trim())
     .filter(Boolean);
-/**
- * @summary A date, typed or picked from a calendar.
- *
- * @description
- * **The calendar is `helix-date-picker`, not a second one written here.** It
- * already knows about months, ranges, disabled days, the first day of the week
- * and every keyboard rule a grid owes a reader, and a picker that reimplemented
- * a tenth of that would be a worse grid that also had to be maintained. This
- * element is the field, the overlay, and the translation between them.
- *
- * **Typed as well as picked, and the typing is the reason it is not
- * `<input type="date">`.** The native control gives a free picker and a free
- * locale and takes almost all styling with it, which is a fair trade until a
- * product needs the calendar to match everything around it. What is kept from
- * the native one is the part worth keeping: a real text field, so a reader who
- * knows the date types it and never opens anything.
- *
- * **The value is `YYYY-MM-DD`, always.** That is what a form submits, what
- * `min` and `max` compare against, and what the calendar speaks. What the field
- * *shows* is the same string: a locale-formatted display would have to be parsed
- * back on every keystroke, and half-typed input does not survive a round trip
- * through a formatter. The same reasoning the sandbox records for its two
- * syntaxes, which is that a document being edited must not be a rendering of
- * something else.
- *
- * **Opening does not commit.** The calendar announces a date, this element takes
- * it, and the overlay shuts, because a single date has nothing more to say. A
- * consumer who owns `value` answers the announcement the way they answer any
- * other control here.
- *
- * @since 0.1.0
- * @status experimental
- * @category forms
- * @aliases DatePicker, DateField, InputDate
- * @documentation https://helix.fusion.dev/components/date-input
- *
- * @slot feedback - What is wrong with it.
- * @slot hint - Help under the field.
- * @slot trigger - The mark on the field saying a calendar opens.
- *
- * @event {Event} change - Announced once the value has moved.
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the date changes. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before it closes. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the calendar opens. Cancelable: refusing it takes the decision and nothing moves.
- * @event {Event} input - Announced once the value has moved.
- * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
- *
- * @csspart control - The text input.
- * @csspart date - One held date, as a tag, in `multiple`.
- * @csspart date-dismiss - The remove button, when `dismissible`.
- * @csspart date-dismiss-mark - The glyph on the dismiss control, where none is slotted.
- * @csspart date-prefix - The category before the label.
- * @csspart feedback - What is wrong with it.
- * @csspart field - The box holding the text and the trigger.
- * @csspart hint - Help under the field, while nothing is wrong.
- * @csspart label - The question, over the field.
- * @csspart picker - The date picker inside it.
- * @csspart picker-cell - One column of a row, which is what a range paints.
- * @csspart picker-day - The shape inside a cell, which is what a single date paints.
- * @csspart picker-grid - The grid of days.
- * @csspart picker-header - The month name and its controls.
- * @csspart picker-heading - The month and year being shown.
- * @csspart picker-month - One month, its header and its grid.
- * @csspart picker-months - The run of months.
- * @csspart picker-next - The control that moves to the next month.
- * @csspart picker-next-mark - The glyph on the next month control.
- * @csspart picker-previous - The control that moves to the previous month.
- * @csspart picker-previous-mark - The glyph on the previous month control.
- * @csspart picker-week - One row of days.
- * @csspart picker-weekday - A column header naming a day of the week.
- * @csspart rest - How many dates are held beyond the ones shown.
- * @csspart surface - The floating panel.
- * @csspart trigger - The control that opens the calendar.
- * @csspart trigger-icon - The mark on the button that opens the calendar.
- */
 let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
         super(...arguments);
-        /* A consumer's `aria-describedby` names ids in their own tree and the control
-           is in this shadow root, so the reference has to be carried down as an
-           element rather than copied as an id. See `AriaForwardController`: measured
-           in Chrome's own tree, the host held the description and the control the
-           reader is actually on was exposed without it. */
         this.aria = new AriaForwardController(this, {
             target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
         });
-        /**
-         * What the browser may autofill here, as one of the platform's own tokens.
-         *
-         * 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.
-         */
         this.autocomplete = '';
-        /**
-         * How a date is written in the field: `short` through `full`, or ISO.
-         *
-         * **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.
-         *
-         * 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.
-         * Focused, it shows `2026-08-04`, which is what a date is for typing, and it
-         * goes back on the way out. Nothing parses a rendering, and nothing is
-         * read-only, which is what an earlier version of this settled for.
-         *
-         * A range is the exception that needs no swap: the dash between its two dates
-         * is a separator this element understands, so that much reads back either way.
-         *
-         * `iso` turns the rendering off, for a field whose reader is entering data
-         * rather than reading it, or where the ISO form is itself the point.
-         *
-         * The value is always `YYYY-MM-DD` regardless, because that is what a form
-         * submits and what `min` and `max` compare against.
-         */
         this.dateStyle = 'long';
-        /**
-         * Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.
-         */
         this.disableDates = '';
-        /**
-         * Days of the week that cannot be chosen, `0` for Sunday through `6`.
-         */
         this.disableDays = '';
-        /**
-         * First column of the week in the calendar, `0` for Sunday through `6`.
-         */
         this.firstDayOfWeek = 0;
-        /**
-         * Language tag the calendar names its months and days in.
-         */
         this.locale = '';
-        /**
-         * Latest date that can be chosen, as `YYYY-MM-DD`.
-         */
         this.max = '';
-        /**
-         * How many dates are shown as tags before the rest are counted, in `multiple`.
-         *
-         * `0` is all of them, and is the default: a cap that guesses is worse than no
-         * cap, because the number that fits depends on the width of the field and the
-         * length of what is in it, neither of which this element knows. What a cap is
-         * genuinely for is a field in a row or a table cell, where a set of twelve
-         * dates would push everything below it down a line at a time.
-         *
-         * The remainder is counted rather than hidden. `+3` is a fact a reader can
-         * act on, where a row that silently stops is a field that appears to have lost
-         * what was put in it, and the count is what tells them there is more to see.
-         */
         this.maxTags = 0;
-        /**
-         * Earliest date that can be chosen, as `YYYY-MM-DD`.
-         */
         this.min = '';
-        /**
-         * How many months the calendar shows, side by side.
-         *
-         * Worth more than one mainly for a range, where picking a start in March and
-         * an end in April otherwise means paging between them and losing sight of the
-         * first. The panel is sized by its content, so this widens it.
-         */
         this.months = 1;
-        /**
-         * What the field says before a date is in it.
-         */
         this.placeholder = 'YYYY-MM-DD';
-        /**
-         * Whether the control refuses changes while still submitting its value.
-         *
-         * **Enforced by refusing every request in one place**, which is the seam this
-         * component already has: `requestValue` is what every path here comes through,
-         * and gating it once is what stops the next call site from being written
-         * without the check.
-         *
-         * Not `disabled`, which is the confusion worth naming: a disabled control
-         * submits nothing and leaves the tab order, and a read-only one submits its
-         * value and stays reachable, which is what a form showing a value somebody
-         * else set needs.
-         */
         this.readOnly = false;
-        /**
-         * How far apart the selectable dates are, in days.
-         *
-         * `<input type="date" step>`'s own unit, handed to the calendar this renders
-         * so the field and the grid agree about which dates exist. Counted from `min`
-         * where there is one and from 1 January 1970 where there is not, which is the
-         * platform's base.
-         */
         this.step = 1;
-        /**
-         * The overlay, placed against the field rather than the trigger.
-         *
-         * Against the field because that is the box a reader sees as the control: a
-         * calendar hung off a small button at one end of a wide field reads as
-         * belonging to the button. `Select` anchors to its trigger for the opposite
-         * reason, its trigger being the whole control.
-         */
         this.panel = new PopoverController(this, {
             anchor: () => this.renderRoot?.querySelector('[part="field"]'),
-            /* The surface *and* the trigger.
-             *
-             * A control is not always one element: the button that opens this panel is
-             * part of it, and a press on it is not a press outside. Scoped to the
-             * surface alone, `pointerdown` on the trigger closes the panel and the
-             * trigger's own `toggleOpen` reopens it on the `click` that follows, so the
-             * panel can never be closed by the button that opened it.
-             * `DismissController` documents this failure and takes a list for it. */
             boundary: () => [
                 this.renderRoot?.querySelector('[part="surface"]'),
                 this.renderRoot?.querySelector('[part="trigger"]'),
             ],
-            /* Wider than the four every other panel here takes. Those sit against a
-               control the same width as themselves and read as an extension of it; this
-               one is a calendar of its own size hanging off a field, so the gap is what
-               says the two are separate things rather than one control that grew. */
             offset: () => 8,
             onDismiss: () => this.requestOpen(false),
             placement: 'bottom-start',
             surface: () => this.renderRoot?.querySelector('[part="surface"]'),
         });
-        /**
-         * Whether the caret is in the field, which is when it holds the value.
-         */
         this.editing = false;
-        /**
-         * What is being typed but not yet held, for `multiple` only.
-         *
-         * The other modes type into the value directly, because one date and a range
-         * are both a whole answer at the moment they are complete. A multiple is not:
-         * it is a set being added to, so the field needs somewhere to hold a date
-         * before it joins the set and somewhere to leave a half-typed one that is not
-         * a date yet.
-         */
         this.draft = '';
-        /** Relayed under this element's name, so a consumer hears one control. */
         this.handleInput = (event) => {
             event.stopPropagation();
-            // Typing is editing, whatever the focus did. The field has to hold the value
-            // while it is being changed, or a keystroke lands in a rendering.
             this.editing = true;
             const typed = event.target.value;
             if (this.mode === 'multiple') {
                 this.draft = typed;
                 return;
             }
-            /* Stored as commas once every date in it is whole, and kept exactly as typed
-               until then. A form should submit `2026-08-04,2026-08-11` however the dash
-               was written, and the dash is a reading of that rather than a second value
-               shape to support. Half-typed text stays verbatim, for the reason the class
-               gives about a document being edited: normalizing `2026-08-0` would take
-               the caret away mid-date. */
             const held = dates(typed);
             const whole = held.length > 0 && held.every(isIso);
             this.requestValue(whole ? held.join(',') : typed);
             this.restore();
         };
-        /** Adds what was typed to the set, or takes the last one back out. */
         this.handleDraftKey = (event) => {
             if (this.mode !== 'multiple') {
                 return;
@@ -305,13 +76,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
                 this.draft = '';
             }
             else if (event.key === 'Backspace' && this.draft === '' && held.length > 0) {
-                /* The convention every tag field has: an empty field and a backspace takes
-                   the last one back, so a mistake costs one key rather than a hunt for a
-                   small control. */
                 this.requestValue(held.slice(0, -1).join(','));
             }
         };
-        /** Takes one date back out of the set. */
         this.removeDate = (date) => {
             this.requestValue(dates(this.value)
                 .filter((one) => one !== date)
@@ -322,16 +89,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
             const { value } = event.detail;
             this.requestValue(value);
             this.restore();
-            /* A single date has nothing more to say, so the panel gets out of the way.
-               A range or a multiple has: the reader is still choosing, and shutting the
-               calendar under them after the first date is taking the control away
-               mid-answer. */
             if (this.mode === undefined) {
                 this.requestOpen(false);
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
-        /** Escape shuts the calendar without moving the date. */
         this.handleKeydown = (event) => {
             if (event.key === 'Escape' && this.open) {
                 event.stopPropagation();
@@ -339,64 +101,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
                 this.returnFocus();
             }
         };
-        /**
-         * Accessible name for the control that opens the calendar.
-         */
         this.triggerLabel = 'Choose a date';
-        /**
-         * Puts the caret back in the field without the field reopening the calendar.
-         *
-         * Focus opens the calendar, so handing focus back after a pick reopens the
-         * thing that was just answered. `relatedTarget` was the guard and it is not
-         * enough on its own: it catches a hand-off from the trigger, and it does not
-         * catch this, because the cell that had focus is gone by the time the caret
-         * moves and the document has fallen back to something outside this element.
-         *
-         * **Reasoned rather than measured, and worth saying which.** In a focused
-         * document: the reader presses a day, the cell has focus, the panel is hidden,
-         * the browser moves focus off the removed cell to the body, and the caret is
-         * then put back here with `relatedTarget` pointing at the body, which is
-         * outside this element and reads as an arrival. Every step is ordinary browser
-         * behavior and none of it can be exercised here: `focus()` dispatches no
-         * event in an unfocused document, which is what both the test runtime and the
-         * available browser pane are. A spec for this passes with the guard removed,
-         * so there is no spec: it would cover nothing while looking like proof.
-         *
-         * A flag rather than a better guess, because this element is the one moving
-         * the focus and is the only thing that can know so. Cleared synchronously,
-         * since `focus()` dispatches before it returns.
-         */
         this.returning = false;
         this.handleBlur = () => {
             this.editing = false;
         };
-        /*
-         * Focusing the field opens the calendar.
-         *
-         * A reader who reaches this control is choosing a date, and making them find
-         * the trigger afterwards is a second action for something they have already
-         * asked for. Typing still works with it up, because the calendar follows the
-         * field rather than the other way round.
-         *
-         * **Only where focus arrived from outside this element**, which is the whole
-         * of the difficulty: picking a date shuts the panel and puts the caret back in
-         * the field, so an unguarded version reopens the calendar the reader just
-         * answered. `relatedTarget` is where focus came from, so a hand-off from the
-         * calendar or the trigger is left alone and only a genuine arrival opens
-         * anything.
-         *
-         * On the input rather than on the field, too. Focus does not bubble, so a
-         * listener here covers the text and not the trigger, which is what keeps
-         * pressing the trigger from opening the panel on focus and then shutting it
-         * again on the click.
-         */
         this.handleFocus = (event) => {
-            /* Not while the caret is being handed back. Picking a date returns focus to
-               the field, and treating that as editing puts the field into the shape it
-               takes for typing: a reader picks 4 August 2026 from the calendar and the
-               field answers `2026-08-04`. Focus is a good enough signal for editing
-               everywhere except the one moment this element moved the focus itself, and
-               it already knows when that is. */
             this.editing = !this.returning;
             const from = event.relatedTarget;
             if (this.open || this.isDisabled || this.returning) {
@@ -414,26 +124,14 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         }
         return this.renderRoot.querySelector('[part="control"]');
     }
-    /**
-     * What the calendar should show, which is only ever a whole date.
-     *
-     * Half-typed input reaches here on every keystroke, and `2026-08-1` is not a
-     * date: handing it to the calendar would move the month under a reader
-     * mid-word. So the grid follows the field only once the field says something
-     * complete.
-     */
     get picked() {
         const held = dates(this.value);
         return held.length > 0 && held.every(isIso) ? held.join(',') : '';
     }
-    /** One date, written the way `dateStyle` asks for. */
     written(date) {
         if (this.dateStyle === 'iso' || !isIso(date)) {
             return date;
         }
-        /* UTC, because the dates are UTC throughout: a date parsed in a zone behind
-           Greenwich renders as the day before, which is the classic off-by-one that
-           makes a calendar disagree with the field beside it. */
         const at = new Date(`${date}T00:00:00Z`);
         return Number.isNaN(at.getTime())
             ? date
@@ -442,50 +140,24 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
                 timeZone: 'UTC',
             }).format(at);
     }
-    /*
-     * What the field shows, which is the value in every mode but one.
-     *
-     * A range reads `2026-08-04 – 2026-08-11`, because two dates separated by a
-     * comma is a list and a range is a span: the comma says "and these", the dash
-     * says "through". It is the one place this component shows something other
-     * than the value it holds, and it is safe because the dash reads back: `dates`
-     * takes a spaced dash as a separator, so what is shown is what can be typed.
-     *
-     * `multiple` shows nothing here at all. Its dates are tags beside the input
-     * and the input is a draft.
-     */
     get display() {
         if (this.mode === 'multiple') {
             return this.draft;
         }
         const held = dates(this.value);
-        /* Being edited, the field is the value. The rendering is what it shows when
-           nobody is in it, so there is never a moment where what is on screen is
-           something this element could not read back. */
         if (this.editing || this.dateStyle === 'iso') {
             return this.mode === 'range' && held.length === 2 ? held.join(' – ') : this.value;
         }
         const written = held.map((one) => this.written(one));
         return this.mode === 'range' ? written.join(' – ') : written.join(', ');
     }
-    /** The dates that get a tag, which is all of them until `maxTags` says not. */
     get shownDates() {
         const held = dates(this.value);
         return this.maxTags > 0 ? held.slice(0, this.maxTags) : held;
     }
-    /** How many are held beyond the ones shown. */
     get restCount() {
         return Math.max(0, dates(this.value).length - this.shownDates.length);
     }
-    /**
-     * Puts the field back where the answer differs from what was typed.
-     *
-     * `requestValue` is the mixin's, and it announces and decides; this is the
-     * other half, which `Input` needs for the same reason: the native control has
-     * already changed, so wherever the answer does not follow it, it has to be
-     * restored. A refusal and a consumer who owns `value` and has not given a new
-     * one are the same thing from here.
-     */
     restore() {
         const control = this.control;
         if (control && control.value !== this.display) {
@@ -493,21 +165,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         }
         this.sync();
     }
-    /** Reports the value and the validity the host stands behind. */
     sync() {
         this.internals.setFormValue(this.value);
         const control = this.control;
         if (!control) {
             return;
         }
-        /* Bounds are checked here rather than left to the input, which is `text`
-           and has no idea what a date is: `min` and `max` on a text input do
-           nothing, and `type="date"` is what was given up to own the calendar.
-           String comparison is enough because ISO dates sort lexically, which is
-           the whole reason the value is that shape. */
-        /* Every date in the value, not the value itself: a range is two of them and
-           a multiple is any number, so a string comparison against `min` would be
-           comparing a bound to a list. */
         const held = dates(this.value);
         let message = '';
         if (held.length > 0 && !held.every(isIso)) {
@@ -533,7 +196,6 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         }
         this.refreshFeedback();
     }
-    /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next) {
         if (this.readOnly) {
             return false;
@@ -542,24 +204,13 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        // Whatever the markup arrived with, so a form knows before anything is typed.
         this.sync();
     }
     updated(changed) {
         super.updated(changed);
-        // Every update, not only the ones that name `value`: see the note on
-        // `ColorInput.updated`.
         this.sync();
-        /* Driven from here rather than from the toggle, because `open` is a property
-           a consumer may set directly and the panel has to follow either way. The
-           controller is idempotent, so arriving twice for the same open costs
-           nothing. Select drives it the same way, and without this the surface stays
-           `display: none`: a `popover` element is hidden until something shows it,
-           so the calendar rendered its forty-two cells into a box of nothing. */
         if (this.open) {
             this.panel.show();
-            // Only on the update that opened it, or every keystroke while it is up
-            // would steal focus back into the grid.
             if (changed.has('open')) {
                 this.renderRoot?.querySelector('[part="picker"]')?.focus();
             }
@@ -573,19 +224,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         this.control?.focus();
         this.returning = false;
     }
-    /** Puts the caret in the field, the way a label pointing at one would. */
     focus(options) {
         this.control?.focus(options);
     }
-    /**
-     * The calendar the field opens, behind a seam the styled tier can move.
-     *
-     * A method rather than a fragment inline, so a tier above can replace, wrap
-     * or omit it without reimplementing the whole template. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled
-     * one from the same template.
-     */
     renderPicker() {
         return html `<${this.tag('date-picker')}
       part="picker"
@@ -609,15 +250,6 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
       @input=${this.stopInner}
     ></${this.tag('date-picker')}>`;
     }
-    /**
-     * One chosen date, as a tag, behind a seam the styled tier can move.
-     *
-     * A method rather than a fragment inline, so a tier above can replace, wrap
-     * or omit it without reimplementing the whole template. The tag is
-     * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled
-     * one from the same template.
-     */
     renderTag(date) {
         return html `<${this.tag('tag')}
                   part="date"
@@ -632,21 +264,6 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
                   >${this.written(date)}</${this.tag('tag')}
                 >`;
     }
-    /**
-     * The mark on the button that opens the calendar, behind a seam.
-     *
-     * Slot fallback, so a consumer replaces it by slotting; and a method, so the
-     * tier above replaces it by overriding.
-     *
-     * **A named import rather than `<helix-icon>`**, which loses on three counts.
-     * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
-     * no bundler can shake a runtime lookup, so every consumer of any component
-     * that renders one ships all 50kB of path data; a named import ships one
-     * path. The import is checked when the package compiles, where a `name`
-     * string is checked only by a later name lookup. And `helix-icon` is not
-     * registered on the headless tier at all, which registers `helix-headless-icon`,
-     * so a headless consumer gets an inert unknown element and no mark whatsoever.
-     */
     renderTrigger() {
         return html `<slot name="trigger"><svg aria-hidden="true" fill="currentColor" part="trigger-icon" viewBox=${calendarBlank.viewBox}>
         ${unsafeSVG(calendarBlank.content)}
@@ -696,26 +313,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
     }
-    /**
-     * The value as a `Date`, at midnight UTC, or `null` while there is no date.
-     *
-     * The platform's own pair on `<input type="date">`, and this control holds the
-     * same `YYYY-MM-DD` string, so a consumer moving from one to the other reads
-     * the same two properties. UTC because the platform chose UTC: a date that is
-     * the same date everywhere must not become a different one by crossing a
-     * timezone, and midnight local would do exactly that for anybody west of
-     * Greenwich.
-     *
-     * `null` while the value is half typed, which is most of the keystrokes a
-     * reader makes in one of these.
-     */
     get valueAsDate() {
         return asDate(this.value);
     }
     set valueAsDate(date) {
         this.value = fromDate(date);
     }
-    /** The value as milliseconds since the epoch, or `NaN` while there is no date. */
     get valueAsNumber() {
         return asDate(this.value)?.getTime() ?? Number.NaN;
     }