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

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

@@ -44,11 +44,9 @@ const toIso = (date) => date.toISOString().slice(0, 10);
  *
  * **`toISOString` converts to UTC first, which makes "today" a different day
  * for most of the planet.** Anywhere west of UTC, from late afternoon onward,
- * `toIso(new Date())` names tomorrow: the mark landed on the wrong cell and the
- * server and the client disagreed about which one, since the two run in
- * different zones. The parts are read locally instead and pasted together,
- * which is the only way to get a calendar date out of a `Date` without a
- * conversion happening on the way.
+ * `toIso(new Date())` names tomorrow. The parts are read locally instead and
+ * pasted together, which is the only way to get a calendar date out of a `Date`
+ * without a conversion happening on the way.
  */
 const localToday = () => {
     const now = new Date();
@@ -101,8 +99,7 @@ const addMonths = (date, months) => {
  * Left unset, month and day names come from the runtime's own locale, and a
  * server and a browser need not agree on what that is.
  *
- * `helix-before-change` was `helix-select`, and it moved when the calendar became
- * form control. A control whose value changes dispatches `helix-before-change` here:
+ * A control whose value changes dispatches `helix-before-change`:
  * `Input`, `Select`, `Listbox`, `Radio.Group` and `Toggle.Group` all do, and a
  * calendar submitting a date is the same kind of thing. `helix-select` stays
  * what it is elsewhere, which is a row or an item being chosen in something
@@ -150,15 +147,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     constructor() {
         super(...arguments);
         /**
-         * How many months to show, side by side.
-         */
-        this.months = 1;
-        /**
-         * Locale for month and day names.
-         *
-         * Absent uses the runtime's own.
+         * Month to open on, where nothing declared one.
          */
-        this.locale = '';
+        this.defaultMonth = '';
         /**
          * Dates that cannot be chosen, comma separated, as `YYYY-MM-DD`.
          */
@@ -167,60 +158,65 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
          * Days of the week that cannot be chosen, comma separated, `0` to `6`.
          */
         this.disableDays = '';
+        /**
+         * First column of the week, `0` for Sunday through `6` for Saturday.
+         */
+        this.firstDayOfWeek = 0;
         /**
          * Whether the current selection fails validation.
          */
         this.invalid = false;
         /**
-         * Accessible name for the control that pages back.
-         *
-         * A property because this is the one component in the library that takes a
-         * `locale`, and it carried two hardcoded English names with no way to change
-         * them: a calendar rendering its own month names in Japanese still announced
-         * its controls in English. `attribute:` spelled out, since Lit lowercases a
-         * camelCase name rather than dash-casing it.
+         * Accessible name for the grid.
          */
-        this.previousLabel = 'Previous month';
+        this.label = 'Date Picker';
         /**
-         * Accessible name for the control that pages forward.
+         * Locale for month and day names.
+         *
+         * Absent uses the runtime's own.
          */
-        this.nextLabel = 'Next month';
+        this.locale = '';
         /**
-         * Month to open on, where nothing declared one.
+         * Latest selectable date, as `YYYY-MM-DD`.
          */
-        this.defaultMonth = '';
-        /** The month on show, whoever set it, and `undefined` until somebody has. */
-        this.monthState = undefined;
+        this.max = '';
         /**
          * Earliest selectable date, as `YYYY-MM-DD`.
          */
         this.min = '';
+        /** The month on show, whoever set it, and `undefined` until somebody has. */
+        this.monthState = undefined;
         /**
-         * How far apart the selectable dates are, in days.
-         *
-         * `<input type="date" step>`'s own unit, counted from `min` where there is
-         * one and from 1 January 1970 where there is not, which is the platform's own
-         * base. A booking calendar that only takes Mondays is `step="7"` with a `min`
-         * on a Monday, and there was no way to say that: `disable-dates` takes a list
-         * and a year of Mondays is not a list anybody writes.
-         *
-         * One is every date and needs no rule, which is why anything below one is
-         * treated as one rather than as an error: a step of zero would block every
-         * date including the one already chosen.
+         * How many months to show, side by side.
          */
-        this.step = 1;
+        this.months = 1;
         /**
-         * Latest selectable date, as `YYYY-MM-DD`.
+         * Accessible name for the control that pages forward.
          */
-        this.max = '';
+        this.nextLabel = 'Next month';
         /**
-         * Accessible name for the grid.
+         * Accessible name for the control that pages back.
+         *
+         * A property because a calendar rendering its own month names from `locale`
+         * would otherwise still announce its controls in English. `attribute:`
+         * spelled out, since Lit lowercases a camelCase name rather than dash-casing
+         * it.
          */
-        this.label = 'Date Picker';
+        this.previousLabel = 'Previous month';
         /**
-         * First column of the week, `0` for Sunday through `6` for Saturday.
+         * 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.firstDayOfWeek = 0;
+        this.readOnly = false;
         /**
          * The date the grid's tab stop is on.
          *
@@ -233,11 +229,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             }
             /* Grid keys, from the grid.
              *
-             * The listener is on the host and the host holds the previous and next
-             * buttons as well, so Enter and Space pressed on one of those were read as
-             * "choose the focused day" and then `preventDefault()`ed: the button's own
-             * activation was canceled and the month never moved. Every arrow was taken
-             * from them too. */
+             * The listener is on the host, which holds the previous and next buttons as
+             * well, so without this check Enter and Space pressed on one of those read
+             * as "choose the focused day" and are then `preventDefault()`ed: the
+             * button's own activation is canceled and the month never moves. */
             const path = event.composedPath();
             const grid = this.renderRoot?.querySelector('[part="grid"]');
             if (!grid || !path.includes(grid)) {
@@ -272,44 +267,39 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             }
             event.preventDefault();
         };
-        /**
-         * 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;
         /**
          * Whether the form refuses to submit while nothing is chosen.
          */
         this.required = false;
+        /**
+         * How far apart the selectable dates are, in days.
+         *
+         * `<input type="date" step>`'s own unit, counted from `min` where there is
+         * one and from 1 January 1970 where there is not, which is the platform's own
+         * base. A booking calendar that only takes Mondays is `step="7"` with a `min`
+         * on a Monday, which `disable-dates` cannot express: it takes a list, and a
+         * year of Mondays is not a list anybody writes.
+         *
+         * One is every date and needs no rule, which is why anything below one is
+         * treated as one rather than as an error: a step of zero would block every
+         * date including the one already chosen.
+         */
+        this.step = 1;
     }
     /**
      * The month on show, as `YYYY-MM`. Follows `value`, then the current month.
      *
      * Separate from `value` on purpose, so paging selects nothing and a consumer
-     * can drive the view. It said that and could not do it: the calendar wrote
-     * this when the reader paged, so a consumer holding it was overwritten and
-     * never told. Reading gives the month on show; writing declares it theirs,
-     * and `default-month` seeds one the calendar owns.
-     *
-     *
+     * can drive the view. Reading gives the month on show; writing sets it, and
+     * `default-month` seeds one the calendar keeps until somebody does.
      */
     get month() {
         /* What is on show, which is what the tag says it gives.
          *
-         * It returned `''` while a month was plainly on display, because nothing had
-         * declared one, and `show()` compares against it before moving: the guard
-         * was dead, so the first arrow key wrote `monthState` and from then on the
-         * grid stopped following `value`. A calendar whose consumer moved the value
-         * showed the month the reader had last paged to instead. */
+         * `show()` compares the requested month against this before moving, so a
+         * getter returning `''` while a month is on display leaves that guard dead:
+         * the first arrow key writes `monthState` and from then on the grid stops
+         * following `value`. */
         return this.monthState ?? (this.defaultMonth || toIso(this.derivedMonth).slice(0, 7));
     }
     set month(next) {
@@ -350,7 +340,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
      *
      * Split out from `shown` so `month` can report what is on display without the
      * two calling each other: `month` reading `shown` and `shown` reading `month`
-     * is a stack overflow, and the specs found it immediately.
+     * is a stack overflow.
      */
     get derivedMonth() {
         const from = toUtc(this.selected[0] ?? '') ?? new Date();
@@ -387,11 +377,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     /**
      * Whether a date is barred, by bound, by weekday, or by name.
      *
-     * `barred`, not `disabled`: the calendar is a form control now, and
-     * `HelixFormElement.disabled` is a boolean about the whole control. A method
-     * and a flag cannot share a name, and of the two it is the method that should
-     * move, because "disabled" on a control means one thing everywhere else in
-     * the library.
+     * `barred`, not `disabled`: `HelixFormElement.disabled` is a boolean about the
+     * whole control, and a method and a flag cannot share a name. "Disabled" on a
+     * control means one thing everywhere else in the library, so the method is the
+     * one that moves.
      */
     barred(date) {
         const iso = toIso(date);
@@ -422,8 +411,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
      *
      * `helix-navigate` and not `helix-change`: paging chooses nothing, and a
      * consumer driving the view has to hear that it moved without being told the
-     * answer did. In controlled mode nothing moves and the consumer decides,
-     * which is the point of them holding it.
+     * answer did. Refusing the event is how they take the decision, and nothing
+     * moves.
      */
     show(date) {
         if (this.disabled) {
@@ -459,10 +448,8 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
      * clicking a chosen date takes it out.
      */
     select(date) {
-        /* `disabled` meant nothing here beyond dropping the value at submit time:
-           days still took a click, the keyboard still moved through the grid, and
-           nothing said the control was off. Refused at the source rather than at
-           each cell, so every path in is covered by one check. */
+        /* Refused at the source rather than at each cell, so every path in is
+           covered by one check. */
         if (this.disabled) {
             return;
         }
@@ -485,11 +472,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
            roving tab stop is about where they are rather than about what is
            chosen. The selection is the part that can be refused. */
         this.focused = iso;
-        /* Announced before it is written, which it was not: this set `value` and
-           then dispatched, so a listener calling `preventDefault()` was refusing a
-           date that had already been chosen. `requestChange` is the one
-           audited path its own documentation claims for every stateful change in
-           the system, and this was not on it. */
+        /* Announced before it is written, so a listener calling `preventDefault()`
+           refuses a date that has not been chosen yet. `requestChange` is the one
+           path every stateful change in the library goes through. */
         this.requestValue(next.join(','));
     }
     connectedCallback() {
@@ -523,12 +508,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             this.internals.setValidity({ valueMissing: true }, 'Choose a date.', anchor);
             return;
         }
-        /* **A value the calendar cannot read is bad input, and it used to be
-           valid.** The grid draws only what it can parse, so `value="not-a-date"`
-           selected nothing, said nothing, reported `:valid`, and handed the string
-           to the form: measured, a form carrying `dp=not-a-date` that submitted
-           without complaint. `DateInput` had this right all along, because it
-           relays the validity of an inner control it can ask.
+        /* **A value the calendar cannot read is bad input.** The grid draws only
+           what it can parse, so `value="not-a-date"` would otherwise select
+           nothing, report `:valid` and hand the string to the form.
     
            `asDate` rather than the shape alone, which is the half `DateInput`'s own
            regex still misses: `2026-02-30` matches `YYYY-MM-DD` and is not a day,
@@ -600,10 +582,10 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     /**
      * How many months are shown, clamped once.
      *
-     * `months` was clamped at the call site and read raw where the last month is
-     * identified, so a zero, a negative or a non-numeric value rendered nothing
-     * and took the forward control with it: `index === this.months - 1` is never
-     * true for `NaN`. One getter both read.
+     * One getter for both readers. Clamping at the call site while the last month
+     * is identified from the raw `months` renders nothing for a zero, a negative
+     * or a non-numeric value, and takes the forward control with it, since
+     * `index === this.months - 1` is never true for `NaN`.
      */
     get monthCount() {
         return Math.max(1, Math.floor(this.months) || 1);
@@ -653,10 +635,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         const { full, heading, weekday } = this.formats;
         const weeks = this.weeksOf(month);
         const anchor = toIso(this.anchor);
-        /* Today, which nothing marked at all: not in the accessibility tree, where
-           `aria-current="date"` is the word for it, and not on the cell either, so a
-           consumer could not add the mark from CSS. Computed once per month rather
-           than per cell. */
+        /* Today, marked with `aria-current="date"` in the accessibility tree and on
+           the cell, so a consumer can add a mark from CSS. Computed once per month
+           rather than per cell. */
         const today = localToday();
         const range = this.range;
         // One set of controls across the whole run: back on the first month,
@@ -702,17 +683,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             const iso = toIso(date);
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
-            /* A day from a neighbouring month is filler, so the grid is a
+            /* A day from a neighboring month is filler, so the grid is a
                rectangle, and nothing else. It takes no click and shows no
-               selection.
-               It used to take both, and at `months="2"` that put the same
-               date on the page twice: September the 5th is a trailing cell in
-               August's grid and a real cell in September's, so choosing the
-               end of a range drew the dark terminus in both, and the band ran
-               through August's last row and then again through September's
-               first. Two cells cannot be the answer to one question. The band
-               now stops at the last day the grid owns and picks up in the
-               next, which is where those dates actually are. */
+               selection: at `months="2"` the same date is a trailing cell in
+               one grid and a real cell in the next, so marking both puts one
+               answer on the page twice and runs the range band through two
+               rows. The band stops at the last day the grid owns and picks up
+               in the next, which is where those dates actually are. */
             const outside = !sameMonth(date, month);
             // The cell is the column track and the day is the shape centered
             // in it. A range paints the track, so it runs continuously
@@ -778,59 +755,59 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     }
 };
 __decorate([
-    property({ reflect: true })
-], HelixHeadlessDatePicker.prototype, "mode", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessDatePicker.prototype, "months", void 0);
-__decorate([
-    property()
-], HelixHeadlessDatePicker.prototype, "locale", void 0);
+    property({ attribute: 'default-month' })
+], HelixHeadlessDatePicker.prototype, "defaultMonth", void 0);
 __decorate([
     property({ attribute: 'disable-dates' })
 ], HelixHeadlessDatePicker.prototype, "disableDates", void 0);
 __decorate([
     property({ attribute: 'disable-days' })
 ], HelixHeadlessDatePicker.prototype, "disableDays", void 0);
+__decorate([
+    property({ attribute: 'first-day-of-week', type: Number })
+], HelixHeadlessDatePicker.prototype, "firstDayOfWeek", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDatePicker.prototype, "invalid", void 0);
 __decorate([
     property()
-], HelixHeadlessDatePicker.prototype, "month", null);
+], HelixHeadlessDatePicker.prototype, "label", void 0);
 __decorate([
-    property({ attribute: 'previous-label' })
-], HelixHeadlessDatePicker.prototype, "previousLabel", void 0);
+    property()
+], HelixHeadlessDatePicker.prototype, "month", null);
 __decorate([
-    property({ attribute: 'next-label' })
-], HelixHeadlessDatePicker.prototype, "nextLabel", void 0);
+    property()
+], HelixHeadlessDatePicker.prototype, "locale", void 0);
 __decorate([
-    property({ attribute: 'default-month' })
-], HelixHeadlessDatePicker.prototype, "defaultMonth", void 0);
+    property()
+], HelixHeadlessDatePicker.prototype, "max", void 0);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessDatePicker.prototype, "mode", void 0);
 __decorate([
     property({ type: Number })
-], HelixHeadlessDatePicker.prototype, "step", void 0);
+], HelixHeadlessDatePicker.prototype, "months", void 0);
 __decorate([
-    property()
-], HelixHeadlessDatePicker.prototype, "max", void 0);
+    property({ attribute: 'next-label' })
+], HelixHeadlessDatePicker.prototype, "nextLabel", void 0);
 __decorate([
-    property()
-], HelixHeadlessDatePicker.prototype, "label", void 0);
+    property({ attribute: 'previous-label' })
+], HelixHeadlessDatePicker.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: 'first-day-of-week', type: Number })
-], HelixHeadlessDatePicker.prototype, "firstDayOfWeek", void 0);
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessDatePicker.prototype, "readOnly", void 0);
 __decorate([
     state()
 ], HelixHeadlessDatePicker.prototype, "focused", void 0);
-__decorate([
-    property({ attribute: 'readonly', reflect: true, type: Boolean })
-], HelixHeadlessDatePicker.prototype, "readOnly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessDatePicker.prototype, "required", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessDatePicker.prototype, "step", void 0);
 HelixHeadlessDatePicker = __decorate([
     customElement('helix-headless-date-picker')
 ], HelixHeadlessDatePicker);

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

@@ -58,50 +58,44 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @csspart dialog - The native dialog element.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
+    /**
+     * Which close requests the browser answers on its own.
+     *
+     * `<dialog closedby>`, forwarded, and safe to forward because every path it
+     * opens still comes back through this element: a close request fires `cancel`
+     * first, `handleCancel` prevents it, and `requestOpen` decides. So
+     * `closedby="any"` gains light dismiss without giving up the refusal, which is
+     * the property this component exists to keep.
+     *
+     * Absent by default, which is the platform's `auto` and this library's rule
+     * that a resting value is an attribute's absence.
+     */
+    closedBy?: 'any' | 'closerequest' | 'none';
     /**
      * Accessible name for the dialog.
      */
     label: string;
+    protected readonly commands: CommandController;
     /**
-     * Whether Escape can close it.
+     * Whether Escape or a press on the backdrop can close it.
      *
      * Off for a dialog that must be answered. It does not disable the close
      * control a consumer slots in: refusing to be dismissed is not the same as
      * refusing to be closed, and a dialog with no way out at all is a trap.
      *
-     * Escape *and* a press on the backdrop, which it now genuinely means. The
-     * sentence said both for a long time while nothing listened for a backdrop
-     * press, so it promised a behavior a consumer would have written their
-     * markup around; the fix then was to narrow the sentence, and the fix now is
-     * to build the half that was missing.
-     *
      * A persistent dialog does not ignore that press. It answers it: see
      * `refuse`, which is the only way a dialog that will not be dismissed can say
      * so at the moment a reader asks.
      */
     persistent: boolean;
-    protected readonly commands: CommandController;
-    /**
-     * Which close requests the browser answers on its own.
-     *
-     * `<dialog closedby>`, forwarded, and safe to forward because every path it
-     * opens still comes back through this element: a close request fires `cancel`
-     * first, `handleCancel` prevents it, and `requestOpen` decides. So
-     * `closedby="any"` gains light dismiss without giving up the refusal, which is
-     * the property this component exists to keep.
-     *
-     * Absent by default, which is the platform's `auto` and this library's rule
-     * that a resting value is an attribute's absence.
-     */
-    closedBy?: 'any' | 'closerequest' | 'none';
     /**
      * What the dialog closed with, the way `<dialog>` reports it.
      *
      * **The whole point of a `<dialog>` returning a value is lost behind a shadow
      * boundary**, which is where this one is: the platform's contract is
-     * `close(value)` then read `returnValue`, and a consumer could do neither
-     * because `querySelector` does not reach the element. A confirmation asking
-     * which button was pressed is the ordinary case and had no answer.
+     * `close(value)` then read `returnValue`, and `querySelector` does not reach
+     * the element to do either. A confirmation asking which button was pressed is
+     * the ordinary case.
      *
      * Held here as well as on the element, so a value set before the first render
      * survives to it and a consumer reading one back gets what they wrote.
@@ -173,8 +167,31 @@ export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
      * this decides only when it happens. Removed first so a second press
      * restarts it: without that, pressing twice does nothing the second time,
      * which is the impression the whole thing exists to avoid.
+     *
+     * **`once: true` is not a release when the event cannot arrive.** Under
+     * `prefers-reduced-motion: reduce` the styled tier sets `animation: none`, so
+     * no animation runs, `animationend` never fires, and every refused press left
+     * a listener that could not be removed and an attribute that stayed on. The
+     * controller bounds it to one listener, aborted before the next is added.
+     *
+     * **And the attribute is cleared at once when no animation is running**, asked
+     * of the platform rather than of a media query: this tier does not know what
+     * refusing looks like, and the same silence arrives from a consumer's
+     * stylesheet, from reduced motion, and from no styled tier being loaded at
+     * all.
+     *
+     * **`CSSAnimation` specifically, because `getAnimations` returns transitions
+     * too.** A panel that is still running its entrance transition answers the
+     * bare `length` check with a truthy number while no animation exists to end,
+     * so a refusal landing inside that window took the listener branch and waited
+     * for an `animationend` that was never coming: the attribute stayed on until
+     * the next refused press. That is the same bug this method exists to close,
+     * one window narrower. `getAnimations` flushes pending style itself, so no
+     * reflow is forced for it.
      */
     private refuse;
+    /** Bounds the refusal listener to one, whether or not it ever fires. */
+    private refusal;
     protected render(): TemplateResult;
 }
 declare global {