@fusion.dev/helix 0.145.0 → 0.146.0

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

@@ -11,8 +11,9 @@ overflow: hidden;
 [part="header"] {
 align-items: center;
 
-block-size: var(--helix-size-control);
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+block-size: var(--drilldown-header-block-size, var(--helix-size-control));
+border-block-end: var(--helix-border-thin) solid
+var(--drilldown-header-border-color, var(--helix-color-border));
 display: flex;
 gap: var(--helix-space-2xs);
 padding-inline: var(--helix-space-2xs);
@@ -24,7 +25,7 @@ align-items: center;
 block-size: var(--helix-size-control-tight);
 border-radius: var(--helix-radii-sm);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--drilldown-back-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: flex;
 inline-size: var(--helix-size-control-tight);
@@ -38,7 +39,10 @@ inline-size: var(--helix-size-icon-tight);
 }
 
 [part="back"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+background-color: var(
+--drilldown-back-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
 color: var(--helix-color-foreground);
 }
 
@@ -48,38 +52,47 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="title"] {
-color: var(--helix-color-foreground);
+color: var(--drilldown-title-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
+font-size: var(--drilldown-title-font-size, var(--helix-text-sm));
+font-weight: var(--drilldown-title-font-weight, var(--helix-weight-medium));
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 
 [part="page"] {
-padding-block: var(--helix-space-2xs);
+
+--_drilldown-sign: 1;
+
+padding-block: var(--drilldown-page-padding-block, var(--helix-space-2xs));
+}
+
+:host(:dir(rtl)) [part="page"] {
+--_drilldown-sign: -1;
 }
 
 :host([data-direction="forward"]) [part="page"] {
-animation: drilldown-forward var(--helix-duration-normal) var(--helix-easing-decelerate);
+animation: drilldown-forward var(--drilldown-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host([data-direction="back"]) [part="page"] {
-animation: drilldown-back var(--helix-duration-normal) var(--helix-easing-decelerate);
+animation: drilldown-back var(--drilldown-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 @keyframes drilldown-forward {
 from {
 opacity: 0;
-translate: 12% 0;
+translate: calc(var(--drilldown-travel, 12%) * var(--_drilldown-sign, 1)) 0;
 }
 }
 
 @keyframes drilldown-back {
 from {
 opacity: 0;
-translate: -12% 0;
+translate: calc(var(--drilldown-travel, 12%) * var(--_drilldown-sign, 1) * -1) 0;
 }
 }
 

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

@@ -17,8 +17,18 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Panel, Nested list, Drill-in
  * @documentation https://fusion.dev/helix/components/drilldown
  *
+ * @cssproperty --drilldown-back-color - Color of the back button's icon.
+ * @cssproperty --drilldown-back-hover-background-color - Fill of the back button under the pointer.
  * @cssproperty --drilldown-background-color - Fill behind the pages.
+ * @cssproperty --drilldown-duration - How long a page takes to slide in.
+ * @cssproperty --drilldown-header-block-size - Height of the bar above a page.
+ * @cssproperty --drilldown-header-border-color - Color of the rule under the bar above a page.
  * @cssproperty --drilldown-inline-size - Width of the region.
+ * @cssproperty --drilldown-page-padding-block - Space above and below a page's rows.
+ * @cssproperty --drilldown-title-color - Color of the page's name.
+ * @cssproperty --drilldown-title-font-size - Size of the page's name.
+ * @cssproperty --drilldown-title-font-weight - Weight of the page's name.
+ * @cssproperty --drilldown-travel - How far a page slides as it arrives, along the line of text.
  */
 export declare class HelixDrilldown extends HelixHeadlessDrilldown {
     static styles: CSSResultGroup;

package/dist/element-events.generated.js

@@ -5,6 +5,7 @@ registerElementEvents({
     'helix-app-header': ['helix-scrolled'],
     'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
+    'helix-button': ['helix-press'],
     'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',
@@ -50,6 +51,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-create',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -57,10 +59,11 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'helix-select',
         'toggle',
     ],
-    'helix-copy-button': ['helix-copy', 'helix-copy-error'],
+    'helix-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-data-table': [
         'helix-activate',
         'helix-expand',
@@ -115,6 +118,7 @@ registerElementEvents({
     ],
     'helix-heatmap': ['helix-resize'],
     'helix-icon': ['error', 'load'],
+    'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-kbd': ['helix-shortcut'],
@@ -129,7 +133,7 @@ registerElementEvents({
     ],
     'helix-list': ['change', 'helix-action', 'helix-before-change'],
     'helix-list-item': ['helix-action'],
-    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'helix-load-more', 'input'],
     'helix-map': [
         'change',
         'helix-activate',
@@ -164,9 +168,12 @@ registerElementEvents({
     'helix-object-inspector': [
         'helix-activate',
         'helix-before-activate',
+        'helix-before-close',
+        'helix-before-open',
         'helix-copy',
         'helix-filter',
         'helix-filtered',
+        'toggle',
     ],
     'helix-option': ['helix-select'],
     'helix-outline': ['helix-activate'],
@@ -177,7 +184,7 @@ registerElementEvents({
     'helix-qr-code': ['error'],
     'helix-radio': ['helix-select'],
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'helix-preview', 'input'],
     'helix-sandbox': [
         'helix-before-edit',
         'helix-before-panel-resize',
@@ -191,6 +198,7 @@ registerElementEvents({
     ],
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
     'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
+    'helix-sandbox-terminal': ['change', 'helix-before-change'],
     'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [
         'change',
@@ -198,6 +206,7 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -219,7 +228,7 @@ registerElementEvents({
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
     'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
-    'helix-textarea': ['change', 'helix-before-change', 'input'],
+    'helix-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-time-input': [
         'change',
         'helix-before-change',
@@ -241,6 +250,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'helix-tour-status',
         'toggle',
     ],
     'helix-tour-stop': ['helix-tour-ask'],
@@ -282,5 +292,5 @@ registerElementEvents({
     'helix-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
     'helix-video-playlist-item': ['helix-select'],
     'helix-video-playlist-menu': ['helix-select'],
-    'helix-virtual-list': ['helix-load-more', 'helix-range-change'],
+    'helix-virtual-list': ['change', 'helix-before-change', 'helix-load-more', 'helix-range-change'],
 });

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

@@ -3,8 +3,8 @@ export const styles = createSheet(`[part="field"] {
 align-items: center;
 position: relative;
 background-color: var(--file-input-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) dashed var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+border: var(--helix-border-thin) dashed var(--file-input-border-color, var(--helix-color-border));
+border-radius: var(--file-input-radius, var(--helix-radii-sm));
 display: flex;
 gap: var(--helix-space-xs);
 justify-content: center;
@@ -26,8 +26,8 @@ outline: none;
 }
 
 [part="field"][data-dropping] {
-background-color: var(--helix-color-primary-subtle);
-border-color: var(--helix-color-primary);
+background-color: var(--file-input-drop-background-color, var(--helix-color-primary-subtle));
+border-color: var(--file-input-drop-border-color, var(--helix-color-primary));
 border-style: solid;
 }
 
@@ -56,14 +56,15 @@ padding: var(--helix-space-none);
 
 [part="file"] {
 align-items: center;
-background-color: var(--helix-color-surface);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--file-input-file-background-color, var(--helix-color-surface));
+border: var(--helix-border-thin) solid
+var(--file-input-file-border-color, var(--helix-color-border));
+border-radius: var(--file-input-file-radius, var(--helix-radii-sm));
 display: flex;
 gap: var(--helix-space-sm);
 opacity: 1;
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-sm);
+padding-block: var(--file-input-file-padding-block, var(--helix-space-xs));
+padding-inline: var(--file-input-file-padding-inline, var(--helix-space-sm));
 scale: 1 1;
 transform-origin: top;
 transition:
@@ -120,7 +121,7 @@ all: unset;
 align-items: center;
 border-radius: var(--helix-radii-sm);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--file-input-remove-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: flex;
 flex: none;
@@ -131,7 +132,7 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="remove"]:hover {
-color: var(--helix-color-danger);
+color: var(--file-input-remove-color-hover, var(--helix-color-danger));
 }
 
 [part="remove"]:focus-visible {

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

@@ -22,7 +22,18 @@ import '../../tag/index.js';
  * @documentation https://fusion.dev/helix/components/file-input
  *
  * @cssproperty --file-input-background-color - Fill behind the field.
+ * @cssproperty --file-input-border-color - The field's dashed edge at rest.
+ * @cssproperty --file-input-drop-background-color - Fill behind the field while files are dragged over it.
+ * @cssproperty --file-input-drop-border-color - The field's edge while files are dragged over it.
+ * @cssproperty --file-input-file-background-color - Fill behind each chosen file.
+ * @cssproperty --file-input-file-border-color - The edge of each chosen file.
+ * @cssproperty --file-input-file-padding-block - Padding above and below each chosen file.
+ * @cssproperty --file-input-file-padding-inline - Padding at each side of each chosen file.
+ * @cssproperty --file-input-file-radius - Corner radius of each chosen file.
  * @cssproperty --file-input-padding - Padding inside the field.
+ * @cssproperty --file-input-radius - Corner radius of the field.
+ * @cssproperty --file-input-remove-color - The remove button's icon at rest.
+ * @cssproperty --file-input-remove-color-hover - The remove button's icon under the pointer.
  */
 export declare class HelixFileInput extends HelixHeadlessFileInput {
     static tier: string;

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

@@ -6,8 +6,9 @@ export const styles = createSheet(`:host {
 [part="field"] {
 align-items: center;
 background-color: var(--filter-input-background-color, var(--helix-color-well));
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+border: var(--helix-border-thin) solid
+var(--filter-input-field-border-color, var(--helix-color-border));
+border-radius: var(--filter-input-radius, var(--helix-radii-sm));
 color: var(--helix-color-foreground-subtle);
 display: flex;
 flex-wrap: wrap;
@@ -15,7 +16,7 @@ gap: var(--helix-space-2xs);
 min-block-size: var(--_filter-input-size);
 
 padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--filter-input-padding-inline, var(--helix-space-xs));
 transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);
@@ -66,7 +67,7 @@ align-items: center;
 align-self: center;
 border-radius: var(--helix-radii-sm);
 box-sizing: border-box;
-color: var(--helix-color-foreground-subtle);
+color: var(--filter-input-clear-color, var(--helix-color-foreground-subtle));
 cursor: pointer;
 display: flex;
 flex: 0 0 auto;
@@ -78,7 +79,7 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 
 [part="clear"]:hover {
 background-color: color-mix(in oklab, currentcolor 12%, transparent);
-color: var(--helix-color-foreground);
+color: var(--filter-input-clear-color-hover, var(--helix-color-foreground));
 }
 
 [part="clear"]:focus-visible {

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

@@ -32,9 +32,14 @@ import '../../option/index.js';
  * @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-clear-color - The clear button's icon at rest.
+ * @cssproperty --filter-input-clear-color-hover - The clear button's icon under the pointer.
  * @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-field-border-color - The field's edge at rest. Hover, focus, and an error still draw their own.
  * @cssproperty --filter-input-lead-border-color - The color of the line between the leading box and the text.
+ * @cssproperty --filter-input-padding-inline - Space at each side of the field, inside its edge.
  * @cssproperty --filter-input-panel-size - The width of the suggestion panel. It matches the field by default.
+ * @cssproperty --filter-input-radius - Corner radius of the field.
  * @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.

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

@@ -52,6 +52,15 @@ flex-grow: 999;
 min-inline-size: var(--flex-flank-min, 50%);
 }
 
+:host([layout="switch"]) {
+flex-wrap: wrap;
+}
+
+:host([layout="switch"]) ::slotted(*) {
+flex-basis: calc((var(--flex-switch-at, 30rem) - 100%) * 999);
+flex-grow: 1;
+}
+
 :host([wrap]) {
 flex-wrap: wrap;
 }

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

@@ -16,12 +16,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * write wins over the pattern's own value:
  *
  * - `cluster`: items in a wrapping row, centered on one line, such as tags.
- * - `split`: the first item at the start and the rest pushed to the end, such
- *   as a title and its actions. Wraps when there is no room.
+ * - `split`: the first item at the start, the last at the end, and any between
+ *   them spaced evenly, such as a title and its actions. Put several actions
+ *   in a flex of their own so they stay together at the end. Wraps when there
+ *   is no room.
  * - `flank` and `flank-end`: a fixed item beside one that takes the rest, such
  *   as an icon and its text, or a field and its button. The item that takes
  *   the rest stays at least `--flex-flank-min` wide, and the pair stacks once
  *   it cannot.
+ * - `switch`: the items share a row while the flex is at least
+ *   `--flex-switch-at` wide, and each takes a line of its own below that, such
+ *   as cards that stack on a narrow screen. It answers the width the flex is
+ *   given, wherever it sits, with no breakpoint to maintain.
  *
  * Flex is presentation only, so it has no headless tier.
  *
@@ -35,6 +41,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @cssproperty --flex-flank-min - The narrowest the growing item of a `flank` layout gets before the two stack, as a share of the row. Defaults to `50%`.
  * @cssproperty --flex-flank-size - The width of the fixed item of a `flank` layout. Defaults to its own width.
+ * @cssproperty --flex-switch-at - The narrowest a `switch` layout keeps its items in one row, below which each takes a line. Defaults to `30rem`.
  */
 export declare class HelixFlex extends HelixElement {
     /**
@@ -94,13 +101,17 @@ export declare class HelixFlex extends HelixElement {
      */
     justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around';
     /**
-     * A common layout pattern: `cluster`, `split`, `flank` or `flank-end`.
+     * A common layout pattern: `cluster`, `split`, `flank`, `flank-end` or
+     * `switch`.
      *
      * Each sets the wrapping, alignment and spread it needs, and an attribute
-     * you write as well wins over it. `flank` holds the first item at its own
-     * width and gives the last one the rest, and `flank-end` does the reverse.
+     * you write as well wins over it. `split` spreads the items as
+     * `justify-content: space-between` does, so a third item sits midway.
+     * `flank` holds the first item at its own width and gives the last one the
+     * rest, and `flank-end` does the reverse. `switch` puts the items in one
+     * row, or one to a line once the flex is narrower than `--flex-switch-at`.
      */
-    layout?: 'cluster' | 'flank' | 'flank-end' | 'split';
+    layout?: 'cluster' | 'flank' | 'flank-end' | 'split' | 'switch';
     /**
      * Space between the lines of a wrapping row, or between the items of a
      * column, named on the space scale. Wins over `gap` down the column.

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

@@ -40,9 +40,9 @@ inline-size: 100%;
 }
 
 [part="panel"] {
-background-color: var(--helix-color-surface);
+background-color: var(--graph-panel-background-color, var(--helix-color-surface));
 border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground);
+color: var(--graph-panel-color, var(--helix-color-foreground));
 display: grid;
 
 grid-template-columns: minmax(0, 1fr);
@@ -377,19 +377,22 @@ align-items: center;
 box-sizing: border-box;
 cursor: pointer;
 display: flex;
-font-size: var(--helix-text-sm);
+font-size: var(--graph-note-text, var(--helix-text-sm));
 gap: var(--helix-space-sm);
 min-block-size: var(--helix-size-control-tight);
 padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));
 user-select: none;
 }
 
 [part~="note"]:hover,
 [part="list"]:focus-visible [part~="note-cursor"] {
---_graph-wash: light-dark(
+--_graph-wash: var(
+--graph-note-hover-color,
+light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
+)
 );
 
 background-image: linear-gradient(var(--_graph-wash), var(--_graph-wash));
@@ -405,7 +408,7 @@ white-space: nowrap;
 }
 
 [part="note-relation"] {
-color: var(--helix-color-foreground-muted);
+color: var(--graph-note-relation-color, var(--helix-color-foreground-muted));
 flex: 1 1 0;
 font-size: var(--helix-text-xs);
 min-inline-size: 0;
@@ -416,11 +419,11 @@ white-space: nowrap;
 }
 
 [part~="note-selected"] {
-background-color: var(--helix-color-surface-sunken);
+background-color: var(--graph-note-selected-background-color, var(--helix-color-surface-sunken));
 }
 
 [part~="note-selected"] [part="note-name"] {
-font-weight: var(--helix-weight-semibold);
+font-weight: var(--graph-note-selected-weight, var(--helix-weight-semibold));
 }
 
 [part="header"],

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

@@ -20,6 +20,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --graph-background-color - The color behind the drawing while it loads.
  * @cssproperty --graph-block-size - The frame's height, as a length.
  * @cssproperty --graph-border-color - The frame's border color.
+ * @cssproperty --graph-note-hover-color - The wash over a note in the list while the pointer is over it, and over the note the keyboard is on.
+ * @cssproperty --graph-note-padding-inline - The space at either end of a note in the list.
+ * @cssproperty --graph-note-relation-color - The color of how a note stands to the selected one, such as "Linked from Alpha".
+ * @cssproperty --graph-note-selected-background-color - The fill behind the selected note, which leads the list.
+ * @cssproperty --graph-note-selected-weight - The weight of the selected note's name.
+ * @cssproperty --graph-note-text - The size of a note's name in the list.
+ * @cssproperty --graph-panel-background-color - The fill behind the search and the list.
+ * @cssproperty --graph-panel-color - The text color of the search and the list.
  * @cssproperty --graph-panel-size - The list's width beside the drawing, or over it when opened with `no-panel`.
  * @cssproperty --viewport-control-background-color - The background of the zoom and fullscreen buttons. Map and Canvas use the same property.
  */

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

@@ -19,7 +19,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * **A child can span columns with `data-grid-span`.** `data-grid-span="full"`
  * runs from the first column to the last, such as a heading across a set of
- * cards, and a number from `2` to `6` spans that many columns.
+ * cards, and a number from `2` to `6` spans that many columns. A number wider
+ * than the grid adds columns of no width beside the real ones, as CSS does,
+ * so in a `min` grid, whose count changes with its width, use `full` for a
+ * child that must span them all.
  *
  * @since 0.1.0
  * @status stable

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

@@ -119,7 +119,8 @@ outline-offset: var(--helix-size-focus-offset);
 font-weight: var(--helix-weight-medium);
 }
 
-[part="live"] {
+[part="live"],
+[part="overview"] {
 block-size: 1px;
 clip-path: inset(50%);
 inline-size: 1px;