@fusion.dev/helix-headless 0.30.2 → 0.31.0

package/dist/menu/root/menu-root.js

@@ -156,6 +156,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
             this.mark(item, this.drilldown.atRoot);
         }
+        this.toggleState('drilled', !this.drilldown.atRoot);
         this.markColumns();
     }
     markColumns() {

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

@@ -25,6 +25,11 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  *
  * @csspart groove - The unfilled circle, in `ring` and `arc`.
  * @csspart indicator - The part of it the value fills.
+ * @csspart indicator-fair - The fill while the reading is in a band beside the good one, beside `indicator`.
+ * @csspart indicator-good - The fill while the reading is in the good band, beside `indicator`.
+ * @csspart indicator-over - The fill while the value is past the top, beside `indicator`.
+ * @csspart indicator-poor - The fill while the reading is two bands from the good one, beside `indicator`.
+ * @csspart indicator-under - The fill while the value is below the floor, beside `indicator`.
  * @csspart tick - A mark at `low` or at `high`.
  * @csspart track - The whole range, or the drawing in `ring` and `arc`.
  * @csspart value - The reading, under `show-value`.
@@ -58,8 +63,10 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * again is a worse API than letting them say it.
      *
      * Not reflected. Nothing selects on it: the band reaches the stylesheet as
-     * `data-band` on the fill, because that is the element being colored, so
-     * reflecting here would write an attribute onto the host for no reader.
+     * `data-band` on the fill, because that is the element being colored, and a
+     * stylesheet outside as `indicator-good`, `-fair` or `-poor` among the fill's
+     * part names, so reflecting here would write an attribute onto the host for
+     * no reader.
      */
     band?: MeterBand;
     /**
@@ -156,8 +163,9 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * "you are over" is worse than no meter for the one case anybody checks it in.
      *
      * The bar still stops at its end, because that is what an end is. The words
-     * and the accessible reading carry the truth, and `data-beyond` is on the fill
-     * so a consumer can say more about it.
+     * and the accessible reading carry the truth, and the fill carries
+     * `indicator-over` or `indicator-under` among its part names so a consumer can
+     * say more about it.
      */
     private get ratio();
     /** Whether the value is past an end, which the bar itself cannot show. */

package/dist/meter/root/meter-root.js

@@ -78,6 +78,8 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     }
     renderRound() {
         const bounds = this.thresholds;
+        const band = this.computedBand;
+        const beyond = this.beyond;
         const { max, min } = this.span;
         const sweep = this.shape === 'arc' ? 75 : 100;
         const along = (value) => ((value - min) / (max - min)) * sweep;
@@ -92,16 +94,18 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
               <circle part="tick" pathLength="100" style="--meter-along: ${along(bounds.high)}" />`
             : nothing}
       <circle
-        part="indicator"
+        part="indicator${band ? { fair: ' indicator-fair', good: ' indicator-good', poor: ' indicator-poor' }[band] : ''}${beyond ? { over: ' indicator-over', under: ' indicator-under' }[beyond] : ''}"
         pathLength="100"
-        data-band=${this.computedBand ?? nothing}
-        data-beyond=${this.beyond ?? nothing}
+        data-band=${band ?? nothing}
+        data-beyond=${beyond ?? nothing}
         style="--meter-along: ${this.fraction * sweep}"
       />
     </svg>`;
     }
     render() {
         const bounds = this.thresholds;
+        const band = this.computedBand;
+        const beyond = this.beyond;
         const { max, min } = this.span;
         const at = (value) => `${((value - min) / (max - min)) * 100}%`;
         return html `${this.shape
@@ -112,9 +116,9 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
                     <span part="tick" style="--meter-at: ${at(bounds.high)}"></span>`
                 : nothing}
             <div
-              part="indicator"
-              data-band=${this.computedBand ?? nothing}
-              data-beyond=${this.beyond ?? nothing}
+              part="indicator${band ? { fair: ' indicator-fair', good: ' indicator-good', poor: ' indicator-poor' }[band] : ''}${beyond ? { over: ' indicator-over', under: ' indicator-under' }[beyond] : ''}"
+              data-band=${band ?? nothing}
+              data-beyond=${beyond ?? nothing}
               style="--meter-fraction: ${this.fraction}"
             ></div>
           </div>`}

package/dist/notifications/group/notification-group.d.ts

@@ -45,6 +45,8 @@ declare const HelixHeadlessNotificationGroup_base: (new (...args: any[]) => impo
  * @csspart items - The region holding the notifications.
  * @csspart label - What the group is called.
  * @csspart trigger - The control that collapses and expands, where collapsible.
+ *
+ * @cssstate open - While the group shows every notification in it rather than the first.
  */
 export declare class HelixHeadlessNotificationGroup extends HelixHeadlessNotificationGroup_base {
     /**

package/dist/notifications/notification/notification.d.ts

@@ -59,6 +59,10 @@ import '../../format-date/index.js';
  * @csspart media - The leading slot's box.
  * @csspart time - When it happened, read the way a person reads one.
  * @csspart trailing - The column holding the time and the controls.
+ *
+ * @cssstate actions - While the actions slot holds something, so the words above make room for it.
+ * @cssstate controls - While it can be dismissed, so the time makes way for the control under a pointer.
+ * @cssstate read - While it has been read.
  */
 export declare class HelixHeadlessNotification extends HelixElement {
     /**

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

@@ -43,6 +43,8 @@ declare const HelixHeadlessNotifications_base: (new (...args: any[]) => import("
  * @csspart list - The list itself.
  * @csspart loading - Shown while the feed is still on its way.
  * @csspart mark-all - The control that marks everything read.
+ *
+ * @cssstate media - While a notification in the list holds something in its media slot, so every row keeps that column.
  */
 export declare class HelixHeadlessNotifications extends HelixHeadlessNotifications_base {
     /**

package/dist/number-input/root/number-input-root.d.ts

@@ -53,6 +53,8 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * @csspart increment - The control that steps up.
  * @csspart increment-mark - The glyph on the step up control.
  * @csspart label - The name over the field, which is also the scrub grip.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_base {
     protected readonly aria: AriaForwardController;

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -77,6 +77,7 @@ interface Row {
  * @csspart null - A `null`.
  * @csspart number - A number.
  * @csspart row - One entry, a tree item.
+ * @csspart row-active - The entry the keyboard is on, beside `row`.
  * @csspart string - A string, in quotes.
  * @csspart summary - The brackets standing for a branch's contents.
  * @csspart toggle - The caret on a branch: down when open, across when closed.

package/dist/object-inspector/root/object-inspector-root.js

@@ -32,7 +32,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             count: () => this.rows.length,
             estimate: () => 24,
             measured: () => this.windowed,
-            rows: () => [...(this.renderRoot?.querySelectorAll('[part="row"]') ?? [])].map((element) => ({ element, index: Number(element.dataset.index) })),
+            rows: () => [...(this.renderRoot?.querySelectorAll('[part~="row"]') ?? [])].map((element) => ({ element, index: Number(element.dataset.index) })),
         });
         this.rows = [];
         this.copier = new CopyController(this);
@@ -189,7 +189,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             scrollItemIntoView(row);
             return;
         }
-        const drawn = [...(tree?.querySelectorAll('[part="row"]') ?? [])];
+        const drawn = [...(tree?.querySelectorAll('[part~="row"]') ?? [])];
         const first = drawn[0];
         const last = drawn.at(-1);
         if (!tree || !this.windowed || !first || !last || attempts === 0) {
@@ -255,12 +255,13 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         return html `<span part="string">${String(value)}</span>`;
     }
     renderRow(row, index) {
+        const active = index === this.active;
         return html `<div
-      part="row"
+      part="row${active ? ' row-active' : ''}"
       role="treeitem"
       id=${`row-${index}`}
       data-index=${index}
-      ?data-active=${index === this.active}
+      ?data-active=${active}
       aria-level=${row.depth + 1}
       aria-posinset=${row.position}
       aria-setsize=${row.siblings}

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

@@ -54,8 +54,12 @@ export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadle
  *
  * @csspart description - The caption under the words, when there is one.
  * @csspart item - The row.
+ * @csspart item-active - The row the keyboard is on, beside `item`.
+ * @csspart item-selected - The row of a chosen option, beside `item`.
  * @csspart label - The words.
  * @csspart text - The words and the caption under them, as one column.
+ *
+ * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {
     /**

package/dist/option/root/option-root.js

@@ -52,7 +52,10 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.internals.ariaDescription =
             this.alternate !== '' && this.alternateLabel !== '' ? this.alternateLabel : null;
-        return html `<div part="item" @click=${() => this.select()}>
+        return html `<div
+      part="item${this.selected ? ' item-selected' : ''}${this.active ? ' item-active' : ''}"
+      @click=${() => this.select()}
+    >
       <slot name="start"></slot>
       <span part="text">
         <span part="label"><slot></slot></span>

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

@@ -55,8 +55,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart mark - The glyph on a first, previous, next or last control, where none is slotted.
  * @csspart next - The control that moves forward one page.
  * @csspart page - The control for one page.
+ * @csspart page-current - The page you are on, beside `page`.
  * @csspart previous - The control that moves back one page.
  * @csspart status - The reading of where you are, in `compact`.
+ *
+ * @cssstate empty - While there is one page or none, which is nothing to page through.
  */
 export declare class HelixHeadlessPagination extends HelixElement {
     /**
@@ -277,6 +280,8 @@ export declare class HelixHeadlessPagination extends HelixElement {
      * `aria-current="page"` is what says which one you are on, and it stays a
      * control rather than becoming text: a reader who tabs into the run and finds
      * the current page missing from it has lost the only landmark in the row.
+     * `page-current` says the same to a stylesheet, which the attribute cannot:
+     * nothing can follow `::part()` to read it.
      */
     private renderPage;
     /**

package/dist/pagination/root/pagination-root.js

@@ -136,7 +136,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         return html `<li part="item">
       ${this.href
             ? html `<a
-              part="page"
+              part="page${current ? ' page-current' : ''}"
               href=${fill(this.href, page, this.count)}
               aria-current=${current ? 'page' : nothing}
               aria-label=${name}
@@ -144,7 +144,7 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
               >${shown}</a
             >`
             : html `<button
-              part="page"
+              part="page${current ? ' page-current' : ''}"
               type="button"
               aria-current=${current ? 'page' : nothing}
               aria-label=${name}

package/dist/pagination/size/pagination-size.d.ts

@@ -40,9 +40,33 @@ import '../../select/index.js';
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. The only way to refuse one.
  *
  * @csspart control - The select.
- * @csspart label - The words beside the number, forwarded from the select.
- * @csspart trigger - The closed control, forwarded from the select.
- * @csspart value - The chosen size inside the trigger, forwarded from the select.
+ * @csspart control-feedback - What is wrong with it.
+ * @csspart control-hint - Help under the trigger.
+ * @csspart control-indicator - The caret saying the control opens.
+ * @csspart control-label - The words beside the number.
+ * @csspart control-listbox - The list inside it.
+ * @csspart control-listbox-empty - Shown when a filter has hidden everything.
+ * @csspart control-listbox-feedback - What is wrong with the list.
+ * @csspart control-listbox-filter-icon - The mark beside the filter field.
+ * @csspart control-listbox-filter-mark - The glyph beside the filter field, where none is slotted.
+ * @csspart control-listbox-hint - Help under the list.
+ * @csspart control-listbox-items - The list itself.
+ * @csspart control-listbox-label - The question, over the list.
+ * @csspart control-listbox-loading - Shown while the options are still on their way.
+ * @csspart control-listbox-search - The region holding the field that narrows the list.
+ * @csspart control-listbox-search-field - The field itself.
+ * @csspart control-surface - The floating panel.
+ * @csspart control-trigger - The closed control, which says what size is chosen.
+ * @csspart control-value - The chosen size inside the trigger.
+ * @csspart option - One size on offer.
+ * @csspart option-description - The caption under the number, when there is one.
+ * @csspart option-item - The row.
+ * @csspart option-item-active - The row the keyboard is on.
+ * @csspart option-item-selected - The row of the size chosen.
+ * @csspart option-label - The number.
+ * @csspart option-text - The number and the caption, as one column.
+ *
+ * @cssstate empty - While there are no sizes to offer.
  */
 export declare class HelixHeadlessPaginationSize extends HelixElement {
     /**

package/dist/pagination/size/pagination-size.js

@@ -72,12 +72,26 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         const option = this.tag('option');
         return html `<${select}
       part="control"
-      exportparts="label, trigger, value"
+      exportparts="feedback: control-feedback, hint: control-hint, indicator: control-indicator,
+        label: control-label, listbox: control-listbox, listbox-empty: control-listbox-empty,
+        listbox-feedback: control-listbox-feedback, listbox-filter-icon: control-listbox-filter-icon,
+        listbox-filter-mark: control-listbox-filter-mark, listbox-hint: control-listbox-hint,
+        listbox-items: control-listbox-items, listbox-label: control-listbox-label,
+        listbox-loading: control-listbox-loading, listbox-search: control-listbox-search,
+        listbox-search-field: control-listbox-search-field, surface: control-surface,
+        trigger: control-trigger, value: control-value"
       label=${this.label}
       .value=${String(this.current)}
       @helix-before-change=${this.handleChange}
     >
-      ${this.options.map((size) => html `<${option} value=${String(size)}>${this.numbers(size)}</${option}>`)}
+      ${this.options.map((size) => html `<${option}
+            part="option"
+            exportparts="description: option-description, item: option-item,
+              item-active: option-item-active, item-selected: option-item-selected,
+              label: option-label, text: option-text"
+            value=${String(size)}
+            >${this.numbers(size)}</${option}
+          >`)}
     </${select}>`;
     }
     render() {

package/dist/pin-input/root/pin-input-root.d.ts

@@ -43,6 +43,8 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The row of boxes.
  * @csspart hint - Help under the boxes, while nothing is wrong.
  * @csspart label - The question, over the boxes.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -41,6 +41,8 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  *
  * @csspart content - The scrolling region inside the panel.
  * @csspart popover - The panel.
+ *
+ * @cssstate open - While the popover is open.
  */
 export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
     /**

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

@@ -43,6 +43,8 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * @csspart hint - Help under the set.
  * @csspart items - The choices, which is what `orientation` lays out.
  * @csspart label - The question, over the set.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_base {
     /**

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

@@ -38,6 +38,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart item - The button, which is the whole row.
  * @csspart label - The words beside it.
  * @csspart mark - The dot inside it.
+ *
+ * @cssstate selected - While it is the one chosen.
  */
 export declare class HelixHeadlessRadio extends HelixElement {
     /**

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

@@ -42,6 +42,8 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @cssproperty --rating-part - How much of the next mark is filled, 0 to 1.
  * @cssproperty --rating-step - The width of one step, as a fraction of a mark.
  * @cssproperty --rating-steps - How many steps one mark is divided into.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     protected readonly announcesInput = false;

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -56,10 +56,12 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing.
  * @csspart point - One row, as a point.
+ * @csspart point-active - A point of the row a pointer is asking about, beside `point`.
  * @csspart summary - How strongly the measures relate, for a reader who cannot see the points.
  * @csspart svg - The drawing surface the rules sit on.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The row's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -160,7 +160,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             return html `<span
           data-series=${index}
           ?data-active=${point.row === at}
-          part="point"
+          part="point${point.row === at ? ' point-active' : ''}"
           style=${`--chart-series: var(--chart-series-${index}); --chart-point-x: ${point.x}%; --chart-point-y: ${point.y}%`}
         ></span>`;
         })}

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -36,6 +36,12 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  *
  * @csspart edges - Where the sideways edge cues are drawn.
  * @csspart viewport - The scrolling box.
+ *
+ * @cssstate more-block-end - While there is more to scroll to past the block end.
+ * @cssstate more-block-start - While there is more to scroll back to before the block start.
+ * @cssstate more-inline-end - While there is more to scroll to past the inline end.
+ * @cssstate more-inline-start - While there is more to scroll back to before the inline start.
+ * @cssstate scrolls - While the content is larger than the viewport, on either axis.
  */
 export declare class HelixHeadlessScrollArea extends HelixElement {
     /**

package/dist/scroll-area/root/scroll-area-root.js

@@ -79,9 +79,10 @@ let HelixHeadlessScrollArea = class HelixHeadlessScrollArea extends HelixElement
     updated(changed) {
         super.updated?.(changed);
         this.toggleState('scrolls', this.scrolls);
-        for (const edge of EDGES) {
-            this.toggleState(`more-${edge}`, this.more.includes(edge));
-        }
+        this.toggleState('more-block-start', this.more.includes('block-start'));
+        this.toggleState('more-block-end', this.more.includes('block-end'));
+        this.toggleState('more-inline-start', this.more.includes('inline-start'));
+        this.toggleState('more-inline-end', this.more.includes('inline-end'));
     }
     render() {
         return html `<div

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

@@ -58,6 +58,9 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @csspart surface - The floating panel.
  * @csspart trigger - The closed control, which says what is chosen.
  * @csspart value - The chosen option's text inside the trigger.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
     protected readonly aria: AriaForwardController;

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

@@ -47,6 +47,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssproperty --slider-from - Where the filled span starts, as a percentage of the track.
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
  * @cssproperty --slider-to - Where the filled span ends, as a percentage of the track.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     protected readonly aria: AriaForwardController;

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -43,6 +43,8 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  *
  * @csspart actions - The region the actions are drawn in.
  * @csspart trigger - The default trigger, where none was slotted.
+ *
+ * @cssstate open - While the actions are out.
  */
 export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base {
     /**

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

@@ -40,6 +40,9 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @csspart label - The words beside it.
  * @csspart thumb - The part that moves.
  * @csspart track - The groove the thumb travels in.
+ *
+ * @cssstate checked - While it is on.
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
     protected readonly aria: AriaForwardController;

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

@@ -69,6 +69,9 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
  * @csspart grip-mark - The glyph on it.
  * @csspart resizer - The edge a reader drags to change the width, where the column allows it.
  * @csspart sort - The button a sortable heading is.
+ *
+ * @cssstate sorted-ascending - While the table is sorted by this column, smallest first.
+ * @cssstate sorted-descending - While the table is sorted by this column, largest first.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
     /**

package/dist/table/column/table-column.js

@@ -95,12 +95,8 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'columnheader' });
         this.internals.ariaSort = this.canSort ? (this.sorted ?? 'none') : null;
-        for (const [name, on] of [
-            ['sorted-ascending', this.sorted === 'ascending'],
-            ['sorted-descending', this.sorted === 'descending'],
-        ]) {
-            this.toggleState(name, on);
-        }
+        this.toggleState('sorted-ascending', this.sorted === 'ascending');
+        this.toggleState('sorted-descending', this.sorted === 'descending');
     }
     get name() {
         return this.textContent?.trim() ?? '';

package/dist/tabs/panel/tab-panel.d.ts

@@ -16,6 +16,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The panel's content.
  *
  * @csspart panel - The panel container.
+ *
+ * @cssstate selected - While its tab is the one selected.
  */
 export declare class HelixHeadlessTabPanel extends HelixElement {
     /**

package/dist/tabs/tab/tab.d.ts

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: refusing it takes the decision and nothing moves.
  *
  * @csspart tab - The tab itself.
+ *
+ * @cssstate selected - While it is the tab selected.
  */
 export declare class HelixHeadlessTab extends HelixElement {
     /**

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

@@ -35,6 +35,8 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @csspart field - The box holding the control.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The question, over the field.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     protected readonly aria: AriaForwardController;

package/dist/time-input/root/time-input-root.d.ts

@@ -72,8 +72,11 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-list-search - The region holding the field that narrows the list.
  * @csspart picker-list-search-field - The field itself.
  * @csspart picker-option - One time in it. Carries `data-between` inside a range.
+ * @csspart picker-option-between - A time inside a chosen range, short of either end, beside `picker-option`.
  * @csspart picker-option-description - The caption under the words, when there is one.
  * @csspart picker-option-item - The row.
+ * @csspart picker-option-item-active - The row the keyboard is on.
+ * @csspart picker-option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart picker-option-label - The words.
  * @csspart picker-option-text - The words and the caption, as one column.
  * @csspart rest - How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
@@ -85,6 +88,9 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart time-prefix - The category before the label.
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The mark on the button that opens the clock.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the clock is open.
  */
 export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base {
     protected readonly aria: AriaForwardController;

package/dist/time-input/root/time-input-root.js

@@ -147,6 +147,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
         list-hint: picker-list-hint, list-items: picker-list-items, list-label: picker-list-label,
         list-loading: picker-list-loading, list-search: picker-list-search,
         list-search-field: picker-list-search-field, option: picker-option,
+        option-between: picker-option-between, option-item-active: picker-option-item-active,
+        option-item-selected: picker-option-item-selected,
         option-description: picker-option-description, option-item: picker-option-item,
         option-label: picker-option-label, option-text: picker-option-text"
       ?invalid=${this.resolvedFeedback !== ''}

package/dist/time-picker/root/time-picker-root.d.ts

@@ -77,8 +77,11 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * @csspart list-search - The region holding the field that narrows the list.
  * @csspart list-search-field - The field itself.
  * @csspart option - One time in it. Carries `data-between` inside a range.
+ * @csspart option-between - A time inside a chosen range, short of either end, beside `option`.
  * @csspart option-description - The caption under the words, when there is one.
  * @csspart option-item - The row.
+ * @csspart option-item-active - The row the keyboard is on.
+ * @csspart option-item-selected - The row of a chosen time: the one time, or either end of a range.
  * @csspart option-label - The words.
  * @csspart option-text - The words and the caption, as one column.
  */
@@ -226,15 +229,22 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /** Every minute offered within the hour currently shown. */
     private get minutes();
     /**
-     * Each wheel comes to rest on its own answer.
+     * Each wheel comes to rest on its own answer, and the list on the time it
+     * holds.
      *
      * A dial that opens at midnight when it holds ten in the evening is a dial
      * showing the wrong thing, and CSS cannot fix it: `scroll-snap-type` chooses a
      * snap point when something scrolls, and nothing has. Measured before this,
-     * with the value at 22:00, the hour wheel sat 288 pixels above its answer.
+     * with the value at 22:00, the hour wheel sat 288 pixels above its answer. The
+     * list had the same fault: holding 09:30 it opened on 12:00 AM with the answer
+     * 38 rows down and out of sight, flat on a page and in every Time Input panel.
+     * A list holding several, a range or a set, is left where it is, having no
+     * one row to come to rest on.
      *
-     * On every update rather than on the first, because the columns re-render as
-     * the value moves and the minute column's contents change with the hour.
+     * The wheels on every update, because the columns re-render as the value
+     * moves and the minute column's contents change with the hour. The list on
+     * the first only, where it is flat on a page: centering it on every choice
+     * would move the row out from under the pointer that chose it.
      *
      * **And it is public, because an update is not the only moment that matters.**
      * Inside a panel this element renders while the panel is still
@@ -310,7 +320,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      */
     private report;
     /**
-     * Reveals once the wheels have rendered themselves.
+     * Reveals once the wheels, or the list and its rows, have rendered themselves.
      *
      * `updated` is this element's own moment, and each wheel is a `helix-listbox`
      * that was created during this very render: its first update has been
@@ -329,6 +339,11 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      * scrolling a wheel changes no property and so schedules no update.
      */
     private revealWhenSettled;
+    /**
+     * Whether the list has brought itself to its answer yet. It does that once,
+     * and after that only whatever opens a panel calls `reveal`.
+     */
+    private listRevealed;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** Puts the keyboard on the list, which is the only control here. */