@fusion.dev/helix 0.151.0 → 0.153.0

package/types/vue.d.ts

@@ -650,6 +650,22 @@ the wordmark and the actions happen to measure.
 takes a search field or a breadcrumb trail as readily as a `Navigation`, so
 the property carries the part's name, `content`. */
   contentAlign?: (HelixAppHeader["contentAlign"]) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "fold-below"?: (HelixAppHeader["foldBelow"] | `${number}`) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  foldBelow?: (HelixAppHeader["foldBelow"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "hide-on-scroll"?: (HelixAppHeader["hideOnScroll"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  hideOnScroll?: (HelixAppHeader["hideOnScroll"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "menu-label"?: (HelixAppHeader["menuLabel"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  menuLabel?: (HelixAppHeader["menuLabel"]) | undefined;
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixAppHeader["scroller"]) | undefined;
@@ -673,6 +689,25 @@ export type HelixAreaChartHelixReadingPressElementEvent =
   HelixAreaChartElementEvent<HelixReadingPressEvent>;
 
 export type HelixAreaChartVueProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixAreaChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixAreaChart["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?: (HelixAreaChart["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"?: (HelixAreaChart["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?: (HelixAreaChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -770,6 +805,29 @@ them, and the tooltip and the table hold every reading. */
 Absent draws none: bands read as a composition need no numbers beside
 them, and the tooltip and the table hold every reading. */
   valueAxis?: (HelixAreaChart["valueAxis"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixAreaChart["data"]) | undefined;
 };
 
 export type HelixAreaChartVueEvents = {
@@ -1210,6 +1268,25 @@ every component in the library and mean something on one. `wash` because
 that is what the tier below already calls it, in `--chart-bar-wash` and in
 the `bar-wash-start` and `bar-wash-end` stops. */
   wash?: (HelixBarChart["wash"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixBarChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixBarChart["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?: (HelixBarChart["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"?: (HelixBarChart["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?: (HelixBarChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -1369,6 +1446,29 @@ bottom of bars under `orientation="horizontal"`.
 Absent draws none with one scale, since bars compared with each other need
 no numbers. With `secondary` both scales are drawn whatever this says. */
   valueAxis?: (HelixBarChart["valueAxis"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixBarChart["data"]) | undefined;
 };
 
 export type HelixBarChartVueEvents = {
@@ -1379,6 +1479,42 @@ export type HelixBarChartVueEvents = {
 };
 
 export type HelixBlockquoteVueProps = {
+  /** How the passage and its attribution align, set as `text-align`.
+
+`center` for a pull quote in the middle of a column and `end` for one
+against its far edge. Under either, the mark `marks` draws stands over
+the first line. Absent aligns as the prose around it does.
+
+Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
+is a legacy HTML attribute the browser maps to `text-align` by itself,
+and it has no `start` or `end`. */
+  "text-align"?: (HelixBlockquote["textAlign"]) | undefined;
+  /** How the passage and its attribution align, set as `text-align`.
+
+`center` for a pull quote in the middle of a column and `end` for one
+against its far edge. Under either, the mark `marks` draws stands over
+the first line. Absent aligns as the prose around it does.
+
+Named for the CSS property it sets, as `Text.textAlign` is: `align` alone
+is a legacy HTML attribute the browser maps to `text-align` by itself,
+and it has no `start` or `end`. */
+  textAlign?: (HelixBlockquote["textAlign"]) | undefined;
+  /** How the passage's lines break, set as `text-wrap`.
+
+`balance` evens out the length of every line, which suits a pull quote of
+a few lines in display type. `pretty` avoids a last line of one short
+word, for a longer passage. Absent, the lines break as the browser breaks
+them. The same name and values `Text` takes, but `nowrap`, a passage being
+more than one line. */
+  "text-wrap"?: (HelixBlockquote["textWrap"]) | undefined;
+  /** How the passage's lines break, set as `text-wrap`.
+
+`balance` evens out the length of every line, which suits a pull quote of
+a few lines in display type. `pretty` avoids a last line of one short
+word, for a longer passage. Absent, the lines break as the browser breaks
+them. The same name and values `Text` takes, but `nowrap`, a passage being
+more than one line. */
+  textWrap?: (HelixBlockquote["textWrap"]) | undefined;
   /** Who said it, and where, as words, such as "Maria Lopez, operations
 manager". The `attribution` slot replaces them, for markup such as a link.
 
@@ -6422,8 +6558,14 @@ 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.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedby?: (HelixDialog["closedBy"]) | undefined;
   /** Which close requests the browser handles on its own.
 
@@ -6433,8 +6575,14 @@ 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.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedBy?: (HelixDialog["closedBy"]) | undefined;
   /** Draws a control that closes the dialog, in the corner where the title is.
 
@@ -6663,6 +6811,29 @@ rotation that puts the first slice at nine o'clock, the aspect ratio of a
 box that is no longer square, and where the middle sits once the bottom of
 the circle is not drawn. */
   sweep?: (HelixDonutChart["sweep"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixDonutChart["data"]) | undefined;
 };
 
 export type HelixDonutChartVueEvents = {};
@@ -6767,6 +6938,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
 attribute on the host, and nothing selects on it: the scrim is rendered or
 not, rather than shown or hidden by CSS. */
   modal?: (HelixDrawer["modal"]) | undefined;
+  /** Stops Escape, a press outside, and a swipe from closing the drawer, for a
+drawer that has to be answered.
+
+The close control and `close()` still close it, as on `Dialog`: a panel
+with no way out at all is a trap. */
+  persistent?: (HelixDrawer["persistent"]) | undefined;
   /** Which edge the drawer comes from.
 
 Unset is `end`, and it stays unset rather than being written down: a
@@ -8284,6 +8461,29 @@ no order in it. */
 Set it to start with cells selected. Written by a press or a key under
 `selection-mode`. */
   value?: (HelixHeatmap["value"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeatmap["data"]) | undefined;
 };
 
 export type HelixHeatmapVueEvents = {
@@ -9377,6 +9577,25 @@ chart and a card mean the same thing by the word.
 material choice, it is an absent series, and a chart says that by not
 having the datum rather than by painting it invisibly. */
   material?: (HelixLineChart["material"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixLineChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixLineChart["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?: (HelixLineChart["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"?: (HelixLineChart["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?: (HelixLineChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -9534,6 +9753,29 @@ Set it where the distance from nothing is the point rather than the shape,
 and accept that a series which never approaches zero becomes a flat rule
 near the top of the box. */
   zero?: (HelixLineChart["zero"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixLineChart["data"]) | undefined;
 };
 
 export type HelixLineChartVueEvents = {
@@ -12223,7 +12465,13 @@ the state's word.
 
 Off by default, because the name and the busy state already change with
 the state, and an orb beside a stream of messages would otherwise talk
-over them. Set it on an orb that is the only sign of progress on the page. */
+over them. Set it on an orb that is the only sign of progress on the page.
+
+**Without it, finishing is silent.** `done` turns the orb into an image
+named "Done" that is no longer busy, which a screen reader reports when it
+next reaches the orb and does not say as it happens. A page whose own
+result arrives in a live region, such as a chat reply, already says the
+work is done; one that shows nothing else sets `announce`. */
   announce?: (HelixOrb["announce"]) | undefined;
   /** The name read by screen readers. Defaults to the name of the state, such
 as "Thinking".
@@ -12873,7 +13121,8 @@ decimals. Written as JSON in the attribute.
 
 A `percent` style writes the share of the range, and any other the value
 itself, so the example says "18 GB". Absent is a whole percentage. The
-words are announced as well as shown. `value-text` still wins. */
+words are announced whether or not `show-value` shows them. `value-text`
+still wins. */
   "format-options"?: (HelixProgress["formatOptions"]) | undefined;
   /** `Intl.NumberFormat` options the reading is written with, as React Aria's
 Meter and ProgressBar take them: a unit, a currency, or a number of
@@ -12885,7 +13134,8 @@ decimals. Written as JSON in the attribute.
 
 A `percent` style writes the share of the range, and any other the value
 itself, so the example says "18 GB". Absent is a whole percentage. The
-words are announced as well as shown. `value-text` still wins. */
+words are announced whether or not `show-value` shows them. `value-text`
+still wins. */
   formatOptions?: (HelixProgress["formatOptions"]) | undefined;
   /** Whether the length of the task is unknown. The bar then shows activity
 without a value.
@@ -13955,6 +14205,25 @@ export type HelixScatterChartHelixReadingPressElementEvent =
   HelixScatterChartElementEvent<HelixReadingPressEvent>;
 
 export type HelixScatterChartVueProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixScatterChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixScatterChart["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?: (HelixScatterChart["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"?: (HelixScatterChart["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?: (HelixScatterChart["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -14050,6 +14319,29 @@ Absent draws none. A series with fewer than two points, or with every
 point at one measure across, has no line to draw. The summary already
 gives each series' correlation, which says how near the points are to it. */
   trend?: (HelixScatterChart["trend"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixScatterChart["data"]) | undefined;
 };
 
 export type HelixScatterChartVueEvents = {
@@ -15054,6 +15346,9 @@ Reading gives where it is; writing declares it the consumer's, and
 `default-position` seeds one this element owns. The same accessor pair
 `Pagination.page` and the calendar's `month` carry. */
   position?: (HelixSplitter["position"]) | undefined;
+  /** The pane that keeps its size when the splitter's own size changes. The
+other pane takes all of the change. Unset, both keep their share. */
+  primary?: (HelixSplitter["primary"]) | undefined;
   /** Where a dragged divider snaps, comma separated, as Web Awesome's split
 panel does: a bare number is a percentage and a length such as `240px` is
 measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -20481,6 +20776,12 @@ export type CustomCssProperties = {
   "--popover-shadow"?: (string) | undefined;
   /** Fill of the part that is done. */
   "--progress-color"?: (string) | undefined;
+  /** The color of the words of the default slot where they are over the track, and in a ring. */
+  "--progress-content-color"?: (string) | undefined;
+  /** The color of the words of the default slot where they are over the fill. */
+  "--progress-content-fill-color"?: (string) | undefined;
+  /** The type size of the words of the default slot. */
+  "--progress-content-size"?: (string) | undefined;
   /** Color of a slotted label. */
   "--progress-label-color"?: (string) | undefined;
   /** Space between a slotted label and the bar. */
@@ -21371,7 +21672,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixBarChartVueProps,
     HelixBarChartVueEvents
   >;
-  /** Set in the display face, larger than body text, to mark a change of voice. No quotation marks are drawn by default, because the size and spacing already set the passage apart. 'marks' draws one large opening mark over the passage, as a pull quote sets it, in the element's language. */
+  /** Set in the display face, larger than body text, to mark a change of voice. No quotation marks are drawn by default, because the size and spacing already set the passage apart. 'marks' draws one large opening mark over the passage, as a pull quote sets it, in the element's language.  'text-align' sets the passage and its attribution in the middle of the column or against its far edge, as a pull quote often stands. There, the mark 'marks' draws stands over the passage rather than beside it. 'text-wrap="balance"' evens out a short passage's lines. */
   "helix-blockquote": DefineCustomElement<
     HelixBlockquote,
     HelixBlockquoteVueProps,
@@ -22073,6 +22374,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepsVueProps,
     HelixStepsVueEvents
   >;
+  /** A step draws its mark, its name as a 'helix-button', and the line that joins it to the steps either side. The mark is a tick on a finished step, a dot on the current one, and an empty ring on one nobody has reached. Where the list sets 'variant="numeric"', it is the step's number.  Down a column, the current step opens to show what is in its 'content' slot, and the others collapse it. A collapsed stage's content is hidden, so Tab and a screen reader pass over it as well. */
   "helix-step": DefineCustomElement<
     HelixStep,
     HelixStepVueProps,

package/types/words.d.ts

@@ -148,9 +148,10 @@ declare module '@fusion.dev/helix-core' {
        */
       emptySegmentLabel: Message
       /**
-       * The text shown and announced when there are no rows and none are loading.
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
        *
-       * English: `Nothing to show`
+       * English: `No readings`
        */
       emptyText: Message
       /**
@@ -305,9 +306,10 @@ declare module '@fusion.dev/helix-core' {
        */
       listLabel: Message
       /**
-       * The text shown and announced while the rows load.
+       * 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.
        *
-       * English: `Loading`
+       * English: `Loading readings`
        */
       loadingText: Message
       /**
@@ -832,6 +834,14 @@ declare module '@fusion.dev/helix-core' {
        */
       zoomOutLabel: Message
     }
+    'helix-app-header': {
+      /**
+       * The name of the toggle that opens a folded middle region.
+       *
+       * English: `Menu`
+       */
+      menuLabel: Message
+    }
     'helix-avatar-group': {
       /**
        * What a screen reader is told the count is, with `{count}` for the number,