@fusion.dev/helix-headless 0.164.0 → 0.165.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.164.0",
+  "version": "0.165.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.164.0",
-    "@fusion.dev/helix-icons": "0.164.0",
+    "@fusion.dev/helix-core": "0.165.0",
+    "@fusion.dev/helix-icons": "0.165.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.164.0",
-    "@fusion.dev/helix-testing": "0.164.0",
+    "@fusion.dev/helix-cem": "0.165.0",
+    "@fusion.dev/helix-testing": "0.165.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -14258,7 +14258,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -14400,7 +14402,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   "prop:relative"?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   "prop:second"?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -22042,10 +22046,11 @@ one they already know. */
 invalid, as it is in a native number field.
 
 Unset, a step moves by one, or by one percent under a percent format, and
-a typed number is rounded to the smallest amount `format-options` shows
-rather than to whole steps, as React Aria's NumberField does: a field
-showing dollars keeps the cents typed into it. Without `format-options`
-the grid is whole numbers, as in a native number field. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   step?: (HelixHeadlessNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -22320,10 +22325,11 @@ one they already know. */
 invalid, as it is in a native number field.
 
 Unset, a step moves by one, or by one percent under a percent format, and
-a typed number is rounded to the smallest amount `format-options` shows
-rather than to whole steps, as React Aria's NumberField does: a field
-showing dollars keeps the cents typed into it. Without `format-options`
-the grid is whole numbers, as in a native number field. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   "prop:step"?: (HelixHeadlessNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -46941,7 +46947,9 @@ export type CustomElements = {
    * `narrow` ("3h ago").
    *
    * The reading refreshes as it goes stale, as `elapsed` does, and the whole
-   * date is its title. `elapsed` wins where both are set.
+   * date is its title. `elapsed` wins where both are set. Written with no
+   * value, as `elapsed` is, or with a style `Intl` does not know, it reads
+   * `long`.
    * - `second`: How the second is written, where a time of day is shown.
    * - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
    * `short`. Set, it stands in for `hour`, `minute`, `second` and
@@ -53007,7 +53015,7 @@ export type CustomElements = {
    * A separate family from `Input`'s `type="number"`. It renders two buttons,
    * binds four keys `Input` does not, and handles clamping and stepping.
    *
-   * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
+   * The field is `type="text"` with an `inputmode` for a number. Tested in a real
    * browser, `type="number"` fails in three ways:
    * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
    *   typed. A `type="text"` field keeps `"12e"`.
@@ -53015,7 +53023,11 @@ export type CustomElements = {
    *   to 4, when you only meant to scroll the page.
    * - `selectionStart` is `null`, so the caret cannot be managed.
    *
-   * `inputmode="decimal"` keeps the numeric keypad on phones.
+   * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
+   * NumberField chooses it: a keypad with a minus key where the number can be
+   * negative, and one with a decimal separator where the format shows a
+   * fraction. An iPhone has no keypad with a minus key, so a field that can be
+   * negative takes the full keyboard there.
    *
    * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
    * currency, a percent or a unit, while the field is not being edited. Focus
@@ -53126,10 +53138,11 @@ export type CustomElements = {
    * invalid, as it is in a native number field.
    *
    * Unset, a step moves by one, or by one percent under a percent format, and
-   * a typed number is rounded to the smallest amount `format-options` shows
-   * rather than to whole steps, as React Aria's NumberField does: a field
-   * showing dollars keeps the cents typed into it. Without `format-options`
-   * the grid is whole numbers, as in a native number field.
+   * a typed number is rounded to the smallest amount the format shows, as
+   * React Aria's NumberField does: a field showing dollars keeps the cents
+   * typed into it, and one with no `format-options` keeps three decimal
+   * places. `any` puts the number on no grid, as it does in a native number
+   * field: a step moves by one, and any number in range is valid.
    * - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
    * `{below}` and `{above}` filled in with the nearest valid values, written in
    * the locale.
@@ -53351,6 +53364,8 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
+   * - `at-min`: The number is at `min`, so it cannot step down.
    * - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
    * - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
@@ -75789,7 +75804,9 @@ export type CustomElementsSolidJs = {
    * `narrow` ("3h ago").
    *
    * The reading refreshes as it goes stale, as `elapsed` does, and the whole
-   * date is its title. `elapsed` wins where both are set.
+   * date is its title. `elapsed` wins where both are set. Written with no
+   * value, as `elapsed` is, or with a style `Intl` does not know, it reads
+   * `long`.
    * - `second`: How the second is written, where a time of day is shown.
    * - `time-style`/`timeStyle`: The locale's own pattern for the time of day: `full`, `long`, `medium`, or
    * `short`. Set, it stands in for `hour`, `minute`, `second` and
@@ -81937,7 +81954,7 @@ export type CustomElementsSolidJs = {
    * A separate family from `Input`'s `type="number"`. It renders two buttons,
    * binds four keys `Input` does not, and handles clamping and stepping.
    *
-   * The field is `type="text"` with `inputmode="decimal"`. Tested in a real
+   * The field is `type="text"` with an `inputmode` for a number. Tested in a real
    * browser, `type="number"` fails in three ways:
    * - Typing `12e` gives a `.value` of `""`, so the element cannot see what you
    *   typed. A `type="text"` field keeps `"12e"`.
@@ -81945,7 +81962,11 @@ export type CustomElementsSolidJs = {
    *   to 4, when you only meant to scroll the page.
    * - `selectionStart` is `null`, so the caret cannot be managed.
    *
-   * `inputmode="decimal"` keeps the numeric keypad on phones.
+   * `inputmode` keeps a numeric keypad on phones, chosen as React Aria's
+   * NumberField chooses it: a keypad with a minus key where the number can be
+   * negative, and one with a decimal separator where the format shows a
+   * fraction. An iPhone has no keypad with a minus key, so a field that can be
+   * negative takes the full keyboard there.
    *
    * `format-options` shows the number with `Intl.NumberFormat` in `locale`, as a
    * currency, a percent or a unit, while the field is not being edited. Focus
@@ -82056,10 +82077,11 @@ export type CustomElementsSolidJs = {
    * invalid, as it is in a native number field.
    *
    * Unset, a step moves by one, or by one percent under a percent format, and
-   * a typed number is rounded to the smallest amount `format-options` shows
-   * rather than to whole steps, as React Aria's NumberField does: a field
-   * showing dollars keeps the cents typed into it. Without `format-options`
-   * the grid is whole numbers, as in a native number field.
+   * a typed number is rounded to the smallest amount the format shows, as
+   * React Aria's NumberField does: a field showing dollars keeps the cents
+   * typed into it, and one with no `format-options` keeps three decimal
+   * places. `any` puts the number on no grid, as it does in a native number
+   * field: a step moves by one, and any number in range is valid.
    * - `step-mismatch-message`/`stepMismatchMessage`: The message the browser shows when the number is off the step grid, with
    * `{below}` and `{above}` filled in with the nearest valid values, written in
    * the locale.
@@ -82281,6 +82303,8 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `at-max`: The number is at `max`, so it cannot step up, as React Aria's NumberField says with `canIncrement`.
+   * - `at-min`: The number is at `min`, so it cannot step down.
    * - `invalid`: The control has an error to show, from the browser's validation or from your `feedback`.
    * - `scrubbing`: The label is being dragged to change the value, under `scrub`, as Zag's scrubber says while it is held.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.

package/types/vue.d.ts

@@ -7349,7 +7349,9 @@ place of the date: `long` ("3 hours ago"), `short` ("3 hr. ago") or
 `narrow` ("3h ago").
 
 The reading refreshes as it goes stale, as `elapsed` does, and the whole
-date is its title. `elapsed` wins where both are set. */
+date is its title. `elapsed` wins where both are set. Written with no
+value, as `elapsed` is, or with a style `Intl` does not know, it reads
+`long`. */
   relative?: (HelixHeadlessFormatDate["relative"]) | undefined;
   /** How the second is written, where a time of day is shown. */
   second?: (HelixHeadlessFormatDate["second"]) | undefined;
@@ -11354,10 +11356,11 @@ one they already know. */
 invalid, as it is in a native number field.
 
 Unset, a step moves by one, or by one percent under a percent format, and
-a typed number is rounded to the smallest amount `format-options` shows
-rather than to whole steps, as React Aria's NumberField does: a field
-showing dollars keeps the cents typed into it. Without `format-options`
-the grid is whole numbers, as in a native number field. */
+a typed number is rounded to the smallest amount the format shows, as
+React Aria's NumberField does: a field showing dollars keeps the cents
+typed into it, and one with no `format-options` keeps three decimal
+places. `any` puts the number on no grid, as it does in a native number
+field: a step moves by one, and any number in range is valid. */
   step?: (HelixHeadlessNumberInput["step"]) | undefined;
   /** The message the browser shows when the number is off the step grid, with
 `{below}` and `{above}` filled in with the nearest valid values, written in
@@ -19219,7 +19222,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessNotificationsVueProps,
     HelixHeadlessNotificationsVueEvents
   >;
-  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with 'inputmode="decimal"'. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode="decimal"' keeps the numeric keypad on phones.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
+  /** A separate family from 'Input''s 'type="number"'. It renders two buttons, binds four keys 'Input' does not, and handles clamping and stepping.  The field is 'type="text"' with an 'inputmode' for a number. Tested in a real browser, 'type="number"' fails in three ways: - Typing '12e' gives a '.value' of '""', so the element cannot see what you   typed. A 'type="text"' field keeps '"12e"'. - The mouse wheel over a focused field changes the value, for example from 5   to 4, when you only meant to scroll the page. - 'selectionStart' is 'null', so the caret cannot be managed.  'inputmode' keeps a numeric keypad on phones, chosen as React Aria's NumberField chooses it: a keypad with a minus key where the number can be negative, and one with a decimal separator where the format shows a fraction. An iPhone has no keypad with a minus key, so a field that can be negative takes the full keyboard there.  'format-options' shows the number with 'Intl.NumberFormat' in 'locale', as a currency, a percent or a unit, while the field is not being edited. Focus shows the number itself, and a typed '$1,200' or '25%' is read back with the same options. The value stays the plain number: '1200', or '0.25' for 25%. The locale's group separators are read in every field, so '1,234' is a number in 'en-US'.  The field and its two buttons sit in a 'role="group"' named by the label, and the field carries 'role-label', "number field" in English, as its 'aria-roledescription', as React Aria's NumberField does. On iOS and iPadOS the field is a plain text field, with no 'role="spinbutton"', which VoiceOver reads as a slider you cannot type in, and no role description, so VoiceOver says the field is required. React Aria's NumberField does the same.  Validity follows the platform's rules: 'min', 'max', and 'step' are checked and reported through the host's own 'setValidity', under the platform's flag names.  Stepping is separate from typing, so a number is not corrected while you type it. While you type, the form holds the number the text reads as, so a field showing '$2,500.50' gives the form 2500.5, and text that is not a number gives it nothing, as a native number field does.  Holding a stepper button down steps once, then again after 400 milliseconds, then every 60 milliseconds until you let go, as React Aria's NumberField does.  **Keyboard.** The field is one tab stop, and the stepper buttons are not in the tab order.  | Key | What it does | |---|---| | Up, Down | Steps the value up or down by 'step'. | | Page Up, Page Down | Steps by 'large-step' steps, ten by default. | | Home, End | Goes to 'min' or 'max', where there is one. Without one, moves the caret. | | Enter | Commits the typed number and submits the form, as a native field does. |  The field has 'role="spinbutton"' with 'aria-valuenow', 'aria-valuemin', 'aria-valuemax', and the formatted text in 'aria-valuetext'. */
   "helix-headless-number-input": DefineCustomElement<
     HelixHeadlessNumberInput,
     HelixHeadlessNumberInputVueProps,