@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -24,8 +24,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Delta, Change, Movement
  * @documentation https://fusion.dev/helix/components/trend
  *
+ * @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-icon-size - Size of the arrow.
+ * @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-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.
  */
 export declare class HelixTrend extends HelixHeadlessTrend {
     static styles: CSSResultGroup;

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,11 @@ 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);
+}
+
 [part="after"],
 [part="before"] {
 flex: none;

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

@@ -4,9 +4,10 @@ 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.
  *
  * @category layout
  * @since 0.1.0