@fusion.dev/helix 0.105.0 → 0.106.0

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

@@ -1,13 +1,12 @@
 import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Separates content into groups with a rule.
+ * @summary A line that separates content into groups.
  *
  * @description
- * A one-pixel rule in the border color, running the full inline size by
- * default. A vertical divider stretches to its flex parent instead of setting
- * its own height, so it matches whatever it sits beside without being told how
- * tall that is.
+ * A one-pixel rule in the border color that spans the full inline size by
+ * default. A vertical divider stretches to fit its flex parent, so it matches
+ * the height of what it sits beside.
  *
  * @since 0.1.0
  * @status stable
@@ -15,14 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Separator, Rule
  * @documentation https://fusion.dev/helix/components/divider
  *
- * @csspart line - The rule itself.
+ * @csspart line - The line.
  *
- * @cssproperty --divider-color - Color of the rule.
- * @cssproperty --divider-length - How long a vertical rule is. Horizontal takes its width.
- * @cssproperty --divider-padding - Space taken off both ends of it.
- * @cssproperty --divider-padding-end - Off the far end only.
- * @cssproperty --divider-padding-start - Off the near end only.
- * @cssproperty --divider-thickness - How heavy the rule is.
+ * @cssproperty --divider-color - The color of the line.
+ * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.
+ * @cssproperty --divider-padding - The space removed from both ends of the line.
+ * @cssproperty --divider-padding-end - The space removed from the end of the line only.
+ * @cssproperty --divider-padding-start - The space removed from the start of the line only.
+ * @cssproperty --divider-thickness - The thickness of the line.
  */
 export declare class HelixDivider extends HelixHeadlessDivider {
     static styles: CSSResultGroup;

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

@@ -2,25 +2,22 @@ import { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-chart'
 import type { CSSResultGroup } from 'lit';
 import '../../tooltip/index.js';
 /**
- * @summary Parts of a whole as a ring, read from a table.
+ * @summary A chart that shows parts of a whole as a ring, read from a table.
  *
  * @description
- * The slices take the series palette in order, so a legend beside it maps the
- * same twenty-four.
+ * The slices take the series palette in order, so a legend beside the chart
+ * uses the same twenty-four colors.
  *
- * The ring starts at twelve o'clock, which is a rotation applied here rather
- * than arithmetic done below: where a reader expects the first slice to begin
- * is a fact about the picture, not about the numbers.
+ * The ring starts at twelve o'clock. The styled tier applies that as a
+ * rotation.
  *
- * A track is drawn under the slices, so a ring whose values do not fill it
- * still reads as a ring with a gap rather than as a broken arc.
+ * A track is drawn under the slices, so when the values do not fill the ring,
+ * the gap shows as part of the ring.
  *
- * **How thick the ring is drawn is `hole`, not a CSS hook.** The stroke's width
- * and the ring's radius have to agree: the outer edge is `r + width / 2`, so
- * setting one in CSS and deriving the other in markup gives a drawing that is
- * wrong in both. Measured with such a hook in place, every ring came out twelve
- * units thick whatever its `hole`, so a pie was a small ring with a hole in it
- * and `large` was drawn larger than the default.
+ * **Set the ring's thickness with `hole`.** There is no CSS hook for it,
+ * because the stroke width and the ring's radius must agree: the outer edge is
+ * `r + width / 2`, and setting one in CSS while the markup derives the other
+ * draws the ring wrong.
  *
  * @since 0.1.0
  * @status stable
@@ -53,7 +50,7 @@ export declare class HelixDonutChart extends HelixHeadlessDonutChart {
      */
     static tier: string;
     /**
-     * How much ink the slices claim.
+     * How strongly the slices are drawn.
      *
      * `solid` is the resting arrangement and selects nothing: a slice at full
      * strength is what the base rule already draws. `subtle` is the ring as a wash

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

@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary A panel that slides in from an edge.
  *
  * @description
- * The panel translates and the scrim fades, both on transform and opacity only,
- * which is the one place motion is allowed to carry the work: the surface at
- * rest is flat and the movement is what says something happened.
+ * The panel slides and the scrim fades, animating only `transform` and
+ * `opacity`. At rest the surface is flat, and the motion shows that the drawer
+ * opened or closed.
  *
  * @since 0.1.0
  * @status stable
@@ -22,25 +22,26 @@ import type { CSSResultGroup } from 'lit';
  * @csspart panel - The sliding panel.
  *
  * @cssproperty --drawer-backdrop - Filter applied behind a `frosted` or `glass` drawer.
- *   Follows the theme's material policy; set it to override the strength on one drawer.
+ *   Follows the theme's material policy. Set it to change the strength on one drawer.
  * @cssproperty --drawer-background-color - Surface behind the panel.
  * @cssproperty --drawer-border-color - Color of the panel's edge.
  * @cssproperty --drawer-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.
+ *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless your
+ *   theme sets a border.
  * @cssproperty --drawer-padding - Padding inside the panel.
- * @cssproperty --drawer-padding-block-start - Padding above the header, which is a step deeper than
- *   the other three so the first line clears the window's own edge. Falls back to
- *   `--drawer-padding`, so setting that alone governs all four sides.
+ * @cssproperty --drawer-padding-block-start - Padding above the header. It is one step larger than
+ *   the other three sides, so the first line clears the window's edge. Falls back to
+ *   `--drawer-padding`, so setting that alone sets all four sides.
  * @cssproperty --drawer-radius - Corner radius on the edges that face the page.
- * @cssproperty --drawer-scrim - The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
- * @cssproperty --drawer-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 --drawer-scrim - The tint over the page behind the drawer. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token.
+ * @cssproperty --drawer-shadow - Shadow under the panel. Follows `--helix-shadow-floating`. A
+ *   floating surface can sit over any content, so it has a shadow by default.
  * @cssproperty --drawer-size - Width or height of the panel.
  */
 export declare class HelixDrawer extends HelixHeadlessDrawer {
     /**
-     * Whether the panel is glass rather than opaque.
+     * Makes the panel translucent, as `frosted` or `glass`. When it is not set,
+     * the panel is opaque.
      *
      * **The same pair `Card` and `App Header` draw**, and one attribute for the
      * same reason: a backdrop filter behind an opaque ground filters nothing and a

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

@@ -1,12 +1,11 @@
 import { HelixHeadlessDrilldownItem } from '@fusion.dev/helix-headless/drilldown';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One row of a drill-down, which may hold a page of its own.
+ * @summary One row of a drill-down, which can open a page of its own.
  *
  * @description
- * A row is a full-width band rather than an inset pill, for the reason the
- * select's options are: it reaches both edges of the panel, so a highlight
- * lines up with the edge the eye is already following down the list.
+ * Each row is a full-width band that reaches both edges of the panel, like the
+ * options in a select, so the highlight lines up with the edge of the list.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,18 +1,15 @@
 import { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A stack of pages, one showing at a time, with a way back.
+ * @summary A stack of pages that shows one at a time, with a back button.
  *
  * @description
- * **The pages slide, and the direction is the point.** Both moves replace one
- * page with another, so with no motion a reader cannot tell whether they went
- * deeper or came back: the panel simply holds different words. Sliding in the
- * direction of travel says which happened, and it is most of the reason this is
- * a component rather than a menu with its trigger removed.
+ * Pages slide in the direction of travel, so you can tell whether you went
+ * deeper or came back. Without motion, the panel only shows different text.
  *
- * An animation rather than a transition, because there is nothing to transition
- * from: the page arriving was not in the DOM a frame ago. Under
- * `prefers-reduced-motion` it becomes the instant swap `Menu` does.
+ * The slide is a CSS animation, because the arriving page was not in the DOM on
+ * the previous frame, so there is nothing to transition from. Under
+ * `prefers-reduced-motion` the pages swap instantly, as they do in `Menu`.
  *
  * @since 0.1.0
  * @status stable

package/dist/element-events.generated.js

@@ -105,13 +105,20 @@ registerElementEvents({
         'helix-map-cluster',
         'helix-map-pan',
         'helix-map-part-change',
+        'helix-map-rotate',
+        'helix-map-tilt',
         'helix-map-zoom',
     ],
     'helix-map-area': ['helix-map-part-change'],
+    'helix-map-buildings': ['helix-map-part-change'],
+    'helix-map-contours': ['helix-map-part-change'],
+    'helix-map-landcover': ['helix-map-part-change'],
     'helix-map-marker': ['helix-map-cluster', 'helix-map-part-change'],
     'helix-map-points': ['helix-activate', 'helix-map-cluster', 'helix-map-part-change'],
     'helix-map-position': ['helix-map-part-change'],
+    'helix-map-raster': ['helix-map-part-change'],
     'helix-map-route': ['helix-map-part-change'],
+    'helix-map-terrain': ['helix-map-part-change'],
     'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-menu-item': ['helix-select'],

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

@@ -1,12 +1,11 @@
 import { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary Says that a region has nothing in it, and what to do about it.
+ * @summary A message that a region has nothing in it, and the next step to take.
  *
  * @description
- * Centered and given room, because an empty view is the only thing on screen
- * and crowding it against the top edge makes the region look broken rather than
- * empty.
+ * Centered with space around it. An empty view is the only thing on screen, and
+ * pressed against the top edge it looks broken.
  *
  * @since 0.1.0
  * @status stable

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

@@ -3,22 +3,18 @@ import type { CSSResultGroup } from 'lit';
 import '../../icon/index.js';
 import '../../tag/index.js';
 /**
- * @summary A control for choosing files, by pointer or by dropping them on it.
+ * @summary A field for choosing files from a picker or by dropping them on it.
  *
  * @description
- * The field is a box rather than a line, because nothing is typed into it: its
- * height is not a line of text, and what a reader aims at is the whole area. The
- * border is dashed for the same reason a drop target usually is, which is the
- * only affordance one has before anything is being dragged.
+ * The field is a box, because nothing is typed into it and the whole area is
+ * the target. The dashed border marks it as a drop target before anything is
+ * dragged.
  *
- * The native input is kept and laid over the field at zero opacity rather than
- * hidden, so a click anywhere on the box lands on the input itself and opens the
- * picker. Hiding it with `display: none` would take it out of the tab order and
- * out of the form, and a script clicking a hidden input is the same thing with
- * more moving parts.
+ * The native input is laid over the field at zero opacity, so a click anywhere
+ * on the box lands on the input and opens the picker. `display: none` would
+ * remove the input from the tab order and from the form.
  *
- * The focus ring is drawn on the field, because the control it belongs to is
- * invisible.
+ * The focus ring is drawn on the field, because the input is invisible.
  *
  * @since 0.1.0
  * @status stable

package/dist/filter-input/chip/filter-chip.d.ts

@@ -1,16 +1,17 @@
 import { HelixHeadlessFilterChip } from '@fusion.dev/helix-headless/filter-input';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One filter in force: a field, how it is compared, and to what.
+ * @summary One active filter: a field, a comparison, and the values it is compared to.
  *
  * @description
- * Three segments and a control, drawn so the reader's eye lands on the values.
- * The field is the quietest of the three because it is the part they already
- * know, having picked it; the values carry the weight, because a bar of these is
- * scanned for what the filters are set to rather than for what they are on.
+ * Draws three segments and a remove control, with the values most prominent.
+ * The field is the quietest segment, because the user picked it. The values
+ * carry the most weight, because a row of chips is scanned for what each filter
+ * is set to.
  *
- * The operator segment is drawn only where there is one, which is what keeps the
- * common chip free of jargon. See the headless note, which records the rule.
+ * The operator segment is drawn only when there is an operator, so the common
+ * chip shows only the field and the values. The headless element documents the
+ * rule.
  *
  * @since 0.23.0
  * @status stable
@@ -18,9 +19,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases FilterToken, FacetChip
  * @documentation https://fusion.dev/helix/components/filter-input
  *
- * @cssproperty --filter-input-chip-background-color - Fill behind the chip.
- * @cssproperty --filter-input-chip-border-color - Color of the edge.
- * @cssproperty --filter-input-chip-radius - Corner radius of the chip.
+ * @cssproperty --filter-input-chip-background-color - The fill behind the chip.
+ * @cssproperty --filter-input-chip-border-color - The color of the chip's border.
+ * @cssproperty --filter-input-chip-radius - The corner radius of the chip.
  */
 export declare class HelixFilterChip extends HelixHeadlessFilterChip {
     static styles: CSSResultGroup;

package/dist/filter-input/field/filter-field.d.ts

@@ -1,17 +1,16 @@
 import { HelixHeadlessFilterField } from '@fusion.dev/helix-headless/filter-input';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary One thing a set can be filtered by, and how.
+ * @summary A field that a filter can apply to, with its comparisons and values.
  *
  * @description
- * A declaration rather than a control: it renders nothing, and the filter input
- * reads it to build its menu. The headless note carries the model.
+ * Declares a filter field. It renders nothing, and the filter input reads it to
+ * build its menu. The headless element documents the model.
  *
- * The stylesheet here is one rule and it is a guard rather than a look. Written
- * where it belongs, inside a filter input, this is never assigned to a slot and
- * so is never rendered at all. Written anywhere else it would be an empty inline
- * box, which is nothing to look at and still a flex item a `gap` would space
- * away from its neighbors.
+ * The stylesheet has one rule, `display: none`, as a guard. Inside a filter
+ * input, the element is never assigned to a slot and never renders. Anywhere
+ * else, it would be an empty inline box that still counts as a flex item and
+ * gets `gap` spacing.
  *
  * @since 0.23.0
  * @status stable

package/dist/filter-input/menu/filter-menu.d.ts

@@ -3,16 +3,15 @@ import type { CSSResultGroup } from 'lit';
 import '../../divider/index.js';
 import '../../menu/index.js';
 /**
- * @summary The control that builds a filter: pick a field, tick its values.
+ * @summary A menu for building a filter by picking a field and checking its values.
  *
  * @description
- * Everything drawn here is drawn by something else: the trigger is the
- * consumer's, and the pages are `Menu`'s, whose reserved tick column is what
- * keeps a page of ticked and unticked values on one edge. This element's own
- * stylesheet is one rule, and it is `display: contents`.
+ * Draws nothing of its own. The trigger is yours, and the pages are `Menu`'s,
+ * whose reserved tick column keeps ticked and unticked values aligned. The
+ * element's stylesheet has one rule: `display: contents`.
  *
- * The headless note carries the model, including why a tick is a filter
- * immediately and why the operator is decided here rather than on the chip.
+ * The headless element documents the model, including why a tick applies a
+ * filter immediately and why the menu decides the operator.
  *
  * @since 0.25.0
  * @status stable
@@ -20,7 +19,7 @@ import '../../menu/index.js';
  * @aliases FacetPicker, FilterBuilder
  * @documentation https://fusion.dev/helix/components/filter-input
  *
- * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: refusing it takes the decision and nothing moves.
+ * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: call `preventDefault()` to keep the previous values.
  */
 export declare class HelixFilterMenu extends HelixHeadlessFilterMenu {
     static tier: string;

package/dist/filter-input/operator/filter-operator.d.ts

@@ -4,12 +4,12 @@ import type { CSSResultGroup } from 'lit';
  * @summary One way a filter can compare a field to its values.
  *
  * @description
- * A declaration rather than a control: it renders nothing, and the field it is
- * written under reads it. The headless note carries the model, including why the
- * words are the consumer's and never this element's.
+ * Declares an operator. It renders nothing, and the field it is written under
+ * reads it. The headless element documents the model, including why the
+ * operator words are yours.
  *
- * The stylesheet is one rule and it is a guard rather than a look, for the
- * reason `FilterField`'s note gives.
+ * The stylesheet has one rule, `display: none`, as a guard, for the reason
+ * given on `FilterField`.
  *
  * @since 0.23.0
  * @status stable

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

@@ -3,27 +3,24 @@ import type { CSSResultGroup } from 'lit';
 import '../../icon/index.js';
 import '../../option/index.js';
 /**
- * @summary A field that narrows something else, beside what is already narrowing it.
+ * @summary A text field for filters, with the active filters shown in it as tokens.
  *
  * @description
- * The frame is the field rather than the input, so the tokens sit inside the
- * same box as the text and the focus ring is drawn once around the whole
- * control. It grows down a line at a time as tokens are added, which is the
- * arrangement Combobox takes when it is holding a selection.
+ * The frame is drawn around the field, so the tokens sit in the same box as the
+ * text and one focus ring surrounds the whole control. The field grows one line
+ * at a time as tokens are added, as Combobox does when it holds a selection.
  *
- * **The tokens are the consumer's own elements**, so the only thing said about
- * them here is to keep their size and not run past the field. A `Tag` slotted
- * into `tags` already looks like one; anything else looks like whatever it is.
+ * Tokens are your own elements, so the only rule for them keeps their size and
+ * stops them running past the field. A `Tag` slotted into `tags` already looks
+ * like a token.
  *
- * **The suggestion panel is this element's own box, not a listbox's.** Combobox
- * puts a `helix-listbox` in its panel because the options there are a selection
- * it owns; these are the consumer's suggestions, so the panel is a plain
- * `role="listbox"` region and the options pass their own `helix-select`
- * straight through it. That is why this surface scrolls where Combobox's does
- * not: there is no list inside to do it.
+ * The suggestion panel is this element's own box with `role="listbox"`, and the
+ * options pass their own `helix-select` through it. Combobox puts a
+ * `helix-listbox` in its panel, which scrolls, because Combobox owns the
+ * selection. This panel has no list inside it, so the panel itself scrolls.
  *
- * Height comes from the region, like every other control: `data-density` on
- * whatever holds it, not a `size` here.
+ * Height comes from the region, like every other control. Set `data-density` on
+ * a container. The element has no `size`.
  *
  * @since 0.1.0
  * @status stable
@@ -31,17 +28,18 @@ import '../../option/index.js';
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://fusion.dev/helix/components/filter-input
  *
- * @cssproperty --filter-input-action-padding-inline - Space either side of a slotted control's label. Follows `--helix-space-xs`, which is what a token uses.
- * @cssproperty --filter-input-action-size - Height of a control slotted at either end. Follows `--helix-size-tag`, so it matches the tokens beside it rather than the field around them.
- * @cssproperty --filter-input-background-color - Fill behind the field.
- * @cssproperty --filter-input-border-color - Color of the suggestion panel's edge.
- * @cssproperty --filter-input-border-width - Width of that edge. Follows `--helix-border-floating`.
- * @cssproperty --filter-input-control-size - Smallest the text keeps as tokens fill the line, before it wraps to its own.
- * @cssproperty --filter-input-lead-border-color - The seam between the leading box and the text.
- * @cssproperty --filter-input-panel-size - Width of the suggestion panel. Follows the field by default.
- * @cssproperty --filter-input-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 --filter-input-size - Height of the field with nothing in it, which it grows from.
+ * @cssproperty --filter-input-action-padding-inline - The space on either side of a slotted control's label. It follows `--helix-space-xs`, the space a token uses.
+ * @cssproperty --filter-input-action-size - The height of a control slotted at either end. It follows `--helix-size-tag`, so it matches the height of the tokens beside it.
+ * @cssproperty --filter-input-background-color - The fill behind the field.
+ * @cssproperty --filter-input-border-color - The color of the suggestion panel's border.
+ * @cssproperty --filter-input-border-width - The width of the suggestion panel's border. It follows `--helix-border-floating`.
+ * @cssproperty --filter-input-control-size - The smallest width the text keeps as tokens fill the line. Below it, the text wraps to its own line.
+ * @cssproperty --filter-input-lead-border-color - The color of the line between the leading box and the text.
+ * @cssproperty --filter-input-panel-size - The width of the suggestion panel. It matches the field by default.
+ * @cssproperty --filter-input-shadow - The shadow under the panel. It follows
+ *   `--helix-shadow-floating`. The panel can sit over any content, so it has a
+ *   shadow by default.
+ * @cssproperty --filter-input-size - The height of the empty field. The field grows from this height.
  */
 export declare class HelixFilterInput extends HelixHeadlessFilterInput {
     static styles: CSSResultGroup;

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

@@ -1,22 +1,17 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary Lays children out in a row or a column.
+ * @summary A layout that places its children in a row or a column.
  *
  * @description
- * The host is the flex container itself and the only child is a slot, so the
- * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
- * replaces.
+ * The host is the flex container and its only child is a slot, so
+ * `<helix-flex>` adds no box beyond the `<div>` it replaces.
  *
- * There is no separate Stack. A stack is this with `direction="column"`, and a
- * second element whose whole definition is one default of the first is a name
- * to learn rather than a capability to gain.
+ * There is no separate Stack component. For a stack, set `direction="column"`.
  *
- * Gap takes a space token name rather than a length, so spacing stays on the
- * scale. A layout that can say `gap="13px"` is one that will.
+ * `gap` takes a space token name, so spacing stays on the scale.
  *
- * Presentation only, so there is no headless tier: the split exists to keep
- * behavior separate from styling, and this is entirely styling.
+ * Flex is presentation only, so it has no headless tier.
  *
  * @since 0.1.0
  * @status stable
@@ -28,7 +23,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  */
 export declare class HelixFlex extends HelixElement {
     /**
-     * Alignment across the direction, which is `align-items`.
+     * How items align across the direction, set as `align-items`.
      *
      * **Named for the CSS property it sets, because it is that property.** A flex
      * container is the one place where the box-alignment words are already the
@@ -55,11 +50,11 @@ export declare class HelixFlex extends HelixElement {
      */
     gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
-     * Flows with surrounding text instead of taking the full width.
+     * Flows with the surrounding text, taking only the width of its items.
      */
     inline: boolean;
     /**
-     * Distribution along the direction, which is `justify-content`.
+     * How items are spread along the direction, set as `justify-content`.
      *
      * Named for the property it sets, the way `alignItems` is. `between` and
      * `around` drop the `space-` prefix and nothing else does, because those two

package/dist/format-date/root/format-date-root.d.ts

@@ -1,16 +1,13 @@
 import { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
 import type { CSSResultGroup } from 'lit';
 /**
- * @summary A timestamp, written the way the reader's locale writes one.
+ * @summary A timestamp, formatted for the user's locale.
  *
  * @description
- * The base tier does the reading; this adds the one thing a design system has to
- * say about it. A timestamp takes the family, size and color of the text around
- * it, so almost nothing here is a decision. The exception is figures: an elapsed
- * reading counts up under the reader, and proportional digits move the trailing
- * edge as it does, which in a feed is a whole column shifting whenever any row
- * in it ticks over. `tabular-nums` in that mode and not in the other, because a
- * date is written once and should sit in the text like the text.
+ * Takes the font family, size, and color of the surrounding text. In `elapsed`
+ * mode it uses `tabular-nums`, so a column of readings in a feed does not shift
+ * as they count up. A date keeps proportional figures, so it sits in the text
+ * like the words around it.
  *
  * @since 0.1.0
  * @status stable

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

@@ -1,15 +1,17 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
- * @summary Lays children out on a grid.
+ * @summary A layout that places its children on a grid.
  *
  * @description
- * Two ways to declare columns, and only two. `columns` is a fixed count;
- * `min` fills as many equal columns as fit above that width, which is a
- * responsive layout with no breakpoint to maintain. Setting `min` wins, because
- * a fixed count that also reflows is two intentions in one element.
+ * Set columns in one of two ways:
  *
- * Presentation only, so there is no headless tier.
+ * - `columns` sets a fixed count.
+ * - `min` fits as many equal columns as there is room for at that width, so the
+ *   layout responds with no breakpoints to maintain.
+ *
+ * If you set both, `min` wins. The grid is presentation only, so there is no
+ * headless tier.
  *
  * @since 0.1.0
  * @status stable
@@ -19,11 +21,11 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @slot - The items to lay out.
  *
- * @cssproperty --grid-columns - An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
+ * @cssproperty --grid-columns - An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set.
  */
 export declare class HelixGrid extends HelixElement {
     /**
-     * Alignment of each cell within its row, which is `align-items`.
+     * How each cell aligns within its row. Sets `align-items`.
      *
      * **Named for the CSS property it sets**, the way `Flex` is, and the same
      * property on a grid: it places every cell in its row's track rather than
@@ -39,15 +41,15 @@ export declare class HelixGrid extends HelixElement {
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch';
     /**
-     * Fixed number of equal columns.
+     * A fixed number of equal columns.
      */
     columns?: number;
     /**
-     * Space between cells, named on the space scale.
+     * The space between cells, as a step on the space scale.
      */
     gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
-     * Minimum column width, filling as many as fit.
+     * The minimum column width. The grid fits as many columns as the width allows.
      *
      * Takes precedence over `columns`: a grid that both fixes a count and reflows
      * is two intentions in one element.