@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -1,8 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_flex-column-gap: var(--_flex-gap);
+--_flex-gap: var(--helix-space-none);
+--_flex-row-gap: var(--_flex-gap);
+
+column-gap: var(--_flex-column-gap);
 display: flex;
 flex-direction: row;
-gap: var(--helix-space-none);
+row-gap: var(--_flex-row-gap);
 }
 
 :host([inline]) {
@@ -13,34 +19,136 @@ display: inline-flex;
 flex-direction: column;
 }
 
+:host([direction="row-reverse"]) {
+flex-direction: row-reverse;
+}
+
+:host([direction="column-reverse"]) {
+flex-direction: column-reverse;
+}
+
+:host([layout="cluster"]),
+:host([layout="flank"]),
+:host([layout="flank-end"]),
+:host([layout="split"]) {
+align-items: center;
+flex-wrap: wrap;
+}
+
+:host([layout="split"]) {
+justify-content: space-between;
+}
+
+:host([layout="flank"]) ::slotted(:first-child),
+:host([layout="flank-end"]) ::slotted(:last-child) {
+flex-basis: var(--flex-flank-size, auto);
+flex-grow: 1;
+}
+
+:host([layout="flank"]) ::slotted(:last-child),
+:host([layout="flank-end"]) ::slotted(:first-child) {
+flex-basis: 0;
+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;
 }
 
+:host([wrap="reverse"]) {
+flex-wrap: wrap-reverse;
+}
+
 :host([gap="2xs"]) {
-gap: var(--helix-space-2xs);
+--_flex-gap: var(--helix-space-2xs);
 }
 :host([gap="xs"]) {
-gap: var(--helix-space-xs);
+--_flex-gap: var(--helix-space-xs);
 }
 :host([gap="sm"]) {
-gap: var(--helix-space-sm);
+--_flex-gap: var(--helix-space-sm);
 }
 :host([gap="md"]) {
-gap: var(--helix-space-md);
+--_flex-gap: var(--helix-space-md);
 }
 :host([gap="lg"]) {
-gap: var(--helix-space-lg);
+--_flex-gap: var(--helix-space-lg);
 }
 :host([gap="xl"]) {
-gap: var(--helix-space-xl);
+--_flex-gap: var(--helix-space-xl);
 }
 :host([gap="2xl"]) {
-gap: var(--helix-space-2xl);
+--_flex-gap: var(--helix-space-2xl);
 }
 
 :host([gap="3xl"]) {
-gap: var(--helix-space-3xl);
+--_flex-gap: var(--helix-space-3xl);
+}
+
+:host([row-gap="none"]) {
+--_flex-row-gap: var(--helix-space-none);
+}
+:host([row-gap="2xs"]) {
+--_flex-row-gap: var(--helix-space-2xs);
+}
+:host([row-gap="xs"]) {
+--_flex-row-gap: var(--helix-space-xs);
+}
+:host([row-gap="sm"]) {
+--_flex-row-gap: var(--helix-space-sm);
+}
+:host([row-gap="md"]) {
+--_flex-row-gap: var(--helix-space-md);
+}
+:host([row-gap="lg"]) {
+--_flex-row-gap: var(--helix-space-lg);
+}
+:host([row-gap="xl"]) {
+--_flex-row-gap: var(--helix-space-xl);
+}
+:host([row-gap="2xl"]) {
+--_flex-row-gap: var(--helix-space-2xl);
+}
+:host([row-gap="3xl"]) {
+--_flex-row-gap: var(--helix-space-3xl);
+}
+
+:host([column-gap="none"]) {
+--_flex-column-gap: var(--helix-space-none);
+}
+:host([column-gap="2xs"]) {
+--_flex-column-gap: var(--helix-space-2xs);
+}
+:host([column-gap="xs"]) {
+--_flex-column-gap: var(--helix-space-xs);
+}
+:host([column-gap="sm"]) {
+--_flex-column-gap: var(--helix-space-sm);
+}
+:host([column-gap="md"]) {
+--_flex-column-gap: var(--helix-space-md);
+}
+:host([column-gap="lg"]) {
+--_flex-column-gap: var(--helix-space-lg);
+}
+:host([column-gap="xl"]) {
+--_flex-column-gap: var(--helix-space-xl);
+}
+:host([column-gap="2xl"]) {
+--_flex-column-gap: var(--helix-space-2xl);
+}
+:host([column-gap="3xl"]) {
+--_flex-column-gap: var(--helix-space-3xl);
 }
 
 :host([align-items="start"]) {
@@ -56,6 +164,32 @@ align-items: flex-end;
 align-items: baseline;
 }
 
+:host([align-content="start"]) {
+align-content: flex-start;
+}
+:host([align-content="center"]) {
+align-content: center;
+}
+:host([align-content="end"]) {
+align-content: flex-end;
+}
+:host([align-content="between"]) {
+align-content: space-between;
+}
+:host([align-content="around"]) {
+align-content: space-around;
+}
+:host([align-content="stretch"]) {
+align-content: stretch;
+}
+
+:host([align-items="stretch"]) {
+align-items: stretch;
+}
+
+:host([justify-content="start"]) {
+justify-content: flex-start;
+}
 :host([justify-content="center"]) {
 justify-content: center;
 }

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

@@ -9,7 +9,25 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * There is no separate Stack component. For a stack, set `direction="column"`.
  *
- * `gap` takes a space token name, so spacing stays on the scale.
+ * `gap` takes a space token name, so spacing stays on the scale. `row-gap`
+ * and `column-gap` set one axis each and win over `gap` on theirs.
+ *
+ * `layout` sets up one of three common patterns, and any attribute you also
+ * 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, 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.
  *
@@ -20,8 +38,20 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/flex
  *
  * @slot - The items to lay out.
+ *
+ * @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 {
+    /**
+     * How the lines of a wrapping row share the space across it, set as
+     * `align-content`.
+     *
+     * Named for the CSS property it sets, the way `alignItems` is. It moves
+     * nothing in a row that does not wrap, which has one line.
+     */
+    alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
     /**
      * How items align across the direction, set as `align-items`.
      *
@@ -42,9 +72,18 @@ export declare class HelixFlex extends HelixElement {
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     /**
-     * Whether items run across or down.
+     * Space between the items of a row, named on the space scale. Wins over
+     * `gap` across the row.
+     */
+    columnGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items run across or down, and from which end.
+     *
+     * `row-reverse` and `column-reverse` change only where the items are drawn.
+     * Focus and a screen reader still follow the order of the markup, so use
+     * them for a visual order that reads the same either way.
      */
-    direction?: 'row' | 'column';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /**
      * Space between items, named on the space scale.
      */
@@ -62,9 +101,27 @@ export declare class HelixFlex extends HelixElement {
      */
     justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around';
     /**
-     * Whether items wrap onto more lines.
+     * 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. `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' | '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.
+     */
+    rowGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items wrap onto more lines. `wrap="reverse"` wraps them upward,
+     * each new line above the one before.
      */
-    wrap: boolean;
+    wrap: boolean | 'reverse';
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

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

@@ -8,6 +8,10 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './flex-root.css.js';
+const wrapConverter = {
+    fromAttribute: (value) => value === null ? false : value === 'reverse' ? 'reverse' : true,
+    toAttribute: (value) => value === 'reverse' ? 'reverse' : value ? '' : null,
+};
 let HelixFlex = class HelixFlex extends HelixElement {
     constructor() {
         super(...arguments);
@@ -19,9 +23,15 @@ let HelixFlex = class HelixFlex extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'align-content', reflect: true })
+], HelixFlex.prototype, "alignContent", void 0);
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixFlex.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixFlex.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixFlex.prototype, "direction", void 0);
@@ -35,7 +45,13 @@ __decorate([
     property({ attribute: 'justify-content', reflect: true })
 ], HelixFlex.prototype, "justifyContent", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ reflect: true })
+], HelixFlex.prototype, "layout", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixFlex.prototype, "rowGap", void 0);
+__decorate([
+    property({ converter: wrapConverter, reflect: true })
 ], HelixFlex.prototype, "wrap", void 0);
 HelixFlex = __decorate([
     customElement('helix-flex')

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.
  */