@fusion.dev/helix 0.25.1 → 0.30.0

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

@@ -24,7 +24,6 @@ var(--accordion-border-color, var(--helix-color-border));
 
 @media print {
 :host {
-background-color: transparent;
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -152,6 +152,5 @@ display: none;
 @media print {
 :host {
 background-color: transparent;
-box-shadow: none;
 }
 }`);

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

@@ -29,7 +29,8 @@ stroke: none;
 [part="line"] {
 stroke: var(--chart-series);
 stroke-linejoin: round;
-stroke-width: var(--area-chart-width, 1.5px);
+
+stroke-width: var(--area-chart-width, var(--_chart-stroke));
 vector-effect: non-scaling-stroke;
 }
 

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

@@ -24,7 +24,7 @@ import '../../tooltip/index.js';
  * @cssproperty --area-chart-fill-strength - How much of its series' color a band takes, as a percentage mixed toward the page.
  * @cssproperty --area-chart-gap - Space between the drawing and its labels.
  * @cssproperty --area-chart-gridline-color - One rule across the plot, under `gridlines`.
- * @cssproperty --area-chart-width - Thickness of a band's top edge.
+ * @cssproperty --area-chart-width - Thickness of a band's top edge, over `--chart-stroke`.
  */
 export declare class HelixAreaChart extends HelixHeadlessAreaChart {
     /** The styled tier, so the tooltip this renders is the styled one. */

package/dist/aura/{root/aura-axis.d.ts → axis.d.ts}

@@ -16,13 +16,13 @@
  * form**, which is deliberate and is what makes the round trip worth running.
  * A closed form checked against its own algebra proves only that the algebra
  * was inverted correctly. Written as the same three operations `main()`
- * performs, in the same order, it is a claim about `aura-shader.ts`, and the
+ * performs, in the same order, it is a claim about `shader.ts`, and the
  * day someone changes how that file handles the aspect this stops agreeing.
  */
 /**
  * Where the shader's axis crosses the top edge, as a fraction of the width.
  *
- * Follows `main()` in `aura-shader.ts`:
+ * Follows `main()` in `shader.ts`:
  *
  * 1. `p.x *= aspect` stretches the frame before anything rotates, so the tilt
  *    the rotation takes is a slope in the stretched frame rather than on

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

@@ -22,6 +22,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * **It stops when nobody is looking**, off screen and in a background tab, and
  * `prefers-reduced-motion` gets one still frame rather than an empty box.
  *
+ * Styled only, and with behavior, which the tier split does not otherwise
+ * allow: the behavior is drawing to a canvas, so there is no structure a
+ * consumer could restyle and nothing for a headless twin to hold.
+ *
  * @since 0.1.0
  * @status experimental
  * @category media
@@ -373,7 +377,7 @@ export declare class HelixAura extends HelixElement {
      * business knowing when: it is read once per frame from numbers already
      * there.
      *
-     * The solve is `tiltFor` in `aura-axis.ts` rather than an expression here, so
+     * The solve is `tiltFor` in `axis.ts` rather than an expression here, so
      * it is callable and `aura-root.dom.spec.ts` runs it against a model of the
      * shader in both directions.
      */

package/dist/aura/root/aura-root.js

@@ -8,9 +8,9 @@ var HelixAura_1;
 import { customElement, HelixElement, TokenColorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { tiltFor } from './aura-axis.js';
+import { tiltFor } from '../axis.js';
+import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from '../shader.js';
 import { styles } from './aura-root.css.js';
-import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from './aura-shader.js';
 const MAX_CANVAS_EDGE = 4096;
 const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
@@ -118,7 +118,7 @@ let HelixAura = class HelixAura extends HelixElement {
         };
     }
     static { HelixAura_1 = this; }
-    static { this.styles = [styles]; }
+    static { this.styles = styles; }
     static { this.CONTEXT = {
         alpha: true,
         antialias: false,

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

@@ -49,6 +49,6 @@ user-select: none;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -127,7 +127,8 @@ fill: none;
 stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));
 stroke-linecap: round;
 stroke-linejoin: round;
-stroke-width: var(--bar-chart-line-width, 2.5px);
+
+stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));
 vector-effect: non-scaling-stroke;
 }
 
@@ -283,7 +284,6 @@ stop-opacity: calc(0.35 * var(--helix-material-opacity));
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -25,7 +25,7 @@ import '../../tooltip/index.js';
  * @cssproperty --bar-chart-gap - Space between the drawing and its labels.
  * @cssproperty --bar-chart-gridline-color - One rule across the plot, under `gridlines`.
  * @cssproperty --bar-chart-line-color - A `lines` series, overriding its series color.
- * @cssproperty --bar-chart-line-width - Thickness of a `lines` series.
+ * @cssproperty --bar-chart-line-width - Thickness of a `lines` series, over `--chart-stroke`.
  */
 export declare class HelixBarChart extends HelixHeadlessBarChart {
     /**

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

@@ -35,7 +35,6 @@ display: none;
 
 @media print {
 :host {
-background-color: transparent;
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -17,6 +17,6 @@ padding: var(--helix-space-none);
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -75,6 +75,5 @@ margin: var(--helix-space-none);
 @media print {
 :host {
 background-color: transparent;
-box-shadow: none;
 }
 }`);

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

@@ -351,7 +351,6 @@ inline-size: var(--helix-space-xs);
 @media print {
 :host {
 box-shadow: none;
-max-block-size: none;
 overflow: visible;
 }
 }

package/dist/chat/message/chat-message.css.js

@@ -182,7 +182,10 @@ padding: var(--helix-space-none);
 }
 
 [part="indicator"] {
-animation: helix-chat-typing 1.2s infinite ease-in-out;
+
+--_chat-typing-cycle: 1.2s;
+
+animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;
 background-image:
 radial-gradient(circle closest-side, currentColor 90%, transparent),
 radial-gradient(circle closest-side, currentColor 90%, transparent),

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

@@ -116,8 +116,12 @@ var(--helix-border-thin)
 }
 
 [part="empty"],
-[part="history"],
 [part="loading"] {
+--_collection-inset-block: var(--helix-space-lg);
+--_collection-inset-inline: var(--helix-space-none);
+}
+
+[part="history"] {
 color: var(--helix-color-foreground-subtle);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-sm);

package/dist/chat/root/chat-root.js

@@ -6,12 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles } from './chat-root.css.js';
 import '../composer/chat-composer.js';
 import '../message/chat-message.js';
 let HelixChat = class HelixChat extends HelixHeadlessChat {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [collectionStateStyles, styles]; }
 };
 HelixChat = __decorate([
     customElement('helix-chat')

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

@@ -124,7 +124,7 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([disabled])[variant="card"]) [part="field"]:hover {
+:host(:not(:disabled)[variant="card"]) [part="field"]:hover {
 border-color: var(--helix-color-foreground-muted);
 }
 

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

@@ -4,9 +4,10 @@ import type { CSSResultGroup } from 'lit';
  * @summary A box that is ticked, or not, or neither.
  *
  * @description
- * The box is the native input, restyled rather than replaced, so the tick and
- * the indeterminate dash are the browser's own and the control stays a control
- * for anything reading the page.
+ * The box is the native input with its own drawing switched off, so the control
+ * stays a control for anything reading the page while the tick and the
+ * indeterminate dash are drawn here, as masks over a mark beside it, and their
+ * weight, color and motion are the design system's rather than the browser's.
  *
  * The label sits beside it and the whole thing is the click target, which is
  * what a native `<label>` wrapping a checkbox gives and what a reader expects.

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

@@ -23,7 +23,6 @@ flex-wrap: wrap;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -26,6 +26,5 @@ padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));
 @media print {
 [part="code"] {
 background-color: transparent;
-box-shadow: none;
 }
 }`);

package/dist/code-block/root/code-block-root.css.js

@@ -186,7 +186,6 @@ user-select: none;
 @media print {
 :host {
 background-color: transparent;
-box-shadow: none;
 }
 
 :host([diff]) [part="block"],

package/dist/color-input/root/color-input-root.css.js

@@ -1,9 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="field"] {
+export const styles = createSheet(`[part="field"] {
 align-items: center;
 background-color: var(--color-input-background-color, var(--helix-color-well));
 block-size: var(--helix-size-control);
@@ -18,28 +14,6 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="control"] {
-all: unset;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-}
-
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-}
-
-:host(:focus-within) [part="field"],
-:host(:focus-within) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
 :host(:disabled) [part="field"] {
 color: var(--helix-color-foreground-subtle);
 }
@@ -82,14 +56,11 @@ inline-size: var(--helix-size-control);
 }
 
 [part="surface"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--color-input-border-width, var(--helix-border-floating)) solid
-var(--color-input-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--color-input-shadow, var(--helix-shadow-floating));
+--_floating-border-color: var(--color-input-border-color, var(--helix-color-border));
+--_floating-border-width: var(--color-input-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--color-input-shadow, var(--helix-shadow-floating));
+
 inline-size: var(--color-input-panel-size, 264px);
-inset: auto;
-margin: var(--helix-space-none);
 overflow: hidden;
 padding: var(--helix-space-none);
 position: absolute;
@@ -102,49 +73,10 @@ position: absolute;
 display: block;
 }
 
-[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-opacity: 0;
-scale: 0.96;
-transform: translateY(var(--_travel));
-transition:
-opacity var(--helix-duration-fast) var(--helix-easing-standard),
-scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-transform var(--helix-duration-fast) var(--helix-easing-emphasized),
-display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="surface"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="surface"][hidden] {
-display: none;
-}
-
 @media (prefers-reduced-motion: reduce) {
 [part="field"] {
 transition: none;
 }
-
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }
 
 :host([variant="swatch"]) [part="field"] {
@@ -170,14 +102,6 @@ border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));
 inline-size: 100%;
 }
 
-:host(:state(invalid)) [part="field"],
-:host(:state(invalid)) [part="field"]:hover,
-:host(:state(invalid):focus-within) [part="field"],
-:host(:state(invalid):focus-within) [part="field"]:hover {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
 slot[name="start"]::slotted(*),
 slot[name="end"]::slotted(*) {
 color: var(--helix-color-foreground-subtle);
@@ -186,7 +110,6 @@ flex: 0 0 auto;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/color-input/root/color-input-root.js

@@ -8,11 +8,21 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessColorInput } from '@fusion.dev/helix-headless/color-input';
 import '../../color-picker/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
+import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
 import { styles } from './color-input-root.css.js';
 let HelixColorInput = class HelixColorInput extends HelixHeadlessColorInput {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 HelixColorInput = __decorate([
     customElement('helix-color-input')

package/dist/color-picker/root/color-picker-root.js

@@ -10,7 +10,7 @@ import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../icon/index.js';
 import '../../slider/index.js';
-import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './color-picker-root.css.js';
 let HelixColorPicker = class HelixColorPicker extends HelixHeadlessColorPicker {
     static { this.tier = 'helix-'; }

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

@@ -1,8 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
 position: relative;
 }
 
@@ -50,17 +47,6 @@ flex: 0 0 auto;
 max-inline-size: 100%;
 }
 
-[part="control"] {
-all: unset;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-}
-
 [part="field"]:has([part="tags"]) [part="control"] {
 flex: 1 1 var(--combobox-control-size, 4ch);
 }
@@ -70,25 +56,6 @@ color: var(--helix-color-foreground-subtle);
 font-weight: var(--helix-weight-medium);
 }
 
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-}
-
-:host(:focus-within) [part="field"],
-:host(:focus-within) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host(:state(invalid)) [part="field"],
-:host(:state(invalid)) [part="field"]:hover,
-:host(:state(invalid):focus-within) [part="field"],
-:host(:state(invalid):focus-within) [part="field"]:hover {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
 :host(:disabled) [part="field"] {
 color: var(--helix-color-foreground-subtle);
 cursor: not-allowed;
@@ -116,15 +83,12 @@ flex: 0 0 auto;
 }
 
 [part="surface"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--combobox-border-width, var(--helix-border-floating)) solid
-var(--combobox-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--combobox-shadow, var(--helix-shadow-floating));
+--_floating-border-color: var(--combobox-border-color, var(--helix-color-border));
+--_floating-border-width: var(--combobox-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--combobox-shadow, var(--helix-shadow-floating));
+
 box-sizing: border-box;
 inline-size: var(--combobox-panel-size, var(--floating-anchor-inline-size, 100%));
-inset: auto;
-margin: var(--helix-space-none);
 max-block-size: var(--floating-available-block-size, none);
 min-inline-size: max-content;
 overflow: hidden;
@@ -168,41 +132,6 @@ border: none;
 display: block;
 }
 
-[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-
-opacity: 0;
-scale: 0.96;
-transform: translateY(var(--_travel));
-transition:
-opacity var(--helix-duration-fast) var(--helix-easing-standard),
-scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-transform var(--helix-duration-fast) var(--helix-easing-emphasized),
-display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="surface"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="surface"][hidden],
-[part="surface"]:not(:popover-open) {
-display: none;
-}
-
 @media (prefers-reduced-motion: reduce) {
 [part="field"] {
 transition: none;
@@ -211,18 +140,10 @@ transition: none;
 [part="create"] {
 transition: none;
 }
-
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/combobox/root/combobox-root.js

@@ -9,12 +9,23 @@ import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
 import '../../listbox/index.js';
 import '../../tag/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
+import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './combobox-root.css.js';
 let HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, tagRowStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        tagRowStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 HelixCombobox = __decorate([
     customElement('helix-combobox')

package/dist/data-table/root/data-table-root.css.js

@@ -92,14 +92,7 @@ margin-inline-start: auto;
 
 [part="empty"],
 [part="loading"] {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
 grid-column: 1 / -1;
-margin: var(--helix-space-none);
-padding-block: var(--helix-space-md);
-padding-inline: var(--helix-space-sm);
-text-align: center;
 }
 
 :host([windowed]) [part="table"] {
@@ -127,7 +120,6 @@ opacity: 0.5;
 @media print {
 :host {
 background-color: transparent;
-box-shadow: none;
 }
 
 [part="table"] {

package/dist/data-table/root/data-table-root.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDataTable } from '@fusion.dev/helix-headless/data-table';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles } from './data-table-root.css.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import '../../table/index.js';
 let HelixDataTable = class HelixDataTable extends HelixHeadlessDataTable {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [collectionStateStyles, styles]; }
 };
 HelixDataTable = __decorate([
     customElement('helix-data-table')