@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,30 @@
+// Generated from src/tour/root/tour-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="spotlight"] {
+border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));
+box-shadow: 0 0 0 100vmax var(--tour-scrim-color, var(--helix-color-overlay));
+pointer-events: none;
+position: fixed;
+transition:
+inset-block-start var(--helix-duration-normal) var(--helix-easing-standard),
+inset-inline-start var(--helix-duration-normal) var(--helix-easing-standard),
+block-size var(--helix-duration-normal) var(--helix-easing-standard),
+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/root/tour-root.d.ts

@@ -0,0 +1,24 @@
+import { HelixHeadlessTour } from '@fusion.dev/helix-headless/tour';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A guided run through an interface, one stop at a time.
+ *
+ * @description
+ * The styled tier of `BaseTour`. It draws the light and nothing else.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @cssproperty --tour-scrim-color - The darkness outside the lit box.
+ * @cssproperty --tour-spotlight-radius - Corner radius of the lit box.
+ */
+export declare class HelixTour extends HelixHeadlessTour {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tour': HelixTour;
+    }
+}

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

@@ -0,0 +1,30 @@
+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 { HelixHeadlessTour } from '@fusion.dev/helix-headless/tour';
+import { styles } from './tour-root.css.js';
+/**
+ * @summary A guided run through an interface, one stop at a time.
+ *
+ * @description
+ * The styled tier of `BaseTour`. It draws the light and nothing else.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @cssproperty --tour-scrim-color - The darkness outside the lit box.
+ * @cssproperty --tour-spotlight-radius - Corner radius of the lit box.
+ */
+let HelixTour = class HelixTour extends HelixHeadlessTour {
+    static { this.styles = styles; }
+};
+HelixTour = __decorate([
+    customElement('helix-tour')
+], HelixTour);
+export { HelixTour };

package/dist/tour/stop/tour-stop.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,77 @@
+// Generated from src/tour/stop/tour-stop.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+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);
+box-shadow: var(--tour-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-md);
+inline-size: max-content;
+margin: var(--helix-space-none);
+max-inline-size: var(--tour-bubble-size, 22rem);
+
+overflow: visible;
+padding: var(--tour-padding, var(--helix-space-md));
+position: fixed;
+}
+
+:host [part="bubble"][hidden] {
+display: none;
+}
+
+[part="content"] {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-xs);
+}
+
+[part="actions"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-xs);
+justify-content: flex-end;
+}
+
+[part="skip"] {
+margin-inline-end: auto;
+}
+
+[part="arrow"] {
+background-color: var(--tour-surface-color, var(--helix-color-surface-raised));
+block-size: var(--tour-arrow-size, 0.625rem);
+inline-size: var(--tour-arrow-size, 0.625rem);
+position: absolute;
+rotate: 45deg;
+}
+
+[part="bubble"][data-placement^="bottom"] [part="arrow"] {
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+inset-block-start: calc(var(--tour-arrow-size, 0.625rem) / -2);
+}
+
+[part="bubble"][data-placement^="top"] [part="arrow"] {
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
+inset-block-end: calc(var(--tour-arrow-size, 0.625rem) / -2);
+}
+
+[part="bubble"][data-placement^="right"] [part="arrow"] {
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+inset-inline-start: calc(var(--tour-arrow-size, 0.625rem) / -2);
+}
+
+[part="bubble"][data-placement^="left"] [part="arrow"] {
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
+inset-inline-end: calc(var(--tour-arrow-size, 0.625rem) / -2);
+}`);

package/dist/tour/stop/tour-stop.d.ts

@@ -0,0 +1,34 @@
+import { HelixHeadlessTourStop } from '@fusion.dev/helix-headless/tour';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+/**
+ * @summary One stop on a tour: what it points at, and a panel to say it in.
+ *
+ * @description
+ * The styled tier of `BaseTourStop`. The panel is `Popover`'s panel by another
+ * name, on purpose.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @cssproperty --tour-arrow-size - The point's box, before it is rotated.
+ * @cssproperty --tour-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --tour-bubble-size - How wide the panel may grow.
+ * @cssproperty --tour-padding - Inset inside the panel.
+ * @cssproperty --tour-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ * @cssproperty --tour-surface-color - The panel's own surface.
+ */
+export declare class HelixTourStop extends HelixHeadlessTourStop {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tour-stop': HelixTourStop;
+    }
+}

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

@@ -0,0 +1,40 @@
+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 { HelixHeadlessTourStop } from '@fusion.dev/helix-headless/tour';
+import { styles } from './tour-stop.css.js';
+import '../../button/index.js';
+/**
+ * @summary One stop on a tour: what it points at, and a panel to say it in.
+ *
+ * @description
+ * The styled tier of `BaseTourStop`. The panel is `Popover`'s panel by another
+ * name, on purpose.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @documentation https://helix.fusion.dev/components/tour
+ *
+ * @cssproperty --tour-arrow-size - The point's box, before it is rotated.
+ * @cssproperty --tour-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --tour-bubble-size - How wide the panel may grow.
+ * @cssproperty --tour-padding - Inset inside the panel.
+ * @cssproperty --tour-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ * @cssproperty --tour-surface-color - The panel's own surface.
+ */
+let HelixTourStop = class HelixTourStop extends HelixHeadlessTourStop {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixTourStop = __decorate([
+    customElement('helix-tour-stop')
+], HelixTourStop);
+export { HelixTourStop };

package/dist/tree/index.d.ts

@@ -0,0 +1,2 @@
+export * from './item/tree-item.js';
+export * from './root/tree-root.js';

package/dist/tree/index.js

@@ -0,0 +1,2 @@
+export * from './item/tree-item.js';
+export * from './root/tree-root.js';

package/dist/tree/item/tree-item.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,177 @@
+// Generated from src/tree/item/tree-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_tree-chevron: var(--tree-chevron-size, var(--helix-size-icon-tight));
+display: block;
+}
+
+[part="item"] {
+border-radius: var(--helix-radii-sm);
+margin-block-end: var(--tree-gap, var(--helix-space-2xs));
+outline: none;
+}
+
+[part="row"] {
+
+align-items: center;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: flex;
+font-size: var(--_tree-text, var(--helix-text-sm));
+gap: var(--helix-space-2xs);
+
+block-size: max(
+var(--tree-row-size, var(--helix-size-control-tight)),
+calc(1lh + var(--helix-space-xs) * 2)
+);
+min-block-size: var(--tree-row-size, var(--helix-size-control-tight));
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-xs);
+
+padding-inline-start: calc(
+var(--helix-space-xs) +
+(var(--tree-level, 1) - 1) *
+var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs)))
+);
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+user-select: none;
+}
+
+[part="row"]:not(:has([part="toggle"])) {
+padding-inline-start: calc(
+var(--helix-space-xs) +
+(var(--tree-level, 1) - 1) *
+var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))) +
+var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs)))
+);
+}
+
+[part="row"]:has([part="toggle"]) {
+font-weight: var(--helix-weight-medium);
+}
+
+[part="row"]:not(:has([part="toggle"])) {
+font-weight: var(--helix-weight-medium);
+}
+
+slot[name="children"]::slotted(*) {
+--_tree-text: var(--helix-text-xs);
+}
+
+[part="row"]:hover {
+background-color: var(--helix-color-surface-raised);
+color: var(--helix-color-foreground);
+}
+
+:host(:state(selected)) [part="row"] {
+background-color: var(--helix-color-surface-sunken);
+color: var(--helix-color-foreground);
+}
+
+[part="item"]:focus-visible [part="row"],
+[part="row"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+a[part="row"] {
+text-decoration: none;
+}
+
+[part="toggle"] {
+block-size: var(--_tree-chevron);
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+inline-size: var(--_tree-chevron);
+transform: rotate(-90deg);
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(open)) [part="toggle"] {
+transform: rotate(0deg);
+}
+
+[part="label"] {
+
+align-self: stretch;
+flex: 1;
+
+min-inline-size: 0;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="label"] slot::slotted(a) {
+display: block;
+overflow: hidden;
+text-overflow: ellipsis;
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+flex: 0 0 auto;
+}
+
+slot[name="end"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-2xs);
+
+margin-inline-start: auto;
+order: 1;
+}
+
+slot[name="start"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="group"] {
+display: grid;
+grid-template-rows: 1fr;
+transition:
+grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard),
+display var(--helix-duration-fast) allow-discrete;
+}
+
+[part="group"] > slot {
+display: block;
+min-block-size: 0;
+overflow: hidden;
+}
+
+[part="group"][hidden] {
+display: none;
+grid-template-rows: 0fr;
+}
+
+@starting-style {
+[part="group"]:not([hidden]) {
+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;
+margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));
+order: var(--tree-chevron-order, 0);
+}`);

package/dist/tree/item/tree-item.d.ts

@@ -0,0 +1,44 @@
+import { HelixHeadlessTreeItem } from '@fusion.dev/helix-headless/tree';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One node in a tree.
+ *
+ * @description
+ * Indent comes from the `level` the tree sets, as a multiple of one hook, so a
+ * node moved to another depth re-indents without any nested selector. Nesting
+ * selectors by depth is the usual approach and stops working at whatever depth
+ * nobody wrote a rule for.
+ *
+ * The twisty rotates rather than swapping glyphs, so opening a branch is a
+ * short movement instead of a substitution. Motion carries the state change;
+ * the row itself stays flat.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases TreeNode, Branch, Leaf
+ * @documentation https://helix.fusion.dev/components/tree
+ *
+ * @slot - The item's label.
+ * @slot children - Nested items, which make this a branch.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart group - The container for nested items.
+ * @csspart item - The node, and the focus target.
+ * @csspart label - The label text.
+ * @csspart row - The clickable label row.
+ * @csspart toggle - The expand and collapse control.
+ *
+ * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-indent - Indent added per level.
+ * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
+ */
+export declare class HelixTreeItem extends HelixHeadlessTreeItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tree-item': HelixTreeItem;
+    }
+}

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

@@ -0,0 +1,50 @@
+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 { HelixHeadlessTreeItem } from '@fusion.dev/helix-headless/tree';
+import { styles } from './tree-item.css.js';
+/**
+ * @summary One node in a tree.
+ *
+ * @description
+ * Indent comes from the `level` the tree sets, as a multiple of one hook, so a
+ * node moved to another depth re-indents without any nested selector. Nesting
+ * selectors by depth is the usual approach and stops working at whatever depth
+ * nobody wrote a rule for.
+ *
+ * The twisty rotates rather than swapping glyphs, so opening a branch is a
+ * short movement instead of a substitution. Motion carries the state change;
+ * the row itself stays flat.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases TreeNode, Branch, Leaf
+ * @documentation https://helix.fusion.dev/components/tree
+ *
+ * @slot - The item's label.
+ * @slot children - Nested items, which make this a branch.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart group - The container for nested items.
+ * @csspart item - The node, and the focus target.
+ * @csspart label - The label text.
+ * @csspart row - The clickable label row.
+ * @csspart toggle - The expand and collapse control.
+ *
+ * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-indent - Indent added per level.
+ * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
+ */
+let HelixTreeItem = class HelixTreeItem extends HelixHeadlessTreeItem {
+    static { this.styles = styles; }
+};
+HelixTreeItem = __decorate([
+    customElement('helix-tree-item')
+], HelixTreeItem);
+export { HelixTreeItem };

package/dist/tree/root/tree-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,43 @@
+// Generated from src/tree/root/tree-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="tree"] {
+display: flex;
+flex-direction: column;
+}
+
+:host {
+--tree-chevron-order: 0;
+}
+
+:host([chevron-placement="end"]) {
+
+--tree-chevron-order: 2;
+--tree-chevron-gap: var(--helix-space-none);
+
+--_tree-reserve: var(--helix-space-none);
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-md);
+padding-inline: var(--helix-space-sm);
+text-align: center;
+}
+
+:host([loading]) [part="tree"] {
+opacity: 0.5;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,63 @@
+import { HelixHeadlessTree } from '@fusion.dev/helix-headless/tree';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A tree of items, navigable entirely from the keyboard.
+ *
+ * @description
+ * Quiet by default: no rules between rows and no fill except on the selected
+ * item. A navigation tree is read by scanning, and every line of chrome added
+ * to it is one more thing between the reader and the label.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases FileTree, Navigation tree
+ * @documentation https://helix.fusion.dev/components/tree
+ *
+ * @slot - The tree's items.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart tree - The tree container.
+ *
+ * @cssproperty --tree-chevron-gap - Set from `chevron-placement`; the space before the chevron.
+ * @cssproperty --tree-chevron-order - Set from `chevron-placement`; read by each item.
+ * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-indent - Indent added per level.
+ * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
+ */
+export declare class HelixTree extends HelixHeadlessTree {
+    /**
+     * Which end of the row the branch chevron sits at.
+     *
+     * 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
+     * would make a ragged tree writable and would have to be repeated on every
+     * row to say one thing.
+     *
+     * **Optional, with no default.** A reflected property that defaults to a
+     * value writes that value onto every host: `chevron-placement="start"`
+     * appeared in the server's markup for every tree anybody rendered, which is
+     * the same fault `href` and `target` had on `Button`. The resting arrangement
+     * is the absence of the attribute, and the stylesheet only asks about `end`.
+     *
+     * It is worth owning rather than leaving to `::part(toggle)`, which a
+     * consumer could reach for: the naive version is `order` plus an auto margin,
+     * and the row's `end` slot already carries an auto margin of its own, so the
+     * two split the free space and the chevron lands halfway along. Measured at
+     * 70px short. That is the kind of thing a component should absorb once.
+     */
+    chevronPlacement?: 'start' | 'end';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-tree': HelixTree;
+    }
+}