@fusion.dev/helix-headless 0.30.2 → 0.32.0

package/dist/filter-input/menu/filter-menu.d.ts

@@ -59,6 +59,22 @@ import '../../menu/index.js';
  * @slot trigger - The control that opens the menu. A `Button` is the usual one.
  *
  * @event {HelixFacetEvent} helix-facet - Fired when a field's values change. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart divider - The rule between a field's comparisons and its values.
+ * @csspart divider-content - What is set into the rule.
+ * @csspart divider-line - The rule itself.
+ * @csspart entry - One row: a field, its comparison, an operator or a value.
+ * @csspart entry-item - The row itself.
+ * @csspart entry-mark - The trailing mark: a tick on a chosen value, a caret on a field.
+ * @csspart entry-start - The leading column.
+ * @csspart menu - The menu the fields are offered in.
+ * @csspart menu-back - The control that returns from a field's page.
+ * @csspart menu-back-mark - The glyph on the back control.
+ * @csspart menu-empty - Shown when there are no fields to offer.
+ * @csspart menu-header - The bar above a field's page, holding the way back and its name.
+ * @csspart menu-loading - Shown while the fields are still on their way.
+ * @csspart menu-surface - The floating panel the menu is drawn on.
+ * @csspart menu-title - The name of the field whose page is showing.
  */
 export declare class HelixHeadlessFilterMenu extends HelixElement {
     /**

package/dist/filter-input/menu/filter-menu.js

@@ -115,19 +115,38 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         const divider = this.tag('divider');
         const menu = this.tag('menu');
         const item = this.tag('menu-item');
-        return html `<${menu} label=${this.label} @helix-select=${this.handleSelect}>
+        return html `<${menu}
+      part="menu"
+      exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
+        loading: menu-loading, surface: menu-surface, title: menu-title"
+      label=${this.label}
+      @helix-select=${this.handleSelect}
+    >
       <slot name="trigger" slot="trigger"></slot>
       ${this.fields.map((field) => {
             const { label, name, operators, values } = field.vocabulary;
             const ticked = this.picked.get(name) ?? new Set();
             const using = this.operatorFor(field);
             const offered = using?.arity === 'none' ? [] : values;
-            return html `<${item} data-facet="field" data-field=${name}>
+            return html `<${item}
+          part="entry"
+          exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+          data-facet="field"
+          data-field=${name}
+        >
           ${label}
           ${operators.length > 1
-                ? html `<${item} slot="submenu" data-facet="comparison" data-field=${name}>
+                ? html `<${item}
+                  part="entry"
+                  exportparts="item: entry-item, mark: entry-mark, start: entry-start"
+                  slot="submenu"
+                  data-facet="comparison"
+                  data-field=${name}
+                >
                   ${using?.label ?? ''}
                   ${operators.map((operator) => html `<${item}
+                      part="entry"
+                      exportparts="item: entry-item, mark: entry-mark, start: entry-start"
                       slot="submenu"
                       checkable
                       exclusive
@@ -139,9 +158,16 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                 </${item}>`
                 : nothing}
           ${operators.length > 1 && offered.length > 0
-                ? html `<${divider} slot="submenu" announced></${divider}>`
+                ? html `<${divider}
+                  part="divider"
+                  exportparts="content: divider-content, line: divider-line"
+                  slot="submenu"
+                  announced
+                ></${divider}>`
                 : nothing}
           ${offered.map((option) => html `<${item}
+              part="entry"
+              exportparts="item: entry-item, mark: entry-mark, start: entry-start"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}

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

@@ -113,6 +113,9 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * @csspart rest - How many tokens did not fit. A `<button>` with `expandable`, a `<span>` without it.
  * @csspart surface - The floating panel the suggestions sit in.
  * @csspart tags - The row the tokens sit in.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the suggestions are open.
  */
 export declare class HelixHeadlessFilterInput extends HelixHeadlessFilterInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -49,6 +49,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart summary - The middle slot's box.
  * @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 reading's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -44,6 +44,9 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The question, over the field.
  * @csspart reveal - The button that shows and hides a password.
+ * @csspart reveal-pressed - The reveal button while the password shows, beside `reveal`.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -159,7 +159,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
             : nothing}
       ${this.reveal && this.type === 'password'
             ? html `<button
-              part="reveal"
+              part="reveal${this.revealed ? ' reveal-pressed' : ''}"
               type="button"
               aria-label=${this.revealLabel}
               aria-pressed=${this.revealed ? 'true' : 'false'}

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

@@ -55,6 +55,7 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @csspart terminus - The mark on one series' last reading.
  * @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 reading's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -44,6 +44,8 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * @csspart loading - Shown while the options are still on their way.
  * @csspart search - The region holding the field that narrows the list.
  * @csspart search-field - The field itself.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     protected readonly aria: AriaForwardController;

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

@@ -37,6 +37,8 @@ declare const HelixHeadlessMegamenu_base: (new (...args: any[]) => import("@fusi
  * @csspart trigger - The default trigger, where none was slotted.
  *
  * @cssproperty --megamenu-top - Where the panel starts, measured from the bar above it.
+ *
+ * @cssstate open - While the panel is open, which is when the trigger reads as current.
  */
 export declare class HelixHeadlessMegamenu extends HelixHeadlessMegamenu_base {
     /**

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

@@ -43,6 +43,11 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @csspart loading - Shown while the items are still on their way.
  * @csspart surface - The floating panel the menu is drawn on.
  * @csspart title - The name of the submenu that is showing.
+ *
+ * @cssstate drilled - While a submenu's page is showing rather than the menu's own, so what is not a row can leave with the page it was on.
+ * @cssstate mark - While a row on the page showing can be ticked or leads to a page, so the trailing column is held open for every row.
+ * @cssstate open - While the menu is open.
+ * @cssstate start - While a row on the page showing has something in its leading column, so that column is held open for every row.
  */
 export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     /**

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;