@fusion.dev/helix 0.179.0 → 0.180.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.179.0",
+  "version": "0.180.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,13 +54,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.179.0",
-    "@fusion.dev/helix-headless": "0.179.0",
-    "@fusion.dev/helix-styles": "0.179.0"
+    "@fusion.dev/helix-core": "0.180.1",
+    "@fusion.dev/helix-headless": "0.180.1",
+    "@fusion.dev/helix-styles": "0.180.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.179.0",
-    "@fusion.dev/helix-testing": "0.179.0",
+    "@fusion.dev/helix-cem": "0.180.1",
+    "@fusion.dev/helix-testing": "0.180.1",
     "@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

@@ -12337,6 +12337,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   rangeLengthMessage?: (HelixDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "range-order-message"?: (HelixDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  rangeOrderMessage?: (HelixDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "range-overflow-message"?: (HelixDateInput["rangeOverflowMessage"]) | undefined;
@@ -12869,6 +12875,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   "prop:rangeLengthMessage"?: (HelixDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "attr:range-order-message"?: (HelixDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "prop:rangeOrderMessage"?: (HelixDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "attr:range-overflow-message"?: (HelixDateInput["rangeOverflowMessage"]) | undefined;
@@ -13218,6 +13230,12 @@ it. */
   "previous-years-label"?: (HelixDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   previousYearsLabel?: (HelixDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "range-order-message"?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  rangeOrderMessage?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixDatePicker["rangeOverflowMessage"]) | undefined;
@@ -13571,6 +13589,12 @@ it. */
   "attr:previous-years-label"?: (HelixDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   "prop:previousYearsLabel"?: (HelixDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "attr:range-order-message"?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "prop:rangeOrderMessage"?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "attr:range-overflow-message"?: (HelixDatePicker["rangeOverflowMessage"]) | undefined;
@@ -21809,7 +21833,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   items?: (HelixListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -22109,7 +22134,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   "prop:items"?: (HelixListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -47198,6 +47224,9 @@ export type CustomElements = {
    *
    * Through the base's prototype rather than `super`, because the base this
    * grafts onto is any element and only a form element has the hook.
+   * - `click() => void`: Ticks or clears the box, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -49886,6 +49915,8 @@ export type CustomElements = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -50276,6 +50307,8 @@ export type CustomElements = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -56470,7 +56503,8 @@ export type CustomElements = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -62194,6 +62228,9 @@ export type CustomElements = {
    * the item's.
    * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
    * disabled or a listener cancels the event.
+   * - `click() => void`: Chooses the radio, as `click()` does a native radio: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    *
    * ## CSS Custom Properties
    *
@@ -66290,6 +66327,9 @@ export type CustomElements = {
    *
    * Through the base's prototype rather than `super`, because the base this
    * grafts onto is any element and only a form element has the hook.
+   * - `click() => void`: Turns the switch on or off, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -69734,6 +69774,9 @@ export type CustomElements = {
    * the item's.
    * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
    * disabled or a listener cancels the event.
+   * - `click() => void`: Presses the toggle, as `click()` does a native button: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    *
    * ## CSS Custom Properties
    *
@@ -76938,6 +76981,9 @@ export type CustomElementsSolidJs = {
    *
    * Through the base's prototype rather than `super`, because the base this
    * grafts onto is any element and only a form element has the hook.
+   * - `click() => void`: Ticks or clears the box, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -79652,6 +79698,8 @@ export type CustomElementsSolidJs = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -80045,6 +80093,8 @@ export type CustomElementsSolidJs = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -86336,7 +86386,8 @@ export type CustomElementsSolidJs = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -92175,6 +92226,9 @@ export type CustomElementsSolidJs = {
    * the item's.
    * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
    * disabled or a listener cancels the event.
+   * - `click() => void`: Chooses the radio, as `click()` does a native radio: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    *
    * ## CSS Custom Properties
    *
@@ -96348,6 +96402,9 @@ export type CustomElementsSolidJs = {
    *
    * Through the base's prototype rather than `super`, because the base this
    * grafts onto is any element and only a form element has the hook.
+   * - `click() => void`: Turns the switch on or off, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -99852,6 +99909,9 @@ export type CustomElementsSolidJs = {
    * the item's.
    * - `select() => boolean`: Selects the item and fires `helix-select`. Returns `false` if the item is
    * disabled or a listener cancels the event.
+   * - `click() => void`: Presses the toggle, as `click()` does a native button: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    *
    * ## CSS Custom Properties
    *

package/types/vue.d.ts

@@ -6539,6 +6539,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   rangeLengthMessage?: (HelixDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "range-order-message"?: (HelixDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  rangeOrderMessage?: (HelixDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "range-overflow-message"?: (HelixDateInput["rangeOverflowMessage"]) | undefined;
@@ -6880,6 +6886,12 @@ it. */
   "previous-years-label"?: (HelixDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   previousYearsLabel?: (HelixDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "range-order-message"?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  rangeOrderMessage?: (HelixDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixDatePicker["rangeOverflowMessage"]) | undefined;
@@ -11305,7 +11317,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   items?: (HelixListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.

package/types/words.d.ts

@@ -614,6 +614,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `A range is two dates.`
        */
       rangeLengthMessage: Message
+      /**
+       * The message shown when a range ends before it starts. `{start}` is
+       * replaced with the start, written the way the field writes dates.
+       *
+       * English: `Choose an end on or after {start}.`
+       */
+      rangeOrderMessage: Message
       /**
        * The message shown when a date is after `max`. `{max}` is replaced with
        * `max`, written the way the field writes dates.
@@ -1505,6 +1512,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Earlier years`
        */
       previousYearsLabel: Message
+      /**
+       * The validation message for a range that ends before it starts. `{start}`
+       * is replaced with the start, written as a date in `locale`.
+       *
+       * English: `Choose an end on or after {start}.`
+       */
+      rangeOrderMessage: Message
       /**
        * The validation message for a date after `max`. `{max}` is replaced with
        * `max`, written as a date in `locale`.