@fusion.dev/helix-headless 0.26.0 → 0.30.0

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type TemplateResult } from 'lit';
 import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
 /**
@@ -20,8 +20,9 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * Items are matched with `instanceof HelixHeadlessAccordionItem`, never by tag
  * name. Matching `helix-accordion-item` would tie this tier to the styled one.
  *
- * Every listener is attached on connect, so none of it runs on the server,
- * where there is no tree to walk and no events to hear.
+ * The keyboard listener is the controller's and is attached on connect, so
+ * none of it runs on the server, where there is no tree to walk and no events
+ * to hear.
  *
  * @since 0.1.0
  * @status experimental
@@ -45,9 +46,7 @@ export declare class HelixHeadlessAccordion extends HelixElement {
     mode?: 'single' | 'single-collapsible';
     /** Direct items, in light-DOM order. Client only: the server has no tree. */
     get items(): HelixHeadlessAccordionItem[];
-    private readonly handleKeydown;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    protected readonly keys: KeyboardNavigationController;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/accordion/root/accordion-root.js

@@ -4,52 +4,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, KeyboardNavigationController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
-const NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);
+const navigable = (item) => ({
+    contains: (node) => node === item,
+    disabled: false,
+    focusItem: () => item.focusTrigger(),
+    select: () => { },
+    selected: false,
+});
 let HelixHeadlessAccordion = class HelixHeadlessAccordion extends HelixElement {
     constructor() {
         super(...arguments);
-        this.handleKeydown = (event) => {
-            if (!NAVIGATION.has(event.key)) {
-                return;
-            }
-            const items = this.items;
-            const current = items.indexOf(event.target);
-            if (current === -1) {
-                return;
-            }
-            const last = items.length - 1;
-            let next = current;
-            if (event.key === 'ArrowDown') {
-                next = current === last ? 0 : current + 1;
-            }
-            else if (event.key === 'ArrowUp') {
-                next = current === 0 ? last : current - 1;
-            }
-            else if (event.key === 'Home') {
-                next = 0;
-            }
-            else {
-                next = last;
-            }
-            event.preventDefault();
-            items[next]?.focusTrigger();
-        };
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.items.map(navigable),
+            origin: 'focus',
+            selects: () => false,
+        });
     }
     get items() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessAccordionItem);
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keydown', this.handleKeydown);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.handleKeydown);
-    }
     render() {
         return html `<slot></slot>`;
     }

package/dist/announcement/root/announcement-root.js

@@ -20,7 +20,7 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
         this.markEmpty();
     }
     markEmpty() {
-        const region = this.renderRoot?.querySelector('[part="actions"]');
+        const region = this.partNamed('actions');
         const empty = !slotFilled(this.renderRoot?.querySelector('slot[name="actions"]'));
         region?.toggleAttribute('data-empty', empty);
         region?.toggleAttribute('hidden', empty);

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

@@ -45,15 +45,29 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      */
     src: string;
     /**
-     * Whether the image failed.
+     * Where the image stands: still on its way, arrived, or failed and replaced
+     * by the initials.
      *
-     * The element's own observation, never set.
+     * Read-only to a consumer: it is a report rather than a setting, and the same
+     * report `Image` gives, for the same reason. `load` and `error` fire once, so
+     * a listener bound after the picture settled hears neither, which is the
+     * platform on an `<img>` too, and this is what that listener asks instead.
+     * Mirrored to `data-status` rather than reflected, as `Image` explains.
      */
-    private failed;
+    status: 'error' | 'loaded' | 'loading';
+    /**
+     * Whether the picture failed, which is what the fallback draws from.
+     *
+     * **Separate from `status`, because the two move at different moments** for
+     * a picture a server sent: the fallback belongs on screen at once, while the
+     * report waits for the event it reports, below.
+     */
+    private broken;
     private readonly handleError;
     private readonly handleLoad;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**
      * The mark shown where no image loaded, behind a seam a tier can move.

package/dist/avatar/root/avatar-root.js

@@ -22,19 +22,23 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         super(...arguments);
         this.name = '';
         this.src = '';
-        this.failed = false;
+        this.status = 'loading';
+        this.broken = false;
         this.handleError = (event) => {
-            this.failed = true;
+            this.broken = true;
+            this.status = 'error';
             this.relayNativeEvent(event);
         };
         this.handleLoad = (event) => {
+            this.status = 'loaded';
             this.relayNativeEvent(event);
         };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (changed.has('src')) {
-            this.failed = false;
+            this.broken = false;
+            this.status = 'loading';
         }
         hostAria(this.internals, {
             label: this.name,
@@ -46,14 +50,26 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         const image = this.serverRendered ? this.renderRoot.querySelector('img') : null;
         if (image?.complete) {
             const broken = image.naturalWidth === 0;
-            if (broken) {
-                this.failed = true;
+            this.broken = broken;
+            setTimeout(() => {
+                this.status = broken ? 'error' : 'loaded';
+                this.relayNativeEvent(new Event(broken ? 'error' : 'load'));
+            });
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('status')) {
+            if (this.status === 'loading') {
+                this.removeAttribute('data-status');
+            }
+            else {
+                this.setAttribute('data-status', this.status);
             }
-            setTimeout(() => this.relayNativeEvent(new Event(broken ? 'error' : 'load')));
         }
     }
     render() {
-        if (this.src !== '' && !this.failed) {
+        if (this.src !== '' && !this.broken) {
             return html `<img
         part="image"
         src=${this.src}
@@ -76,9 +92,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessAvatar.prototype, "src", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessAvatar.prototype, "status", void 0);
 __decorate([
     state()
-], HelixHeadlessAvatar.prototype, "failed", void 0);
+], HelixHeadlessAvatar.prototype, "broken", void 0);
 HelixHeadlessAvatar = __decorate([
     customElement('helix-headless-avatar')
 ], HelixHeadlessAvatar);

package/dist/blockquote/root/blockquote-root.js

@@ -13,7 +13,7 @@ let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement
         this.cite = '';
     }
     markEmpty() {
-        const footer = this.renderRoot?.querySelector('[part="attribution"]');
+        const footer = this.partNamed('attribution');
         const empty = !slotFilled(this.renderRoot?.querySelector('slot[name="attribution"]'));
         footer?.toggleAttribute('data-empty', empty);
         footer?.toggleAttribute('hidden', empty);

package/dist/button/root/button-root.js

@@ -11,7 +11,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="button"]') ?? null,
+            target: () => this.partNamed('button'),
         });
         this.command = '';
         this.commandFor = '';

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

@@ -127,7 +127,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
     }
     scrollToIndex() {
         const slide = this.panes[this.index];
-        const track = this.renderRoot.querySelector('[part="track"]');
+        const track = this.partNamed('track');
         if (!slide || !track) {
             return;
         }
@@ -160,7 +160,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.timer = setInterval(() => this.goTo(this.index + 1), this.interval);
     }
     nearest() {
-        const track = this.renderRoot.querySelector('[part="track"]');
+        const track = this.partNamed('track');
         if (!track) {
             return undefined;
         }

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

@@ -108,7 +108,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return this.knownChildren.filter((child) => 'isChatMessage' in child && child.isChatMessage === true);
     }
     get log() {
-        return this.renderRoot?.querySelector?.('[part="log"]') ?? null;
+        return this.partNamed('log');
     }
     get atBottom() {
         const log = this.log;

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

@@ -11,7 +11,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.indeterminate = false;
         this.value = 'on';
@@ -53,7 +53,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         const slot = this.renderRoot.querySelector('[part="label"] slot');
         const filled = (slot?.assignedNodes({ flatten: true }) ?? []).some((node) => node.textContent?.trim() !== '' || node.nodeType === Node.ELEMENT_NODE);
         this.toggleState('has-label', filled);
-        this.renderRoot.querySelector('[part="label"]')?.toggleAttribute('hidden', !filled);
+        this.partNamed('label')?.toggleAttribute('hidden', !filled);
     }
     render() {
         return html `<label part="field">

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

@@ -32,8 +32,8 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
                 return;
             }
             this.value = next;
-            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-            this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
+            this.announceInput();
+            this.announceChange();
         };
         this.handleMemberNative = (event) => {
             if (event.target !== this) {

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

@@ -1,8 +1,8 @@
-import { AriaForwardController, HelixFormElement, PopoverController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../color-picker/index.js';
 import { type ColorFormat } from '../../color-picker/color.js';
-declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A color, typed in any syntax or picked from a panel.
  *
@@ -151,8 +151,6 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * where the color is the answer rather than a setting.
      */
     variant?: 'swatch';
-    /** The overlay, placed against the field for the reason Date Input gives. */
-    protected readonly panel: PopoverController;
     /**
      * The last value that was a color.
      *
@@ -177,8 +175,7 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * focusable to name, and in `swatch` the trigger is the only control in the
      * field. It carries `id="control"` there for the same reason.
      */
-    private get anchor();
-    private get control();
+    protected get anchor(): HTMLElement | null;
     /** What the picker should show, which is only ever a color. */
     private get picked();
     /** What the trigger's swatch paints, which is only ever a color. */
@@ -196,15 +193,16 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     private readonly handleSampleStart;
     private readonly handleSampleEnd;
-    private restore;
-    /** Reports the value and the validity the host stands behind. */
-    private sync;
-    /** Escape shuts the panel without moving the color. */
-    private readonly handleKeydown;
-    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Reports the value and the validity the host stands behind.
+     *
+     * The family's own rather than the mixin's, because in `swatch` there is no
+     * text control: the mixin stops where it finds none, and here the verdict
+     * hangs off the trigger instead and `required` is checked by hand, a block of
+     * color having no native validity to adopt.
+     */
+    protected sync(): void;
     protected updated(changed: PropertyValues): void;
-    /** Puts the caret in the field, the way a label pointing at one would. */
-    focus(options?: FocusOptions): void;
     /**
      * The picker the field opens, behind a seam the styled tier can move.
      *

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

@@ -4,17 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerField, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../color-picker/index.js';
 import { parseColor, toCss } from '../../color-picker/color.js';
-let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
+let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerField(MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.alpha = false;
         this.autocomplete = 'off';
@@ -22,17 +22,6 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         this.placeholder = '#000000';
         this.swatches = '';
         this.triggerLabel = 'Choose a color';
-        this.panel = new PopoverController(this, {
-            anchor: () => this.renderRoot?.querySelector('[part="field"]'),
-            boundary: () => [
-                this.renderRoot?.querySelector('[part="surface"]'),
-                this.renderRoot?.querySelector('[part="trigger"]'),
-            ],
-            offset: () => 8,
-            onDismiss: () => this.requestOpen(false),
-            placement: 'bottom-start',
-            surface: () => this.renderRoot?.querySelector('[part="surface"]'),
-        });
         this.settled = '';
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -50,25 +39,9 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         this.handleSampleEnd = () => {
             this.requestOpen(true);
         };
-        this.handleKeydown = (event) => {
-            if (event.key === 'Escape' && this.open) {
-                event.stopPropagation();
-                this.requestOpen(false);
-                this.control?.focus();
-            }
-        };
     }
     get anchor() {
-        if (typeof this.renderRoot?.querySelector !== 'function') {
-            return null;
-        }
-        return this.control ?? this.renderRoot.querySelector('[part="trigger"]');
-    }
-    get control() {
-        if (typeof this.renderRoot?.querySelector !== 'function') {
-            return null;
-        }
-        return this.renderRoot.querySelector('[part="control"]');
+        return this.control ?? this.partNamed('trigger');
     }
     get picked() {
         return parseColor(this.value) ? this.value : this.settled;
@@ -77,13 +50,6 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         const parsed = parseColor(this.value);
         return parsed ? toCss(parsed) : 'transparent';
     }
-    restore() {
-        const control = this.control;
-        if (control && control.value !== this.value) {
-            control.value = this.value;
-        }
-        this.sync();
-    }
     sync() {
         this.internals.setFormValue(this.value);
         const anchor = this.anchor;
@@ -102,25 +68,11 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinControl
         }
         this.refreshFeedback();
     }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.sync();
-    }
     updated(changed) {
         super.updated(changed);
-        this.sync();
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
         }
-        if (this.open) {
-            this.panel.show();
-        }
-        else {
-            this.panel.hide();
-        }
-    }
-    focus(options) {
-        this.anchor?.focus(options);
     }
     renderPicker() {
         return html `<${this.tag('color-picker')}

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

@@ -77,7 +77,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             const grid = event.currentTarget;
             if (event.type === 'pointerdown') {
                 capturePointer(grid, event.pointerId);
-                this.renderRoot?.querySelector('[part="grid-saturation"]')?.focus();
+                this.partNamed('grid-saturation')?.focus();
             }
             else if (!grid.hasPointerCapture(event.pointerId)) {
                 return;
@@ -120,7 +120,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         }
     }
     focus(options) {
-        this.renderRoot?.querySelector('[part="grid-saturation"]')?.focus(options);
+        this.partNamed('grid-saturation')?.focus(options);
     }
     renderChannel(channel, label, max, value) {
         return html `<${this.tag('slider')}

package/dist/combobox/root/combobox-root.js

@@ -18,7 +18,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.renderRoot?.querySelector('[part="control"]') ?? null,
+            target: () => this.partNamed('control'),
         });
         this.autocomplete = 'off';
         this.creatable = false;
@@ -34,15 +34,16 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         this.typed = '';
         this.suggestion = '';
         this.panel = new PopoverController(this, {
-            anchor: () => this.renderRoot?.querySelector('[part="field"]'),
+            anchor: () => this.partNamed('field'),
             boundary: () => [
-                this.renderRoot?.querySelector('[part="surface"]'),
-                this.renderRoot?.querySelector('[part="field"]'),
+                this.partNamed('surface'),
+                this.partNamed('field'),
             ],
             offset: () => 4,
             onDismiss: () => this.close(),
+            open: () => this.open,
             placement: 'bottom-start',
-            surface: () => this.renderRoot?.querySelector('[part="surface"]'),
+            surface: () => this.partNamed('surface'),
         });
         this.handleInput = (event) => {
             event.stopPropagation();
@@ -109,7 +110,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 .some((node) => node instanceof HTMLElement && node.localName === 'helix-tag')) {
                 return;
             }
-            this.renderRoot.querySelector('[part="control"]')?.focus();
+            this.partNamed('control')?.focus();
             if (!this.open) {
                 this.requestOpen(true);
             }
@@ -133,7 +134,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get listbox() {
-        return this.renderRoot?.querySelector('[part="listbox"]') ?? null;
+        return this.partNamed('listbox');
     }
     get values() {
         return this.value === '' ? [] : this.value.split(',');
@@ -195,7 +196,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             return;
         }
         this.requestOpen(false);
-        this.renderRoot.querySelector('[part="control"]')?.focus();
+        this.partNamed('control')?.focus();
     }
     completionFor(typed) {
         if (typed === '') {
@@ -226,7 +227,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     updated(changed) {
         super.updated?.(changed);
         this.sync();
-        const control = this.renderRoot.querySelector('[part="control"]');
+        const control = this.partNamed('control');
         const wanted = this.multiple || this.open ? this.suggestion || this.typed : this.word;
         if (control && control.value !== wanted) {
             control.value = wanted;
@@ -234,11 +235,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         if (control && this.suggestion !== '') {
             control.setSelectionRange(this.typed.length, this.suggestion.length);
         }
-        if (this.open) {
-            this.panel.show();
-        }
-        else {
-            this.panel.hide();
+        if (!this.open) {
             this.typed = '';
             this.suggestion = '';
             this.listbox?.requestFilter('');

package/dist/command/root/command-root.js

@@ -76,7 +76,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         };
     }
     get listbox() {
-        return this.renderRoot?.querySelector('[part="listbox"]') ?? null;
+        return this.partNamed('listbox');
     }
     get activeOption() {
         return this.querySelector('[data-active]');
@@ -111,8 +111,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             return;
         }
         if (this.open) {
-            this.renderRoot
-                .querySelector('[part="listbox"]')
+            this.partNamed('listbox')
                 ?.renderRoot?.querySelector('[part="search-field"]')
                 ?.focus();
         }

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

@@ -42,7 +42,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.dragOrder = undefined;
         this.warnedAboutKey = false;
         this.virtualize = new VirtualizeController(this, {
-            container: () => this.windowed ? this.renderRoot.querySelector('[part="table"]') : null,
+            container: () => (this.windowed ? this.partNamed('table') : null),
             count: () => this.available,
             estimate: () => this.estimate,
             measured: () => this.windowed,