@limetech/lime-elements 40.4.2 → 40.5.0

package/dist/lime-elements/{p-24041bbb.entry.js → p-fbcd99a3.entry.js}

@@ -1 +1 @@
-import{r as o,h as r,H as t}from"./p-Bnc9lzk2.js";import{t as e}from"./p-DAFuhe5e.js";import"./p-C3hECvXE.js";const l={note:"info",important:"exclamation_mark",tip:"idea",caution:"high_priority",warning:"error"};function a(o,r="note"){var t;return o||(null!==(t=l[r])&&void 0!==t?t:l.note)}const i=class{constructor(r){o(this,r),this.type="note",this.language="en"}render(){return r(t,{key:"1fad868509e50ce5001ab34c5a24d8859a7de622"},r("div",{key:"8b00e3ca008d783da77658d7e5c40c98b8fe6097",class:"side",role:"presentation"},r("limel-icon",{key:"382bf738b6b93cc43d03aa81311e026f26df77fb",name:a(this.icon,this.type)})),r("div",{key:"95a17ed73ffd18f4b17b5f9b0059bc92eb79f02f",class:"main"},r("h1",{key:"c3e5fc2c4475f1d708be437119eaf417d4bd40fe",class:"heading"},function(o,r="note",t="en"){if(o)return o;const l=`callout.${r}`;try{return e.get(l,t)}catch(o){return e.get(l,"en")}}(this.heading,this.type,this.language)),r("slot",{key:"eefb5b4c640286a31c1ce7897c455b813c22c5fc"})))}};i.style='*,*::before,*::after{box-sizing:border-box;min-height:0;min-width:0}:host(limel-callout){box-sizing:border-box;display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-contrast-100))   );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-gray-default))   )}:host([type=important]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-sky-default))   )}:host([type=tip]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-green-default))   )}:host([type=caution]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-orange-light))   )}:host([type=warning]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-red-dark))   )}.side{padding:0.25rem;position:relative}.side:before{content:"";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}';export{i as limel_callout}
+import{r as o,h as r,H as t}from"./p-Bnc9lzk2.js";import{t as e}from"./p-B8hoCfhT.js";import"./p-C3hECvXE.js";const l={note:"info",important:"exclamation_mark",tip:"idea",caution:"high_priority",warning:"error"};function a(o,r="note"){var t;return o||(null!==(t=l[r])&&void 0!==t?t:l.note)}const i=class{constructor(r){o(this,r),this.type="note",this.language="en"}render(){return r(t,{key:"1fad868509e50ce5001ab34c5a24d8859a7de622"},r("div",{key:"8b00e3ca008d783da77658d7e5c40c98b8fe6097",class:"side",role:"presentation"},r("limel-icon",{key:"382bf738b6b93cc43d03aa81311e026f26df77fb",name:a(this.icon,this.type)})),r("div",{key:"95a17ed73ffd18f4b17b5f9b0059bc92eb79f02f",class:"main"},r("h1",{key:"c3e5fc2c4475f1d708be437119eaf417d4bd40fe",class:"heading"},function(o,r="note",t="en"){if(o)return o;const l=`callout.${r}`;try{return e.get(l,t)}catch(o){return e.get(l,"en")}}(this.heading,this.type,this.language)),r("slot",{key:"eefb5b4c640286a31c1ce7897c455b813c22c5fc"})))}};i.style='*,*::before,*::after{box-sizing:border-box;min-height:0;min-width:0}:host(limel-callout){box-sizing:border-box;display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-contrast-100))   );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-gray-default))   )}:host([type=important]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-sky-default))   )}:host([type=tip]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-green-default))   )}:host([type=caution]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-orange-light))   )}:host([type=warning]){--limel-callout-tint-color:var(       --callout-color,       rgb(var(--color-red-dark))   )}.side{padding:0.25rem;position:relative}.side:before{content:"";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}';export{i as limel_callout}

package/dist/types/components/pagination/jump/pagination-jump.d.ts

@@ -0,0 +1,102 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { Languages } from '../../date-picker/date.types';
+/**
+ * A field for going straight to a page, which `limel-pagination` puts inside
+ * the popover its `···` opens.
+ *
+ * It draws nothing until it is opened, so a pagination that is merely on
+ * screen pays for an empty element rather than a form. It lives in a
+ * component of its own because the popover carries its content into a shadow
+ * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+ * a component brings its own.
+ *
+ * @private
+ * @exampleComponent limel-example-pagination-jump-basic
+ */
+export declare class PaginationJump {
+    /**
+     * Whether the field is being shown.
+     */
+    open: boolean;
+    /**
+     * The page to start from, which is the one the user is on.
+     */
+    page: number;
+    /**
+     * How many pages there are, which is as far as a jump can go.
+     */
+    pageCount: number;
+    /**
+     * Set while a page is being fetched, so that another cannot be asked for.
+     */
+    loading: boolean;
+    /**
+     * The language used for the labels and for the way numbers are written.
+     */
+    language: Languages;
+    /**
+     * Asks for the page that was typed, already brought within the set.
+     */
+    jump: EventEmitter<number>;
+    /** What the field shows: the page it opened with, then what is typed. */
+    private value;
+    private field?;
+    private shouldFocusField;
+    private numberFormat?;
+    componentWillLoad(): void;
+    protected handleLanguageChange(): void;
+    /**
+     * Opening starts the field again rather than leaving what was last typed,
+     * so it always offers the page the user is on now.
+     */
+    protected handleOpenChange(): void;
+    componentDidRender(): void;
+    render(): any;
+    /**
+     * 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
+     */
+    private readonly handleChange;
+    private readonly handleKeyDown;
+    private readonly 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.
+     */
+    private get target();
+    /** `1–492`, so that being moved to 492 is a stated bound, not a surprise. */
+    private get pageRange();
+    private readonly setField;
+    /** `limel-input-field` wraps a native field but does not expose it. */
+    private get nativeField();
+    /**
+     * 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.
+     */
+    private focusField;
+    /**
+     * 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
+     */
+    private formatNumber;
+    /**
+     * 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
+     */
+    private createNumberFormat;
+    private readonly translate;
+}
+//# sourceMappingURL=pagination-jump.d.ts.map

package/dist/types/components/pagination/pagination.d.ts

@@ -9,6 +9,10 @@ import { GoToPageEvent } from './pagination.types';
  * looking at, and how far into it they have got; and hovering a page shows
  * exactly which items it holds.
  *
+ * Where there are more pages than fit, the ones left out are stood for by a
+ * `···`. That is a button: it opens a field for going straight to any page in
+ * the set, so no page is more than one move away however long the set is.
+ *
  * @exampleComponent limel-example-pagination-basic
  * @exampleComponent limel-example-pagination-single-page
  * @exampleComponent limel-example-pagination-page-size
@@ -58,6 +62,7 @@ export declare class Pagination {
      * you can catch up.
      */
     goToPage: EventEmitter<GoToPageEvent>;
+    private host;
     /**
      * 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
@@ -70,6 +75,8 @@ export declare class Pagination {
     /** The value each prop was last complained about with. */
     private readonly warnedAbout;
     private numberFormat?;
+    /** The language `numberFormat` settled on, which may not be the prop. */
+    private settledLanguage;
     /** Settled once per render, and the only thing `render` reads. */
     private view;
     /** The page the previous render showed. */
@@ -80,6 +87,14 @@ export declare class Pagination {
     private reportedAsk?;
     /** A correction the consumer has not been told about. */
     private pendingCorrection?;
+    /** Which gap has its jump field open, by slot index. */
+    private openGap?;
+    /** The page a jump asked for, until the control arrives there. */
+    private awaitedJump?;
+    /** The page it was asked from, which is what still waiting looks like. */
+    private jumpedFrom?;
+    /** Where a commit left the keyboard, so we can tell it has not moved. */
+    private jumpFocus?;
     /**
      * Settling here rather than in a `@Watch` keeps the result the same
      * however the consumer assigns the props. A watcher runs the moment one
@@ -94,6 +109,7 @@ export declare class Pagination {
      */
     private countPages;
     componentDidRender(): void;
+    private reportCorrection;
     /**
      * 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
@@ -143,6 +159,14 @@ export declare class Pagination {
      */
     private reconcile;
     protected handleLanguageChange(): void;
+    /**
+     * 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.
+     */
+    private closeJumpWithoutAGap;
     render(): any;
     /**
      * Without a count we know where the user is but not how far the set goes,
@@ -162,6 +186,52 @@ export declare class Pagination {
      * @returns the rendered slot
      */
     private readonly renderSlot;
+    /**
+     * 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
+     */
+    private renderGap;
+    private readonly openJump;
+    private readonly closeJump;
+    /**
+     * 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
+     */
+    private readonly handleJump;
+    private focusGap;
+    /**
+     * 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.
+     */
+    private followJumpedPage;
+    private forgetJump;
+    /**
+     * 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.
+     */
+    private ownsFocus;
+    private focusCurrentPage;
     /**
      * A spinner around the page the user is heading for, while it loads.
      *
@@ -197,7 +267,11 @@ export declare class Pagination {
     private readonly step;
     private readonly selectPage;
     /**
+     * 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
      */
     private goTo;
     /** The page on screen: the one asked for, within the range that exists. */
@@ -269,6 +343,13 @@ export declare class Pagination {
      * @returns the number in the current language
      */
     private formatNumber;
+    /**
+     * 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.
+     */
+    private get languageForNumbers();
     /**
      * `Intl.NumberFormat` throws on a language it cannot parse, and this is
      * called from `render`, so an unusable one would leave the control drawing

package/dist/types/components/pagination/pagination.util.d.ts

@@ -8,8 +8,6 @@ export type PageSlot = {
     page: number;
 } | {
     kind: 'gap';
-    from: number;
-    to: number;
 };
 /**
  * How many positions are rendered at once, counting both page numbers and gap
@@ -18,6 +16,18 @@ export type PageSlot = {
  * how many positions there are, not how many of them are numbers.
  */
 export declare const VISIBLE_SLOTS = 7;
+/**
+ * The page a typed value asks for, or `null` when it asks for nothing.
+ *
+ * Out of range is not an error. The set has a first and a last page, both
+ * written under the field, and the nearer of them is what someone typing past
+ * the end meant.
+ *
+ * @param value - what was typed into the field
+ * @param pageCount - how many pages there are, or `null` when not yet known
+ * @returns a page within the set, or `null` when there is no number to use
+ */
+export declare function pageFromInput(value: string, pageCount: number | null): number | null;
 /**
  * Build the list of positions to render for a given page count.
  *

package/dist/types/components.d.ts

@@ -2834,6 +2834,9 @@ export namespace Components {
      * A page number and a total tells users how much there is in the list that they are
      * looking at, and how far into it they have got; and hovering a page shows
      * exactly which items it holds.
+     * Where there are more pages than fit, the ones left out are stood for by a
+     * `···`. That is a button: it opens a field for going straight to any page in
+     * the set, so no page is more than one move away however long the set is.
      * @exampleComponent limel-example-pagination-basic
      * @exampleComponent limel-example-pagination-single-page
      * @exampleComponent limel-example-pagination-page-size
@@ -2870,6 +2873,44 @@ export namespace Components {
          */
         "totalItems": number | null;
     }
+    /**
+     * A field for going straight to a page, which `limel-pagination` puts inside
+     * the popover its `···` opens.
+     * It draws nothing until it is opened, so a pagination that is merely on
+     * screen pays for an empty element rather than a form. It lives in a
+     * component of its own because the popover carries its content into a shadow
+     * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+     * a component brings its own.
+     * @private 
+     * @exampleComponent limel-example-pagination-jump-basic
+     */
+    interface LimelPaginationJump {
+        /**
+          * The language used for the labels and for the way numbers are written.
+          * @default 'en'
+         */
+        "language": Languages;
+        /**
+          * Set while a page is being fetched, so that another cannot be asked for.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Whether the field is being shown.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The page to start from, which is the one the user is on.
+          * @default 1
+         */
+        "page": number;
+        /**
+          * How many pages there are, which is as far as a jump can go.
+          * @default 1
+         */
+        "pageCount": number;
+    }
     /**
      * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
@@ -4222,6 +4263,10 @@ export interface LimelPaginationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelPaginationElement;
 }
+export interface LimelPaginationJumpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelPaginationJumpElement;
+}
 export interface LimelPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelPickerElement;
@@ -5912,6 +5957,9 @@ declare global {
      * A page number and a total tells users how much there is in the list that they are
      * looking at, and how far into it they have got; and hovering a page shows
      * exactly which items it holds.
+     * Where there are more pages than fit, the ones left out are stood for by a
+     * `···`. That is a button: it opens a field for going straight to any page in
+     * the set, so no page is more than one move away however long the set is.
      * @exampleComponent limel-example-pagination-basic
      * @exampleComponent limel-example-pagination-single-page
      * @exampleComponent limel-example-pagination-page-size
@@ -5935,6 +5983,34 @@ declare global {
         prototype: HTMLLimelPaginationElement;
         new (): HTMLLimelPaginationElement;
     };
+    interface HTMLLimelPaginationJumpElementEventMap {
+        "jump": number;
+    }
+    /**
+     * A field for going straight to a page, which `limel-pagination` puts inside
+     * the popover its `···` opens.
+     * It draws nothing until it is opened, so a pagination that is merely on
+     * screen pays for an empty element rather than a form. It lives in a
+     * component of its own because the popover carries its content into a shadow
+     * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+     * a component brings its own.
+     * @private 
+     * @exampleComponent limel-example-pagination-jump-basic
+     */
+    interface HTMLLimelPaginationJumpElement extends Components.LimelPaginationJump, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLimelPaginationJumpElementEventMap>(type: K, listener: (this: HTMLLimelPaginationJumpElement, ev: LimelPaginationJumpCustomEvent<HTMLLimelPaginationJumpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLimelPaginationJumpElementEventMap>(type: K, listener: (this: HTMLLimelPaginationJumpElement, ev: LimelPaginationJumpCustomEvent<HTMLLimelPaginationJumpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLimelPaginationJumpElement: {
+        prototype: HTMLLimelPaginationJumpElement;
+        new (): HTMLLimelPaginationJumpElement;
+    };
     interface HTMLLimelPickerElementEventMap {
         "change": PickerItem | PickerItem[];
         "interact": PickerItem;
@@ -6725,6 +6801,7 @@ declare global {
         "limel-menu-surface": HTMLLimelMenuSurfaceElement;
         "limel-notched-outline": HTMLLimelNotchedOutlineElement;
         "limel-pagination": HTMLLimelPaginationElement;
+        "limel-pagination-jump": HTMLLimelPaginationJumpElement;
         "limel-picker": HTMLLimelPickerElement;
         "limel-popover": HTMLLimelPopoverElement;
         "limel-popover-surface": HTMLLimelPopoverSurfaceElement;
@@ -9647,6 +9724,9 @@ declare namespace LocalJSX {
      * A page number and a total tells users how much there is in the list that they are
      * looking at, and how far into it they have got; and hovering a page shows
      * exactly which items it holds.
+     * Where there are more pages than fit, the ones left out are stood for by a
+     * `···`. That is a button: it opens a field for going straight to any page in
+     * the set, so no page is more than one move away however long the set is.
      * @exampleComponent limel-example-pagination-basic
      * @exampleComponent limel-example-pagination-single-page
      * @exampleComponent limel-example-pagination-page-size
@@ -9687,6 +9767,48 @@ declare namespace LocalJSX {
          */
         "totalItems"?: number | null;
     }
+    /**
+     * A field for going straight to a page, which `limel-pagination` puts inside
+     * the popover its `···` opens.
+     * It draws nothing until it is opened, so a pagination that is merely on
+     * screen pays for an empty element rather than a form. It lives in a
+     * component of its own because the popover carries its content into a shadow
+     * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+     * a component brings its own.
+     * @private 
+     * @exampleComponent limel-example-pagination-jump-basic
+     */
+    interface LimelPaginationJump {
+        /**
+          * The language used for the labels and for the way numbers are written.
+          * @default 'en'
+         */
+        "language"?: Languages;
+        /**
+          * Set while a page is being fetched, so that another cannot be asked for.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * Asks for the page that was typed, already brought within the set.
+         */
+        "onJump"?: (event: LimelPaginationJumpCustomEvent<number>) => void;
+        /**
+          * Whether the field is being shown.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * The page to start from, which is the one the user is on.
+          * @default 1
+         */
+        "page"?: number;
+        /**
+          * How many pages there are, which is as far as a jump can go.
+          * @default 1
+         */
+        "pageCount"?: number;
+    }
     /**
      * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
@@ -11503,6 +11625,13 @@ declare namespace LocalJSX {
         "loading": boolean;
         "language": Languages;
     }
+    interface LimelPaginationJumpAttributes {
+        "open": boolean;
+        "page": number;
+        "pageCount": number;
+        "loading": boolean;
+        "language": Languages;
+    }
     interface LimelPickerAttributes {
         "disabled": boolean;
         "readonly": boolean;
@@ -11739,6 +11868,7 @@ declare namespace LocalJSX {
         "limel-menu-surface": Omit<LimelMenuSurface, keyof LimelMenuSurfaceAttributes> & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes]?: LimelMenuSurface[K] } & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes as `attr:${K}`]?: LimelMenuSurfaceAttributes[K] } & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes as `prop:${K}`]?: LimelMenuSurface[K] };
         "limel-notched-outline": Omit<LimelNotchedOutline, keyof LimelNotchedOutlineAttributes> & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes]?: LimelNotchedOutline[K] } & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes as `attr:${K}`]?: LimelNotchedOutlineAttributes[K] } & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes as `prop:${K}`]?: LimelNotchedOutline[K] };
         "limel-pagination": Omit<LimelPagination, keyof LimelPaginationAttributes> & { [K in keyof LimelPagination & keyof LimelPaginationAttributes]?: LimelPagination[K] } & { [K in keyof LimelPagination & keyof LimelPaginationAttributes as `attr:${K}`]?: LimelPaginationAttributes[K] } & { [K in keyof LimelPagination & keyof LimelPaginationAttributes as `prop:${K}`]?: LimelPagination[K] };
+        "limel-pagination-jump": Omit<LimelPaginationJump, keyof LimelPaginationJumpAttributes> & { [K in keyof LimelPaginationJump & keyof LimelPaginationJumpAttributes]?: LimelPaginationJump[K] } & { [K in keyof LimelPaginationJump & keyof LimelPaginationJumpAttributes as `attr:${K}`]?: LimelPaginationJumpAttributes[K] } & { [K in keyof LimelPaginationJump & keyof LimelPaginationJumpAttributes as `prop:${K}`]?: LimelPaginationJump[K] };
         "limel-picker": Omit<LimelPicker, keyof LimelPickerAttributes> & { [K in keyof LimelPicker & keyof LimelPickerAttributes]?: LimelPicker[K] } & { [K in keyof LimelPicker & keyof LimelPickerAttributes as `attr:${K}`]?: LimelPickerAttributes[K] } & { [K in keyof LimelPicker & keyof LimelPickerAttributes as `prop:${K}`]?: LimelPicker[K] };
         "limel-popover": Omit<LimelPopover, keyof LimelPopoverAttributes> & { [K in keyof LimelPopover & keyof LimelPopoverAttributes]?: LimelPopover[K] } & { [K in keyof LimelPopover & keyof LimelPopoverAttributes as `attr:${K}`]?: LimelPopoverAttributes[K] } & { [K in keyof LimelPopover & keyof LimelPopoverAttributes as `prop:${K}`]?: LimelPopover[K] };
         "limel-popover-surface": LimelPopoverSurface;
@@ -12750,6 +12880,9 @@ declare module "@stencil/core" {
              * A page number and a total tells users how much there is in the list that they are
              * looking at, and how far into it they have got; and hovering a page shows
              * exactly which items it holds.
+             * Where there are more pages than fit, the ones left out are stood for by a
+             * `···`. That is a button: it opens a field for going straight to any page in
+             * the set, so no page is more than one move away however long the set is.
              * @exampleComponent limel-example-pagination-basic
              * @exampleComponent limel-example-pagination-single-page
              * @exampleComponent limel-example-pagination-page-size
@@ -12760,6 +12893,18 @@ declare module "@stencil/core" {
              * @beta 
              */
             "limel-pagination": LocalJSX.IntrinsicElements["limel-pagination"] & JSXBase.HTMLAttributes<HTMLLimelPaginationElement>;
+            /**
+             * A field for going straight to a page, which `limel-pagination` puts inside
+             * the popover its `···` opens.
+             * It draws nothing until it is opened, so a pagination that is merely on
+             * screen pays for an empty element rather than a form. It lives in a
+             * component of its own because the popover carries its content into a shadow
+             * root elsewhere on the page, where a parent's stylesheet cannot reach it —
+             * a component brings its own.
+             * @private 
+             * @exampleComponent limel-example-pagination-jump-basic
+             */
+            "limel-pagination-jump": LocalJSX.IntrinsicElements["limel-pagination-jump"] & JSXBase.HTMLAttributes<HTMLLimelPaginationJumpElement>;
             /**
              * @exampleComponent limel-example-picker-basic
              * @exampleComponent limel-example-picker-multiple

package/dist/types/translations/da.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=da.d.ts.map

package/dist/types/translations/de.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=de.d.ts.map

package/dist/types/translations/en.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=en.d.ts.map

package/dist/types/translations/fi.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=fi.d.ts.map

package/dist/types/translations/fr.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=fr.d.ts.map

package/dist/types/translations/nl.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=nl.d.ts.map

package/dist/types/translations/no.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=no.d.ts.map

package/dist/types/translations/sv.d.ts

@@ -123,6 +123,10 @@ declare const _default: {
     'pagination.go-to-page': string;
     'pagination.current-page': string;
     'pagination.items-range': string;
+    'pagination.jump-to-a-page': string;
+    'pagination.page-number': string;
+    'pagination.page-range': string;
+    'pagination.go': string;
 };
 export default _default;
 //# sourceMappingURL=sv.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.4.2",
+  "version": "40.5.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/cjs/limel-helper-line.cjs.entry.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var index = require('./index--B6-r0uo.js');
-
-const helperLineCss = () => `:host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-helper-line.invalid) .helper-text{color:var(--limel-theme-error-color)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}`;
-
-const HelperLine = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Turns `true`, when the parent component is invalid.
-         * For example, when the parent component is `required` but is left empty.
-         * Or when the input format is invalid.
-         */
-        this.invalid = false;
-        this.hasContent = () => {
-            return !!(this.maxLength > 0 ||
-                (this.helperText && this.helperText.length > 0));
-        };
-        this.renderHelperText = () => {
-            if (!this.helperText) {
-                return;
-            }
-            return (index.h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
-        };
-        this.renderCharacterCounter = () => {
-            const counter = `${this.length} / ${this.maxLength}`;
-            if (!this.maxLength) {
-                return;
-            }
-            return index.h("span", { class: "counter" }, counter);
-        };
-    }
-    render() {
-        return (index.h(index.Host, { key: '5ecd83d58e8412274b36def796d0a9c24b67e582', tabIndex: -1, class: {
-                invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, index.h("div", { key: 'f10706f6e5f7be45da53a58a13b44a936eb091b4' }, this.renderHelperText(), this.renderCharacterCounter())));
-    }
-};
-HelperLine.style = helperLineCss();
-
-exports.limel_helper_line = HelperLine;