@fusion.dev/helix 0.0.0-dev → 0.0.2

package/dist/avatar/group/avatar-group.css.js

@@ -1,4 +1,4 @@
-// Generated from src/avatar/group/avatar-group.css by `bun run styles`. Do not edit.
+// Generated from src/avatar/group/avatar-group.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_avatar-group-ring: var(--avatar-group-ring-color, var(--helix-color-background));

package/dist/avatar/root/avatar-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/avatar/root/avatar-root.css by `bun run styles`. Do not edit.
+// Generated from src/avatar/root/avatar-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_avatar-size: var(--avatar-size, var(--helix-size-avatar));

package/dist/badge/root/badge-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/badge/root/badge-root.css by `bun run styles`. Do not edit.
+// Generated from src/badge/root/badge-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline-flex;
@@ -63,12 +63,6 @@ opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-accelerate);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-transition: none;
-}
-}
-
 :host([tone="danger"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-danger-surface));
 }
@@ -78,12 +72,6 @@ background-color: var(--badge-background-color, var(--helix-color-surface-raised
 color: var(--helix-color-foreground);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"][data-blank] {
-transition: none;
-}
-}
-
 @media print {
 :host {
 box-shadow: none;

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

@@ -22,11 +22,10 @@ export declare class HelixBadge extends HelixHeadlessBadge {
     /**
      * What the mark means.
      *
-     * **The docstring said "how much attention the mark asks for", which is the
-     * emphasis question, and the values answer a different one.** `danger` and
-     * `neutral` are meanings: the stylesheet picks a fill by what the count *is*,
-     * not by how loudly it is drawn. Filed under `appearance` it read as a
-     * treatment, which is the confusion `check:axes` exists to stop.
+     * `danger` and `neutral` are meanings, not treatments: the stylesheet picks a
+     * fill by what the count *is*, not by how loudly it is drawn. Filed under
+     * `appearance` it would read as a treatment, which is the confusion the split
+     * exists to stop.
      */
     tone?: 'danger' | 'neutral';
     static styles: CSSResultGroup;

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/bar-chart/root/bar-chart-root.css by `bun run styles`. Do not edit.
+// Generated from src/bar-chart/root/bar-chart-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: grid;
@@ -232,12 +232,6 @@ opacity: 0.45;
 transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="group"] {
-transition: none;
-}
-}
-
 [part="bar"] {
 transition:
 height var(--helix-duration-normal) var(--helix-easing-decelerate),
@@ -257,12 +251,6 @@ width: 0;
 }
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="bar"] {
-transition: none;
-}
-}
-
 [part="plot"] {
 cursor: crosshair;
 }

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

@@ -32,20 +32,42 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      * **The styled tier, so the tooltip this renders is the styled one.**
      *
      * `tag()` builds a child's tag name from this prefix, and the base declares
-     * `helix-headless-`. Every other styled component that renders a child
-     * overrides it; the three charts that draw a tooltip did not, so a
-     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
-     * root: the behavior with none of the surface. What showed was the browser's
-     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
-     * padding and the page's font size, which is why the reading bubble looked
-     * like no other tooltip on the site.
-     *
-     * Measured before the fix: the chart's bubble computed
-     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
-     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
-     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
+     * `helix-headless-`. Without this override the chart puts a
+     * `helix-headless-tooltip` in its shadow root: the behavior with none of the
+     * surface, so the reading bubble falls back to the browser's popover defaults,
+     * a white 1.5px border, square corners, `0.25em` of padding and the page's
+     * font size, and looks like no other tooltip on the site.
      */
     static tier: string;
+    /**
+     * How much ink the columns claim.
+     *
+     * The chart's treatment, which every series takes unless `outlined` or
+     * `subtle` names it. `outlined` is the mark as its edge alone, `subtle` a wash
+     * of the series color with that edge on it, and absent is the filled column,
+     * per the rule that a reflected property takes no default.
+     *
+     * **It composes with `material` rather than competing with it.** Emphasis
+     * decides what is drawn and material decides how much of it comes through, so
+     * `glass` thins whatever emphasis put there: the fill on a solid column, the
+     * stroke on an outlined one. Without that the corner is inert, `glass` setting
+     * a fill opacity on a mark whose fill is `none`, and a combination that
+     * silently does nothing is the worst shape this can take.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * Which series are glass rather than solid, by name.
+     *
+     * Matched the way `outlined` is, against the column headings the table gives.
+     *
+     * **Per series for the reason `emphasis` is.** A
+     * chart-wide material puts every column in the same substance, which is right
+     * when the whole chart is joining the page's language and wrong the moment one
+     * series is a different kind of fact from the others. The two axes take the
+     * same shape because they answer the same question about the same thing: what
+     * is *this series* made of, and how much ink does *this series* claim.
+     */
+    glass?: string;
     /**
      * What the columns are made of.
      *
@@ -57,11 +79,10 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      * chart in the same language as a glass header rather than leaving it the one
      * opaque slab on the page.
      *
-     * **`gradient` was here and is `wash` now, which is #156.** The two set
+     * **`gradient` belongs to `wash` and never here (#156).** The two set
      * different properties, `fill-opacity` against `fill`, and a chart forced into
      * both renders as a translucent gradient that is distinct from either: one
-     * enum was holding two independent things, which is the mistake `Card`'s own
-     * doc warns about arriving on the component that borrowed the word.
+     * enum holding two independent things.
      *
      * Absent is solid, per the rule that a reflected property takes no default,
      * so the stylesheet describes only the departure. The strength is the
@@ -82,53 +103,9 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      *
      * **`transparent` is where this one stops.** A mark with no ink is not a
      * material choice, it is an absent series, and a chart says that by not
-     * having the datum rather than by painting it invisibly. See 270.
+     * having the datum rather than by painting it invisibly.
      */
     material?: 'frosted' | 'glass';
-    /**
-     * How a column's fill is distributed across it.
-     *
-     * `gradient` fades each column toward its base, into the wash the headless
-     * tier draws whether or not anything points at it.
-     *
-     * **A chart-domain axis and deliberately not a library one.** It lives on this
-     * family alone, and here it is a way of encoding data rather than a way of
-     * expressing a theme: promoted to the registry it would put an attribute on
-     * eighty-eight components that means nothing on eighty-seven. `wash` because
-     * that is what the tier below already calls it, in `--chart-bar-wash` and in
-     * the `bar-wash-start` and `bar-wash-end` stops.
-     */
-    wash?: 'gradient';
-    /**
-     * Which series are glass rather than solid, by name.
-     *
-     * Matched the way `outlined` is, against the column headings the table gives.
-     *
-     * **Per series for the reason `emphasis` is, arrived at one axis later.** A
-     * chart-wide material puts every column in the same substance, which is right
-     * when the whole chart is joining the page's language and wrong the moment one
-     * series is a different kind of fact from the others. The two axes take the
-     * same shape because they answer the same question about the same thing: what
-     * is *this series* made of, and how much ink does *this series* claim.
-     */
-    glass?: string;
-    /**
-     * How much ink the columns claim.
-     *
-     * The chart's treatment, which every series takes unless `outlined` or
-     * `subtle` names it. `outlined` is the mark as its edge alone, `subtle` a wash
-     * of the series color with that edge on it, and absent is the filled column,
-     * per the rule that a reflected property takes no default.
-     *
-     * **It composes with `material` rather than competing with it.** Emphasis
-     * decides what is drawn and material decides how much of it comes through, so
-     * `glass` thins whatever emphasis put there: the fill on a solid column, the
-     * stroke on an outlined one. That corner was inert when the two were first
-     * put side by side, `glass` setting a fill opacity on a mark whose fill is
-     * `none`, and a combination that silently does nothing is the trap
-     * `--card-backdrop` was for the one commit it shipped alone.
-     */
-    emphasis?: 'outlined' | 'solid' | 'subtle';
     /**
      * Which series are drawn as an outline rather than a fill, by name.
      *
@@ -153,6 +130,20 @@ export declare class HelixBarChart extends HelixHeadlessBarChart {
      * Matched as `outlined` is.
      */
     subtle?: string;
+    /**
+     * How a column's fill is distributed across it.
+     *
+     * `gradient` fades each column toward its base, into the wash the headless
+     * tier draws whether or not anything points at it.
+     *
+     * **A chart-domain axis and deliberately not a library one.** It lives on this
+     * family alone, and here it is a way of encoding data rather than a way of
+     * expressing a theme: promoted to the registry it would put an attribute on
+     * eighty-eight components that means nothing on eighty-seven. `wash` because
+     * that is what the tier below already calls it, in `--chart-bar-wash` and in
+     * the `bar-wash-start` and `bar-wash-end` stops.
+     */
+    wash?: 'gradient';
     /**
      * Marks each column with the treatments its series asked for.
      *

package/dist/bar-chart/root/bar-chart-root.js

@@ -41,18 +41,11 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
      * **The styled tier, so the tooltip this renders is the styled one.**
      *
      * `tag()` builds a child's tag name from this prefix, and the base declares
-     * `helix-headless-`. Every other styled component that renders a child
-     * overrides it; the three charts that draw a tooltip did not, so a
-     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
-     * root: the behavior with none of the surface. What showed was the browser's
-     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
-     * padding and the page's font size, which is why the reading bubble looked
-     * like no other tooltip on the site.
-     *
-     * Measured before the fix: the chart's bubble computed
-     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
-     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
-     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
+     * `helix-headless-`. Without this override the chart puts a
+     * `helix-headless-tooltip` in its shadow root: the behavior with none of the
+     * surface, so the reading bubble falls back to the browser's popover defaults,
+     * a white 1.5px border, square corners, `0.25em` of padding and the page's
+     * font size, and looks like no other tooltip on the site.
      */
     static { this.tier = 'helix-'; }
     /**
@@ -100,22 +93,22 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
 };
 __decorate([
     property({ reflect: true })
-], HelixBarChart.prototype, "material", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixBarChart.prototype, "wash", void 0);
+], HelixBarChart.prototype, "emphasis", void 0);
 __decorate([
     property()
 ], HelixBarChart.prototype, "glass", void 0);
 __decorate([
     property({ reflect: true })
-], HelixBarChart.prototype, "emphasis", void 0);
+], HelixBarChart.prototype, "material", void 0);
 __decorate([
     property()
 ], HelixBarChart.prototype, "outlined", void 0);
 __decorate([
     property()
 ], HelixBarChart.prototype, "subtle", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixBarChart.prototype, "wash", void 0);
 HelixBarChart = __decorate([
     customElement('helix-bar-chart')
 ], HelixBarChart);

package/dist/blockquote/root/blockquote-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/blockquote/root/blockquote-root.css by `bun run styles`. Do not edit.
+// Generated from src/blockquote/root/blockquote-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -1,4 +1,4 @@
-// Generated from src/breadcrumbs/breadcrumb/breadcrumb.css by `bun run styles`. Do not edit.
+// Generated from src/breadcrumbs/breadcrumb/breadcrumb.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -60,12 +60,6 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-@media (prefers-reduced-motion: reduce) {
-::slotted(a) {
-transition: none;
-}
-}
-
 :host {
 font-weight: var(--helix-weight-medium);
 }

package/dist/breadcrumbs/root/breadcrumbs-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/breadcrumbs/root/breadcrumbs-root.css by `bun run styles`. Do not edit.
+// Generated from src/breadcrumbs/root/breadcrumbs-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/button/root/button-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/button/root/button-root.css by `bun run styles`. Do not edit.
+// Generated from src/button/root/button-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline-flex;
@@ -177,12 +177,6 @@ opacity: 0.5;
 --icon-size: 1.15em;
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="button"] {
-transition: none;
-}
-}
-
 @media print {
 :host {
 display: none;

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

@@ -9,9 +9,9 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../mixins/mi
  * real button are indistinguishable to a reader. There are no sizes: a control
  * takes its height from the region it is in, through `data-density`, which is
  * the one size axis in the library and the reason a row of controls cannot come
- * out ragged. The focus
- * ring is declared here rather than inherited, because the base layer's
- * `:focus-visible` rule is a light-DOM rule and stops at the shadow boundary.
+ * out ragged. The focus ring is declared here rather than inherited, because the
+ * base layer's `:focus-visible` rule is a light-DOM rule and stops at the shadow
+ * boundary.
  *
  * @since 0.1.0
  * @status stable
@@ -50,24 +50,17 @@ export declare class HelixButton extends HelixButton_base {
      * - `full` fills the container, for a single action at the foot of a form or
      *   a card, and on a phone where a control is a target before it is a label.
      *
-     * **This was `fill`, and the name had to disclaim itself.** The paragraph here
-     * opened "Width and not weight", which is a sentence a name should not need:
-     * `emphasis` on this same element is documented as "How filled it is drawn",
-     * so a button carried a property called `fill` beside a property about being
-     * filled, meaning different things. `separation="filled"` and
-     * `ThemeIntent.separation`'s `fill` mechanism both mean a surface's own
-     * color, and every chart in the library writes `fill` for paint, which left
-     * this the only use of the word meaning geometry.
+     * **Not `fill`, and not `size`.** `fill` means a surface's own color
+     * everywhere else in the library, in `separation="filled"`, in
+     * `ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
+     * also mean geometry beside an `emphasis` documented as "How filled it is
+     * drawn". `size` fails the rule's own test, which is whether two of them
+     * sitting together could legitimately differ: two buttons can, because this is
+     * a width *policy* rather than a scale, and `standard` exists precisely to
+     * stop a row being ragged.
      *
-     * `Dialog` had already made the same move for the same reason, its
-     * `appearance` becoming `size` for saying how wide a panel is, "which its own
-     * description admitted in as many words". `size` is not available here,
-     * because that rule's test is whether two of them sitting together could
-     * legitimately differ, and two buttons do: this is a width *policy* rather
-     * than a scale, and `standard` exists precisely to stop a row being ragged.
-     *
-     * Width and not weight, still. `emphasis` says how much a button matters and
-     * this says how much room it takes, and the three are independent: a `ghost
+     * Width and not weight. `emphasis` says how much a button matters and this
+     * says how much room it takes, and the three are independent: a `ghost
      * standard` Cancel beside a `solid primary standard` Save is exactly the
      * pairing a dialog wants.
      *
@@ -78,11 +71,9 @@ export declare class HelixButton extends HelixButton_base {
      * <a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
      * ```
      *
-     * Both are one declaration in the base layer. They were not, and that was a
-     * real gap rather than a missing convenience: this class promises a link
-     * styled as a button and a real button are indistinguishable, and a dialog's
-     * button row is built on `standard`, so the one place the promise mattered
-     * most was the one place it did not hold.
+     * Both are one declaration in the base layer, and both are needed: this class
+     * promises a link styled as a button and a real button are indistinguishable,
+     * and a dialog's button row is built on `standard`.
      */
     width?: 'auto' | 'full' | 'standard';
     static styles: CSSResultGroup;

package/dist/button/root/button-root.js

@@ -17,9 +17,9 @@ import { styles } from './button-root.css.js';
  * real button are indistinguishable to a reader. There are no sizes: a control
  * takes its height from the region it is in, through `data-density`, which is
  * the one size axis in the library and the reason a row of controls cannot come
- * out ragged. The focus
- * ring is declared here rather than inherited, because the base layer's
- * `:focus-visible` rule is a light-DOM rule and stops at the shadow boundary.
+ * out ragged. The focus ring is declared here rather than inherited, because the
+ * base layer's `:focus-visible` rule is a light-DOM rule and stops at the shadow
+ * boundary.
  *
  * @since 0.1.0
  * @status stable

package/dist/button-group/root/button-group-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/button-group/root/button-group-root.css by `bun run styles`. Do not edit.
+// Generated from src/button-group/root/button-group-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline-flex;

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

@@ -29,15 +29,13 @@ export declare class HelixButtonGroup extends HelixHeadlessButtonGroup {
     /**
      * Whether the buttons are one bar or a spaced row.
      *
-     * Joined by default, which is what a button group has always meant here: one
-     * control made of parts, sharing borders, reading as a segmented bar.
+     * Joined by default: one control made of parts, sharing borders, reading as a
+     * segmented bar.
      *
      * `spaced` is the same set with air between them, for a row of related but
-     * separate actions. It exists because the semantics and the joining were one
-     * thing and should not have been: `role="group"` and a shared name are what
-     * make a set of buttons a set, and a consumer who wanted that *and* ordinary
-     * spacing had to choose. `helix-flex` gives the spacing and no group; this
-     * gave the group and no choice about the spacing.
+     * separate actions. The semantics and the joining are separate questions:
+     * `role="group"` and a shared name are what make a set of buttons a set, and
+     * `helix-flex` gives the spacing without the group.
      */
     variant?: 'joined' | 'spaced';
 }

package/dist/callout/root/callout-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/callout/root/callout-root.css by `bun run styles`. Do not edit.
+// Generated from src/callout/root/callout-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 

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

@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary Sets a passage apart as information, a warning, or an error.
  *
  * @description
- * Tinted from the severity's status color with `color-mix`, and marked with a
- * bar on the inline start so the severity survives being read in grayscale or
- * by anyone who does not distinguish the hues.
+ * Tinted from the tone's status color with `color-mix`, and marked with a bar
+ * on the inline start so the tone survives being read in grayscale or by anyone
+ * who does not distinguish the hues.
  *
  * There is no treatment axis here. `tone` carries the meaning and lives on the
  * headless tier; this tier only decides what that meaning looks like.
@@ -18,7 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://helix.fusion.dev/components/callout
  *
  * @slot - The callout's content.
- * @slot icon - Replaces the icon chosen by `severity`.
+ * @slot icon - Replaces the icon chosen by `tone`.
  *
  * @csspart content - The content region.
  * @csspart icon - The icon region.

package/dist/callout/root/callout-root.js

@@ -11,9 +11,9 @@ import { styles } from './callout-root.css.js';
  * @summary Sets a passage apart as information, a warning, or an error.
  *
  * @description
- * Tinted from the severity's status color with `color-mix`, and marked with a
- * bar on the inline start so the severity survives being read in grayscale or
- * by anyone who does not distinguish the hues.
+ * Tinted from the tone's status color with `color-mix`, and marked with a bar
+ * on the inline start so the tone survives being read in grayscale or by anyone
+ * who does not distinguish the hues.
  *
  * There is no treatment axis here. `tone` carries the meaning and lives on the
  * headless tier; this tier only decides what that meaning looks like.
@@ -25,7 +25,7 @@ import { styles } from './callout-root.css.js';
  * @documentation https://helix.fusion.dev/components/callout
  *
  * @slot - The callout's content.
- * @slot icon - Replaces the icon chosen by `severity`.
+ * @slot icon - Replaces the icon chosen by `tone`.
  *
  * @csspart content - The content region.
  * @csspart icon - The icon region.

package/dist/card/root/card-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/card/root/card-root.css by `bun run styles`. Do not edit.
+// Generated from src/card/root/card-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 background-color: var(--card-background-color, var(--helix-color-surface));
@@ -28,7 +28,7 @@ box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 :host([separation="elevated"]) {
-border-color: transparent;
+border-color: light-dark(transparent, var(--helix-color-border));
 
 --card-shadow: var(--helix-shadow-md);
 }