@fusion.dev/helix-headless 0.0.0-dev → 0.0.3

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

@@ -122,62 +122,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
          * 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. This used to be hardcoded `off`, so a reader
-         * could never have a birthday or a postal code filled in for them and a
-         * consumer had no way to ask for it. See 295.
+         * 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 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;
-        /**
-         * 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 more" 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 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;
-        /**
-         * Latest date that can be chosen, as `YYYY-MM-DD`.
-         */
-        this.max = '';
-        /**
-         * 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;
         /**
          * How a date is written in the field: `short` through `full`, or ISO.
          *
@@ -203,18 +151,79 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
          * 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';
         /**
-         * Accessible name for the control that opens the calendar.
+         * 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.triggerLabel = 'Choose a date';
+        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.
          *
@@ -229,15 +238,10 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
              *
              * 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 closed the panel and the
-             * trigger's own `toggleOpen` reopened it on the `click` that followed, so
-             * the panel could never be closed by the button that opened it. Measured
-             * across all five popover-bearing components: Menu, Popover and Tooltip
-             * already named their invoker; this one and its three siblings did not, and
-             * all four stayed open on a second press where Menu closed.
-             *
-             * `DismissController` documents this exact failure and takes a list for it.
-             * The list was the fix; using it was the part that did not happen here. */
+             * 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"]'),
@@ -336,40 +340,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
             }
         };
         /**
-         * 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;
-        /*
-         * 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, and the first version of this reopened it on the way: the reader
-         * chose a date and the calendar came straight back, which the existing spec
-         * caught. `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.
+         * 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.
          *
@@ -386,9 +359,8 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
          * 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 was written for it and passed with the
-         * guard removed, so it was covering nothing and has been taken out rather than
-         * left to look like proof.
+         * 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,
@@ -398,13 +370,33 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         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 put the field into the shape it
-               takes for typing: a reader chose "10:00 PM" from a list and the field
-               answered "22:00". 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. */
+            /* 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) {
@@ -434,18 +426,6 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         const held = dates(this.value);
         return held.length > 0 && held.every(isIso) ? held.join(',') : '';
     }
-    /*
-     * 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, which is the next thing down.
-     */
     /** One date, written the way `dateStyle` asks for. */
     written(date) {
         if (this.dateStyle === 'iso' || !isIso(date)) {
@@ -462,6 +442,18 @@ 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;
@@ -556,7 +548,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     updated(changed) {
         super.updated(changed);
         // Every update, not only the ones that name `value`: see the note on
-        // `ColorInput.updated`, and the fifteen controls that already did this.
+        // `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
@@ -588,12 +580,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     /**
      * 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 render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
+     * 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.
+     * headless element, and a styled subclass that sets `tier` renders the styled
+     * one from the same template.
      */
     renderPicker() {
         return html `<${this.tag('date-picker')}
@@ -621,12 +612,11 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     /**
      * 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 render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
+     * 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.
+     * headless element, and a styled subclass that sets `tier` renders the styled
+     * one from the same template.
      */
     renderTag(date) {
         return html `<${this.tag('tag')}
@@ -648,15 +638,14 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
      * 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>`, and that is a reversal.** The
-     * element looked like the tidier of the two and loses on three counts.
+     * **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 when `check:icons` runs. And `helix-icon` is not
+     * 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 got an inert unknown element and no mark whatsoever.
+     * 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}>
@@ -738,23 +727,8 @@ __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "autocomplete", void 0);
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessDateInput.prototype, "mode", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessDateInput.prototype, "months", void 0);
-__decorate([
-    property({ attribute: 'max-tags', type: Number })
-], HelixHeadlessDateInput.prototype, "maxTags", void 0);
-__decorate([
-    property()
-], HelixHeadlessDateInput.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessDateInput.prototype, "step", void 0);
-__decorate([
-    property()
-], HelixHeadlessDateInput.prototype, "max", void 0);
+    property({ attribute: 'date-style' })
+], HelixHeadlessDateInput.prototype, "dateStyle", void 0);
 __decorate([
     property({ attribute: 'disable-dates' })
 ], HelixHeadlessDateInput.prototype, "disableDates", void 0);
@@ -764,18 +738,33 @@ __decorate([
 __decorate([
     property({ attribute: 'first-day-of-week', type: Number })
 ], HelixHeadlessDateInput.prototype, "firstDayOfWeek", void 0);
-__decorate([
-    property({ attribute: 'date-style' })
-], HelixHeadlessDateInput.prototype, "dateStyle", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "locale", void 0);
+__decorate([
+    property()
+], HelixHeadlessDateInput.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'max-tags', type: Number })
+], HelixHeadlessDateInput.prototype, "maxTags", void 0);
+__decorate([
+    property()
+], HelixHeadlessDateInput.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDateInput.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessDateInput.prototype, "months", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
 __decorate([
-    property({ attribute: 'trigger-label' })
-], HelixHeadlessDateInput.prototype, "triggerLabel", void 0);
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessDateInput.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessDateInput.prototype, "step", void 0);
 __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "editing", void 0);
@@ -783,8 +772,8 @@ __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "draft", void 0);
 __decorate([
-    property({ attribute: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessDateInput.prototype, "readOnly", void 0);
+    property({ attribute: 'trigger-label' })
+], HelixHeadlessDateInput.prototype, "triggerLabel", void 0);
 HelixHeadlessDateInput = __decorate([
     customElement('helix-headless-date-input')
 ], HelixHeadlessDateInput);