@fusion.dev/helix 0.34.1 → 0.35.0

package/custom-elements.json

@@ -19323,7 +19323,7 @@
           "name": "HelixCheckbox",
           "cssProperties": [
             {
-              "description": "Fill of an unticked box.",
+              "description": "Fill of the box, which does not change when it is ticked.",
               "name": "--checkbox-background-color"
             },
             {
@@ -19343,7 +19343,7 @@
               "name": "--checkbox-card-padding"
             },
             {
-              "description": "Fill of a ticked box.",
+              "description": "Edge of a ticked box, where `--checkbox-border-color` is unset.",
               "name": "--checkbox-checked-color"
             },
             {
@@ -20465,11 +20465,10 @@
           "helix": {
             "category": "forms",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://helix.fusion.dev/components/checkbox",
             "aliases": [
-              "Tickbox",
-              "Toggle"
+              "Tickbox"
             ],
             "tier": "styled",
             "group": "Checkbox",
@@ -30629,7 +30628,7 @@
           "helix": {
             "category": "actions",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://helix.fusion.dev/components/copy-button",
             "tier": "styled",
             "group": "CopyButton",
@@ -61019,7 +61018,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A row that wraps, because a legend sits under a chart as wide as the chart\nand there is no arrangement of eight names that fits every width. Set\n`--legend-direction` to `column` where it sits beside one instead.\n\nThe eight series colors are mapped here rather than in the tier below, which\ncarries the index and holds no tokens. Eight rules, because an index in\nmarkup cannot select a token and a custom property set inline would be the\nheadless tier naming a color.",
+          "description": "A row that wraps, because a legend sits under a chart as wide as the chart\nand there is no arrangement of eight names that fits every width. Set\n`--legend-direction` to `column` where it sits beside one instead.\n\nThe series colors are mapped on this tier rather than in the one below, which\ncarries the index and holds no tokens. `shared/chart/series.css` is where the\nmapping lives, because an index in markup cannot select a token and a custom\nproperty set inline would be the headless tier naming a color, and it is\nshared because a chart and the legend keying it have to reach the same\ntwenty-four names.",
           "name": "HelixLegend",
           "cssProperties": [
             {
@@ -61559,7 +61558,7 @@
           "helix": {
             "category": "charts",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://helix.fusion.dev/components/legend",
             "aliases": [
               "Key",
@@ -102545,7 +102544,7 @@
               "type": {
                 "text": "'none' | 'ring' | 'square' | 'triangle' | undefined"
               },
-              "description": "The shape of the mark on the last reading.\n\nAbsent is a dot, which is how a line is usually ended, and absent rather\nthan defaulted because a reflecting property with a default writes its\nattribute onto a host the consumer rendered, which React reports as a\nhydration mismatch.\n\n`none` lets the line stop on its own, which suits a series read as a shape\nrather than for where it finished. `ring` lets the ground through, for a\nchart drawn over something busy. `triangle` points along the axis and reads\nas \"and onward\" rather than as a second claim about the data.\n\nA `bar` plot draws none of them: the last column already is the last\nreading, and a mark on top of it would say the same thing twice.\n\nThe shapes come from `helix/styled/src/shared/chart/terminus.css`, shared with\n`LineChart`, so the set is the same wherever a line ends. `ring` is the\none that asks anything of the drawing: the disc it leaves open is masked out\nof the `<svg>`, so the line stops at the ring's inner edge rather than\nrunning on to the reading at its center, and the middle shows whatever the\nchart is drawn over rather than a guess at it.",
+              "description": "The shape of the mark on the last reading.\n\nAbsent is a dot, which is how a line is usually ended, and absent rather\nthan defaulted because a reflecting property with a default writes its\nattribute onto a host the consumer rendered, which React reports as a\nhydration mismatch.\n\n`none` lets the line stop on its own, which suits a series read as a shape\nrather than for where it finished. `square` is the same mark with its\ncorners, for a drawing whose neighbors are square, columns in the table\nbeside it for instance. `ring` lets the ground through, for a chart drawn\nover something busy. `triangle` points along the axis and reads as \"and\nonward\" rather than as a second claim about the data.\n\nA `bar` plot draws none of them: the last column already is the last\nreading, and a mark on top of it would say the same thing twice.\n\nThe shapes come from `helix/styled/src/shared/chart/terminus.css`, shared with\n`LineChart`, so the set is the same wherever a line ends. `ring` is the\none that asks anything of the drawing: the disc it leaves open is masked out\nof the `<svg>`, so the line stops at the ring's inner edge rather than\nrunning on to the reading at its center, and the middle shows whatever the\nchart is drawn over rather than a guess at it.",
               "attribute": "terminus",
               "reflects": true
             },
@@ -102994,7 +102993,7 @@
               "type": {
                 "text": "'none' | 'ring' | 'square' | 'triangle' | undefined"
               },
-              "description": "The shape of the mark on the last reading.\n\nAbsent is a dot, which is how a line is usually ended, and absent rather\nthan defaulted because a reflecting property with a default writes its\nattribute onto a host the consumer rendered, which React reports as a\nhydration mismatch.\n\n`none` lets the line stop on its own, which suits a series read as a shape\nrather than for where it finished. `ring` lets the ground through, for a\nchart drawn over something busy. `triangle` points along the axis and reads\nas \"and onward\" rather than as a second claim about the data.\n\nA `bar` plot draws none of them: the last column already is the last\nreading, and a mark on top of it would say the same thing twice.\n\nThe shapes come from `helix/styled/src/shared/chart/terminus.css`, shared with\n`LineChart`, so the set is the same wherever a line ends. `ring` is the\none that asks anything of the drawing: the disc it leaves open is masked out\nof the `<svg>`, so the line stops at the ring's inner edge rather than\nrunning on to the reading at its center, and the middle shows whatever the\nchart is drawn over rather than a guess at it.",
+              "description": "The shape of the mark on the last reading.\n\nAbsent is a dot, which is how a line is usually ended, and absent rather\nthan defaulted because a reflecting property with a default writes its\nattribute onto a host the consumer rendered, which React reports as a\nhydration mismatch.\n\n`none` lets the line stop on its own, which suits a series read as a shape\nrather than for where it finished. `square` is the same mark with its\ncorners, for a drawing whose neighbors are square, columns in the table\nbeside it for instance. `ring` lets the ground through, for a chart drawn\nover something busy. `triangle` points along the axis and reads as \"and\nonward\" rather than as a second claim about the data.\n\nA `bar` plot draws none of them: the last column already is the last\nreading, and a mark on top of it would say the same thing twice.\n\nThe shapes come from `helix/styled/src/shared/chart/terminus.css`, shared with\n`LineChart`, so the set is the same wherever a line ends. `ring` is the\none that asks anything of the drawing: the disc it leaves open is masked out\nof the `<svg>`, so the line stops at the ring's inner edge rather than\nrunning on to the reading at its center, and the middle shows whatever the\nchart is drawn over rather than a guess at it.",
               "fieldName": "terminus"
             },
             {
@@ -103077,7 +103076,7 @@
           "helix": {
             "category": "charts",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://helix.fusion.dev/components/sparkline",
             "aliases": [
               "Micro Chart",
@@ -138475,7 +138474,7 @@
           "helix": {
             "category": "layout",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://helix.fusion.dev/components/virtual-list",
             "tier": "styled",
             "group": "VirtualList",

package/dist/checkbox/root/checkbox-root.d.ts

@@ -13,17 +13,17 @@ import type { CSSResultGroup } from 'lit';
  * what a native `<label>` wrapping a checkbox gives and what a reader expects.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
- * @aliases Tickbox, Toggle
+ * @aliases Tickbox
  * @documentation https://helix.fusion.dev/components/checkbox
  *
- * @cssproperty --checkbox-background-color - Fill of an unticked box.
+ * @cssproperty --checkbox-background-color - Fill of the box, which does not change when it is ticked.
  * @cssproperty --checkbox-border-color - Edge of the box, in every state.
  * @cssproperty --checkbox-card-background-color - Fill behind a card-shaped choice.
  * @cssproperty --checkbox-card-border-color - Edge around one.
  * @cssproperty --checkbox-card-padding - Inset of the card appearance.
- * @cssproperty --checkbox-checked-color - Fill of a ticked box.
+ * @cssproperty --checkbox-checked-color - Edge of a ticked box, where `--checkbox-border-color` is unset.
  * @cssproperty --checkbox-mark-color - Ink the tick is drawn in.
  * @cssproperty --checkbox-size - Width and height of the box.
  */

package/dist/copy-button/root/copy-button-root.css.js

@@ -12,10 +12,6 @@ slot[hidden] {
 display: none;
 }
 
-[part="button"] > slot[hidden] {
-display: none;
-}
-
 [part="button"][data-copied] {
 color: var(--helix-color-success);
 }

package/dist/copy-button/root/copy-button-root.d.ts

@@ -12,7 +12,7 @@ declare const HelixCopyButton_base: (new (...args: any[]) => import("../../share
  * it for reassurance reads as a second, accidental press.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category actions
  * @documentation https://helix.fusion.dev/components/copy-button
  */

package/dist/legend/root/legend-root.d.ts

@@ -8,13 +8,15 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * and there is no arrangement of eight names that fits every width. Set
  * `--legend-direction` to `column` where it sits beside one instead.
  *
- * The eight series colors are mapped here rather than in the tier below, which
- * carries the index and holds no tokens. Eight rules, because an index in
- * markup cannot select a token and a custom property set inline would be the
- * headless tier naming a color.
+ * The series colors are mapped on this tier rather than in the one below, which
+ * carries the index and holds no tokens. `shared/chart/series.css` is where the
+ * mapping lives, because an index in markup cannot select a token and a custom
+ * property set inline would be the headless tier naming a color, and it is
+ * shared because a chart and the legend keying it have to reach the same
+ * twenty-four names.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Key, Series Key

package/dist/sparkline/root/sparkline-root.d.ts

@@ -24,7 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * might want to be bigger.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Micro Chart, Trend Line, Inline Chart
@@ -76,9 +76,11 @@ export declare class HelixSparkline extends HelixHeadlessSparkline {
      * hydration mismatch.
      *
      * `none` lets the line stop on its own, which suits a series read as a shape
-     * rather than for where it finished. `ring` lets the ground through, for a
-     * chart drawn over something busy. `triangle` points along the axis and reads
-     * as "and onward" rather than as a second claim about the data.
+     * rather than for where it finished. `square` is the same mark with its
+     * corners, for a drawing whose neighbors are square, columns in the table
+     * beside it for instance. `ring` lets the ground through, for a chart drawn
+     * over something busy. `triangle` points along the axis and reads as "and
+     * onward" rather than as a second claim about the data.
      *
      * A `bar` plot draws none of them: the last column already is the last
      * reading, and a mark on top of it would say the same thing twice.

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @category layout
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @documentation https://helix.fusion.dev/components/virtual-list
  *
  * @csspart after - The space standing in for rows below the window.

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.34.1",
+  "version": "0.35.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.34.1",
-    "@fusion.dev/helix-headless": "0.34.1",
-    "@fusion.dev/helix-styles": "0.34.1"
+    "@fusion.dev/helix-core": "0.35.0",
+    "@fusion.dev/helix-headless": "0.35.0",
+    "@fusion.dev/helix-styles": "0.35.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.34.1",
-    "@fusion.dev/helix-testing": "0.34.1",
+    "@fusion.dev/helix-cem": "0.35.0",
+    "@fusion.dev/helix-testing": "0.35.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -14871,9 +14871,11 @@ attribute onto a host the consumer rendered, which React reports as a
 hydration mismatch.
 
 `none` lets the line stop on its own, which suits a series read as a shape
-rather than for where it finished. `ring` lets the ground through, for a
-chart drawn over something busy. `triangle` points along the axis and reads
-as "and onward" rather than as a second claim about the data.
+rather than for where it finished. `square` is the same mark with its
+corners, for a drawing whose neighbors are square, columns in the table
+beside it for instance. `ring` lets the ground through, for a chart drawn
+over something busy. `triangle` points along the axis and reads as "and
+onward" rather than as a second claim about the data.
 
 A `bar` plot draws none of them: the last column already is the last
 reading, and a mark on top of it would say the same thing twice.
@@ -15002,9 +15004,11 @@ attribute onto a host the consumer rendered, which React reports as a
 hydration mismatch.
 
 `none` lets the line stop on its own, which suits a series read as a shape
-rather than for where it finished. `ring` lets the ground through, for a
-chart drawn over something busy. `triangle` points along the axis and reads
-as "and onward" rather than as a second claim about the data.
+rather than for where it finished. `square` is the same mark with its
+corners, for a drawing whose neighbors are square, columns in the table
+beside it for instance. `ring` lets the ground through, for a chart drawn
+over something busy. `triangle` points along the axis and reads as "and
+onward" rather than as a second claim about the data.
 
 A `bar` plot draws none of them: the last column already is the last
 reading, and a mark on top of it would say the same thing twice.
@@ -22849,12 +22853,12 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--checkbox-background-color`: Fill of an unticked box. (default: `undefined`)
+   * - `--checkbox-background-color`: Fill of the box, which does not change when it is ticked. (default: `undefined`)
    * - `--checkbox-border-color`: Edge of the box, in every state. (default: `undefined`)
    * - `--checkbox-card-background-color`: Fill behind a card-shaped choice. (default: `undefined`)
    * - `--checkbox-card-border-color`: Edge around one. (default: `undefined`)
    * - `--checkbox-card-padding`: Inset of the card appearance. (default: `undefined`)
-   * - `--checkbox-checked-color`: Fill of a ticked box. (default: `undefined`)
+   * - `--checkbox-checked-color`: Edge of a ticked box, where `--checkbox-border-color` is unset. (default: `undefined`)
    * - `--checkbox-mark-color`: Ink the tick is drawn in. (default: `undefined`)
    * - `--checkbox-size`: Width and height of the box. (default: `undefined`)
    *
@@ -28158,10 +28162,12 @@ export type CustomElements = {
    * and there is no arrangement of eight names that fits every width. Set
    * `--legend-direction` to `column` where it sits beside one instead.
    *
-   * The eight series colors are mapped here rather than in the tier below, which
-   * carries the index and holds no tokens. Eight rules, because an index in
-   * markup cannot select a token and a custom property set inline would be the
-   * headless tier naming a color.
+   * The series colors are mapped on this tier rather than in the one below, which
+   * carries the index and holds no tokens. `shared/chart/series.css` is where the
+   * mapping lives, because an index in markup cannot select a token and a custom
+   * property set inline would be the headless tier naming a color, and it is
+   * shared because a chart and the legend keying it have to reach the same
+   * twenty-four names.
    *
    * ## Attributes & Properties
    *
@@ -33832,9 +33838,11 @@ export type CustomElements = {
    * hydration mismatch.
    *
    * `none` lets the line stop on its own, which suits a series read as a shape
-   * rather than for where it finished. `ring` lets the ground through, for a
-   * chart drawn over something busy. `triangle` points along the axis and reads
-   * as "and onward" rather than as a second claim about the data.
+   * rather than for where it finished. `square` is the same mark with its
+   * corners, for a drawing whose neighbors are square, columns in the table
+   * beside it for instance. `ring` lets the ground through, for a chart drawn
+   * over something busy. `triangle` points along the axis and reads as "and
+   * onward" rather than as a second claim about the data.
    *
    * A `bar` plot draws none of them: the last column already is the last
    * reading, and a mark on top of it would say the same thing twice.
@@ -41719,12 +41727,12 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--checkbox-background-color`: Fill of an unticked box. (default: `undefined`)
+   * - `--checkbox-background-color`: Fill of the box, which does not change when it is ticked. (default: `undefined`)
    * - `--checkbox-border-color`: Edge of the box, in every state. (default: `undefined`)
    * - `--checkbox-card-background-color`: Fill behind a card-shaped choice. (default: `undefined`)
    * - `--checkbox-card-border-color`: Edge around one. (default: `undefined`)
    * - `--checkbox-card-padding`: Inset of the card appearance. (default: `undefined`)
-   * - `--checkbox-checked-color`: Fill of a ticked box. (default: `undefined`)
+   * - `--checkbox-checked-color`: Edge of a ticked box, where `--checkbox-border-color` is unset. (default: `undefined`)
    * - `--checkbox-mark-color`: Ink the tick is drawn in. (default: `undefined`)
    * - `--checkbox-size`: Width and height of the box. (default: `undefined`)
    *
@@ -47132,10 +47140,12 @@ export type CustomElementsSolidJs = {
    * and there is no arrangement of eight names that fits every width. Set
    * `--legend-direction` to `column` where it sits beside one instead.
    *
-   * The eight series colors are mapped here rather than in the tier below, which
-   * carries the index and holds no tokens. Eight rules, because an index in
-   * markup cannot select a token and a custom property set inline would be the
-   * headless tier naming a color.
+   * The series colors are mapped on this tier rather than in the one below, which
+   * carries the index and holds no tokens. `shared/chart/series.css` is where the
+   * mapping lives, because an index in markup cannot select a token and a custom
+   * property set inline would be the headless tier naming a color, and it is
+   * shared because a chart and the legend keying it have to reach the same
+   * twenty-four names.
    *
    * ## Attributes & Properties
    *
@@ -52938,9 +52948,11 @@ export type CustomElementsSolidJs = {
    * hydration mismatch.
    *
    * `none` lets the line stop on its own, which suits a series read as a shape
-   * rather than for where it finished. `ring` lets the ground through, for a
-   * chart drawn over something busy. `triangle` points along the axis and reads
-   * as "and onward" rather than as a second claim about the data.
+   * rather than for where it finished. `square` is the same mark with its
+   * corners, for a drawing whose neighbors are square, columns in the table
+   * beside it for instance. `ring` lets the ground through, for a chart drawn
+   * over something busy. `triangle` points along the axis and reads as "and
+   * onward" rather than as a second claim about the data.
    *
    * A `bar` plot draws none of them: the last column already is the last
    * reading, and a mark on top of it would say the same thing twice.
@@ -58031,7 +58043,7 @@ export type CustomCssProperties = {
   "--chat-rule"?: (string) | undefined;
   /** Space between the boxes. */
   "--checkbox-group-gap"?: (string) | undefined;
-  /** Fill of an unticked box. */
+  /** Fill of the box, which does not change when it is ticked. */
   "--checkbox-background-color"?: (string) | undefined;
   /** Edge of the box, in every state. */
   "--checkbox-border-color"?: (string) | undefined;
@@ -58041,7 +58053,7 @@ export type CustomCssProperties = {
   "--checkbox-card-border-color"?: (string) | undefined;
   /** Inset of the card appearance. */
   "--checkbox-card-padding"?: (string) | undefined;
-  /** Fill of a ticked box. */
+  /** Edge of a ticked box, where `--checkbox-border-color` is unset. */
   "--checkbox-checked-color"?: (string) | undefined;
   /** Ink the tick is drawn in. */
   "--checkbox-mark-color"?: (string) | undefined;

package/types/vue.d.ts

@@ -7636,9 +7636,11 @@ attribute onto a host the consumer rendered, which React reports as a
 hydration mismatch.
 
 `none` lets the line stop on its own, which suits a series read as a shape
-rather than for where it finished. `ring` lets the ground through, for a
-chart drawn over something busy. `triangle` points along the axis and reads
-as "and onward" rather than as a second claim about the data.
+rather than for where it finished. `square` is the same mark with its
+corners, for a drawing whose neighbors are square, columns in the table
+beside it for instance. `ring` lets the ground through, for a chart drawn
+over something busy. `triangle` points along the axis and reads as "and
+onward" rather than as a second claim about the data.
 
 A `bar` plot draws none of them: the last column already is the last
 reading, and a mark on top of it would say the same thing twice.
@@ -10349,7 +10351,7 @@ export type CustomCssProperties = {
   "--chat-rule"?: (string) | undefined;
   /** Space between the boxes. */
   "--checkbox-group-gap"?: (string) | undefined;
-  /** Fill of an unticked box. */
+  /** Fill of the box, which does not change when it is ticked. */
   "--checkbox-background-color"?: (string) | undefined;
   /** Edge of the box, in every state. */
   "--checkbox-border-color"?: (string) | undefined;
@@ -10359,7 +10361,7 @@ export type CustomCssProperties = {
   "--checkbox-card-border-color"?: (string) | undefined;
   /** Inset of the card appearance. */
   "--checkbox-card-padding"?: (string) | undefined;
-  /** Fill of a ticked box. */
+  /** Edge of a ticked box, where `--checkbox-border-color` is unset. */
   "--checkbox-checked-color"?: (string) | undefined;
   /** Ink the tick is drawn in. */
   "--checkbox-mark-color"?: (string) | undefined;
@@ -11547,7 +11549,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixKbdVueProps,
     HelixKbdVueEvents
   >;
-  /** A row that wraps, because a legend sits under a chart as wide as the chart and there is no arrangement of eight names that fits every width. Set '--legend-direction' to 'column' where it sits beside one instead.  The eight series colors are mapped here rather than in the tier below, which carries the index and holds no tokens. Eight rules, because an index in markup cannot select a token and a custom property set inline would be the headless tier naming a color. */
+  /** A row that wraps, because a legend sits under a chart as wide as the chart and there is no arrangement of eight names that fits every width. Set '--legend-direction' to 'column' where it sits beside one instead.  The series colors are mapped on this tier rather than in the one below, which carries the index and holds no tokens. 'shared/chart/series.css' is where the mapping lives, because an index in markup cannot select a token and a custom property set inline would be the headless tier naming a color, and it is shared because a chart and the legend keying it have to reach the same twenty-four names. */
   "helix-legend": DefineCustomElement<
     HelixLegend,
     HelixLegendVueProps,