@fusion.dev/helix 0.144.0 → 0.145.0

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

@@ -25,6 +25,14 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * state. Combining them would need a variant for every pair, such as
  * `caption-danger` and `label-muted`.
  *
+ * `lines` cuts the text off after that many lines and ends it with an
+ * ellipsis. `text-wrap` balances or tidies the line breaks, and `text-align`
+ * sets the alignment. Each `--text-*` property overrides one value of the
+ * ramp, for a text or for every text inside an element.
+ *
+ * **To label a control, write a native `<label data-text="label">`.** The
+ * base layer gives it the label ramp. A Helix field takes its own `label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -34,6 +42,12 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @slot - The text.
  *
  * @csspart text - The rendered element.
+ *
+ * @cssproperty --text-font-family - The typeface. Overrides the ramp's.
+ * @cssproperty --text-font-size - The size. Overrides the ramp's.
+ * @cssproperty --text-font-weight - The weight. Overrides the ramp's.
+ * @cssproperty --text-letter-spacing - The tracking. Overrides the ramp's.
+ * @cssproperty --text-line-height - The leading. Overrides the ramp's.
  */
 export declare class HelixText extends HelixElement {
     /**
@@ -41,12 +55,14 @@ export declare class HelixText extends HelixElement {
      *
      * Decides the outline and the semantics.
      *
-     * **`label` gives the label ramp and labels no control.** The element is in
-     * this one's shadow root, which neither `for` nor a wrapped control can
-     * reach, so a page that writes either is warned. Name a Helix field with its
-     * own `label`, and a native control with `<label data-text="label">`.
+     * **`label` is deprecated and no longer listed.** The element is in this
+     * one's shadow root, which neither `for` nor a wrapped control can reach, so
+     * it labeled nothing. Written anyway, it still renders a `<label>` in the
+     * label ramp and warns. Use `variant="label"` for the look, a native
+     * `<label data-text="label">` to label a native control, and a Helix field's
+     * own `label`.
      */
-    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
+    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code';
     /**
      * Makes the text quieter: `muted`, or the quieter `subtle`.
      *
@@ -64,6 +80,33 @@ export declare class HelixText extends HelixElement {
      * The resting case is the absent attribute, full strength.
      */
     emphasis?: 'muted' | 'subtle';
+    /**
+     * The most lines to show. Text past the last one is cut off with an
+     * ellipsis.
+     *
+     * Lays the text out as a block, because a line count needs a width to break
+     * against. The whole text stays in the page, so a screen reader and a search
+     * still read all of it. Set it as an attribute, such as `lines="1"` for a
+     * single line.
+     */
+    lines?: number;
+    /**
+     * How the lines align, set as `text-align`.
+     *
+     * Named for the CSS property it sets. `align` alone is a legacy HTML
+     * attribute the browser maps to `text-align` by itself on any element, and
+     * it has no `start` or `end`.
+     */
+    textAlign?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * How the lines break, set as `text-wrap`.
+     *
+     * `balance` evens out the length of every line, for a heading of a few
+     * lines. `pretty` avoids a last line of one short word, for a paragraph.
+     * `nowrap` keeps the text on one line. Absent, the lines break as the
+     * browser breaks them.
+     */
+    textWrap?: 'balance' | 'pretty' | 'nowrap';
     /**
      * The meaning of the text, shown by its color, such as `danger` or `success`.
      * It is set separately from `variant`.
@@ -84,8 +127,6 @@ export declare class HelixText extends HelixElement {
      */
     variant?: 'display' | 'heading' | 'subheading' | 'title' | 'body' | 'body-strong' | 'caption' | 'label' | 'code';
     protected updated(changed: PropertyValues): void;
-    /** Whether the page wrote this as the label of a control, which it cannot be. */
-    private labelsNothing;
     protected render(): unknown;
     static styles: CSSResultGroup;
 }

package/dist/text/root/text-root.js

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
+import { clampOf } from '../clamp.js';
 import { styles } from './text-root.css.js';
 const TAGS = {
     code: literal `code`,
@@ -25,25 +27,20 @@ const TAGS = {
 let HelixText = class HelixText extends HelixElement {
     updated(changed) {
         super.updated(changed);
-        if (changed.has('as') && this.as === 'label' && this.labelsNothing()) {
+        if (changed.has('as') && this.as === 'label') {
             reportRuntime({
                 kind: 'unreachable-label',
-                message: '<helix-text as="label"> names no control: its label is in a shadow root, which ' +
-                    '`for` and a wrapped control cannot reach. Give a Helix field its own `label`, or ' +
-                    'write `<label data-text="label">` for a native control.',
+                message: '<helix-text as="label"> is deprecated: its label is in a shadow root, which `for` ' +
+                    'and a wrapped control cannot reach, so it labels nothing. Write `variant="label"` ' +
+                    'for the look, `<label data-text="label">` for a native control, and give a Helix ' +
+                    'field its own `label`.',
                 tag: this.localName,
             });
         }
     }
-    labelsNothing() {
-        const fields = [...this.querySelectorAll('*')].some((element) => element.constructor.formAssociated === true);
-        return (fields ||
-            this.hasAttribute('for') ||
-            this.querySelector('input, select, textarea, button, meter, output, progress') !== null);
-    }
     render() {
         const tag = (this.as && Object.hasOwn(TAGS, this.as) ? TAGS[this.as] : undefined) ?? literal `span`;
-        return staticHtml `<${tag} part="text"><slot></slot></${tag}>`;
+        return staticHtml `<${tag} part="text" style=${clampOf(this.lines) ?? nothing}><slot></slot></${tag}>`;
     }
     static { this.styles = styles; }
 };
@@ -53,6 +50,15 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixText.prototype, "lines", void 0);
+__decorate([
+    property({ attribute: 'text-align', reflect: true })
+], HelixText.prototype, "textAlign", void 0);
+__decorate([
+    property({ attribute: 'text-wrap', reflect: true })
+], HelixText.prototype, "textWrap", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixText.prototype, "tone", void 0);

package/dist/timeline/group/timeline-group.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,32 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+padding-block-end: var(--timeline-gap, var(--helix-space-lg));
+}
+
+:host(:last-child) {
+padding-block-end: var(--helix-space-none);
+}
+
+[part="heading"] {
+color: var(--timeline-group-heading-color, var(--helix-color-foreground));
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-semibold);
+padding-block-end: var(--helix-space-sm);
+}
+
+[part="entries"] {
+display: flex;
+flex-direction: var(--_timeline-direction, column);
+}
+
+::slotted(*) {
+flex: var(--_timeline-entry-flex, 0 1 auto);
+min-inline-size: 0;
+}
+
+@media print {
+:host {
+break-inside: avoid-page;
+}
+}`);

package/dist/timeline/group/timeline-group.d.ts

@@ -0,0 +1,25 @@
+import { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A run of timeline entries under a heading, such as a day.
+ *
+ * @description
+ * The heading sits at the start edge, over the entries, in the small heavy
+ * type of a section label, and the space under one group is the space between
+ * two entries.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Day, Section, Date group
+ * @documentation https://fusion.dev/helix/components/timeline
+ *
+ * @cssproperty --timeline-group-heading-color - The color of the heading.
+ */
+export declare class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-timeline-group': HelixTimelineGroup;
+    }
+}

package/dist/timeline/group/timeline-group.js

@@ -0,0 +1,16 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessTimelineGroup } from '@fusion.dev/helix-headless/timeline';
+import { styles } from './timeline-group.css.js';
+let HelixTimelineGroup = class HelixTimelineGroup extends HelixHeadlessTimelineGroup {
+    static { this.styles = styles; }
+};
+HelixTimelineGroup = __decorate([
+    customElement('helix-timeline-group')
+], HelixTimelineGroup);
+export { HelixTimelineGroup };

package/dist/timeline/index.d.ts

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

package/dist/timeline/index.js

@@ -1,2 +1,3 @@
+export * from './group/timeline-group.js';
 export * from './item/timeline-item.js';
 export * from './root/timeline-root.js';

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

@@ -2,21 +2,26 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 column-gap: var(--helix-space-md);
 display: grid;
-grid-template-columns: auto minmax(0, 1fr);
-grid-template-rows: auto minmax(0, 1fr);
+
+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-row: 1 / -1;
-grid-template-rows: subgrid;
-justify-items: center;
+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(--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));
@@ -27,14 +32,22 @@ visibility: hidden;
 }
 
 [part="rail"]::after {
-align-self: stretch;
+align-self: var(--_timeline-leave-align, stretch);
 background-color: var(--helix-color-border);
+block-size: var(--_timeline-leave-block-size, auto);
 content: "";
 
-grid-column: 1;
-grid-row: 2;
-inline-size: var(--timeline-rail-size, var(--helix-border-thin));
-margin-block-start: var(--timeline-marker-size, var(--helix-size-icon-md));
+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(
+--_timeline-leave-margin-block,
+var(--timeline-marker-size, var(--helix-size-icon-md))
+);
 }
 
 :host(:last-child) [part="rail"]::after {
@@ -52,7 +65,7 @@ border-radius: var(--timeline-marker-radius, var(--helix-radii-full));
 color: var(--_timeline-tone, var(--helix-color-foreground-subtle));
 display: inline-flex;
 grid-column: 1;
-grid-row: 2;
+grid-row: var(--_timeline-marker-row, 2);
 inline-size: var(--timeline-marker-size, var(--helix-size-icon-md));
 justify-content: center;
 }
@@ -92,21 +105,35 @@ color: var(--helix-color-foreground-muted);
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-xs);
 font-weight: var(--helix-weight-medium);
-grid-column: 2;
-grid-row: 1;
+grid-column: var(--_timeline-time-column, 2);
+grid-row: var(--_timeline-time-row, 1);
 padding-block-end: var(--helix-space-2xs);
+
+text-align: var(--_timeline-time-align);
 }
 
 [part="content"] {
 display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
-grid-column: 2;
-grid-row: 2;
+grid-column: var(--_timeline-content-column, 2);
+grid-row: var(--_timeline-content-row, 2);
 min-inline-size: 0;
-padding-block-end: var(--timeline-gap, var(--helix-space-lg));
+padding-block-end: var(--_timeline-content-block-end, var(--timeline-gap, var(--helix-space-lg)));
+padding-inline-end: var(--_timeline-content-inline-end, var(--helix-space-none));
 }
 
 :host(:last-child) [part="content"] {
 padding-block-end: var(--helix-space-none);
+padding-inline-end: var(--helix-space-none);
+}
+
+:host(:nth-child(even)) [part="time"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-time-column, 2));
+text-align: var(--_timeline-even-align, var(--_timeline-time-align));
+}
+
+:host(:nth-child(even)) [part="content"] {
+grid-column: var(--_timeline-even-column, var(--_timeline-content-column, 2));
+text-align: var(--_timeline-even-align);
 }`);

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

@@ -4,6 +4,62 @@ display: flex;
 flex-direction: column;
 }
 
+:host([layout="opposite"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-rail-column: 2;
+--_timeline-time-align: end;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+}
+
+:host([layout="alternate"]) {
+--_timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+--_timeline-content-column: 3;
+--_timeline-even-align: end;
+--_timeline-even-column: 1;
+--_timeline-rail-column: 2;
+--_timeline-time-column: 3;
+}
+
+:host([orientation="horizontal"]) {
+--_timeline-arrive-display: none;
+--_timeline-columns: minmax(0, 1fr);
+--_timeline-content-block-end: var(--helix-space-none);
+--_timeline-content-column: 1;
+--_timeline-content-inline-end: var(--timeline-gap, var(--helix-space-lg));
+--_timeline-content-row: 3;
+--_timeline-direction: row;
+--_timeline-entry-flex: 1 1 0;
+--_timeline-even-align: initial;
+--_timeline-even-column: initial;
+--_timeline-leave-align: center;
+--_timeline-leave-block-size: var(--timeline-rail-size, var(--helix-border-thin));
+--_timeline-leave-column: 2;
+--_timeline-leave-inline-size: auto;
+--_timeline-leave-justify: stretch;
+--_timeline-leave-margin-block: var(--helix-space-none);
+--_timeline-leave-row: 1;
+--_timeline-marker-row: 1;
+--_timeline-rail-align: center;
+--_timeline-rail-column: 1;
+--_timeline-rail-columns: auto minmax(0, 1fr);
+--_timeline-rail-justify: start;
+--_timeline-rail-row: 1;
+--_timeline-rail-rows: auto;
+--_timeline-rows: auto auto minmax(0, 1fr);
+--_timeline-time-align: initial;
+--_timeline-time-column: 1;
+--_timeline-time-row: 2;
+
+flex-direction: row;
+}
+
+:host([orientation="horizontal"]) ::slotted(*) {
+flex: 1 1 0;
+min-inline-size: 0;
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -7,6 +7,19 @@ import type { CSSResultGroup } from 'lit';
  * Sets the direction time runs in and the spacing between events. Each entry
  * draws its own mark and line.
  *
+ * `layout` and `orientation` move where the entries are drawn, and never the
+ * order they are read in, which is the order you write them in:
+ *
+ * - Unset, the line runs down the start edge, with each time over what
+ *   happened.
+ * - `layout="opposite"` runs the line down the middle, with each time on the
+ *   start side and what happened on the end side.
+ * - `layout="alternate"` runs the line down the middle, with the first entry on
+ *   the end side, the second on the start side, and so on.
+ * - `orientation="horizontal"` runs the line across the top, with the entries
+ *   side by side in the order they are read, and the time over what happened
+ *   under each mark. Use it for a few entries, since they share the width.
+ *
  * @since 0.1.0
  * @status stable
  * @category data
@@ -17,6 +30,19 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixTimeline extends HelixHeadlessTimeline {
     static styles: CSSResultGroup;
+    /**
+     * Where the entries sit beside the line: `opposite` puts the times on one
+     * side and what happened on the other, and `alternate` puts every other
+     * entry on the other side. Unset, the line runs down the start edge.
+     *
+     * Down the page only: across the page it is set aside.
+     */
+    layout?: 'alternate' | 'opposite';
+    /**
+     * Which way time runs: `horizontal` lays the entries across the page. Unset,
+     * they run down it.
+     */
+    orientation?: 'horizontal';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/timeline/root/timeline-root.js

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

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

@@ -18,8 +18,11 @@ display: inline-flex;
 
 [part="toolbar"] {
 align-items: center;
+background-color: var(--toolbar-background-color, transparent);
+border-radius: var(--toolbar-radius, var(--helix-radii-none));
 display: flex;
 gap: var(--toolbar-gap, var(--helix-space-2xs));
+padding: var(--toolbar-padding, var(--helix-space-none));
 }
 
 :host([orientation="vertical"]) [part="toolbar"] {

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

@@ -17,7 +17,10 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart toolbar - The toolbar container.
  *
+ * @cssproperty --toolbar-background-color - The fill behind the controls. Transparent unless set.
  * @cssproperty --toolbar-gap - The space between controls.
+ * @cssproperty --toolbar-padding - The space between the toolbar's edge and its controls.
+ * @cssproperty --toolbar-radius - The corner radius of the toolbar's fill.
  */
 export declare class HelixToolbar extends HelixHeadlessToolbar {
     static styles: CSSResultGroup;

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

@@ -166,4 +166,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: 0.5;
+}
+
+:host([disabled]) [part="row"]:hover {
+background-color: transparent;
+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,16 +16,26 @@ 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.

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