@limetech/lime-elements 40.2.5 → 40.3.0

package/dist/esm/limel-pagination.entry.js

@@ -0,0 +1,617 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bnc9lzk2.js';
+import { t as translate } from './translations-Bwm2y2E4.js';
+import { c as createRandomString } from './random-string-JbKhhoXs.js';
+import { g as getPrimarySubtag } from './language-C3hECvXE.js';
+
+/**
+ * How many positions are rendered at once, counting both page numbers and gap
+ * markers. Constant, so the control keeps its width as the user pages through
+ * a set — a gap and a page number take up the same room, so what matters is
+ * how many positions there are, not how many of them are numbers.
+ */
+const VISIBLE_SLOTS = 7;
+/** How many pages to keep either side of the current one. */
+const SIBLINGS = 1;
+const FIRST_PAGE$1 = 1;
+/**
+ * Build the list of positions to render for a given page count.
+ *
+ * The first and the last page are always included, so both ends of the set are
+ * always one click away. The rest of the room goes to the pages around the
+ * current one, and whatever is skipped becomes a gap.
+ *
+ * `Number.isSafeInteger` rather than `Number.isInteger`: past 2^53 arithmetic
+ * on page numbers stops being exact. The component validates these too; this
+ * guards them again because the cost of being wrong here is a wrong window
+ * during render.
+ *
+ * @param currentPage - the page the user is on, 1-based
+ * @param totalPages - how many pages there are in total
+ * @returns the positions to render, in order
+ */
+function getPageSlots(currentPage, totalPages) {
+    if (!Number.isSafeInteger(totalPages) || totalPages < FIRST_PAGE$1) {
+        return [];
+    }
+    const pages = collectVisiblePages(clampToSet(currentPage, totalPages), totalPages);
+    return withGaps(pages);
+}
+/**
+ * @param page - the page to pull into the set
+ * @param totalPages - how many pages there are in total
+ * @returns a whole page number within `1..totalPages`
+ */
+function clampToSet(page, totalPages) {
+    if (!Number.isSafeInteger(Math.floor(page))) {
+        return FIRST_PAGE$1;
+    }
+    return Math.min(Math.max(FIRST_PAGE$1, Math.floor(page)), totalPages);
+}
+/**
+ * Pick which page numbers to render, so that `withGaps` turns them into
+ * exactly `VISIBLE_SLOTS` positions.
+ *
+ * Which of the three shapes applies depends only on whether there is anything
+ * to skip on each side. With one gap there is room for six numbers, with two
+ * there is room for five, and the gaps make up the difference.
+ *
+ * @param currentPage - the page the user is on, 1-based
+ * @param totalPages - how many pages there are in total
+ * @returns the page numbers to render, ascending
+ */
+function collectVisiblePages(currentPage, totalPages) {
+    if (totalPages <= VISIBLE_SLOTS) {
+        return range(FIRST_PAGE$1, totalPages);
+    }
+    const firstSibling = Math.max(currentPage - SIBLINGS, FIRST_PAGE$1);
+    const lastSibling = Math.min(currentPage + SIBLINGS, totalPages);
+    if (firstSibling <= FIRST_PAGE$1 + 1) {
+        return [...range(FIRST_PAGE$1, VISIBLE_SLOTS - 2), totalPages];
+    }
+    if (lastSibling >= totalPages - 1) {
+        return [
+            FIRST_PAGE$1,
+            ...range(totalPages - (VISIBLE_SLOTS - 3), totalPages),
+        ];
+    }
+    return [FIRST_PAGE$1, ...range(firstSibling, lastSibling), totalPages];
+}
+/**
+ * @param from - the first number, inclusive
+ * @param to - the last number, inclusive
+ * @returns every whole number between the two
+ */
+function range(from, to) {
+    return Array.from({ length: to - from + 1 }, (_, step) => from + step);
+}
+/**
+ * Insert a gap wherever the rendered page numbers are not consecutive.
+ *
+ * A gap that would hide a single page is rendered as that page instead: the
+ * marker is as wide as a page number, so it would save no room.
+ *
+ * @param pages - the page numbers to render, ascending
+ * @returns the positions to render, in order
+ */
+function withGaps(pages) {
+    return pages.flatMap((page, index) => {
+        const slot = { kind: 'page', page: page };
+        if (index === 0) {
+            return [slot];
+        }
+        const skipped = page - pages[index - 1] - 1;
+        if (skipped === 0) {
+            return [slot];
+        }
+        if (skipped === 1) {
+            return [{ kind: 'page', page: page - 1 }, slot];
+        }
+        return [
+            {
+                kind: 'gap',
+                from: pages[index - 1] + 1,
+                to: page - 1,
+            },
+            slot,
+        ];
+    });
+}
+
+const paginationCss = () => `@charset "UTF-8";:host(limel-pagination){display:block;box-sizing:border-box}*{box-sizing:border-box}nav{display:flex;align-items:center}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:focus{outline:none}button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:1.75rem;min-width:1.75rem;border-radius:1.75rem;padding:0 0.5rem;font-variant-numeric:tabular-nums}button:not([aria-disabled=true]):not([aria-current=page]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:rgb(var(--contrast-1100));background-color:transparent}button:not([aria-disabled=true]):not([aria-current=page]):hover,button:not([aria-disabled=true]):not([aria-current=page]):focus,button:not([aria-disabled=true]):not([aria-current=page]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([aria-disabled=true]):not([aria-current=page]):hover,button:not([aria-disabled=true]):not([aria-current=page]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not([aria-disabled=true]):not([aria-current=page]):hover{box-shadow:var(--button-shadow-hovered)}button:not([aria-disabled=true]):not([aria-current=page]):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not([aria-disabled=true]):not([aria-current=page]):hover,button:not([aria-disabled=true]):not([aria-current=page]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[aria-disabled=true]:not([aria-current=page]){opacity:0.4}button[aria-disabled=true]{cursor:default}button[aria-current=page]{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset)}button limel-spinner{position:absolute;pointer-events:none}.gap{display:inline-flex;align-items:center;justify-content:center;height:1.75rem;width:1.75rem;color:rgb(var(--contrast-1100))}.arrow span{display:block;border-style:solid;border-color:transparent;border-width:0.25rem 0 0.25rem 0.375rem;border-left-color:currentColor;transition:transform 0.2s ease}.arrow.previous span{transform:rotateZ(180deg)}.arrow:not([aria-disabled=true]):hover.next span{transform:translate3d(0.1rem, 0, 0)}.arrow:not([aria-disabled=true]):hover.previous span{transform:translate3d(-0.1rem, 0, 0) rotateZ(180deg)}.live-region{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}`;
+
+const FIRST_PAGE = 1;
+const DEFAULT_PAGE_SIZE = 100;
+/** Where `global/translations` lands when it cannot use a language. */
+const FALLBACK_LANGUAGE = 'en';
+const Pagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.goToPage = createEvent(this, "goToPage", 6);
+        /**
+         * Which page to show. The first page is `1`, not `0`.
+         * Set it to the page from `goToPage` to move the control.
+         */
+        this.page = FIRST_PAGE;
+        /**
+         * Number of items that fit on one page.
+         * Together with `totalItems`, used by the component to calculate the total number of pages.
+         */
+        this.pageSize = DEFAULT_PAGE_SIZE;
+        /**
+         * How many items there are in total, across every page.
+         * `null` means the count has not arrived yet.
+         * Together with `pageSize`, used by the component to calculate the total number of pages.
+         */
+        this.totalItems = null;
+        /**
+         * Set this to `true` while you are fetching a page.
+         */
+        this.loading = false;
+        /**
+         * The language used for the labels and the tooltips, and for the way
+         * numbers are written.
+         */
+        this.language = 'en';
+        /**
+         * The count from the last time we had one, so the control can hold its
+         * shape while a new one is on its way. The count rather than the page count
+         * it implies, because `pageSize` may change while we are waiting.
+         */
+        this.lastKnownTotalItems = null;
+        this.liveMessage = '';
+        /** Ids are per slot, not per page: a page moves between slots, a slot does not. */
+        this.idPrefix = createRandomString();
+        /** The value each prop was last complained about with. */
+        this.warnedAbout = new Map();
+        /** Settled once per render, and the only thing `render` reads. */
+        this.view = {
+            page: FIRST_PAGE,
+            pageCount: null,
+            pageSize: DEFAULT_PAGE_SIZE,
+            totalItems: null,
+        };
+        /**
+         * A gap marker, or a page button.
+         *
+         * @param slot - the position to render
+         * @param index - where the position sits in the window
+         * @returns the rendered slot
+         */
+        this.renderSlot = (slot, index) => {
+            if (slot.kind === 'gap') {
+                return (h("span", { key: `gap-${index}`, class: "gap", "aria-hidden": "true" }, "\u00B7\u00B7\u00B7"));
+            }
+            const isCurrent = slot.page === this.currentPage;
+            return (h("button", { key: `page-${index}`, id: this.slotId(index), class: "page", "aria-current": isCurrent ? 'page' : null, "aria-disabled": this.loading ? 'true' : null, "aria-label": this.pageLabel(slot.page, isCurrent), "data-page": slot.page, onClick: this.selectPage }, this.formatNumber(slot.page), this.renderSpinner(isCurrent), this.renderTooltip(slot.page, index)));
+        };
+        // Bound once: a handler built per render is a new identity each time, so
+        // every button would have its listener swapped on every page change.
+        this.step = (event) => {
+            const direction = event.currentTarget.dataset
+                .direction;
+            if (this.isArrowDisabled(direction)) {
+                return;
+            }
+            this.goTo(this.currentPage + (direction === 'next' ? 1 : -1));
+        };
+        this.selectPage = (event) => {
+            if (this.loading) {
+                return;
+            }
+            const { page } = event.currentTarget.dataset;
+            this.goTo(Number(page));
+        };
+        this.translate = (key, params) => {
+            return translate.get(key, this.language, params);
+        };
+    }
+    /**
+     * Settling here rather than in a `@Watch` keeps the result the same
+     * however the consumer assigns the props. A watcher runs the moment one
+     * property is set, so `totalItems` and `page` assigned in the same tick
+     * would settle twice, the first time against a page count about to change.
+     */
+    componentWillRender() {
+        // The only place the three validators run. Everything after this reads
+        // the answers rather than asking again.
+        const totalItems = this.knownTotalItems;
+        const pageSize = this.usablePageSize;
+        const usable = this.wholePage(this.page);
+        if (totalItems !== null) {
+            this.lastKnownTotalItems = totalItems;
+        }
+        const pageCount = this.countPages(totalItems !== null && totalItems !== void 0 ? totalItems : this.lastKnownTotalItems, pageSize);
+        const page = this.capToLastPage(usable, pageCount);
+        this.view = {
+            page: page,
+            pageCount: pageCount,
+            pageSize: pageSize,
+            totalItems: totalItems,
+        };
+        this.readOut(page);
+        this.reconcile(page, usable);
+        this.shownPage = page;
+    }
+    /**
+     * @param total - the count to divide, or `null` if none is known
+     * @param pageSize - how many items fit on one page
+     * @returns how many pages that makes, or `null` when nothing is known
+     */
+    countPages(total, pageSize) {
+        if (total === null) {
+            return null;
+        }
+        return Math.max(FIRST_PAGE, Math.ceil(total / pageSize));
+    }
+    componentDidRender() {
+        const page = this.pendingCorrection;
+        if (page === undefined) {
+            return;
+        }
+        this.pendingCorrection = undefined;
+        this.emitGoToPage(page, 'clamped');
+    }
+    /**
+     * Read out the page whenever what it holds changes — not only when its
+     * number does. A page size that doubles leaves the user on page 3 of a
+     * different set, and someone who cannot see the screen is owed that.
+     *
+     * Compared as numbers rather than as the sentence they make. The same
+     * items in another language, or a count going away while the next one
+     * loads, both rewrite the sentence without anything having moved.
+     *
+     * @param page - the page about to be rendered
+     */
+    readOut(page) {
+        const range = this.rangeIdentity(page);
+        const previous = this.lastRange;
+        this.lastRange = range;
+        if (this.shownPage === undefined) {
+            return;
+        }
+        const hasMoved = page !== this.shownPage;
+        const holdsSomethingElse = range !== null && previous !== null && range !== previous;
+        if (hasMoved || holdsSomethingElse) {
+            this.liveMessage =
+                this.rangeLabel(page) || this.pageLabel(page, true);
+        }
+    }
+    /**
+     * The items themselves, not the numbers that imply them: a total that
+     * ticks from 248 to 249 leaves every page but the last one holding exactly
+     * what it held.
+     *
+     * @param page - the page about to be rendered
+     * @returns which items the page holds, or `null` while that is unknown
+     */
+    rangeIdentity(page) {
+        const items = this.itemsOn(page);
+        return items === null ? null : `${items.from}:${items.to}`;
+    }
+    /**
+     * @param page - the page to measure, 1-based
+     * @returns how many items come before it
+     */
+    offsetOf(page) {
+        return (page - FIRST_PAGE) * this.view.pageSize;
+    }
+    /**
+     * The one place that works out which items a page holds. The last page is
+     * usually short, so the upper bound is capped at what exists.
+     *
+     * @param page - the page to measure, 1-based
+     * @returns the first and last item on it, or `null` with no count
+     */
+    itemsOn(page) {
+        const { totalItems, pageSize } = this.view;
+        if (totalItems === null) {
+            return null;
+        }
+        const from = this.offsetOf(page) + 1;
+        return { from: from, to: Math.min(from + pageSize - 1, totalItems) };
+    }
+    /**
+     * Tell the consumer when we are not showing what they asked for.
+     *
+     * A page we had to *correct* is always news: the value was unusable
+     * whatever the count says. A page we had to *clamp* is only news when we
+     * have a count of our own to justify it — while one is in flight we hold
+     * the shape we last knew, and a shape is not evidence that the consumer's
+     * page is wrong. Asserting it against a stale count destroys a page that
+     * was about to turn out valid, and nothing later can undo that.
+     *
+     * @param page - the page about to be rendered
+     * @param usable - the page they asked for, once validated
+     */
+    reconcile(page, usable) {
+        const asked = this.page;
+        const isCorrected = !Object.is(usable, asked);
+        const isClamped = page !== usable;
+        const shouldTell = isCorrected || (isClamped && this.view.totalItems !== null);
+        // Forget only when we are genuinely showing what was asked for. Going
+        // quiet because we cannot vouch for a bound is not the same thing: a
+        // clamp we already reported would be reported again the moment the
+        // count came back.
+        if (!isCorrected && !isClamped) {
+            this.reportedAsk = undefined;
+        }
+        if (!shouldTell) {
+            return;
+        }
+        // Said once per page-and-ask. `Object.is`, so a `NaN` page counts as
+        // reported rather than being re-sent on every render for the life of
+        // the component.
+        if (page === this.shownPage && Object.is(asked, this.reportedAsk)) {
+            return;
+        }
+        this.reportedAsk = asked;
+        this.pendingCorrection = page;
+    }
+    handleLanguageChange() {
+        this.numberFormat = undefined;
+    }
+    render() {
+        const { page, pageCount } = this.view;
+        const slots = this.slotsFor(page, pageCount);
+        return (h(Host, { key: '40d6123ac887f519fc31690fce7fcb46e73f2199' }, h("nav", { key: '183d264e761d168c74b8e2bfa8d04f3ee391c937', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'e59f62c2644a9a4a513ab3a3455854084434aabc', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+    }
+    /**
+     * Without a count we know where the user is but not how far the set goes,
+     * so we show that one page rather than nothing. A strip of arrows with no
+     * number on it says less than it looks like it does.
+     *
+     * @param page - the page being shown
+     * @param pageCount - how many pages there are, or `null` if not yet known
+     * @returns the positions to render
+     */
+    slotsFor(page, pageCount) {
+        if (pageCount === null) {
+            return [{ kind: 'page', page: page }];
+        }
+        return getPageSlots(page, pageCount);
+    }
+    /**
+     * A spinner around the page the user is heading for, while it loads.
+     *
+     * @param isCurrent - whether this is the page being loaded
+     * @returns the rendered spinner
+     */
+    renderSpinner(isCurrent) {
+        if (!isCurrent || !this.loading) {
+            return;
+        }
+        return h("limel-spinner", null);
+    }
+    /**
+     * Names the page a button leads to, and what that page holds.
+     *
+     * Nested inside the button so the two are created and torn down as one:
+     * `limel-tooltip` resolves its owner element once and never looks again.
+     *
+     * @param page - the page the tooltip describes
+     * @param index - where the page sits in the window
+     * @returns the rendered tooltip
+     */
+    renderTooltip(page, index) {
+        return (h("limel-tooltip", { elementId: this.slotId(index), label: this.translate('pagination.page', {
+                page: this.formatNumber(page),
+            }), helperLabel: this.rangeLabel(page) }));
+    }
+    /**
+     * @param direction - which arrow to render
+     * @returns the rendered arrow
+     */
+    renderArrow(direction) {
+        const isDisabled = this.isArrowDisabled(direction);
+        return (h("button", { id: this.arrowId(direction), class: `arrow ${direction}`, "aria-label": this.translate(`pagination.${direction}-page`), "aria-disabled": isDisabled ? 'true' : null, "data-direction": direction, onClick: this.step }, h("span", { "aria-hidden": "true" }), this.renderArrowTooltip(direction)));
+    }
+    /**
+     * Says what the arrow does, which its glyph only implies, and where it
+     * lands. At either end of the set there is nowhere to land.
+     *
+     * @param direction - which arrow to describe
+     * @returns the rendered tooltip
+     */
+    renderArrowTooltip(direction) {
+        if (this.isArrowDisabled(direction)) {
+            return;
+        }
+        const target = direction === 'next' ? this.currentPage + 1 : this.currentPage - 1;
+        return (h("limel-tooltip", { elementId: this.arrowId(direction), label: this.translate(`pagination.go-to-${direction}-page`), helperLabel: this.translate('pagination.page', {
+                page: this.formatNumber(target),
+            }) }));
+    }
+    isArrowDisabled(direction) {
+        if (this.loading) {
+            return true;
+        }
+        const { page, pageCount } = this.view;
+        if (direction === 'previous') {
+            return page <= FIRST_PAGE;
+        }
+        return pageCount === null || page >= pageCount;
+    }
+    /**
+     * @param page - the page to ask for, 1-based
+     */
+    goTo(page) {
+        if (page === this.currentPage) {
+            return;
+        }
+        this.emitGoToPage(page, 'user');
+    }
+    /** The page on screen: the one asked for, within the range that exists. */
+    get currentPage() {
+        return this.view.page;
+    }
+    emitGoToPage(page, reason) {
+        this.goToPage.emit({
+            page: page,
+            reason: reason,
+            pageSize: this.view.pageSize,
+            offset: this.offsetOf(page),
+        });
+    }
+    /**
+     * `totalItems` when it is a count we can do arithmetic with, and `null`
+     * — "not known yet" — when it is not. A `NaN` count would make the page
+     * count `NaN`, which no comparison catches.
+     */
+    get knownTotalItems() {
+        const { totalItems } = this;
+        if (totalItems === null || totalItems === undefined) {
+            return null;
+        }
+        if (Number.isSafeInteger(totalItems) && totalItems >= 0) {
+            this.warnedAbout.delete('totalItems');
+            return totalItems;
+        }
+        this.warnOnce('totalItems', totalItems, () => `\`totalItems\` must be a whole number of at least 0, or null, but was ${totalItems}. Ignoring it and keeping the last count it had.`);
+        return null;
+    }
+    /** `pageSize`, or the default when we were given something unusable. */
+    get usablePageSize() {
+        return this.countable('pageSize', this.pageSize, FIRST_PAGE, DEFAULT_PAGE_SIZE);
+    }
+    /**
+     * A page number we can count with, whatever the consumer supplied.
+     *
+     * @param page - the value the consumer gave
+     * @returns a whole number of at least 1
+     */
+    wholePage(page) {
+        return this.countable('page', page, FIRST_PAGE, FIRST_PAGE);
+    }
+    /**
+     * A prop as a whole number we can safely count with, or the fallback.
+     *
+     * `Number.isSafeInteger` rather than `Number.isFinite`: past 2^53 a page
+     * number cannot be incremented, and arithmetic on it stops being exact.
+     *
+     * @param prop - the prop being read, for the message
+     * @param value - what the consumer gave
+     * @param least - the smallest value that makes sense
+     * @param fallback - what to use when the value does not
+     * @returns a whole number of at least `least`
+     */
+    countable(prop, value, least, fallback) {
+        if (Number.isSafeInteger(value) && value >= least) {
+            this.warnedAbout.delete(prop);
+            return value;
+        }
+        this.warnOnce(prop, value, () => `\`${prop}\` must be a whole number of at least ${least}, but was ${value}. Using ${fallback}.`);
+        return fallback;
+    }
+    /**
+     * Caps only the top; callers have already raised the page to at least one.
+     *
+     * @param page - the page to cap
+     * @param pageCount
+     * @returns the page, or the last one if it is beyond the end
+     */
+    capToLastPage(page, pageCount) {
+        return pageCount === null ? page : Math.min(page, pageCount);
+    }
+    /**
+     * Keyed on the prop and the value, so repeated renders stay quiet while a
+     * new fault still gets said — including the same fault returning after the
+     * prop has been usable in between. The message is built only when it is
+     * going to be read: these run several times per render.
+     *
+     * @param prop - the prop being complained about
+     * @param value - what it held
+     * @param message - what is wrong and what was done instead
+     */
+    warnOnce(prop, value, message) {
+        if (this.warnedAbout.has(prop) &&
+            Object.is(this.warnedAbout.get(prop), value)) {
+            return;
+        }
+        this.warnedAbout.set(prop, value);
+        console.warn(`limel-pagination: ${message()}`);
+    }
+    pageLabel(page, isCurrent) {
+        const key = isCurrent
+            ? 'pagination.current-page'
+            : 'pagination.go-to-page';
+        return this.translate(key, { page: this.formatNumber(page) });
+    }
+    /**
+     * `21–40 of 248` for a given page. The last page is usually short, so the
+     * upper bound is capped at the number of items that actually exist.
+     *
+     * @param page - the page to describe, 1-based
+     * @returns the translated range
+     */
+    rangeLabel(page) {
+        const { totalItems: total, pageSize } = this.view;
+        if (total === null) {
+            return '';
+        }
+        const from = (page - FIRST_PAGE) * pageSize + 1;
+        const to = page * pageSize;
+        return this.translate('pagination.items-range', {
+            from: this.formatNumber(from),
+            to: this.formatNumber(Math.min(to, total)),
+            total: this.formatNumber(total),
+        });
+    }
+    slotId(index) {
+        return `${this.idPrefix}-slot-${index}`;
+    }
+    arrowId(direction) {
+        return `${this.idPrefix}-${direction}`;
+    }
+    /**
+     * The formatter is built once and kept until `language` changes: a page and
+     * its tooltip need six formatted numbers between them.
+     *
+     * @param value - the number to write out
+     * @returns the number in the current language
+     */
+    formatNumber(value) {
+        var _a;
+        (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
+        return this.numberFormat.format(value);
+    }
+    /**
+     * `Intl.NumberFormat` throws on a language it cannot parse, and this is
+     * called from `render`, so an unusable one would leave the control drawing
+     * nothing at all — the single state a user cannot click their way out of.
+     * `src/util/language.ts` states the rule this keeps.
+     *
+     * A tag it cannot parse throws; a well-formed tag it does not support, like
+     * `zz`, does not — it quietly resolves to whatever locale the machine runs
+     * in. Both end up formatting numbers in something other than what was
+     * asked for, so both are worth saying out loud.
+     *
+     * @returns a formatter, in the given language where that is possible
+     */
+    createNumberFormat() {
+        const { language } = this;
+        try {
+            const format = new Intl.NumberFormat(language);
+            const resolved = format.resolvedOptions().locale;
+            if (getPrimarySubtag(resolved) === getPrimarySubtag(language)) {
+                this.warnedAbout.delete('language');
+                return format;
+            }
+        }
+        catch (_a) {
+            // Fall through to the warning below.
+        }
+        this.warnOnce('language', language, () => `\`language\` must be one this browser can write numbers in, but was ${JSON.stringify(language)}. Using ${FALLBACK_LANGUAGE}.`);
+        // Where the translations land for the same unusable value, rather than
+        // the viewer's own locale — English labels beside system digit
+        // grouping would read differently on every machine.
+        return new Intl.NumberFormat(FALLBACK_LANGUAGE);
+    }
+    static get watchers() { return {
+        "language": [{
+                "handleLanguageChange": 0
+            }]
+    }; }
+};
+Pagination.style = paginationCss();
+
+export { Pagination as limel_pagination };

package/dist/esm/limel-picker.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BGxJfR2f.js';
-import { t as translate } from './translations-CPFNSfWw.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bnc9lzk2.js';
+import { t as translate } from './translations-Bwm2y2E4.js';
 import { i as isDescendant } from './dom-B9Ofc5RB.js';
 import { E as ESCAPE, T as TAB, a as ENTER, A as ARROW_UP, b as ARROW_DOWN } from './keycodes-C4_9qUMP.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
@@ -19,9 +19,9 @@ const DEFAULT_SEARCHER_MAX_RESULTS = 20;
 const Picker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.change = createEvent(this, "change");
-        this.interact = createEvent(this, "interact");
-        this.action = createEvent(this, "action");
+        this.change = createEvent(this, "change", 7);
+        this.interact = createEvent(this, "interact", 7);
+        this.action = createEvent(this, "action", 7);
         /**
          * True if the picker should be disabled
          */
@@ -195,7 +195,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '281a5f2451505c012b72c04610d897cf22717420', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '3596e789685aa295baf079c38f4cc4cab0fa3317', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

package/dist/esm/limel-popover_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BGxJfR2f.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bnc9lzk2.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { E as ESCAPE } from './keycodes-C4_9qUMP.js';
 import { f as focusTriggerElement, z as zipObject } from './focus-trigger-element-BOFcjLq3.js';
@@ -45,7 +45,7 @@ const popoverCss = () => `.trigger-anchor{display:inline-block;position:relative
 const Popover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.close = createEvent(this, "close");
+        this.close = createEvent(this, "close", 7);
         /**
          * True if the content within the popover should be visible
          */
@@ -122,7 +122,7 @@ const Popover = class {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'bdb63d668ef7856ae53484f7a02641fc225e69ab', class: "trigger-anchor" }, h("slot", { key: '6b200f4bf9f5f975db877147d4901ba5855464e6', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '6a5ceafebe0ea7646d8ad399c1f53b8260a506a0', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '9bbc131fc2c8e104f9911a19667fad6c187c4872', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: '096e54a6fdc88f6571884bf0a642c67f144d3bbf', class: "trigger-anchor" }, h("slot", { key: 'ddc46b8755f6463dc2320198aefc50ef759f9de4', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '89cce45b2218a2a5087f30f4d524d2c1b2041de2', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'a1d1edfb24fdbef9109adef03f8d77e6cced87c7', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -165,7 +165,7 @@ const PopoverSurface = class {
         this.appendElement();
     }
     render() {
-        return h("div", { key: 'fe1d368dcbeefe4672a0b74fea9277988e3dbd0a', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: 'c3f7cda21c76bdd39eba1e8e4e28503561d28a7e', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');