@fusion.dev/helix 0.147.0 → 0.149.0

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

@@ -7,6 +7,10 @@ import type { CSSResultGroup } from 'lit';
  * The toolbar draws no frame of its own, so it does not add a second frame
  * inside whatever already frames the bar.
  *
+ * Its controls are the small size, since a toolbar is dense by nature, and a
+ * control added later takes it without being told. `size="md"` or `"lg"`
+ * makes every control in it larger together.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -28,6 +32,11 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;
+    /**
+     * The size of every control in the toolbar: their height, icons, boxes and
+     * tags. Unset is the small size, as a toolbar is dense by nature.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/root/toolbar-root.js

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToolbar } from '@fusion.dev/helix-headless/toolbar';
+import { property } from 'lit/decorators.js';
 import { styles } from './toolbar-root.css.js';
 let HelixToolbar = class HelixToolbar extends HelixHeadlessToolbar {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixToolbar.prototype, "size", void 0);
 HelixToolbar = __decorate([
     customElement('helix-toolbar')
 ], HelixToolbar);

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

@@ -4,6 +4,15 @@ import type { CSSResultGroup } from 'lit';
  * @summary A short text that appears next to an element on hover and focus.
  *
  * @description
+ * Place the tooltip beside its trigger, name the trigger with `for`, and name
+ * the tooltip in the trigger's `aria-describedby`, so the trigger is described
+ * in the server's markup and at rest:
+ *
+ * ```html
+ * <helix-button aria-describedby="save-tip" id="save">Save</helix-button>
+ * <helix-tooltip content="Save your work" for="save" id="save-tip"></helix-tooltip>
+ * ```
+ *
  * The bubble is in the top layer, so it needs no `z-index` and no container
  * clips it.
  *

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

@@ -20,6 +20,8 @@ slot[name="end"]::slotted(*) {flex: 0 0 auto;}slot[name="end"] {align-items: cen
 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;}}[part="toggle"] {align-self: center;margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);}slot[name="chevron"]::slotted(*) {align-self: center;block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard);}:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {transform: rotate(90deg);}:host(:state(open)) slot[name="chevron"]::slotted(*) {transform: rotate(0deg);}[part~="checkbox"] {align-self: center;background-color: var(--tree-checkbox-background-color, var(--helix-color-background));block-size: var(--tree-checkbox-size, var(--_tree-chevron));border: var(--helix-border-thin) solid
 var(--tree-checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));display: grid;flex: 0 0 auto;inline-size: var(--tree-checkbox-size, var(--_tree-chevron));place-items: center;}[part~="checkbox-checked"],
-[part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground));}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%;}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5);}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted));}:host(:state(loading)) [part="toggle"],
+[part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground));}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%;}[part="grip"] {align-items: center;color: var(--tree-grip-color, var(--helix-color-foreground-subtle));cursor: grab;display: inline-flex;flex: 0 0 auto;order: 3;touch-action: none;}[part="grip"]:active {cursor: grabbing;}[part="grip-mark"] {block-size: var(--_tree-chevron);inline-size: var(--_tree-chevron);}:host(:state(dragging)) [part="item"] {opacity: var(--tree-dragging-opacity, 0.5);}:host(:state(drop-before)) [part="item"],
+:host(:state(drop-after)) [part="item"] {position: relative;}:host(:state(drop-before)) [part="item"]::before,
+:host(:state(drop-after)) [part="item"]::after {background-color: var(--tree-drop-indicator-color, var(--helix-color-primary));block-size: var(--tree-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1;}:host(:state(drop-before)) [part="item"]::before {inset-block-start: 0;}:host(:state(drop-after)) [part="item"]::after {inset-block-end: 0;}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5);}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted));}:host(:state(loading)) [part="toggle"],
 :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate;}@keyframes tree-loading {to {opacity: 0.3;}}@media (prefers-reduced-motion: reduce) {:host(:state(loading)) [part="toggle"],
 :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: none;}}`);

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

@@ -25,6 +25,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart checkbox - The check mark's box, in a tree with `selection-mode="multiple"`.
  * @csspart checkbox-checked - The check mark's box while the item is checked.
  * @csspart checkbox-mixed - The check mark's box while some of a branch's items are checked.
+ * @csspart grip - The handle a pointer drags to move the item, in a `reorderable` tree.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target.
  * @csspart label - The label text.
@@ -37,7 +39,11 @@ import type { CSSResultGroup } from 'lit';
  *   branch.
  * @cssproperty --tree-checkbox-size - Size of the check mark's box. Follows the chevron's size.
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-dragging-opacity - The opacity of an item being moved, in a `reorderable` tree.
+ * @cssproperty --tree-drop-indicator-color - The color of the line where a moved item would land.
+ * @cssproperty --tree-drop-indicator-size - The thickness of the line where a moved item would land.
  * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-grip-color - The color of the grip, in a `reorderable` tree.
  * @cssproperty --tree-indent - Indent added per level.
  * @cssproperty --tree-row-checked-background-color - Fill of a checked row, in a tree with `selection-mode="multiple"`. Unset, the box alone marks it.
  * @cssproperty --tree-row-checked-color - Text color of a checked row, in a tree with `selection-mode="multiple"`.

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

@@ -1,2 +1,3 @@
 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);}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs);}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-subtle);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide);}:host([loading]) [part="tree"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);
+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);}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs);}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-subtle);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide);}:host([loading]) [part="tree"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--tree-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--tree-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--tree-drag-preview-border-color, var(--helix-color-border));border-radius: var(--tree-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--tree-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--tree-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -17,12 +17,19 @@ import type { CSSResultGroup } from 'lit';
  *
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. The item sends it, and you can listen for it on the tree. Cancelable: canceling it changes nothing.
  *
- * @csspart live - A copy of the empty and loading messages, in a live region that announces them when they change. Visually hidden in the styled tier.
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the item is let go, in a `reorderable` tree. Hidden from assistive technology.
+ * @csspart live - A copy of the empty and loading messages, and each step of a move in a `reorderable` tree, in a live region that announces them when they change. Visually hidden in the styled tier.
  * @csspart tree - The tree container.
  *
  * @cssproperty --tree-chevron-gap - The space before the chevron. Set from `chevron-placement`.
  * @cssproperty --tree-chevron-order - The chevron's order in the row. Set from `chevron-placement` and read by each item.
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-drag-preview-background-color - The fill behind the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-border-color - The color of the edge around the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-border-width - The width of the edge around the copy of an item a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --tree-drag-preview-opacity - The opacity of the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-radius - The corner radius of the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-shadow - The shadow that raises the copy of an item a pointer drags over the page.
  * @cssproperty --tree-gap - Space between rows.
  * @cssproperty --tree-indent - Indent added per level.
  * @cssproperty --tree-row-size - Minimum height of a row, so rows with and without an icon match.

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

@@ -1,5 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--helix-color-border) transparent;scrollbar-width: thin;}::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(
+export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--virtual-list-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color))
+var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;}[part="viewport"]:hover {scrollbar-color: var(
+--virtual-list-scrollbar-thumb-hover-color,
+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)
 );}[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"],

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

@@ -24,6 +24,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
  * @cssproperty --virtual-list-loading-color - The color of the text in the row drawn while `loading` is set.
  * @cssproperty --virtual-list-loading-padding - The space around the text in the row drawn while `loading` is set.
+ * @cssproperty --virtual-list-scrollbar-thumb-color - The thumb of the list's scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --virtual-list-scrollbar-thumb-hover-color - The thumb while the pointer is over the list. Defaults to `--helix-scrollbar-thumb-hover-color`.
+ * @cssproperty --virtual-list-scrollbar-track-color - The track of the list's scrollbar. Defaults to `--helix-scrollbar-track-color`.
  * @cssproperty --virtual-list-selected-background-color - The fill behind a chosen row, in a list with `selection-mode`.
  */
 export declare class HelixVirtualList extends HelixHeadlessVirtualList {