@limetech/lime-elements 40.4.1 → 40.5.0

package/dist/cjs/limel-pagination-jump.cjs.entry.js

@@ -0,0 +1,182 @@
+'use strict';
+
+var index = require('./index--B6-r0uo.js');
+var translations = require('./translations-DFFpR6AZ.js');
+var keycodes = require('./keycodes-k-EdzcMX.js');
+var pagination_util = require('./pagination.util-B5zzH8vg.js');
+require('./language-CaqPKPyW.js');
+
+const paginationJumpCss = () => `:host{display:flex;flex-direction:column;gap:0.75rem;padding:0.75rem;min-width:12rem}:host(:not([open])){display:none}`;
+
+const FIRST_PAGE = 1;
+const FALLBACK_LANGUAGE = 'en';
+const PaginationJump = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.jump = index.createEvent(this, "jump", 7);
+        /**
+         * Whether the field is being shown.
+         */
+        this.open = false;
+        /**
+         * The page to start from, which is the one the user is on.
+         */
+        this.page = FIRST_PAGE;
+        /**
+         * How many pages there are, which is as far as a jump can go.
+         */
+        this.pageCount = FIRST_PAGE;
+        /**
+         * Set while a page is being fetched, so that another cannot be asked for.
+         */
+        this.loading = false;
+        /**
+         * The language used for the labels and for the way numbers are written.
+         */
+        this.language = 'en';
+        /** What the field shows: the page it opened with, then what is typed. */
+        this.value = '';
+        this.shouldFocusField = false;
+        /**
+         * Only to keep what is on screen honest. `limel-input-field` draws an
+         * unfocused number through its `value` prop, so a field left pinned to
+         * the page it opened with would show that again the moment the keyboard
+         * moved to the button, while the button submitted something else.
+         *
+         * @param event - the field reporting what it now holds
+         */
+        this.handleChange = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.value = String((_a = event.detail) !== null && _a !== void 0 ? _a : '');
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== keycodes.ENTER) {
+                return;
+            }
+            event.preventDefault();
+            this.commit();
+        };
+        this.commit = () => {
+            const page = this.target;
+            if (page === null || this.loading) {
+                return;
+            }
+            this.jump.emit(page);
+        };
+        this.setField = (element) => {
+            this.field = element;
+        };
+        this.translate = (key, params) => {
+            return translations.translate.get(key, this.language, params);
+        };
+    }
+    componentWillLoad() {
+        this.handleOpenChange();
+    }
+    handleLanguageChange() {
+        this.numberFormat = undefined;
+    }
+    /**
+     * Opening starts the field again rather than leaving what was last typed,
+     * so it always offers the page the user is on now.
+     */
+    handleOpenChange() {
+        if (!this.open) {
+            return;
+        }
+        this.value = String(this.page);
+        this.shouldFocusField = true;
+    }
+    componentDidRender() {
+        if (!this.shouldFocusField) {
+            return;
+        }
+        this.shouldFocusField = false;
+        this.focusField();
+    }
+    render() {
+        if (!this.open) {
+            return;
+        }
+        return (index.h(index.Host, { onKeyDown: this.handleKeyDown }, index.h("limel-input-field", { type: "number", label: this.translate('pagination.page-number'), placeholder: this.pageRange, value: this.value, onChange: this.handleChange, min: FIRST_PAGE, max: this.pageCount, step: 1, ref: this.setField }), index.h("limel-button", { primary: true, label: this.translate('pagination.go'), disabled: this.loading, onClick: this.commit })));
+    }
+    /**
+     * The page that is in the field now, or `null` when it holds none.
+     *
+     * Read from the field itself rather than from its `change` event, which
+     * arrives on a debounce: a page typed and submitted inside that window
+     * would otherwise be submitted as whatever preceded it.
+     */
+    get target() {
+        var _a, _b;
+        const typed = (_b = (_a = this.nativeField) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
+        return pagination_util.pageFromInput(typed, this.pageCount);
+    }
+    /** `1–492`, so that being moved to 492 is a stated bound, not a surprise. */
+    get pageRange() {
+        return this.translate('pagination.page-range', {
+            first: this.formatNumber(FIRST_PAGE),
+            last: this.formatNumber(this.pageCount),
+        });
+    }
+    /** `limel-input-field` wraps a native field but does not expose it. */
+    get nativeField() {
+        var _a, _b;
+        return (_b = (_a = this.field) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+    }
+    /**
+     * The field delegates focus to the input it wraps, so focusing the host
+     * is enough. Selecting as well, so the page the user is on is both the
+     * starting value and out of the way of the first keystroke.
+     */
+    focusField() {
+        const host = this.field;
+        host === null || host === void 0 ? void 0 : host.componentOnReady().then(() => {
+            // A frame later, so the popover has been put where it belongs
+            // before the field takes the keyboard.
+            requestAnimationFrame(() => {
+                var _a, _b;
+                host.focus();
+                (_b = (_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.select();
+            });
+        });
+    }
+    /**
+     * The parent warns about a language it cannot use, so this one only has
+     * to keep drawing.
+     *
+     * @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);
+    }
+    /**
+     * The pagination hands down the language it settled on, so this only has
+     * to survive being handed one directly, as the example page does.
+     *
+     * @returns a formatter, in that language where it can be used
+     */
+    createNumberFormat() {
+        try {
+            return new Intl.NumberFormat(this.language);
+        }
+        catch (_a) {
+            return new Intl.NumberFormat(FALLBACK_LANGUAGE);
+        }
+    }
+    static get watchers() { return {
+        "language": [{
+                "handleLanguageChange": 0
+            }],
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+PaginationJump.style = paginationJumpCss();
+
+exports.limel_pagination_jump = PaginationJump;

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

@@ -1,125 +1,12 @@
 'use strict';
 
 var index = require('./index--B6-r0uo.js');
-var translations = require('./translations-C5T2-_rH.js');
+var translations = require('./translations-DFFpR6AZ.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var language = require('./language-CaqPKPyW.js');
+var pagination_util = require('./pagination.util-B5zzH8vg.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 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}limel-popover{display:inline-flex}.gap{width:1.75rem;padding:0;color:rgb(var(--contrast-1100))}.gap[aria-expanded=true]{box-shadow:var(--button-shadow-inset-pressed) !important}.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;
@@ -165,12 +52,15 @@ const Pagination = class {
         this.idPrefix = randomString.createRandomString();
         /** The value each prop was last complained about with. */
         this.warnedAbout = new Map();
+        /** The language `numberFormat` settled on, which may not be the prop. */
+        this.settledLanguage = FALLBACK_LANGUAGE;
         /** Settled once per render, and the only thing `render` reads. */
         this.view = {
             page: FIRST_PAGE,
             pageCount: null,
             pageSize: DEFAULT_PAGE_SIZE,
             totalItems: null,
+            slots: [],
         };
         /**
          * A gap marker, or a page button.
@@ -181,11 +71,38 @@ const Pagination = class {
          */
         this.renderSlot = (slot, index$1) => {
             if (slot.kind === 'gap') {
-                return (index.h("span", { key: `gap-${index$1}`, class: "gap", "aria-hidden": "true" }, "\u00B7\u00B7\u00B7"));
+                return this.renderGap(index$1);
             }
             const isCurrent = slot.page === this.currentPage;
             return (index.h("button", { key: `page-${index$1}`, id: this.slotId(index$1), 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$1)));
         };
+        this.openJump = (event) => {
+            if (this.loading) {
+                return;
+            }
+            const { index } = event.currentTarget.dataset;
+            this.openGap = Number(index);
+        };
+        this.closeJump = () => {
+            this.openGap = undefined;
+        };
+        /**
+         * The control is told what to show, so a jump only asks. Focus goes back
+         * to the marker the field came out of, which is still on screen and will
+         * still be somewhere sensible if the consumer declines.
+         *
+         * @param event - the page the field asks for
+         */
+        this.handleJump = (event) => {
+            event.stopPropagation();
+            const page = event.detail;
+            this.focusGap(this.openGap);
+            this.openGap = undefined;
+            if (this.goTo(page)) {
+                this.awaitedJump = page;
+                this.jumpedFrom = this.view.page;
+            }
+        };
         // 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) => {
@@ -197,9 +114,6 @@ const Pagination = class {
             this.goTo(this.currentPage + (direction === 'next' ? 1 : -1));
         };
         this.selectPage = (event) => {
-            if (this.loading) {
-                return;
-            }
             const { page } = event.currentTarget.dataset;
             this.goTo(Number(page));
         };
@@ -229,7 +143,9 @@ const Pagination = class {
             pageCount: pageCount,
             pageSize: pageSize,
             totalItems: totalItems,
+            slots: this.slotsFor(page, pageCount),
         };
+        this.closeJumpWithoutAGap();
         this.readOut(page);
         this.reconcile(page, usable);
         this.shownPage = page;
@@ -246,6 +162,10 @@ const Pagination = class {
         return Math.max(FIRST_PAGE, Math.ceil(total / pageSize));
     }
     componentDidRender() {
+        this.reportCorrection();
+        this.followJumpedPage();
+    }
+    reportCorrection() {
         const page = this.pendingCorrection;
         if (page === undefined) {
             return;
@@ -352,10 +272,23 @@ const Pagination = class {
     handleLanguageChange() {
         this.numberFormat = undefined;
     }
+    /**
+     * A gap is remembered by the position it sits in, and the positions are
+     * worked out afresh every render. A page set from outside can put a page
+     * number where the open gap was, taking the popover down without it ever
+     * closing — and leaving it to spring open by itself the next time a gap
+     * lands there.
+     */
+    closeJumpWithoutAGap() {
+        var _a;
+        const open = this.openGap;
+        if (open !== undefined && ((_a = this.view.slots[open]) === null || _a === void 0 ? void 0 : _a.kind) !== 'gap') {
+            this.openGap = undefined;
+        }
+    }
     render() {
-        const { page, pageCount } = this.view;
-        const slots = this.slotsFor(page, pageCount);
-        return (index.h(index.Host, { key: '40d6123ac887f519fc31690fce7fcb46e73f2199' }, index.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')), index.h("span", { key: 'e59f62c2644a9a4a513ab3a3455854084434aabc', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        const { slots } = this.view;
+        return (index.h(index.Host, { key: 'fac46260ef2a4e1e8d4aad962c90477831b6497f' }, index.h("nav", { key: '239f0ba745b9a385064c4a2c91a572e70a9e6525', "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')), index.h("span", { key: '82fa3c9fb3fa8063be64d8373158d3d0e93138c1', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -370,7 +303,93 @@ const Pagination = class {
         if (pageCount === null) {
             return [{ kind: 'page', page: page }];
         }
-        return getPageSlots(page, pageCount);
+        return pagination_util.getPageSlots(page, pageCount);
+    }
+    /**
+     * A gap is a button, not a marker: the pages it stands for are still
+     * reachable, and typing one is the only way to reach any of them in a
+     * single move.
+     *
+     * Both gaps open the same field, and it accepts any page in the set.
+     * Scoping each one to the pages it happens to hide would make two
+     * identical markers behave differently, with nothing on screen to say
+     * which is which.
+     *
+     * @param index - where the gap sits in the window
+     * @returns the rendered gap
+     */
+    renderGap(index$1) {
+        const { pageCount } = this.view;
+        // A gap stands for pages that were left out, which cannot have
+        // happened before the count arrived: until then `slotsFor` renders
+        // the page the user is on and nothing else.
+        if (pageCount === null) {
+            return;
+        }
+        return (index.h("limel-popover", { key: `gap-${index$1}`, open: this.openGap === index$1, openDirection: "bottom", onClose: this.closeJump }, index.h("button", { slot: "trigger", class: "gap", id: this.slotId(index$1), "aria-label": this.translate('pagination.jump-to-a-page'), "aria-disabled": this.loading ? 'true' : null, "data-index": index$1, onClick: this.openJump }, "\u00B7\u00B7\u00B7"), index.h("limel-pagination-jump", { open: this.openGap === index$1, page: this.view.page, pageCount: pageCount, loading: this.loading, language: this.languageForNumbers, onJump: this.handleJump })));
+    }
+    focusGap(index) {
+        var _a;
+        const gap = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[id="${this.slotId(index)}"]`);
+        gap === null || gap === void 0 ? void 0 : gap.focus();
+        this.jumpFocus = gap;
+    }
+    /**
+     * Put the keyboard on the page a jump asked for, once the consumer has
+     * shown it.
+     *
+     * Committing tears down the popover the field was in, so between asking
+     * and arriving focus is on nothing. If the user has since put it somewhere
+     * of their own, arriving is no longer ours to report.
+     */
+    followJumpedPage() {
+        if (this.awaitedJump === undefined) {
+            return;
+        }
+        if (!this.ownsFocus()) {
+            this.forgetJump();
+            return;
+        }
+        if (this.view.page !== this.awaitedJump) {
+            // Still showing the page the jump was asked from is what waiting
+            // looks like. Anywhere else is an answer too — the consumer chose
+            // to show something else — and a later arrival at the page we
+            // asked for is then no longer ours to follow.
+            if (this.view.page !== this.jumpedFrom) {
+                this.forgetJump();
+            }
+            return;
+        }
+        this.forgetJump();
+        this.focusCurrentPage();
+    }
+    forgetJump() {
+        this.awaitedJump = undefined;
+        this.jumpedFrom = undefined;
+    }
+    /**
+     * Whether the keyboard is still where the jump put it. Somewhere else
+     * inside this component means the user moved it and it is theirs.
+     *
+     * The marker itself can also go: jumping from the left gap to page 3
+     * turns that slot into a page number, and the button holding focus is
+     * taken away with it. A browser answers that by focusing the body rather
+     * than nothing, so the marker having left the page is what we look for.
+     */
+    ownsFocus() {
+        var _a, _b;
+        const inside = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+        if (inside === this.jumpFocus) {
+            return true;
+        }
+        return (!((_b = this.jumpFocus) === null || _b === void 0 ? void 0 : _b.isConnected) &&
+            document.activeElement === document.body);
+    }
+    focusCurrentPage() {
+        var _a;
+        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="page"]');
+        button === null || button === void 0 ? void 0 : button.focus();
+        this.jumpFocus = undefined;
     }
     /**
      * A spinner around the page the user is heading for, while it loads.
@@ -434,13 +453,19 @@ const Pagination = class {
         return pageCount === null || page >= pageCount;
     }
     /**
+     * The one path every move the user asks for goes through, and so the one
+     * place that refuses while a page is still being fetched.
+     *
      * @param page - the page to ask for, 1-based
+     * @returns whether it was asked for
      */
     goTo(page) {
-        if (page === this.currentPage) {
-            return;
+        this.awaitedJump = undefined;
+        if (this.loading || page === this.currentPage) {
+            return false;
         }
         this.emitGoToPage(page, 'user');
+        return true;
     }
     /** The page on screen: the one asked for, within the range that exists. */
     get currentPage() {
@@ -576,6 +601,17 @@ const Pagination = class {
         (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
         return this.numberFormat.format(value);
     }
+    /**
+     * What the jump form is given, so that the one warning about a language
+     * this browser cannot write numbers in describes both of us. A tag it
+     * accepts but does not support, `zz`, resolves to the viewer's own locale
+     * rather than throwing, so asking the formatter is the only way to know.
+     */
+    get languageForNumbers() {
+        var _a;
+        (_a = this.numberFormat) !== null && _a !== void 0 ? _a : (this.numberFormat = this.createNumberFormat());
+        return this.settledLanguage;
+    }
     /**
      * `Intl.NumberFormat` throws on a language it cannot parse, and this is
      * called from `render`, so an unusable one would leave the control drawing
@@ -596,6 +632,7 @@ const Pagination = class {
             const resolved = format.resolvedOptions().locale;
             if (language.getPrimarySubtag(resolved) === language.getPrimarySubtag(language$1)) {
                 this.warnedAbout.delete('language');
+                this.settledLanguage = language$1;
                 return format;
             }
         }
@@ -606,8 +643,10 @@ const Pagination = class {
         // 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.
+        this.settledLanguage = FALLBACK_LANGUAGE;
         return new Intl.NumberFormat(FALLBACK_LANGUAGE);
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "language": [{
                 "handleLanguageChange": 0

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index--B6-r0uo.js');
-var translations = require('./translations-C5T2-_rH.js');
+var translations = require('./translations-DFFpR6AZ.js');
 var dom = require('./dom-BWMDM6En.js');
 var keycodes = require('./keycodes-k-EdzcMX.js');
 var randomString = require('./random-string-BTzDB2ee.js');