@fusion.dev/helix-headless 0.181.1 → 0.182.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.181.1",
+  "version": "0.182.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.181.1",
-    "@fusion.dev/helix-icons": "0.181.1",
+    "@fusion.dev/helix-core": "0.182.0",
+    "@fusion.dev/helix-icons": "0.182.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.181.1",
-    "@fusion.dev/helix-testing": "0.181.1",
+    "@fusion.dev/helix-cem": "0.182.0",
+    "@fusion.dev/helix-testing": "0.182.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

@@ -38566,6 +38566,11 @@ export type CustomElements = {
    * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
    * pressed with Enter or Space, for a page that opens what a reading stands for.
    *
+   * **A cell's `data-tone` colors its own bar**, such as `data-tone="primary"`
+   * on the one reading a chart is about, so one column of numbers can single
+   * a bar out without a second column to color it. Without one, a bar takes
+   * its series' color.
+   *
    * **`data` takes the readings as data** where the page has no table to point
    * `for` at, in a table's shape: the column headings, then one row per reading
    * with its label first. A table is still the better source where the page can
@@ -38847,6 +38852,13 @@ export type CustomElements = {
    *
    * - `--bar-chart-axis`: The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.
    * - `--bar-chart-secondary`: The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.
+   * - `--bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
+   * - `--bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
+   * - `--bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
+   * - `--bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
+   * - `--bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+   * - `--bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
+   * - `--bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
    * - `--chart-bar-wash`: The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set.
    *
    * ## CSS Parts
@@ -68254,6 +68266,11 @@ export type CustomElementsSolidJs = {
    * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
    * pressed with Enter or Space, for a page that opens what a reading stands for.
    *
+   * **A cell's `data-tone` colors its own bar**, such as `data-tone="primary"`
+   * on the one reading a chart is about, so one column of numbers can single
+   * a bar out without a second column to color it. Without one, a bar takes
+   * its series' color.
+   *
    * **`data` takes the readings as data** where the page has no table to point
    * `for` at, in a table's shape: the column headings, then one row per reading
    * with its label first. A table is still the better source where the page can
@@ -68535,6 +68552,13 @@ export type CustomElementsSolidJs = {
    *
    * - `--bar-chart-axis`: The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.
    * - `--bar-chart-secondary`: The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.
+   * - `--bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
+   * - `--bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
+   * - `--bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
+   * - `--bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
+   * - `--bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+   * - `--bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
+   * - `--bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
    * - `--chart-bar-wash`: The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set.
    *
    * ## CSS Parts
@@ -96959,6 +96983,20 @@ export type CustomCssProperties = {
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
   "--bar-chart-secondary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="accent"`. */
+  "--bar-chart-tone-accent"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="danger"`. */
+  "--bar-chart-tone-danger"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="info"`. */
+  "--bar-chart-tone-info"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="muted"`. */
+  "--bar-chart-tone-muted"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
+  "--bar-chart-tone-primary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="success"`. */
+  "--bar-chart-tone-success"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="warning"`. */
+  "--bar-chart-tone-warning"?: (string) | undefined;
   /** The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set. */
   "--chart-bar-wash"?: (string) | undefined;
   /** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */

package/types/vue.d.ts

@@ -19082,6 +19082,20 @@ export type CustomCssProperties = {
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
   "--bar-chart-secondary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="accent"`. */
+  "--bar-chart-tone-accent"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="danger"`. */
+  "--bar-chart-tone-danger"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="info"`. */
+  "--bar-chart-tone-info"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="muted"`. */
+  "--bar-chart-tone-muted"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
+  "--bar-chart-tone-primary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="success"`. */
+  "--bar-chart-tone-success"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="warning"`. */
+  "--bar-chart-tone-warning"?: (string) | undefined;
   /** The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set. */
   "--chart-bar-wash"?: (string) | undefined;
   /** Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look. */
@@ -19320,7 +19334,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessBadgeVueProps,
     HelixHeadlessBadgeVueEvents
   >;
-  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. | | Down, Up under 'orientation="horizontal"' | Moves to the next or the previous reading, and Right and Left move among the series. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
+  /** Every bar is measured from zero, and no property changes the baseline, because a bar's length is its value. To show the differences between values, use a line chart.  The labels are HTML beside the drawing. An '<svg>' that fills its box scales the text inside it: the same 'font-size' renders at 10px in a narrow chart and 43px in a wide one, and SVG has no setting that keeps text at one size the way 'vector-effect' does for strokes.  The table is the accessible representation, and the drawing is hidden from screen readers, so they get the numbers themselves. The 'summary' part names the chart, from 'label' or the table's caption, and gives each series' highest reading.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The arrows along the categories move from one to the next, which is left and right for columns and up and down for 'orientation="horizontal"'. Home and End go to the first and the last, and the other pair of arrows moves among the series of a category. The tooltip follows, the 'live' part says the reading in words, and Escape puts the tooltip away.  The component writes the custom properties below with numbers it computes, and the stylesheet that draws the chart reads them. Do not set them yourself.  **A tap shows the reading under it**, and keeps it until a tap lands elsewhere. 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' says a reading was clicked, tapped, or pressed with Enter or Space, for a page that opens what a reading stands for.  **A cell's 'data-tone' colors its own bar**, such as 'data-tone="primary"' on the one reading a chart is about, so one column of numbers can single a bar out without a second column to color it. Without one, a bar takes its series' color.  **'data' takes the readings as data** where the page has no table to point 'for' at, in a table's shape: the column headings, then one row per reading with its label first. A table is still the better source where the page can show one, since it reads before any script runs.  **A chart with nothing to draw says so.** A table with no readings shows 'empty-text', "No readings", in the plot, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in their place, such as a link to add the first reading.  **Keyboard.** The plot is one tab stop.  | Key | What it does | |---|---| | Tab | Moves focus to the plot and shows the first reading. | | Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. | | Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. | | Down, Up under 'orientation="horizontal"' | Moves to the next or the previous reading, and Right and Left move among the series. | | Home, End | Moves to the first or the last reading. | | Page Down, Page Up | Moves a tenth of the readings on or back. | | Enter, Space | Presses the reading shown, which sends 'helix-reading-press'. | | Escape | Puts the reading and its tooltip away. | */
   "helix-headless-bar-chart": DefineCustomElement<
     HelixHeadlessBarChart,
     HelixHeadlessBarChartVueProps,