@fusion.dev/helix-headless 0.2.0 → 0.4.0

package/dist/pagination/root/pagination-root.js

@@ -9,285 +9,37 @@ import { caretDoubleLeft, caretDoubleRight, caretLeft, caretRight, } from '@fusi
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-/**
- * Fills `{page}` and `{pages}` in a template a consumer wrote.
- *
- * A template rather than a prefix, because word order is not universal and a
- * `page-label="Page"` that this glued a number onto would produce the English
- * order in every language. `href="/products?page={page}"` is the same mechanism
- * doing a second job, which is why there is one placeholder syntax and not two.
- *
- * `format` is what makes the numbers local as well as the words. It is the
- * identity for an address and an `Intl.NumberFormat` for anything a person
- * reads: a URL is machine-facing and `?page=1,234` is a different page from
- * `?page=1234`, where a label read aloud should say the number the way the
- * reader's locale says it.
- */
 const fill = (template, page, pages, format = String) => template.replaceAll('{page}', format(page)).replaceAll('{pages}', format(pages));
-/**
- * @summary Moves between pages of a longer result.
- *
- * @description
- * The component is the truncation. Given a page and a total it works out which
- * numbers to show and where the runs break, which is the whole of what a
- * consumer would otherwise write by hand and get subtly wrong; everything else
- * here is markup around that. So this is data-driven rather than composed:
- * `<helix-pagination page="4" pages="12">` rather than twelve slotted children
- * a consumer has to keep in step with their own query.
- *
- * **The width does not change as you page.** The run around the current page is
- * `siblings` either side normally, and grows to absorb a gap slot when it meets
- * a boundary, so the control holds the same number of slots from the first page
- * to the last. Every arrangement that lets the count vary makes the buttons move
- * under the pointer between one click and the next.
- *
- * **A gap is only drawn where it hides more than one page.** An ellipsis
- * standing in for a single number costs the same space as the number and tells
- * the reader less.
- *
- * **And a gap is a control.** It goes to the middle of the run it stands over,
- * which is the binary-search step: any page in a set of any size is a handful of
- * presses, where a jump of a fixed size would need forty of them on a set of a
- * hundred and twenty-eight. A menu listing the hidden pages was the other idea
- * and the arithmetic refuses it, for the reasons on `renderGap`.
- *
- * **`href` is what makes these links.** Set it and every page renders an `<a>`
- * with `{page}` filled in, so the server's output is crawlable, a middle click
- * opens a tab, and the address bar is the state. Left unset they are buttons,
- * which is right for a table paging in place. Either way the click announces
- * `helix-navigate` first, and `preventDefault()` on it stops the navigation as
- * well as the change: that is how a router takes over without the page reloading
- * underneath it.
- *
- * **`helix-navigate` and not `helix-change`**, for the reason the calendar pages
- * with it too. Moving to page four chooses nothing; it moves the view over a
- * result that has not changed. A consumer driving the view has to be able to
- * hear that without being told an answer changed.
- *
- * **The count and the page-size control are their own elements.** A slot can
- * only offer one place: at one end of one row, in one order, on one axis.
- * `Pagination.Summary` and `Pagination.Size` sit beside this one instead, so
- * the direction and the order of a footer are the consumer's, which is what
- * they were always going to want. `total` and `page-size` stay here for the
- * arithmetic below and nothing else.
- *
- * **A single page renders nothing.** A control offering one page offers no
- * navigation, and the row it sits in should close over it rather than hold a
- * space for a thing that cannot be used. Reported through
- * `ElementInternals.states` rather than an attribute on the host, because an
- * attribute written at upgrade is markup a server's output never had and a
- * framework reports the difference; a custom state carries the same fact to a
- * stylesheet and none of that to the DOM.
- *
- * **And a page change is announced.** Moving the page moves `aria-current` onto
- * a different element, which a screen reader does not announce, so a reader who
- * pressed 5 hears the word "5" from the button they were on and nothing at all
- * about having arrived. A polite live region says where they now are. It ships
- * empty and is filled only on a change, because a region populated as it enters
- * the document announces itself on arrival.
- *
- * `page` is what the element holds and `default-page` seeds it. A consumer
- * paging through a router refuses `helix-navigate` and assigns their own, which
- * is how they take the decision.
- *
- * @since 0.1.0
- * @status experimental
- * @category navigation
- * @aliases Pager, Page nav
- * @documentation https://helix.fusion.dev/components/pagination
- *
- * @slot first-icon - The glyph on the jump-to-first control, usually a double caret.
- * @slot last-icon - The glyph on the jump-to-last control, usually a double caret.
- * @slot next-icon - The glyph on the forward-one-page control, usually a caret.
- * @slot previous-icon - The glyph on the back-one-page control, usually a caret.
- *
- * @event {HelixNavigateEvent} helix-navigate - Fired before the page changes, and cancelable. The only way to refuse one.
- *
- * @csspart first - The control that jumps to the first page, under `ends`.
- * @csspart gap - The control standing over pages not shown, which jumps into them.
- * @csspart item - One slot in the run, holding a page or a gap.
- * @csspart last - The control that jumps to the last page, under `ends`.
- * @csspart list - The run of pages.
- * @csspart live - The region that says the page changed. Clipped, not hidden.
- * @csspart mark - The glyph on a first, previous, next or last control, where none is slotted.
- * @csspart next - The control that moves forward one page.
- * @csspart page - The control for one page.
- * @csspart previous - The control that moves back one page.
- * @csspart status - The reading of where you are, in `compact`.
- */
 let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * How many pages to show at each end, whatever the current one is.
-         */
         this.boundaries = 1;
-        /**
-         * Where the numbers are replaced by a reading of the two.
-         *
-         * A different structure rather than a different look, which is why it is
-         * here: the run of pages is gone and a single status line stands in its
-         * place. This is the shape a narrow screen wants, and the only shape possible
-         * where the total is large enough that no window over it is useful.
-         *
-         * Not reflected, for the reason `ends` is not: it decides what renders, so
-         * nothing has to select on it.
-         */
         this.compact = false;
-        /**
-         * Page to open on, where nothing declared one.
-         */
         this.defaultPage = 1;
-        /**
-         * Whether to offer a jump to the first and last pages.
-         *
-         * Off by default. The gaps already reach any page in a few presses and the
-         * last page is one of the two the run always shows, so on a short set these
-         * are two more controls for a move already on screen. They earn their place
-         * where the reader is deep in a long result and "back to the start" is the
-         * move they actually want.
-         *
-         * Not reflected. It adds two elements rather than changing how any of them
-         * look, so no rule selects on it, and the house rule is that reflection
-         * exists for selectors: an unread reflected attribute is one more thing
-         * written onto a host at upgrade that a server's output never had.
-         */
         this.ends = false;
-        /**
-         * Accessible name for the control that jumps to the first page.
-         */
         this.firstLabel = 'First page';
-        /**
-         * Accessible name for a gap, with `{page}` filled in as where it goes.
-         */
         this.gapLabel = 'Skip to page {page}';
-        /**
-         * Address for a page, with `{page}` standing in for its number.
-         *
-         * Absent renders buttons. Present renders links, which is what a paged result
-         * with its own URL should be: a crawler follows them, a middle click opens
-         * one, and the back button works without the consumer wiring anything.
-         */
         this.href = '';
-        /**
-         * Accessible name for the navigation landmark.
-         */
         this.label = 'Pagination';
-        /**
-         * Accessible name for the control that jumps to the last page.
-         */
         this.lastLabel = 'Last page';
-        /**
-         * Locale for the page numbers. Absent uses the runtime's own.
-         *
-         * The same property the calendar takes, doing the same job one layer down:
-         * the templates make the *words* the consumer's, and this makes the *numbers*
-         * theirs. A page number is a number like any other, so `1234` is `1,234` in
-         * `en-US`, `1.234` in `de-DE` and `١٢٣٤` in `ar-EG`, and a component that
-         * lets a consumer translate "Page {page} of {pages}" and then prints Latin
-         * digits into it has done half the job.
-         *
-         * Not applied to `href`. That one is machine-facing, and `?page=1,234` is a
-         * different address from `?page=1234`.
-         */
         this.locale = '';
-        /**
-         * Accessible name for the control that moves forward.
-         */
         this.nextLabel = 'Next page';
-        /**
-         * Accessible name for one page, with `{page}` and `{pages}` filled in.
-         */
         this.pageLabel = 'Page {page}';
-        /**
-         * How many pages there are in total.
-         *
-         * Clamped to at least one wherever it is read, so a result that has not
-         * loaded yet renders a single page rather than an empty control that then
-         * appears and pushes the layout down.
-         *
-         * Left unset where `total` and `page-size` are both given, since the two of
-         * them already say it. A fallback rather than an override: writing this wins,
-         * so there is never a question of which of two sources is current.
-         */
         this.pages = 0;
-        /**
-         * How many items are on a page.
-         *
-         * Only arithmetic: this does not slice anything, because the component never
-         * sees the items. It is what turns `total` into a page count, and nothing
-         * else.
-         */
         this.pageSize = 0;
-        /**
-         * Accessible name for the control that moves back.
-         */
         this.previousLabel = 'Previous page';
-        /**
-         * How many pages to show either side of the current one.
-         */
         this.siblings = 1;
-        /**
-         * The reading shown in `compact`, with `{page}` and `{pages}` filled in.
-         *
-         * No noun: the landmark this sits in is already named "Pagination", so
-         * "Page 7 of 24" says it twice to a screen reader and takes a third of the
-         * width from a control whose whole reason for existing is that the row is
-         * narrow. The numbers are the reading.
-         */
         this.statusLabel = '{page} of {pages}';
-        /**
-         * How many items there are across every page.
-         *
-         * What `pages` falls back to together with `page-size`. Unset is the common
-         * case, where a consumer knows the page total and not the item total.
-         *
-         * Nothing is rendered from it. `Pagination.Summary` is what reads a total out
-         * to a reader, and takes its own.
-         */
         this.total = 0;
-        /**
-         * What the live region says, and nothing until the page has moved once.
-         *
-         * `pageLabel` rather than a template of its own, so the announcement is the
-         * same sentence the control the reader just pressed already carried, and
-         * there is not a ninth string to translate for the sake of one of them.
-         */
         this.announcement = '';
-        /** The page last announced, so the first render announces nothing. */
         this.announced = undefined;
-        /** The page on show, whoever set it, and `undefined` until somebody has. */
         this.pageState = undefined;
-        /**
-         * The click handler, which is also what stops a link from following itself.
-         *
-         * A refused change has to refuse the navigation with it, or a router that
-         * cancels the event still loses the document underneath it. `preventDefault`
-         * on a button's click does nothing and costs nothing, so this is one handler
-         * for both shapes rather than two that have to stay in step.
-         */
         this.go = (next, event) => {
             if (!this.request(next)) {
                 event.preventDefault();
             }
         };
     }
-    /**
-     * The page on show, one-based.
-     *
-     * An accessor pair, the same shape as the calendar's `month`. Reading gives
-     * the page on show; writing sets it, and `default-page` seeds one the element
-     * keeps until somebody does.
-     *
-     * **Clamped on the way out, because "the page on show" is what it says it
-     * gives.** Returning whatever was written means `default-page="99"` on a
-     * ten-page result renders page 10, marks page 10 with `aria-current`, and
-     * reports 99, so a consumer syncing their query from this reads a page that
-     * does not exist while the control in front of them says otherwise. Not a
-     * far-fetched value: it is a bookmarked link after the result shrank.
-     *
-     * Rounded here too, so `2.7` reads as the 2 it renders.
-     */
     get page() {
         const asked = this.pageState ?? this.defaultPage;
         return Math.min(this.count, Math.max(1, Math.floor(asked) || 1));
@@ -297,19 +49,9 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         this.pageState = next;
         this.requestUpdate('page', previous);
     }
-    /** Held across every component asking for the same locale. */
     get numbers() {
         return formatNumbers(this.locale);
     }
-    /**
-     * How many pages, clamped once, so every reader agrees on it.
-     *
-     * `pages` first, because writing it is the explicit answer. Then `total` over
-     * `pageSize`, which is the same fact stated the other way round and is what a
-     * consumer holding a result set already has. Then one, so a result that has
-     * not loaded renders a single page rather than an empty control that appears
-     * later and pushes the layout down.
-     */
     get count() {
         if (this.pages > 0) {
             return Math.max(1, Math.floor(this.pages));
@@ -319,23 +61,9 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         return 1;
     }
-    /** The page on show, which `page` has already clamped. */
     get current() {
         return this.page;
     }
-    /**
-     * Which pages to show, and where the runs break.
-     *
-     * `most` is the number of slots the control holds at its widest: both
-     * boundaries, the run around the current page, and a gap on each side. Below
-     * that there is nothing to hide, and the whole range is shown.
-     *
-     * Above it, the two gaps are decided independently, and a gap standing over
-     * exactly one page is not drawn: `boundaries + 2` is the first page whose
-     * predecessor is not a boundary, so a run starting there is contiguous with
-     * what precedes it. Where one side has no gap the run on that side extends to
-     * `most` slots, which is what holds the width still.
-     */
     get slots() {
         const total = this.count;
         const current = this.current;
@@ -349,8 +77,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
         }
         const before = current - siblings > boundaries + 2;
         const after = current + siblings < total - boundaries - 1;
-        /* A gap carries the run it stands over rather than being a bare marker,
-           because it is a control now and a control has to say where it goes. */
         const gap = (from, to) => ({ from, to });
         if (!before) {
             const head = most - boundaries - 1;
@@ -372,13 +98,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             ...range(total - boundaries + 1, total),
         ];
     }
-    /**
-     * Asks to move, and reports whether the request stood.
-     *
-     * Announced before it is applied, so `preventDefault()` is a refusal and
-     * nothing moves. A consumer who holds the page refuses it and assigns their
-     * own.
-     */
     request(next) {
         if (next === this.current || next < 1 || next > this.count) {
             return false;
@@ -396,28 +115,12 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        /* On the host through internals, so the landmark is the element itself. A
-           page may hold more than one navigation and landmarks are how a
-           screen-reader user chooses between them, which is why this carries a
-           default name at all: an author's own `aria-label` is an attribute and
-           beats internals, so naming it here costs them nothing. */
         hostAria(this.internals, { label: this.label, role: 'navigation' });
-        /* Through `toggleState`, which carries the feature test: an engine without
-           `CustomStateSet` gets a control that renders its one page instead of
-           disappearing, which is degraded rather than broken. */
         this.toggleState('empty', this.count <= 1);
     }
-    /**
-     * Says where the reader now is, once they have moved.
-     *
-     * In `updated` rather than in `request`, so it covers both modes: a controlled
-     * consumer assigns `page` and never goes through the request path at all, and
-     * a reader who got there that way deserves the same sentence.
-     */
     updated(changed) {
         super.updated(changed);
         if (this.announced === undefined) {
-            // The first render establishes where we started. Arriving is not moving.
             this.announced = this.page;
             return;
         }
@@ -426,13 +129,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             this.announcement = fill(this.pageLabel, this.page, this.count, this.numbers);
         }
     }
-    /**
-     * One page, as a link or a button.
-     *
-     * `aria-current="page"` is what says which one you are on, and it stays a
-     * control rather than becoming text: a reader who tabs into the run and finds
-     * the current page missing from it has lost the only landmark in the row.
-     */
     renderPage(page) {
         const current = page === this.current;
         const shown = this.numbers(page);
@@ -458,27 +154,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             </button>`}
     </li>`;
     }
-    /**
-     * A gap, which is a control and not a mark.
-     *
-     * **It goes to the middle of what it hides**, and the label says so. That is
-     * the binary-search step, so an arbitrary page in a set of any size is a
-     * handful of presses: 128 pages is `1 … 96 97 98 … 128`, and the leading gap
-     * lands on 48, whose gaps land on 24 and 88, and so on. A jump of a fixed size
-     * would need forty presses on that set.
-     *
-     * **A menu over these pages was the other idea and it does not survive the
-     * arithmetic.** The run a gap covers is unbounded by construction: two pages
-     * on a twelve-page set, ninety-four on a hundred-and-twenty-eight-page one. A
-     * menu is pleasant at the first and is a scroll of ninety-four items at the
-     * second, which is worse than the ellipsis it replaced, and there is no total
-     * at which it stops being possible. It would also make `Pagination` depend on
-     * `Menu` and `Popover` for a case a button already covers.
-     *
-     * So it is announced rather than hidden: a control a reader can reach has to
-     * be in the tree, and the label naming its destination is the whole
-     * affordance.
-     */
     renderGap(hidden) {
         const to = Math.round((hidden.from + hidden.to) / 2);
         const name = fill(this.gapLabel, to, this.count, this.numbers);
@@ -501,15 +176,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             </button>`}
     </li>`;
     }
-    /**
-     * Everything a step needs, computed once, so the markup below is only markup.
-     *
-     * Split out because the part name has to be a literal. A part name is read
-     * from the source, so a computed one is a part nothing can see: nothing pairs it with its `@csspart` and a later rename takes
-     * the promise silently. With four controls and two shapes each that is eight
-     * literals, and eight copies of the arithmetic behind them would be the
-     * actual duplication. This is the arithmetic, written once.
-     */
     step(to, spent, icon, name) {
         return {
             address: spent ? nothing : fill(this.href, to, this.count),
@@ -522,26 +188,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
             spent,
         };
     }
-    /**
-     * The four controls, inert at the end each points at.
-     *
-     * Inert rather than absent: a control that disappears at the first page takes
-     * the row's width with it and moves everything else under the pointer. In
-     * link mode the inert one is an `<a>` with no `href`, which is not a link and
-     * is not focusable, and is the platform's own way of saying there is nowhere
-     * to go.
-     *
-     * **Each glyph is a slot fallback, and each method is a seam**, which answer
-     * two different people: the slot is how a page swaps a caret for its own icon
-     * set, and `protected` is how the tier above swaps all four without
-     * reimplementing a template that renders eight controls across two shapes.
-     * `Select` and `Listbox` carry the same pairing on one mark each.
-     *
-     * **Four slot names rather than one**, even though the four controls draw
-     * from the same shared `mark` part. A single `<slot name="icon">` is assigned
-     * once and the other three occurrences of it get nothing, so a consumer
-     * replacing the caret would silently lose three of their four marks.
-     */
     renderFirst() {
         const { address, click, glyph, name, off, spent } = this.step(1, this.current <= 1, caretDoubleLeft, this.firstLabel);
         const mark = html `<slot name="first-icon">${glyph}</slot>`;
@@ -611,13 +257,6 @@ let HelixHeadlessPagination = class HelixHeadlessPagination extends HelixElement
       </ol>
       ${this.renderNext()}${this.ends ? this.renderLast() : nothing}${this.renderLive()}`;
     }
-    /**
-     * The region that says the page moved.
-     *
-     * Always rendered and empty until it has something to say. A live region
-     * populated at the moment it enters the document announces itself on arrival,
-     * which for a component that upgrades on load is every page load.
-     */
     renderLive() {
         return html `<span part="live" role="status" aria-live="polite">${this.announcement}</span>`;
     }

package/dist/pagination/size/pagination-size.js

@@ -8,87 +8,17 @@ import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixElement, req
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
-/* Side-effect imports, because this renders a select and an option in its own
-   shadow root and a custom element registers on import. The paths are relative,
-   so this registers the base pair and the styled file's identical imports
-   register the styled pair; `tier` picks which names the template asks for. */
 import '../../option/index.js';
 import '../../select/index.js';
-/**
- * @summary Chooses how many items a page holds.
- *
- * @description
- * Its own element beside `Pagination` rather than a slot inside it, for the
- * reason `Pagination.Summary` is: a footer's direction and order are the
- * consumer's, and a control that can only sit at one end of one row has taken
- * that decision for them.
- *
- * **`Select`, not a native `<select>`.** Two dropdowns identical closed and
- * different open meet each other in the same footer as a table's filters. The
- * caret is `Select`'s rather than a color literal baked into a data URI,
- * because a background image cannot read `currentColor`, and the label is a
- * real `<label for>` against the trigger's own id.
- *
- * **The label sits on the row, not above it.** `Select`'s host is a column, and
- * an outer-tree rule beats a `:host` rule, so turning it into a row needs no
- * property on `Select` and nothing written into the consumer's markup.
- *
- * **An empty `sizes` renders nothing**, rather than falling back to the
- * built-in list, which would be a component overruling a consumer who said
- * "none". Same rule as `Pagination` over a single page, and reported the same
- * way, through `ElementInternals.states` rather than an attribute the server
- * never wrote.
- *
- * `value` is the controlled property and `default-value` seeds one this owns.
- * Changing it announces `helix-before-change`; re-querying and moving back to
- * page one is the consumer's, because only they know whether the reader's
- * position should survive it.
- *
- * @since 0.1.0
- * @status experimental
- * @aliases Page size, Rows per page
- * @documentation https://helix.fusion.dev/components/pagination
- *
- * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. The only way to refuse one.
- *
- * @csspart control - The select.
- * @csspart label - The words beside the number, forwarded from the select.
- * @csspart trigger - The closed control, forwarded from the select.
- * @csspart value - The chosen size inside the trigger, forwarded from the select.
- */
 let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Size to start on, where nothing declared one.
-         */
         this.defaultValue = 0;
-        /**
-         * The words beside the control.
-         */
         this.label = 'Per page';
-        /**
-         * Locale for the numbers.
-         *
-         * Absent uses the runtime's own.
-         */
         this.locale = '';
-        /**
-         * The sizes offered, comma separated.
-         *
-         * A string rather than an array, so the whole control is expressible in
-         * markup and survives a server render. Anything that is not a positive number
-         * is dropped rather than rendered as an option that cannot mean anything.
-         */
         this.sizes = '10,25,50,100';
-        /** The size, whoever set it, and `undefined` until somebody has. */
         this.valueState = undefined;
         this.handleChange = (event) => {
-            /* Stopped, then re-announced under this element's own name. `Select`'s
-               `helix-before-change` bubbles and is composed, so left alone it would cross this
-               shadow boundary and be retargeted to look like this element's: a consumer
-               would get two events per change, one of them carrying `Select`'s idea of
-               what a name and a value are. */
             event.stopPropagation();
             const next = Number.parseInt(event.detail?.value ?? '', 10);
             if (!Number.isFinite(next) || next === this.current) {
@@ -104,13 +34,6 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
                 host: this,
                 next,
             });
-            /* Put back where the consumer refused it or owns it, because the control has
-               already moved: a select changes itself and then tells you, which is the
-               one case `requestChange` cannot announce ahead of. Lit skips a
-               property binding whose value has not changed, so a refusal leaves the
-               select holding the reader's choice and nothing else would put it back.
-               Deferred, so the read happens after the render a successful change asked
-               for rather than racing it. */
             this.updateComplete.then(() => {
                 const control = this.renderRoot?.querySelector('[part="control"]');
                 if (control && control.value !== String(this.current)) {
@@ -119,13 +42,6 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
             });
         };
     }
-    /**
-     * The size in force.
-     *
-     * Reading gives the real one; writing declares it the consumer's, and
-     * `default-value` seeds one this element owns. Same accessor pair as
-     * `Pagination.page` and the calendar's `month`.
-     */
     get value() {
         return this.valueState ?? this.defaultValue;
     }
@@ -134,40 +50,23 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         this.valueState = next;
         this.requestUpdate('value', previous);
     }
-    /** Held across every component asking for the same locale. */
     get numbers() {
         return formatNumbers(this.locale);
     }
-    /** The sizes, parsed once, with anything that is not a size dropped. */
     get options() {
         return this.sizes
             .split(',')
             .map((one) => Number.parseInt(one.trim(), 10))
             .filter((one) => Number.isFinite(one) && one > 0);
     }
-    /** The one in force, which is the first offered where nothing named one. */
     get current() {
         const options = this.options;
         return options.includes(this.value) ? this.value : (options[0] ?? 0);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        /* Through `toggleState`, like `Pagination`'s: an engine without
-           `CustomStateSet` gets an empty select rather than no element. */
         this.toggleState('empty', this.options.length === 0);
     }
-    /**
-     * The control itself, which is the whole of this part, 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 tags are interpolated, so each tier renders its own.** Writing
-     * `<helix-select>` out would make this tier compose an element it does not
-     * ship and cannot test against, there being no `helix-select` here. `tier`
-     * resolves the name instead, and the styled subclass changes it in one line.
-     */
     renderSelect() {
         const select = this.tag('select');
         const option = this.tag('option');
@@ -185,9 +84,6 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
         if (this.options.length === 0) {
             return nothing;
         }
-        /* `Select` renders the label and gives the trigger the id it points at, so
-           the association is the platform's and is already covered by that
-           component's own specs. Nothing here reconstructs it. */
         return html `${this.renderSelect()}`;
     }
 };