@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -13,8 +13,10 @@ outline: none;
 [part="row"] {
 
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+
+background-color: var(--_tree-row-fill, transparent);
+border-radius: var(--tree-row-radius, var(--helix-radii-sm));
+color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));
 cursor: pointer;
 display: flex;
 
@@ -50,7 +52,10 @@ var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs)))
 }
 
 [part="row"]:has([part="toggle"]) {
-color: var(--_tree-heading-ink, var(--helix-color-foreground-muted));
+color: var(
+--_tree-row-ink,
+var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted)))
+);
 font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-sm)));
 font-weight: var(--helix-weight-medium);
 letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal));
@@ -65,13 +70,18 @@ slot[name="children"]::slotted(*) {
 }
 
 [part="row"]:hover {
-background-color: var(--helix-color-surface-raised);
-color: var(--helix-color-foreground);
+background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));
+color: var(--tree-row-hover-color, var(--helix-color-foreground));
 }
 
 :host(:state(selected)) [part="row"] {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
+background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));
+color: var(--tree-row-selected-color, var(--helix-color-foreground));
+}
+
+:host(:state(checked)) [part="row"] {
+--_tree-row-fill: var(--tree-row-checked-background-color, transparent);
+--_tree-row-ink: var(--tree-row-checked-color);
 }
 
 [part="item"]:focus-visible [part="row"],
@@ -166,4 +176,76 @@ grid-template-rows: 0fr;
 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"],
+: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

@@ -16,19 +16,38 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tree
  *
  * @slot - The item's label.
+ * @slot chevron - Replaces the expand and collapse mark of a branch. A slotted icon is sized and
+ *   turned like the drawn one.
  * @slot children - Nested items, which make this a branch.
  *
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen, and cancelable. Canceling it changes nothing.
  *
+ * @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 group - The container for nested items.
  * @csspart item - The node, and the focus target.
  * @csspart label - The label text.
  * @csspart row - The clickable label row.
  * @csspart toggle - The expand and collapse control.
  *
+ * @cssproperty --tree-checkbox-background-color - Fill of the check mark's box.
+ * @cssproperty --tree-checkbox-border-color - Border of the check mark's box.
+ * @cssproperty --tree-checkbox-mark-color - Color of the check, and of the bar of a partly checked
+ *   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-gap - Space between rows.
  * @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"`.
+ * @cssproperty --tree-row-color - Text color of a row at rest.
+ * @cssproperty --tree-row-disabled-opacity - How faint a disabled row is drawn.
+ * @cssproperty --tree-row-hover-background-color - Fill of a row under the pointer.
+ * @cssproperty --tree-row-hover-color - Text color of a row under the pointer.
+ * @cssproperty --tree-row-radius - Corners of a row's fill.
+ * @cssproperty --tree-row-selected-background-color - Fill of the chosen row, in a tree of one choice.
+ * @cssproperty --tree-row-selected-color - Text color of the chosen row, in a tree of one choice.
  * @cssproperty --tree-row-size - Minimum height of a row, so rows with and without an icon match.
  */
 export declare class HelixTreeItem extends HelixHeadlessTreeItem {

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

@@ -18,20 +18,18 @@ color: var(--trend-color, var(--_trend-color));
 --icon-size: var(--trend-icon-size, 1em);
 }
 
-slot[name="icon"]::slotted(*) {
+slot[name$="icon"]::slotted(*) {
 --icon-size: var(--trend-icon-size, 1em);
 
 block-size: var(--trend-icon-size, 1em);
 inline-size: var(--trend-icon-size, 1em);
 }
 
-:host([direction="up"][good="up"]),
-:host([direction="down"][good="down"]) {
+:host(:state(better)) {
 --_trend-color: var(--trend-better-color, var(--helix-color-success));
 }
 
-:host([direction="up"][good="down"]),
-:host([direction="down"][good="up"]) {
+:host(:state(worse)) {
 --_trend-color: var(--trend-worse-color, var(--helix-color-danger));
 }
 

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * no surface for material, and no area for a wash. The text weight comes from
  * `Text` and the size from the region.
  *
- * The meaning axis is derived: `direction` and `good` resolve to success,
+ * The meaning axis is derived: `movement` and `good` resolve to success,
  * danger, or muted, so you state the metric's polarity once. There is no
  * `tone`, because a declared tone could disagree with the arrow.
  *
@@ -27,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --trend-better-color - Color of a move that `good` says is an improvement.
  * @cssproperty --trend-color - Color of the arrow. Setting it overrides the color that `good` sets.
  * @cssproperty --trend-gap - Space between the arrow, the metric and the label.
- * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in the `icon` slot.
+ * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in one of the icon slots.
  * @cssproperty --trend-label-color - Color of the label.
  * @cssproperty --trend-neutral-color - Color of a trend that `good` does not judge, or one that did not move.
  * @cssproperty --trend-worse-color - Color of a move that `good` says is a setback.

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

@@ -104,6 +104,12 @@ min-block-size: var(--helix-size-icon-loose);
 min-inline-size: var(--helix-size-icon-loose);
 }
 
+slot[name$="-icon"]::slotted(*) {
+block-size: var(--icon-size, var(--helix-size-icon));
+flex: 0 0 auto;
+inline-size: var(--icon-size, var(--helix-size-icon));
+}
+
 [part="controls"] :where(a, button):focus-visible,
 [part="scrubber"]:focus-visible,
 [part="volume"]:focus-visible {

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

@@ -15,6 +15,9 @@ import '../../menu/index.js';
  * shows again when the pointer moves, and whenever anything inside it has
  * focus, so you can reach it with the keyboard. A paused video keeps its bar.
  *
+ * An icon put in one of the `-icon` slots is drawn at the size of the glyph it
+ * replaces, and in the control's color.
+ *
  * @since 0.1.0
  * @status stable
  * @category media

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

@@ -12,6 +12,25 @@ overscroll-behavior: contain;
 padding-inline: var(--helix-size-focus-reach);
 }
 
+::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"],
 [part="before"] {
 flex: none;

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

@@ -4,9 +4,12 @@ import type { CSSResultGroup } from 'lit';
  * @summary A list that renders only the rows of a long set that are on screen.
  *
  * @description
- * The styled tier styles only the scrolling box. Rows are your markup in the
- * light DOM, so your stylesheet styles them the same as any other content, and
- * this tier sets no rules for them.
+ * The styled tier styles the scrolling box and draws the focus ring on the row
+ * holding focus. Rows are your markup in the light DOM, so your stylesheet
+ * styles them the same as any other content, and a rule of yours on a row wins
+ * over the ring. While `loading` is set, a muted, centered row after the last
+ * item says "Loading more". In a list with `selection-mode`, a chosen row takes
+ * the fill a chosen List row takes.
  *
  * @category layout
  * @since 0.1.0
@@ -15,9 +18,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart after - The space that stands in for the rows below the rendered ones.
  * @csspart before - The space that stands in for the rows above the rendered ones.
+ * @csspart loading - The row after the last item while `loading` is set.
  * @csspart viewport - The scrolling box.
  *
  * @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-selected-background-color - The fill behind a chosen row, in a list with `selection-mode`.
  */
 export declare class HelixVirtualList extends HelixHeadlessVirtualList {
     static styles: CSSResultGroup;