@fusion.dev/helix 0.104.1 → 0.106.0

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

@@ -3,16 +3,15 @@ import type { CSSResultGroup } from 'lit';
 import '../../listbox/index.js';
 import '../../option/index.js';
 /**
- * @summary A closed list that opens to be chosen from.
+ * @summary A control that opens a list of options to choose from.
  *
  * @description
- * The trigger wears the same frame as an `Input`, because in a form it stands
- * in a row with them and a control that looks like a button among fields reads
- * as an action rather than an answer.
+ * The trigger uses the same frame as `Input`, so it lines up with the fields
+ * beside it in a form. A trigger that looked like a button would read as an
+ * action.
  *
- * The panel is an overlay surface rather than a sunken one: it sits over the
- * page instead of on it, which is what its shadow says and what tells it apart
- * from the field it came out of.
+ * The panel uses an overlay surface. Its shadow shows that it sits over the
+ * page and sets it apart from the field it opened from.
  *
  * @since 0.1.0
  * @status stable
@@ -21,18 +20,19 @@ import '../../option/index.js';
  * @documentation https://fusion.dev/helix/components/select
  *
  * @cssproperty --select-border-color - Color of the panel's edge.
- * @cssproperty --select-border-width - Width of the panel's edge. Follows
- *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
- *   theme says otherwise.
- * @cssproperty --select-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
- *   floating surface sits over content nobody can predict, so it keeps a lift by default.
- * @cssproperty --select-surface-max-block-size - How tall the panel gets.
+ * @cssproperty --select-border-width - Width of the panel's edge. Defaults to
+ *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
+ *   your theme sets a width.
+ * @cssproperty --select-shadow - Shadow under the panel. Defaults to
+ *   `--helix-shadow-floating`, because the panel can sit over any content.
+ * @cssproperty --select-surface-max-block-size - Maximum height of the panel.
  */
 export declare class HelixSelect extends HelixHeadlessSelect {
     static tier: string;
     static styles: CSSResultGroup;
     /**
-     * How much ink the trigger claims.
+     * How strongly the trigger is drawn. Leave it unset for a framed field, or
+     * set `ghost` for a trigger with no fill or edge.
      *
      * **The first field in this library to take an axis, and the case that asked
      * for it is a control in a row rather than a control on a form.** A chat's

package/dist/shared/mixin-control-surface/mixin-control-surface.d.ts

@@ -19,9 +19,15 @@ type Constructor<T> = new (...args: any[]) => T;
  * three drift the first time one gains a value.
  */
 export declare class MixinControlSurfaceInterface {
-    /** How filled it is drawn. Absent is the control's own resting treatment. */
+    /**
+     * How much fill the control is drawn with. Without it, the control uses its
+     * default.
+     */
     emphasis?: 'ghost' | 'outlined' | 'solid' | 'subtle';
-    /** What it means. Absent is `neutral`, which is the resting case. */
+    /**
+     * Which color the control is drawn in, by what it means. Without it, the tone
+     * is `neutral`.
+     */
     tone?: 'accent' | 'danger' | 'neutral' | 'primary';
 }
 export declare const MixinControlSurface: <T extends Constructor<HelixElement>>(Base: T) => Constructor<MixinControlSurfaceInterface> & T;

package/dist/shared/viewport/viewport.css.js

@@ -83,8 +83,9 @@ grid-area: full;
 [part="controls"] button {
 align-items: center;
 background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-thin) solid var(--helix-color-border);
+border: var(--helix-border-floating) solid var(--helix-color-border);
 border-radius: var(--helix-radii-sm);
+box-shadow: var(--helix-shadow-floating);
 block-size: var(--helix-size-control-sm);
 color: var(--helix-color-foreground);
 cursor: pointer;
@@ -102,5 +103,9 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="controls"] button:hover {
-background-color: var(--helix-color-surface-raised);
+background-color: color-mix(
+in oklab,
+var(--helix-color-foreground) 10%,
+var(--viewport-control-background-color, var(--helix-color-surface-overlay))
+);
 }`);

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

@@ -1,12 +1,11 @@
 import { HelixHeadlessSkeleton } from '@fusion.dev/helix-headless/skeleton';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Stands in for content that has not arrived.
+ * @summary A placeholder shown in place of content that is still loading.
  *
  * @description
- * A sweep rather than a pulse. A block fading in and out reads as something
- * broken; a highlight traveling across it reads as work in progress, and it is
- * the same one property animating either way.
+ * Animates a highlight sweeping across the block, which reads as work in
+ * progress. A block fading in and out can look broken.
  *
  * @since 0.1.0
  * @status stable
@@ -14,13 +13,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, Shimmer, Ghost
  * @documentation https://fusion.dev/helix/components/skeleton
  *
- * @csspart skeleton - The placeholder surface.
+ * @csspart skeleton - The placeholder shape.
  *
- * @cssproperty --skeleton-size - Diameter of the circle shape.
+ * @cssproperty --skeleton-size - The diameter of the circle shape.
  */
 export declare class HelixSkeleton extends HelixHeadlessSkeleton {
     /**
-     * What the missing content is shaped like.
+     * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *
      * Unset is a block, which is what most missing things are.
      */

package/dist/skip-link/root/skip-link-root.d.ts

@@ -1,23 +1,20 @@
 import { HelixHeadlessSkipLink } from '@fusion.dev/helix-headless/skip-link';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary The first stop on a page, which moves the reader past everything
- * repeated on every page.
+ * @summary A link at the start of a page that moves keyboard focus past the
+ * header to the main content.
  *
  * @description
- * Out of sight until the keyboard reaches it, then in the corner of the
- * viewport and impossible to miss. The hiding is the base layer's visually
- * hidden helper, so the link stays in the tab order and in the accessibility
- * tree while nobody can see it; `display: none` would have taken it out of
- * both. The reveal is this sheet's.
+ * Hidden until it receives keyboard focus, then shown in the corner of the
+ * viewport. It is hidden with the base layer's visually hidden helper, so it
+ * stays in the tab order and the accessibility tree. This stylesheet adds the
+ * reveal.
  *
- * **Fixed to the viewport rather than placed where it sits in the document**,
- * because it is first in the document and the page may already be scrolled
- * when focus arrives, by a restored position or an anchor in the address. A
- * link revealed above the top of the screen is revealed to nobody.
+ * It is fixed to the viewport, because the page may already be scrolled when
+ * focus arrives, from a restored position or an anchor in the address.
  *
- * Put it first inside `<body>`, before the header, and give the content
- * region the id its `href` names.
+ * Put it first inside `<body>`, before the header, and give the content region
+ * the id its `href` names.
  *
  * @since 0.1.0
  * @status stable
@@ -25,12 +22,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
- * @cssproperty --skip-link-border-color - Color of the revealed link's edge.
- * @cssproperty --skip-link-border-width - Width of the revealed link's edge. Follows
- *   `--helix-border-floating`, which is `0`, so the link is told apart by its lift unless a
- *   theme says otherwise.
- * @cssproperty --skip-link-shadow - Lift under the revealed link. Follows
- *   `--helix-shadow-floating`, since it sits over whatever the page has at its corner.
+ * @cssproperty --skip-link-border-color - The border color of the link while it is shown.
+ * @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
+ *   `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a
+ *   theme sets a border.
+ * @cssproperty --skip-link-shadow - The shadow under the link while it is shown. Follows
+ *   `--helix-shadow-floating`, because the link sits over the corner of the page.
  */
 export declare class HelixSkipLink extends HelixHeadlessSkipLink {
     static tier: string;

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

@@ -5,14 +5,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * The track and the thumb are the browser's own, restyled through the range
- * pseudo-elements rather than replaced. What that buys is everything a
- * hand-built slider has to reimplement and usually gets slightly wrong: the
- * drag, the keys, and a hit area sized by the platform for a finger.
+ * pseudo-elements. The drag, the keys, and the hit area sized for a finger stay
+ * native.
  *
- * The filled part of the track is painted with a gradient driven by the
- * fraction the headless tier writes, rather than by a second element laid over
- * it. One element cannot be half one color by any other means that survives
- * the thumb being dragged.
+ * The filled part of the track is a gradient driven by the fraction the
+ * headless tier writes. A gradient lets one element show two colors that follow
+ * the thumb while you drag it.
  *
  * @since 0.1.0
  * @status stable
@@ -20,17 +18,17 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Range, Range input
  * @documentation https://fusion.dev/helix/components/slider
  *
- * @cssproperty --slider-fill-color - The part behind the thumb.
- * @cssproperty --slider-length - How long a vertical track is. Nine rem by default, and read only when `orientation` is `vertical`, a horizontal track taking the width of its row.
- * @cssproperty --slider-marker-color - The ticks along the track.
- * @cssproperty --slider-thumb-color - The handle.
- * @cssproperty --slider-thumb-length - The handle along the track. Follows the size unless it is told otherwise, and setting one of the two is what makes the handle an oval.
- * @cssproperty --slider-thumb-radius - The handle's corners. Fully round by default, so a handle given two dimensions is a capsule until this says otherwise.
- * @cssproperty --slider-thumb-ring-color - The fence separating the handle from the track, for a slider that is not on the page.
- * @cssproperty --slider-thumb-size - The handle across the track. Square with the length by default, which is what makes it round.
- * @cssproperty --slider-track-color - The part not yet chosen.
- * @cssproperty --slider-track-image - The whole track, for a slider whose color is the value.
- * @cssproperty --slider-track-size - How thick the track is. The progress bar's own size by default, the two being the same object.
+ * @cssproperty --slider-fill-color - The color of the filled part of the track, behind the thumb.
+ * @cssproperty --slider-length - The length of a vertical track. It defaults to nine rem and applies only when `orientation` is `vertical`. A horizontal track takes the width of its row.
+ * @cssproperty --slider-marker-color - The color of the marks along the track.
+ * @cssproperty --slider-thumb-color - The color of the thumb.
+ * @cssproperty --slider-thumb-length - The thumb's size along the track. It follows `--slider-thumb-size` unless you set it, and setting one of the two makes the thumb an oval.
+ * @cssproperty --slider-thumb-radius - The thumb's corner radius. It is fully round by default, so a thumb with two different dimensions is a capsule unless you change it.
+ * @cssproperty --slider-thumb-ring-color - The color of the ring between the thumb and the track. Set it for a slider that sits on a surface other than the page background.
+ * @cssproperty --slider-thumb-size - The thumb's size across the track. It equals the length by default, which makes the thumb round.
+ * @cssproperty --slider-track-color - The color of the unfilled part of the track.
+ * @cssproperty --slider-track-image - An image for the whole track, such as a gradient for a slider whose value is a color.
+ * @cssproperty --slider-track-size - The thickness of the track. It matches the progress bar's size by default.
  */
 export declare class HelixSlider extends HelixHeadlessSlider {
     static styles: CSSResultGroup;

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

@@ -1,27 +1,19 @@
 import { HelixHeadlessSparkline } from '@fusion.dev/helix-headless/sparkline';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A line with no axes, for the shape of a series beside the number it belongs to.
+ * @summary A small chart with no axes that shows the shape of a series beside its number.
  *
  * @description
- * Sized in `em` by default, so a sparkline set beside a figure is a figure-sized
- * thing and one set in a table row is a row-sized thing. The type scale is
- * absolute and cannot say "a little wider than this".
+ * Sized in `em` by default, so it scales with the text around it: figure-sized
+ * beside a figure, and row-sized in a table row.
  *
- * The stroke does not scale with the box. `preserveAspectRatio="none"` is what
- * lets one drawing fill a 60px slot and a 600px one, and without
- * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
- * first and heavy in the second.
+ * `preserveAspectRatio="none"` lets one drawing fill a 60px slot or a 600px
+ * one, and `vector-effect: non-scaling-stroke` keeps the stroke from stretching
+ * with it. The line's weight is set in `em`, so it grows with the drawing's
+ * text size.
  *
- * One color on the host, read by the line, the wash, the columns and the mark
- * alike, so moving `--sparkline-color` cannot leave parts of one drawing
- * disagreeing.
- *
- * The line's weight is set in `em` rather than pixels, so it grows with the
- * drawing the way the drawing grows with its type. A fixed pixel width leaves a
- * 200 pixel sparkline wearing a hairline: `vector-effect` keeps a stroke out of
- * the view box's stretch, and it also keeps it out of every other reason it
- * might want to be bigger.
+ * Set `--sparkline-color` on the host to color the line, the fill, the columns,
+ * and the mark together.
  *
  * @since 0.1.0
  * @status stable
@@ -30,19 +22,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Micro Chart, Trend Line, Inline Chart
  * @documentation https://fusion.dev/helix/components/sparkline
  *
- * @cssproperty --chart-terminus-hole - A fill for the middle of a `ring` terminus, which is otherwise open.
+ * @cssproperty --chart-terminus-hole - A fill for the middle of a `ring` terminus. Without it, the middle is open.
  * @cssproperty --chart-terminus-size - Size of the mark on the last reading.
- * @cssproperty --sparkline-area-opacity - How much of the line's color the wash takes where it meets the line.
- * @cssproperty --sparkline-bar-radius - Corner radius on a column, under `plot="bar"`.
- * @cssproperty --sparkline-bar-stroke - Thickness of a column's edge under `outlined`.
+ * @cssproperty --sparkline-area-opacity - Opacity of the area fill where it meets the line.
+ * @cssproperty --sparkline-bar-radius - Corner radius of a column, when `plot="bar"`.
+ * @cssproperty --sparkline-bar-stroke - Thickness of a column's edge when `emphasis` is `outlined`.
  * @cssproperty --sparkline-block-size - Height of the drawing.
- * @cssproperty --sparkline-color - Color of the line, the wash, the columns and the mark.
+ * @cssproperty --sparkline-color - Color of the line, the area fill, the columns, and the mark.
  * @cssproperty --sparkline-inline-size - Width of the drawing.
  * @cssproperty --sparkline-width - Thickness of the line, overriding `weight`.
  */
 export declare class HelixSparkline extends HelixHeadlessSparkline {
     /**
-     * How much ink the drawing claims.
+     * How strongly the line, area, or columns are drawn.
      *
      * `subtle` mixes the drawing toward the page. The case is a table where one row
      * is being read and the rest are context.
@@ -94,7 +86,7 @@ export declare class HelixSparkline extends HelixHeadlessSparkline {
      */
     terminus?: 'none' | 'ring' | 'square' | 'triangle';
     /**
-     * How heavy the line is drawn.
+     * How thick the line is drawn.
      *
      * Absent is the weight a sparkline is usually drawn at. `thin` suits one set
      * in a table row among many; `thick` suits one standing on its own, where a

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -1,12 +1,12 @@
 import { HelixHeadlessSpeedDialItem } from '@fusion.dev/helix-headless/speed-dial';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One action in a speed dial: a mark, and a name beside it.
+ * @summary One action in a speed dial: an icon and a name beside it.
  *
  * @description
- * Presentation only: a round mark the size of a small control, and the name on
- * a chip beside it so it can be read against whatever the dial is floating
- * over. Everything about choosing it is the base class.
+ * Presentation only: a round mark the size of a small control, with the name on
+ * a chip beside it so it stays readable over whatever the dial floats over. The
+ * base class handles its behavior.
  *
  * @since 0.1.0
  * @status stable
@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Speed dial action, FAB action, Quick action
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
- * @cssproperty --speed-dial-item-size - Edge length of the mark.
+ * @cssproperty --speed-dial-item-size - Edge length of the icon.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -2,12 +2,11 @@ import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
 import type { CSSResultGroup } from 'lit';
 import '../../icon/index.js';
 /**
- * @summary A button that fans out the few actions a screen is for.
+ * @summary A floating button that opens a short list of the main actions on a screen.
  *
  * @description
- * Presentation only: the column the actions fan into, and which end they line
- * up on. Everything about what opens it, what closes it and how a keyboard
- * moves through it is the base class.
+ * Presentation only: the column the actions fan into, and the end they align
+ * to. The base class handles opening, closing, and keyboard movement.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,35 +1,26 @@
 import { HelixHeadlessSplitter } from '@fusion.dev/helix-headless/splitter';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Two panes and a divider the reader can move.
+ * @summary Two panes and a divider that you can move.
  *
  * @description
- * The divider is a line to look at and a box to hit, and they are different
- * sizes. Drawn at the border's own width it is a one pixel pointer target, which
- * is the fault every hand-rolled splitter has; the line is a border and the
- * target is the box around it.
+ * The divider's line and its pointer target are different sizes. The line is a
+ * border, and the target is the larger box around it.
  *
- * It lights on hover before it is touched, because a hairline says nothing about
- * being movable, and the whole target lights rather than the line, so the thing
- * that answers the pointer is the thing that changed.
+ * The whole target lights on hover, so you can see that the divider moves
+ * before you drag it.
  *
- * Both panes scroll and both have their minimum size taken off them. A flex
- * item's floor is its content, so a pane holding anything scrollable would
- * otherwise refuse to go below it: the divider would stop at a width nobody
- * asked for and nothing would say why.
+ * Both panes scroll, and both have their minimum size removed. Without this, a
+ * pane holding scrollable content could not shrink below its content, and the
+ * divider would stop early with no visible reason.
  *
- * The corner where a nested splitter crosses is twice the divider's target,
- * because it is aimed at as a point rather than a line. It draws nothing of its
- * own: the `move` cursor already says what it is, at the moment a reader is on
- * it. A ring on focus is the exception, since with nothing drawn there would
- * otherwise be no way to see where the keyboard is.
+ * The corner where a nested splitter crosses is twice the divider's target
+ * size, because you aim at a point. It draws nothing except a focus ring, and
+ * the `move` cursor shows what it is.
  *
- * A divider stays lit for as long as it is moving, which `:hover` cannot say on
- * its own: a drag captures the pointer, and a corner moves the nested divider
- * while the reader is nowhere near it. It goes primary while it moves rather
- * than merely darker, because hover is a question and a drag is an answer, and
- * because a corner moving two dividers at once needs the pair to read as one
- * gesture.
+ * A divider stays lit while it moves, including while a drag captures the
+ * pointer and while a corner moves it. It uses the primary color while moving,
+ * so the two dividers a corner moves look like one gesture.
  *
  * @since 0.1.0
  * @status stable
@@ -38,21 +29,21 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/splitter
  *
  * @csspart corner - The handle where a nested splitter's divider crosses this one.
- * @csspart end - The box holding the second.
+ * @csspart end - The box that holds the second pane.
  * @csspart separator - The divider itself.
- * @csspart start - The box holding the first pane.
+ * @csspart start - The box that holds the first pane.
  *
- * @cssproperty --splitter-color - The line between the panes.
- * @cssproperty --splitter-corner - How wide the handle at a crossing is.
- * @cssproperty --splitter-drag-color - The line while it is being moved.
- * @cssproperty --splitter-grip-color - The grip beside the line, once it is shown.
+ * @cssproperty --splitter-color - Color of the line between the panes.
+ * @cssproperty --splitter-corner - Width of the handle where two dividers cross.
+ * @cssproperty --splitter-drag-color - Color of the line while it is being moved.
+ * @cssproperty --splitter-grip-color - Color of the grip beside the line, when the grip is shown.
  * @cssproperty --splitter-grip-length - How far the grip runs along the divider.
- * @cssproperty --splitter-hover-color - The target under the pointer.
- * @cssproperty --splitter-target - How wide the draggable box is.
+ * @cssproperty --splitter-hover-color - Color of the divider's target under the pointer.
+ * @cssproperty --splitter-target - Width of the area you can drag.
  */
 export declare class HelixSplitter extends HelixHeadlessSplitter {
     /**
-     * Whether the divider carries a grip.
+     * Whether the divider shows a grip.
      *
      * - `line` is the divider alone, for a splitter the reader already knows is
      *   one: an editor, a mail client, anything they open every day.

package/dist/stat/group/stat-group.d.ts

@@ -4,10 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary A row of related measurements.
  *
  * @description
- * Wraps rather than scrolls, and each figure keeps its own width instead of
- * every one taking an equal share: a set of figures is read by comparing them,
- * and equal columns make a four-digit number and a two-digit one look like the
- * same quantity.
+ * Stats wrap onto a new line when space runs out, and each figure keeps its own
+ * width. Figures are read by comparing them, and equal columns would make a
+ * four-digit number and a two-digit one look like the same quantity.
  *
  * @since 0.1.0
  * @status stable
@@ -18,7 +17,7 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixStatGroup extends HelixHeadlessStatGroup {
     /**
-     * Whether the figures are separated by a rule as well as by space.
+     * Draws a rule between the figures, in addition to the space.
      */
     divided: boolean;
     static styles: CSSResultGroup;

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

@@ -1,13 +1,12 @@
 import { HelixHeadlessStat } from '@fusion.dev/helix-headless/stat';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One measurement, with the word for what it measures.
+ * @summary One measurement, with a label that names what it measures.
  *
  * @description
- * The value is set on the display face at a size the type scale does not reach,
- * because a figure is the one place on a page where the number is the design.
- * The label sits above it in the label ramp, quiet and wide-tracked, so the
- * pair reads as one object rather than as two lines of text.
+ * The value uses the display typeface at a size above the type scale, because
+ * the figure is the focus. The label sits above it in the label style, small
+ * and widely tracked, so the pair reads as one unit.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,17 +1,16 @@
 import { HelixHeadlessSteps } from '@fusion.dev/helix-headless/steps';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A sequence of stages, and where the reader is in it.
+ * @summary A sequence of stages that shows which stage the user is on.
  *
  * @description
- * The numbering is a CSS counter rather than a property, so a step's position
- * is drawn by the browser at layout and is right in the server's markup with no
- * script involved. Reordering the steps renumbers them; nothing has to be told.
+ * The numbers are a CSS counter, so the browser draws each step's position at
+ * layout, the numbers are correct in the server's markup with no script, and
+ * reordering the steps renumbers them.
  *
- * A step's name is a `helix-button`, so what it looks like under the pointer,
- * with focus, and when refused are Button's decisions and Button's hooks. There
- * is no `--steps-hover-color`: `--button-background-color` is that hook, and a
- * second name for it here would be a second thing to keep in step.
+ * A step's name is a `helix-button`, so its hover, focus, and disabled styles
+ * come from `Button` and use Button's custom properties. To change the hover
+ * color, set `--button-background-color`. There is no `--steps-hover-color`.
  *
  * @since 0.1.0
  * @status stable
@@ -19,12 +18,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps
  *
- * @cssproperty --steps-complete-color - The mark on a finished step.
- * @cssproperty --steps-connector-color - The rule running through the steps.
- * @cssproperty --steps-connector-inset - Air either side of a mark, before the rail.
- * @cssproperty --steps-current-color - The mark on the current step.
+ * @cssproperty --steps-complete-color - Color of the mark on a finished step.
+ * @cssproperty --steps-connector-color - Color of the line that connects the steps.
+ * @cssproperty --steps-connector-inset - Space on either side of a mark, before the connecting line.
+ * @cssproperty --steps-current-color - Color of the mark on the current step.
  * @cssproperty --steps-gap - Space between one step and the next.
- * @cssproperty --steps-marker-size - Size of the mark, glyph or digit.
+ * @cssproperty --steps-marker-size - Size of the mark, whether an icon or a digit.
  */
 export declare class HelixSteps extends HelixHeadlessSteps {
     static styles: CSSResultGroup;

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

@@ -4,22 +4,18 @@ import type { CSSResultGroup } from 'lit';
  * @summary A control that turns something on or off.
  *
  * @description
- * A thumb traveling in a groove, which is the one place in the library color
- * is used to say "on". A checkbox does not, because a tick is legible on its
- * own; a switch has no mark, so the fill is the whole of what distinguishes the
- * two states and there is nothing else for it to be.
+ * A thumb moves along a track. The switch is the one place in Helix where color
+ * means "on". A checkbox has a tick, and a switch has no mark, so the fill is
+ * what tells the two states apart.
  *
- * The input itself is the hit target and is drawn as the track, stretched over
- * it and invisible, so the press, the focus and the label forwarding are all
- * the platform's while the picture is ours.
+ * The input is the hit target. It is stretched over the track and made
+ * invisible, so the press, the focus, and the label forwarding come from the
+ * platform.
  *
- * **Its height is `--helix-size-switch`, which is one step above the
- * checkbox's** at every density rather than the same as it. A checkbox is a box
- * with a mark in it; a switch is a track with a thumb inside it, and at the
- * checkbox's height the thumb has two pixels of groove around it and the whole
- * control reads as a small dash. The width follows the height, so setting
- * `--switch-block-size` widens it too and the proportion is not something a
- * consumer has to keep.
+ * The height is `--helix-size-switch`, one step above the checkbox's at every
+ * density. At the checkbox's height the thumb has two pixels of track around
+ * it, and the control looks like a small dash. The width follows the height, so
+ * setting `--switch-block-size` widens the switch too and keeps the proportion.
  *
  * @since 0.1.0
  * @status stable
@@ -28,9 +24,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/switch
  *
  * @cssproperty --switch-block-size - Height of the track. The width follows it.
- * @cssproperty --switch-inline-size - Length of the track, if not the derived one.
- * @cssproperty --switch-on-color - Fill when it is on.
- * @cssproperty --switch-thumb-color - The handle, in both states.
+ * @cssproperty --switch-inline-size - Length of the track. Set it to override the length derived from the height.
+ * @cssproperty --switch-on-color - Fill when the switch is on.
+ * @cssproperty --switch-thumb-color - Color of the thumb, in both states.
  */
 export declare class HelixSwitch extends HelixHeadlessSwitch {
     static styles: CSSResultGroup;

package/dist/table/cell/table-cell.css.js

@@ -20,6 +20,11 @@ padding-inline: var(--helix-space-none) var(--helix-space-md);
 text-align: var(--table-cell-align);
 }
 
+:host(:state(text)) slot {
+display: block;
+min-inline-size: 0;
+}
+
 ::slotted(*) {
 min-inline-size: 0;
 }

package/dist/table/cell/table-cell.d.ts

@@ -4,10 +4,10 @@ import type { CSSResultGroup } from 'lit';
  * @summary One cell of a table.
  *
  * @description
- * Every cell is the same height whatever it holds, so a row with a tag or an
- * icon button in it sits level with a row of text. Content is set in full
- * foreground, since the cells are what a reader is reading, and a long
- * identifier breaks rather than running into the next column.
+ * Every cell has the same height whatever it holds, so a row with a tag or an
+ * icon button in it sits level with a row of text. Content uses the full
+ * foreground color, and a long identifier breaks onto a new line so it does not
+ * run into the next column.
  *
  * @since 0.1.0
  * @status stable

package/dist/table/column/table-column.d.ts

@@ -1,12 +1,11 @@
 import { HelixHeadlessTableColumn } from '@fusion.dev/helix-headless/table';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One column of a table: its heading, and how wide it is.
+ * @summary One column of a table: its heading and its width.
  *
  * @description
- * Styled as the header cell it is, and it carries the same rule and inset as
- * the cells beneath it so the heading and its column read as one line down the
- * table.
+ * Styled as a header cell, with the same rule and inset as the cells below it,
+ * so the heading and its column read as one line down the table.
  *
  * @since 0.1.0
  * @status stable