@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

package/src/tedi/components/layout/mobile-nav/mobile-nav.es.js

@@ -1,147 +1,179 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { FloatingOverlay as q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import l from "../../../../../external/classnames/index.es.js";
-import D, { useState as J, useEffect as K } from "react";
-import { Icon as d } from "../../base/icon/icon.es.js";
-import { Button as v } from "../../buttons/button/button.es.js";
-import { SideNavItem as w } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { FloatingOverlay as Q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import c from "../../../../../external/classnames/index.es.js";
+import V, { useState as T, useRef as W, useEffect as k, useLayoutEffect as X } from "react";
+import { warnDeprecated as Y } from "../../../helpers/warn-deprecated/warn-deprecated.es.js";
+import { Icon as p } from "../../base/icon/icon.es.js";
+import { Button as g } from "../../buttons/button/button.es.js";
+import { SideNavItem as G } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
 import n from "../sidenav/sidenav.module.scss.es.js";
-import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
-const U = ({
-  navItems: _,
-  ariaLabel: x,
-  linkAs: b,
-  isOpen: G,
-  onClose: o,
-  showOverlay: P = !0,
-  id: R,
-  className: B
+import { useLabels as Z } from "../../../providers/label-provider/use-labels.es.js";
+const A = typeof window < "u" ? X : k, O = (r) => {
+  let u = (r == null ? void 0 : r.parentElement) ?? null;
+  for (; u; ) {
+    const o = getComputedStyle(u);
+    if (o.transform !== "none" || o.perspective !== "none" || o.filter !== "" && o.filter !== "none" || /\b(transform|perspective|filter)\b/.test(o.willChange) || /\b(layout|paint|strict|content)\b/.test(o.contain))
+      return u;
+    u = u.parentElement;
+  }
+  return null;
+}, ee = ({
+  navItems: r,
+  ariaLabel: u,
+  linkAs: o,
+  isOpen: h,
+  onClose: v,
+  showOverlay: f = !0,
+  id: P,
+  className: F
 }) => {
-  var f, I, C, L, S, y, M;
-  const { getLabel: p } = Q(), [s, c] = J([{ items: _ }]);
-  K(() => {
-    c([{ items: _ }]);
-  }, [_]);
-  const t = s[s.length - 1], j = s.length === 1, N = (e) => {
-    var u;
-    const a = !!(e.subItems || e.subItemGroups), m = !!(e.href || e.to);
-    if (!a) {
-      o();
+  var M, S, R, x, E, z, B;
+  const { getLabel: N } = Z(), [s, b] = T([{ items: r }]), y = W(null), [j, w] = T("var(--layout-header-height)");
+  k(() => {
+    b([{ items: r }]);
+  }, [r]), A(() => {
+    if (!h || !f || typeof document > "u") return;
+    const e = O(y.current), i = (e ?? document).querySelector("header") ?? document.querySelector("header");
+    if (!i) {
+      w("var(--layout-header-height)");
       return;
     }
-    const h = ((u = e.subItemGroups) == null ? void 0 : u.flatMap((O) => O.subItems)) || e.subItems || [];
-    c([
+    const l = () => {
+      const _ = e ? e.getBoundingClientRect().top : 0;
+      w(`${Math.max(0, Math.round(i.getBoundingClientRect().bottom - _))}px`);
+    };
+    l(), window.addEventListener("resize", l);
+    let a;
+    return typeof ResizeObserver < "u" && (a = new ResizeObserver(l), a.observe(i), e && a.observe(e)), () => {
+      window.removeEventListener("resize", l), a == null || a.disconnect();
+    };
+  }, [h, f]), k(() => {
+    if (!h || !f || typeof document > "u") return;
+    const { body: e } = document, i = e.style.overflow;
+    return e.style.overflow = "hidden", () => {
+      e.style.overflow = i;
+    };
+  }, [h, f]);
+  const d = s[s.length - 1], q = s.length === 1, I = (e) => {
+    var _;
+    const i = !!(e.subItems || e.subItemGroups), l = !!(e.href || e.to);
+    if (!i) {
+      v();
+      return;
+    }
+    const a = ((_ = e.subItemGroups) == null ? void 0 : _.flatMap((K) => K.subItems)) || e.subItems || [];
+    b([
       ...s,
       {
-        items: h,
+        items: a,
         parent: e,
-        renderParentLink: m
+        renderParentLink: l
       }
     ]);
-  }, z = () => {
-    c(s.slice(0, -1));
-  }, F = () => {
-    c([s[0]]);
-  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), k = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
-    w,
+  }, D = () => {
+    b(s.slice(0, -1));
+  }, H = () => {
+    b([s[0]]);
+  }, U = ((S = (M = d.parent) == null ? void 0 : M.subItems) == null ? void 0 : S.length) ?? ((x = (R = d.parent) == null ? void 0 : R.subItemGroups) == null ? void 0 : x.length), $ = s.length > 1 && !(d.renderParentLink && U), C = (e, i) => i === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ t(
+    G,
     {
       ...e,
-      as: b,
-      level: a,
-      onItemClick: o,
-      className: l(n["tedi-sidenav__item--mobile"], e.className)
+      as: o,
+      level: i,
+      onItemClick: v,
+      className: c(n["tedi-sidenav__item--mobile"], e.className)
     }
-  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => N(e), className: n["tedi-sidenav__link"], children: [
-    e.icon && /* @__PURE__ */ i(
-      d,
+  ) : /* @__PURE__ */ t("li", { className: c(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ m("button", { onClick: () => I(e), className: n["tedi-sidenav__link"], children: [
+    e.icon && /* @__PURE__ */ t(
+      p,
       {
         name: typeof e.icon == "string" ? e.icon : e.icon.name,
         color: "white",
         className: n["tedi-sidenav__icon"]
       }
     ),
-    /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
-    /* @__PURE__ */ i(d, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] })
-  ] }) }) : H(e, a), H = (e, a) => {
-    const m = !!(e.href || e.to), h = !!(e.subItems || e.subItemGroups);
-    return m ? /* @__PURE__ */ i(
-      w,
+    /* @__PURE__ */ t("span", { className: n["tedi-sidenav__title"], children: e.children }),
+    /* @__PURE__ */ t(p, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] })
+  ] }) }) : J(e, i), J = (e, i) => {
+    const l = !!(e.href || e.to), a = !!(e.subItems || e.subItemGroups);
+    return l ? /* @__PURE__ */ t(
+      G,
       {
         ...e,
-        as: b,
-        level: a,
+        as: o,
+        level: i,
         icon: void 0,
-        onItemClick: o,
-        className: l(n["tedi-sidenav__sub-item"], e.className)
+        onItemClick: v,
+        className: c(n["tedi-sidenav__sub-item"], e.className)
       }
-    ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"]), children: /* @__PURE__ */ r(
-      v,
+    ) : /* @__PURE__ */ t("li", { className: c(n["tedi-sidenav__item"]), children: /* @__PURE__ */ m(
+      g,
       {
         noStyle: !0,
-        onClick: () => h ? N(e) : o(),
+        onClick: () => a ? I(e) : v(),
         className: n["tedi-sidenav__link"],
         children: [
-          /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
-          h ? /* @__PURE__ */ i(d, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] }) : null
+          /* @__PURE__ */ t("span", { className: n["tedi-sidenav__title"], children: e.children }),
+          a ? /* @__PURE__ */ t(p, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] }) : null
         ]
       }
     ) });
-  }, g = /* @__PURE__ */ r(
+  }, L = /* @__PURE__ */ m(
     "nav",
     {
       "data-name": "mobile-sidenav",
-      className: l(n["tedi-sidenav"], n["tedi-sidenav--mobile"], B),
-      "aria-label": x,
-      id: R,
+      className: c(n["tedi-sidenav"], n["tedi-sidenav--mobile"], F),
+      "aria-label": u,
+      id: P,
       children: [
-        /* @__PURE__ */ i("div", { className: n["tedi-sidenav__list"], children: !j && /* @__PURE__ */ r("div", { className: n["tedi-sidenav__back-buttons"], children: [
-          s.length > 1 && /* @__PURE__ */ r(
-            v,
+        /* @__PURE__ */ t("div", { className: n["tedi-sidenav__list"], children: !q && /* @__PURE__ */ m("div", { className: n["tedi-sidenav__back-buttons"], children: [
+          s.length > 1 && /* @__PURE__ */ m(
+            g,
             {
               noStyle: !0,
-              onClick: F,
-              className: l(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
+              onClick: H,
+              className: c(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
               children: [
-                /* @__PURE__ */ i(d, { name: "arrow_back", size: 16, color: "white" }),
-                /* @__PURE__ */ i("span", { children: p("sidenav.backToMainMenu") })
+                /* @__PURE__ */ t(p, { name: "arrow_back", size: 16, color: "white" }),
+                /* @__PURE__ */ t("span", { children: N("sidenav.backToMainMenu") })
               ]
             }
           ),
-          s.length > 2 && /* @__PURE__ */ r(
-            v,
+          s.length > 2 && /* @__PURE__ */ m(
+            g,
             {
               noStyle: !0,
-              onClick: z,
-              className: l(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
+              onClick: D,
+              className: c(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
               children: [
-                /* @__PURE__ */ i(d, { name: "arrow_back", size: 16, color: "white" }),
-                /* @__PURE__ */ i("span", { children: ((y = (S = s[s.length - 1]) == null ? void 0 : S.parent) == null ? void 0 : y.children) + " " + p("sidenav.backtoMenu") })
+                /* @__PURE__ */ t(p, { name: "arrow_back", size: 16, color: "white" }),
+                /* @__PURE__ */ t("span", { children: ((z = (E = s[s.length - 1]) == null ? void 0 : E.parent) == null ? void 0 : z.children) + " " + N("sidenav.backtoMenu") })
               ]
             }
           )
         ] }) }),
-        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (M = t.parent) == null ? void 0 : M.children }),
-        /* @__PURE__ */ r("ul", { className: n["tedi-sidenav__list"], role: "menubar", children: [
-          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: k(t.parent, s.length) }) }),
-          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: k(e, s.length) }, e.id || a))
+        $ && /* @__PURE__ */ t("div", { className: c(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (B = d.parent) == null ? void 0 : B.children }),
+        /* @__PURE__ */ m("ul", { className: n["tedi-sidenav__list"], children: [
+          d.renderParentLink && d.parent && /* @__PURE__ */ t("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ t("div", { className: c(n["tedi-sidenav__collapse"]), children: C(d.parent, s.length) }) }),
+          !d.renderParentLink && d.items.map((e, i) => /* @__PURE__ */ t(V.Fragment, { children: C(e, s.length) }, e.id || i))
         ] })
       ]
     }
   );
-  return G ? P ? /* @__PURE__ */ i(
-    q,
+  return h ? f ? /* @__PURE__ */ t(
+    Q,
     {
-      style: {
-        top: "0",
-        position: "relative",
-        height: "100%"
-      },
+      ref: y,
+      style: { top: j },
       className: n["tedi-sidenav__overlay"],
-      children: g
+      onMouseDown: (e) => {
+        e.target === e.currentTarget && v();
+      },
+      children: L
     }
-  ) : g : null;
-}, ie = U;
+  ) : L : null;
+}, ue = (r) => (Y("SideNavMobile", "Use `MobileNav` (same component, vendor-neutral name)."), /* @__PURE__ */ t(ee, { ...r }));
 export {
-  U as MobileNav,
-  ie as SideNavMobile
+  ee as MobileNav,
+  ue as SideNavMobile
 };

package/src/tedi/components/layout/sidenav/sidenav.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__item--with-tree":"tedi-sidenav__item--with-tree-39198d0d","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav--mobile":"tedi-sidenav--mobile-98e75893","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__item--with-tree":"tedi-sidenav__item--with-tree-39198d0d","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;

package/src/tedi/components/layout/sidenav/sidenav.module.scss.es.js

@@ -11,6 +11,7 @@ const e = {
   "tedi-sidenav__item--has-children": "tedi-sidenav__item--has-children-71df3699",
   "tedi-sidenav__toggle-icon": "tedi-sidenav__toggle-icon-63662692",
   "tedi-sidenav__overlay": "tedi-sidenav__overlay-5feeb550",
+  "tedi-sidenav--mobile": "tedi-sidenav--mobile-98e75893",
   "tedi-sidenav__item--level-2": "tedi-sidenav__item--level-2-3ed1a7e8",
   "tedi-sidenav__list": "tedi-sidenav__list-58d1ae41",
   "tedi-sidenav__item--with-tree": "tedi-sidenav__item--with-tree-39198d0d",

package/src/tedi/components/misc/affix/affix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),b=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),g=require("../../../../community/components/layout/layout-context.cjs.js"),$=require("../../../helpers/hooks/use-element-size.cjs.js"),j=c=>{const{children:n,relative:l=["header"],className:x,position:f="sticky",top:t=1.5,bottom:i,right:a,left:d}=c,{headerBottomElement:p}=q.useContext(g.LayoutContext),o=$.useElementSize(p),r=h.default(e.default["tedi-affix"],x,e.default[`tedi-affix--${f}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&f==="fixed",[e.default[`tedi-affix--bottom-${i}`.replace(".","-")]]:typeof i<"u",[e.default[`tedi-affix--left-${d}`.replace(".","-")]]:typeof d<"u",[e.default[`tedi-affix--right-${a}`.replace(".","-")]]:typeof a<"u"});if(f==="fixed")return u.jsx("div",{className:r,children:n});const s=(typeof t=="number"?t:0)*16,m=l.includes("header")?s+((o==null?void 0:o.height)||0):s,y=(typeof i=="number"?i:0)*16;return u.jsx(b.default,{offsetTop:m,offsetBottom:y,className:r,children:n})};exports.Affix=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),$=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),h=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),q=require("../../../../community/components/layout/layout-context.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),j=x=>{const{children:n,relative:p=["header"],className:m,position:i="sticky",top:t=1.5,bottom:f,right:s,left:a}=x,{headerBottomElement:y}=b.useContext(q.LayoutContext),o=g.useElementSize(y),d=$.default(e.default["tedi-affix"],m,e.default[`tedi-affix--${i}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&i==="fixed",[e.default[`tedi-affix--bottom-${f}`.replace(".","-")]]:typeof f<"u",[e.default[`tedi-affix--left-${a}`.replace(".","-")]]:typeof a<"u",[e.default[`tedi-affix--right-${s}`.replace(".","-")]]:typeof s<"u"});if(i==="fixed")return l.jsx("div",{className:d,children:n});const r=(typeof t=="number"?t:0)*16,u=p.includes("header")?r+((o==null?void 0:o.height)||0):r,c=(typeof f=="number"?f:0)*16;return l.jsx(h.default,{offsetTop:u,offsetBottom:c,className:d,style:{"--tedi-affix-offset-top":`${u}px`,"--tedi-affix-offset-bottom":`${c}px`},children:n})};exports.Affix=j;

package/src/tedi/components/misc/affix/affix.es.js

@@ -1,21 +1,33 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import h from "../../../../../external/classnames/index.es.js";
 import { useContext as $ } from "react";
 import b from "../../../../../external/react-sticky-box/dist/index.es.js";
 import e from "./affix.module.scss.es.js";
 import { LayoutContext as g } from "../../../../community/components/layout/layout-context.es.js";
 import { useElementSize as N } from "../../../helpers/hooks/use-element-size.es.js";
-const L = (d) => {
-  const { children: r, relative: c = ["header"], className: l, position: f = "sticky", top: t = 1.5, bottom: o, right: n, left: s } = d, { headerBottomElement: u } = $(g), i = N(u), m = h(e["tedi-affix"], l, e[`tedi-affix--${f}`], {
+const L = (l) => {
+  const { children: r, relative: x = ["header"], className: u, position: f = "sticky", top: t = 1.5, bottom: o, right: s, left: n } = l, { headerBottomElement: y } = $(g), i = N(y), p = h(e["tedi-affix"], u, e[`tedi-affix--${f}`], {
     [e[`tedi-affix--top-${t}`.replace(".", "-")]]: typeof t < "u" && f === "fixed",
     [e[`tedi-affix--bottom-${o}`.replace(".", "-")]]: typeof o < "u",
-    [e[`tedi-affix--left-${s}`.replace(".", "-")]]: typeof s < "u",
-    [e[`tedi-affix--right-${n}`.replace(".", "-")]]: typeof n < "u"
+    [e[`tedi-affix--left-${n}`.replace(".", "-")]]: typeof n < "u",
+    [e[`tedi-affix--right-${s}`.replace(".", "-")]]: typeof s < "u"
   });
   if (f === "fixed")
-    return /* @__PURE__ */ p("div", { className: m, children: r });
-  const a = (typeof t == "number" ? t : 0) * 16, x = c.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, y = (typeof o == "number" ? o : 0) * 16;
-  return /* @__PURE__ */ p(b, { offsetTop: x, offsetBottom: y, className: m, children: r });
+    return /* @__PURE__ */ c("div", { className: p, children: r });
+  const a = (typeof t == "number" ? t : 0) * 16, m = x.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, d = (typeof o == "number" ? o : 0) * 16;
+  return /* @__PURE__ */ c(
+    b,
+    {
+      offsetTop: m,
+      offsetBottom: d,
+      className: p,
+      style: {
+        "--tedi-affix-offset-top": `${m}px`,
+        "--tedi-affix-offset-bottom": `${d}px`
+      },
+      children: r
+    }
+  );
 };
 export {
   L as Affix

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../../../external/classnames/index.cjs.js"),s=require("react"),x=require("../../../../base/typography/text/text.cjs.js"),C=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),E=require("../../../../overlays/sheet/sheet.cjs.js"),c=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),S=require("../table-of-contents-list/table-of-contents-list.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),p=g=>{const{children:d,heading:u,ariaLabel:_,activeId:l,numbered:b=!1,sticky:j=!0,className:L}=g,{getLabel:f}=y.useLabels(),[n,a]=s.useState(!1),[o,O]=s.useState(null);s.useEffect(()=>{if(!n||!o)return;const v=q=>{q.target.closest("a, button")&&a(!1)};return o.addEventListener("click",v),()=>o.removeEventListener("click",v)},[n,o]);const i=(u===void 0?f("table-of-contents.title"):u)??f("table-of-contents.title"),h=_||i,r=s.useMemo(()=>c.childrenToNodes(d),[d]),m=s.useMemo(()=>c.buildActiveTrail(r,l),[r,l]),T=s.useMemo(()=>({activeId:l,numbered:b,ariaLabel:h,activeTrail:m}),[l,b,h,m]);return e.jsxs(c.TableOfContentsContext.Provider,{value:T,children:[e.jsxs("div",{className:N.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!j},L),children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(E.Sheet,{open:n,onToggle:a,ariaLabel:i,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(x.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:i}),e.jsx(C.CollapseButton,{open:n,onOpenChange:a,underline:!1})]}),children:e.jsx("div",{ref:O,className:t.default["tedi-table-of-contents"],children:e.jsx(S.TableOfContentsList,{nodes:r,heading:null})})})]})};p.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),T=require("../../../../base/typography/text/text.cjs.js"),q=require("../../../../buttons/collapse-button/collapse-button.cjs.js"),H=require("../../../../overlays/sheet/sheet.cjs.js"),b=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),Y=require("../table-of-contents-list/table-of-contents-list.cjs.js"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),N=E=>{const{children:m,heading:h,ariaLabel:S,activeId:o,numbered:v=!1,bordered:y=!1,defaultOpen:p=!0,sticky:c=!0,hideOnScroll:x=!1,className:M}=E,{getLabel:C}=F.useLabels(),[l,i]=n.useState(!1),[k,_]=n.useState(!1),[r,A]=n.useState(null);n.useEffect(()=>{if(!x||!c){_(!1);return}let a=window.scrollY,s=0;const O=()=>{s||(s=window.requestAnimationFrame(()=>{s=0;const f=window.scrollY,j=f-a;Math.abs(j)>4&&(_(j>0&&f>0),a=f)}))};return window.addEventListener("scroll",O,{passive:!0}),()=>{window.removeEventListener("scroll",O),s&&window.cancelAnimationFrame(s)}},[x,c]),n.useEffect(()=>{if(!l||!r)return;const a=s=>{s.target.closest("a, button")&&i(!1)};return r.addEventListener("click",a),()=>r.removeEventListener("click",a)},[l,r]);const d=(h===void 0?C("table-of-contents.title"):h)??C("table-of-contents.title"),g=S||d,u=n.useMemo(()=>b.childrenToNodes(m),[m]),L=n.useMemo(()=>b.buildActiveTrail(u,o),[u,o]),B=n.useMemo(()=>({activeId:o,numbered:v,ariaLabel:g,activeTrail:L,defaultOpen:p}),[o,v,g,L,p]);return e.jsxs(b.TableOfContentsContext.Provider,{value:B,children:[e.jsxs("div",{className:w.default(t.default["tedi-table-of-contents__bar"],{[t.default["tedi-table-of-contents__bar--static"]]:!c,[t.default["tedi-table-of-contents__bar--hidden"]]:k&&!l},M),children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1,"aria-haspopup":"dialog"})]}),e.jsx(H.Sheet,{open:l,onToggle:i,ariaLabel:d,className:t.default["tedi-table-of-contents__sheet"],header:e.jsxs("div",{className:t.default["tedi-table-of-contents__sheet-header"],children:[e.jsx(T.Text,{modifiers:"bold",className:t.default["tedi-table-of-contents__bar-title"],children:d}),e.jsx(q.CollapseButton,{open:l,onOpenChange:i,underline:!1})]}),children:e.jsx("div",{ref:A,className:w.default(t.default["tedi-table-of-contents"],{[t.default["tedi-table-of-contents--bordered"]]:y}),children:e.jsx(Y.TableOfContentsList,{nodes:u,heading:null})})})]})};N.displayName="TableOfContentsCollapsible";exports.TableOfContentsCollapsible=N;

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

@@ -1,10 +1,18 @@
 import { TableOfContentsProps } from '../../table-of-contents';
-export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'ariaLabel' | 'activeId' | 'numbered' | 'className'> {
+export interface TableOfContentsCollapsibleProps extends Pick<TableOfContentsProps, 'children' | 'heading' | 'ariaLabel' | 'activeId' | 'numbered' | 'bordered' | 'defaultOpen' | 'className'> {
     /**
      * Pin the bar to the bottom of the viewport. Set `false` to render it inline.
      * @default true
      */
     sticky?: boolean;
+    /**
+     * Mobile-only behaviour of this `TableOfContents.Collapsible` bar — there is no desktop equivalent.
+     * When the bar is pinned (`sticky`), auto-hide it while the page scrolls down and reveal it again on
+     * scroll up, so it stays out of the way while reading but is one gesture away. No effect when
+     * `sticky` is `false`.
+     * @default false
+     */
+    hideOnScroll?: boolean;
 }
 /**
  * Mobile variant of `TableOfContents`: a bottom bar that opens the list in a bottom-sheet overlay.

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

@@ -1,58 +1,97 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import k from "../../../../../../../external/classnames/index.es.js";
-import { useState as v, useEffect as y, useMemo as c } from "react";
-import { Text as g } from "../../../../base/typography/text/text.es.js";
-import { CollapseButton as _ } from "../../../../buttons/collapse-button/collapse-button.es.js";
-import { Sheet as j } from "../../../../overlays/sheet/sheet.es.js";
-import { childrenToNodes as H, buildActiveTrail as S, TableOfContentsContext as A } from "../../table-of-contents.es.js";
-import t from "../../table-of-contents.module.scss.es.js";
-import { TableOfContentsList as B } from "../table-of-contents-list/table-of-contents-list.es.js";
-import { useLabels as I } from "../../../../../providers/label-provider/use-labels.es.js";
-const M = (N) => {
-  const { children: d, heading: m, ariaLabel: C, activeId: n, numbered: f = !1, sticky: L = !0, className: T } = N, { getLabel: b } = I(), [o, a] = v(!1), [s, O] = v(null);
-  y(() => {
-    if (!o || !s) return;
-    const u = (E) => {
-      E.target.closest("a, button") && a(!1);
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import E from "../../../../../../../external/classnames/index.es.js";
+import { useState as b, useEffect as x, useMemo as u } from "react";
+import { Text as y } from "../../../../base/typography/text/text.es.js";
+import { CollapseButton as S } from "../../../../buttons/collapse-button/collapse-button.es.js";
+import { Sheet as q } from "../../../../overlays/sheet/sheet.es.js";
+import { childrenToNodes as B, buildActiveTrail as I, TableOfContentsContext as P } from "../../table-of-contents.es.js";
+import e from "../../table-of-contents.module.scss.es.js";
+import { TableOfContentsList as V } from "../table-of-contents-list/table-of-contents-list.es.js";
+import { useLabels as z } from "../../../../../providers/label-provider/use-labels.es.js";
+const D = (k) => {
+  const {
+    children: h,
+    heading: p,
+    ariaLabel: A,
+    activeId: s,
+    numbered: v = !1,
+    bordered: H = !1,
+    defaultOpen: _ = !0,
+    sticky: d = !0,
+    hideOnScroll: g = !1,
+    className: Y
+  } = k, { getLabel: w } = z(), [o, a] = b(!1), [j, L] = b(!1), [i, F] = b(null);
+  x(() => {
+    if (!g || !d) {
+      L(!1);
+      return;
+    }
+    let l = window.scrollY, t = 0;
+    const O = () => {
+      t || (t = window.requestAnimationFrame(() => {
+        t = 0;
+        const f = window.scrollY, T = f - l;
+        Math.abs(T) > 4 && (L(T > 0 && f > 0), l = f);
+      }));
     };
-    return s.addEventListener("click", u), () => s.removeEventListener("click", u);
-  }, [o, s]);
-  const l = (m === void 0 ? b("table-of-contents.title") : m) ?? b("table-of-contents.title"), p = C || l, i = c(() => H(d), [d]), h = c(() => S(i, n), [i, n]), x = c(
-    () => ({ activeId: n, numbered: f, ariaLabel: p, activeTrail: h }),
-    [n, f, p, h]
+    return window.addEventListener("scroll", O, { passive: !0 }), () => {
+      window.removeEventListener("scroll", O), t && window.cancelAnimationFrame(t);
+    };
+  }, [g, d]), x(() => {
+    if (!o || !i) return;
+    const l = (t) => {
+      t.target.closest("a, button") && a(!1);
+    };
+    return i.addEventListener("click", l), () => i.removeEventListener("click", l);
+  }, [o, i]);
+  const r = (p === void 0 ? w("table-of-contents.title") : p) ?? w("table-of-contents.title"), N = A || r, c = u(() => B(h), [h]), C = u(() => I(c, s), [c, s]), M = u(
+    () => ({ activeId: s, numbered: v, ariaLabel: N, activeTrail: C, defaultOpen: _ }),
+    [s, v, N, C, _]
   );
-  return /* @__PURE__ */ r(A.Provider, { value: x, children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ m(P.Provider, { value: M, children: [
+    /* @__PURE__ */ m(
       "div",
       {
-        className: k(
-          t["tedi-table-of-contents__bar"],
-          { [t["tedi-table-of-contents__bar--static"]]: !L },
-          T
+        className: E(
+          e["tedi-table-of-contents__bar"],
+          {
+            [e["tedi-table-of-contents__bar--static"]]: !d,
+            [e["tedi-table-of-contents__bar--hidden"]]: j && !o
+          },
+          Y
         ),
         children: [
-          /* @__PURE__ */ e(g, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: l }),
-          /* @__PURE__ */ e(_, { open: o, onOpenChange: a, underline: !1, "aria-haspopup": "dialog" })
+          /* @__PURE__ */ n(y, { modifiers: "bold", className: e["tedi-table-of-contents__bar-title"], children: r }),
+          /* @__PURE__ */ n(S, { open: o, onOpenChange: a, underline: !1, "aria-haspopup": "dialog" })
         ]
       }
     ),
-    /* @__PURE__ */ e(
-      j,
+    /* @__PURE__ */ n(
+      q,
       {
         open: o,
         onToggle: a,
-        ariaLabel: l,
-        className: t["tedi-table-of-contents__sheet"],
-        header: /* @__PURE__ */ r("div", { className: t["tedi-table-of-contents__sheet-header"], children: [
-          /* @__PURE__ */ e(g, { modifiers: "bold", className: t["tedi-table-of-contents__bar-title"], children: l }),
-          /* @__PURE__ */ e(_, { open: o, onOpenChange: a, underline: !1 })
+        ariaLabel: r,
+        className: e["tedi-table-of-contents__sheet"],
+        header: /* @__PURE__ */ m("div", { className: e["tedi-table-of-contents__sheet-header"], children: [
+          /* @__PURE__ */ n(y, { modifiers: "bold", className: e["tedi-table-of-contents__bar-title"], children: r }),
+          /* @__PURE__ */ n(S, { open: o, onOpenChange: a, underline: !1 })
         ] }),
-        children: /* @__PURE__ */ e("div", { ref: O, className: t["tedi-table-of-contents"], children: /* @__PURE__ */ e(B, { nodes: i, heading: null }) })
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: F,
+            className: E(e["tedi-table-of-contents"], {
+              [e["tedi-table-of-contents--bordered"]]: H
+            }),
+            children: /* @__PURE__ */ n(V, { nodes: c, heading: null })
+          }
+        )
       }
     )
   ] });
 };
-M.displayName = "TableOfContentsCollapsible";
+D.displayName = "TableOfContentsCollapsible";
 export {
-  M as TableOfContentsCollapsible
+  D as TableOfContentsCollapsible
 };

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

@@ -15,6 +15,12 @@ export interface TableOfContentsItemProps {
      * Render a separator below the item.
      */
     separator?: boolean;
+    /**
+     * Trailing content shown at the end of the item's row (right-aligned) — e.g. a
+     * count `Tag` or `StatusBadge`. Kept out of the link so it isn't part of the
+     * link's accessible name.
+     */
+    slot?: React.ReactNode;
 }
 export declare const TableOfContentsItem: {
     (_props: TableOfContentsItemProps): JSX.Element | null;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../../../external/classnames/index.cjs.js"),N=require("react"),T=require("../../../../misc/separator/separator.cjs.js"),w=require("../../table-of-contents.cjs.js"),t=require("../../table-of-contents.module.scss.cjs.js"),r=({node:m,depth:c,index:i,numberPrefix:a})=>{const{activeId:_,numbered:o,activeTrail:p}=N.useContext(w.TableOfContentsContext),{id:n,content:x,children:s,separator:j}=m,C=!!(s!=null&&s.length),d=!!n&&n===_,h=C&&!!n&&p.has(n),O=Math.min(c,2),l=a?`${a}.${i+1}`:`${i+1}`,v=a?l:`${l}.`,q=o?"ol":"ul";return e.jsxs("li",{"aria-current":d?"true":void 0,className:b.default(t.default["tedi-table-of-contents__item"],{[t.default["tedi-table-of-contents__item--selected"]]:d}),children:[e.jsxs("span",{className:b.default(t.default["tedi-table-of-contents__row"],t.default[`tedi-table-of-contents__row--level-${O}`]),children:[o&&e.jsx("span",{className:t.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:v}),e.jsx("span",{className:t.default["tedi-table-of-contents__content"],children:x})]}),h&&e.jsx(q,{className:t.default["tedi-table-of-contents__group"],children:s.map((u,f)=>e.jsx(r,{node:u,depth:c+1,index:f,numberPrefix:o?l:void 0},u.id??f))}),j&&e.jsx(T.Separator,{})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),_=require("../../../../../../../external/classnames/index.cjs.js"),w=require("react"),R=require("../../../../misc/separator/separator.cjs.js"),$=require("../../table-of-contents.cjs.js"),e=require("../../table-of-contents.module.scss.cjs.js"),r=({node:m,depth:c,index:d,numberPrefix:a})=>{const{activeId:p,numbered:o,activeTrail:x,defaultOpen:j}=w.useContext($.TableOfContentsContext),{id:n,content:v,children:s,separator:h,slot:i}=m,C=!!(s!=null&&s.length),u=!!n&&n===p,O=C&&(j||!!n&&x.has(n)),N=Math.min(c,2),l=a?`${a}.${d+1}`:`${d+1}`,q=a?l:`${l}.`,T=o?"ol":"ul";return t.jsxs("li",{"aria-current":u?"true":void 0,className:_.default(e.default["tedi-table-of-contents__item"],{[e.default["tedi-table-of-contents__item--selected"]]:u}),children:[t.jsxs("div",{className:_.default(e.default["tedi-table-of-contents__row"],e.default[`tedi-table-of-contents__row--level-${N}`]),children:[o&&t.jsx("span",{className:e.default["tedi-table-of-contents__number"],"aria-hidden":"true",children:q}),t.jsx("span",{className:e.default["tedi-table-of-contents__content"],children:v}),i!==void 0&&t.jsx("div",{className:e.default["tedi-table-of-contents__slot"],children:i})]}),O&&t.jsx(T,{className:e.default["tedi-table-of-contents__group"],children:s.map((f,b)=>t.jsx(r,{node:f,depth:c+1,index:b,numberPrefix:o?l:void 0},f.id??b))}),h&&t.jsx(R.Separator,{className:e.default["tedi-table-of-contents__separator"]})]})};r.displayName="TableOfContentsRow";exports.TableOfContentsRow=r;