@fusion.dev/helix 0.0.0-dev → 0.0.2

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

@@ -29,15 +29,12 @@ export declare class HelixToggleGroup extends HelixHeadlessToggleGroup {
     /**
      * How the group separates itself from the page.
      *
-     * **Classified by what it does rather than by what its values were called.**
-     * These were `filled` and `plain` under `appearance`, and `filled` reads like
-     * a fill weight, which is how it came to be listed as emphasis when the axes
-     * were first sorted. The stylesheet settles it: what `plain` drops is the
-     * background *and* the border, so this is where the group ends, not how much
-     * ink it claims. `outlined` because the frame is a border over the group's
-     * own ground, exactly as a Card's is; the track's sunken fill stays either
-     * way, being a groove for the thumb to sit in rather than a way of being
-     * seen.
+     * Separation rather than emphasis, because what `plain` drops is the
+     * background *and* the border: the question is where the group ends, not how
+     * much ink it claims. `outlined` because the frame is a border over the
+     * group's own ground, exactly as a Card's is; the track's sunken fill stays
+     * either way, being a groove for the thumb to sit in rather than a way of
+     * being seen.
      */
     separation?: 'outlined' | 'plain';
     static styles: CSSResultGroup;

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

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

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

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

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

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

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

@@ -35,9 +35,9 @@ export declare class HelixTooltip extends HelixHeadlessTooltip {
      * has to do.** A card is already the page's surface, so glass swaps one ground
      * for another; this one starts inverse, and `--helix-material-translucent` is
      * the page's ground, so taking it without the foreground would put light ink on
-     * a light bubble. An inverse bubble is told from the page by being its
-     * opposite and a glass one has to be told from what is behind it, which is why
-     * the border arrives with the material rather than being there all along.
+     * a light bubble. The border arrives with the material rather than being there
+     * all along, because a glass bubble has to be told from what is behind it while
+     * an inverse one is told from the page by being its opposite.
      *
      * The strength is the theme's: `--helix-material-translucent` and
      * `--helix-material-backdrop` are what the policy moves.
@@ -47,10 +47,9 @@ export declare class HelixTooltip extends HelixHeadlessTooltip {
      * it ends, which is `separation`, and a bubble in the top layer with a point on
      * it has one answer to that. A quiet tooltip is a tooltip that is not shown.
      *
-     * **`transparent` is where this one stops, and that is the statement 270
-     * asks for rather than an omission.** A panel that floats over arbitrary page
-     * content is only readable because it has a ground; dropping it does not make
-     * a lighter tooltip, it makes an unreadable one. `frosted` and `glass` are the
+     * **No `transparent`, deliberately.** A bubble floating over arbitrary page
+     * content is only readable because it has a ground; dropping it makes an
+     * unreadable tooltip rather than a lighter one. `frosted` and `glass` are the
      * two honest points here.
      */
     material?: 'frosted' | 'glass';

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

@@ -1,4 +1,4 @@
-// Generated from src/tour/root/tour-root.css by `bun run styles`. Do not edit.
+// Generated from src/tour/root/tour-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;
@@ -17,12 +17,6 @@ inline-size var(--helix-duration-normal) var(--helix-easing-standard);
 z-index: var(--helix-layer-overlay);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="spotlight"] {
-transition: none;
-}
-}
-
 @media print {
 :host {
 display: none;

package/dist/tour/stop/tour-stop.css.js

@@ -1,4 +1,4 @@
-// Generated from src/tour/stop/tour-stop.css by `bun run styles`. Do not edit.
+// Generated from src/tour/stop/tour-stop.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: contents;
@@ -7,7 +7,7 @@ display: contents;
 [part="bubble"] {
 background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
 border: var(--tour-border-width, var(--helix-border-thin)) solid var(--helix-color-border);
-border-radius: var(--helix-radii-md);
+border-radius: var(--helix-radii-sm);
 box-shadow: var(--tour-shadow, var(--helix-shadow-floating));
 box-sizing: border-box;
 color: var(--helix-color-foreground);

package/dist/tree/item/tree-item.css.js

@@ -1,4 +1,4 @@
-// Generated from src/tree/item/tree-item.css by `bun run styles`. Do not edit.
+// Generated from src/tree/item/tree-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -153,22 +153,6 @@ grid-template-rows: 0fr;
 }
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="group"] {
-transition: none;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="row"] {
-transition: none;
-}
-
-[part="toggle"] {
-transition: none;
-}
-}
-
 [part="toggle"] {
 
 align-self: center;

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

@@ -1,4 +1,4 @@
-// Generated from src/tree/root/tree-root.css by `bun run styles`. Do not edit.
+// Generated from src/tree/root/tree-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/tree/root/tree-root.d.ts

@@ -33,8 +33,6 @@ export declare class HelixTree extends HelixHeadlessTree {
      *
      * Styled tier, because it is presentation and nothing else: it moves paint
      * and leaves the markup, the ARIA and the reading order exactly as they were.
-     * It was written on the base class first, which the tier rule forbids for
-     * precisely this kind of property.
      *
      * On the tree rather than on the item, because it is a fact about the list. A
      * navigation puts every chevron on the same side, and a per-item version

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

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

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

@@ -14,13 +14,10 @@ import '../../icon/index.js';
  * reads and the judgment is a gloss on it.
  *
  * **No visual axis applies here, and that is the answer rather than a gap.**
- * This family carries `@groups charts`, so `check:axes` reports it beside eight
- * that do declare one. Each of the three was asked and each refuses for a reason
- * about what this is rather than about the axis. `emphasis` is how much ink a
- * mark claims, and there is no mark: an arrow glyph and two runs of text, whose
- * weight is `Text`'s business and whose size is the region's. `material` is what
- * reads through a surface, and a 13px glyph has nothing behind it. `wash` is a
- * gradient across an area, and there is no area.
+ * `emphasis` is how much ink a mark claims, and there is no mark: an arrow glyph
+ * and two runs of text, whose weight is `Text`'s business and whose size is the
+ * region's. `material` is what reads through a surface, and a 13px glyph has
+ * nothing behind it. `wash` is a gradient across an area, and there is no area.
  *
  * The meaning axis is here and is *derived*, which is the more interesting half:
  * `direction` and `good` together resolve to success, danger or muted, so a

package/dist/trend/root/trend-root.js

@@ -22,13 +22,10 @@ import { styles } from './trend-root.css.js';
  * reads and the judgment is a gloss on it.
  *
  * **No visual axis applies here, and that is the answer rather than a gap.**
- * This family carries `@groups charts`, so `check:axes` reports it beside eight
- * that do declare one. Each of the three was asked and each refuses for a reason
- * about what this is rather than about the axis. `emphasis` is how much ink a
- * mark claims, and there is no mark: an arrow glyph and two runs of text, whose
- * weight is `Text`'s business and whose size is the region's. `material` is what
- * reads through a surface, and a 13px glyph has nothing behind it. `wash` is a
- * gradient across an area, and there is no area.
+ * `emphasis` is how much ink a mark claims, and there is no mark: an arrow glyph
+ * and two runs of text, whose weight is `Text`'s business and whose size is the
+ * region's. `material` is what reads through a surface, and a 13px glyph has
+ * nothing behind it. `wash` is a gradient across an area, and there is no area.
  *
  * The meaning axis is here and is *derived*, which is the more interesting half:
  * `direction` and `good` together resolve to success, danger or muted, so a

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

@@ -1,4 +1,4 @@
-// Generated from src/video/root/video-root.css by `bun run styles`. Do not edit.
+// Generated from src/video/root/video-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 color-scheme: dark;
@@ -169,7 +169,6 @@ transparent calc(var(--_video-at, 1) * 100%)
 
 block-size: 4px;
 bottom: var(--_video-level-lift);
-
 direction: rtl;
 inline-size: var(--_video-level-size);
 
@@ -322,16 +321,6 @@ inline-size: 100%;
 object-fit: contain;
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="controls"],
-[part="cue"],
-[part="stage"]::before,
-[part="start"],
-[part="volume"] {
-transition: none;
-}
-}
-
 [part="speed"] {
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);

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

@@ -43,19 +43,14 @@ export declare class HelixVideo extends HelixHeadlessVideo {
     /**
      * How the control bar sits on the picture.
      *
-     * **Classified by what it does rather than by what its values were called.**
-     * These were `solid` and `plain` under `appearance`, and `solid` reads like a
-     * fill weight, which is how this came to be listed as emphasis when the axes
-     * were first sorted. It is not: all three states say what the bar sits on,
-     * which is where it separates from the picture.
+     * `separation` and not `emphasis`: all three states say what the bar sits on,
+     * which is where it separates from the picture, rather than how loud it is.
      *
      * Absent is the default and is what a player looks like, and what the
      * platform's own controls do: they float on a gradient that fades up into the
      * picture, dark enough to read them against a bright frame and gone entirely
      * a little higher up. The picture runs edge to edge behind them. It has no
-     * name because it is the resting treatment, and `shadow` was never a declared
-     * value even while an example wrote it: the attribute matched no selector and
-     * fell through to this rule, which is why it appeared to work.
+     * name because it is the resting treatment.
      *
      * `filled` gives the controls a bar of their own, which is what a video
      * embedded in a document usually wants, where the player is a component on a

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -1,4 +1,4 @@
-// Generated from src/video-playlist/item/video-playlist-item.css by `bun run styles`. Do not edit.
+// Generated from src/video-playlist/item/video-playlist-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -86,10 +86,4 @@ min-inline-size: 0;
 color: var(--helix-color-foreground-subtle);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-regular);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="item"] {
-transition: none;
-}
 }`);

package/dist/video-playlist/menu/video-playlist-menu.css.js

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

package/dist/video-playlist/root/video-playlist-root.css.js

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

package/dist/virtual-list/root/virtual-list-root.css.js

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

package/elements.css

@@ -1,4 +1,4 @@
-/* Generated by tooling/scripts/build-elements-css.mjs. Do not edit.
+/* Generated by fusion/scripts/build-elements-css.mjs. Do not edit.
  *
  * Import once, beside the base layer, in any app that uses Helix elements:
  *
@@ -147,10 +147,9 @@ helix-virtual-list:not(:defined) {
  * well: every `<helix-flex align="center">` was centering its text, which is a
  * thing nobody asked for and nothing in the component could be blamed for.
  *
- * Neutralised here rather than in each component, which is where it was. Flex
- * and Grid both remembered and both were right, and nothing would have told the
- * next one. Enumerated for the same reason the rule above is: CSS cannot select
- * "any custom element".
+ * Neutralized here rather than in each component, so the next component with an
+ * `align` property does not have to remember. Enumerated for the same reason
+ * the rule above is: CSS cannot select "any custom element".
  *
  * `:where()` keeps this at zero specificity, so a consumer setting
  * `text-align` on the same element still wins.

package/helix.css

@@ -0,0 +1,31 @@
+/*
+ * Every layer Helix needs, in one import.
+ *
+ * **Four files in a required order is a list somebody writes three of**, and
+ * `primitives.css` is the one left out: `tokens.css` refers to a primitive 235
+ * times, so a consumer who lists the other three gets all 177 semantic tokens
+ * declared and every one resolving to `rgba(0, 0, 0, 0)`, and no theming at
+ * all, every public `--helix-seed-*` being read in that file and nowhere else.
+ *
+ * The order is the whole content of this file, and it cannot be got wrong from
+ * outside it.
+ *
+ * **It reaches into `@fusion.dev/helix-styles`, and that is a declared dependency
+ * rather than a hopeful specifier.** This package depends on it, so the
+ * resolution is guaranteed by the manifest rather than by what happens to be
+ * installed. Verified through this repository's own toolchain in development
+ * and in a production build: the primitives, the tokens, the base layer and
+ * `elements.css` all arrive.
+ *
+ * **What it cannot do is be a `<link>`.** A bare specifier in an `@import` is
+ * resolved by a bundler and never by a browser, so this is for the consumers
+ * the documentation describes, who import from JavaScript. Anyone serving CSS
+ * directly takes the four files by path.
+ *
+ * The individual files keep their exports. `@fusion.dev/helix-styles/all.css` is the
+ * three that package owns, for a page that wants Helix's type and color
+ * without any custom elements; the four singles are there for anyone
+ * substituting a layer.
+ */
+@import "@fusion.dev/helix-styles/all.css";
+@import "./elements.css";