@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

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

@@ -34,12 +34,8 @@ import { cycle, format, ordered, parse } from './order.js';
  * </helix-data-table>
  * ```
  *
- * This is the resolution of a deferral rather than a new idea. `helix-table`
- * takes rows as markup and is the right component for a table of twelve things
- * a person wrote out; the repeated `page`, `page-size` and `total` attributes on
- * the three pagination elements are placeholders whose own comments name the fix
- * as "a data table composing a pagination inside itself", and `helix-table`
- * already carried `@aliases DataTable`: a name claimed and not kept.
+ * `helix-table` takes rows as markup and is the right component for a table of
+ * twelve things a person wrote out.
  *
  * **Sort and filter apply to the whole set, never the page.** Sorting the drawn
  * window is correct on the first screen and wrong on every other one, which is
@@ -59,10 +55,10 @@ import { cycle, format, ordered, parse } from './order.js';
  * `helix-table` where the content has to be in the served HTML and the result is
  * small enough to write out; use this where the result is large, and accept that
  * the first paint is a shell. The obvious workaround, a `columns` property
- * beside the markup columns, is deliberately not offered: this family has
- * already shipped one source of truth for columns splitting into two, nothing
- * checked that they agreed, and a table rendering one way on the server and
- * another in the browser is that failure with a hydration mismatch on top.
+ * beside the markup columns, is deliberately not offered: it splits one source
+ * of truth for the columns into two that nothing checks against each other, and
+ * a table rendering one way on the server and another in the browser is that
+ * failure with a hydration mismatch on top.
  *
  * **Every axis is controlled or uncontrolled, and that is what makes a server
  * mode fall out rather than be bolted on.** `sort`, `filter`, `page` and
@@ -102,17 +98,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     constructor() {
         super(...arguments);
         /**
-         * The whole result, in the order it arrived.
-         *
-         * A property and not an attribute: it is an array. Left alone this element
-         * filters, sorts and pages it; in `server` mode it is the page the consumer
-         * already fetched and none of the three is applied.
-         *
-         * **Read, never written.** Sorting produces a new array rather than reordering
-         * this one, because a consumer's array may be the same object their own state
-         * holds and reordering it under them is a mutation they did not ask for.
+         * Query to open with, where nothing declared one.
          */
-        this.rows = [];
+        this.defaultFilter = '';
+        /**
+         * Page to open on, where nothing declared one.
+         */
+        this.defaultPage = 1;
+        /**
+         * Page size to open with, where nothing declared one.
+         */
+        this.defaultPageSize = 0;
+        /**
+         * Order to open on, where nothing declared one.
+         */
+        this.defaultSort = '';
         /**
          * The field naming a row's stable identity.
          *
@@ -124,6 +124,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
          * that works and is worth setting anyway.
          */
         this.key = '';
+        /**
+         * Accessible name for the grid.
+         */
+        this.label = '';
         /**
          * Whether this element does the work or asks the consumer to.
          *
@@ -135,6 +139,18 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
          * inverts the data flow.
          */
         this.mode = 'client';
+        /**
+         * The whole result, in the order it arrived.
+         *
+         * A property and not an attribute: it is an array. Left alone this element
+         * filters, sorts and pages it; in `server` mode it is the page the consumer
+         * already fetched and none of the three is applied.
+         *
+         * **Read, never written.** Sorting produces a new array rather than reordering
+         * this one, because a consumer's array may be the same object their own state
+         * holds and reordering it under them is a mutation they did not ask for.
+         */
+        this.rows = [];
         /**
          * How many rows the whole result has, where this element cannot count them.
          *
@@ -144,26 +160,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
          * one that cannot be stale.
          */
         this.total = 0;
-        /**
-         * Accessible name for the grid.
-         */
-        this.label = '';
-        /**
-         * Order to open on, where nothing declared one.
-         */
-        this.defaultSort = '';
-        /**
-         * Query to open with, where nothing declared one.
-         */
-        this.defaultFilter = '';
-        /**
-         * Page to open on, where nothing declared one.
-         */
-        this.defaultPage = 1;
-        /**
-         * Page size to open with, where nothing declared one.
-         */
-        this.defaultPageSize = 0;
         this.sortState = undefined;
         this.filterState = undefined;
         this.pageState = undefined;
@@ -229,8 +225,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
      * Set it and this element defers: a reader's click fires `helix-sort` and
      * changes nothing until a new value arrives. `default-sort` seeds an order this
      * element then owns.
-     *
-     *
      */
     get sort() {
         return this.sortState ?? this.defaultSort;
@@ -246,8 +240,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
      * One query rather than a predicate per column, which is what a reader means
      * by a search box above a table. It matches on each column's ordering value,
      * so search and sort cannot disagree about what a column holds.
-     *
-     *
      */
     get filter() {
         return this.filterState ?? this.defaultFilter;
@@ -263,8 +255,6 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
      * Clamped on the way out, so what this reports is the page it drew: a
      * bookmarked link to page 99 of a result that has since shrunk reads back as
      * the last page rather than as 99.
-     *
-     *
      */
     get page() {
         const asked = this.pageState ?? this.defaultPage;
@@ -312,8 +302,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     get tableColumns() {
         /* `?? []` is the server. Lit's element shim carries attributes and not a
            tree, so `children` is undefined there, and this getter is read during
-           `render`: spreading it threw and took the whole SSR suite with it in this
-           family once already. */
+           `render`: spreading it throws and takes the whole SSR suite with it. */
         return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     /** The columns reduced to what the ordering needs. */
@@ -346,19 +335,18 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
      * which means the out-of-the-box arrangement is the unbounded one and nothing
      * about it says that a result of any size will simply be drawn.
      *
-     * **Windowing was considered and refused**, which is worth recording because
-     * it is the obvious answer. This element already has two: `paginated` with a
+     * **Windowing was refused**, which is worth recording because it is the
+     * obvious answer. This element already has two mechanisms: `paginated` with a
      * `page-size`, and `mode="server"` where `rows` is one page, `total` is the
      * whole result and `aria-rowcount` already reports the result rather than the
      * window, which is the hard half of virtualization done correctly. A third
-     * mechanism would fight the first two, and virtualizing a grid means variable
-     * row heights, a sticky header and keeping `aria-rowindex` honest against a
-     * result the element is no longer holding. `VirtualizeController` exists for
-     * the case where the rows are a flat list and this is not that. See #326.
+     * would fight the first two, and virtualizing a grid means variable row
+     * heights, a sticky header and keeping `aria-rowindex` honest against a result
+     * the element is no longer holding. `VirtualizeController` exists for the case
+     * where the rows are a flat list and this is not that.
      *
-     * So the gap was never the capability, it was that nothing said which of the
-     * two to reach for. Once per element, in a browser only: a warning during a
-     * server render is one nobody can act on and one that would print per request.
+     * Warned once per element, in a browser only: a warning during a server render
+     * is one nobody can act on and one that would print per request.
      */
     warnIfCrowded(drawn) {
         if (this.warnedAboutSize ||
@@ -528,18 +516,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     /**
      * Says on the toolbar and the footer whether anything is in them.
      *
-     * **The stylesheet used to ask, and could not.** It read
-     * `[part="toolbar"]:has(> slot:not(:has(*)))`, which is two faults at once:
-     * `:has()` may not be nested inside `:has()`, so the selector failed to parse
-     * and the whole rule was discarded; and `slot:not(:has(*))` is as true of a
-     * filled slot as of an empty one, because assigned nodes are not a slot's DOM
-     * children. Both verified in a browser. A table with no toolbar paid the gap
-     * above the grid for one that was not there.
+     * **A stylesheet cannot ask.** `[part="toolbar"]:has(> slot:not(:has(*)))` is
+     * two faults at once: `:has()` may not be nested inside `:has()`, so the
+     * selector fails to parse and the whole rule is discarded; and
+     * `slot:not(:has(*))` is as true of a filled slot as of an empty one, because
+     * assigned nodes are not a slot's DOM children. Both verified in a browser.
      */
     markEmpty() {
         this.markRegion('toolbar', ['toolbar']);
         /* The footer is not empty while this element is drawing its own pagination
-           into it, which is the case the old selector spelled with a second `:not`. */
+           into it. */
         this.markRegion('footer', ['footer'], '[part="pagination"]');
     }
     /**
@@ -561,6 +547,32 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         super.updated(changed);
         this.markEmpty();
         this.assign();
+        this.announceSort();
+    }
+    /**
+     * Tells each column which way it is ordered, if it is the one.
+     *
+     * **The table owns the sort and the column carries the semantics**, which is
+     * the only arrangement that can be right: `role="columnheader"` is on the
+     * column, so `aria-sort` has to be there too, and the value is a fact about
+     * the table's `sort` rather than about any column. Pushed down here rather
+     * than pulled up there, because a column asking its parent would have to know
+     * what kind of parent it has, and it is slotted into two.
+     *
+     * In `updated` and after `assign`, so the order announced is the order the
+     * rows are already in. Announced before the rows moved is the sort a reader is
+     * told about being one they cannot see yet.
+     */
+    announceSort() {
+        const current = parse(this.sort);
+        for (const column of this.tableColumns) {
+            column.sorted =
+                current && column.canSort && column.field === current.field
+                    ? current.direction === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : undefined;
+        }
     }
     renderCell(column, row) {
         return html `<span
@@ -639,8 +651,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
      * node passes through the slot in the flattened tree, and does not work in
      * happy-dom, which does not implement that propagation: measured, the host
      * hears the click and the slot does not. A spec written against the slot fails
-     * in the suite while the component is correct, and the same trust in the
-     * flattened tree could as easily have gone the other way.
+     * in the suite while the component is correct.
      *
      * Added here rather than in the template because there is nothing in the
      * shadow tree to attach it to, and removed on disconnect because this element
@@ -667,44 +678,44 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
 };
 __decorate([
-    property({ attribute: false })
-], HelixHeadlessDataTable.prototype, "rows", void 0);
+    property({ attribute: 'default-filter' })
+], HelixHeadlessDataTable.prototype, "defaultFilter", void 0);
 __decorate([
-    property()
-], HelixHeadlessDataTable.prototype, "key", void 0);
+    property({ attribute: 'default-page', type: Number })
+], HelixHeadlessDataTable.prototype, "defaultPage", void 0);
 __decorate([
-    property()
-], HelixHeadlessDataTable.prototype, "mode", void 0);
+    property({ attribute: 'default-page-size', type: Number })
+], HelixHeadlessDataTable.prototype, "defaultPageSize", void 0);
 __decorate([
-    property({ type: Number })
-], HelixHeadlessDataTable.prototype, "total", void 0);
+    property({ attribute: 'default-sort' })
+], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "label", void 0);
+], HelixHeadlessDataTable.prototype, "key", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
 __decorate([
-    property({ attribute: 'default-sort' })
-], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
+    property()
+], HelixHeadlessDataTable.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
 __decorate([
-    property({ attribute: 'default-filter' })
-], HelixHeadlessDataTable.prototype, "defaultFilter", void 0);
+    property()
+], HelixHeadlessDataTable.prototype, "mode", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
 __decorate([
-    property({ attribute: 'default-page', type: Number })
-], HelixHeadlessDataTable.prototype, "defaultPage", void 0);
+    property({ attribute: false })
+], HelixHeadlessDataTable.prototype, "rows", void 0);
 __decorate([
     property({ attribute: 'page-size', type: Number })
 ], HelixHeadlessDataTable.prototype, "pageSize", null);
 __decorate([
-    property({ attribute: 'default-page-size', type: Number })
-], HelixHeadlessDataTable.prototype, "defaultPageSize", void 0);
+    property({ type: Number })
+], HelixHeadlessDataTable.prototype, "total", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "paginated", null);

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

@@ -20,8 +20,8 @@
  *
  * Not `DataRow`: `@fusion.dev/helix-core` already exports one, for a cell read out of a
  * chart series, and the headless barrel re-exports both. Two different `DataRow`s
- * reaching a consumer through one package is the kind of ambiguity TypeScript
- * refuses outright, which is how this was caught.
+ * reaching a consumer through one package is an ambiguity TypeScript refuses
+ * outright.
  */
 export type DataRow = Readonly<Record<string, unknown>>;
 /** One column's contribution, reduced to the two functions this module needs. */

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

@@ -140,9 +140,7 @@ const text = (value) => {
  * **`sign` is applied in here rather than to the result**, and that is why it is
  * a parameter rather than the caller's multiplication. Written the obvious way,
  * as `sign * compare(a, b)`, the constant this returns for a hole flips with the
- * direction and the holes lead a descending sort: the comment above it claimed
- * otherwise for as long as it took the spec to be written, which is the argument
- * for writing the spec.
+ * direction and the holes lead a descending sort.
  */
 const compare = (left, right, sign) => {
     const leftMissing = left === null || left === undefined || left === '';

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

@@ -84,70 +84,10 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * What the browser may autofill here, as one of the platform's own tokens.
      *
      * Empty leaves the attribute off, which is the browser's default and is what
-     * lets autofill work at all. This used to be hardcoded `off`, so a reader
-     * could never have a birthday or a postal code filled in for them and a
-     * consumer had no way to ask for it. See 295.
+     * lets autofill work at all: hardcoding `off` here means a birthday or a
+     * postal code can never be filled in for a reader.
      */
     autocomplete: string;
-    /**
-     * How many dates can be held at once.
-     *
-     * Absent is one. `range` holds a start and an end, `multiple` holds any
-     * number, and both are carried as one comma-separated value: a form field
-     * submits a string, and two fields for one question is a different control.
-     */
-    mode?: 'range' | 'multiple';
-    /**
-     * How many months the calendar shows, side by side.
-     *
-     * Worth more than one mainly for a range, where picking a start in March and
-     * an end in April otherwise means paging between them and losing sight of the
-     * first. The panel is sized by its content, so this widens it.
-     */
-    months: number;
-    /**
-     * How many dates are shown as tags before the rest are counted, in `multiple`.
-     *
-     * `0` is all of them, and is the default: a cap that guesses is worse than no
-     * cap, because the number that fits depends on the width of the field and the
-     * length of what is in it, neither of which this element knows. What a cap is
-     * genuinely for is a field in a row or a table cell, where a set of twelve
-     * dates would push everything below it down a line at a time.
-     *
-     * The remainder is counted rather than hidden. "3 more" is a fact a reader can
-     * act on, where a row that silently stops is a field that appears to have lost
-     * what was put in it, and the count is what tells them there is more to see.
-     */
-    maxTags: number;
-    /**
-     * Earliest date that can be chosen, as `YYYY-MM-DD`.
-     */
-    min: string;
-    /**
-     * How far apart the selectable dates are, in days.
-     *
-     * `<input type="date" step>`'s own unit, handed to the calendar this renders
-     * so the field and the grid agree about which dates exist. Counted from `min`
-     * where there is one and from 1 January 1970 where there is not, which is the
-     * platform's base.
-     */
-    step: number;
-    /**
-     * Latest date that can be chosen, as `YYYY-MM-DD`.
-     */
-    max: string;
-    /**
-     * Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.
-     */
-    disableDates: string;
-    /**
-     * Days of the week that cannot be chosen, `0` for Sunday through `6`.
-     */
-    disableDays: string;
-    /**
-     * First column of the week in the calendar, `0` for Sunday through `6`.
-     */
-    firstDayOfWeek: number;
     /**
      * How a date is written in the field: `short` through `full`, or ISO.
      *
@@ -173,18 +113,87 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * submits and what `min` and `max` compare against.
      */
     dateStyle: 'full' | 'iso' | 'long' | 'medium' | 'short';
+    /**
+     * Dates that cannot be chosen, as a comma-separated `YYYY-MM-DD` list.
+     */
+    disableDates: string;
+    /**
+     * Days of the week that cannot be chosen, `0` for Sunday through `6`.
+     */
+    disableDays: string;
+    /**
+     * First column of the week in the calendar, `0` for Sunday through `6`.
+     */
+    firstDayOfWeek: number;
     /**
      * Language tag the calendar names its months and days in.
      */
     locale: string;
+    /**
+     * Latest date that can be chosen, as `YYYY-MM-DD`.
+     */
+    max: string;
+    /**
+     * How many dates are shown as tags before the rest are counted, in `multiple`.
+     *
+     * `0` is all of them, and is the default: a cap that guesses is worse than no
+     * cap, because the number that fits depends on the width of the field and the
+     * length of what is in it, neither of which this element knows. What a cap is
+     * genuinely for is a field in a row or a table cell, where a set of twelve
+     * dates would push everything below it down a line at a time.
+     *
+     * The remainder is counted rather than hidden. `+3` is a fact a reader can
+     * act on, where a row that silently stops is a field that appears to have lost
+     * what was put in it, and the count is what tells them there is more to see.
+     */
+    maxTags: number;
+    /**
+     * Earliest date that can be chosen, as `YYYY-MM-DD`.
+     */
+    min: string;
+    /**
+     * How many dates can be held at once.
+     *
+     * Absent is one. `range` holds a start and an end, `multiple` holds any
+     * number, and both are carried as one comma-separated value: a form field
+     * submits a string, and two fields for one question is a different control.
+     */
+    mode?: 'range' | 'multiple';
+    /**
+     * How many months the calendar shows, side by side.
+     *
+     * Worth more than one mainly for a range, where picking a start in March and
+     * an end in April otherwise means paging between them and losing sight of the
+     * first. The panel is sized by its content, so this widens it.
+     */
+    months: number;
     /**
      * What the field says before a date is in it.
      */
     placeholder: string;
     /**
-     * Accessible name for the control that opens the calendar.
+     * Whether the control refuses changes while still submitting its value.
+     *
+     * **Enforced by refusing every request in one place**, which is the seam this
+     * component already has: `requestValue` is what every path here comes through,
+     * and gating it once is what stops the next call site from being written
+     * without the check.
+     *
+     * Not `disabled`, which is the confusion worth naming: a disabled control
+     * submits nothing and leaves the tab order, and a read-only one submits its
+     * value and stays reachable, which is what a form showing a value somebody
+     * else set needs.
      */
-    triggerLabel: string;
+    readOnly: boolean;
+    /**
+     * How far apart the selectable dates are, in days.
+     *
+     * `<input type="date" step>`'s own unit, handed to the calendar this renders
+     * so the field and the grid agree about which dates exist. Counted from `min`
+     * where there is one and from 1 January 1970 where there is not, which is the
+     * platform's base.
+     */
+    step: number;
     /**
      * The overlay, placed against the field rather than the trigger.
      *
@@ -247,19 +256,9 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /** Escape shuts the calendar without moving the date. */
     private readonly handleKeydown;
     /**
-     * Whether the control refuses changes while still submitting its value.
-     *
-     * **Enforced by refusing every request in one place**, which is the seam this
-     * component already has: `requestValue` is what every path here comes through,
-     * and gating it once is what stops the next call site from being written
-     * without the check.
-     *
-     * Not `disabled`, which is the confusion worth naming: a disabled control
-     * submits nothing and leaves the tab order, and a read-only one submits its
-     * value and stays reachable, which is what a form showing a value somebody
-     * else set needs.
+     * Accessible name for the control that opens the calendar.
      */
-    readOnly: boolean;
+    triggerLabel: string;
     /** Refuses every change while read-only. See `readOnly`. */
     requestValue(next: string): boolean;
     protected firstUpdated(changed: PropertyValues): void;
@@ -280,9 +279,8 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * outside this element and reads as an arrival. Every step is ordinary browser
      * behavior and none of it can be exercised here: `focus()` dispatches no
      * event in an unfocused document, which is what both the test runtime and the
-     * available browser pane are. A spec was written for it and passed with the
-     * guard removed, so it was covering nothing and has been taken out rather than
-     * left to look like proof.
+     * available browser pane are. A spec for this passes with the guard removed,
+     * so there is no spec: it would cover nothing while looking like proof.
      *
      * A flag rather than a better guess, because this element is the one moving
      * the focus and is the only thing that can know so. Cleared synchronously,
@@ -297,23 +295,21 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     /**
      * The calendar the field opens, behind a seam the styled tier can move.
      *
-     * A method rather than a fragment inline, so a tier above can render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
+     * A method rather than a fragment inline, so a tier above can replace, wrap
+     * or omit it without reimplementing the whole template. The tag is
      * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * headless element, and a styled subclass that sets `tier` renders the styled
+     * one from the same template.
      */
     protected renderPicker(): TemplateResult;
     /**
      * One chosen date, as a tag, behind a seam the styled tier can move.
      *
-     * A method rather than a fragment inline, so a tier above can render its own,
-     * wrap this one, pass it a property the base does not know about, or leave it
-     * out, without reimplementing the whole template to do any of them. The tag is
+     * A method rather than a fragment inline, so a tier above can replace, wrap
+     * or omit it without reimplementing the whole template. The tag is
      * interpolated rather than written, so `tier` resolves it: this renders the
-     * headless element, and a styled subclass that sets `tier` renders the styled one
-     * from the same template.
+     * headless element, and a styled subclass that sets `tier` renders the styled
+     * one from the same template.
      */
     protected renderTag(date: string): TemplateResult;
     /**
@@ -322,15 +318,14 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * Slot fallback, so a consumer replaces it by slotting; and a method, so the
      * tier above replaces it by overriding.
      *
-     * **A named import rather than `<helix-icon>`, and that is a reversal.** The
-     * element looked like the tidier of the two and loses on three counts.
+     * **A named import rather than `<helix-icon>`**, which loses on three counts.
      * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
      * no bundler can shake a runtime lookup, so every consumer of any component
      * that renders one ships all 50kB of path data; a named import ships one
      * path. The import is checked when the package compiles, where a `name`
-     * string is checked only when `check:icons` runs. And `helix-icon` is not
+     * string is checked only by a later name lookup. And `helix-icon` is not
      * registered on the headless tier at all, which registers `helix-headless-icon`,
-     * so a headless consumer got an inert unknown element and no mark whatsoever.
+     * so a headless consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
     protected render(): TemplateResult;