@fusion.dev/helix 0.178.0 → 0.180.0

package/types/vue.d.ts

@@ -930,6 +930,14 @@ hit-testable at rest, or it would swallow clicks meant for what is over it,
 and an element that is not hit-testable never receives the `pointermove`
 this listens for. Asking for the pointer is asking for the hit test. */
   interactive?: (HelixAura["interactive"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  "pause-control"?: (HelixAura["pauseControl"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  pauseControl?: (HelixAura["pauseControl"]) | undefined;
   /** Whether the field holds still on the frame it shows.
 
 Set it from a pause control on your page, so a reader can stop the motion,
@@ -937,6 +945,14 @@ as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
 change to another property still repaints the frame. Clearing it starts
 the field from where it stopped. */
   paused?: (HelixAura["paused"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  "pause-label"?: (HelixAura["pauseLabel"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  pauseLabel?: (HelixAura["pauseLabel"]) | undefined;
   /** How far the pointer reaches into the field, `0` upward.
 
 Multiplied into the presence the pointer already fades in and out with, so
@@ -1009,6 +1025,8 @@ states. */
 };
 
 export type HelixAuraVueEvents = {
+  /** Fired when the aura's own pause control pauses the field or starts it again. */
+  change: HelixAuraElementEvent;
   /** Fired each time the aura stops drawing its shader and shows its gradient, with the reason. */
   "helix-aura-fallback": HelixAuraHelixAuraFallbackElementEvent;
 };
@@ -6521,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;
@@ -6862,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;
@@ -9186,11 +9216,36 @@ export type HelixHeatmapElementEvent<E = Event> = TypedEvent<HelixHeatmap, E>;
 /** `helix-before-change` event type */
 export type HelixHeatmapHelixBeforeChangeElementEvent =
   HelixHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeatmapHelixReadingChangeElementEvent =
+  HelixHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeatmapHelixReadingPressElementEvent =
+  HelixHeatmapElementEvent<HelixReadingPressEvent>;
 /** `helix-resize` event type */
 export type HelixHeatmapHelixResizeElementEvent =
   HelixHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeatmapVueProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeatmap["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  loading?: (HelixHeatmap["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "loading-text"?: (HelixHeatmap["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  loadingText?: (HelixHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -9233,16 +9288,6 @@ legend hid is not counted. */
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   busiestLabel?: (HelixHeatmap["busiestLabel"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  "empty-text"?: (HelixHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  emptyText?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   gap?: (HelixHeatmap["gap"]) | undefined;
@@ -9300,13 +9345,9 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (HelixHeatmap["rows"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   "selected-label"?: (HelixHeatmap["selectedLabel"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   selectedLabel?: (HelixHeatmap["selectedLabel"]) | undefined;
   /** What the `selection` part says after the selection changes. `{count}` is
 how many cells are selected, written in the locale, and a language that
@@ -9393,6 +9434,10 @@ export type HelixHeatmapVueEvents = {
   change: HelixHeatmapElementEvent;
   /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
   "helix-before-change": HelixHeatmapHelixBeforeChangeElementEvent;
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeatmapHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeatmapHelixReadingPressElementEvent;
   /** Fired when the number of cells drawn changes, with the new number. */
   "helix-resize": HelixHeatmapHelixResizeElementEvent;
 };
@@ -11272,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.
@@ -21701,6 +21747,8 @@ export type CustomCssProperties = {
   "--aura-ground"?: (string) | undefined;
   /** The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`. */
   "--aura-haze"?: (string) | undefined;
+  /** The pause control's ground. Defaults to `--helix-color-surface-overlay`. */
+  "--aura-pause-background-color"?: (string) | undefined;
   /** The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one. */
   "--aura-peak"?: (string) | undefined;
   /** The fill of the count of avatars past `max`. */
@@ -24181,7 +24229,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixAreaChartVueProps,
     HelixAreaChartVueEvents
   >;
-  /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes.  Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token.  The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload.  The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - 'paused' is set, from a pause control on your page. The element holds the   frame it shows. - The browser takes back the drawing context, on a GPU reset or past its   limit of about sixteen contexts. The gradient shows until the context   returns.  On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU.  Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold.  **Content placed inside sits over the field**, in a 'content' part that covers the aura, so an interactive aura answers the pointer over the content too. Clicks still reach the content. Style '::part(content)' to place it, such as centering a hero's heading.  **The colors are the theme's, and each has a hook**: '--aura-ground', '--aura-haze', '--aura-glow' and '--aura-peak', read by the shader and by the fallback gradient alike, from wherever on the page you set them. A hook changed while the aura draws, by a class, a style or the color mode, reaches the shader on the next frame.  Where the gradient shows in place of the shader, the aura matches ':state(fallback)' and sends 'helix-aura-fallback' with the reason. */
+  /** One fragment shader draws over a full-screen triangle, and its palette comes from the tokens. A background built on '--helix-color-primary' changes when your brand color changes.  Every shape ramps through four token stops, and the token layer inverts each one: the page background, 'primary-subtle', 'primary', and a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black removes its chroma. The component reads which way the page runs from the background's luminance, because the mode is a private token.  The geometry is three vertices derived from 'gl_VertexID'. There is no dependency, scene graph, attribute, buffer, or upload.  The shader stops drawing in these cases: - The element is off screen or in a background tab. - 'prefers-reduced-motion' is set. The element shows one still frame. - 'paused' is set, from a pause control on your page or from the aura's own   under 'pause-control'. The element holds the frame it shows. - The browser takes back the drawing context, on a GPU reset or past its   limit of about sixteen contexts. The gradient shows until the context   returns.  On a renderer that draws on the CPU, such as a headless browser or a machine with no usable GPU, the element shows the gradient. There the shader costs about 450ms for the first frame of each element, against 2ms on a GPU.  Aura is styled only and has behavior, which the tier split does not otherwise allow. Its behavior is drawing to a canvas, so there is no structure for you to restyle and nothing for a headless version to hold.  **Content placed inside sits over the field**, in a 'content' part that covers the aura, so an interactive aura answers the pointer over the content too. Clicks still reach the content. Style '::part(content)' to place it, such as centering a hero's heading.  **The colors are the theme's, and each has a hook**: '--aura-ground', '--aura-haze', '--aura-glow' and '--aura-peak', read by the shader and by the fallback gradient alike, from wherever on the page you set them. A hook changed while the aura draws, by a class, a style or the color mode, reaches the shader on the next frame.  **'pause-control' draws a control that stops the motion and starts it again**, in the trailing corner of the field, as WCAG 2.2.2 asks of anything that moves for more than five seconds. It is a toggle button named by 'pause-label', which says it is pressed while the field is paused, and a press sends 'change'. A reader who asked for reduced motion sees no motion and no control.  Where the gradient shows in place of the shader, the aura matches ':state(fallback)' and sends 'helix-aura-fallback' with the reason. */
   "helix-aura": DefineCustomElement<
     HelixAura,
     HelixAuraVueProps,

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.
@@ -1004,6 +1011,16 @@ declare module '@fusion.dev/helix-core' {
        */
       menuLabel: Message
     }
+    'helix-aura': {
+      /**
+       * The pause control's name, read by screen readers. The control is a toggle
+       * and says it is pressed while the field is paused, so the name stays the
+       * same.
+       *
+       * English: `Pause the motion`
+       */
+      pauseLabel: Message
+    }
     'helix-avatar-group': {
       /**
        * What a screen reader is told the count is, with `{count}` for the number,
@@ -1495,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`.