@fusion.dev/helix 0.105.0 → 0.107.0

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

@@ -5,13 +5,16 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @summary Triggers an action, submits a form, or navigates.
  *
  * @description
- * Four appearances, all drawn on one control so a link styled as a button and a
- * real button are indistinguishable to a reader. There are no sizes: a control
- * takes its height from the region it is in, through `data-density`, which is
- * the one size axis in the library and the reason a row of controls cannot come
- * out ragged. The focus ring is declared here rather than inherited, because the
- * base layer's `:focus-visible` rule is a light-DOM rule and stops at the shadow
- * boundary.
+ * Four appearances, all drawn on the same control, so a link styled as a button
+ * looks the same as a real button.
+ *
+ * There are no sizes. A control takes its height from the `data-density` of the
+ * region it is in, so a row of controls lines up. `data-density` is the only
+ * size setting in the library.
+ *
+ * The focus ring is declared in the component's styles, because the base
+ * layer's `:focus-visible` rule applies to the light DOM and stops at the
+ * shadow boundary.
  *
  * @since 0.1.0
  * @status stable
@@ -25,11 +28,11 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @csspart button - The inner control.
  *
  * @cssproperty --button-background-color - Fill behind the button, in every state.
- * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.
+ * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Without it, `--button-background-color` also applies on hover.
  * @cssproperty --button-foreground-color - Label and icon color.
- * @cssproperty --button-gap - Space between the label and whatever flanks it.
- * @cssproperty --button-inline-size - A width floor. Inherits, so a section can set it once for every button under it.
- * @cssproperty --button-padding-inline - Inline padding, for a container whose rhythm is not the control default.
+ * @cssproperty --button-gap - Space between the label and the content on either side of it.
+ * @cssproperty --button-inline-size - Minimum width. It inherits, so you can set it once on a section for every button inside it.
+ * @cssproperty --button-padding-inline - Inline padding, for a container with spacing of its own.
  * @cssproperty --button-radius - Corner radius of the control.
  * @cssproperty --button-radius-end - Trailing corners, which a group flattens.
  * @cssproperty --button-radius-end-end - The bottom trailing corner, for a group stacking down.
@@ -37,11 +40,11 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-radius-start - Leading corners, which a group flattens.
  * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
  * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
- * @cssproperty --button-size - Height of the control, for a container whose row is not one of the density steps.
+ * @cssproperty --button-size - Height of the control, for a row height outside the density steps.
  */
 export declare class HelixButton extends HelixButton_base {
     /**
-     * How much of the space available to it the button takes.
+     * How much of the available width the button takes.
      *
      * - `auto` is the default and is never written: the button is as wide as its
      *   label, which is what a control in a toolbar or beside a field should be.

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

@@ -4,13 +4,13 @@ import type { CSSResultGroup } from 'lit';
  * @summary Groups related buttons into one control.
  *
  * @description
- * The buttons are joined into a single shape: the outer corners keep their
- * radius, the inner ones lose it, and adjacent borders collapse into one line.
+ * Joins the buttons into one shape: the outer corners keep their radius, the
+ * inner corners lose it, and adjacent borders collapse into one line.
  *
- * That joining is in the base layer, paired with `data-button` the way the
- * button's own box is, because the corner belongs to the control inside each
- * button's shadow root and a rule in here cannot reach it. The same rule
- * therefore serves a consumer's own anchor styled as a button.
+ * The joining rule is in the base layer, paired with `data-button` like the
+ * button's own box, because the corner is on the control inside each button's
+ * shadow root, where this component's styles cannot reach. The same rule works
+ * for your own anchor styled as a button.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,15 +1,15 @@
 import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Sets a passage apart as information, a warning, or an error.
+ * @summary A passage set apart as information, a warning, or an error.
  *
  * @description
- * Tinted from the tone's status color with `color-mix`, and marked with a bar
- * on the inline start so the tone survives being read in grayscale or by anyone
- * who does not distinguish the hues.
+ * The background is a tint of the tone's status color, mixed with `color-mix`.
+ * A bar on the inline start edge also marks the tone, so it still shows in
+ * grayscale and for people who do not distinguish the hues.
  *
- * There is no treatment axis here. `tone` carries the meaning and lives on the
- * headless tier; this tier only decides what that meaning looks like.
+ * This tier has no treatment property. `tone` is set on the headless tier and
+ * carries the meaning, and this tier draws it.
  *
  * @since 0.1.0
  * @status stable
@@ -23,8 +23,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart content - The content region.
  * @csspart icon - The icon region.
  *
- * @cssproperty --callout-background-color - Fill behind the callout.
- * @cssproperty --callout-radius - Corner radius of the callout.
+ * @cssproperty --callout-background-color - The fill behind the callout.
+ * @cssproperty --callout-radius - The corner radius of the callout.
  */
 export declare class HelixCallout extends HelixHeadlessCallout {
     static styles: CSSResultGroup;

package/dist/canvas/edge/canvas-edge.d.ts

@@ -4,9 +4,9 @@ import { type CSSResultGroup } from 'lit';
  * @summary A connector between two cards on a canvas.
  *
  * @description
- * Draws nothing and takes no room: the board draws every connector into one
- * layer under the cards, which is the only place a line between two of them can
- * be drawn. What this element carries is which cards and which sides.
+ * Draws nothing and takes no room. The board draws every connector into one
+ * layer under the cards. The element carries which cards and which sides the
+ * connector joins.
  *
  * @since 0.100.0
  * @status experimental

package/dist/canvas/node/canvas-node.d.ts

@@ -4,13 +4,11 @@ import type { CSSResultGroup } from 'lit';
  * @summary One card or group on a canvas.
  *
  * @description
- * The card is the host, because the board places the host: its coordinates are
- * written onto this element, so a wrapper inside would have to be told the same
- * things twice.
+ * The card is the host element, because the board writes the card's coordinates
+ * onto the host.
  *
- * **Before it is placed it is a card in the flow**, which is what a page
- * without JavaScript has: the text somebody wrote, in the order they wrote it,
- * rather than a heap at the origin.
+ * Before the board places it, the card sits in normal flow. Without JavaScript,
+ * the page shows the cards' text in the order it was written.
  *
  * @since 0.100.0
  * @status experimental
@@ -18,26 +16,27 @@ import type { CSSResultGroup } from 'lit';
  * @aliases CanvasCard, BoardNode
  * @documentation https://fusion.dev/helix/components/canvas
  *
- * @cssproperty --canvas-grip-size - How large the corners a selected card is resized from are.
- * @cssproperty --canvas-handle-size - How large the points a connection is drawn from are.
- * @cssproperty --canvas-move-block-size - How tall the grip a selected card is moved by is.
- * @cssproperty --canvas-move-inline-size - How wide the grip a selected card is moved by is.
- * @cssproperty --canvas-move-inset - How far in from the card's corner that grip sits.
- * @cssproperty --canvas-node-background-color - The ground the card is drawn on.
- * @cssproperty --canvas-node-color - A color with no meaning, where a tone will not do: a hex a document chose.
- * @cssproperty --canvas-node-padding - Space between the card's edge and what it holds.
- * @cssproperty --canvas-node-shadow - The lift under the card, which `separation="elevated"` sets.
+ * @cssproperty --canvas-grip-size - The size of the corner handles that resize a selected card.
+ * @cssproperty --canvas-handle-size - The size of the points you draw a connection from.
+ * @cssproperty --canvas-move-block-size - The height of the handle that moves a selected card.
+ * @cssproperty --canvas-move-inline-size - The width of the handle that moves a selected card.
+ * @cssproperty --canvas-move-inset - The distance between the move handle and the card's corner.
+ * @cssproperty --canvas-node-background-color - The card's background.
+ * @cssproperty --canvas-node-color - A color for the card that carries no meaning, such as a hex color from a document. Use it when no tone fits.
+ * @cssproperty --canvas-node-padding - The space between the card's edge and its content.
+ * @cssproperty --canvas-node-shadow - The shadow under the card, set by `separation="elevated"`.
  */
 export declare class HelixCanvasNode extends HelixHeadlessCanvasNode {
     /**
-     * What the card's ground is made of: `glass` or `frosted`, which let the
-     * board's ruling show through, or `transparent`.
+     * The material of the card's background: `glass` or `frosted`, which let the
+     * board's grid lines show through, or `transparent`.
      *
      * Absent is an opaque surface, a resting value being an attribute's absence.
      */
     material?: 'frosted' | 'glass' | 'transparent';
     /**
-     * How the card stands off the board.
+     * How the card is set apart from the board: `outlined`, `filled`,
+     * `elevated`, or `plain`.
      *
      * Outlined is where it rests, a surface with its color as the edge. `filled`
      * puts the color into the ground, `elevated` lifts it and keeps the edge, and

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

@@ -1,17 +1,16 @@
 import { HelixHeadlessCanvas } from '@fusion.dev/helix-headless/canvas';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A board of cards and the connections between them, which a reader can walk, rearrange and connect.
+ * @summary A board of cards and the connections between them, which can be navigated, rearranged, and connected.
  *
  * @description
- * **Cards and connections say what they mean with `tone`**, the word every
- * other family uses, and the tones resolve to semantic tokens, so a board
- * follows the page into dark mode rather than carrying somebody else's hex into
- * it. JSON Canvas's six color presets arrive as tones through `fromJsonCanvas`.
+ * Cards and connections take `tone`, like every other family. The tones resolve
+ * to semantic tokens, so a board follows the page into dark mode.
+ * `fromJsonCanvas` maps the six JSON Canvas color presets to tones.
  *
- * The plane is the one thing that moves: panning and zooming write three custom
- * properties and one transform reads them, so the cards are placed once in the
- * document's own coordinates and never laid out again.
+ * Panning and zooming move only the plane. They write three custom properties
+ * that one transform reads, so the cards are placed once in the document's
+ * coordinates and are not laid out again.
  *
  * @since 0.100.0
  * @status experimental
@@ -19,19 +18,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Board, JSON Canvas, Whiteboard
  * @documentation https://fusion.dev/helix/components/canvas
  *
- * @cssproperty --canvas-background-color - The well behind the board.
- * @cssproperty --canvas-block-size - How tall the frame is.
- * @cssproperty --canvas-border-color - Color of the frame's edge.
- * @cssproperty --canvas-edge-color - Color of a connector with no tone. Written in an edge's own `style`, it colors that edge alone.
- * @cssproperty --canvas-edge-target-width - How wide a connector is to a pointer, which is wider than it is drawn.
- * @cssproperty --canvas-grid-size - How far apart the ruling is, in the document's own units, so it scales with the zoom.
- * @cssproperty --canvas-handle-size - How large the ends of a selected connection are, one name with a card's points.
- * @cssproperty --canvas-label-editor-inline-size - How wide the field a label is edited in is.
- * @cssproperty --viewport-control-background-color - The ground under the pan and zoom buttons, one name with `Map`.
+ * @cssproperty --canvas-background-color - The background behind the board.
+ * @cssproperty --canvas-block-size - The height of the frame.
+ * @cssproperty --canvas-border-color - The color of the frame's edge.
+ * @cssproperty --canvas-edge-color - The color of a connection with no tone. Set it in one edge's `style` to color only that edge.
+ * @cssproperty --canvas-edge-target-width - The width of the area a pointer can press on a connection, which is wider than the drawn line.
+ * @cssproperty --canvas-grid-size - The spacing of the grid lines or dots, in the document's units, so it scales with the zoom.
+ * @cssproperty --canvas-handle-size - The size of the ends of a selected connection. A card's connection points use the same property.
+ * @cssproperty --canvas-label-editor-inline-size - The width of the field for editing a label.
+ * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. `Map` uses the same property.
  */
 export declare class HelixCanvas extends HelixHeadlessCanvas {
     /**
-     * Rules the plane, so a reader can see it move.
+     * Draws `lines` or `dots` on the board's plane, so you can see it move.
      *
      * **Baked in rather than a family of its own**, which was the question worth
      * asking: a grid has no content, no position and nothing to slot, so an
@@ -48,7 +47,7 @@ export declare class HelixCanvas extends HelixHeadlessCanvas {
      */
     grid?: 'lines' | 'dots';
     /**
-     * How the board stands off the page: `plain` for no frame at all.
+     * How the board is set apart from the page. `plain` draws no frame.
      *
      * Framed is where it rests. Plain is for a board that fills a panel or an
      * app's working area, where the container is already the frame.

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

@@ -4,17 +4,16 @@ import type { CSSResultGroup } from 'lit';
  * @summary Groups related content and actions into a single surface.
  *
  * @description
- * Regions are bare slots with no wrapper element: `media`, `header`, the default
- * slot for content, and `footer`. An omitted one occupies no space without the
- * card having to detect that it is missing, so a card with only content needs no
- * wrapper markup at all. Style slotted content directly rather than reaching for
- * a part: a header is whatever element you slotted, not a wrapper around it.
+ * The regions are the `media`, `header`, and `footer` slots and the default
+ * slot for content. None of them has a wrapper element. A region you leave out
+ * takes no space, so a card with only content needs no extra markup. Style
+ * slotted content directly: a header is the element you slotted, so there is no
+ * part to target.
  *
  * `media` runs edge to edge and clips to the card's corners, so an image needs
- * no inset correction. Set `orientation="horizontal"` to move it alongside the
- * header, content, and footer stack rather than above it, or
- * `media-placement="end"` to put it under the content instead of over it, which
- * is what a chart concluding a card wants.
+ * no inset. Set `orientation="horizontal"` to put the media beside the header,
+ * content, and footer. Set `media-placement="end"` to put it below the content,
+ * for example for a chart that ends a card.
  *
  * @since 0.1.0
  * @status stable
@@ -35,15 +34,16 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --card-background-color - Surface behind the card.
  * @cssproperty --card-border-color - Border color of the surface.
  * @cssproperty --card-border-width - Width of the surface's edge. Follows
- *   `--helix-border-surface`, a hairline, so the surface is told apart by its edge unless a
- *   theme says otherwise.
+ *   `--helix-border-surface`, which is a hairline unless your theme sets another width.
+ *   The edge is what sets the surface apart.
  * @cssproperty --card-media-block-size - Height of the media region. Defaults to
- *   `auto`, which is an image's own shape and is not a height a chart has.
+ *   `auto`, which follows an image's own proportions. A chart has no height of its own,
+ *   so set one here for a chart.
  * @cssproperty --card-media-size - Width of the media column when horizontal.
  * @cssproperty --card-padding - Inset applied to each region.
  * @cssproperty --card-radius - Corner radius of the surface.
- * @cssproperty --card-shadow - Shadow under the surface. What `elevated` sets, and what a
- *   `data-card` link raises on hover.
+ * @cssproperty --card-shadow - Shadow under the surface. `elevated` sets it, and a
+ *   `data-card` link raises it on hover.
  */
 export declare class HelixCard extends HelixHeadlessCard {
     /**

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

@@ -4,16 +4,13 @@ import type { CSSResultGroup } from 'lit';
  * @summary Shows one slide of several, with controls to move between them.
  *
  * @description
- * The track scroll-snaps, so a drag and a trackpad swipe move it with the
- * browser's own momentum and the controls only have to scroll.
+ * The track scroll-snaps, so dragging and trackpad swipes use the browser's
+ * momentum, and the controls only scroll the track.
  *
- * Slides take the full track by default. `per-view` fits more than one across,
- * at any count, and is declared on the tier below because it decides how many
- * positions the track has rather than only how wide a slide is,
- * which is what a run of cards wants rather than a run of full-width panels.
- * This sheet divides the track by the number that tier publishes rather than
- * enumerating the values it will answer for, so there is no count it silently
- * draws one across.
+ * Each slide fills the track by default. `per-view` shows more than one slide
+ * across, at any count, for a run of cards. It is declared on the headless tier
+ * because it sets how many positions the track has. The styles divide the track
+ * by the count the headless tier publishes, so every count works.
  *
  * @since 0.1.0
  * @status stable
@@ -21,14 +18,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Slider, Gallery, Slideshow
  * @documentation https://fusion.dev/helix/components/carousel
  *
- * @cssproperty --carousel-bleed - Room inside the scroller so a slide's own shadow, border or
- * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
- * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
+ * @cssproperty --carousel-bleed - Room inside the scroller so it does not clip a slide's
+ * shadow, border, or focus ring. The default leaves room for `--helix-shadow-md`, which
+ * reaches 16px below its box. A slide with `--helix-shadow-lg` reaches 44px and needs more.
  * @cssproperty --carousel-block-size - Height of a vertical track.
  */
 export declare class HelixCarousel extends HelixHeadlessCarousel {
     /**
-     * Where along that side the arrows sit. See `indicatorAlign`.
+     * Where the arrows sit along their side of the slides. See `indicatorAlign`.
      *
      * `overlay` answers it too, and the edge there is the whole slide: the bar is
      * stretched across the picture, so this moves the arrows up and down within
@@ -60,7 +57,7 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
      */
     controlsPlacement?: 'start' | 'end' | 'top' | 'bottom' | 'overlay';
     /**
-     * Where along that side the dots sit.
+     * Where the dots sit along their side of the slides.
      *
      * The second half of the answer to "where do they go". `indicatorPlacement`
      * says which edge and this says where along it, so the pair spells out the

package/dist/chat/composer/chat-composer.d.ts

@@ -1,30 +1,29 @@
 import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Where the reader writes their turn.
+ * @summary A field for writing a turn in a conversation.
  *
  * @description
- * One row, and the field takes the room. **It grows with the text and stops at a
- * ceiling**, through `field-sizing: content` rather than a script measuring
- * anything: where that is not supported the field keeps its rows and scrolls,
- * which is the answer a textarea has always given. A composer that grows without
- * a ceiling eats the transcript it belongs to.
+ * The composer is one row, and the field takes the remaining width. The field
+ * grows with its text up to a maximum height, through `field-sizing: content`.
+ * Where that is not supported, the field keeps its rows and scrolls. The
+ * maximum height keeps the composer from covering the transcript.
  *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @documentation https://fusion.dev/helix/components/chat
  *
- * @slot end - Under the field, beside the send control.
- * @slot start - Under the field, at the leading edge: attachments, a model picker.
+ * @slot end - Content under the field, beside the send button.
+ * @slot start - Content under the field at the leading edge, such as an attachment button or a model picker.
  *
  * @csspart field - The text field.
- * @csspart send - The control that offers the turn.
+ * @csspart send - The send button.
  * @csspart tools - The row under the field.
  *
  * @cssproperty --chat-composer-background-color - Fill behind the composer.
- * @cssproperty --chat-composer-border-width - The composer's edge, so a theme can remove it.
- * @cssproperty --chat-composer-max-block-size - How tall the field may grow.
+ * @cssproperty --chat-composer-border-width - Width of the composer's edge, so your theme can remove it.
+ * @cssproperty --chat-composer-max-block-size - Maximum height the field grows to.
  */
 export declare class HelixChatComposer extends HelixHeadlessChatComposer {
     static tier: string;

package/dist/chat/message/chat-message.d.ts

@@ -1,42 +1,42 @@
 import { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One turn in a conversation, and what has happened to it.
+ * @summary One turn in a conversation, with its state, such as sending or failed.
  *
  * @description
- * **`author="me"` is the one piece of paint that says whose turn it is**, and it
- * says it by which edge the turn sits against. Everything else about a turn is
- * the same on both sides, because two bubble styles is two components.
+ * `author="me"` is the only style that shows whose turn it is, and it sets
+ * which edge the turn sits against. Everything else about a turn looks the same
+ * on both sides.
  *
- * A failure is the only state that takes a tone, because it is the one a reader
- * has to find rather than notice. `streaming` is left alone: the text arriving
- * is the signal, and decorating it competes with the thing it is decorating.
+ * Only a failed turn takes a tone, because the user has to find a failure.
+ * `streaming` has no extra style, because the arriving text already shows it.
  *
  * @since 0.1.0
  * @status stable
  * @category feedback
  * @documentation https://fusion.dev/helix/components/chat
  *
- * @slot - What was said.
- * @slot actions - What can be done with it.
- * @slot avatar - Who said it.
- * @slot indicator - The wait before the first token, in place of the three dots.
+ * @slot - The turn's content.
+ * @slot actions - Controls for the turn.
+ * @slot avatar - The author's avatar.
+ * @slot indicator - The indicator shown before the first token arrives. Replaces the three dots.
  *
- * @csspart content - What was said.
- * @csspart indicator - The three dots, when nothing is slotted over them.
+ * @csspart content - The turn's content.
+ * @csspart indicator - The three dots, shown when nothing is in the `indicator` slot.
  * @csspart meta - The time and the state together.
  *
- * @cssproperty --chat-indicator-background-color - Ground behind a slotted waiting indicator, which is a chip so the mark and its word read as one thing.
+ * @cssproperty --chat-indicator-background-color - Fill behind a slotted indicator, drawn as a chip so its icon and its text read as one unit.
  * @cssproperty --chat-message-background-color - Fill behind a turn.
- * @cssproperty --chat-message-background-color-me - Fill behind the reader's own turns.
- * @cssproperty --chat-message-color - Ink in a turn.
- * @cssproperty --chat-message-measure - How wide a turn may get before it wraps.
+ * @cssproperty --chat-message-background-color-me - Fill behind turns by `me`.
+ * @cssproperty --chat-message-color - Text color in a turn.
+ * @cssproperty --chat-message-measure - Maximum width of a turn before its text wraps.
  */
 export declare class HelixChatMessage extends HelixHeadlessChatMessage {
     static tier: string;
     static styles: CSSResultGroup;
     /**
-     * Where the turn's surface ends.
+     * How the turn is set apart. `filled` draws a bubble, and `plain` draws the
+     * turn as text on the transcript.
      *
      * **A bubble is one answer and not the only one.** Two people messaging read
      * as two columns of bubbles; an assistant answering does not, the reply being

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

@@ -3,20 +3,17 @@ import type { CSSResultGroup } from 'lit';
 import '../composer/chat-composer.js';
 import '../message/chat-message.js';
 /**
- * @summary A conversation: the turns, and where the reader is in them.
+ * @summary A conversation's turns in a scrolling transcript that keeps the user's place.
  *
  * @description
- * Three regions stacked, and only the transcript scrolls: a composer that slid
- * away as the reader scrolled up to re-read would be the thing they were about
- * to type into.
+ * The chat stacks three regions, and only the transcript scrolls, so the
+ * composer stays in view while the user scrolls back to read.
  *
- * **The transcript keeps its turns at the bottom when there are too few to fill
- * it**, which is what a conversation looks like. A new one starting at the top
- * of an empty column reads as a document.
+ * When there are too few turns to fill the transcript, they sit at the bottom,
+ * the way a conversation looks.
  *
- * The way back sits over the transcript rather than in the column, so offering
- * it does not move what the reader is reading, which is the whole point of
- * offering it.
+ * The control that returns to the bottom sits over the transcript, so showing
+ * it does not move the text the user is reading.
  *
  * @since 0.1.0
  * @status stable
@@ -24,20 +21,20 @@ import '../message/chat-message.js';
  * @documentation https://fusion.dev/helix/components/chat
  *
  * @slot - The turns.
- * @slot composer - Below the transcript, where the reader writes.
- * @slot header - Above the transcript.
- * @slot resume - The way back to the bottom.
- * @slot status - Beside the composer: somebody typing, connection lost.
+ * @slot composer - The composer, below the transcript.
+ * @slot header - Content above the transcript.
+ * @slot resume - The control that returns to the bottom.
+ * @slot status - Status beside the composer, such as someone typing or a lost connection.
  *
  * @csspart composer - The region the composer sits in.
- * @csspart log - The transcript, which is the thing that scrolls.
+ * @csspart log - The transcript, which scrolls.
  *
  * @cssproperty --chat-gap - Space between turns.
  * @cssproperty --chat-max-block-size - How tall the conversation may get before the transcript scrolls.
  * @cssproperty --chat-padding-inline - Space either side of every region.
- * @cssproperty --chat-resume-border-color - The edge around the way back.
- * @cssproperty --chat-resume-border-width - How thick that edge is, for a surface over content.
- * @cssproperty --chat-resume-shadow - The lift under the way back, which floats over the transcript.
+ * @cssproperty --chat-resume-border-color - Color of the edge around the resume control.
+ * @cssproperty --chat-resume-border-width - Width of the edge around the resume control, which sits over content.
+ * @cssproperty --chat-resume-shadow - Shadow under the resume control, which floats over the transcript.
  * @cssproperty --chat-rule - The hairline under the header.
  */
 export declare class HelixChat extends HelixHeadlessChat {

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

@@ -1,16 +1,16 @@
 import { HelixHeadlessCheckbox } from '@fusion.dev/helix-headless/checkbox';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A box that is ticked, or not, or neither.
+ * @summary A box that is checked, unchecked, or indeterminate.
  *
  * @description
- * The box is the native input with its own drawing switched off, so the control
- * stays a control for anything reading the page while the tick and the
- * indeterminate dash are drawn here, as masks over a mark beside it, and their
- * weight, color and motion are the design system's rather than the browser's.
+ * The box is the native input with its own drawing turned off, so it stays a
+ * real control for assistive technology. The tick and the indeterminate dash
+ * are masks over a mark beside it, and their weight, color, and motion come
+ * from the design system.
  *
- * The label sits beside it and the whole thing is the click target, which is
- * what a native `<label>` wrapping a checkbox gives and what a reader expects.
+ * The label sits beside the box, and the whole component is the click target,
+ * as with a native `<label>` wrapping a checkbox.
  *
  * @since 0.1.0
  * @status stable
@@ -18,19 +18,20 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Tickbox
  * @documentation https://fusion.dev/helix/components/checkbox
  *
- * @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 - 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.
+ * @cssproperty --checkbox-background-color - The fill of the box. It stays the same when the box is checked.
+ * @cssproperty --checkbox-border-color - The border color of the box, in every state.
+ * @cssproperty --checkbox-card-background-color - The fill of the card.
+ * @cssproperty --checkbox-card-border-color - The border color of the card.
+ * @cssproperty --checkbox-card-padding - The padding of the card.
+ * @cssproperty --checkbox-checked-color - The border color of a checked box when `--checkbox-border-color` is not set.
+ * @cssproperty --checkbox-mark-color - The color of the check mark and the dash.
+ * @cssproperty --checkbox-size - The width and height of the box.
  */
 export declare class HelixCheckbox extends HelixHeadlessCheckbox {
     static styles: CSSResultGroup;
     /**
-     * Where the choice's own surface ends.
+     * How the option is set off from the page. `plain` shows the box next to its
+     * label, and `outlined` and `filled` draw the option as a card.
      *
      * 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

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

@@ -1,11 +1,11 @@
 import { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Groups related checkboxes, and reports them as one set.
+ * @summary A group of related checkboxes under one label, with one value for the set.
  *
  * @description
- * A column by default, which is what a list of choices wants: the eye scans one
- * line per answer rather than hunting along a row.
+ * Lays the checkboxes out in a column by default, one choice per line, which is
+ * easier to scan than a row.
  *
  * @since 0.1.0
  * @status stable
@@ -13,11 +13,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Checkbox list, Multi-select
  * @documentation https://fusion.dev/helix/components/checkbox-group
  *
- * @cssproperty --checkbox-group-gap - Space between the boxes.
+ * @cssproperty --checkbox-group-gap - The space between the checkboxes.
  */
 export declare class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
     /**
-     * Which way the boxes run.
+     * The direction the checkboxes run. Set `horizontal` for a row. Unset is a
+     * column.
      */
     orientation?: 'horizontal';
     static styles: CSSResultGroup;