@fusion.dev/helix 0.152.0 → 0.153.0

package/types/vue.d.ts

@@ -689,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
@@ -786,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 = {
@@ -1226,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
@@ -1385,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 = {
@@ -1395,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.
 
@@ -6691,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 = {};
@@ -8318,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 = {
@@ -9411,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
@@ -9568,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 = {
@@ -12257,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".
@@ -12907,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
@@ -12919,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.
@@ -13989,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
@@ -14084,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 = {
@@ -20518,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. */
@@ -21408,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,

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
       /**