@fusion.dev/helix-headless 0.145.0 → 0.146.0

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

@@ -42,20 +42,28 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             target: () => this.partNamed('control'),
         });
         this.accept = '';
+        this.addedText = 'Added: {names}';
         this.directory = false;
         this.locale = '';
         this.multiple = false;
         this.rejectedText = 'Not added: {names}';
+        this.removedText = 'Removed: {name}';
         this.removeLabel = 'Remove {name}';
         this.triggerLabel = 'Choose files';
         this.status = new StatusController(this);
+        this.removeIcon = undefined;
+        this.removeIcons = new Map();
+        this.handleRemoveIcon = (event) => {
+            this.removeIcons.clear();
+            this.removeIcon = event.target.assignedElements({ flatten: true })[0];
+        };
         this.handlePaste = (event) => {
             const pasted = [...(event.clipboardData?.files ?? [])];
             if (this.isDisabled || pasted.length === 0) {
                 return;
             }
             event.preventDefault();
-            this.take(pasted, this.multiple ? this.files : []);
+            this.take(pasted, this.files);
         };
         this.dropping = false;
         this.committed = [];
@@ -84,7 +92,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             if (dropped.length === 0) {
                 return;
             }
-            this.take(dropped, this.multiple ? this.files : []);
+            this.take(dropped, this.files);
         };
         this.handleRemove = (event) => {
             const at = Number(event.currentTarget.dataset.at);
@@ -106,21 +114,50 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             multiple: this.multiple || picked,
             validate: this.validate,
         });
-        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
-        if (picked || !(same(kept, this.committed) && same(kept, this.files))) {
-            this.commit(kept);
+        const taken = kept.filter((file) => !keeping.includes(file));
+        const transform = this.transformFiles;
+        if (!transform || taken.length === 0) {
+            this.finish(kept, taken, refused, picked);
+            return;
         }
+        const held = kept.filter((file) => keeping.includes(file));
+        Promise.resolve()
+            .then(() => transform(taken))
+            .then((made) => this.finish([...held, ...made], made, refused, picked), (error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            this.finish(held, [], [...refused, ...taken.map((file) => ({ file, message, reason: 'invalid' }))], picked);
+        });
+    }
+    finish(next, added, refused, picked) {
+        const same = (one, two) => one.length === two.length && one.every((file, at) => file === two[at]);
+        const moved = picked || !(same(next, this.committed) && same(next, this.files));
+        const applied = moved && this.commit(next);
         if (refused.length > 0) {
-            this.refuse(refused);
+            this.dispatchEvent(new HelixRejectEvent({ files: refused }));
+        }
+        const words = [
+            applied && !picked && added.length > 0 ? this.listed(this.addedText, added) : '',
+            refused.length > 0
+                ? this.listed(this.rejectedText, refused.map((one) => one.file))
+                : '',
+        ].filter((one) => one !== '');
+        if (words.length > 0) {
+            this.status.say(words.join(' '));
         }
     }
-    refuse(refused) {
-        this.dispatchEvent(new HelixRejectEvent({ files: refused }));
-        const words = fillTemplate(this.rejectedText, {
-            count: formatNumbers(this.lang)(refused.length),
-            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(refused.map((one) => one.file.name)),
+    listed(sentence, files) {
+        return fillTemplate(sentence, {
+            count: formatNumbers(this.lang)(files.length),
+            names: new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(files.map((file) => file.name)),
         });
-        this.status.say(words);
+    }
+    removeMark(at) {
+        if (!this.removeIcon) {
+            return drawIcon(trash);
+        }
+        const held = this.removeIcons.get(at) ?? this.removeIcon.cloneNode(true);
+        this.removeIcons.set(at, held);
+        return held;
     }
     get files() {
         return [...(this.control?.files ?? [])];
@@ -132,12 +169,15 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.commit([]);
     }
     removeAt(at) {
-        this.commit(this.files.filter((_, index) => index !== at));
+        const gone = this.files[at];
+        if (gone && this.commit(this.files.filter((_, index) => index !== at))) {
+            this.status.say(fillTemplate(this.removedText, { name: gone.name }));
+        }
     }
     commit(next) {
         const control = this.control;
         if (!control) {
-            return;
+            return false;
         }
         const previous = this.committed;
         const applied = requestChange({
@@ -152,6 +192,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (!applied) {
             this.put(control, previous);
         }
+        return applied;
     }
     put(control, files) {
         if (files.length === 0) {
@@ -197,6 +238,8 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     updated(changed) {
         super.updated(changed);
         this.sync();
+        this.toggleState('dropping', this.dropping);
+        this.toggleState('has-files', this.files.length > 0);
     }
     focus(options) {
         this.control?.focus(options);
@@ -246,6 +289,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
           <slot name="trigger">${this.triggerLabel}</slot>
         </label>
       </div>
+      <!-- Hidden, because this is where the icon arrives: each remove button
+           shows a copy. -->
+      <slot name="remove-icon" hidden @slotchange=${this.handleRemoveIcon}></slot>
       <!-- The hint sits under the field and the list goes last, which is the
            one ordering decision this component makes differently from the way it
            reads. Reasoning above renderMeta. -->
@@ -256,10 +302,12 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
             : html `<ul part="list">
               ${files.map((file, at) => html `<li part="file">
                   <span part="detail">
-                    <span part="name">${file.name}</span>
-                    <span part="meta">
-                      ${this.renderMeta(file)}
-                    </span>
+                    ${this.renderFile
+                ? this.renderFile(file, at)
+                : html `<span part="name">${file.name}</span>
+                          <span part="meta">
+                            ${this.renderMeta(file)}
+                          </span>`}
                   </span>
                   <button
                     part="remove"
@@ -269,7 +317,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}
                   >
-                    ${drawIcon(trash)}
+                    ${this.removeMark(at)}
                   </button>
                 </li>`)}
             </ul>`}`;
@@ -278,6 +326,9 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: 'added-text' })
+], HelixHeadlessFileInput.prototype, "addedText", void 0);
 __decorate([
     property()
 ], HelixHeadlessFileInput.prototype, "capture", void 0);
@@ -299,15 +350,27 @@ __decorate([
 __decorate([
     property({ attribute: 'rejected-text' })
 ], HelixHeadlessFileInput.prototype, "rejectedText", void 0);
+__decorate([
+    property({ attribute: 'removed-text' })
+], HelixHeadlessFileInput.prototype, "removedText", void 0);
 __decorate([
     property({ attribute: 'remove-label' })
 ], HelixHeadlessFileInput.prototype, "removeLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "renderFile", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFileInput.prototype, "transformFiles", void 0);
 __decorate([
     property({ attribute: 'trigger-label' })
 ], HelixHeadlessFileInput.prototype, "triggerLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessFileInput.prototype, "validate", void 0);
+__decorate([
+    state()
+], HelixHeadlessFileInput.prototype, "removeIcon", void 0);
 __decorate([
     state()
 ], HelixHeadlessFileInput.prototype, "dropping", void 0);

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

@@ -27,7 +27,8 @@ export declare const accepts: (file: File, accept: string) => boolean;
 /**
  * Screens arriving files against the rules, given the files the field keeps.
  * `kept` is what the field holds afterward: the files it keeps and the
- * arrivals it took, or for a single-file field the last arrival it took.
+ * arrivals it took, or for a single-file field the last arrival it took, and
+ * the file it keeps when it took none.
  */
 export declare const screenFiles: (arriving: File[], keeping: File[], rules: ScreenRules) => {
     kept: File[];

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

@@ -71,6 +71,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The mark at the end of a row: a check mark on a chosen value, and a caret on a field.
  * @csspart entry-shortcut - The key drawn for a row's shortcut. The filter menu sets none, so it renders only where a subclass does.
  * @csspart entry-shortcut-kbd - The key inside it.
+ * @csspart entry-shortcut-key - One key of the shortcut's chord.
+ * @csspart entry-shortcut-separator - The `+` between two keys of the shortcut, where the platform writes one.
  * @csspart entry-start - The leading column.
  * @csspart menu - The menu the fields are offered in.
  * @csspart menu-back - The button that goes back from a field's page.

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

@@ -138,7 +138,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
             return html `<${item}
           part="entry"
           exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
           data-facet="field"
           data-field=${name}
         >
@@ -147,7 +149,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                 ? html `<${item}
                   part="entry"
                   exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                   slot="submenu"
                   data-facet="comparison"
                   data-field=${name}
@@ -156,7 +160,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   ${operators.map((operator) => html `<${item}
                       part="entry"
                       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
                       slot="submenu"
                       checkable
                       exclusive
@@ -179,7 +185,9 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
           ${offered.map((option) => html `<${item}
               part="entry"
               exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-            shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+            shortcut-kbd: entry-shortcut-kbd,
+            shortcut-key: entry-shortcut-key, shortcut-separator: entry-shortcut-separator,
+            start: entry-start"
               slot="submenu"
               checkable
               ?exclusive=${using?.arity === 'one'}

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

@@ -13,12 +13,36 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  * its tokens show a selection it owns, drawn from the options it was given.
  *
  * `value` is the typed text. Every keystroke fires `input` with the text on the
- * element, so a table can narrow as the user types. A form receives the text
- * under `name`, and then one more entry under `name` for each token: its
- * `value` attribute, or for a `FilterChip`, its field and values written
- * `field:values` as the field reads them typed. Backspace in an empty field fires
- * `helix-dismiss` on the last token, the same event its remove control fires,
- * so one handler covers the pointer and the keyboard.
+ * element, so a table can narrow as the user types. Backspace in an empty field
+ * fires `helix-dismiss` on the last token, the same event its remove control
+ * fires, so one handler covers the pointer and the keyboard.
+ *
+ * **What a form receives.** The text under `name`, and then one more entry
+ * under `name` for each token, in the order the tokens stand:
+ *
+ * | Token | Entry |
+ * |---|---|
+ * | Any element with a `value` attribute | The value as written: `saved:mine` |
+ * | `FilterChip` with `name` and values | `status:open,pending` |
+ * | The same, with `operator="none"` (what a typed `-status:` makes) | `-status:open,pending` |
+ * | The same, with any other `operator` except `any` | `created[after]:2024` |
+ * | A token with neither | Nothing |
+ *
+ * The values are the chip's text outside its `field` and `operator` slots,
+ * with the spaces around each comma removed. A server splits an entry at its
+ * first colon, reads a leading `-` as the negation, and reads a word in
+ * brackets before the colon as the comparison.
+ *
+ * **Keyboard.** Focus stays in the text. The text names the highlighted
+ * suggestion as its `aria-activedescendant`.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Enter | Presses the highlighted suggestion. With none highlighted, reads the typed filters into chips, or submits the form when there are none. |
+ * | Down, Up | Moves the highlight through the suggestions, wrapping, and opens the panel. |
+ * | Home, End | Highlights the first or the last suggestion while the panel is open. |
+ * | Escape | Closes the panel and stops there, so a dialog around the field stays open. |
+ * | Backspace | In an empty field, asks the last token to go. |
  *
  * **Typed filters.** The field parses only the fields you declare. Write
  * `FilterField` elements, usually inside the `FilterMenu` slotted into `start`,

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

@@ -364,7 +364,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         super.updated(changed);
         this.releaseCaret?.();
         this.releaseCaret = undefined;
-        this.internals.setFormValue(this.formValue());
+        this.internals.setFormValue(this.formValue(), this.value);
         this.sayCount();
         const control = this.control;
         if (control) {

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

@@ -9,9 +9,34 @@
 export declare const currentTerm: (text: string, caret?: number) => string;
 /** Whether a suggestion's words hold the term, ignoring case and accents. */
 export declare const suggests: (words: string, term: string) => boolean;
+/** What a token says about the filter it shows, as `tokenEntry` reads it. */
+export interface TokenWords {
+    /** The field it filters, from its `name` attribute. */
+    readonly field: string | null;
+    /** The comparison, from its `operator` attribute. */
+    readonly operator: string | null;
+    /** The values it shows, from its text. */
+    readonly text: string;
+    /** What it sends as written, from its `value` attribute. */
+    readonly value: string | null;
+}
 /**
- * What a token sends a form: its `value` attribute, or for a token naming a
- * field, the field and the values it shows, written `field:values` the way the
- * field reads them typed. Nothing for a token that says neither.
+ * The form entry for a token's words: its `value` where it has one, or else
+ * `field:values`, the way the field reads a filter typed.
+ *
+ * - The values are the token's text, with the spaces around each comma taken
+ *   out: `status:open,pending`.
+ * - The comparison named `none`, which a typed `-field:` asks for, leads with a
+ *   `-`: `-team:ops`.
+ * - Any comparison other than `any` and `none` is written in brackets after
+ *   the field, so a chip that says `is after` keeps it: `created[after]:2024`.
+ *   `any`, or no `operator`, writes none.
+ * - A token naming no field, or showing no values, sends nothing.
+ */
+export declare const entryFor: ({ field, operator, text, value }: TokenWords) => string | null;
+/**
+ * The form entry for a slotted token. See `entryFor`. The values are the text
+ * of the token's unslotted content, so a name or a comparison slotted into a
+ * chip's `field` or `operator` is not read as a value.
  */
 export declare const tokenEntry: (token: Element) => string | null;

package/dist/filter-input/suggest.js

@@ -8,16 +8,26 @@ export const suggests = (words, term) => {
     const plain = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
     return term === '' || plain(words).includes(plain(term));
 };
-export const tokenEntry = (token) => {
-    const written = token.getAttribute('value');
-    if (written !== null) {
-        return written;
+export const entryFor = ({ field, operator, text, value }) => {
+    if (value !== null) {
+        return value;
     }
-    const field = token.getAttribute('name');
-    const values = (token.textContent ?? '').replace(/\s+/gu, ' ').trim();
+    const values = text.replace(/\s+/gu, ' ').trim();
     if (!field || values === '') {
         return null;
     }
-    const negated = token.getAttribute('operator')?.startsWith('not') ? '-' : '';
-    return `${negated}${field}:${values.replace(/\s*,\s*/gu, ',')}`;
+    const shown = values.replace(/\s*,\s*/gu, ',');
+    if (operator === 'none') {
+        return `-${field}:${shown}`;
+    }
+    return operator && operator !== 'any' ? `${field}[${operator}]:${shown}` : `${field}:${shown}`;
 };
+export const tokenEntry = (token) => entryFor({
+    field: token.getAttribute('name'),
+    operator: token.getAttribute('operator'),
+    text: [...token.childNodes]
+        .filter((node) => !(node.nodeType === 1 && node.hasAttribute('slot')))
+        .map((node) => node.textContent ?? '')
+        .join(''),
+    value: token.getAttribute('value'),
+});

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

@@ -154,18 +154,21 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     year?: 'numeric' | '2-digit';
     /**
-     * The clock this element last drew against.
+     * The clock this element last drew against, moved on when the reading goes
+     * stale.
      *
-     * A state field and not a read of `Date.now()` inside `render`, which would
-     * make the template a function of something Lit cannot see change: the element
-     * would draw the right text once and never notice it had gone stale.
+     * A controller's time and not a read of `Date.now()` inside `render`, which
+     * would make the template a function of something Lit cannot see change: the
+     * element would draw the right text once and never notice it had gone stale.
+     * The formatter says when its own answer expires, so the clock wakes at
+     * exactly that moment rather than polling: an item minutes old once a minute,
+     * an item hours old once an hour, and an item showing a date never.
      */
-    private clock;
+    private readonly clock;
     /**
      * The date read out of the light DOM, where no attribute carried one.
      */
     private written;
-    private stopTicking;
     private watching;
     /** Whether the timestamp is a day with no time, which is formatted in UTC. */
     private get dateOnly();
@@ -184,16 +187,6 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     /** The light DOM's own text, which is the other way to write the value. */
     private read;
     private watch;
-    /**
-     * Schedules the next reading, and only the next one.
-     *
-     * The formatter says when its own answer expires, so this asks for exactly
-     * that moment rather than polling: an item minutes old wakes once a minute, an
-     * item hours old once an hour, and an item showing a date never, which is the
-     * difference between a feed that costs nothing to leave open and one that
-     * does.
-     */
-    private tick;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

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

@@ -4,7 +4,7 @@ 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, elapsedTime, HelixElement, relativeTime, subscribe, } from '@fusion.dev/helix-core';
+import { customElement, elapsedTime, HelixElement, RelativeClockController, relativeTime, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { formatOptions } from '../options.js';
@@ -15,9 +15,13 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.date = '';
         this.elapsed = false;
         this.locale = '';
-        this.clock = undefined;
+        this.clock = new RelativeClockController(this, {
+            expires: (now) => {
+                const moment = this.moment;
+                return moment && this.reading ? this.readingAt(moment, now).next : undefined;
+            },
+        });
         this.written = '';
-        this.stopTicking = undefined;
         this.watching = undefined;
     }
     get dateOnly() {
@@ -62,15 +66,12 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
     }
     connectedCallback() {
         super.connectedCallback();
-        this.tick();
         if (this.hasUpdated) {
             this.watch();
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.stopTicking?.();
-        this.stopTicking = undefined;
         this.watching?.disconnect();
         this.watching = undefined;
     }
@@ -89,7 +90,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
             changed.has('locale') ||
             changed.has('numeric') ||
             changed.has('relative')) {
-            this.tick();
+            this.clock.tick();
         }
     }
     read() {
@@ -99,7 +100,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         const written = this.textContent?.trim() ?? '';
         if (written !== this.written) {
             this.written = written;
-            this.tick();
+            this.clock.tick();
         }
     }
     watch() {
@@ -107,21 +108,6 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         this.watching = new MutationObserver(() => this.read());
         this.watching.observe(this, { characterData: true, childList: true, subtree: true });
     }
-    tick() {
-        this.stopTicking?.();
-        this.stopTicking = undefined;
-        const moment = this.moment;
-        if (!moment || !this.reading) {
-            return;
-        }
-        const now = new Date();
-        this.clock = now.getTime();
-        const { next } = this.readingAt(moment, now);
-        if (!Number.isFinite(next) || !this.isConnected) {
-            return;
-        }
-        this.stopTicking = subscribe(next, () => this.tick());
-    }
     render() {
         const moment = this.moment;
         if (!moment) {
@@ -132,7 +118,7 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
             const text = new Intl.DateTimeFormat(this.locale || undefined, this.options).format(moment);
             return html `<time part="time" datetime=${datetime}>${text}</time>`;
         }
-        const now = new Date(this.clock ?? Date.now());
+        const now = new Date(this.clock.now);
         const zone = this.timeZone || (this.dateOnly ? 'UTC' : undefined);
         const whole = new Intl.DateTimeFormat(this.locale || undefined, {
             dateStyle: 'long',
@@ -203,9 +189,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessFormatDate.prototype, "year", void 0);
-__decorate([
-    state()
-], HelixHeadlessFormatDate.prototype, "clock", void 0);
 __decorate([
     state()
 ], HelixHeadlessFormatDate.prototype, "written", void 0);

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

@@ -1,6 +1,7 @@
 import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
+import { type Reading } from './buckets.js';
 declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
 /**
  * @summary A strip of cells, each colored by its reading, for uptime, contributions, or activity.
@@ -30,7 +31,13 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * down arrows move a cell, the left and right arrows move a column, which is a
  * week with `rows="7"`, and Home and End go to the first and the last. The
  * tooltip follows, the `live` part says the cell's row in words, and Escape
- * puts the tooltip away.
+ * puts the tooltip away. PageUp and PageDown move four columns, which is four
+ * weeks with `rows="7"`.
+ *
+ * **The strip describes itself.** The `overview` part says the busiest
+ * reading and the total of the readings drawn, "Busiest: 11 Jun 12; Total
+ * 84", and the strip is described by it, as every chart is by its summary.
+ * Hide it visually. The `summary` slot is still yours, for words of your own.
  *
  * @since 0.1.0
  * @status stable
@@ -51,6 +58,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @csspart footer - The three-slot row under the strip.
  * @csspart live - The readout: a polite live region that says the cell the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
+ * @csspart overview - The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.
  * @csspart start - The leading slot's box.
  * @csspart strip - The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart summary - The middle slot's box.
@@ -87,6 +95,10 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @cssproperty --heatmap-tone-warning - The color of the `warning` tone.
  */
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
+    /**
+     * The word the `overview` puts before the busiest reading.
+     */
+    busiestLabel: string;
     /**
      * Shown when the table has no readings in it.
      *
@@ -151,6 +163,10 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * no order in it.
      */
     tones: string;
+    /**
+     * The word the `overview` puts before the total of the readings drawn.
+     */
+    totalLabel: string;
     /**
      * How many cells are actually drawn.
      *
@@ -197,18 +213,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * image a reader lands on. The host is a generic around it.
      */
     protected readonly aria: AriaForwardController;
-    /**
-     * Hears an `aria-label` written on the element, which no property mirrors.
-     *
-     * Lit observes the attributes of its own properties only, and `ariaLabel`
-     * belongs to the platform.
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Called by the browser when an observed attribute changes. A new
-     * `aria-label` asks for an update, because it names the strip.
-     */
-    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     private observer;
     private announced;
     /**
@@ -314,6 +318,13 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * What the strip shows, in a sentence: the busiest reading drawn, as the
+     * table writes it, and the total of them all, in `locale`. The strip is
+     * described by it, so a reader landing on the strip hears what it holds
+     * before walking it.
+     */
+    protected renderOverview(cells: Reading[]): TemplateResult;
     /**
      * The bubble over the cell a pointer is resting on.
      *