@fusion.dev/helix 0.103.3 → 0.104.0

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

@@ -0,0 +1,268 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="region"] {
+background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
+block-size: var(--canvas-block-size, 30rem);
+border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+display: grid;
+grid-template-rows: auto 1fr auto;
+overflow: hidden;
+position: relative;
+}
+
+:host([separation="plain"]) [part="region"] {
+background-color: transparent;
+border: none;
+border-radius: 0;
+}
+
+[part="viewport"] {
+min-block-size: 0;
+overflow: hidden;
+position: relative;
+}
+
+:host(:not(:state(empty))) ::slotted([slot="empty"]) {
+display: none;
+}
+
+[part="board"] {
+block-size: var(--_canvas-plane-block-size);
+inline-size: var(--_canvas-plane-inline-size);
+inset: 0;
+position: absolute;
+transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));
+transform-origin: 0 0;
+
+transition: transform var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([grid]) [part="viewport"] {
+background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);
+background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));
+
+transition:
+background-position var(--helix-duration-normal) var(--helix-easing-standard),
+background-size var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([grid="lines"]) [part="viewport"] {
+--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);
+background-image:
+linear-gradient(to right, var(--_canvas-rule) var(--helix-border-thin), transparent 0),
+linear-gradient(to bottom, var(--_canvas-rule) var(--helix-border-thin), transparent 0);
+}
+
+:host([grid="dots"]) [part="viewport"] {
+background-image: radial-gradient(
+var(--helix-color-border) var(--helix-border-thin),
+transparent 0
+);
+}
+
+:host(:state(direct)) [part="board"],
+:host(:state(direct)) [part="viewport"] {
+transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="board"],
+:host([grid]) [part="viewport"] {
+transition: none;
+}
+}
+
+[part="edges"] {
+inset: 0;
+overflow: visible;
+position: absolute;
+}
+
+[part="edge"] {
+stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));
+stroke-width: var(--helix-border-thick);
+}
+
+[part="edge"] {
+pointer-events: none;
+}
+
+[part="edge-target"] {
+cursor: grab;
+pointer-events: stroke;
+stroke: transparent;
+stroke-width: var(--canvas-edge-target-width, 12px);
+}
+
+[part="edge-target"]:focus {
+outline: none;
+}
+
+[part="edge-target"]:hover + [part="edge"] {
+stroke: var(--helix-color-focus-ring);
+}
+
+[part="edge-target"]:focus-visible + [part="edge"] {
+stroke: var(--helix-color-focus-ring);
+stroke-width: calc(var(--helix-border-thick) * 2);
+}
+
+[part="edge-end"] {
+background-color: var(--helix-color-accent);
+block-size: var(--canvas-handle-size, 0.625rem);
+border: var(--helix-border-thick) solid var(--helix-color-surface);
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+cursor: grab;
+inline-size: var(--canvas-handle-size, 0.625rem);
+left: var(--_canvas-end-x);
+position: absolute;
+top: var(--_canvas-end-y);
+transform: translate(-50%, -50%);
+z-index: 1;
+}
+
+[part="edge-end"]::after {
+content: "";
+inset: calc(var(--helix-space-sm) * -1);
+position: absolute;
+}
+
+:host(:state(holding)) [part="viewport"] {
+cursor: grabbing;
+}
+
+[part="label-editor"] {
+background-color: var(--helix-color-surface);
+border: var(--helix-border-thin) solid var(--helix-color-accent);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+inline-size: var(--canvas-label-editor-inline-size, 12rem);
+left: var(--_canvas-editor-x);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+position: absolute;
+text-align: center;
+top: var(--_canvas-editor-y);
+transform: translate(-50%, -50%);
+z-index: 1;
+}
+
+[part="label-editor"][data-target="group"] {
+text-align: start;
+transform: translate(0, -100%);
+}
+
+[part="label-editor"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="marquee"] {
+background-color: color-mix(in oklab, var(--helix-color-accent) 10%, transparent);
+block-size: var(--_canvas-marquee-block-size);
+border: var(--helix-border-thin) dashed var(--helix-color-accent);
+box-sizing: border-box;
+inline-size: var(--_canvas-marquee-inline-size);
+left: var(--_canvas-marquee-x);
+pointer-events: none;
+position: absolute;
+top: var(--_canvas-marquee-y);
+z-index: 1;
+}
+
+[part="draft"] {
+pointer-events: none;
+stroke: var(--helix-color-accent);
+stroke-dasharray: 6 4;
+stroke-width: var(--helix-border-thick);
+}
+
+:host(:state(connecting)) [part="viewport"] {
+cursor: crosshair;
+}
+
+[part="arrow"] {
+fill: var(--canvas-edge-color, var(--helix-color-border));
+}
+
+@supports (fill: context-stroke) {
+[part="arrow"] {
+fill: context-stroke;
+}
+}
+
+[part="edge"][data-tone="accent"] {
+stroke: var(--helix-color-accent);
+}
+[part="edge"][data-tone="danger"] {
+stroke: var(--helix-color-danger);
+}
+[part="edge"][data-tone="info"] {
+stroke: var(--helix-color-info);
+}
+[part="edge"][data-tone="primary"] {
+stroke: var(--helix-color-primary);
+}
+[part="edge"][data-tone="success"] {
+stroke: var(--helix-color-success);
+}
+[part="edge"][data-tone="warning"] {
+stroke: var(--helix-color-warning);
+}
+
+[part="edge"][data-selected] {
+stroke: var(--helix-color-accent);
+stroke-width: calc(var(--helix-border-thick) * 2);
+}
+
+[part="edge"][data-variant="dashed"] {
+stroke-dasharray: 6 4;
+}
+
+[part="edge"][data-variant="dotted"] {
+stroke-dasharray: 0 5;
+stroke-linecap: round;
+}
+
+[part="label"] {
+background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+left: var(--_canvas-label-x);
+line-height: 1;
+padding: var(--helix-space-2xs);
+pointer-events: none;
+position: absolute;
+top: var(--_canvas-label-y);
+transform: translate(-50%, -50%);
+white-space: nowrap;
+}
+
+[part="viewport"] {
+cursor: grab;
+touch-action: none;
+}
+
+:host(:state(pressing)) [part="viewport"] {
+user-select: none;
+}
+
+[part="viewport"]:active {
+cursor: grabbing;
+}
+
+@media print {
+[part="controls"] {
+display: none;
+}
+}`);

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

@@ -0,0 +1,63 @@
+import { HelixHeadlessCanvas } from '@fusion.dev/helix-headless/canvas';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A board of cards and the connections between them, which a reader can walk, rearrange and connect.
+ *
+ * @description
+ * **Cards and connections say what they mean with `tone`**, the word every
+ * other family uses, and the tones resolve to semantic tokens, so a board
+ * follows the page into dark mode rather than carrying somebody else's hex into
+ * it. JSON Canvas's six color presets arrive as tones through `fromJsonCanvas`.
+ *
+ * The plane is the one thing that moves: panning and zooming write three custom
+ * properties and one transform reads them, so the cards are placed once in the
+ * document's own coordinates and never laid out again.
+ *
+ * @since 0.100.0
+ * @status experimental
+ * @category media
+ * @aliases Board, JSON Canvas, Whiteboard
+ * @documentation https://fusion.dev/helix/components/canvas
+ *
+ * @cssproperty --canvas-background-color - The well behind the board.
+ * @cssproperty --canvas-block-size - How tall the frame is.
+ * @cssproperty --canvas-border-color - Color of the frame's edge.
+ * @cssproperty --canvas-edge-color - Color of a connector with no tone. Written in an edge's own `style`, it colors that edge alone.
+ * @cssproperty --canvas-edge-target-width - How wide a connector is to a pointer, which is wider than it is drawn.
+ * @cssproperty --canvas-grid-size - How far apart the ruling is, in the document's own units, so it scales with the zoom.
+ * @cssproperty --canvas-handle-size - How large the ends of a selected connection are, one name with a card's points.
+ * @cssproperty --canvas-label-editor-inline-size - How wide the field a label is edited in is.
+ * @cssproperty --viewport-control-background-color - The ground under the pan and zoom buttons, one name with `Map`.
+ */
+export declare class HelixCanvas extends HelixHeadlessCanvas {
+    /**
+     * Rules the plane, so a reader can see it move.
+     *
+     * **Baked in rather than a family of its own**, which was the question worth
+     * asking: a grid has no content, no position and nothing to slot, so an
+     * element for it would be an element with no reason to exist. It is the
+     * board's own surface, and what a consumer varies about it is a length.
+     *
+     * **On the plane and not on the well**, which is what makes it worth having:
+     * the ruling is drawn in the document's own units, so it moves and scales with
+     * the cards and a drag has something to move against. A grid on the frame
+     * would sit still while the board slid over it, which reads as the board
+     * standing still.
+     *
+     * Absent is no ruling, a resting value being an attribute's absence.
+     */
+    grid?: 'lines' | 'dots';
+    /**
+     * How the board stands off the page: `plain` for no frame at all.
+     *
+     * Framed is where it rests. Plain is for a board that fills a panel or an
+     * app's working area, where the container is already the frame.
+     */
+    separation?: 'outlined' | 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-canvas': HelixCanvas;
+    }
+}

package/dist/canvas/root/canvas-root.js

@@ -0,0 +1,25 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessCanvas } from '@fusion.dev/helix-headless/canvas';
+import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
+import { styles } from './canvas-root.css.js';
+let HelixCanvas = class HelixCanvas extends HelixHeadlessCanvas {
+    static { this.styles = [liveStyles, viewportStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixCanvas.prototype, "grid", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixCanvas.prototype, "separation", void 0);
+HelixCanvas = __decorate([
+    customElement('helix-canvas')
+], HelixCanvas);
+export { HelixCanvas };

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

@@ -41,11 +41,14 @@ justify-content: safe flex-end;
 
 [part="header"][hidden],
 [part="resume"][hidden],
-[part="status"][hidden],
 [part="composer"][hidden] {
 display: none;
 }
 
+[part="status"][data-empty] {
+padding-block: 0;
+}
+
 [part="header"] {
 
 --helix-size-tag: var(--helix-size-tag-sm);
@@ -126,15 +129,6 @@ padding-block: var(--helix-space-lg);
 text-align: center;
 }
 
-[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
 [part="log"][data-windowed] {
 gap: var(--helix-space-none);
 }

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

@@ -7,12 +7,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 as liveStyles } from '../../shared/live/live.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 = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixChat = __decorate([
     customElement('helix-chat')

package/dist/data-table/root/data-table-root.d.ts

@@ -35,6 +35,7 @@ import '../../table/index.js';
  *
  * @csspart cell - One cell.
  * @csspart cell-selected - A cell of a selected row, beside `cell`.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
  * @cssproperty --data-table-block-size - How tall the scrolling box is while `windowed`.

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

@@ -7,13 +7,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 as liveStyles } from '../../shared/live/live.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 = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixDataTable = __decorate([
     customElement('helix-data-table')

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

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './drilldown-root.css.js';
 let HelixDrilldown = class HelixDrilldown extends HelixHeadlessDrilldown {
-    static { this.styles = [collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
 HelixDrilldown = __decorate([
     customElement('helix-drilldown')

package/dist/element-events.generated.js

@@ -4,6 +4,21 @@ registerElementEvents({
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
     'helix-avatar': ['error', 'load'],
+    'helix-canvas': [
+        'helix-before-move',
+        'helix-before-reconnect',
+        'helix-before-relabel',
+        'helix-canvas-edit',
+        'helix-canvas-pan',
+        'helix-canvas-view',
+        'helix-canvas-zoom',
+        'helix-connect',
+        'helix-move',
+        'helix-reconnect',
+        'helix-relabel',
+        'helix-remove',
+        'helix-select',
+    ],
     'helix-carousel': ['helix-select'],
     'helix-chat': ['helix-before-pin', 'helix-history', 'helix-send'],
     'helix-chat-composer': ['helix-send'],

package/dist/empty/root/empty-root.js

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './empty-root.css.js';
 let HelixEmpty = class HelixEmpty extends HelixHeadlessEmpty {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixEmpty = __decorate([
     customElement('helix-empty')

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './callout/index.js';
+export * from './canvas/index.js';
 export * from './card/index.js';
 export * from './carousel/index.js';
 export * from './chat/index.js';

package/dist/index.js

@@ -13,6 +13,7 @@ export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './callout/index.js';
+export * from './canvas/index.js';
 export * from './card/index.js';
 export * from './carousel/index.js';
 export * from './chat/index.js';

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

@@ -19,6 +19,10 @@ max-inline-size: 100vw;
 padding: var(--lightbox-padding, var(--helix-space-md));
 }
 
+[part="dialog"]:focus-visible {
+outline: none;
+}
+
 [part="dialog"]:not([open]) {
 display: none;
 }
@@ -53,15 +57,6 @@ opacity: 0;
 visibility: hidden;
 }
 
-[part="live"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
 @media (prefers-reduced-motion: reduce) {
 ::slotted([slot="header"]),
 ::slotted([slot="footer"]) {

package/dist/lightbox/root/lightbox-root.js

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessLightbox } from '@fusion.dev/helix-headless/lightbox';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './lightbox-root.css.js';
 let HelixLightbox = class HelixLightbox extends HelixHeadlessLightbox {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixLightbox = __decorate([
     customElement('helix-lightbox')

package/dist/listbox/root/listbox-root.js

@@ -9,9 +9,11 @@ import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './listbox-root.css.js';
 let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
     static { this.styles = [
+        liveStyles,
         collectionStateStyles,
         fieldStyles,
         fieldStackedStyles,

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

@@ -26,102 +26,6 @@ block-size: 100%;
 inline-size: 100%;
 }
 
-[part="controls"] {
-display: grid;
-gap: var(--helix-space-2xs);
-
-grid-template-areas:
-".      up    .      zoomin"
-"start  .     end    zoomout"
-".      down  .      full";
-position: absolute;
-
-inset-block-start: var(--helix-space-sm);
-inset-inline-end: var(--helix-space-sm);
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([controls]:not([controls~="zoom"])) [part="controls"] {
-grid-template-areas:
-".      up    ."
-"start  .     end"
-".      down  full";
-}
-
-:host([controls]:not([controls~="pan"])) [part="controls"] {
-grid-template-areas:
-"zoomin"
-"zoomout"
-"full";
-}
-
-:host([controls-placement="top-end"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="top-start"]) [part="controls"] {
-inset-block: var(--helix-space-sm) auto;
-inset-inline: var(--helix-space-sm) auto;
-}
-
-:host([controls-placement="bottom-end"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: auto var(--helix-space-sm);
-}
-
-:host([controls-placement="bottom-start"]) [part="controls"] {
-inset-block: auto var(--helix-space-sm);
-inset-inline: var(--helix-space-sm) auto;
-}
-
-[part="pan-up"] {
-grid-area: up;
-}
-[part="pan-down"] {
-grid-area: down;
-}
-[part="pan-start"] {
-grid-area: start;
-}
-[part="pan-end"] {
-grid-area: end;
-}
-[part="zoom-in"] {
-grid-area: zoomin;
-}
-[part="zoom-out"] {
-grid-area: zoomout;
-}
-[part="fullscreen"] {
-grid-area: full;
-}
-
-[part="controls"] button {
-align-items: center;
-background-color: var(--map-control-background-color, var(--helix-color-surface-overlay));
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-block-size: var(--helix-size-control-sm);
-color: var(--helix-color-foreground);
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: var(--helix-size-control-sm);
-justify-content: center;
-padding: 0;
-}
-
-[part="controls"] button:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="controls"] button:hover {
-background-color: var(--helix-color-surface-raised);
-}
-
 :host(:state(idle)) ::slotted([slot="header"]),
 :host(:state(idle)) ::slotted([slot="footer"]) {
 opacity: 0;
@@ -132,16 +36,12 @@ transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
 
 border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
 color: var(--helix-color-foreground-subtle);
+
+display: block;
 font-size: var(--helix-text-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 }
 
-:host(:state(fullscreen)) [part="region"] {
-block-size: 100dvh;
-border: none;
-border-radius: 0;
-}
-
 @media print {
 [part="controls"] {
 display: none;