@fusion.dev/helix 0.160.0 → 0.162.0

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: none;}@media print {:host {display: none;}}`);

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

@@ -0,0 +1,44 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup } from 'lit';
+import { nothing } from 'lit';
+import type { StrandsVariant } from '../path.js';
+/**
+ * @summary Pins a form of the ribbon to a section of the page.
+ *
+ * @description
+ * Placed inside a `helix-strands` with `travel`, a stop names an element with
+ * `for` and says which form the ribbon takes when the page reaches it: a `fan`
+ * bending through it, a `ribbon` passing through `at`, or `waves` crossing at
+ * its top edge. The stops are read in page order, whatever order they are
+ * written in, and a stop naming no element is skipped.
+ *
+ * A stop draws nothing itself and is never shown.
+ *
+ * **Every property is reflected**, because the parent watches its stops'
+ * attributes to lay the ribbon out again: a change made from script reaches the
+ * page as a change made in markup does. None has a default, so a stop writes
+ * nothing it was not given.
+ *
+ * @since 0.147.0
+ * @status experimental
+ * @documentation https://fusion.dev/helix/components/strands
+ */
+export declare class HelixStrandsStop extends HelixElement {
+    static styles: CSSResultGroup;
+    /**
+     * Where the form sits across the page, as a share of the width: the fan's
+     * bend or the ribbon's axis. A wave crosses the whole width and does not
+     * read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.
+     */
+    at?: number;
+    /** The id of the element the form is pinned to, in the same tree as the stop. */
+    for?: string;
+    /** The form the ribbon takes at the element. When it is not set, the form is `ribbon`. */
+    variant?: StrandsVariant;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-strands-stop': HelixStrandsStop;
+    }
+}

package/dist/strands/stop/strands-stop.js

@@ -0,0 +1,29 @@
+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 { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styles } from './strands-stop.css.js';
+let HelixStrandsStop = class HelixStrandsStop extends HelixElement {
+    static { this.styles = styles; }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixStrandsStop.prototype, "at", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixStrandsStop.prototype, "for", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixStrandsStop.prototype, "variant", void 0);
+HelixStrandsStop = __decorate([
+    customElement('helix-strands-stop')
+], HelixStrandsStop);
+export { HelixStrandsStop };

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

@@ -1,4 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="grip-head"]:focus-visible,
+export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="expand-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="expand-head"]:focus-visible,
+[part="grip-head"]:focus-visible,
 [part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));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="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
 var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

package/dist/table/row/table-row.css.js

@@ -1,19 +1,25 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part~="select"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-none) var(--helix-space-md);}:host(:state(selected)) [part~="select"],
+export const styles = createSheet(`:host {display: contents;}[part~="select"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part~="expand"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: calc((var(--table-row-level, 1) - 1) * var(--table-indent, var(--helix-space-lg)))
+var(--helix-space-xs);}:host(:state(selected)) [part~="select"],
+:host(:state(selected)) [part~="expand"],
 :host(:state(selected)) ::slotted(*) {background-color: color-mix(
 in srgb,
 var(--helix-color-primary) 10%,
 var(--helix-color-background)
 );}:host([disabled]) [part~="select"],
+:host([disabled]) [part~="expand"],
 :host([disabled]) ::slotted(*) {opacity: var(--table-row-disabled-opacity, 0.5);}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
 --table-row-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
-);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],
+);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="expand-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-expand-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;justify-content: center;}[part="expand-button"]:hover {color: var(--helix-color-foreground);}[part="expand-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="expand-mark"] {block-size: 1em;inline-size: 1em;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(expanded)) [part="expand-mark"] {rotate: 90deg;}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],
 :host(:state(dragging)) [part~="select"],
+:host(:state(dragging)) [part~="expand"],
 :host(:state(dragging)) ::slotted(*) {opacity: var(--table-dragging-opacity, 0.5);}:host(:state(drop-before)) [part~="grip"],
 :host(:state(drop-before)) [part~="select"],
+:host(:state(drop-before)) [part~="expand"],
 :host(:state(drop-before)) ::slotted(*) {box-shadow: inset 0 var(--table-drop-indicator-size, var(--helix-border-thick)) 0 0
 var(--table-drop-indicator-color, var(--helix-color-primary));}:host(:state(drop-after)) [part~="grip"],
 :host(:state(drop-after)) [part~="select"],
+:host(:state(drop-after)) [part~="expand"],
 :host(:state(drop-after)) ::slotted(*) {box-shadow: inset 0 calc(var(--table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0
 var(--table-drop-indicator-color, var(--helix-color-primary));}`);

package/dist/table/row/table-row.d.ts

@@ -19,8 +19,10 @@ import '../../checkbox/index.js';
  * @cssproperty --table-dragging-opacity - The opacity of a row being moved, in a `reorderable` table.
  * @cssproperty --table-drop-indicator-color - The color of the line where a moved row would land.
  * @cssproperty --table-drop-indicator-size - The thickness of the line where a moved row would land.
+ * @cssproperty --table-expand-color - The color of a row's disclosure button, in a table whose rows nest.
  * @cssproperty --table-grip-color - The color of a row's grip, in a `reorderable` table.
  * @cssproperty --table-grip-disabled-opacity - The opacity of a row's grip while a sort decides the order.
+ * @cssproperty --table-indent - How far each step of depth sets a nested row's disclosure cell in.
  * @cssproperty --table-row-disabled-opacity - The opacity of the cells of a `disabled` row.
  * @cssproperty --table-row-hover-background-color - The wash across the cells of a row with `href` under the pointer.
  */

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

@@ -1,5 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {column-gap: var(--timeline-column-gap, var(--helix-space-md));display: grid;grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));}[part="rail"] {align-items: var(--_timeline-rail-align, normal);display: grid;grid-column: var(--_timeline-rail-column, auto);grid-row: var(--_timeline-rail-row, 1 / -1);grid-template-columns: var(--_timeline-rail-columns, none);grid-template-rows: var(--_timeline-rail-rows, subgrid);justify-items: var(--_timeline-rail-justify, center);}[part="rail"]::before {background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: 100%;content: "";display: var(--_timeline-arrive-display, block);grid-column: 1;grid-row: 1;inline-size: var(--timeline-rail-size, var(--helix-border-thin));}:host(:first-child) [part="rail"]::before {visibility: hidden;}[part="rail"]::after {align-self: var(--_timeline-leave-align, stretch);background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: var(--_timeline-leave-block-size, auto);content: "";grid-column: var(--_timeline-leave-column, 1);grid-row: var(--_timeline-leave-row, 2);inline-size: var(
+export const styles = createSheet(`:host {column-gap: var(--timeline-column-gap, var(--helix-space-md));display: grid;grid-template-columns: var(--_timeline-columns, auto minmax(0, 1fr));grid-template-rows: var(--_timeline-rows, auto minmax(0, 1fr));}[part="rail"] {align-items: var(--_timeline-rail-align, normal);display: grid;grid-column: var(--_timeline-rail-column, auto);grid-row: var(--_timeline-rail-row, 1 / -1);grid-template-columns: var(--_timeline-rail-columns, none);grid-template-rows: var(--_timeline-rail-rows, subgrid);justify-items: var(--_timeline-rail-justify, center);}[part="rail"]::before {background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: 100%;content: "";display: var(--_timeline-arrive-display, block);grid-column: 1;grid-row: 1;inline-size: var(--timeline-rail-size, var(--helix-border-thin));}:host(:first-child) [part="rail"]::before {visibility: hidden;}:host([pending]) [part="rail"]::before {background-color: transparent;background-image: repeating-linear-gradient(
+to bottom,
+var(--timeline-rail-color, var(--helix-color-border)) 0 var(--helix-space-2xs),
+transparent var(--helix-space-2xs) var(--helix-space-xs)
+);}[part="rail"]::after {align-self: var(--_timeline-leave-align, stretch);background-color: var(--timeline-rail-color, var(--helix-color-border));block-size: var(--_timeline-leave-block-size, auto);content: "";grid-column: var(--_timeline-leave-column, 1);grid-row: var(--_timeline-leave-row, 2);inline-size: var(
 --_timeline-leave-inline-size,
 var(--timeline-rail-size, var(--helix-border-thin))
 );justify-self: var(--_timeline-leave-justify, auto);margin-block-start: var(

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;gap: var(--video-playlist-gap, var(--helix-space-md));grid-template-columns: var(--video-playlist-layout, 1fr);}[part="items"] {display: flex;flex-direction: column;gap: var(--video-playlist-items-gap, var(--helix-space-2xs));max-block-size: var(--video-playlist-size, 26rem);overflow-y: auto;}@media print {:host {display: none;}}`);
+export const styles = createSheet(`:host {display: grid;gap: var(--video-playlist-gap, var(--helix-space-md));grid-template-columns: var(--video-playlist-layout, 1fr);}[part="items"] {display: flex;flex-direction: column;gap: var(--video-playlist-items-gap, var(--helix-space-2xs));max-block-size: var(--video-playlist-size, 26rem);overflow-y: auto;}[part="empty"] {color: var(--video-playlist-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--video-playlist-empty-padding, var(--helix-space-md));text-align: center;}@media print {:host {display: none;}}`);

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -13,6 +13,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Playlist, Queue, Up next
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
+ * @cssproperty --video-playlist-empty-color - The color of the words shown while there are no entries.
+ * @cssproperty --video-playlist-empty-padding - The space around the words shown while there are no entries.
  * @cssproperty --video-playlist-gap - The space between the player and the list.
  * @cssproperty --video-playlist-items-gap - The space between the entries.
  * @cssproperty --video-playlist-layout - The grid columns for the player and the list.

package/dist/virtual-list/root/virtual-list-root.css.js

@@ -7,5 +7,5 @@ var(--helix-scrollbar-thumb-hover-color)
 var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));}::slotted([data-index]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}::slotted([aria-selected="true"]) {background-color: var(
 --virtual-list-selected-background-color,
 var(--helix-color-primary-subtle)
-);color: var(--virtual-list-selected-color, inherit);}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],
+);color: var(--virtual-list-selected-color, inherit);}::slotted([aria-disabled="true"]) {cursor: not-allowed;opacity: var(--virtual-list-disabled-opacity, 0.5);}[part="empty"] {color: var(--virtual-list-empty-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-empty-padding, var(--helix-space-md));text-align: center;}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],
 [part="before"] {flex: none;}@media print {:host {overflow: visible;}}`);

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -23,6 +23,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart viewport - The scrolling box.
  *
  * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
+ * @cssproperty --virtual-list-disabled-opacity - How faint a row `disabled-keys` names is drawn.
  * @cssproperty --virtual-list-empty-color - The color of the text in the row shown when there are no items.
  * @cssproperty --virtual-list-empty-padding - The space around the text in the row shown when there are no items.
  * @cssproperty --virtual-list-loading-color - The color of the text in the row drawn while `loading` is set.