@fusion.dev/helix-headless 0.30.2 → 0.32.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;
@@ -133,15 +133,17 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         const vertical = this.orientation === 'vertical';
         const target = this.edgeOf(slide, track, this.bleed(track));
+        const at = vertical ? { top: target } : { left: target };
         if (Math.abs(target - (vertical ? track.scrollTop : track.scrollLeft)) < 1) {
+            if (this.settling) {
+                track.scrollTo({ behavior: 'instant', ...at });
+                this.settling = false;
+            }
             return;
         }
         const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
         this.settling = true;
-        track.scrollTo({
-            behavior: still ? 'instant' : 'smooth',
-            ...(vertical ? { top: target } : { left: target }),
-        });
+        track.scrollTo({ behavior: still ? 'instant' : 'smooth', ...at });
     }
     stop() {
         this.stopped = true;
@@ -301,16 +303,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/drilldown/item/drilldown-item.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One row of a drill-down, which may hold a page of its own.
  *
@@ -18,6 +18,11 @@ import { nothing, type TemplateResult } from 'lit';
  * Choosing is announced, never applied. The row dispatches and the stack
  * decides whether that means drilling in or choosing a command.
  *
+ * **A row that opens a page says so**, with a caret after its words and
+ * `aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes
+ * somewhere and a row that does something otherwise look the same until one is
+ * pressed. Not on the server, which cannot see the children and so cannot know.
+ *
  * @since 0.1.0
  * @status experimental
  * @aliases Panel item, Drill row
@@ -32,6 +37,7 @@ import { nothing, type TemplateResult } from 'lit';
  *
  * @csspart item - The row itself.
  * @csspart label - The words.
+ * @csspart mark - The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
  */
 export declare class HelixHeadlessDrilldownItem extends HelixElement {
     /**
@@ -74,6 +80,35 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * Identifies the row to whatever is listening.
      */
     value: string;
+    /**
+     * Whether anything is slotted into `page`.
+     *
+     * State rather than a getter over `children`, for the reason `Menu.Item`
+     * backs `hasSubmenu` the same way: a getter is read during `render()` with
+     * nothing to re-read it, so a page a framework fills after the row's first
+     * render would open with no caret on the row that leads to it.
+     */
+    private page;
+    /**
+     * Reads the children before each render, where they can be known.
+     *
+     * Not on the server, where there are none to read, nor while hydrating what
+     * one sent, whose row carried no caret. `finishHydration` asks for the read
+     * that skipped.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Re-reads whether a page is slotted, from whichever `page` slot is current.
+     *
+     * Bound in the template, on both of them. The row and the page it opens each
+     * render a `slot[name="page"]`, and moving between them makes Lit build a new
+     * slot and throw the old one away, which fires on its way out with nothing
+     * assigned: a listener on the discarded one would clear the caret on every row
+     * that has been drilled into and back out of. `Menu.Item.readSubmenu` carries
+     * the same note.
+     */
+    private readonly readPage;
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /** Announces that this row was chosen. */

package/dist/drilldown/item/drilldown-item.js

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,6 +18,21 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.onPage = true;
         this.showingPage = false;
         this.value = '';
+        this.page = false;
+        this.readPage = () => {
+            const slot = this.renderRoot.querySelector('slot[name="page"]');
+            this.page = (slot?.assignedElements().length ?? 0) > 0;
+        };
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.page = this.knownChildren.some((child) => child.slot === 'page');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     focusItem() {
         this.partNamed('item')?.focus();
@@ -28,7 +45,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     }
     render() {
         if (this.showingPage) {
-            return html `<slot name="page"></slot>`;
+            return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
         }
         if (!this.onPage) {
             return nothing;
@@ -38,13 +55,20 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       type="button"
       role="menuitem"
       aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-haspopup=${this.page ? 'menu' : nothing}
       tabindex=${this.focusable ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
-    </button>`;
+      ${this.page
+            ? html `<svg part="mark" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+              ${unsafeSVG(caretRight.content)}
+            </svg>`
+            : nothing}
+    </button>
+    <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }
 };
 __decorate([
@@ -62,6 +86,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDrilldownItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "page", void 0);
 HelixHeadlessDrilldownItem = __decorate([
     customElement('helix-headless-drilldown-item')
 ], HelixHeadlessDrilldownItem);

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;