@fusion.dev/helix 0.39.0 → 0.41.0

package/dist/accordion/item/accordion-item.d.ts

@@ -12,19 +12,17 @@ import type { CSSResultGroup } from 'lit';
  * Usable on its own as a disclosure, with no accordion around it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Collapsible, Expander, Disclosure
  * @documentation https://fusion.dev/helix/components/accordion
  *
  * @slot - The content revealed when open.
  * @slot summary - The always-visible trigger content.
  *
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
- *
  * @csspart chevron - The open and close indicator.
  * @csspart container - The outer wrapper.
  * @csspart content - The revealed region.
- * @csspart content-inner - Padding wrapper inside the animated region.
+ * @csspart content-inner - The clipping box inside the animated region. The inset is on the slot within it, not here: padding on the grid item survives a zero track, which left a shut section with a band of space under it.
  * @csspart trigger - The clickable summary row.
  *
  * @cssproperty --accordion-item-padding - Inset of the trigger and content.

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

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * the default: an accordion is a list, where a card is a surface.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category layout
  * @aliases Collapse, Expander group
  * @documentation https://fusion.dev/helix/components/accordion

package/dist/area-chart/root/area-chart-root.d.ts

@@ -13,11 +13,35 @@ import '../../tooltip/index.js';
  * the bands overlap where they are drawn and a translucent one would show the
  * others through it.
  *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * Both refusals are geometric and both were argued in the stylesheet before
+ * they were argued anywhere a reader looks.
+ *
+ * `emphasis` is which of a family's two marks carries the reading, and here
+ * neither can give way. The fill is the value, a band's thickness being its
+ * amount, and the edge is the boundary, which is why it is drawn at full color
+ * over a pale fill rather than left to two pale fills meeting. Every point on
+ * the axis moves one at the other's expense: `outlined` thins the fill until
+ * the chart is a set of cumulative lines, which is `LineChart` and is the form
+ * this one exists because a reader cannot read shares off; `solid` takes the
+ * fill to the series' own color, which is the edge's color, so the boundary
+ * disappears into the band it bounds. `LineChart` can take the axis because its
+ * wash is optional there, `area` deciding whether one is drawn at all.
+ *
+ * `material` is what reads through a mark, and a band cannot let anything
+ * through. Each is drawn as everything under its top edge with the next one
+ * down covering the rest, so a translucent band shows the bands behind it and
+ * reads as a third color that is in no palette. That is `LineChart`'s recorded
+ * reason for refusing `wash`, met here from the other side. The strength of a
+ * fill is still adjustable and is `--area-chart-fill-strength`, which is a
+ * continuum rather than an axis and is a theme's business rather than a
+ * reader's.
+ *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
- * @aliases Stacked Area Chart, Composition Chart, Stream Chart
+ * @aliases Stacked Area Chart, Composition Chart, Banded Chart
  * @documentation https://fusion.dev/helix/components/area-chart
  *
  * @cssproperty --area-chart-block-size - Height of the drawing.
@@ -25,6 +49,7 @@ import '../../tooltip/index.js';
  * @cssproperty --area-chart-gap - Space between the drawing and its labels.
  * @cssproperty --area-chart-gridline-color - One rule across the plot, under `gridlines`.
  * @cssproperty --area-chart-width - Thickness of a band's top edge, over `--chart-stroke`.
+ * @cssproperty --chart-stroke - Thickness of a band's top edge, one name across this family, Line Chart and Bar Chart's `lines`, since the three read one shared rule. `--area-chart-width` overrides it here.
  */
 export declare class HelixAreaChart extends HelixHeadlessAreaChart {
     /** The styled tier, so the tooltip this renders is the styled one. */

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -267,7 +267,6 @@ var(--helix-color-background)
 --_bar-chart-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-[part="bar"][data-material="frosted"],
 :host([material="frosted"]) [part="bar"]:not([data-material]) {
 --_bar-chart-through: calc(0.88 * var(--helix-material-opacity));
 }

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -11,7 +11,7 @@ import '../../tooltip/index.js';
  * it is measured against.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Column Chart, Categorical Chart
@@ -26,6 +26,7 @@ import '../../tooltip/index.js';
  * @cssproperty --bar-chart-gridline-color - One rule across the plot, under `gridlines`.
  * @cssproperty --bar-chart-line-color - A `lines` series, overriding its series color.
  * @cssproperty --bar-chart-line-width - Thickness of a `lines` series, over `--chart-stroke`.
+ * @cssproperty --chart-stroke - Thickness of a `lines` series, one name across this family, Line Chart and Area Chart's top edge, since the three read one shared rule. `--bar-chart-line-width` overrides it here.
  */
 export declare class HelixBarChart extends HelixHeadlessBarChart {
     /**
@@ -47,6 +48,12 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      * of the series color with that edge on it, and absent is the filled column,
      * per the rule that a reflected property takes no default.
      *
+     * `solid` is that filled column written out. It matches no rule in the sheet
+     * and lands on the base one, which is what the resting value of every axis in
+     * the registry does, and it is worth having so a consumer switching a chart
+     * between treatments has a word for the one it started at rather than having
+     * to remove the attribute.
+     *
      * **It composes with `material` rather than competing with it.** Emphasis
      * decides what is drawn and material decides how much of it comes through, so
      * `glass` thins whatever emphasis put there: the fill on a solid column, the
@@ -109,10 +116,15 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
     /**
      * Which series are drawn as an outline rather than a fill, by name.
      *
-     * Space separated and matched against the column headings the table gives,
-     * the way `lines` and `secondary` are, so a chart says `outlined="Forecast"`
-     * rather than counting columns. Names because they are what the table already
-     * carries and what the legend already shows.
+     * Separated by whitespace or commas and matched against the column headings
+     * the table gives, the way `lines` and `secondary` are, so a chart says
+     * `outlined="Forecast"` rather than counting columns. Names because they are
+     * what the table already carries and what the legend already shows.
+     *
+     * All five read one splitter, `seriesNames` in `core`, because the sentence
+     * above was true of the matching and false of the splitting: these three took
+     * a comma and those two did not, so `lines="Gateway, Billing"` drew no line
+     * and said nothing.
      *
      * **The case this exists for is a series that is not a measurement.** A
      * forecast, a target, a budget: something drawn on the same axis as the

package/dist/bar-chart/root/bar-chart-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, seriesIndex } from '@fusion.dev/helix-core';
+import { customElement, seriesIndex, seriesNames } from '@fusion.dev/helix-core';
 import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/bar-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
@@ -15,11 +15,7 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
     static { this.tier = 'helix-'; }
     updated(changed) {
         super.updated(changed);
-        const slots = (list) => new Set((list ?? '')
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map((name) => name.toLowerCase())
-            .flatMap((name) => {
+        const slots = (list) => new Set(seriesNames(list).flatMap((name) => {
             const at = this.series.findIndex((one) => one.name.trim().toLowerCase() === name);
             return at < 0 ? [] : [seriesIndex(at)];
         }));

package/dist/donut-chart/root/donut-chart-root.css.js

@@ -60,7 +60,7 @@ box-sizing: border-box;
 
 container-type: inline-size;
 display: grid;
-inline-size: calc(100% * (var(--_donut-chart-ring) - var(--donut-chart-stroke, 16)) / 100);
+inline-size: calc(100% * (var(--_donut-chart-ring) - 2 * var(--donut-chart-stroke, 16)) / 100);
 place-items: center;
 text-align: center;
 }

package/dist/donut-chart/root/donut-chart-root.d.ts

@@ -23,7 +23,7 @@ import '../../tooltip/index.js';
  * and `large` was drawn larger than the default.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Pie Chart, Ring Chart, Share Chart

package/dist/legend/root/legend-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from '@fusion.dev/helix-core';
+import { customElement, seriesNames } from '@fusion.dev/helix-core';
 import { HelixHeadlessLegend } from '@fusion.dev/helix-headless/legend';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
@@ -14,11 +14,7 @@ let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
     updated(changed) {
         super.updated(changed);
         const showing = this.names().map((name) => name.trim().toLowerCase());
-        const slots = (value) => new Set((value ?? '')
-            .split(/[\s,]+/)
-            .filter(Boolean)
-            .map((name) => name.toLowerCase())
-            .flatMap((name) => {
+        const slots = (value) => new Set(seriesNames(value).flatMap((name) => {
             const at = showing.indexOf(name);
             return at < 0 ? [] : [at];
         }));

package/dist/line-chart/root/line-chart-root.d.ts

@@ -13,19 +13,28 @@ import '../../tooltip/index.js';
  * lets one drawing fill a narrow card and a wide panel, and without
  * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
  * first and heavy in the second. It rescues strokes and not geometry, which is
- * why the readings are joined by lines and marked by nothing: a circle in a
- * stretched coordinate space is an ellipse, and there is no vector-effect that
- * answers for a shape.
+ * why nothing inside the drawing marks a reading: a circle in a stretched
+ * coordinate space is an ellipse, and there is no vector-effect that answers
+ * for a shape.
+ *
+ * **The last reading of each series is marked, and that is the same rule rather
+ * than an exception to it.** `terminus` draws an HTML element placed over the
+ * plot by percentage instead of a shape inside it, so it keeps its shape at any
+ * width. It is on by default, as a dot, because the column of marks at the far
+ * edge is where a reader looks for "and what is it now".
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://fusion.dev/helix/components/line-chart
  *
- * @cssproperty --chart-stroke - Thickness of a series drawn as a line, here and on Area
- *   Chart's top edge and Bar Chart's `lines`. Each family's own width hook overrides it.
+ * @cssproperty --chart-stroke - Thickness of a series drawn as a line, one name across this
+ *   family, Area Chart's top edge and Bar Chart's `lines`, since the three read one shared
+ *   rule. Each family's own width hook overrides it.
+ * @cssproperty --chart-terminus-hole - A fill for the middle of a `ring` terminus, which is otherwise open. One name across this family and Sparkline, the two reading one shared sheet.
+ * @cssproperty --chart-terminus-size - Size of the mark on each series' last reading. One name across this family and Sparkline, the two reading one shared sheet.
  * @cssproperty --line-chart-area-opacity - How much of a line's color its wash takes.
  * @cssproperty --line-chart-band-color - The slot the pointer is resting in.
  * @cssproperty --line-chart-block-size - Height of the drawing.

package/dist/menu/item/menu-item.d.ts

@@ -4,12 +4,15 @@ import type { CSSResultGroup } from 'lit';
  * @summary One row in a menu: a command, a choice, or a way into a submenu.
  *
  * @description
- * The tick and the arrow hold their space whether or not they are showing, so
- * the labels in a menu start at one place and the rows read as a column rather
- * than as a ragged list.
+ * A row draws a column beside its label only where it has something to put in
+ * one, and the width is the menu's rather than the row's: the page reserves a
+ * leading or a trailing track as soon as any row on it fills one, so every
+ * label on that page starts at the same edge and a page that fills neither pays
+ * for neither. A row knows about its own slots and nothing about its
+ * neighbors, which is why the reservation is not made here.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *

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

@@ -11,7 +11,7 @@ import type { CSSResultGroup } from 'lit';
  * one panel and reads the same on a phone as on a desk.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category overlays
  * @aliases Dropdown, Action menu
  * @documentation https://fusion.dev/helix/components/menu

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

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * says where the current page was as well as where it is.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Nav, NavList, Tabs
  * @documentation https://fusion.dev/helix/components/navigation

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

@@ -29,7 +29,7 @@ import type { CSSResultGroup } from 'lit';
  * is a way through rather than a destination, so it does not compete.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Pager, Page nav
  * @documentation https://fusion.dev/helix/components/pagination

package/dist/pagination/size/pagination-size.d.ts

@@ -15,7 +15,7 @@ import '../../select/index.js';
  * as the select it is.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Page size, Rows per page
  * @documentation https://fusion.dev/helix/components/pagination
  *

package/dist/pagination/summary/pagination-summary.d.ts

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
  * a way to move through it.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
  */

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -6,7 +6,7 @@ position: relative;
 }
 
 [part="plane"] {
-column-gap: var(--helix-space-xs);
+column-gap: var(--scatter-chart-gap, var(--helix-space-xs));
 display: grid;
 grid-template-areas:
 "y-name y-name"

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -12,8 +12,32 @@ import '../../tooltip/index.js';
  * dense cluster reads as dense rather than as one blot, and two points that
  * overlap each keep their edge.
  *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * Both refusals come out of that sentence, and both were argued in the
+ * stylesheet before they were argued anywhere a reader looks.
+ *
+ * `emphasis` is how much ink a mark claims, and on a scatter that channel is
+ * already carrying data. The points rest at 0.8 so that where they pile up they
+ * compound: how dark a region is *is* how many rows are in it, which is most of
+ * what a reader is looking at a scatter to see and is the one thing a table of
+ * the same numbers hides. `solid` flattens a dense cluster and a sparse one into
+ * the same picture; `outlined` replaces the pile with overlapping rings, which
+ * reads as texture rather than as count. An axis whose two ends each cost the
+ * drawing its density is not a treatment, it is a second meaning for a property
+ * the chart already spends.
+ *
+ * `material` is the same refusal said once more. Translucency is the density
+ * channel here, so `glass` and `frosted` are two more named stops on a scale
+ * the data is using, and a point admitting the page through is a point that
+ * counts for less than one.
+ *
+ * What stays adjustable is `--scatter-chart-point-opacity`, and it is a
+ * continuum rather than an axis: a chart drawn over a busier ground wants a
+ * different resting density, and that is a fact about the ground rather than a
+ * claim about the points.
+ *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category charts
  * @groups charts
  * @aliases Scatter Plot, XY Chart, Correlation Chart, Dot Plot

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

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * second name for it here would be a second thing to keep in step.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps

package/dist/steps/step/step.d.ts

@@ -5,7 +5,7 @@ import '../../button/index.js';
  * @summary One stage in a sequence.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases Stage
  * @documentation https://fusion.dev/helix/components/steps
  */

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

@@ -4,17 +4,24 @@ import type { CSSResultGroup } from 'lit';
  * @summary A row of tabs and the panel each one shows.
  *
  * @description
- * Selection is marked with a rule under the active tab rather than a filled
- * pill, which keeps the row flat and lets the underline animate between tabs as
- * a movement instead of two separate fills.
+ * One mark travels between the tabs rather than each of them filling and
+ * emptying in turn. A fill that swaps is two things changing at once and reads
+ * as a flicker; one that moves is a single object the eye follows, and it says
+ * where the current tab was as well as where it is. `Navigation` marks its
+ * destinations the same way and for the same reason.
+ *
+ * What the mark is depends on `variant`: unset it is a raised pill on the
+ * selected tab with nothing behind the row, `underlined` makes it a bar along
+ * the bottom of the strip on a rule, and `segmented` grows it to the tab's own
+ * box inside a sunken track.
  *
  * @since 0.1.0
  * @status experimental
  * @category navigation
  * @documentation https://fusion.dev/helix/components/tabs
  *
- * @slot - The tabs.
- * @slot panels - The panels.
+ * @slot - The tabs, which are this element's own children.
+ * @slot panels - The panels, which are this element's own children. A wrapper around them is assigned to the slot and pairs with nothing, since the pairing walks these children rather than the slot's tree.
  *
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.

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.39.0",
+  "version": "0.41.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.39.0",
-    "@fusion.dev/helix-headless": "0.39.0",
-    "@fusion.dev/helix-styles": "0.39.0"
+    "@fusion.dev/helix-core": "0.41.0",
+    "@fusion.dev/helix-headless": "0.41.0",
+    "@fusion.dev/helix-styles": "0.41.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.39.0",
-    "@fusion.dev/helix-testing": "0.39.0",
+    "@fusion.dev/helix-cem": "0.41.0",
+    "@fusion.dev/helix-testing": "0.41.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",