@jirawatpyk/aura-react 5.69.0 → 5.70.0

package/dist/esm/Button.js

@@ -8,6 +8,8 @@ import { IconLoaderCircle } from "./icons.js";
 function ButtonLink(props, ref, Link) {
   const variant = props.variant || "primary";
   const disabled = !!props.disabled;
+  const ad = props["aria-disabled"];
+  const gated = !disabled && (ad === true || ad === "true");
   const rest = omit(props, [
     "variant",
     "className",
@@ -29,7 +31,7 @@ function ButtonLink(props, ref, Link) {
       ref,
       href: disabled ? void 0 : props.href,
       role: disabled ? "link" : void 0,
-      "aria-disabled": disabled || void 0,
+      "aria-disabled": disabled || gated || void 0,
       tabIndex: disabled ? -1 : props.tabIndex,
       className: buttonClass({
         variant,
@@ -38,7 +40,9 @@ function ButtonLink(props, ref, Link) {
         touchHeight: props.touchHeight,
         className: props.className
       }),
-      onClick: disabled ? void 0 : props.onClick
+      onClick: disabled ? void 0 : gated ? function(e) {
+        e.preventDefault();
+      } : props.onClick
     },
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
     props.children,
@@ -56,6 +60,8 @@ const Button = React.forwardRef(
     const loading = !!props.loading;
     const ad = props["aria-disabled"];
     const blocked = loading || ad === true || ad === "true";
+    const ab = props["aria-busy"];
+    const busy = loading || ab === true || ab === "true";
     const rest = omit(props, [
       "variant",
       "className",
@@ -83,7 +89,7 @@ const Button = React.forwardRef(
           loading,
           className: props.className
         }),
-        "aria-busy": loading || void 0,
+        "aria-busy": busy || void 0,
         "aria-disabled": blocked || void 0,
         onClick: blocked ? function(e) {
           e.preventDefault();

package/dist/esm/FileUpload.js

@@ -5,8 +5,10 @@ import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Field } from "./Field.js";
+import { Button } from "./Button.js";
+import { Progress } from "./Progress.js";
 import { formatBytes } from "./text.js";
-import { IconCircleAlert, IconCircleCheck, IconCloudUpload, IconFile, IconImage, IconX } from "./icons.js";
+import { IconCircleAlert, IconCircleCheck, IconCloudUpload, IconFile, IconImage, IconUpload, IconX } from "./icons.js";
 function matches(file, accept) {
   if (!accept) return true;
   const name = (file.name || "").toLowerCase(), type = (file.type || "").toLowerCase();
@@ -40,6 +42,22 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
   const urls = React.useRef({});
   const maxFiles = props.multiple ? props.maxFiles : 1;
   const note = t.accepts(describeAccept(props.accept, t), props.maxSize ? formatBytes(props.maxSize) : "");
+  const pickState = React.useState(null);
+  const buttonRef = React.useRef(null);
+  const buttonMode = props.variant === "button";
+  React.useEffect(
+    function() {
+      const el = inputRef.current;
+      if (!buttonMode || !el) return;
+      el.focus = function(o) {
+        if (buttonRef.current) buttonRef.current.focus(o);
+      };
+      return function() {
+        delete el.focus;
+      };
+    },
+    [buttonMode]
+  );
   React.useEffect(function() {
     return function() {
       Object.keys(urls.current).forEach(function(k) {
@@ -107,6 +125,95 @@ const FileUpload = React.forwardRef(function FileUpload2(props, ref) {
     if (inputRef.current) inputRef.current.focus();
   }
   const error = props.error;
+  if (props.variant === "button") {
+    const err = error || pickState[0];
+    const desc = [err ? id + "-error" : props.hint ? id + "-hint" : null, note ? id + "-note" : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ React.createElement(
+      Field,
+      {
+        id,
+        label: props.label,
+        labelAs: "span",
+        labelId: id + "-label",
+        hint: props.hint,
+        error: err,
+        required: props.required,
+        optional: props.optional,
+        disabled: props.disabled,
+        className: cx("aura-upload-field", props.className)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "aura-upload-button" }, /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          ref: buttonRef,
+          id: id + "-button",
+          variant: "secondary",
+          icon: /* @__PURE__ */ React.createElement(IconUpload, null),
+          touchHeight: props.touchHeight,
+          disabled: props.disabled,
+          "aria-labelledby": props.label ? id + "-label " + id + "-button" : void 0,
+          "aria-describedby": desc,
+          onClick: function() {
+            if (inputRef.current) inputRef.current.click();
+          }
+        },
+        props.buttonLabel != null ? props.buttonLabel : props.multiple ? t.browse : t.browseOne
+      ), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          ref: inputMerged,
+          id,
+          type: "file",
+          className: "aura-upload__input",
+          tabIndex: -1,
+          "aria-hidden": true,
+          accept: props.accept,
+          multiple: !!props.multiple,
+          disabled: props.disabled,
+          name: props.name,
+          required: props.name ? props.required : void 0,
+          onInvalid: function(e) {
+            e.preventDefault();
+            pickState[1](props.multiple ? t.browse : t.browseOne);
+            if (buttonRef.current) buttonRef.current.focus();
+          },
+          onChange: function(e) {
+            const files = Array.prototype.slice.call(e.target.files || []);
+            if (!files.length) return;
+            let refused = null;
+            const ok = files.filter(function(f) {
+              const why = !matches(f, props.accept) ? t.fileWrongType : props.maxSize && f.size > props.maxSize ? t.fileTooBig(formatBytes(props.maxSize)) : null;
+              if (why && !refused) refused = why;
+              return !why;
+            });
+            pickState[1](refused);
+            if (!props.name) e.target.value = "";
+            else if (refused) {
+              try {
+                const dt = new DataTransfer();
+                ok.forEach(function(f) {
+                  dt.items.add(f);
+                });
+                e.target.files = dt.files;
+              } catch (x) {
+                e.target.value = "";
+              }
+            }
+            if (ok.length && props.onSelect) props.onSelect(ok);
+          }
+        }
+      ), note ? /* @__PURE__ */ React.createElement("span", { className: "aura-upload__note", id: id + "-note" }, note) : null),
+      props.progress !== void 0 ? /* @__PURE__ */ React.createElement(
+        Progress,
+        {
+          className: "aura-upload-button__progress",
+          size: "sm",
+          value: props.progress == null ? void 0 : props.progress,
+          label: t.uploading
+        }
+      ) : null
+    );
+  }
   return /* @__PURE__ */ React.createElement(
     Field,
     {

package/dist/esm/IconButton.js

@@ -7,6 +7,8 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
   const rest = omit(props, ["icon", "label", "className", "size", "tone", "touchHeight", "variant", "pressed"]);
   useAutoTip();
   const own = props.title !== void 0;
+  const ad = props["aria-disabled"];
+  const blocked = ad === true || ad === "true";
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -16,6 +18,9 @@ const IconButton = React.forwardRef(function IconButton2(props, ref) {
       "aria-label": props.label,
       "aria-pressed": props.pressed != null ? props.pressed : props["aria-pressed"],
       "data-aura-tip": own ? void 0 : props.label,
+      onClick: blocked ? function(e) {
+        e.preventDefault();
+      } : props.onClick,
       className: cx(
         "aura-icon-btn",
         props.tone === "danger" && "aura-icon-btn--danger",

package/dist/esm/Pagination.js

@@ -25,9 +25,56 @@ function pageList(page, count, sib) {
   if (count > 1) out.push(count);
   return out;
 }
-const Pagination = React.forwardRef(function Pagination2(props, ref) {
+function cursorNav(props, ref, Link, t) {
+  const links = props.firstHref != null || props.previousHref != null || props.nextHref != null;
+  function step(key, href, on, has, label, rel, icon, after) {
+    const body = /* @__PURE__ */ React.createElement(React.Fragment, null, icon && !after ? /* @__PURE__ */ React.createElement(Icon, { name: icon, size: "sm" }) : null, /* @__PURE__ */ React.createElement("span", null, label), icon && after ? /* @__PURE__ */ React.createElement(Icon, { name: icon, size: "sm" }) : null);
+    const cls = "aura-page aura-page--step";
+    if (has === false || !href && !on)
+      return links ? /* @__PURE__ */ React.createElement("span", { key, className: cls, role: "link", "aria-disabled": true }, body) : /* @__PURE__ */ React.createElement("button", { key, type: "button", className: cls, disabled: true }, body);
+    if (href != null)
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          key,
+          href,
+          rel,
+          className: cls,
+          onClick: function(e) {
+            if (on && plainClick(e)) {
+              e.preventDefault();
+              on();
+            }
+          }
+        },
+        body
+      );
+    return /* @__PURE__ */ React.createElement("button", { key, type: "button", className: cls, onClick: on }, body);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      className: cx("aura-pagination", "aura-pagination--cursor", props.className),
+      "aria-label": props.label || t.pagination
+    },
+    props.status != null && props.status !== false && props.status !== "" ? /* @__PURE__ */ React.createElement("span", { className: "aura-pagination__status" }, props.status) : null,
+    /* @__PURE__ */ React.createElement("span", { className: "aura-pagination__steps" }, props.showFirst === false ? null : step("first", props.firstHref, props.onFirst, props.hasFirst, t.firstPage, void 0, null, false), step(
+      "prev",
+      props.previousHref,
+      props.onPrevious,
+      props.hasPrevious,
+      t.prevPage,
+      "prev",
+      /* @__PURE__ */ React.createElement(IconChevronLeft, null),
+      false
+    ), step("next", props.nextHref, props.onNext, props.hasNext, t.nextPage, "next", /* @__PURE__ */ React.createElement(IconChevronRight, null), true))
+  );
+}
+const Pagination = React.forwardRef(function Pagination2(all, ref) {
   const t = useStrings();
   useAutoTip();
+  const props = all;
   const count = Math.max(1, props.pageCount || 1);
   const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
   const page = Math.min(count, Math.max(1, st[0]));
@@ -36,6 +83,7 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
   }
   const link = props.getHref;
   const Link = useLinkComponent(props.linkComponent);
+  if (all.mode === "cursor") return cursorNav(all, ref, Link, t);
   function item(p, label, extra) {
     const common = Object.assign(
       {

package/dist/esm/Spinner.js

@@ -0,0 +1,9 @@
+'use client';
+import * as React from "react";
+import { spinnerElement } from "./display.js";
+const Spinner = React.forwardRef(function Spinner2(props, ref) {
+  return spinnerElement(props, ref);
+});
+export {
+  Spinner
+};

package/dist/esm/Table.js

@@ -1,7 +1,9 @@
 'use client';
 import * as React from "react";
 import { cx, devWarnOnce, uid, useIsoLayoutEffect } from "./internal.js";
-import { useDensity } from "./locale.js";
+import { useDensity, useLinkComponent } from "./locale.js";
+import { Icon } from "./Icon.js";
+import { IconArrowDown, IconArrowUp, IconArrowUpDown } from "./icons.js";
 import { inertProps, skeletonBody, skeletonColgroup } from "./TableSkeleton.js";
 const StackLabels = React.createContext(null);
 const ColumnIndex = React.createContext(-1);
@@ -242,8 +244,39 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, wrap, ...rest } = props;
+  const {
+    align,
+    numeric,
+    mono,
+    className,
+    scope,
+    label,
+    card,
+    skeleton,
+    skeletonWidth,
+    wrap,
+    sort,
+    onSort,
+    sortHref,
+    linkComponent,
+    ...rest
+  } = props;
   const stacked = React.useContext(StackLabels) != null;
+  const Link = useLinkComponent(linkComponent);
+  const sortable = !!onSort || sortHref != null;
+  const ariaSort = sort || (sortable ? "none" : void 0);
+  let children = props.children;
+  if (sortable) {
+    const icon = /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: sort === "ascending" ? /* @__PURE__ */ React.createElement(IconArrowUp, null) : sort === "descending" ? /* @__PURE__ */ React.createElement(IconArrowDown, null) : /* @__PURE__ */ React.createElement(IconArrowUpDown, null),
+        size: 12
+      }
+    );
+    const cls = cx("aura-table__sort", sort && sort !== "none" && "is-active");
+    children = sortHref != null ? /* @__PURE__ */ React.createElement(Link, { href: sortHref, className: cls }, props.children, icon) : /* @__PURE__ */ React.createElement("button", { type: "button", className: cls, onClick: onSort }, props.children, icon);
+  }
   return /* @__PURE__ */ React.createElement(
     "th",
     {
@@ -252,8 +285,10 @@ const Th = React.forwardRef(function Th2(props, ref) {
       className: cellClass("aura-tbl__th", props),
       role: stacked ? scope === "row" ? "rowheader" : "columnheader" : void 0,
       "data-card": stacked && (card === "title" || card === "action") ? card : void 0,
+      "aria-sort": ariaSort,
       ...rest
-    }
+    },
+    children
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {

package/dist/esm/display.js

@@ -11,6 +11,7 @@ import {
   IconCircleDotDashed,
   IconInbox,
   IconInfo,
+  IconLoaderCircle,
   IconMinus,
   IconTrendingDown,
   IconTrendingUp,
@@ -101,7 +102,7 @@ const PILL_ICON = {
 };
 function statusPillElement(props, ref) {
   const tone = props.tone || toneFor(props.children);
-  const rest = omit(props, ["tone", "className", "children", "wrap"]);
+  const rest = omit(props, ["tone", "className", "children", "wrap", "busy"]);
   return /* @__PURE__ */ React.createElement(
     "span",
     {
@@ -109,10 +110,26 @@ function statusPillElement(props, ref) {
       ref,
       className: cx("aura-pill", "aura-pill--" + tone, props.wrap && "is-wrap", props.className)
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }),
+    props.busy ? /* @__PURE__ */ React.createElement(Icon, { name: h(IconLoaderCircle), size: 12, className: "aura-spin" }) : /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }),
     props.wrap ? /* @__PURE__ */ React.createElement("span", { className: "aura-pill__text" }, props.children) : props.children
   );
 }
+function spinnerElement(props, ref) {
+  const rest = omit(props, ["size", "label", "className"]);
+  const label = props.label;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx("aura-spinner", "aura-spinner--" + (props.size || "md"), props.className),
+      role: label ? "status" : void 0,
+      "aria-hidden": label ? void 0 : true
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: h(IconLoaderCircle), size: props.size || "md", className: "aura-spin" }),
+    label ? /* @__PURE__ */ React.createElement("span", { className: "aura-sr-only" }, label) : null
+  );
+}
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
   return /* @__PURE__ */ React.createElement(
@@ -273,6 +290,9 @@ function ServerCard(props) {
 function ServerStatusPill(props) {
   return statusPillElement(props, void 0);
 }
+function ServerSpinner(props) {
+  return spinnerElement(props, void 0);
+}
 function ServerBadge(props) {
   return badgeElement(props, void 0);
 }
@@ -292,6 +312,7 @@ export {
   ServerBadge,
   ServerCard,
   ServerEmptyState,
+  ServerSpinner,
   ServerStat,
   ServerStatusPill,
   alertElement,
@@ -301,6 +322,7 @@ export {
   cardElement,
   emptyStateElement,
   linkClass,
+  spinnerElement,
   statElement,
   statusPillElement
 };

package/dist/esm/index.js

@@ -60,6 +60,7 @@ import { Progress } from "./Progress.js";
 import { Skeleton } from "./Skeleton.js";
 import { EmptyState } from "./EmptyState.js";
 import { Pagination } from "./Pagination.js";
+import { Spinner } from "./Spinner.js";
 import { Accordion } from "./Accordion.js";
 import { Popover } from "./Popover.js";
 import { NumberField } from "./NumberField.js";
@@ -117,6 +118,7 @@ export {
   SideNav,
   Skeleton,
   Sparkline,
+  Spinner,
   Stack,
   Stat,
   StatusPill,

package/dist/esm/strings.js

@@ -134,6 +134,7 @@ const STRINGS = {
     statusUnknown: "No data",
     opensInNewTab: "opens in a new tab",
     required: "required",
+    firstPage: "First page",
     filtersApplied: function(n2) {
       return "Filters, " + n2.toLocaleString("en") + " applied";
     },

package/dist/esm/strings.sv.js

@@ -130,6 +130,7 @@ const sv = {
   statusUnknown: "Ingen data",
   opensInNewTab: "\xF6ppnas i en ny flik",
   required: "obligatoriskt",
+  firstPage: "F\xF6rsta sidan",
   filtersApplied: function(n) {
     return "Filter, " + n.toLocaleString("sv-SE") + " aktiva";
   },

package/dist/esm/strings.th.js

@@ -130,6 +130,7 @@ const th = {
   statusUnknown: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25",
   opensInNewTab: "\u0E40\u0E1B\u0E34\u0E14\u0E43\u0E19\u0E41\u0E17\u0E47\u0E1A\u0E43\u0E2B\u0E21\u0E48",
   required: "\u0E08\u0E33\u0E40\u0E1B\u0E47\u0E19",
+  firstPage: "\u0E2B\u0E19\u0E49\u0E32\u0E41\u0E23\u0E01",
   filtersApplied: function(n2) {
     return "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07, \u0E43\u0E0A\u0E49\u0E2D\u0E22\u0E39\u0E48 " + n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
   },

package/dist/index.d.cts

@@ -332,10 +332,24 @@ export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanEle
 	/** 5.51 (Chamber-OS 158): in a box narrower than the words, the text wraps inside the pill (still rounded, the icon
 	 * on the first line) instead of running out of it. Without it a pill stays on one line. */
 	wrap?: boolean | undefined;
+	/** 5.70 (Chamber-OS 189): the spinner in the icon slot, for a state still in progress ("Waiting for payment").
+	 * The words still say it; the tone is unchanged. */
+	busy?: boolean | undefined;
 	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 189): Button's loading spinner on its own, for "working" outside a button. */
+export interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** `sm` 16px (Button's spinner) · `md` 20px (default) · `lg` 24px — the icon sizes. It takes the text colour. */
+	size?: "sm" | "md" | "lg" | undefined;
+	/** Without it the spinner is `aria-hidden`: the text beside it, or your live region, says what is happening. With it
+	 * the spinner is `role="status"` with this text (visually hidden), for a spinner standing alone: it names it for
+	 * browse mode, but a status inserted with its text already in it is often not announced — to announce the change,
+	 * keep a live region on the page and put the words in it. */
+	label?: string | undefined;
+	className?: string | undefined;
+}
 /** 16px checkbox with 4px corners; ink when checked, a dash when indeterminate. */
 export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "checked" | "defaultChecked"> {
 	/** Controlled state; pair with onChange. Or use defaultChecked. */
@@ -1497,6 +1511,16 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	/** Th in the head only (5.52): this column's width while loading — a share such as `'22%'` — when the loaded table
 	 * sizes it from its content. Default: the cell's `width`, else an even share. */
 	skeletonWidth?: string | number | undefined;
+	/** Th only (5.70, Chamber-OS 188): this column's order — `aria-sort` on the header. With `onSort` or `sortHref` the
+	 * label becomes a button or link holding AURA's sort icon (up, down, or both ways for `none`), as DataTable's
+	 * sortable header; alone, it only says the order. */
+	sort?: "ascending" | "descending" | "none" | undefined;
+	/** Th only (5.70): the header becomes a button that calls this — flip the order yourself. */
+	onSort?: (() => void) | undefined;
+	/** Th only (5.70): the header becomes a link (through `linkComponent`) to this, for a server-sorted page. */
+	sortHref?: string | undefined;
+	/** Th only (5.70): your router's link for `sortHref`; defaults to AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -1668,6 +1692,22 @@ export interface FileUploadProps extends FieldProps {
 	name?: string | undefined;
 	disabled?: boolean | undefined;
 	className?: string | undefined;
+	/** 5.70 (Chamber-OS 190): `dropzone` (default) is the drop area with its file list. `button` is a Button that opens
+	 * the picker, for a file the app sends itself (a logo, a certificate): it checks `accept` and `maxSize` with the same
+	 * messages, calls `onSelect` with the accepted files and keeps no list (`value` / `onChange` are not used). The
+	 * label, hint and error are Field's, as before; the Button is named by the label and its own text. */
+	variant?: "dropzone" | "button" | undefined;
+	/** `variant="button"`: the accepted files of a pick (none is passed when every file was refused; the error shows).
+	 * With a `name` the input posts only the accepted files, and `required` is checked by the browser on submit. The
+	 * forwarded ref is the input, but its `focus()` moves to the Button. */
+	onSelect?: ((files: File[]) => void) | undefined;
+	/** `variant="button"`: the Button's text. Default "Choose a file" ("Choose files" with `multiple`). */
+	buttonLabel?: React$1.ReactNode | undefined;
+	/** `variant="button"`: an upload in progress under the Button — 0–100, or `null` for indeterminate; leave it out
+	 * when nothing is uploading. */
+	progress?: number | null | undefined;
+	/** `variant="button"`: Button's `touchHeight` (44px below 640px or on a coarse pointer). */
+	touchHeight?: boolean | undefined;
 }
 export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
 export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
@@ -1749,7 +1789,37 @@ export interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElem
 	headingLevel?: 2 | 3 | 4 | 5 | 6 | false | undefined;
 	className?: string | undefined;
 }
+/** 5.70 (Chamber-OS 187): keyset / cursor lists — no page count, only whether there is a first, previous and next
+ * page. Pass an href (rendered through `linkComponent`) or a callback for each end; one with neither, or with its
+ * `has…` false, is shown disabled (out of the tab order). */
+export interface CursorPaginationProps {
+	mode: "cursor";
+	firstHref?: string | undefined;
+	previousHref?: string | undefined;
+	nextHref?: string | undefined;
+	/** Run instead of following the href on a plain click, or as a button's action without one. */
+	onFirst?: (() => void) | undefined;
+	onPrevious?: (() => void) | undefined;
+	onNext?: (() => void) | undefined;
+	/** `false` disables that end even with an href or callback (default: enabled when it has one). */
+	hasFirst?: boolean | undefined;
+	hasPrevious?: boolean | undefined;
+	hasNext?: boolean | undefined;
+	/** Default true. `false` leaves the First link out (a list that only goes forward). */
+	showFirst?: boolean | undefined;
+	/** A line at the start, e.g. "Showing 50 of 1,240". Not a live region. */
+	status?: React$1.ReactNode | undefined;
+	/** Name of the nav. Default "Pagination". */
+	label?: string | undefined;
+	linkComponent?: React$1.ElementType | undefined;
+	className?: string | undefined;
+}
+/** Either kind of Pagination's props (5.70). `PaginationProps` stays the numbered one, so wrappers that extend or
+ * pick from it keep compiling. */
+export type AnyPaginationProps = PaginationProps | CursorPaginationProps;
 export interface PaginationProps {
+	/** `pages` (default): numbered pages. `cursor` (5.70): see CursorPaginationProps. */
+	mode?: "pages" | undefined;
 	pageCount: number;
 	/** 1-based, controlled; pair with onChange. Or defaultPage. */
 	page?: number | undefined;
@@ -2287,6 +2357,8 @@ export interface AuraStrings {
 	opensInNewTab: string;
 	/** 5.67: read after a CheckboxGroup's legend when `required` (its `*` is hidden from screen readers). */
 	required: string;
+	/** 5.70: a cursor Pagination's link back to the start. */
+	firstPage: string;
 	/** 5.42: FilterBar's collapsed-filters button, read with its count ("Filters, 2 applied"). */
 	filtersApplied: (n: number) => string;
 	/** 5.42: closes FilterBar's "Filters" sheet. */
@@ -2412,7 +2484,8 @@ export declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.R
 export declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
-export declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLElement>>;
+export declare const Pagination: React$1.ForwardRefExoticComponent<AnyPaginationProps & React$1.RefAttributes<HTMLElement>>;
+export declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Number input with thousands separators, +/− buttons and arrow keys (ARIA spinbutton). */