@fusion.dev/helix 0.105.0 → 0.107.0

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

@@ -1,11 +1,11 @@
 import { HelixHeadlessMegamenu } from '@fusion.dev/helix-headless/megamenu';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A section of a navigation that opens a panel of destinations.
+ * @summary A section of a navigation with a trigger that opens a panel of links.
  *
  * @description
- * Presentation only: the trigger, and the panel it opens as a grid of columns.
- * Everything about what opens it and what closes it is the base class.
+ * Styles the trigger and lays out the panel it opens as a grid of columns. What
+ * opens and closes the panel comes from the base class.
  *
  * @since 0.1.0
  * @status stable
@@ -13,17 +13,17 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Mega menu, Flyout, Nav panel
  * @documentation https://fusion.dev/helix/components/megamenu
  *
- * @cssproperty --megamenu-backdrop - A filter behind the panel, which is `none` until one is
- *   asked for: this family carries no `material`, so the pair is two hooks rather than a word.
- * @cssproperty --megamenu-background-color - The panel's own fill.
- * @cssproperty --megamenu-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 --megamenu-column-size - The narrowest a column goes before the grid wraps.
- * @cssproperty --megamenu-full-size - How wide the band's contents may get, centered in it.
- * @cssproperty --megamenu-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 --megamenu-size - How wide the panel may get.
+ * @cssproperty --megamenu-backdrop - The filter behind the panel, `none` by default. This family
+ *   has no `material` property, so this and `--megamenu-background-color` set the panel's material.
+ * @cssproperty --megamenu-background-color - The panel's fill.
+ * @cssproperty --megamenu-border-width - The width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0` unless a theme changes it, so the panel stands out
+ *   by its shadow.
+ * @cssproperty --megamenu-column-size - The minimum width of a column before the grid wraps.
+ * @cssproperty --megamenu-full-size - The maximum width of the band's contents, which are centered in it.
+ * @cssproperty --megamenu-shadow - The shadow under the panel. Follows `--helix-shadow-floating`,
+ *   so the panel has a shadow by default, because it sits over content you cannot predict.
+ * @cssproperty --megamenu-size - The maximum width of the panel.
  */
 export declare class HelixMegamenu extends HelixHeadlessMegamenu {
     static styles: CSSResultGroup;

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

@@ -4,21 +4,21 @@ import type { CSSResultGroup } from 'lit';
  * @summary One row in a menu: a command, a choice, or a way into a submenu.
  *
  * @description
- * A row draws a column beside its label only where it has something to put in
- * one, and the width is the menu's rather than the row's: the page reserves a
- * leading or a trailing track as soon as any row on it fills one, so every
- * label on that page starts at the same edge and a page that fills neither pays
- * for neither. A row knows about its own slots and nothing about its
- * neighbors, which is why the reservation is not made here.
+ * A row draws a leading or trailing column only when it has content for it. The
+ * menu page sets the column width: once any row on a page fills a leading or
+ * trailing slot, the page reserves that track for every row, so all labels on
+ * the page start at the same edge. A page that fills neither reserves nothing.
+ * The reservation is made on the page because each row's styles cover only its
+ * own slots.
  *
  * @since 0.1.0
  * @status stable
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *
- * @cssproperty --menu-item-end - Width of the trailing column, seam included, which holds a tick or the caret into a page.
+ * @cssproperty --menu-item-end - Width of the trailing column, including the gap before it, which holds a check mark or a submenu caret.
  * @cssproperty --menu-item-hover-color - Fill under the pointer.
- * @cssproperty --menu-item-start - Width of the leading column, seam included, for a row carrying more than a mark. The menu sets it per page and zero is no column at all.
+ * @cssproperty --menu-item-start - Width of the leading column, including the gap after it, for a row with more than a mark. The menu sets it for each page, and `0` removes the column.
  */
 export declare class HelixMenuItem extends HelixHeadlessMenuItem {
     static styles: CSSResultGroup;

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

@@ -1,14 +1,14 @@
 import { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A menu of commands, opened from a trigger.
+ * @summary A menu of commands that opens from a trigger.
  *
  * @description
- * The surface is in the top layer, so it needs no `z-index` and cannot be
- * clipped by whatever it sits inside.
+ * The surface is in the top layer, so it needs no `z-index` and its container
+ * cannot clip it.
  *
- * A submenu replaces the page rather than opening beside it, so the panel stays
- * one panel and reads the same on a phone as on a desk.
+ * A submenu replaces the current page, so the menu stays one panel and works
+ * the same on a phone as on a desktop.
  *
  * @since 0.1.0
  * @status stable
@@ -18,12 +18,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --menu-background-color - Fill of the surface.
  * @cssproperty --menu-border-color - Color of the panel's edge.
- * @cssproperty --menu-border-width - Width of the panel's edge. Follows
+ * @cssproperty --menu-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 a theme sets a border.
  *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
  *   theme says otherwise.
- * @cssproperty --menu-max-block-size - Tallest the surface grows before it scrolls.
- * @cssproperty --menu-min-inline-size - Narrowest the surface gets.
- * @cssproperty --menu-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ * @cssproperty --menu-max-block-size - The tallest the menu grows before it scrolls.
+ * @cssproperty --menu-min-inline-size - The narrowest the menu gets.
+ * @cssproperty --menu-shadow - Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
  *   floating surface sits over content nobody can predict, so it keeps a lift by default.
  */
 export declare class HelixMenu extends HelixHeadlessMenu {

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

@@ -1,35 +1,26 @@
 import { HelixHeadlessMeter } from '@fusion.dev/helix-headless/meter';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A measurement in a known range, and whether it is where you want it.
+ * @summary A measurement in a known range, with optional bands that mark it good, fair, or poor.
  *
  * @description
- * The bar `Progress` draws, at twice the height and on the house corner rather
- * than its pill.
+ * Draws the same bar as `Progress`, at twice the height, with the library's
+ * standard corner radius in place of the pill shape.
  *
- * Taller than a progress bar rather than matched to it. The two are unrelated
- * controls, and a reader telling a level from a task at a glance is the point
- * rather than the cost. A meter also carries more, a fill and a mark at each
- * threshold, and at eight pixels those marks are hairlines. At sixteen they are
- * unmistakable.
+ * The extra height makes a meter easy to tell apart from a progress bar and
+ * keeps the tick at each threshold visible. At eight pixels the ticks are
+ * hairlines. At sixteen they are clear. The ticks cut the fill into segments,
+ * which is why the corners are square: a pill-shaped bar would have round outer
+ * ends and square inner ends.
  *
- * The corner is the ticks' doing: they cut the fill into segments, and a
- * pill-ended bar comes out as a run whose outer ends are round and whose inner
- * ends are square.
+ * Once you set thresholds, the fill takes the success, warning, or danger tone
+ * of the band the reading falls in. A meter with no thresholds is neutral. A
+ * tick marks each threshold, so the reading can be placed against the bands
+ * without relying on color.
  *
- * What else differs is what the color means. A progress bar is one color because
- * there is one thing to say; a meter's fill takes the success, warning or danger
- * tone from the band its reading falls in, and only once thresholds have been
- * declared. An unbanded meter is neutral, because a gauge with nothing said
- * about it is a reading rather than good news.
- *
- * A tick marks each threshold, so the reading can be placed against the bands
- * without seeing color at all.
- *
- * A reading past either end squares the corner it ran out at, which is the
- * convention for a quantity continuing past the frame it is drawn in. The bar
- * itself stops, because that is what an end is; the words and the accessible
- * reading are what say how far past.
+ * A reading past either end squares the corner on that side, the convention for
+ * a quantity that continues past its frame. The bar stops at the end, and the
+ * text and the accessible value give the actual reading.
  *
  * @since 0.1.0
  * @status stable
@@ -38,26 +29,26 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
- * @csspart indicator - The part of it the value fills.
- * @csspart indicator-fair - The fill while the reading is in a band beside the good one, beside `indicator`.
- * @csspart indicator-good - The fill while the reading is in the good band, beside `indicator`.
- * @csspart indicator-over - The fill while the value is past the top, beside `indicator`.
- * @csspart indicator-poor - The fill while the reading is two bands from the good one, beside `indicator`.
- * @csspart indicator-under - The fill while the value is below the floor, beside `indicator`.
+ * @csspart indicator - The part of the track the value fills.
+ * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
+ * @csspart indicator-good - The fill while the reading is in the good band. Set alongside `indicator`.
+ * @csspart indicator-over - The fill while the value is above `max`. Set alongside `indicator`.
+ * @csspart indicator-poor - The fill while the reading is two bands from the good band. Set alongside `indicator`.
+ * @csspart indicator-under - The fill while the value is below `min`. Set alongside `indicator`.
  * @csspart tick - A mark at `low` or at `high`.
  * @csspart track - The whole range.
- * @csspart value - The reading, under `show-value`.
+ * @csspart value - The reading as text, shown when `show-value` is set.
  *
- * @cssproperty --meter-color - The fill, overriding the band's own tone.
- * @cssproperty --meter-ring-size - Edge length of the drawing, in `ring` and `arc`.
- * @cssproperty --meter-ring-width - Thickness of the stroke there.
- * @cssproperty --meter-size - How thick the bar is.
- * @cssproperty --meter-tick-color - The mark at a threshold.
- * @cssproperty --meter-track-color - The groove behind the fill.
+ * @cssproperty --meter-color - The fill color. Overrides the band's tone.
+ * @cssproperty --meter-ring-size - The width and height of the drawing in `ring` and `arc`.
+ * @cssproperty --meter-ring-width - The thickness of the stroke in `ring` and `arc`.
+ * @cssproperty --meter-size - The thickness of the bar.
+ * @cssproperty --meter-tick-color - The color of the mark at each threshold.
+ * @cssproperty --meter-track-color - The color of the groove behind the fill.
  */
 export declare class HelixMeter extends HelixHeadlessMeter {
     /**
-     * How much ink the reading claims.
+     * How strongly the reading is drawn. `subtle` draws it as a wash of its color.
      *
      * `subtle` is the reading as a wash of its own color: still legible, no longer
      * the loudest thing in the region. The case is a dashboard of several meters

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

@@ -4,10 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary A set of destinations, with a marker on the current one.
  *
  * @description
- * One marker that travels, rather than a background that appears on whichever
- * destination is current. A fill that swaps is two things changing at once and
- * reads as a flicker; one that moves is a single object the eye follows, and it
- * says where the current page was as well as where it is.
+ * One marker moves to the current destination. A moving marker is easier to
+ * follow than a background that switches from one item to another, and the
+ * movement shows which page you came from as well as which one is current.
  *
  * @since 0.1.0
  * @status stable
@@ -16,7 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/navigation
  *
  * @cssproperty --navigation-gap - Space between destinations.
- * @cssproperty --navigation-indicator-color - Fill of the traveling marker.
+ * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;

package/dist/notifications/group/notification-group.d.ts

@@ -5,18 +5,14 @@ import type { CSSResultGroup } from 'lit';
  * them.
  *
  * @description
- * The heading is chrome: it says which pile a reader is looking at and is never
- * the thing they came to read, so it is drawn quieter than a row's title. A feed
- * cut into five days has five of these, and a heading at the weight of the
- * content turns a list of notifications into a list of dates.
+ * The heading is drawn quieter than a row's title. It labels a group, and at
+ * full weight a feed split into days would read as a list of dates.
  *
- * **The stack is two lines rather than two cards.** Collapsed, the rows behind
- * the first are not rendered at all, so there is nothing to see through: what
- * draws the pile is a pair of pseudo-elements above the visible row, offset and
- * inset so they read as the top edges of cards behind it. A shadow could not do
- * it, spreading on four sides where this has a top edge and no bottom one, and
- * having no way to sit narrower than the thing it is behind, which is the cue
- * that says there is something back there.
+ * In a collapsed group, the rows after the first are not rendered. Two
+ * pseudo-elements above the visible row draw the stack, offset and inset so
+ * they look like the top edges of cards behind it. A shadow cannot draw this,
+ * because it spreads on all four sides and cannot be narrower than the element
+ * it is behind.
  *
  * @since 0.24.0
  * @status stable
@@ -24,8 +20,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases NotificationSection, FeedGroup
  * @documentation https://fusion.dev/helix/components/notifications
  *
- * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group folds, and cancelable.
- * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group unfolds. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the group collapses. Cancelable.
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the group expands. Cancelable: cancel it to keep the group collapsed.
  */
 export declare class HelixNotificationGroup extends HelixHeadlessNotificationGroup {
     static styles: CSSResultGroup;

package/dist/notifications/notification/notification.d.ts

@@ -2,67 +2,61 @@ import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notificati
 import type { CSSResultGroup } from 'lit';
 import '../../format-date/index.js';
 /**
- * @summary One thing that happened, which a reader may not have seen yet.
+ * @summary A single notification about something that happened, marked read or unread.
  *
  * @description
- * A four-column grid: media, body, actions, dismiss.
+ * A four-column grid: media, body, actions, and dismiss.
  *
- * **The media column is held open by the feed, not by the item.** Each item is
- * its own grid, so nothing about one row's tracks reaches the row below it: a
- * feed where some items had an avatar and some did not drew its text at two
- * different left edges, which is the fault a grid was chosen to prevent. The
- * root publishes whether anything in it has media and every item reserves that
- * much, so a mixed feed reads down one edge and a feed with no media anywhere
- * pays nothing for the column.
+ * The feed holds the media column open. Each item is its own grid, so the root
+ * reports whether any item has media, and every item reserves that column. In a
+ * mixed feed, all text starts at one edge. A feed with no media reserves no
+ * column.
  *
- * **Unread is weight and a mark on the inline start edge, not a fill.** Depth
- * comes from a single border in this library, and a filled row is elevation
- * spelled differently; a feed of filled rows is a striped list nobody can read.
- * The mark is a fixed height on the first line rather than the height of the
- * row, so it says the same thing about a one line notification and a five line
- * one.
+ * Unread is shown by font weight and a mark on the inline start edge. The row
+ * has no fill, because depth in Helix comes from a single border. The mark has
+ * a fixed height on the first line, so it looks the same on a one-line and a
+ * five-line notification.
  *
- * **Narrow, the actions go under the body.** How much room the row was given is
- * a fact about this box and about nothing else, so it is a container query: a
- * feed in a 320 pixel side panel is narrow inside a 1400 pixel window, and a
- * viewport rule would hand it the wide branch.
+ * In a narrow container, the actions move under the body. This is a container
+ * query, so a feed in a 320 pixel side panel gets the narrow layout inside a
+ * 1400 pixel window.
  *
  * @since 0.1.0
  * @status stable
  * @category feedback
  * @documentation https://fusion.dev/helix/components/notifications
  *
- * @slot - What happened, in the consumer's own markup.
- * @slot actions - What a reader can do about it.
+ * @slot - What happened, in your own markup.
+ * @slot actions - Actions the user can take on the notification.
  * @slot media - An avatar or icon identifying who or what it came from.
  *
- * @csspart controls - The actions and the dismiss, which replace the time.
- * @csspart dismiss - The control that removes it.
- * @csspart dismiss-mark - The glyph on that control, where none is slotted.
+ * @csspart controls - The actions and the dismiss control, shown in place of the time.
+ * @csspart dismiss - The control that dismisses the notification.
+ * @csspart dismiss-mark - The icon on the dismiss control, when no icon is slotted.
  * @csspart item - The whole notification.
  * @csspart time - When it happened.
  * @csspart trailing - The column holding the time and the controls.
  *
- * @cssproperty --notifications-color - Ink in an item that has been read.
- * @cssproperty --notifications-dismiss-color - Ink on the control that removes an item, which is `danger` because removing one is the end of it.
+ * @cssproperty --notifications-color - Text color in a read item.
+ * @cssproperty --notifications-dismiss-color - Color of the dismiss control. It is `danger`, because dismissing an item removes it for good.
  * @cssproperty --notifications-item-edge - Color of a carded row's border.
  * @cssproperty --notifications-item-fill - Fill behind a `filled` row.
- * @cssproperty --notifications-item-gap - Space between carded rows, which replaces the hairline.
+ * @cssproperty --notifications-item-gap - Space between carded rows, which have no hairline.
  * @cssproperty --notifications-item-radius - Corner radius of a carded row.
  * @cssproperty --notifications-padding-block - Space above and below an item.
  * @cssproperty --notifications-padding-inline - Space either side of an item.
  * @cssproperty --notifications-rule - The hairline between items.
- * @cssproperty --notifications-unread-block-size - How long that mark is.
- * @cssproperty --notifications-unread-inline-size - How thick that mark is.
- * @cssproperty --notifications-unread-inset - How far it sits from the row's leading edge.
+ * @cssproperty --notifications-unread-block-size - Length of the unread mark.
+ * @cssproperty --notifications-unread-inline-size - Thickness of the unread mark.
+ * @cssproperty --notifications-unread-inset - Distance from the unread mark to the row's leading edge.
  * @cssproperty --notifications-unread-mark - Color of the edge mark on an unread item.
- * @cssproperty --notifications-unread-offset - How far it sits from the row's top.
- * @cssproperty --notifications-unread-radius - Its corner radius, which is what turns it into a dot.
+ * @cssproperty --notifications-unread-offset - Distance from the unread mark to the row's top edge.
+ * @cssproperty --notifications-unread-radius - Corner radius of the unread mark, which can turn it into a dot.
  */
 export declare class HelixNotification extends HelixHeadlessNotification {
     static tier: string;
     /**
-     * How a row is told apart from the one above it.
+     * How a row is separated from the one above it.
      *
      * `plain` is the resting one and is a hairline and nothing else: the row has
      * no box of its own, and what separates it is a line the list draws between

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

@@ -2,18 +2,16 @@ import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notificat
 import type { CSSResultGroup } from 'lit';
 import '../notification/notification.js';
 /**
- * @summary A feed a reader comes back to, made of notifications they may not have seen.
+ * @summary A feed of notifications, each marked read or unread.
  *
  * @description
- * Three rows: header, a list that scrolls, footer. The list scrolls and the
- * other two do not, because a panel is opened at a fixed height and a mark-all
- * control that slides away as the reader scrolls is the control they were
- * reaching for.
+ * Three rows: a header, a scrolling list, and a footer. Only the list scrolls,
+ * so the controls in the header and footer stay in view in a fixed-height
+ * panel.
  *
- * **It does not virtualize and it cannot**, which is the headless tier's note
- * and worth repeating where the choice is made: the items are the consumer's own
- * elements, so N notifications is N elements by construction. A feed that really
- * holds thousands wants `helix-data-table` with a custom cell.
+ * The list does not virtualize. The items are your own elements, so N
+ * notifications are N elements. For a feed of thousands, use `helix-data-table`
+ * with a custom cell.
  *
  * @since 0.1.0
  * @status stable
@@ -25,11 +23,11 @@ import '../notification/notification.js';
  * @slot header - Above the list, for a title and the mark-all control.
  *
  * @csspart list - The list itself.
- * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
+ * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
- * @cssproperty --notifications-media-column - The gutter every item holds open where something in the feed has media.
+ * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.
  * @cssproperty --notifications-padding-inline - Space either side of the header and footer.
  * @cssproperty --notifications-rule - The hairline between items and around the regions.
  */

package/dist/number-input/root/number-input-root.d.ts

@@ -1,21 +1,19 @@
 import { HelixHeadlessNumberInput } from '@fusion.dev/helix-headless/number-input';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A number a reader types or steps to.
+ * @summary A field for a number, typed or changed with step buttons.
  *
  * @description
- * The frame an `Input` wears, because in a form this stands in a row with them.
- * The difference is inside it: a button at each end of the box rather than
- * beside it, so the whole reads as one field rather than a field with two
- * controls after it.
+ * Uses the same frame as `Input`, so the two line up in a form. A button sits
+ * at each end inside the box, so the whole control reads as one field.
  *
- * The number is centered and set in tabular figures, which is the one place this
- * differs from every other field in the library. Digits are what changes under a
- * repeated press, and proportional ones make the number shuffle while it counts.
+ * The number is centered and set in tabular figures, which no other field in
+ * the library does. The digits change under repeated presses, and proportional
+ * figures would make the number shift as it counts.
  *
- * The steppers are out of the tab order. A keyboard reader already has four keys
- * on the field itself, and two more tab stops per number is a form that takes
- * three times as long to cross.
+ * The stepper buttons are out of the tab order. The field already has four keys
+ * for keyboard users, and two more tab stops per number would make a form three
+ * times as long to cross.
  *
  * @since 0.1.0
  * @status stable
@@ -23,15 +21,15 @@ import type { CSSResultGroup } from 'lit';
  * @aliases NumberField, Stepper, InputNumber
  * @documentation https://fusion.dev/helix/components/number-input
  *
- * @slot end - After it.
- * @slot start - Before the number, for a unit or an icon.
+ * @slot end - Content after the number, such as a unit.
+ * @slot start - Content before the number, such as a unit or an icon.
  *
- * @csspart control - The field itself.
- * @csspart decrement - The control that steps down.
- * @csspart field - The box holding everything.
- * @csspart increment - The control that steps up.
+ * @csspart control - The input that holds the number.
+ * @csspart decrement - The button that steps the value down.
+ * @csspart field - The box that holds the whole control.
+ * @csspart increment - The button that steps the value up.
  *
- * @cssproperty --number-input-background-color - Fill behind the number.
+ * @cssproperty --number-input-background-color - The fill behind the number.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -2,15 +2,14 @@ import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-
 import type { CSSResultGroup } from 'lit';
 import '../../copy-button/index.js';
 /**
- * @summary A value read as a tree: collapse what you do not need, count what
- * you collapsed, copy the part you do.
+ * @summary A structured value shown as a tree, where you can close branches,
+ * see how many entries each holds, and copy any part.
  *
  * @description
- * Code Block's frame around a tree of entries. Each type takes its ink from the
- * syntax set the code blocks already use, a key in one, a string in another and
- * a number, a boolean and a null in theirs, and each row is one line with a long
- * string ending in an ellipsis, so every row is one height and a windowed tree
- * never has to measure them one by one.
+ * The styled tier draws the tree in the Code Block frame. Keys and each type of
+ * value take their colors from the syntax colors code blocks use. Each row is
+ * one line, and a long string ends in an ellipsis, so every row has the same
+ * height and a windowed tree does not measure rows one by one.
  *
  * @since 0.1.0
  * @status stable
@@ -18,11 +17,11 @@ import '../../copy-button/index.js';
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
  *
- * @cssproperty --object-inspector-background-color - Ground under the tree.
- * @cssproperty --object-inspector-block-size - Height of the scrolling box, when windowed.
- * @cssproperty --object-inspector-border-color - The edge around the tree and its header.
- * @cssproperty --object-inspector-header-background-color - The bar carrying the label.
- * @cssproperty --object-inspector-radius - Corner radius of the tree.
+ * @cssproperty --object-inspector-background-color - The background of the tree.
+ * @cssproperty --object-inspector-block-size - The height of the scrolling box when `windowed` is set.
+ * @cssproperty --object-inspector-border-color - The color of the edge around the tree and its header.
+ * @cssproperty --object-inspector-header-background-color - The background of the bar that holds the label.
+ * @cssproperty --object-inspector-radius - The corner radius of the tree.
  */
 export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {
     static tier: string;

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

@@ -1,12 +1,11 @@
 import { HelixHeadlessOptionGroup } from '@fusion.dev/helix-headless/option';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A named run of options inside a listbox.
+ * @summary A labeled group of options inside a listbox.
  *
  * @description
- * The heading is set small and quiet, because it is a divider that happens to
- * have words on it: a run of options is read as a list and the heading is what
- * tells you which list, not something to read on its own.
+ * The heading is small and muted. It labels the run of options below it and is
+ * not meant to be read as content of its own.
  *
  * @since 0.1.0
  * @status stable

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

@@ -4,10 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary One choice in a listbox.
  *
  * @description
- * Two states that look different on purpose: chosen, which is a fact about the
- * value, and active, which is where the keyboard is. A list that draws them the
- * same way leaves a reader arrowing through it unable to tell what they have
- * picked from what they are looking at.
+ * Selected and active look different. Selected is the value, and active is
+ * where the keyboard is. If both looked the same, you could not tell what you
+ * picked from where you are while moving through the list with the arrow keys.
  *
  * @since 0.1.0
  * @status stable
@@ -15,10 +14,10 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Item, Choice
  * @documentation https://fusion.dev/helix/components/option
  *
- * @cssproperty --option-active-color - Wash behind the option the keyboard is on.
- * @cssproperty --option-block-padding - Space above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list.
- * @cssproperty --option-padding - Space before the label, shared with a group heading.
- * @cssproperty --option-radius - Corner radius of the row. A listbox and a select flatten it.
+ * @cssproperty --option-active-color - The background of the option the keyboard is on.
+ * @cssproperty --option-block-padding - The space above and below the option. `Command` increases it for its longer list of rows.
+ * @cssproperty --option-padding - The space before the label, shared with a group heading.
+ * @cssproperty --option-radius - The corner radius of the row. A listbox and a select remove it.
  */
 export declare class HelixOption extends HelixHeadlessOption {
     static styles: CSSResultGroup;