@fusion.dev/helix 0.0.0-dev

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -0,0 +1,130 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './sandbox-terminal.css.js';
+/** How many lines are kept. Older ones fall off the top. */
+const LIMIT = 200;
+/**
+ * @summary Shows what the previewed example wrote to the console.
+ *
+ * @description
+ * Fed by the sandbox, which hears `helix-console` from the preview and hands it
+ * here. The preview is a separate document, so what arrives has already crossed
+ * `postMessage`: text, not values.
+ *
+ * **Repeats collapse.** An example with a render loop can write the same
+ * warning hundreds of times, and two hundred identical lines say nothing that
+ * one line and a count does not. Only consecutive repeats collapse, so the
+ * order of what happened survives.
+ *
+ * A `role="log"` rather than a live region by hand. It is the semantic for an
+ * append-only stream, and it means a reader is told about new output without
+ * the whole panel being re-announced each time.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Console, Output
+ * @documentation https://helix.fusion.dev/sandbox/terminal
+ *
+ * @csspart count - How many times a repeated line arrived.
+ * @csspart empty - Shown while nothing has been written.
+ * @csspart entry - One line.
+ * @csspart level - The level a line came in at.
+ * @csspart log - The scrolling region.
+ * @csspart message - The text of a line.
+ *
+ * @cssproperty --sandbox-terminal-size - Height of the scrolling region.
+ */
+let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * What to show before anything has been written.
+         */
+        this.emptyLabel = 'Nothing written to the console yet.';
+        /**
+         * Accessible name for the log.
+         */
+        this.label = 'Console output';
+        this.entries = [];
+        /**
+         * Whether the reader is at the bottom, and so wants to follow new output.
+         *
+         * Read before the render that adds a line and applied after it. Scrolling to
+         * the bottom on every line would drag a reader off whatever they had scrolled
+         * up to look at, which for a log of errors is the one thing they are doing.
+         */
+        this.following = true;
+    }
+    get log() {
+        return this.renderRoot.querySelector('[part="log"]');
+    }
+    /**
+     * Adds a line, collapsing it into the one above when they are identical.
+     *
+     * `write` rather than `append`, which every element already has from
+     * `ParentNode` and which takes nodes. Shadowing it would break
+     * `terminal.append(node)` for anyone who reasonably expected the DOM method.
+     */
+    write(detail) {
+        const log = this.log;
+        if (log) {
+            // A pixel of tolerance: fractional scroll positions do not land exactly.
+            this.following = log.scrollHeight - log.scrollTop - log.clientHeight < 2;
+        }
+        const last = this.entries.at(-1);
+        if (last && last.level === detail.level && last.text === detail.text) {
+            this.entries = [...this.entries.slice(0, -1), { ...last, count: last.count + 1 }];
+            return;
+        }
+        this.entries = [...this.entries, { ...detail, count: 1 }].slice(-LIMIT);
+    }
+    /** Empties the log. */
+    clear() {
+        this.entries = [];
+        this.following = true;
+    }
+    updated() {
+        if (this.following) {
+            const log = this.log;
+            if (log) {
+                log.scrollTop = log.scrollHeight;
+            }
+        }
+    }
+    render() {
+        return html `<div part="log" role="log" aria-label=${this.label} tabindex="0">
+      ${this.entries.length === 0
+            ? html `<p part="empty">${this.emptyLabel}</p>`
+            : this.entries.map((entry) => html `<div part="entry" data-level=${entry.level}>
+                <span part="level" aria-hidden="true">${entry.level}</span>
+                <span part="message">${entry.text}</span>
+                ${entry.count > 1
+                ? html `<span part="count" aria-label="${entry.count} times"
+                        >${entry.count}</span
+                      >`
+                : nothing}
+              </div>`)}
+    </div>`;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
+__decorate([
+    property()
+], HelixSandboxTerminal.prototype, "label", void 0);
+__decorate([
+    state()
+], HelixSandboxTerminal.prototype, "entries", void 0);
+HelixSandboxTerminal = __decorate([
+    customElement('helix-sandbox-terminal')
+], HelixSandboxTerminal);
+export { HelixSandboxTerminal };

package/dist/sandbox/toolbar/sandbox-toolbar.css.d.ts

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

package/dist/sandbox/toolbar/sandbox-toolbar.css.js

@@ -0,0 +1,32 @@
+// Generated from src/sandbox/toolbar/sandbox-toolbar.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--helix-size-checkbox: var(--helix-size-checkbox-sm);
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-tag: var(--helix-size-tag-sm);
+
+align-items: center;
+background-color: var(--helix-color-background);
+
+block-size: var(--sandbox-toolbar-size, var(--helix-size-control-loose));
+
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+min-block-size: 0;
+padding-block: var(--helix-space-none);
+
+padding-inline: var(--helix-space-md);
+}
+
+slot {
+align-items: center;
+display: flex;
+gap: var(--sandbox-toolbar-gap, var(--helix-space-sm));
+min-inline-size: 0;
+}
+
+slot[name="end"] {
+margin-inline-start: auto;
+}`);

package/dist/sandbox/toolbar/sandbox-toolbar.d.ts

@@ -0,0 +1,37 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary The bar across the top of a sandbox.
+ *
+ * @description
+ * Spans the source pane and the preview together, so what it holds is about the
+ * sandbox rather than about one side of it. The files go at the start and the
+ * menus at the end, which is the arrangement every editor has settled on.
+ *
+ * **Not `role="toolbar"`.** That role brings a roving tabindex, one tab stop
+ * for the whole group, and it is for a set of controls of the same kind. This
+ * holds a tab list, which owns its own arrow-key behavior and would lose it.
+ * Use `helix-toolbar` where the contents really are a row of buttons.
+ *
+ * Both slots are bare, so an unfilled one generates no box and costs no gap.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Action bar
+ * @documentation https://helix.fusion.dev/sandbox/toolbar
+ *
+ * @slot - Items at the start, usually the files.
+ * @slot end - Items at the end, usually menus.
+ *
+ * @cssproperty --sandbox-toolbar-gap - Space between items.
+ * @cssproperty --sandbox-toolbar-size - The bar's height. Defaults to a large control.
+ */
+export declare class HelixSandboxToolbar extends HelixElement {
+    protected render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-sandbox-toolbar': HelixSandboxToolbar;
+    }
+}

package/dist/sandbox/toolbar/sandbox-toolbar.js

@@ -0,0 +1,49 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { styles } from './sandbox-toolbar.css.js';
+/**
+ * @summary The bar across the top of a sandbox.
+ *
+ * @description
+ * Spans the source pane and the preview together, so what it holds is about the
+ * sandbox rather than about one side of it. The files go at the start and the
+ * menus at the end, which is the arrangement every editor has settled on.
+ *
+ * **Not `role="toolbar"`.** That role brings a roving tabindex, one tab stop
+ * for the whole group, and it is for a set of controls of the same kind. This
+ * holds a tab list, which owns its own arrow-key behavior and would lose it.
+ * Use `helix-toolbar` where the contents really are a row of buttons.
+ *
+ * Both slots are bare, so an unfilled one generates no box and costs no gap.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Action bar
+ * @documentation https://helix.fusion.dev/sandbox/toolbar
+ *
+ * @slot - Items at the start, usually the files.
+ * @slot end - Items at the end, usually menus.
+ *
+ * @cssproperty --sandbox-toolbar-gap - Space between items.
+ * @cssproperty --sandbox-toolbar-size - The bar's height. Defaults to a large control.
+ */
+let HelixSandboxToolbar = class HelixSandboxToolbar extends HelixElement {
+    render() {
+        // The end slot opens the gap that separates the two ends, the same way the
+        // status bar does it. No wrapper: a slot that is not filled has to cost
+        // nothing, and `display: contents` is what gives that for free.
+        return html `<slot></slot>
+      <slot name="end"></slot>`;
+    }
+    static { this.styles = styles; }
+};
+HelixSandboxToolbar = __decorate([
+    customElement('helix-sandbox-toolbar')
+], HelixSandboxToolbar);
+export { HelixSandboxToolbar };

package/dist/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export * from './root/scroll-area-root.js';

package/dist/scroll-area/index.js

@@ -0,0 +1 @@
+export * from './root/scroll-area-root.js';

package/dist/scroll-area/root/scroll-area-root.css.d.ts

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

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

@@ -0,0 +1,118 @@
+// Generated from src/scroll-area/root/scroll-area-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+position: relative;
+}
+
+[part="viewport"] {
+block-size: 100%;
+overflow: auto;
+overscroll-behavior: contain;
+}
+
+[part="viewport"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="viewport"] {
+scrollbar-color: var(--scroll-area-thumb-color, var(--helix-color-border))
+var(--scroll-area-track-color, transparent);
+scrollbar-width: var(--scroll-area-scrollbar, thin);
+}
+
+:host::before,
+:host::after {
+content: "";
+opacity: 0;
+pointer-events: none;
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+z-index: var(--helix-layer-raised);
+}
+
+:host::before {
+background: linear-gradient(
+to bottom,
+var(--scroll-area-fade-color, var(--helix-color-background)),
+transparent
+);
+block-size: var(--scroll-area-fade-block-start, var(--scroll-area-fade, var(--helix-space-xl)));
+inset-block-start: 0;
+inset-inline: 0;
+}
+
+:host::after {
+background: linear-gradient(
+to top,
+var(--scroll-area-fade-color, var(--helix-color-background)),
+transparent
+);
+block-size: var(--scroll-area-fade-block-end, var(--scroll-area-fade, var(--helix-space-xl)));
+inset-block-end: 0;
+inset-inline: 0;
+}
+
+:host([data-more~="block-start"])::before,
+:host([data-more~="block-end"])::after {
+opacity: 1;
+}
+
+[part="edges"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+[part="edges"]::before,
+[part="edges"]::after {
+content: "";
+inset-block: 0;
+opacity: 0;
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+z-index: var(--helix-layer-raised);
+}
+
+[part="edges"]::before {
+background: linear-gradient(
+to right,
+var(--scroll-area-fade-color, var(--helix-color-background)),
+transparent
+);
+inline-size: var(--scroll-area-fade-inline-start, var(--scroll-area-fade, var(--helix-space-xl)));
+inset-inline-start: 0;
+}
+
+[part="edges"]::after {
+background: linear-gradient(
+to left,
+var(--scroll-area-fade-color, var(--helix-color-background)),
+transparent
+);
+inline-size: var(--scroll-area-fade-inline-end, var(--scroll-area-fade, var(--helix-space-xl)));
+inset-inline-end: 0;
+}
+
+:host([data-more~="inline-start"]) [part="edges"]::before,
+:host([data-more~="inline-end"]) [part="edges"]::after {
+opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host::before,
+:host::after,
+[part="edges"]::before,
+[part="edges"]::after {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+max-block-size: none;
+overflow: visible;
+}
+}`);

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

@@ -0,0 +1,34 @@
+import { HelixHeadlessScrollArea } from '@fusion.dev/helix-headless/scroll-area';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A scrolling box that says there is more.
+ *
+ * @description
+ * Presentation only: the fades on the edges the base class names, and a
+ * scrollbar that belongs to the system rather than to the platform. Which edges
+ * have content past them is measured by the base class.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Scroller, Overflow, Scroll container
+ * @documentation https://helix.fusion.dev/components/scroll-area
+ *
+ * @cssproperty --scroll-area-fade - How deep the fades are, at both edges.
+ * @cssproperty --scroll-area-fade-block-end - And the bottom one.
+ * @cssproperty --scroll-area-fade-block-start - How deep the top one is, or `0` to drop it.
+ * @cssproperty --scroll-area-fade-color - What they fade to, which is the ground behind.
+ * @cssproperty --scroll-area-fade-inline-end - And the trailing one.
+ * @cssproperty --scroll-area-fade-inline-start - How deep the leading sideways one is, or `0` to drop it.
+ * @cssproperty --scroll-area-scrollbar - The scrollbar width keyword.
+ * @cssproperty --scroll-area-thumb-color - The scrollbar's handle.
+ * @cssproperty --scroll-area-track-color - And its track.
+ */
+export declare class HelixScrollArea extends HelixHeadlessScrollArea {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-scroll-area': HelixScrollArea;
+    }
+}

package/dist/scroll-area/root/scroll-area-root.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 { HelixHeadlessScrollArea } from '@fusion.dev/helix-headless/scroll-area';
+import { styles } from './scroll-area-root.css.js';
+/**
+ * @summary A scrolling box that says there is more.
+ *
+ * @description
+ * Presentation only: the fades on the edges the base class names, and a
+ * scrollbar that belongs to the system rather than to the platform. Which edges
+ * have content past them is measured by the base class.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Scroller, Overflow, Scroll container
+ * @documentation https://helix.fusion.dev/components/scroll-area
+ *
+ * @cssproperty --scroll-area-fade - How deep the fades are, at both edges.
+ * @cssproperty --scroll-area-fade-block-end - And the bottom one.
+ * @cssproperty --scroll-area-fade-block-start - How deep the top one is, or `0` to drop it.
+ * @cssproperty --scroll-area-fade-color - What they fade to, which is the ground behind.
+ * @cssproperty --scroll-area-fade-inline-end - And the trailing one.
+ * @cssproperty --scroll-area-fade-inline-start - How deep the leading sideways one is, or `0` to drop it.
+ * @cssproperty --scroll-area-scrollbar - The scrollbar width keyword.
+ * @cssproperty --scroll-area-thumb-color - The scrollbar's handle.
+ * @cssproperty --scroll-area-track-color - And its track.
+ */
+let HelixScrollArea = class HelixScrollArea extends HelixHeadlessScrollArea {
+    static { this.styles = styles; }
+};
+HelixScrollArea = __decorate([
+    customElement('helix-scroll-area')
+], HelixScrollArea);
+export { HelixScrollArea };

package/dist/select/index.d.ts

@@ -0,0 +1 @@
+export * from './root/select-root.js';

package/dist/select/index.js

@@ -0,0 +1 @@
+export * from './root/select-root.js';

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

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

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

@@ -0,0 +1,197 @@
+// Generated from src/select/root/select-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+position: relative;
+}
+
+[part="trigger"] {
+all: unset;
+align-items: center;
+background-color: var(--helix-color-well);
+block-size: var(--helix-size-control);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+gap: var(--helix-space-xs);
+justify-content: space-between;
+padding-inline: var(--helix-space-xs);
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="trigger"]:hover {
+border-color: var(--helix-color-primary);
+}
+
+[part="trigger"]:focus-visible {
+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="trigger"],
+:host(:state(invalid)) [part="trigger"]:hover,
+:host(:state(invalid)) [part="trigger"]:focus-visible {
+border-color: var(--helix-color-danger);
+outline-color: var(--helix-color-danger);
+}
+
+:host(:disabled) [part="trigger"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([emphasis="ghost"]) {
+inline-size: fit-content;
+}
+
+:host([emphasis="ghost"]) [part="trigger"] {
+background-color: transparent;
+block-size: var(--helix-size-control-tight);
+border-color: transparent;
+justify-content: start;
+padding-inline: var(--helix-space-2xs);
+}
+
+:host([emphasis="ghost"]:not(:disabled)) [part="trigger"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+border-color: transparent;
+}
+
+:host([emphasis="ghost"]) [part="trigger"]:focus-visible {
+border-color: var(--helix-color-primary);
+}
+
+[part="value"] {
+flex: 1;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="surface"] {
+
+--option-radius: var(--helix-radii-none);
+
+background-color: var(--helix-color-surface-overlay);
+
+border-radius: var(--helix-radii-md);
+box-shadow: var(--select-shadow, var(--helix-shadow-floating));
+
+inline-size: var(--floating-anchor-inline-size, 100%);
+min-inline-size: max-content;
+
+max-block-size: var(--floating-available-block-size, none);
+
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-none);
+
+border: var(--select-border-width, var(--helix-border-floating)) solid
+var(--select-border-color, var(--helix-color-border));
+inset: auto;
+margin: var(--helix-space-none);
+}
+
+[part="surface"] {
+opacity: 0;
+--_travel: calc(var(--helix-space-2xs) * -1);
+transform: translateY(var(--_travel));
+
+scale: 0.96;
+
+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);
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="surface"][data-placement^="top"] {
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}
+
+[part="indicator"],
+::slotted([slot="indicator"]) {
+transition: scale var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(open)) [part="indicator"],
+:host(:state(open)) ::slotted([slot="indicator"]) {
+scale: 1 -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"],
+::slotted([slot="indicator"]) {
+transition: none;
+}
+}
+
+[part="surface"][hidden],
+[part="surface"]:not(:popover-open) {
+display: none;
+}
+
+[part="listbox"]::part(items) {
+background-color: transparent;
+border: none;
+
+border-radius: var(--helix-radii-none);
+max-block-size: var(--select-surface-max-block-size, 14rem);
+padding: var(--helix-space-none);
+}
+
+[part="listbox"]::part(items):focus-visible {
+outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="trigger"] {
+transition: none;
+}
+}
+
+[part="indicator"] {
+block-size: var(--helix-size-icon-tight);
+color: var(--helix-color-foreground-muted);
+flex: 0 0 auto;
+inline-size: var(--helix-size-icon-tight);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);