@fusion.dev/helix 0.162.1 → 0.164.0

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

@@ -4,9 +4,9 @@ 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, formatWords, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, requestChange, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { styles } from './sandbox-root.css.js';
 const DEFAULT_SPLIT = 50;
@@ -14,12 +14,21 @@ const DEFAULT_PANEL = 160;
 const PANEL_MAX = 0.8;
 const PANE_KEYS = { css: 'styles', html: 'source', js: 'script' };
 const isPaneName = (name) => typeof name === 'string' && Object.hasOwn(PANE_KEYS, name);
+const nameOf = (pane) => {
+    const { name } = pane;
+    return typeof name === 'string' ? name : (pane.getAttribute('name') ?? '');
+};
+const fileOf = (pane) => {
+    const { label } = pane;
+    return (typeof label === 'string' && label) || pane.getAttribute('label') || nameOf(pane);
+};
 let HelixSandbox = class HelixSandbox extends HelixElement {
     constructor() {
         super(...arguments);
         this.cornerLabel = 'Resize panes and panel';
         this.defaultPanelSize = DEFAULT_PANEL;
         this.defaultSplit = DEFAULT_SPLIT;
+        this.filesLabel = 'Files';
         this.lead = 'source';
         this.panelCollapsedSize = 0;
         this.panelLabel = 'Resize panel';
@@ -27,6 +36,29 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.separatorLabel = '{pane, select, preview {Resize preview pane} other {Resize source pane}}';
         this.split = DEFAULT_SPLIT;
         this.hasPanel = false;
+        this.files = [];
+        this.hid = new Set();
+        this.handleFileKey = (event) => {
+            const files = this.files;
+            const at = files.indexOf(this.shownFile);
+            const step = inlineStep(this, event.key);
+            const to = event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? files.length - 1
+                    : step === 0
+                        ? -1
+                        : (at + step + files.length) % files.length;
+            const pane = files[to];
+            if (!pane) {
+                return;
+            }
+            event.preventDefault();
+            this.chooseFile(pane);
+            void this.updateComplete.then(() => {
+                this.renderRoot.querySelector(`[part="file"][aria-selected="true"]`)?.focus();
+            });
+        };
         this.bodyHeight = 0;
         this.watch = typeof ResizeObserver === 'undefined'
             ? undefined
@@ -50,6 +82,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             });
         };
         this.seed = () => {
+            this.readFiles();
             const slot = this.renderRoot.querySelector('slot[name="source"]');
             for (const pane of slot?.assignedElements({ flatten: true }) ?? []) {
                 const { name, value } = pane;
@@ -117,6 +150,53 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         };
     }
     static { this.words = 'helix-sandbox'; }
+    get shownFile() {
+        return this.files.find((pane) => nameOf(pane) === this.file) ?? this.files[0];
+    }
+    readFiles() {
+        const slot = this.renderRoot.querySelector('slot[name="source"]');
+        const panes = slot?.assignedElements({ flatten: true }) ?? [];
+        const files = panes.length > 1 ? panes : [];
+        if (files.length !== this.files.length || files.some((pane, at) => pane !== this.files[at])) {
+            this.files = files;
+        }
+    }
+    chooseFile(pane) {
+        if (pane !== this.shownFile) {
+            requestValue(this, nameOf(pane), (name) => {
+                this.file = name;
+            });
+        }
+    }
+    renderFiles() {
+        if (this.files.length === 0) {
+            return nothing;
+        }
+        const shown = this.shownFile;
+        return html `<div part="files" role="tablist" aria-label=${this.filesLabel} @keydown=${this.handleFileKey}>
+      ${this.files.map((pane, at) => {
+            const selected = pane === shown;
+            return html `<button part="file" id=${`file-${at}`} role="tab" type="button"
+          aria-controls="files-panel" aria-selected=${selected ? 'true' : 'false'}
+          tabindex=${selected ? '0' : '-1'} @click=${() => this.chooseFile(pane)}>${fileOf(pane)}</button>`;
+        })}
+    </div>`;
+    }
+    showFile() {
+        const shown = this.shownFile;
+        for (const pane of this.files) {
+            if (pane !== shown && !pane.hasAttribute('hidden')) {
+                pane.setAttribute('hidden', '');
+                this.hid.add(pane);
+            }
+        }
+        for (const pane of this.hid) {
+            if (pane === shown || !this.files.includes(pane)) {
+                pane.removeAttribute('hidden');
+                this.hid.delete(pane);
+            }
+        }
+    }
     shareOf(size) {
         if (this.bodyHeight <= 0) {
             return 0;
@@ -293,6 +373,23 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.removeEventListener('helix-before-edit', this.handleSourceChange);
         this.watch?.disconnect();
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('files') || changed.has('file')) {
+            this.showFile();
+        }
+    }
+    renderPane(name, at) {
+        const slot = html `<slot name=${name} @slotchange=${this.seed}></slot>`;
+        if (name === 'preview' || this.files.length === 0) {
+            return html `<div part="pane" data-pane=${name} slot=${at}>${slot}</div>`;
+        }
+        const tab = `file-${this.files.indexOf(this.shownFile)}`;
+        return html `<div part="pane" data-pane=${name} data-files slot=${at}>
+      ${this.renderFiles()}
+      <div id="files-panel" role="tabpanel" aria-labelledby=${tab}>${slot}</div>
+    </div>`;
+    }
     render() {
         const vertical = this.axis === 'vertical';
         const first = this.lead === 'preview' ? 'preview' : 'source';
@@ -311,8 +408,8 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
           label=${label} orientation=${vertical ? 'vertical' : 'horizontal'} .position=${split}
           @helix-before-collapse=${this.handleCollapse} @helix-before-resize=${this.handlePanesChange}
           @keydown=${this.handleDividerKey}>
-          <div part="pane" data-pane=${first} slot="start"><slot name=${first} @slotchange=${this.seed}></slot></div>
-          <div part="pane" data-pane=${second} slot="end"><slot name=${second} @slotchange=${this.seed}></slot></div>
+          ${this.renderPane(first, 'start')}
+          ${this.renderPane(second, 'end')}
         </helix-splitter>
         <div part="panel" slot="end"><slot name="panel" @slotchange=${this.readPanel}></slot></div>
       </helix-splitter>
@@ -330,6 +427,13 @@ __decorate([
 __decorate([
     property({ attribute: 'default-split', type: Number })
 ], HelixSandbox.prototype, "defaultSplit", void 0);
+__decorate([
+    property()
+], HelixSandbox.prototype, "file", void 0);
+__decorate([
+    words,
+    property({ attribute: 'files-label' })
+], HelixSandbox.prototype, "filesLabel", void 0);
 __decorate([
     property()
 ], HelixSandbox.prototype, "lead", void 0);
@@ -356,6 +460,9 @@ __decorate([
 __decorate([
     state()
 ], HelixSandbox.prototype, "hasPanel", void 0);
+__decorate([
+    state()
+], HelixSandbox.prototype, "files", void 0);
 HelixSandbox = __decorate([
     customElement('helix-sandbox')
 ], HelixSandbox);

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

@@ -63,6 +63,11 @@ export declare class HelixSandboxSource extends HelixElement {
      * The field's description, read by screen readers while Tab indents.
      */
     keysDescription: string;
+    /**
+     * The pane's file name, such as `index.html`, on its tab where a sandbox
+     * holds several panes. Empty puts the pane's `name` on the tab.
+     */
+    label: string;
     /**
      * Which source this pane holds. Every `helix-before-edit` event includes it.
      *

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

@@ -15,6 +15,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         super(...arguments);
         this.fieldLabel = 'Example source';
         this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab, or press Shift+Tab to go back.';
+        this.label = '';
         this.name = 'html';
         this.tabIndents = true;
         this.value = '';
@@ -115,6 +116,9 @@ __decorate([
     words,
     property({ attribute: 'keys-description' })
 ], HelixSandboxSource.prototype, "keysDescription", void 0);
+__decorate([
+    property()
+], HelixSandboxSource.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "name", void 0);

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -10,5 +10,7 @@ color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 );}[part~="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="item"][aria-current="true"] {background-color: var(
 --video-playlist-item-current-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
-);color: var(--helix-color-foreground);}[part~="item"][aria-current="true"]::before {background-color: var(--video-playlist-item-current-mark-color, var(--helix-color-primary));border-radius: var(--helix-radii-full);content: "";inline-size: var(--helix-border-thick);inset-block: var(--helix-space-2xs);inset-inline-start: var(--helix-space-2xs);position: absolute;}:host([disabled]) [part~="item"] {cursor: not-allowed;opacity: 0.5;}[part="media"] {aspect-ratio: var(--video-playlist-media-aspect-ratio, 16 / 9);border-radius: var(--video-playlist-media-radius, var(--helix-radii-sm));flex: 0 0 auto;inline-size: var(--video-playlist-media-size, 5rem);overflow: hidden;}[part="media"] ::slotted(*),
+);color: var(--helix-color-foreground);}[part~="item"][aria-current="true"]::before {background-color: var(--video-playlist-item-current-mark-color, var(--helix-color-primary));border-radius: var(--helix-radii-full);content: "";inline-size: var(--helix-border-thick);inset-block: var(--helix-space-2xs);inset-inline-start: var(--helix-space-2xs);position: absolute;}:host([disabled]) [part~="item"] {cursor: not-allowed;opacity: 0.5;}:host(:state(dragging)) {opacity: 0.5;}:host(:state(drop-before)),
+:host(:state(drop-after)) {position: relative;}:host(:state(drop-before))::before,
+:host(:state(drop-after))::before {background-color: var(--helix-color-primary);block-size: var(--helix-border-thick);content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1;}:host(:state(drop-before))::before {inset-block-start: 0;}:host(:state(drop-after))::before {inset-block-end: 0;}[part="media"] {aspect-ratio: var(--video-playlist-media-aspect-ratio, 16 / 9);border-radius: var(--video-playlist-media-radius, var(--helix-radii-sm));flex: 0 0 auto;inline-size: var(--video-playlist-media-size, 5rem);overflow: hidden;}[part="media"] ::slotted(*),
 [part="thumbnail"] {block-size: 100%;display: block;inline-size: 100%;object-fit: cover;}[part="label"] {color: var(--video-playlist-item-color, var(--helix-color-foreground));display: flex;flex-direction: column;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);min-inline-size: 0;}[part="label"] ::slotted([slot="meta"]) {color: var(--video-playlist-item-meta-color, var(--helix-color-foreground-subtle));font-size: var(--helix-text-xs);font-weight: var(--helix-weight-regular);}`);