@fusion.dev/helix 0.143.0 → 0.145.0

package/dist/sandbox/frame.d.ts

@@ -0,0 +1,63 @@
+import type { PreviewRender } from './preview/sandbox-preview.js';
+/** How `servePreview` serves a frame document. */
+export interface ServePreviewOptions {
+    /**
+     * The element each example is written into. Defaults to `#preview-root`,
+     * and to the body where there is none.
+     */
+    root?: HTMLElement;
+    /**
+     * Whether the frame adds the rules for the four `layout` values, `padded`,
+     * `centered`, `hug` and `fullscreen`, to its own head. Defaults to `true`.
+     * Set `false` where your frame's stylesheet places the root itself.
+     */
+    layouts?: boolean;
+    /** Called before new markup replaces the old, to take down what it mounted. */
+    onReplace?: (root: HTMLElement) => void;
+    /** Called after each render, with whether the markup was new or only restyled. */
+    onRender?: (root: HTMLElement, fresh: boolean) => void;
+}
+/**
+ * The rules that place the root for each `layout` a preview sends.
+ *
+ * `centered` gives the example a measure and centers that box, and `hug`
+ * shrinks each top-level child to its own content and centers it, which is
+ * the difference for a component whose root is a full-width block. They
+ * select the root by its `data-preview-root` attribute, so they reach nothing
+ * an example draws inside it.
+ */
+export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));\n  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { min-block-size: 100dvh; padding: 0; }\n";
+/** Whether `data` is a render message, as the preview sends one. */
+export declare const isRender: (data: unknown) => data is PreviewRender;
+/**
+ * The markup an example renders, without the stylesheet links it carries.
+ *
+ * An example that needs CSS says so the way a consumer would, with a `<link>`
+ * beside it, and the stylesheet arrives in the render message already read.
+ * The frame is on an opaque origin, so a request for the link would fail and
+ * log an error into the reader's console on every render.
+ */
+export declare const withoutStylesheets: (source: string) => string;
+/** A logged value as text, without throwing on a cycle. */
+export declare const loggedText: (value: unknown) => string;
+/**
+ * Serves the frame side of a sandbox preview, in the document its `src` loads.
+ *
+ * Call it once from that document, after the elements your examples use are
+ * defined. It does what the preview's protocol asks of a frame:
+ *
+ * - Posts `helix-preview-ready` once it listens.
+ * - Writes each `helix-preview-render` into the root: the markup, the
+ *   stylesheet, the direction, the layout and the color mode. Scripts in the
+ *   markup run.
+ * - Posts every console call and uncaught error as `helix-preview-console`.
+ * - Posts `helix-preview-size` whenever what was drawn changes height.
+ * - Posts `helix-preview-press` on every press, so menus outside close.
+ *
+ * Only a message from the parent window is rendered. Answers go to `*`, which
+ * is the only target a sandboxed frame can name, and carry only what the
+ * example itself wrote.
+ *
+ * @returns A function that stops serving and puts the console back.
+ */
+export declare const servePreview: (options?: ServePreviewOptions) => (() => void);

package/dist/sandbox/frame.js

@@ -0,0 +1,132 @@
+export const LAYOUT_RULES = `
+:root { --preview-measure: 48rem; }
+[data-preview-root][data-layout="padded"] { padding: var(--helix-space-lg, 1.5rem); }
+[data-preview-root][data-layout="centered"], [data-preview-root][data-layout="hug"] {
+  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));
+  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);
+}
+[data-preview-root][data-layout="centered"] { text-align: center; }
+[data-preview-root][data-layout="centered"] > * { margin-inline: auto; text-align: start; }
+[data-preview-root][data-layout="hug"] > * {
+  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;
+}
+[data-preview-root][data-layout="fullscreen"] { min-block-size: 100dvh; padding: 0; }
+`;
+export const isRender = (data) => typeof data === 'object' &&
+    data !== null &&
+    data.type === 'helix-preview-render';
+export const withoutStylesheets = (source) => source.replace(/<link\b[^>]*\brel=(["'])stylesheet\1[^>]*>\s*/gi, '');
+export const loggedText = (value) => {
+    if (typeof value === 'string') {
+        return value;
+    }
+    try {
+        return JSON.stringify(value) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+const runScripts = (root) => {
+    for (const original of [...root.querySelectorAll('script')]) {
+        const script = document.createElement('script');
+        for (const { name, value } of original.attributes) {
+            script.setAttribute(name, value);
+        }
+        if (!script.type) {
+            script.type = 'module';
+        }
+        script.text = original.text;
+        original.replaceWith(script);
+    }
+};
+const drawn = (child) => {
+    const own = child.getBoundingClientRect();
+    if (own.width > 0 || own.height > 0) {
+        return [own];
+    }
+    return [...child.querySelectorAll('*')]
+        .filter((node) => getComputedStyle(node).position !== 'fixed')
+        .map((node) => node.getBoundingClientRect())
+        .filter((box) => box.width > 0 || box.height > 0);
+};
+export const servePreview = (options = {}) => {
+    const root = options.root ?? document.getElementById('preview-root') ?? document.body;
+    root.toggleAttribute('data-preview-root', true);
+    root.dataset.layout ??= 'padded';
+    if (options.layouts !== false) {
+        const rules = document.createElement('style');
+        rules.textContent = LAYOUT_RULES;
+        document.head.prepend(rules);
+    }
+    const post = (message) => window.parent?.postMessage(message, '*');
+    const levels = ['log', 'info', 'warn', 'error'];
+    const originals = levels.map((level) => console[level]);
+    for (const level of levels) {
+        const original = console[level];
+        console[level] = (...args) => {
+            original(...args);
+            post({ level, text: args.map(loggedText).join(' '), type: 'helix-preview-console' });
+        };
+    }
+    const failed = (event) => {
+        post({ level: 'error', text: event.message, type: 'helix-preview-console' });
+    };
+    const measure = () => {
+        const boxes = [...root.children].flatMap(drawn);
+        if (boxes.length === 0) {
+            return;
+        }
+        const top = Math.min(...boxes.map((box) => box.top));
+        const bottom = Math.max(...boxes.map((box) => box.bottom));
+        const style = getComputedStyle(root);
+        const padding = (Number.parseFloat(style.paddingBlockStart) || 0) +
+            (Number.parseFloat(style.paddingBlockEnd) || 0);
+        post({ size: Math.ceil(bottom - top + padding), type: 'helix-preview-size' });
+    };
+    let rendered;
+    const render = (event) => {
+        if (!isRender(event.data) || event.source !== window.parent) {
+            return;
+        }
+        const { colorMode, direction = 'ltr', layout = 'padded', source = '', styles = '' } = event.data;
+        document.documentElement.dir = direction;
+        root.dataset.layout = layout;
+        if (colorMode) {
+            document.documentElement.dataset.colorMode = colorMode;
+            document.documentElement.style.colorScheme = colorMode;
+        }
+        const fresh = source !== rendered;
+        if (fresh) {
+            options.onReplace?.(root);
+            root.innerHTML = withoutStylesheets(source);
+            runScripts(root);
+            rendered = source;
+        }
+        let sheet = document.getElementById('preview-styles');
+        if (!sheet) {
+            sheet = document.createElement('style');
+            sheet.id = 'preview-styles';
+            document.head.append(sheet);
+        }
+        sheet.textContent = styles;
+        options.onRender?.(root, fresh);
+        measure();
+    };
+    const press = () => post({ type: 'helix-preview-press' });
+    const watcher = new ResizeObserver(measure);
+    watcher.observe(root);
+    window.addEventListener('error', failed);
+    window.addEventListener('message', render);
+    document.addEventListener('pointerdown', press, { capture: true, passive: true });
+    post({ type: 'helix-preview-ready' });
+    return () => {
+        levels.forEach((level, index) => {
+            console[level] = originals[index];
+        });
+        watcher.disconnect();
+        window.removeEventListener('error', failed);
+        window.removeEventListener('message', render);
+        document.removeEventListener('pointerdown', press, { capture: true });
+    };
+};

package/dist/sandbox/index.d.ts

@@ -12,6 +12,7 @@
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
  * `allow-same-origin`, which is the pairing that would undo it.
  */
+export { isRender, LAYOUT_RULES, loggedText, type ServePreviewOptions, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';

package/dist/sandbox/index.js

@@ -1,3 +1,4 @@
+export { isRender, LAYOUT_RULES, loggedText, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';
 export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';

package/dist/sandbox/levels.d.ts

@@ -0,0 +1,10 @@
+import type { ConsoleDetail } from '@fusion.dev/helix-core';
+/** A console level, from the quietest to the loudest. */
+export type ConsoleLevel = ConsoleDetail['level'];
+/** The four levels in order, the quietest first. */
+export declare const LEVELS: readonly ConsoleLevel[];
+/**
+ * Whether a line at `level` shows under a terminal's `level`, which is the
+ * quietest it shows. No floor, or one that names no level, shows every line.
+ */
+export declare const shows: (level: ConsoleLevel, floor: string | undefined) => boolean;

package/dist/sandbox/levels.js

@@ -0,0 +1,5 @@
+export const LEVELS = ['log', 'info', 'warn', 'error'];
+export const shows = (level, floor) => {
+    const from = LEVELS.indexOf(floor);
+    return from < 0 || LEVELS.indexOf(level) >= from;
+};

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

@@ -36,7 +36,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves in the source. The source pane dispatches it, and you can listen for it on the sandbox.
  * @event {HelixConsoleEvent} helix-console - Fired once per console call in the preview frame. The preview pane dispatches it.
+ * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source. The source pane dispatches it, and you can listen for it on the sandbox.
+ * @event {HelixPanelResizeEvent} helix-panel-resize - Fired after the panel's divider settled at a new height, with the height in pixels.
  * @event {HelixResizeEvent} helix-resize - Fired by the preview pane when the height of the frame's content changes, with the new height.
+ * @event {HelixSplitEvent} helix-split - Fired after the panes' divider settled somewhere new, with the lead pane's share.
  *
  * @csspart body - The splitter holding the panes above the panel.
  * @csspart corner - The handle where the two dividers cross.

package/dist/sandbox/root/sandbox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, requestChange, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -164,7 +164,8 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         return this.orientation ?? 'horizontal';
     }
     requestSplit(next) {
-        return requestChange({
+        const was = this.split;
+        const accepted = requestChange({
             apply: (value) => {
                 this.split = value;
             },
@@ -172,9 +173,14 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             host: this,
             next,
         });
+        if (accepted && this.split !== was) {
+            this.dispatchEvent(new HelixSplitEvent({ value: String(this.split) }));
+        }
+        return accepted;
     }
     requestPanelSize(next) {
-        return requestChange({
+        const was = this.panelSize;
+        const accepted = requestChange({
             apply: (value) => {
                 this.panelSize = value;
             },
@@ -182,6 +188,10 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             host: this,
             next,
         });
+        if (accepted && this.panelSize !== was) {
+            this.dispatchEvent(new HelixPanelResizeEvent({ value: String(this.panelSize) }));
+        }
+        return accepted;
     }
     answer(divider, position) {
         const target = divider;

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. Cancelable: cancel it to keep the source unchanged.
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
+ * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source.
  *
  * @csspart source - The editable region.
  *

package/dist/sandbox/source/sandbox-source.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixBeforeEditEvent, HelixCaretEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './sandbox-source.css.js';
@@ -13,7 +13,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
         this.fieldLabel = 'Example source';
-        this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab.';
+        this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab, or press Shift+Tab to go back.';
         this.name = 'html';
         this.tabIndents = true;
         this.value = '';
@@ -55,10 +55,14 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     edit(field, next) {
         const request = new HelixBeforeEditEvent({ value: next });
-        if (this.dispatchEvent(request)) {
+        const accepted = this.dispatchEvent(request);
+        if (accepted) {
             this.value = next;
         }
         restoreValue(field, this.value);
+        if (accepted) {
+            this.dispatchEvent(new HelixEditEvent({ value: next }));
+        }
     }
     render() {
         return html `<textarea

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

@@ -7,6 +7,45 @@ grid-template-rows: minmax(0, 1fr);
 min-block-size: 0;
 }
 
+:host([controls]) {
+grid-template-rows: auto minmax(0, 1fr);
+}
+
+[part="controls"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-xs);
+justify-content: space-between;
+padding: var(--helix-space-2xs) var(--helix-space-sm);
+}
+
+[part="filter"],
+[part="clear"] {
+background-color: transparent;
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground);
+font: inherit;
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+[part="clear"] {
+cursor: pointer;
+}
+
+[part="clear"]:hover {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="filter"]:focus-visible,
+[part="clear"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 [part="log"] {
 font-family: var(--helix-font-mono);
 font-size: var(--helix-text-xs);

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

@@ -1,5 +1,6 @@
 import { type ConsoleDetail, HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
+import { type ConsoleLevel } from '../levels.js';
 /**
  * @summary A panel that shows what the previewed example wrote to the console.
  *
@@ -17,14 +18,21 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * level is read before it, except a plain `log`, so an error does not sound
  * like any other line.
  *
+ * **`controls` adds a clear button and a level filter** above the log. Both
+ * are also yours to drive without them: `clear()` empties the log, and
+ * `level` hides the quieter lines.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Console, Output
  * @documentation https://fusion.dev/helix/components/sandbox
  *
+ * @csspart clear - The button that empties the log, under `controls`.
+ * @csspart controls - The row holding the clear button and the level filter, under `controls`.
  * @csspart count - How many times a repeated line was written.
- * @csspart empty - Shown while nothing has been written.
+ * @csspart empty - Shown while nothing has been written, or while the level filter hides every line.
  * @csspart entry - One line.
+ * @csspart filter - The level filter, a native select, under `controls`.
  * @csspart level - The console level a line was written at.
  * @csspart log - The scrolling region.
  * @csspart message - The text of a line.
@@ -32,6 +40,17 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssproperty --sandbox-terminal-size - Height of the scrolling region.
  */
 export declare class HelixSandboxTerminal extends HelixElement {
+    /**
+     * The clear button's text, under `controls`.
+     */
+    clearLabel: string;
+    /**
+     * Shows a clear button and a level filter above the log.
+     *
+     * Off by default, because a sandbox that puts the terminal in a panel often
+     * has a toolbar of its own for them.
+     */
+    controls: boolean;
     /**
      * Text shown before anything has been written.
      */
@@ -40,6 +59,24 @@ export declare class HelixSandboxTerminal extends HelixElement {
      * The log's name, read by screen readers.
      */
     label: string;
+    /**
+     * The quietest level shown: `info` hides plain logs, `warn` shows warnings
+     * and errors, and `error` shows errors only. Absent shows every line.
+     *
+     * Lines it hides are kept, so lowering it shows them again. The filter under
+     * `controls` sets it.
+     */
+    level?: ConsoleLevel | undefined;
+    /**
+     * The level filter's name, read by screen readers, under `controls`.
+     */
+    levelLabel: string;
+    /**
+     * What each choice of the level filter reads, for a page in another
+     * language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
+     * its English words. As an attribute it is that object as JSON.
+     */
+    levelWords: Partial<Record<ConsoleLevel, string>>;
     private entries;
     /**
      * Whether the reader is at the bottom, and so wants to follow new output.
@@ -61,6 +98,10 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /** Empties the log. */
     clear(): void;
     protected updated(): void;
+    /** Takes the level the reader chose in the filter. */
+    private readonly handleLevel;
+    /** The clear button and the level filter, under `controls`. */
+    private renderControls;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

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

@@ -7,15 +7,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { LEVELS, shows } from '../levels.js';
 import { styles } from './sandbox-terminal.css.js';
+const LEVEL_WORDS = {
+    error: 'Errors',
+    info: 'Info and above',
+    log: 'All levels',
+    warn: 'Warnings and errors',
+};
 const LIMIT = 200;
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     constructor() {
         super(...arguments);
+        this.clearLabel = 'Clear';
+        this.controls = false;
         this.emptyLabel = 'Nothing written to the console yet.';
         this.label = 'Console output';
+        this.levelLabel = 'Levels shown';
+        this.levelWords = {};
         this.entries = [];
         this.following = true;
+        this.handleLevel = (event) => {
+            const chosen = event.target.value;
+            this.level = chosen === 'log' ? undefined : chosen;
+        };
     }
     get log() {
         return this.renderRoot.querySelector('[part="log"]');
@@ -44,11 +59,25 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             }
         }
     }
+    renderControls() {
+        if (!this.controls) {
+            return nothing;
+        }
+        return html `<div part="controls">
+      <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel}>
+        ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
+              ${this.levelWords[one] ?? LEVEL_WORDS[one]}
+            </option>`)}
+      </select>
+      <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
+    </div>`;
+    }
     render() {
-        return html `<div part="log" role="log" aria-label=${this.label} tabindex="0">
-      ${this.entries.length === 0
+        const shown = this.entries.filter((entry) => shows(entry.level, this.level));
+        return html `${this.renderControls()}<div part="log" role="log" aria-label=${this.label} tabindex="0">
+      ${shown.length === 0
             ? html `<p part="empty">${this.emptyLabel}</p>`
-            : this.entries.map((entry) => html `<div part="entry" data-level=${entry.level}>
+            : shown.map((entry) => html `<div part="entry" data-level=${entry.level}>
                 <span part="level" aria-hidden=${entry.level === 'log' ? 'true' : nothing}
                   >${entry.level}</span
                 >
@@ -63,12 +92,27 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'clear-label' })
+], HelixSandboxTerminal.prototype, "clearLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixSandboxTerminal.prototype, "controls", void 0);
 __decorate([
     property({ attribute: 'empty-label' })
 ], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
 __decorate([
     property()
 ], HelixSandboxTerminal.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixSandboxTerminal.prototype, "level", void 0);
+__decorate([
+    property({ attribute: 'level-label' })
+], HelixSandboxTerminal.prototype, "levelLabel", void 0);
+__decorate([
+    property({ attribute: 'level-words', type: Object })
+], HelixSandboxTerminal.prototype, "levelWords", void 0);
 __decorate([
     state()
 ], HelixSandboxTerminal.prototype, "entries", void 0);

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

@@ -21,6 +21,87 @@ var(--scroll-area-track-color, transparent);
 scrollbar-width: var(--scroll-area-scrollbar, thin);
 }
 
+:host([scrollbars]) [part="viewport"] {
+scrollbar-width: none;
+}
+
+[part~="scrollbar"] {
+--_scroll-area-thumb: max(
+var(--scroll-area-thumb-min-size, var(--helix-space-lg)),
+var(--scroll-area-thumb-fraction, 1) *
+100%
+);
+background-color: var(--scroll-area-track-color, transparent);
+opacity: 0;
+position: absolute;
+touch-action: none;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+user-select: none;
+
+z-index: calc(var(--helix-layer-raised) + 1);
+}
+
+[part~="scrollbar-visible"] {
+opacity: 1;
+}
+
+[part~="scrollbar-vertical"] {
+inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block: 0;
+inset-inline-end: 0;
+}
+
+[part~="scrollbar-horizontal"] {
+block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block-end: 0;
+inset-inline: 0;
+}
+
+:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {
+inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+}
+
+:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {
+inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+}
+
+[part~="thumb"] {
+background-color: var(--scroll-area-thumb-color, var(--helix-color-border));
+border-radius: var(--helix-radii-full);
+position: absolute;
+}
+
+[part~="thumb"]:hover {
+background-color: var(--scroll-area-thumb-hover-color, var(--helix-color-foreground-subtle));
+}
+
+[part~="thumb-vertical"] {
+block-size: var(--_scroll-area-thumb);
+inset-block-start: calc(
+var(--scroll-area-scroll-fraction, 0) *
+(100% - var(--_scroll-area-thumb))
+);
+inset-inline: var(--helix-border-thick);
+}
+
+[part~="thumb-horizontal"] {
+inline-size: var(--_scroll-area-thumb);
+inset-block: var(--helix-border-thick);
+inset-inline-start: calc(
+var(--scroll-area-scroll-fraction, 0) *
+(100% - var(--_scroll-area-thumb))
+);
+}
+
+[part="corner"] {
+background-color: var(--scroll-area-track-color, transparent);
+block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block-end: 0;
+inset-inline-end: 0;
+position: absolute;
+}
+
 :host::before,
 :host::after {
 content: "";
@@ -110,7 +191,8 @@ opacity: 1;
 :host::before,
 :host::after,
 [part="edges"]::before,
-[part="edges"]::after {
+[part="edges"]::after,
+[part~="scrollbar"] {
 transition: none;
 }
 }

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

@@ -8,6 +8,9 @@ import type { CSSResultGroup } from 'lit';
  * styled to match the design system. The base class measures which edges have
  * content past them.
  *
+ * Under `scrollbars`, the browser's scrollbar is hidden and the component's own
+ * are drawn over the content at the edge, in the same colors.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -21,7 +24,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --scroll-area-fade-inline-end - The depth of the fade at the inline end, or `0` to remove it.
  * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
  * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
+ * @cssproperty --scroll-area-scrollbar-size - The thickness of each scrollbar drawn under `scrollbars`, and the size of the corner.
  * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb.
+ * @cssproperty --scroll-area-thumb-hover-color - The color of a thumb drawn under `scrollbars` while the pointer is over it.
+ * @cssproperty --scroll-area-thumb-min-size - The shortest a thumb drawn under `scrollbars` gets, however long the content.
  * @cssproperty --scroll-area-track-color - The color of the scrollbar's track.
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {