@fusion.dev/helix 0.104.1 → 0.106.0

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

@@ -4,14 +4,12 @@ import type { CSSResultGroup } from 'lit';
  * @summary One choice in a radio group.
  *
  * @description
- * A circle with a dot in it, drawn here rather than by the browser for the
- * reason the checkbox's box is: this is a `<button role="radio">`, so there was
- * never a native control to restyle, and the weight and the motion of the mark
- * are ours either way.
+ * Draws a circle with a dot in it. The element is a `<button role="radio">`, so
+ * there is no native control to restyle, the same as the checkbox's box.
  *
- * The dot scales from nothing, like the checkbox's tick, so choosing shows
- * something happening. It has no color, because color is reserved for state
- * and being chosen is an answer rather than a state.
+ * The dot scales up from nothing when the radio is chosen, like the checkbox's
+ * tick. It has no color, because Helix reserves color for state, and a chosen
+ * radio is an answer.
  *
  * @since 0.1.0
  * @status stable
@@ -19,19 +17,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Option, Choice
  * @documentation https://fusion.dev/helix/components/radio
  *
- * @cssproperty --radio-background-color - Fill of an unselected circle.
- * @cssproperty --radio-border-color - Edge of the circle, in every state.
- * @cssproperty --radio-card-background-color - Fill behind a card-shaped choice.
- * @cssproperty --radio-card-border-color - Edge around one.
- * @cssproperty --radio-card-padding - Inset of the card appearance.
- * @cssproperty --radio-chip-size - Diameter of the chip appearance.
- * @cssproperty --radio-mark-color - Color of the dot.
- * @cssproperty --radio-size - Diameter of the circle.
+ * @cssproperty --radio-background-color - The fill of an unselected circle.
+ * @cssproperty --radio-border-color - The border color of the circle, in every state.
+ * @cssproperty --radio-card-background-color - The fill behind a card-shaped choice.
+ * @cssproperty --radio-card-border-color - The border color of a card-shaped choice.
+ * @cssproperty --radio-card-padding - The padding inside a card-shaped choice.
+ * @cssproperty --radio-chip-size - The diameter of a chip.
+ * @cssproperty --radio-mark-color - The color of the dot.
+ * @cssproperty --radio-size - The diameter of the circle.
  */
 export declare class HelixRadio extends HelixHeadlessRadio {
     static styles: CSSResultGroup;
     /**
-     * Takes the circle away, leaving the card as the whole control.
+     * Hides the circle, so the card is the whole control.
      *
      * Unnecessary under `chip`, which has no room for a circle beside its mark
      * and hides it already.
@@ -50,7 +48,7 @@ export declare class HelixRadio extends HelixHeadlessRadio {
      */
     hideControl: boolean;
     /**
-     * Where the choice's own surface ends.
+     * How the choice's own surface is set apart from its surroundings.
      *
      * The question `separation` asks everywhere else, asked of one option, so it
      * is that word: what these values pick is a surface, and `plain` is already
@@ -78,8 +76,7 @@ export declare class HelixRadio extends HelixHeadlessRadio {
      */
     separation?: 'filled' | 'outlined' | 'plain';
     /**
-     * The answer as its own small surface, for a row of short choices read at a
-     * glance.
+     * Draws the choice as a small chip, for a row of short choices.
      *
      * **Not a separation, which is why it is still `variant`.** The other values
      * pick where a surface ends around a row that keeps its circle and its words;

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

@@ -1,11 +1,11 @@
 import { HelixHeadlessRating } from '@fusion.dev/helix-headless/rating';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A score out of a few marks, given or shown.
+ * @summary A row of marks, such as stars, for giving or showing a score.
  *
  * @description
- * Presentation only: the marks, and the clip that fills them partway.
- * Everything about what the score is and how it is chosen is the base class.
+ * Draws the marks and the clip that fills them partway. The value and how it is
+ * chosen come from the headless base class.
  *
  * @since 0.1.0
  * @status stable
@@ -13,19 +13,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Stars, Score, Review score
  * @documentation https://fusion.dev/helix/components/rating
  *
- * @slot mark - The shape of a mark, cloned into every position. Left empty, the
- * stylesheet draws its own and `--rating-mark` swaps it.
+ * @slot mark - The shape of a mark, copied into every position. When the slot is
+ * empty, the stylesheet draws a mark, and `--rating-mark` changes its shape.
  *
  * @cssproperty --rating-color - The color of a filled mark.
- * @cssproperty --rating-empty-color - And of an unfilled one.
- * @cssproperty --rating-gap - Space between marks.
+ * @cssproperty --rating-empty-color - The color of an unfilled mark.
+ * @cssproperty --rating-gap - The space between marks.
  * @cssproperty --rating-mark - The shape of one mark, as a mask image.
- * @cssproperty --rating-size - How big one mark is.
+ * @cssproperty --rating-size - The size of one mark.
  */
 export declare class HelixRating extends HelixHeadlessRating {
     static styles: CSSResultGroup;
     /**
-     * The geometry one mark is drawn to.
+     * The shape of each mark. `dots` draws plain circles.
      *
      * The registry's word, because the question is the registry's: `Avatar`,
      * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -39,38 +39,37 @@ export interface PreviewSize {
 }
 export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | PreviewRender | PreviewSize;
 /**
- * @summary Renders sandbox source in a frame of its own.
+ * @summary A frame that renders sandbox source in a separate document.
  *
  * @description
- * A sandboxed `<iframe>` pointed at `src`, a document the consumer provides.
- * That document imports whatever the examples need, listens for a render
- * message, and writes the markup into itself.
+ * A sandboxed `<iframe>` that loads `src`, a document you provide. That
+ * document imports what the examples need, listens for a render message, and
+ * writes the markup into itself.
  *
- * **A frame rather than the page.** Rendering into the page meant an example
- * was styled by whatever surrounded it: an example restyling `helix-card`
- * restyled the sandbox too, a script ran against the real document, and a stray
- * `position: fixed` escaped the pane. The cost is that the frame starts empty,
- * a document having its own stylesheets and a window its own registry, so `src`
- * has to load them.
+ * **Examples render in a frame**, so an example's styles and scripts do not
+ * affect the page around the sandbox, and `position: fixed` stays inside the
+ * pane. The frame starts empty, with its own stylesheets and its own custom
+ * element registry, so `src` must load the styles and components the examples
+ * use.
  *
- * **The source is not trusted, and the frame is what makes that safe.**
- * `sandbox="allow-scripts"` and never `allow-same-origin`: the two together are
- * the same as no sandbox at all, a document on its own origin being able to
- * reach up and remove the attribute.
+ * **The source is untrusted, and the frame keeps it isolated.** The frame uses
+ * `sandbox="allow-scripts"` and never `allow-same-origin`. Together, the two
+ * let a document on the same origin remove its own sandbox, which is the same
+ * as having none.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Result, Output
  * @documentation https://fusion.dev/helix/components/sandbox
  *
- * @event {HelixConsoleEvent} helix-console - Relayed from the frame, one per console call.
- * @event {HelixResizeEvent} helix-resize - How tall the frame's content is, whenever it changes.
+ * @event {HelixConsoleEvent} helix-console - Fired once per console call in the frame.
+ * @event {HelixResizeEvent} helix-resize - Fired when the height of the frame's content changes, with the new height.
  *
  * @csspart frame - The iframe.
  */
 export declare class HelixSandboxPreview extends HelixElement {
     /**
-     * Which half of the palette the frame renders in.
+     * The color mode the frame renders in.
      *
      * **The frame is a document and a document has its own color mode.** Setting
      * `data-color-mode` on this element styles this element, and the contents of
@@ -95,7 +94,7 @@ export declare class HelixSandboxPreview extends HelixElement {
      */
     direction?: 'rtl';
     /**
-     * Accessible name for the frame.
+     * The frame's name, read by screen readers.
      */
     label: string;
     /**
@@ -117,7 +116,7 @@ export declare class HelixSandboxPreview extends HelixElement {
      */
     source: string;
     /**
-     * Document the frame loads, which brings the styles and the elements.
+     * The document the frame loads. It provides the styles and the elements.
      */
     src: string;
     /**

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

@@ -2,23 +2,22 @@ import { HelixElement } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
- * @summary Pairs an editable source pane with a live preview.
+ * @summary An editable source pane paired with a live preview.
  *
  * @description
- * Coordination is by event: a source pane dispatches `helix-before-edit`, which
- * bubbles, and the sandbox hands the value to whatever preview is slotted into
- * it. Neither child knows the other exists, so either can be replaced or used
+ * A source pane dispatches `helix-before-edit`, which bubbles, and the sandbox
+ * passes the value to the preview slotted into it. The source pane and the
+ * preview do not reference each other, so you can replace either one or use it
  * alone.
  *
- * The event carries the pane's `name`, which is what lets one sandbox hold
- * several panes: `html` is the preview's markup and `css` its stylesheet. A
- * pane named anything else is showing something rather than driving it, and is
- * ignored.
+ * The event carries the pane's `name`, so one sandbox can hold several panes.
+ * `html` sets the preview's markup and `css` sets its stylesheet. The sandbox
+ * ignores a pane with any other name, so that pane can show content without
+ * changing the preview.
  *
- * **The dividers are two nested `helix-splitter`s**, not a grid this element
- * drags itself, so the pointer handling, the keyboard handling and the corner
- * are all the splitter's. The panes are the inner splitter and the panel is the
- * outer one, which is the order that makes the panel span the full width.
+ * **The dividers are two nested `helix-splitter` elements**, which handle the
+ * pointer, the keyboard, and the corner. The inner splitter holds the panes and
+ * the outer one holds the panel, so the panel spans the full width.
  *
  * @since 0.1.0
  * @status stable
@@ -27,22 +26,22 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/sandbox
  *
  * @slot panel - A panel under both panes, usually a terminal.
- * @slot preview - The live preview. Second unless `lead` says otherwise.
- * @slot source - The editable source pane. First unless `lead` says otherwise.
+ * @slot preview - The live preview. It comes second unless `lead` is `preview`.
+ * @slot source - The editable source pane. It comes first unless `lead` is `preview`.
  * @slot status - A status bar, spanning both panes at the bottom.
  * @slot toolbar - A bar across the top, spanning both panes.
  *
- * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited, by the source pane and heard here. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixBeforePanelResizeEvent} helix-before-panel-resize - Fired before the panel's divider is let go, with its height in pixels, and a panel driven shut arrives as `panel-collapsed-size`, which is the least it goes to. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is let go, with the lead pane's share. Cancelable: refusing it takes the decision and nothing moves.
- * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves in the source, by the source pane and heard here.
- * @event {HelixConsoleEvent} helix-console - Relayed from the frame by the preview pane, one per console call.
- * @event {HelixResizeEvent} helix-resize - How tall the frame's content is, from the preview pane, whenever it changes.
+ * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. The source pane dispatches it, and you can listen for it on the sandbox. Cancelable: cancel it to keep the source unchanged.
+ * @event {HelixBeforePanelResizeEvent} helix-before-panel-resize - Fired before the panel's divider is released, with the panel's height in pixels. A panel dragged closed reports `panel-collapsed-size`, its smallest height. Cancelable: cancel it to keep the current height.
+ * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
+ * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves in the source. The source pane dispatches it, and you can listen for it on the sandbox.
+ * @event {HelixConsoleEvent} helix-console - Fired once per console call in the preview frame. The preview pane dispatches it.
+ * @event {HelixResizeEvent} helix-resize - Fired by the preview pane when the height of the frame's content changes, with the new height.
  *
  * @csspart body - The splitter holding the panes above the panel.
  * @csspart corner - The handle where the two dividers cross.
  * @csspart pane - Either pane.
- * @csspart panel - The box holding whatever was slotted as the panel.
+ * @csspart panel - The box that holds the slotted panel.
  * @csspart panes - The splitter holding the source and preview panes.
  * @csspart separator - Either divider.
  *
@@ -52,17 +51,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  */
 export declare class HelixSandbox extends HelixElement {
     /**
-     * Accessible name for the divider that moves both at once.
+     * The name of the corner handle that moves both dividers at once, read by
+     * screen readers.
      */
     cornerLabel: string;
     /**
-     * What a reset makes the panel, in pixels.
+     * The panel height a reset restores, in pixels.
      *
      * The pair to `panel-size`.
      */
     defaultPanelSize: number;
     /**
-     * Where a reset puts the divider, where nothing declared it.
+     * Where a reset puts the divider between the panes.
      *
      * Separate from `split` for the reason `Splitter` keeps `default-position`
      * separate from `position`. Resetting to whatever `split` held on the first
@@ -103,7 +103,7 @@ export declare class HelixSandbox extends HelixElement {
      */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * What the panel's height becomes when it is closed.
+     * The panel's height when it is closed.
      *
      * Zero closes it outright. A panel whose contents include the control that
      * reopens it, a row of tabs being the usual one, wants that row left showing,
@@ -118,7 +118,7 @@ export declare class HelixSandbox extends HelixElement {
      */
     panelCollapsedSize: number;
     /**
-     * Accessible name for the panel's divider.
+     * The name of the panel's divider, read by screen readers.
      */
     panelLabel: string;
     /**
@@ -126,7 +126,7 @@ export declare class HelixSandbox extends HelixElement {
      */
     panelSize: number;
     /**
-     * Accessible name for the divider.
+     * The name of the divider between the panes, read by screen readers.
      */
     separatorLabel: string;
     /**

package/dist/sandbox/source/sandbox-source.d.ts

@@ -1,24 +1,21 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary Editable source for a sandbox preview.
+ * @summary An editable source pane for a sandbox preview.
  *
  * @description
- * A real `<textarea>`, not a contenteditable div with a syntax highlighter over
- * it. Undo, selection, spellcheck suppression, mobile keyboards, and screen
- * reader support all come from the platform, and every one of them is
- * expensive to rebuild and easy to get subtly wrong.
+ * A real `<textarea>`, so undo, selection, spellcheck suppression, mobile
+ * keyboards, and screen reader support come from the platform.
  *
- * Tab inserts two spaces rather than leaving the field, because a code pane
- * that cannot indent is not one. Escape then Tab still moves focus out, which
- * is the documented escape hatch for exactly this trade.
+ * Tab inserts two spaces, so you can indent code. To move focus out of the
+ * field, press Escape and then Tab.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Editor, Code pane
  * @documentation https://fusion.dev/helix/components/sandbox
  *
- * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. Cancelable: cancel it to keep the source unchanged.
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
  *
  * @csspart source - The editable region.
@@ -28,11 +25,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  */
 export declare class HelixSandboxSource extends HelixElement {
     /**
-     * Accessible name for the editable region.
+     * The editable region's name, read by screen readers.
      */
     fieldLabel: string;
     /**
-     * Which source this pane holds, echoed in every `helix-before-edit`.
+     * Which source this pane holds. Every `helix-before-edit` event includes it.
      *
      * `html` and `css` are what the sandbox root routes on; any other name is
      * passed through untouched for a consumer wiring their own panes.
@@ -41,7 +38,7 @@ export declare class HelixSandboxSource extends HelixElement {
      */
     name: string;
     /**
-     * Whether Tab indents rather than moving focus.
+     * Whether Tab indents the source. When it is off, Tab moves focus.
      */
     tabIndents: boolean;
     /**

package/dist/sandbox/status-bar/sandbox-status-bar.d.ts

@@ -1,21 +1,19 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary Reports where the cursor is and what is being edited.
+ * @summary A bar that shows the cursor position and the language being edited.
  *
  * @description
- * Slotted into a sandbox, which feeds it: the editor dispatches `helix-caret`
- * on every keystroke and every arrow press, the sandbox hears it and writes the
- * position here. Nothing about that reaches the consumer's framework, which is
- * the point. A caret position routed through React state would re-render the
- * workbench on every cursor move, to update two numbers.
+ * Shows the caret position. The editor dispatches `helix-caret` on every
+ * keystroke and arrow press, and the sandbox writes the position to the status
+ * bar. The position does not pass through your framework, so React state does
+ * not re-render the sandbox on every cursor move.
  *
- * **Not a live region.** The readout changes on every keystroke, so announcing
- * it would talk over the reader continuously while they type. It is text they
- * can navigate to, which is what a status bar is in every editor that has one.
+ * **The status bar is not a live region.** The readout changes on every
+ * keystroke, and announcing it would interrupt screen reader users as they
+ * type. It is text that screen reader users can navigate to.
  *
- * A readout with nothing to say is not rendered at all rather than rendered
- * empty, or the bar keeps a gap where a value is not.
+ * A readout with no value is not rendered, so the bar has no empty gap.
  *
  * @since 0.1.0
  * @status stable

package/dist/sandbox/terminal/sandbox-terminal.d.ts

@@ -1,31 +1,29 @@
 import { type ConsoleDetail, HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary Shows what the previewed example wrote to the console.
+ * @summary A panel that shows what the previewed example wrote to the console.
  *
  * @description
- * Fed by the sandbox, which hears `helix-console` from the preview and hands it
- * here. The preview is a separate document, so what arrives has already crossed
- * `postMessage`: text, not values.
+ * The sandbox receives `helix-console` events from the preview and passes them
+ * to the terminal. The preview is a separate document, so messages cross
+ * `postMessage` and arrive as text.
  *
- * **Repeats collapse.** An example with a render loop can write the same
- * warning hundreds of times, and two hundred identical lines say nothing that
- * one line and a count does not. Only consecutive repeats collapse, so the
- * order of what happened survives.
+ * **Repeats collapse.** Consecutive identical lines show as one line with a
+ * count, so an example with a render loop does not fill the panel with the same
+ * warning. Only consecutive repeats collapse, so the order of messages is kept.
  *
- * A `role="log"` rather than a live region by hand. It is the semantic for an
- * append-only stream, and it means a reader is told about new output without
- * the whole panel being re-announced each time.
+ * The panel has `role="log"`, the role for an append-only stream. Screen
+ * readers announce new output without reading the whole panel again.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Console, Output
  * @documentation https://fusion.dev/helix/components/sandbox
  *
- * @csspart count - How many times a repeated line arrived.
+ * @csspart count - How many times a repeated line was written.
  * @csspart empty - Shown while nothing has been written.
  * @csspart entry - One line.
- * @csspart level - The level a line came in at.
+ * @csspart level - The console level a line was written at.
  * @csspart log - The scrolling region.
  * @csspart message - The text of a line.
  *
@@ -33,11 +31,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  */
 export declare class HelixSandboxTerminal extends HelixElement {
     /**
-     * What to show before anything has been written.
+     * Text shown before anything has been written.
      */
     emptyLabel: string;
     /**
-     * Accessible name for the log.
+     * The log's name, read by screen readers.
      */
     label: string;
     private entries;

package/dist/sandbox/toolbar/sandbox-toolbar.d.ts

@@ -4,16 +4,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @summary The bar across the top of a sandbox.
  *
  * @description
- * Spans the source pane and the preview together, so what it holds is about the
- * sandbox rather than about one side of it. The files go at the start and the
- * menus at the end, which is the arrangement every editor has settled on.
+ * Spans the source pane and the preview, and holds controls for the whole
+ * sandbox. Files go at the start and menus at the end, as in most editors.
  *
- * **Not `role="toolbar"`.** That role brings a roving tabindex, one tab stop
- * for the whole group, and it is for a set of controls of the same kind. This
- * holds a tab list, which owns its own arrow-key behavior and would lose it.
- * Use `helix-toolbar` where the contents really are a row of buttons.
+ * The toolbar does not have `role="toolbar"`. That role gives a group of
+ * similar controls one tab stop with a roving tabindex. The toolbar holds a tab
+ * list, which has its own arrow-key behavior that the role would break. Use
+ * `helix-toolbar` for a row of buttons.
  *
- * Both slots are bare, so an unfilled one generates no box and costs no gap.
+ * Both slots are bare, so an empty slot adds no box and no gap.
  *
  * @since 0.1.0
  * @status stable
@@ -24,7 +23,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @slot end - Items at the end, usually menus.
  *
  * @cssproperty --sandbox-toolbar-gap - Space between items.
- * @cssproperty --sandbox-toolbar-size - The bar's height. Defaults to a large control.
+ * @cssproperty --sandbox-toolbar-size - The bar's height. Defaults to the height of a large control.
  */
 export declare class HelixSandboxToolbar extends HelixElement {
     protected render(): TemplateResult;

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

@@ -2,39 +2,28 @@ import { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-ch
 import type { CSSResultGroup } from 'lit';
 import '../../tooltip/index.js';
 /**
- * @summary Whether two measures move together, one point per row.
+ * @summary A chart that shows whether two measures move together, with one point per row.
  *
  * @description
  * The points take the series palette in order, so a table with one column
- * measured up is series one and a table with three is the first three.
+ * measured up uses the first color and a table with three uses the first three.
  *
- * Each point has a ring of the page around it and stops short of opaque, so a
- * dense cluster reads as dense rather than as one blot, and two points that
- * overlap each keep their edge.
+ * Each point has a ring in the page background color and is slightly
+ * transparent, so a dense cluster looks dense and overlapping points keep their
+ * edges.
  *
- * **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.
+ * No visual axis applies to the scatter chart, including `emphasis` and
+ * `material`, because the points' opacity already carries data:
  *
- * `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.
+ * - The points rest at 0.8 opacity, so where they overlap they darken, and a
+ *   darker region has more rows. `solid` would make dense and sparse clusters
+ *   look the same, and `outlined` would turn a cluster into overlapping rings
+ *   that do not show the count.
+ * - Translucency shows density, so `glass` and `frosted` would make each point
+ *   count for less.
  *
- * `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.
+ * To adjust the resting opacity, for example on a busier background, set
+ * `--scatter-chart-point-opacity`.
  *
  * @since 0.1.0
  * @status stable
@@ -45,9 +34,9 @@ import '../../tooltip/index.js';
  *
  * @cssproperty --scatter-chart-block-size - Height of the drawing.
  * @cssproperty --scatter-chart-gap - Space between the drawing and its axes.
- * @cssproperty --scatter-chart-gridline-color - One rule across the plot, under `gridlines`.
- * @cssproperty --scatter-chart-point-opacity - How much of its color a point shows, so a cluster reads darker where it is denser.
- * @cssproperty --scatter-chart-point-ring-color - The ring around each point, which is the page's color unless the chart sits on something else.
+ * @cssproperty --scatter-chart-gridline-color - Color of the gridlines across the plot, drawn when `gridlines` is set.
+ * @cssproperty --scatter-chart-point-opacity - Opacity of a point, so a cluster looks darker where it is denser.
+ * @cssproperty --scatter-chart-point-ring-color - Color of the ring around each point. It matches the page, so change it when the chart sits on another surface.
  * @cssproperty --scatter-chart-point-size - Diameter of a point.
  */
 export declare class HelixScatterChart extends HelixHeadlessScatterChart {

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

@@ -1,12 +1,12 @@
 import { HelixHeadlessScrollArea } from '@fusion.dev/helix-headless/scroll-area';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A scrolling box that says there is more.
+ * @summary A scrolling box that shows which edges have more content past them.
  *
  * @description
- * Presentation only: the fades on the edges the base class names, and a
- * scrollbar that belongs to the system rather than to the platform. Which edges
- * have content past them is measured by the base class.
+ * Presentation only: fades on the edges the base class reports, and a scrollbar
+ * styled to match the design system. The base class measures which edges have
+ * content past them.
  *
  * @since 0.1.0
  * @status stable
@@ -14,15 +14,15 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Scroller, Overflow, Scroll container
  * @documentation https://fusion.dev/helix/components/scroll-area
  *
- * @cssproperty --scroll-area-fade - How deep the fades are, at both edges.
- * @cssproperty --scroll-area-fade-block-end - And the bottom one.
- * @cssproperty --scroll-area-fade-block-start - How deep the top one is, or `0` to drop it.
- * @cssproperty --scroll-area-fade-color - What they fade to, which is the ground behind.
- * @cssproperty --scroll-area-fade-inline-end - And the trailing one.
- * @cssproperty --scroll-area-fade-inline-start - How deep the leading sideways one is, or `0` to drop it.
- * @cssproperty --scroll-area-scrollbar - The scrollbar width keyword.
- * @cssproperty --scroll-area-thumb-color - The scrollbar's handle.
- * @cssproperty --scroll-area-track-color - And its track.
+ * @cssproperty --scroll-area-fade - The depth of the fades at both edges.
+ * @cssproperty --scroll-area-fade-block-end - The depth of the bottom fade, or `0` to remove it.
+ * @cssproperty --scroll-area-fade-block-start - The depth of the top fade, or `0` to remove it.
+ * @cssproperty --scroll-area-fade-color - The color the fades blend into, which is the background behind the box.
+ * @cssproperty --scroll-area-fade-inline-end - The depth of the fade at the inline end, or `0` to remove it.
+ * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
+ * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
+ * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb.
+ * @cssproperty --scroll-area-track-color - The color of the scrollbar's track.
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {
     static styles: CSSResultGroup;