@tedi-design-system/react 18.0.0-rc.9 → 18.0.0

package/src/tedi/components/navigation/pagination/pagination.es.js

@@ -1,173 +1,279 @@
-import { jsxs as y, jsx as i } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { forwardRef as W, useMemo as d, useState as X, useCallback as S, useId as Y } from "react";
-import { Icon as Z } from "../../base/icon/icon.es.js";
-import { Text as P } from "../../base/typography/text/text.es.js";
-import { Button as w } from "../../buttons/button/button.es.js";
-import { Select as k } from "../../form/select/select.es.js";
+import { jsxs as c, jsx as i, Fragment as re } from "react/jsx-runtime";
+import x from "../../../../../external/classnames/index.es.js";
+import { forwardRef as Be, useMemo as f, useState as I, useEffect as E, useCallback as le, useId as Te, useRef as A } from "react";
+import { Icon as V } from "../../base/icon/icon.es.js";
+import { Text as se } from "../../base/typography/text/text.es.js";
+import { Button as H } from "../../buttons/button/button.es.js";
+import { Select as Ie } from "../../form/select/select.es.js";
 import a from "./pagination.module.scss.es.js";
-import { usePagination as ee } from "./use-pagination.es.js";
-import { useBreakpoint as ae, isBreakpointBelow as ie } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { useLabels as te } from "../../../providers/label-provider/use-labels.es.js";
-const ne = W((I, $) => {
+import { PaginationMobileModal as oe } from "./pagination-mobile-modal/pagination-mobile-modal.es.js";
+import { usePagination as Ee } from "./use-pagination.es.js";
+import { useBreakpointProps as Ve } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as He } from "../../../providers/label-provider/use-labels.es.js";
+import je, { isBreakpointBelow as Ke } from "../../../helpers/hooks/use-breakpoint.es.js";
+const de = ["xs", "sm", "md", "lg", "xl", "xxl"], j = (p, N) => p === void 0 || p === !1 ? !1 : p === !0 ? !0 : N ? de.indexOf(N) < de.indexOf(p) : !1, De = Be((p, N) => {
+  var ae;
   const {
-    pageCount: n,
-    page: f,
-    defaultPage: j = 1,
-    onPageChange: g,
-    totalItems: z,
-    pageSize: v,
-    pageSizeOptions: p,
+    pageCount: r,
+    page: _,
+    defaultPage: pe = 1,
+    onPageChange: z,
+    totalItems: K,
+    pageSize: g,
+    pageSizeOptions: h,
     onPageSizeChange: u,
-    boundaryCount: O = 1,
-    siblingCount: x = 1,
-    labels: A,
-    className: B
-  } = I, { getLabel: l } = te(), s = d(
+    labels: D,
+    hideResults: ce = !1,
+    hidePageSize: ge = !1,
+    hidePager: ue = !1,
+    className: be
+  } = p, { getCurrentBreakpointProps: me } = Ve(p.defaultServerBreakpoint), {
+    boundaryCount: fe = 1,
+    siblingCount: _e = 1,
+    background: F = "white",
+    borders: he = "top",
+    showPrevNextButtons: U = !1,
+    showEdgeNavLabels: M = !1,
+    previousIcon: ve = "arrow_back",
+    nextIcon: Se = "arrow_forward",
+    arrowVariant: Ne = "default"
+  } = me(p), { getLabel: s } = He(), y = je(), v = Ke(y, "md"), t = f(
     () => ({
-      ariaLabel: l("pagination.title"),
-      previous: l("pagination.prev-page"),
-      next: l("pagination.next-page"),
-      pageAriaLabel: (e) => l("pagination.page", e, !1),
-      currentPageAriaLabel: (e) => l("pagination.page", e, !0),
-      results: (e) => l("pagination.results", e),
-      pageSize: l("pagination.page-size"),
-      pageStatus: (e, t) => l("pagination.page-status", e, t),
-      ...A
+      ariaLabel: s("pagination.title"),
+      previous: s("pagination.prev-page"),
+      next: s("pagination.next-page"),
+      pageAriaLabel: (e) => s("pagination.page", e, !1),
+      currentPageAriaLabel: (e) => s("pagination.page", e, !0),
+      results: (e) => s("pagination.results", e),
+      pageSize: s("pagination.page-size"),
+      pageStatus: (e, n) => s("pagination.page-status", e, n),
+      ...D
     }),
-    [l, A]
-  ), [J, M] = X(j), o = f ?? J, m = ee({ page: o, pageCount: n, boundaryCount: O, siblingCount: x }), b = S(
+    [s, D]
+  ), [L, R] = I(pe), ze = _ ?? L, o = r > 0 ? Math.max(1, Math.min(r, ze)) : 1;
+  E(() => {
+    _ === void 0 && (r > 0 && L > r ? R(r) : L < 1 && R(1));
+  }, [_, r, L]);
+  const P = Ee({ page: o, pageCount: r, boundaryCount: fe, siblingCount: _e }), O = le(
     (e) => {
-      e === o || e < 1 || e > n || (f === void 0 && M(e), g == null || g(e));
+      e !== null && (e === o || e < 1 || e > r || (_ === void 0 && R(e), z == null || z(e)));
     },
-    [o, g, f, n]
-  ), C = Y(), _ = d(
-    () => Array.isArray(p) ? p.map((e) => ({
-      value: String(e),
-      label: String(e)
-    })) : [],
-    [p]
-  ), R = d(() => v === void 0 ? _[0] ?? null : _.find((e) => e.value === String(v)) ?? null, [v, _]), K = S(
+    [o, z, _, r]
+  ), ye = Te(), S = f(
+    () => Array.isArray(h) ? h.map(
+      (e) => typeof e == "number" ? { value: e, label: String(e) } : e
+    ) : [],
+    [h]
+  ), w = f(
+    () => S.map((e) => ({ value: String(e.value), label: e.label })),
+    [S]
+  ), $ = f(() => g === void 0 ? w[0] ?? null : w.find((e) => e.value === String(g)) ?? null, [g, w]), Le = le(
     (e) => {
-      const t = Array.isArray(e) ? e[0] : e;
-      t && "value" in t && (u == null || u(Number(t.value)));
+      const n = Array.isArray(e) ? e[0] : e;
+      n && "value" in n && (u == null || u(Number(n.value)));
     },
     [u]
-  ), T = h(a["tedi-pagination"], B), U = ae(), N = ie(U, "md"), q = z !== void 0, D = !N && Array.isArray(p) && p.length > 0, E = m[0], F = m[m.length - 1], G = m.slice(1, -1), L = (e) => {
-    const t = e.type === "previous" ? s.previous : s.next, r = e.type === "previous" ? "arrow_back" : "arrow_forward";
+  ), Pe = $ ? Number($.value) : g ?? 0, q = ((ae = S.find((e) => e.value === g)) == null ? void 0 : ae.label) ?? (g !== void 0 ? String(g) : ""), Oe = f(
+    () => Array.from({ length: r }, (e, n) => {
+      const l = n + 1;
+      return {
+        value: l,
+        label: String(l),
+        ariaLabel: l === o ? t.currentPageAriaLabel(l) : t.pageAriaLabel(l)
+      };
+    }),
+    [r, o, t]
+  ), we = f(
+    () => S.map((e) => ({
+      value: e.value,
+      label: e.label,
+      ariaLabel: `${t.pageSize} ${e.label}`
+    })),
+    [S, t]
+  ), ke = j(ce, y), Ce = j(ge, y), xe = j(ue, y), G = !ke && K !== void 0, B = !Ce && Array.isArray(h) && h.length > 0, T = !xe && r > 1, Ae = x(
+    a["tedi-pagination"],
+    a[`tedi-pagination--bg-${F}`],
+    F !== "transparent" && a[`tedi-pagination--borders-${he}`],
+    {
+      [a["tedi-pagination--no-pager"]]: !T,
+      [a["tedi-pagination--no-results"]]: !G,
+      [a["tedi-pagination--no-page-size"]]: !B
+    },
+    be
+  ), [b, J] = I(!1), Q = A(null), W = A(b);
+  E(() => {
+    var e;
+    W.current && !b && ((e = Q.current) == null || e.focus()), W.current = b;
+  }, [b]);
+  const [m, X] = I(!1), Y = A(null), Z = A(m);
+  E(() => {
+    var e;
+    Z.current && !m && ((e = Y.current) == null || e.focus()), Z.current = m;
+  }, [m]);
+  const Me = r > 1 ? t.pageStatus(o, r) : "", Re = `${`${o} / ${r}`}, ${t.ariaLabel}`, k = P[0], C = P[P.length - 1], $e = P.slice(1, -1), ee = (e, n, l, d) => {
+    const ie = a[`tedi-pagination__button--nav-${e}`];
+    if (Ne === "primary")
+      return /* @__PURE__ */ i(
+        H,
+        {
+          type: "button",
+          visualType: "primary",
+          size: "small",
+          iconLeft: e === "previous" ? l : void 0,
+          iconRight: e === "next" ? l : void 0,
+          className: ie,
+          disabled: n == null ? void 0 : n.disabled,
+          onClick: () => O((n == null ? void 0 : n.page) ?? null),
+          children: d
+        }
+      );
+    const ne = /* @__PURE__ */ i(V, { name: l, size: 18, color: "inherit" }), te = /* @__PURE__ */ i("span", { className: a["tedi-pagination__nav-label"], children: d });
     return /* @__PURE__ */ i(
-      w,
+      H,
       {
-        type: "button",
-        className: h(
-          a["tedi-pagination__button"],
-          a["tedi-pagination__button--nav"],
-          a[`tedi-pagination__button--nav-${e.type}`]
-        ),
-        "aria-label": t,
-        disabled: e.disabled,
-        onClick: () => e.page !== null && b(e.page),
-        noStyle: !0,
-        children: /* @__PURE__ */ i(Z, { name: r, size: 18, color: "brand" })
+        className: x(a["tedi-pagination__button"], a["tedi-pagination__button--nav"], ie, {
+          [a["tedi-pagination__button--nav-link"]]: M
+        }),
+        "aria-label": d,
+        disabled: n == null ? void 0 : n.disabled,
+        onClick: () => O((n == null ? void 0 : n.page) ?? null),
+        visualType: "neutral",
+        size: "small",
+        icon: M ? void 0 : l,
+        children: M && (e === "previous" ? /* @__PURE__ */ c(re, { children: [
+          ne,
+          te
+        ] }) : /* @__PURE__ */ c(re, { children: [
+          te,
+          ne
+        ] }))
       }
     );
-  }, H = d(
-    () => Array.from({ length: n }, (e, t) => {
-      const r = t + 1;
-      return { value: String(r), label: String(r) };
-    }),
-    [n]
-  ), Q = d(
-    () => ({ value: String(o), label: `${o} / ${n}` }),
-    [o, n]
-  ), V = S(
-    (e) => {
-      const t = Array.isArray(e) ? e[0] : e;
-      t && "value" in t && b(Number(t.value));
-    },
-    [b]
-  );
-  return /* @__PURE__ */ y("div", { ref: $, className: T, "data-name": "tedi-pagination", children: [
-    /* @__PURE__ */ i("span", { className: "visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: n > 1 ? s.pageStatus(o, n) : "" }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], role: "status", "aria-live": "polite", "aria-atomic": "true", children: q && /* @__PURE__ */ i(P, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: s.results(z) }) }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: n > 1 && /* @__PURE__ */ y("nav", { "aria-label": s.ariaLabel, className: a["tedi-pagination__nav"], children: [
-      L(E),
-      !N && /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: G.map((e, t) => {
-        const r = `slot-${t}`;
+  };
+  return /* @__PURE__ */ c("div", { ref: N, className: Ae, "data-name": "tedi-pagination", children: [
+    /* @__PURE__ */ i("span", { className: a["tedi-pagination__status"], role: "status", "aria-live": "polite", "aria-atomic": "true", children: Me }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], children: G && /* @__PURE__ */ i(se, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: t.results(K) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: T && /* @__PURE__ */ c("nav", { "aria-label": t.ariaLabel, className: a["tedi-pagination__nav"], children: [
+      !U && (k != null && k.disabled) ? null : ee("previous", k, ve, t.previous),
+      !v && /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: $e.map((e, n) => {
+        const l = `slot-${n}`;
         if (e.type === "ellipsis")
           return /* @__PURE__ */ i(
             "li",
             {
-              className: h(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
+              className: x(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
               "aria-hidden": "true",
               children: "…"
             },
-            r
+            l
           );
-        const c = e.page;
+        const d = e.page;
         return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
-          w,
+          H,
           {
             type: "button",
-            className: h(a["tedi-pagination__button"], {
+            className: x(a["tedi-pagination__button"], {
               [a["tedi-pagination__button--selected"]]: e.selected
             }),
-            "aria-label": e.selected ? s.currentPageAriaLabel(c) : s.pageAriaLabel(c),
+            "aria-label": e.selected ? t.currentPageAriaLabel(d) : t.pageAriaLabel(d),
             "aria-current": e.selected ? "page" : void 0,
-            onClick: () => b(c),
+            onClick: () => O(d),
             noStyle: !0,
-            children: /* @__PURE__ */ i("span", { className: a["tedi-pagination__button-label"], children: c }, c)
+            children: /* @__PURE__ */ i("span", { className: a["tedi-pagination__button-label"], children: d }, d)
           }
-        ) }, r);
+        ) }, l);
       }) }),
-      N && /* @__PURE__ */ i("div", { className: a["tedi-pagination__page-jump"], children: /* @__PURE__ */ i(
-        k,
+      v && /* @__PURE__ */ c(
+        "button",
         {
-          id: `tedi-pagination-jump-${C}`,
-          className: a["tedi-pagination__page-jump-select"],
-          label: s.ariaLabel,
-          hideLabel: !0,
-          size: "small",
-          options: H,
-          value: Q,
-          onChange: V,
-          isSearchable: !1,
-          isClearable: !1
+          ref: Q,
+          type: "button",
+          className: a["tedi-pagination__mobile-trigger"],
+          "aria-haspopup": "dialog",
+          "aria-expanded": b,
+          "aria-label": Re,
+          onClick: () => J(!0),
+          children: [
+            /* @__PURE__ */ c("span", { className: a["tedi-pagination__mobile-trigger-label"], "aria-hidden": "true", children: [
+              /* @__PURE__ */ i("strong", { children: o }),
+              /* @__PURE__ */ i("span", { children: "/" }),
+              /* @__PURE__ */ i("span", { children: r })
+            ] }),
+            /* @__PURE__ */ i(V, { name: "arrow_drop_down", size: 24, color: "inherit" })
+          ]
         }
-      ) }),
-      L(F)
+      ),
+      !U && (C != null && C.disabled) ? null : ee("next", C, Se, t.next)
     ] }) }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: D && /* @__PURE__ */ y("div", { className: a["tedi-pagination__page-size"], children: [
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: B && /* @__PURE__ */ c("div", { className: a["tedi-pagination__page-size"], children: [
       /* @__PURE__ */ i(
-        P,
+        se,
         {
           className: a["tedi-pagination__page-size-label"],
           color: "secondary",
           modifiers: "small",
           element: "span",
-          children: s.pageSize
+          children: t.pageSize
         }
       ),
-      /* @__PURE__ */ i(
-        k,
+      v ? /* @__PURE__ */ c(
+        "button",
+        {
+          ref: Y,
+          type: "button",
+          className: a["tedi-pagination__mobile-trigger"],
+          "aria-haspopup": "dialog",
+          "aria-expanded": m,
+          "aria-label": `${t.pageSize} ${q}`,
+          onClick: () => X(!0),
+          children: [
+            /* @__PURE__ */ i("span", { className: a["tedi-pagination__mobile-trigger-label"], "aria-hidden": "true", children: q }),
+            /* @__PURE__ */ i(V, { name: "arrow_drop_down", size: 24, color: "inherit" })
+          ]
+        }
+      ) : /* @__PURE__ */ i(
+        Ie,
         {
-          id: `tedi-pagination-page-size-${C}`,
+          id: `tedi-pagination-page-size-${ye}`,
           className: a["tedi-pagination__select"],
-          label: s.pageSize,
+          label: t.pageSize,
           hideLabel: !0,
           size: "small",
-          options: _,
-          value: R,
-          onChange: K,
+          options: w,
+          value: $,
+          onChange: Le,
           isSearchable: !1,
           isClearable: !1
         }
       )
-    ] }) })
+    ] }) }),
+    v && T && /* @__PURE__ */ i(
+      oe,
+      {
+        open: b,
+        onOpenChange: J,
+        options: Oe,
+        selectedValue: o,
+        onSelect: O,
+        ariaLabel: t.ariaLabel,
+        ariaCurrent: "page"
+      }
+    ),
+    v && B && /* @__PURE__ */ i(
+      oe,
+      {
+        open: m,
+        onOpenChange: X,
+        options: we,
+        selectedValue: Pe,
+        onSelect: (e) => u == null ? void 0 : u(e),
+        ariaLabel: t.pageSize,
+        title: t.pageSize
+      }
+    )
   ] });
 });
-ne.displayName = "Pagination";
+De.displayName = "Pagination";
 export {
-  ne as Pagination,
-  ne as default
+  De as Pagination
 };

package/src/tedi/components/navigation/pagination/pagination.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__page-jump":"tedi-pagination__page-jump-db0a15d9","tedi-pagination__page-jump-select":"tedi-pagination__page-jump-select-29430dd4","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__button--nav-previous":"tedi-pagination__button--nav-previous-1e74ca69","tedi-pagination__button--nav-next":"tedi-pagination__button--nav-next-80e53bed","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e","tedi-pagination__button-label":"tedi-pagination__button-label-e70ad8bf","tedi-pagination-label-in":"tedi-pagination-label-in-d1e2074e"};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination--no-pager":"tedi-pagination--no-pager-d61e7fcb","tedi-pagination--bg-white":"tedi-pagination--bg-white-44075d0a","tedi-pagination--borders-top":"tedi-pagination--borders-top-5855a53b","tedi-pagination--borders-bottom":"tedi-pagination--borders-bottom-ea0efc4e","tedi-pagination--borders-both":"tedi-pagination--borders-both-720d1b66","tedi-pagination--bg-transparent":"tedi-pagination--bg-transparent-f7d24de5","tedi-pagination--no-results":"tedi-pagination--no-results-c803e6d7","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination--no-page-size":"tedi-pagination--no-page-size-899b0ae0","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__status":"tedi-pagination__status-c9307f8c","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__button--nav-link":"tedi-pagination__button--nav-link-878004e1","tedi-pagination__nav-label":"tedi-pagination__nav-label-6ab0736b","tedi-pagination__button--nav-previous":"tedi-pagination__button--nav-previous-1e74ca69","tedi-pagination__button--nav-next":"tedi-pagination__button--nav-next-80e53bed","tedi-pagination__mobile-trigger":"tedi-pagination__mobile-trigger-bb1271ab","tedi-pagination__mobile-trigger-label":"tedi-pagination__mobile-trigger-label-0b2aaebb","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e","tedi-pagination__button-label":"tedi-pagination__button-label-e70ad8bf","tedi-pagination-label-in":"tedi-pagination-label-in-d1e2074e"};exports.default=i;

package/src/tedi/components/navigation/pagination/pagination.module.scss.es.js

@@ -1,20 +1,31 @@
 const i = {
   "tedi-pagination": "tedi-pagination-96c6fc62",
+  "tedi-pagination--no-pager": "tedi-pagination--no-pager-d61e7fcb",
+  "tedi-pagination--bg-white": "tedi-pagination--bg-white-44075d0a",
+  "tedi-pagination--borders-top": "tedi-pagination--borders-top-5855a53b",
+  "tedi-pagination--borders-bottom": "tedi-pagination--borders-bottom-ea0efc4e",
+  "tedi-pagination--borders-both": "tedi-pagination--borders-both-720d1b66",
+  "tedi-pagination--bg-transparent": "tedi-pagination--bg-transparent-f7d24de5",
+  "tedi-pagination--no-results": "tedi-pagination--no-results-c803e6d7",
   "tedi-pagination__slot-start": "tedi-pagination__slot-start-846e7900",
   "tedi-pagination__slot-center": "tedi-pagination__slot-center-e489623b",
+  "tedi-pagination--no-page-size": "tedi-pagination--no-page-size-899b0ae0",
   "tedi-pagination__slot-end": "tedi-pagination__slot-end-3f4f5848",
+  "tedi-pagination__status": "tedi-pagination__status-c9307f8c",
   "tedi-pagination__results": "tedi-pagination__results-29d9108c",
   "tedi-pagination__nav": "tedi-pagination__nav-5f414114",
   "tedi-pagination__list": "tedi-pagination__list-03467ce1",
-  "tedi-pagination__page-jump": "tedi-pagination__page-jump-db0a15d9",
-  "tedi-pagination__page-jump-select": "tedi-pagination__page-jump-select-29430dd4",
   "tedi-pagination__item": "tedi-pagination__item-46985c58",
   "tedi-pagination__item--ellipsis": "tedi-pagination__item--ellipsis-85f798f5",
   "tedi-pagination__button": "tedi-pagination__button-d06c27d4",
   "tedi-pagination__button--selected": "tedi-pagination__button--selected-cb151c7f",
   "tedi-pagination__button--nav": "tedi-pagination__button--nav-2f74eea2",
+  "tedi-pagination__button--nav-link": "tedi-pagination__button--nav-link-878004e1",
+  "tedi-pagination__nav-label": "tedi-pagination__nav-label-6ab0736b",
   "tedi-pagination__button--nav-previous": "tedi-pagination__button--nav-previous-1e74ca69",
   "tedi-pagination__button--nav-next": "tedi-pagination__button--nav-next-80e53bed",
+  "tedi-pagination__mobile-trigger": "tedi-pagination__mobile-trigger-bb1271ab",
+  "tedi-pagination__mobile-trigger-label": "tedi-pagination__mobile-trigger-label-0b2aaebb",
   "tedi-pagination__page-size": "tedi-pagination__page-size-d1fa6f9d",
   "tedi-pagination__page-size-label": "tedi-pagination__page-size-label-3dc2d141",
   "tedi-pagination__select": "tedi-pagination__select-435e167e",

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),M=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),C=require("../../../../base/typography/text/text.cjs.js"),T=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),u=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),L=require("../table-of-contents-list/table-of-contents-list.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=require("../../../../overlays/modal/modal.cjs.js"),g=j=>{const{children:f,heading:b,activeId:o,showIcons:x=!1,numbered:h=!1,sticky:_=!0,className:O}=j,{getLabel:s}=y.useLabels(),[l,a]=n.useState(!1),m=n.useRef(null);n.useEffect(()=>{const d=m.current;if(!l||!d)return;const v=N=>{N.target.closest("a, button")&&a(!1)};return d.addEventListener("click",v),()=>d.removeEventListener("click",v)},[l]);const c=n.useMemo(()=>u.childrenToNodes(f),[f]),p=n.useMemo(()=>u.buildActiveTrail(c,o),[c,o]),q=n.useMemo(()=>({activeId:o,showIcons:x,numbered:h,activeTrail:p}),[o,x,h,p]),r=(b===void 0?s("table-of-contents.title"):b)??s("table-of-contents.title");return e.jsxs(u.TableOfContentsContext.Provider,{value:q,children:[e.jsxs("div",{className:M.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!_},O),children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:r}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(i.Modal,{open:l,onToggle:a,children:e.jsxs(i.Modal.Content,{position:"bottom",fullscreen:"edge","aria-label":r,className:t.default["tedi-table-of-contents__sheet"],children:[e.jsx(i.Modal.Header,{closeButton:!1,children:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(C.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:r}),e.jsx(T.CollapseButton,{open:l,onOpenChange:a,openText:s("open"),closeText:s("close"),underline:!1})]})}),e.jsx(i.Modal.Body,{children:e.jsx("div",{ref:m,className:t.default["tedi-table-of-contents"],children:e.jsx(L.TableOfContentsList,{nodes:c,heading:null})})})]})})]})};g.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=g;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.d.ts

@@ -0,0 +1,17 @@
+import { TableOfContentsProps } from '../../table-of-contents';
+export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'activeId' | 'showIcons' | 'numbered' | 'className'> {
+    /**
+     * Pin the bar to the bottom of the viewport. Set `false` to render it inline.
+     * @default true
+     */
+    sticky?: boolean;
+}
+/**
+ * Mobile variant of `TableOfContents`: a bottom bar that opens the list in a bottom-sheet overlay.
+ * Same `TableOfContents.Item` children as the desktop card; render it on small viewports.
+ */
+export declare const TableOfContentsCollapsible: {
+    (props: TableOfContentsCollapsibleProps): JSX.Element;
+    displayName: string;
+};
+export default TableOfContentsCollapsible;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.es.js

@@ -0,0 +1,80 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import y from "../../../../../../../external/classnames/index.es.js";
+import { useState as k, useRef as B, useEffect as E, useMemo as f } from "react";
+import { Text as T } from "../../../../base/typography/text/text.es.js";
+import { CollapseButton as _ } from "../../../../buttons/collapse-button/collapse-button.es.js";
+import { childrenToNodes as H, buildActiveTrail as j, TableOfContentsContext as I } from "../../table-of-contents.es.js";
+import t from "../../table-of-contents.module.scss.es.js";
+import { TableOfContentsList as M } from "../table-of-contents-list/table-of-contents-list.es.js";
+import { useLabels as R } from "../../../../../providers/label-provider/use-labels.es.js";
+import { Modal as i } from "../../../../overlays/modal/modal.es.js";
+const w = (C) => {
+  const { children: m, heading: b, activeId: s, showIcons: p = !1, numbered: u = !1, sticky: N = !0, className: x } = C, { getLabel: o } = R(), [n, l] = k(!1), h = B(null);
+  E(() => {
+    const d = h.current;
+    if (!n || !d) return;
+    const g = (L) => {
+      L.target.closest("a, button") && l(!1);
+    };
+    return d.addEventListener("click", g), () => d.removeEventListener("click", g);
+  }, [n]);
+  const r = f(() => H(m), [m]), v = f(() => j(r, s), [r, s]), O = f(
+    () => ({ activeId: s, showIcons: p, numbered: u, activeTrail: v }),
+    [s, p, u, v]
+  ), c = (b === void 0 ? o("table-of-contents.title") : b) ?? o("table-of-contents.title");
+  return /* @__PURE__ */ a(I.Provider, { value: O, children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: y(
+          t["tedi-table-of-contents__bar"],
+          { [t["tedi-table-of-contents__bar--static"]]: !N },
+          x
+        ),
+        children: [
+          /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: c }),
+          /* @__PURE__ */ e(
+            _,
+            {
+              open: n,
+              onOpenChange: l,
+              openText: o("open"),
+              closeText: o("close"),
+              underline: !1,
+              "aria-haspopup": "dialog"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(i, { open: n, onToggle: l, children: /* @__PURE__ */ a(
+      i.Content,
+      {
+        position: "bottom",
+        fullscreen: "edge",
+        "aria-label": c,
+        className: t["tedi-table-of-contents__sheet"],
+        children: [
+          /* @__PURE__ */ e(i.Header, { closeButton: !1, children: /* @__PURE__ */ a("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
+            /* @__PURE__ */ e(T, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: c }),
+            /* @__PURE__ */ e(
+              _,
+              {
+                open: n,
+                onOpenChange: l,
+                openText: o("open"),
+                closeText: o("close"),
+                underline: !1
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ e(i.Body, { children: /* @__PURE__ */ e("div", { ref: h, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(M, { nodes: r, heading: null }) }) })
+        ]
+      }
+    ) })
+  ] });
+};
+w.displayName = "TableOfContentsCollapsible";
+export {
+  w as TableOfContentsCollapsible
+};

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-item/table-of-contents-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=t=>null;e.displayName="TableOfContentsItem";exports.TableOfContentsItem=e;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-item/table-of-contents-item.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface TableOfContentsItemProps {
+    /**
+     * Unique id. Required to mark the item active (via the parent's `activeId`)
+     * and to be the parent of nested items.
+     */
+    id?: string;
+    /**
+     * The item's link / label (a `Link`, `Anchor`, `Button`, etc. — pass
+     * `underline={false}` on a `Link` to match the design) plus any nested
+     * `TableOfContents.Item` children, which become this item's sub-items.
+     */
+    children?: React.ReactNode;
+    /**
+     * Validation state for multistep-form usage (only rendered with `showIcons`
+     * on the parent): `true` = valid, `false` = invalid, `undefined` = not yet
+     * validated.
+     */
+    isValid?: boolean;
+    /**
+     * Render a separator below the item.
+     */
+    separator?: boolean;
+    /**
+     * Hide the validation glyph for this item even when `showIcons` is on.
+     */
+    hideIcon?: boolean;
+}
+export declare const TableOfContentsItem: {
+    (_props: TableOfContentsItemProps): JSX.Element | null;
+    displayName: string;
+};
+export default TableOfContentsItem;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-item/table-of-contents-item.es.js

@@ -0,0 +1,5 @@
+const e = (t) => null;
+e.displayName = "TableOfContentsItem";
+export {
+  e as TableOfContentsItem
+};

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-list/table-of-contents-list.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),a=require("react"),f=require("../../../../base/typography/heading/heading.cjs.js"),m=require("../../table-of-contents.cjs.js"),s=require("../../table-of-contents.module.scss.cjs.js"),C=require("../table-of-contents-row/table-of-contents-row.cjs.js"),O=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({nodes:r,heading:t})=>{const{numbered:c}=a.useContext(m.TableOfContentsContext),{getLabel:d}=O.useLabels(),n=a.useId(),u=c?"ol":"ul";return e.jsxs(e.Fragment,{children:[t&&e.jsx(f.Heading,{element:"h3",modifiers:"h4",id:n,className:s.default["tedi-table-of-contents__heading"],children:t}),e.jsx("nav",{"aria-labelledby":t?n:void 0,"aria-label":t?void 0:d("table-of-contents.title"),children:e.jsx(u,{className:b.default(s.default["tedi-table-of-contents__list"],{[s.default["tedi-table-of-contents__list--headless"]]:!t}),children:r.map((l,o)=>e.jsx(C.TableOfContentsRow,{node:l,depth:1,index:o},l.id??o))})})]})};i.displayName="TableOfContentsList";exports.TableOfContentsList=i;

package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-list/table-of-contents-list.d.ts

@@ -0,0 +1,9 @@
+import { TableOfContentsNode } from '../../table-of-contents';
+export interface TableOfContentsListProps {
+    nodes: TableOfContentsNode[];
+    heading?: string | null;
+}
+export declare const TableOfContentsList: {
+    ({ nodes, heading }: TableOfContentsListProps): JSX.Element;
+    displayName: string;
+};