@fusion.dev/helix-headless 0.30.2 → 0.31.0

package/dist/accordion/item/accordion-item.d.ts

@@ -31,6 +31,8 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * @csspart content - The revealed region.
  * @csspart content-inner - The clipping box inside the animated region.
  * @csspart trigger - The clickable summary row.
+ *
+ * @cssstate open - While the item is open.
  */
 export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionItem_base {
     /**

package/dist/app-header/root/app-header-root.d.ts

@@ -36,6 +36,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart end - The trailing region.
  * @csspart row - The centered row inside the banner.
  * @csspart start - The leading region.
+ *
+ * @cssstate scrolled - While the page is scrolled down from the top, which is when the bar lifts off it.
  */
 export declare class HelixHeadlessAppHeader extends HelixElement {
     /**

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

@@ -74,6 +74,7 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart svg - The drawing surface the bands 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 reading's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -41,6 +41,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart baseline - The rule the columns stand on.
  * @csspart gridline - One rule across the plot, under `gridlines`.
  * @csspart group - One category's columns, together.
+ * @csspart group-active - The group the tooltip is about, beside `group`.
  * @csspart label - One category's name.
  * @csspart labels - The row of category names.
  * @csspart line - A series drawn as a line rather than as columns, under `lines`.
@@ -50,6 +51,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tick - One number on an axis.
  * @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/bar-chart/root/bar-chart-root.js

@@ -129,7 +129,10 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             ? svg `<line part="baseline" x1=${floor} x2=${floor} y1="0" y2="100" />`
             : svg `<line part="baseline" x1="0" x2="100" y1=${floor} y2=${floor} />`}
         ${this.renderBand(categories.length, sideways)}
-        ${categories.map((_, index) => svg `<g data-active=${this.pointer.at === index ? '' : nothing} part="group">
+        ${categories.map((_, index) => svg `<g
+              data-active=${this.pointer.at === index ? '' : nothing}
+              part="group${this.pointer.at === index ? ' group-active' : ''}"
+            >
               ${columns.map(({ one, tone }, depth) => bar(one.points[index]?.value ?? 0, index, depth, tone, against(one)))}
             </g>`)}
         ${series.map((one) => lined.has(one.name.trim().toLowerCase())

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

@@ -31,6 +31,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart controls - The row of controls.
  * @csspart indicator - One of them, and a way to reach that slide.
+ * @csspart indicator-current - The one for the slide showing, beside `indicator`.
  * @csspart indicators - The row of controls saying where the reader is.
  * @csspart next - The control that moves to the next slide.
  * @csspart next-mark - The glyph on the next control.

package/dist/carousel/root/carousel-root.js

@@ -28,7 +28,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             event.preventDefault();
             this.goTo(this.index + step);
             this.updateComplete.then(() => {
-                this.renderRoot.querySelector('[part="indicator"][data-current]')?.focus();
+                this.renderRoot.querySelector('[part~="indicator-current"]')?.focus();
             });
         };
         this.settling = false;
@@ -301,16 +301,19 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       ${this.slides.length > 1
             ? html `<div part="indicators" role="group" aria-label=${`${this.label} slides`}>
               ${''}
-              ${Array.from({ length: this.positions }).map((_place, at) => html `<button
-                  part="indicator"
+              ${Array.from({ length: this.positions }).map((_place, at) => {
+                const current = at === (this.showing ?? this.index);
+                return html `<button
+                  part="indicator${current ? ' indicator-current' : ''}"
                   type="button"
                   aria-label=${`Slide ${at + 1}`}
                   aria-current=${at === this.index ? 'true' : nothing}
                   tabindex=${at === this.index ? '0' : '-1'}
-                  ?data-current=${at === (this.showing ?? this.index)}
+                  ?data-current=${current}
                   @keydown=${this.handleIndicatorKeydown}
                   @click=${() => this.goTo(at)}
-                ></button>`)}
+                ></button>`;
+            })}
             </div>`
             : nothing}`;
     }

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

@@ -86,6 +86,18 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart live - Where each settled turn is said, for a reader who cannot see it arrive.
  * @csspart loading - Shown while the history is still on its way.
  * @csspart log - The transcript, which is the thing that scrolls.
+ * @csspart message - A turn fed as data: the message drawn for it, forwarded whole.
+ * @csspart message-actions - The controls offered on a fed turn, beside its time.
+ * @csspart message-avatar - A fed turn's leading slot's box.
+ * @csspart message-body - What a fed turn said, and the line under it.
+ * @csspart message-content - A fed turn's text.
+ * @csspart message-indicator - A fed turn's default wait.
+ * @csspart message-mark - The status glyph beside a fed turn's failure.
+ * @csspart message-meta - The line under a fed turn: its time, its state, and its controls.
+ * @csspart message-retry - The control offered on a fed turn that failed.
+ * @csspart message-sources - What a fed turn was drawn from.
+ * @csspart message-state - What has happened to a fed turn, where that is worth saying.
+ * @csspart message-time - When a fed turn was said.
  * @csspart resume - The affordance offered while the reader is away from the bottom.
  * @csspart status - The status region, which is not part of the log.
  * @csspart turn - One turn fed as data, around the message drawn for it.

package/dist/chat/root/chat-root.js

@@ -391,6 +391,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return html `<div part="before" role="presentation" style="block-size: ${before}px; flex: none"></div>
       ${repeat(this.turns.slice(first, last), (turn, offset) => turn.key ?? first + offset, (turn, offset) => html `<div part="turn" data-index=${first + offset}>
             <${message}
+              exportparts="actions: message-actions, avatar: message-avatar, body: message-body,
+                content: message-content, indicator: message-indicator, mark: message-mark, message,
+                meta: message-meta, retry: message-retry, sources: message-sources,
+                state: message-state, time: message-time"
               author=${turn.author ?? nothing}
               at=${turn.at ?? nothing}
               state=${turn.state ?? nothing}

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

@@ -42,6 +42,12 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @csspart hint - Help under the control, while nothing is wrong.
  * @csspart label - The label beside it.
  * @csspart mark - The tick, or the dash when the box is indeterminate.
+ * @csspart mark-checked - The mark while the box is checked, beside `mark`.
+ * @csspart mark-indeterminate - The mark while the box is indeterminate, beside `mark`.
+ *
+ * @cssstate checked - While the box is checked.
+ * @cssstate has-label - While the label slot holds something to read, which is what draws a label at all.
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
     protected readonly aria: AriaForwardController;

package/dist/checkbox/root/checkbox-root.js

@@ -69,7 +69,10 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
           @change=${this.handleChange}
           @input=${this.stopInner}
         />
-        <span part="mark" aria-hidden="true"></span>
+        <span
+          part="mark${this.checked ? ' mark-checked' : ''}${this.indeterminate ? ' mark-indeterminate' : ''}"
+          aria-hidden="true"
+        ></span>
       </span>
       <span part="label"><slot @slotchange=${this.handleLabelChange}>${this.label}</slot></span>
     </label>

package/dist/checkbox-group/root/checkbox-group-root.d.ts

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

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

@@ -89,6 +89,9 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart trigger - The control that opens the panel.
  *
  * @cssproperty --color-input-swatch - The chosen color, to paint over the transparency check.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the picker is open.
  */
 export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -78,6 +78,9 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart tag-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart tag-prefix - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
+ *
+ * @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 HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     protected readonly aria: AriaForwardController;

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

@@ -57,6 +57,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * @csspart listbox-loading - Shown while the options are still on their way.
  * @csspart listbox-search - The region holding the field that narrows the list.
  * @csspart listbox-search-field - The field itself.
+ *
+ * @cssstate open - While the palette is open.
  */
 export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
     /**

package/dist/data-table/root/data-table-root.d.ts

@@ -71,6 +71,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart after - The room the rows below the window would have taken. Windowed only.
  * @csspart before - The room the rows above the window would have taken. Windowed only.
  * @csspart cell - One cell.
+ * @csspart cell-selected - A cell of a selected row, beside `cell`.
  * @csspart checkbox - A row's checkbox, or the one in the heading that selects them all.
  * @csspart checkbox-box - The frame the checkbox's input is painted as.
  * @csspart checkbox-control - The checkbox's input.
@@ -79,14 +80,29 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart checkbox-hint - Forwarded from the checkbox, and never drawn here.
  * @csspart checkbox-label - Forwarded from the checkbox; the label is spoken, not shown.
  * @csspart checkbox-mark - The tick, or the dash while some rows are selected.
+ * @csspart checkbox-mark-checked - The mark while its box is checked, beside `checkbox-mark`.
+ * @csspart checkbox-mark-indeterminate - The dash while only some rows are selected, beside `checkbox-mark`.
  * @csspart empty - Shown when no rows match.
  * @csspart footer - The region below the grid.
  * @csspart head - The row the column headings sit in. `display: contents`, so it takes no space.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart pagination - The pagination, where this draws one.
+ * @csspart pagination-first - The pagination's control that jumps to the first page, under `ends`.
+ * @csspart pagination-gap - The pagination's control standing over pages not shown.
+ * @csspart pagination-item - One slot in the pagination's run, holding a page or a gap.
+ * @csspart pagination-last - The pagination's control that jumps to the last page, under `ends`.
+ * @csspart pagination-list - The pagination's run of pages.
+ * @csspart pagination-live - The region that says the page changed. Clipped, not hidden.
+ * @csspart pagination-mark - The glyph on a first, previous, next or last control.
+ * @csspart pagination-next - The pagination's control that moves forward one page.
+ * @csspart pagination-page - The pagination's control for one page.
+ * @csspart pagination-page-current - The page you are on, beside `pagination-page`.
+ * @csspart pagination-previous - The pagination's control that moves back one page.
+ * @csspart pagination-status - The pagination's reading of where you are, in `compact`.
  * @csspart row - One row of data.
  * @csspart select - The cell holding a row's checkbox.
  * @csspart select-all - The heading holding the checkbox that selects every row.
+ * @csspart select-selected - The checkbox cell of a selected row, beside `select`.
  * @csspart table - The grid.
  * @csspart toolbar - The region above the grid.
  *

package/dist/data-table/root/data-table-root.js

@@ -537,9 +537,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : undefined;
         }
     }
-    renderCell(column, row) {
+    renderCell(column, row, picked) {
         return html `<span
-      part="cell"
+      part="cell${picked ? ' cell-selected' : ''}"
       role="gridcell"
       style=${column.align ? `text-align: ${column.align}` : nothing}
       >${column.read(row)}</span
@@ -550,7 +550,8 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return html `<${checkbox}
       part="checkbox"
       exportparts="box: checkbox-box, control: checkbox-control, feedback: checkbox-feedback,
-        field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark"
+        field: checkbox-field, hint: checkbox-hint, label: checkbox-label, mark: checkbox-mark,
+        mark-checked: checkbox-mark-checked, mark-indeterminate: checkbox-mark-indeterminate"
       aria-label=${name}
       .checked=${checked}
       .indeterminate=${indeterminate}
@@ -574,8 +575,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
           data-index=${this.windowed ? start + index : nothing}
         >
           ${chosen
-                ? html `<span part="select" role="gridcell">${this.renderCheckbox(`Select ${named ? String(named.order(row) ?? key) : key}`, picked, false, (event) => this.toggleRow(key, event))}</span>`
-                : nothing}${columns.map((column) => this.renderCell(column, row))}
+                ? html `<span part="select${picked ? ' select-selected' : ''}" role="gridcell"
+                  >${this.renderCheckbox(`Select ${named ? String(named.order(row) ?? key) : key}`, picked, false, (event) => this.toggleRow(key, event))}</span
+                >`
+                : nothing}${columns.map((column) => this.renderCell(column, row, picked))}
         </div>`;
         })}`;
     }
@@ -633,6 +636,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         ${this.paginated
             ? html `<${pagination}
               part="pagination"
+              exportparts="first: pagination-first, gap: pagination-gap, item: pagination-item,
+                last: pagination-last, list: pagination-list, live: pagination-live,
+                mark: pagination-mark, next: pagination-next, page: pagination-page,
+                page-current: pagination-page-current, previous: pagination-previous,
+                status: pagination-status"
               page=${this.page}
               page-size=${this.pageSize || 1}
               total=${matched}

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

@@ -45,7 +45,14 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart label - The question, over the field.
  * @csspart picker - The date picker inside it.
  * @csspart picker-cell - One column of a row, which is what a range paints.
+ * @csspart picker-cell-range-end - The cell of a range's last day, beside `picker-cell`.
+ * @csspart picker-cell-range-middle - A cell between a range's ends, beside `picker-cell`.
+ * @csspart picker-cell-range-start - The cell of a range's first day, beside `picker-cell`.
  * @csspart picker-day - The shape inside a cell, which is what a single date paints.
+ * @csspart picker-day-disabled - A day that cannot be chosen, beside `picker-day`.
+ * @csspart picker-day-outside - A day from a neighboring month, beside `picker-day`.
+ * @csspart picker-day-selected - The chosen day, or either end of a chosen range, beside `picker-day`.
+ * @csspart picker-day-today - Today, beside `picker-day`.
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.
  * @csspart picker-heading - The month and year being shown.
@@ -62,6 +69,9 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart tags - The row the dates sit in.
  * @csspart trigger - The control that opens the calendar.
  * @csspart trigger-icon - The mark on the button that opens the calendar.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
+ * @cssstate open - While the calendar is open.
  */
 export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base {
     protected readonly aria: AriaForwardController;

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

@@ -143,8 +143,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     renderPicker() {
         return html `<${this.tag('date-picker')}
       part="picker"
-      exportparts="cell: picker-cell, day: picker-day, grid: picker-grid, header: picker-header,
-        heading: picker-heading, month: picker-month, months: picker-months, next: picker-next,
+      exportparts="cell: picker-cell, cell-range-end: picker-cell-range-end,
+        cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
+        day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
+        day-selected: picker-day-selected, day-today: picker-day-today, grid: picker-grid,
+        header: picker-header, heading: picker-heading, month: picker-month, months: picker-months,
+        next: picker-next,
         next-mark: picker-next-mark, previous: picker-previous, previous-mark: picker-previous-mark,
         week: picker-week, weekday: picker-weekday"
       ?invalid=${this.resolvedFeedback !== ''}

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

@@ -35,7 +35,14 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @event {Event} input - Announced once the value has moved.
  *
  * @csspart cell - One column of a row, which is what a range paints.
+ * @csspart cell-range-end - The cell of a range's last day, beside `cell`.
+ * @csspart cell-range-middle - A cell between a range's ends, beside `cell`.
+ * @csspart cell-range-start - The cell of a range's first day, beside `cell`.
  * @csspart day - The shape inside a cell, which is what a single date paints.
+ * @csspart day-disabled - A day that cannot be chosen, beside `day`.
+ * @csspart day-outside - A day from a neighboring month, filling the grid out, beside `day`.
+ * @csspart day-selected - The chosen day, or either end of a chosen range, beside `day`.
+ * @csspart day-today - Today, beside `day`.
  * @csspart grid - The grid of days.
  * @csspart header - The month name and its controls.
  * @csspart heading - The month and year being shown.

package/dist/date-picker/root/date-picker-root.js

@@ -200,7 +200,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.focused = toIso(date);
         this.show(date);
         this.updateComplete.then(() => {
-            this.renderRoot.querySelector('[part="cell"][tabindex="0"]')?.focus();
+            this.renderRoot.querySelector('[part~="cell"][tabindex="0"]')?.focus();
         });
     }
     select(date) {
@@ -355,21 +355,27 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
             const disabled = this.barred(date);
             const selected = this.isSelected(iso);
             const outside = !sameMonth(date, month);
+            const start = !outside && range !== null && iso === range[0];
+            const end = !outside && range !== null && iso === range[1];
+            const middle = !outside && range !== null && iso > range[0] && iso < range[1];
             return html `<span
-                part="cell"
+                part="cell${start ? ' cell-range-start' : ''}${middle ? ' cell-range-middle' : ''}${end ? ' cell-range-end' : ''}"
                 role="gridcell"
                 aria-disabled=${disabled ? 'true' : nothing}
                 aria-label=${full.format(date)}
                 aria-current=${iso === today ? 'date' : nothing}
                 aria-selected=${!outside && selected ? 'true' : nothing}
                 data-outside=${outside ? '' : nothing}
-                data-range-end=${!outside && range && iso === range[1] ? '' : nothing}
-                data-range-middle=${!outside && range && iso > range[0] && iso < range[1] ? '' : nothing}
-                data-range-start=${!outside && range && iso === range[0] ? '' : nothing}
+                data-range-end=${end ? '' : nothing}
+                data-range-middle=${middle ? '' : nothing}
+                data-range-start=${start ? '' : nothing}
                 data-today=${iso === today ? '' : nothing}
                 tabindex=${!outside && iso === anchor ? '0' : '-1'}
                 @click=${outside ? nothing : () => this.select(date)}
-                ><span part="day">${date.getUTCDate()}</span></span
+                ><span
+                  part="day${!outside && selected && !middle ? ' day-selected' : ''}${iso === today ? ' day-today' : ''}${outside ? ' day-outside' : ''}${disabled ? ' day-disabled' : ''}"
+                  >${date.getUTCDate()}</span
+                ></span
               >`;
         })}
           </div>`)}

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

@@ -34,6 +34,8 @@ declare const HelixHeadlessDialog_base: (new (...args: any[]) => import("@fusion
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart dialog - The native dialog element.
+ *
+ * @cssstate open - While the dialog is open.
  */
 export declare class HelixHeadlessDialog extends HelixHeadlessDialog_base {
     /**

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

@@ -28,9 +28,11 @@ declare const HelixHeadlessDonutChart_base: typeof HelixElement & (new (...args:
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing.
  * @csspart segment - One slice.
+ * @csspart segment-active - The slice under the pointer, beside `segment`.
  * @csspart segment-edge - One slice as a closed shape, for a boundary to trace.
  * @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 slice's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -86,15 +86,16 @@ let HelixHeadlessDonutChart = class HelixHeadlessDonutChart extends MixinChartSo
     renderSegment(share, index) {
         const circumference = 2 * Math.PI * this.radius;
         const length = share.fraction * circumference * this.span;
+        const active = this.pointer.at === index;
         return svg `<circle
       cx=${CENTER}
       cy=${CENTER}
-      data-active=${this.pointer.at === index ? '' : nothing}
+      data-active=${active ? '' : nothing}
       data-series=${seriesIndex(index)}
       fill="none"
       style="--chart-series: var(--chart-series-${seriesIndex(index)})"
       @pointerenter=${() => this.pointer.set(index)}
-      part="segment"
+      part="segment${active ? ' segment-active' : ''}"
       r=${this.radius}
       stroke-dasharray="${length} ${GAP}"
       stroke-dashoffset=${-share.start * circumference * this.span}

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

@@ -45,6 +45,8 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * @csspart content - The scrolling content region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
+ *
+ * @cssstate open - While the drawer is open.
  */
 export declare class HelixHeadlessDrawer extends HelixHeadlessDrawer_base {
     protected readonly commands: CommandController;

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

@@ -51,6 +51,8 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart size-dismiss-mark - The glyph on the dismiss control, where none is slotted.
  * @csspart size-prefix - The category before the label.
  * @csspart trigger - The label that opens the picker.
+ *
+ * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */
 export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base {
     protected readonly aria: AriaForwardController;

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 {
     /**