@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/src/tedi/components/layout/top-nav/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/top-nav-group/top-nav-group';
+export * from './components/top-nav-item/top-nav-item';
+export * from './components/top-nav-separator/top-nav-separator';
+export * from './components/top-nav-subitem/top-nav-subitem';
+export * from './top-nav';

package/src/tedi/components/layout/top-nav/top-nav-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),o=()=>t.useContext(e);exports.TopNavContext=e;exports.useTopNavContext=o;

package/src/tedi/components/layout/top-nav/top-nav-context.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavContextValue {
+    /**
+     * Closes the open desktop submenu (mega-menu) panel. Called by `TopNav.SubItem`
+     * when a submenu link is activated so the panel dismisses on navigation
+     * (important for SPA / client-side routing where the nav stays mounted).
+     * No-op when there is no open panel.
+     */
+    closeSubmenu: () => void;
+}
+export declare const TopNavContext: import('react').Context<TopNavContextValue | null>;
+export declare const useTopNavContext: () => TopNavContextValue | null;

package/src/tedi/components/layout/top-nav/top-nav-context.es.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as o } from "react";
+const e = t(null), x = () => o(e);
+export {
+  e as TopNavContext,
+  x as useTopNavContext
+};

package/src/tedi/components/layout/top-nav/top-nav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,p=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&p.push(ie(i))}),p.length>0&&r.push({subHeading:f.title,subItems:p})}),r.length>0?r:void 0},l=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:p,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.default(),T=C.isBreakpointBelow(K,f),b=p!==void 0,[$,q]=t.useState(!1),z=b?p:$;t.useEffect(()=>{!b&&!T&&q(!1)},[T,b]);const J=e=>{b||q(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),c=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=c.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[c]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const _=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:_}),[_]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,j=t.useMemo(()=>c.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[c,N]),U=t.useMemo(()=>c.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[c]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const B=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:B,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!B&&j&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:j.props.submenu})})]})})};l.displayName="TopNav";l.Item=g.TopNavItem;l.Group=W.TopNavGroup;l.SubItem=R.TopNavSubItem;l.Separator=G.TopNavSeparator;exports.TopNav=l;

package/src/tedi/components/layout/top-nav/top-nav.d.ts

@@ -0,0 +1,91 @@
+import { default as React, ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { TopNavGroupProps } from './components/top-nav-group/top-nav-group';
+import { TopNavItemProps } from './components/top-nav-item/top-nav-item';
+import { TopNavSubItemProps } from './components/top-nav-subitem/top-nav-subitem';
+type BreakpointWidthName = Exclude<Breakpoint, 'xs'>;
+export type TopNavMaxWidth = number | BreakpointWidthName | (string & {});
+export interface TopNavProps {
+    /**
+     * `TopNav.Item` and `TopNav.Separator` children. Any other
+     * React node is ignored. Fragments are flattened, so `<>…</>` wrappers work
+     * transparently.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the wrapping `<nav>` landmark.
+     */
+    ariaLabel: string;
+    /**
+     * Breakpoint below which the bar collapses into the shared Sidenav mobile
+     * drawer. Pass any TEDI breakpoint name (`xs`/`sm`/`md`/`lg`/`xl`/`xxl`).
+     * @default md
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Controlled open state for the mobile drawer. Pair with `onMenuToggle`
+     * to wire it to an external toggle button.
+     */
+    isMobileOpen?: boolean;
+    /**
+     * Fires whenever the mobile drawer opens or closes.
+     */
+    onMenuToggle?: (open: boolean) => void;
+    /**
+     * Dim the rest of the viewport when the mobile drawer is open.
+     * @default true
+     */
+    showMobileOverlay?: boolean;
+    /**
+     * Additional class name applied to the desktop `<nav>`.
+     */
+    className?: string;
+    /**
+     * Element id forwarded to the desktop `<nav>`.
+     */
+    id?: string;
+    /**
+     * Controls how the submenu (mega-menu) panel sizes and positions itself
+     * when the active item has submenu content. Both options use the same
+     * padding — this only affects the panel's width and horizontal position,
+     * not its density.
+     *
+     * - `'full'` (default) — the panel stretches to the full nav width and is
+     *   centered, suitable for wide multi-column mega-menus.
+     * - `'content'` — the panel is only as wide as its content and sits
+     *   left-aligned directly under the active item (it is *not* a smaller /
+     *   tighter variant — just not stretched). Good for single- or few-column
+     *   menus.
+     * @default full
+     */
+    submenuFit?: 'full' | 'content';
+    /**
+     * Constrains the inner content (item bar and full-width submenu inner) to a
+     * maximum width and centers it inside the blue `<nav>` background. Pass any
+     * valid CSS length (e.g. `1440`, `'1440px'`, `'90rem'`), or a TEDI breakpoint
+     * name (`'sm' | 'md' | 'lg' | 'xl' | 'xxl'`) — these resolve to the
+     * breakpoint's `min-width` (36rem / 48rem / 62rem / 75rem / 87.5rem
+     * respectively), useful for aligning the nav inner with a breakpoint-driven
+     * content container. The `<nav>` itself still spans 100% of its container.
+     *
+     * Pass `'none'` (or `0`) to disable the constraint and let the bar fill the
+     * full width of the nav.
+     * @default xxl
+     */
+    maxWidth?: TopNavMaxWidth | 'none';
+}
+export declare const TopNav: {
+    (props: TopNavProps): React.ReactElement | null;
+    displayName: string;
+    Item: <C extends React.ElementType = "a">(props: TopNavItemProps<C>) => React.ReactElement | null;
+    Group: {
+        ({ title, children, icon, headingLevel, className, }: TopNavGroupProps): JSX.Element;
+        displayName: string;
+    };
+    SubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+    Separator: {
+        ({ className }: import('.').TopNavSeparatorProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default TopNav;

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

@@ -0,0 +1,170 @@
+import { jsx as u, jsxs as ae } from "react/jsx-runtime";
+import ue from "../../../../../external/classnames/index.es.js";
+import R, { useState as P, useEffect as g, useMemo as c, useCallback as ce, useRef as le, useId as me, Children as l, isValidElement as w, Fragment as D } from "react";
+import { MobileNav as de } from "../mobile-nav/mobile-nav.es.js";
+import { TopNavGroup as F } from "./components/top-nav-group/top-nav-group.es.js";
+import { TopNavItem as M } from "./components/top-nav-item/top-nav-item.es.js";
+import { TopNavSeparator as H } from "./components/top-nav-separator/top-nav-separator.es.js";
+import { TopNavSubItem as K } from "./components/top-nav-subitem/top-nav-subitem.es.js";
+import f from "./top-nav.module.scss.es.js";
+import { TopNavContext as fe } from "./top-nav-context.es.js";
+import ve, { isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+const he = (n) => {
+  if (!(n === void 0 || n === "none" || n === 0))
+    return typeof n == "string" && n !== "xs" && n in V ? V[n] : n;
+}, q = (n) => {
+  const r = [];
+  return l.forEach(n, (o) => {
+    if (w(o)) {
+      if (o.type === D) {
+        r.push(...q(o.props.children));
+        return;
+      }
+      (o.type === M || o.type === H) && r.push(o);
+    }
+  }), r;
+}, j = (n) => n.type === M, Ie = (n) => ({
+  children: n.props.children,
+  href: n.props.href,
+  isActive: n.props.isActive,
+  onClick: n.props.onClick
+}), $ = (n) => {
+  if (!n) return;
+  const r = [];
+  return l.forEach(n, (o) => {
+    if (!w(o)) return;
+    if (o.type === D) {
+      const s = $(o.props.children);
+      s && r.push(...s);
+      return;
+    }
+    if (o.type !== F) return;
+    const b = o.props, p = [];
+    l.forEach(b.children, (s) => {
+      w(s) && s.type === K && p.push(Ie(s));
+    }), p.length > 0 && r.push({ subHeading: b.title, subItems: p });
+  }), r.length > 0 ? r : void 0;
+}, v = (n) => {
+  const {
+    children: r,
+    ariaLabel: o,
+    mobileBreakpoint: b = "md",
+    isMobileOpen: p,
+    onMenuToggle: s,
+    showMobileOverlay: z = !0,
+    className: T,
+    id: J,
+    submenuFit: Q = "full",
+    maxWidth: U = "xxl"
+  } = n, X = ve(), C = be(X, b), h = p !== void 0, [Y, B] = P(!1), Z = h ? p : Y;
+  g(() => {
+    !h && !C && B(!1);
+  }, [C, h]);
+  const ee = (e) => {
+    h || B(e), s == null || s(e);
+  }, E = c(() => q(r), [r]), a = c(() => E.filter(j), [E]), O = (e) => !e.props.href && l.count(e.props.submenu) > 0, _ = c(() => {
+    const e = a.findIndex((t) => O(t) && t.props.isActive);
+    return e === -1 ? null : e;
+  }, [a]), [I, m] = P(_);
+  g(() => {
+    m(_);
+  }, [_]);
+  const A = ce(() => m(null), []), ne = c(() => ({ closeSubmenu: A }), [A]), x = le(null), y = me();
+  g(() => {
+    if (I === null) return;
+    const e = (i) => {
+      x.current && !x.current.contains(i.target) && m(null);
+    }, t = (i) => {
+      var S;
+      if (i.key !== "Escape") return;
+      const d = (S = x.current) == null ? void 0 : S.querySelector(
+        `[aria-controls="${CSS.escape(y)}"][aria-expanded="true"]`
+      );
+      d == null || d.focus(), m(null);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+    };
+  }, [I, y]);
+  const W = (e, t) => O(e) ? I === t : !!e.props.isActive, L = c(
+    () => a.find((e, t) => W(e, t) && l.count(e.props.submenu) > 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, I]
+  ), oe = c(
+    () => a.map((e) => ({
+      children: e.props.children,
+      disabled: e.props.disabled,
+      href: e.props.href,
+      icon: e.props.icon,
+      isActive: e.props.isActive,
+      onClick: e.props.onClick,
+      subItemGroups: $(e.props.submenu)
+    })),
+    [a]
+  );
+  if (C)
+    return /* @__PURE__ */ u(
+      de,
+      {
+        navItems: oe,
+        ariaLabel: o,
+        isOpen: Z,
+        onClose: () => ee(!1),
+        showOverlay: z,
+        className: T
+      }
+    );
+  const G = Q === "content", N = he(U);
+  let te = 0;
+  return /* @__PURE__ */ u(fe.Provider, { value: ne, children: /* @__PURE__ */ ae(
+    "nav",
+    {
+      ref: x,
+      id: J,
+      className: ue(f["tedi-top-nav"], T),
+      "aria-label": o,
+      "data-name": "top-nav",
+      children: [
+        /* @__PURE__ */ u("div", { className: f["tedi-top-nav__bar"], children: /* @__PURE__ */ u(
+          "ul",
+          {
+            className: f["tedi-top-nav__list"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: E.map((e, t) => {
+              if (j(e)) {
+                const i = te++, d = l.count(e.props.submenu) > 0, S = O(e), re = W(e, i), k = e.props.onClick, se = S ? (ie) => {
+                  k == null || k(ie), m((pe) => pe === i ? null : i);
+                } : k;
+                return R.cloneElement(e, {
+                  key: t,
+                  hasSubmenu: d,
+                  renderSubmenuInline: G,
+                  isSubmenuOpen: re,
+                  panelId: y,
+                  onClick: se
+                });
+              }
+              return R.cloneElement(e, { key: t });
+            })
+          }
+        ) }),
+        !G && L && /* @__PURE__ */ u("div", { id: y, className: f["tedi-top-nav__submenu"], "data-name": "top-nav-submenu", children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: f["tedi-top-nav__submenu-inner"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: L.props.submenu
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+v.displayName = "TopNav";
+v.Item = M;
+v.Group = F;
+v.SubItem = K;
+v.Separator = H;
+export {
+  v as TopNav
+};

package/src/tedi/components/layout/top-nav/top-nav.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-top-nav":"tedi-top-nav-7985280d","tedi-top-nav__bar":"tedi-top-nav__bar-d7be6587","tedi-top-nav__list":"tedi-top-nav__list-1cdecbe8","tedi-top-nav__item":"tedi-top-nav__item-aa7109b8","tedi-top-nav__item--has-inline-submenu":"tedi-top-nav__item--has-inline-submenu-4d48fa95","tedi-top-nav__link":"tedi-top-nav__link-724c1ebc","tedi-top-nav__link--active":"tedi-top-nav__link--active-34580ede","tedi-top-nav__icon":"tedi-top-nav__icon-1ab6c34d","tedi-top-nav__chevron":"tedi-top-nav__chevron-e05880f8","tedi-top-nav__chevron--open":"tedi-top-nav__chevron--open-ef97d87b","tedi-top-nav__separator":"tedi-top-nav__separator-d1e8646d","tedi-top-nav__separator-line":"tedi-top-nav__separator-line-4777819a","tedi-top-nav__submenu":"tedi-top-nav__submenu-9b591c05","tedi-top-nav__submenu-inner":"tedi-top-nav__submenu-inner-7a7895b2","tedi-top-nav__submenu--inline":"tedi-top-nav__submenu--inline-b4debcfa","tedi-top-nav__submenu-inner--inline":"tedi-top-nav__submenu-inner--inline-c5cd3a64","tedi-top-nav__group":"tedi-top-nav__group-691df203","tedi-top-nav__group-title":"tedi-top-nav__group-title-70faf48a","tedi-top-nav__group-icon":"tedi-top-nav__group-icon-792cee8c","tedi-top-nav__group-list":"tedi-top-nav__group-list-88ee40bb","tedi-top-nav__subitem":"tedi-top-nav__subitem-d8c89fc6","tedi-top-nav__subitem-link":"tedi-top-nav__subitem-link-382e3910","tedi-top-nav__subitem-link--active":"tedi-top-nav__subitem-link--active-d0f16d73"};exports.default=t;

package/src/tedi/components/layout/top-nav/top-nav.module.scss.es.js

@@ -0,0 +1,28 @@
+const t = {
+  "tedi-top-nav": "tedi-top-nav-7985280d",
+  "tedi-top-nav__bar": "tedi-top-nav__bar-d7be6587",
+  "tedi-top-nav__list": "tedi-top-nav__list-1cdecbe8",
+  "tedi-top-nav__item": "tedi-top-nav__item-aa7109b8",
+  "tedi-top-nav__item--has-inline-submenu": "tedi-top-nav__item--has-inline-submenu-4d48fa95",
+  "tedi-top-nav__link": "tedi-top-nav__link-724c1ebc",
+  "tedi-top-nav__link--active": "tedi-top-nav__link--active-34580ede",
+  "tedi-top-nav__icon": "tedi-top-nav__icon-1ab6c34d",
+  "tedi-top-nav__chevron": "tedi-top-nav__chevron-e05880f8",
+  "tedi-top-nav__chevron--open": "tedi-top-nav__chevron--open-ef97d87b",
+  "tedi-top-nav__separator": "tedi-top-nav__separator-d1e8646d",
+  "tedi-top-nav__separator-line": "tedi-top-nav__separator-line-4777819a",
+  "tedi-top-nav__submenu": "tedi-top-nav__submenu-9b591c05",
+  "tedi-top-nav__submenu-inner": "tedi-top-nav__submenu-inner-7a7895b2",
+  "tedi-top-nav__submenu--inline": "tedi-top-nav__submenu--inline-b4debcfa",
+  "tedi-top-nav__submenu-inner--inline": "tedi-top-nav__submenu-inner--inline-c5cd3a64",
+  "tedi-top-nav__group": "tedi-top-nav__group-691df203",
+  "tedi-top-nav__group-title": "tedi-top-nav__group-title-70faf48a",
+  "tedi-top-nav__group-icon": "tedi-top-nav__group-icon-792cee8c",
+  "tedi-top-nav__group-list": "tedi-top-nav__group-list-88ee40bb",
+  "tedi-top-nav__subitem": "tedi-top-nav__subitem-d8c89fc6",
+  "tedi-top-nav__subitem-link": "tedi-top-nav__subitem-link-382e3910",
+  "tedi-top-nav__subitem-link--active": "tedi-top-nav__subitem-link--active-d0f16d73"
+};
+export {
+  t as default
+};

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),d=require("./vertical-spacing-item.cjs.js"),g=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),e=t=>{const{getCurrentBreakpointProps:i}=g.useBreakpointProps(t.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:r=1,...s}=i(t),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":r!==0?`${r}em`:"0"},children:a})};e.Item=d.VerticalSpacingItem;exports.VerticalSpacing=e;exports.default=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),g=require("./vertical-spacing-item.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,...s}=i(e),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0"},children:a})};r.Item=g.VerticalSpacingItem;exports.VerticalSpacing=r;

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.es.js

@@ -2,29 +2,28 @@ import { jsx as c } from "react/jsx-runtime";
 import m from "../../../../../external/classnames/index.es.js";
 import l from "./vertical-spacing.module.scss.es.js";
 import { VerticalSpacingItem as p } from "./vertical-spacing-item.es.js";
-import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const g = (e) => {
-  const { getCurrentBreakpointProps: r } = f(e.defaultServerBreakpoint), {
+import { useBreakpointProps as g } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const f = (e) => {
+  const { getCurrentBreakpointProps: r } = g(e.defaultServerBreakpoint), {
     children: a,
     className: i,
-    element: s = "div",
+    element: n = "div",
     size: t = 1,
-    ...n
+    ...s
   } = r(e), o = m(l["tedi-vertical-spacing"], i);
   return /* @__PURE__ */ c(
-    s,
+    n,
     {
       "data-name": "vertical-spacing",
       role: "presentation",
-      ...n,
+      ...s,
       className: o,
       style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0" },
       children: a
     }
   );
 };
-g.Item = p;
+f.Item = p;
 export {
-  g as VerticalSpacing,
-  g as default
+  f as VerticalSpacing
 };

package/src/tedi/components/loaders/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './progress-bar';

package/src/tedi/components/loaders/progress-bar/progress-bar.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),$=require("react"),z=require("../../form/feedback-text/feedback-text.cjs.js"),R=require("../../form/form-label/form-label.cjs.js"),e=require("./progress-bar.module.scss.cjs.js"),S=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),T=r=>r===void 0||Number.isNaN(r)||r<0?0:r>100?100:r,h=r=>{const{getCurrentBreakpointProps:x}=S.useBreakpointProps(r.defaultServerBreakpoint),{id:N,value:j,small:B=!1,label:l,labelPosition:d="top",required:P=!1,showValue:n=!0,valuePosition:u="horizontal",valueLabel:c,ariaLabel:b,helper:s,className:q}=x(r),k=$.useId(),t=N??`tedi-progress-bar-${k.replace(/[^a-zA-Z0-9-]/g,"")}`,i=`${t}__label`,p=s?s.id??`${t}__helper`:void 0,o=T(j),m=c??`${Math.round(o)}%`,_=l?a.jsx(R.FormLabel,{id:t,label:l,required:P,renderWithoutLabel:!0,className:e.default["tedi-progress-bar__label"]}):null,y=n&&u==="horizontal"?a.jsx("span",{className:e.default["tedi-progress-bar__value"],children:m}):null,L=a.jsx("div",{id:t,role:"progressbar","aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":c,"aria-labelledby":l&&!b?i:void 0,"aria-label":b||void 0,"aria-describedby":p,className:e.default["tedi-progress-bar__track"],children:a.jsx("div",{className:e.default["tedi-progress-bar__fill"],style:{width:`${o}%`}})}),f=n&&u==="bottom",w=a.jsxs("div",{className:e.default["tedi-progress-bar__row"],children:[L,y]}),I=s||f?a.jsxs("div",{className:e.default["tedi-progress-bar__hint-row"],children:[s?a.jsx(z.FeedbackText,{...s,id:p,className:v.default(e.default["tedi-progress-bar__hint"],s.className)}):null,f?a.jsx("span",{className:e.default["tedi-progress-bar__value"],children:m}):null]}):null,g=a.jsxs("div",{className:e.default["tedi-progress-bar__group"],children:[w,I]}),V=l&&d==="horizontal";return a.jsxs("div",{className:v.default(e.default["tedi-progress-bar"],{[e.default["tedi-progress-bar--small"]]:B},q),"data-name":"progress-bar",children:[l&&d==="top"?a.jsx("div",{id:i,className:e.default["tedi-progress-bar__label-wrapper"],children:_}):null,V?a.jsxs("div",{className:e.default["tedi-progress-bar__main"],children:[a.jsx("div",{id:i,className:e.default["tedi-progress-bar__inline-label"],children:_}),g]}):g]})};h.displayName="ProgressBar";exports.ProgressBar=h;

package/src/tedi/components/loaders/progress-bar/progress-bar.d.ts

@@ -0,0 +1,65 @@
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../../form/feedback-text/feedback-text';
+export type ProgressBarLabelPosition = 'top' | 'horizontal';
+export type ProgressBarValuePosition = 'horizontal' | 'bottom';
+type ProgressBarBreakpointProps = {
+    /**
+     * Use the 4px bar height instead of the 8px default.
+     * @default false
+     */
+    small?: boolean;
+    /**
+     * Label placement. Ignored without `label`.
+     * @default top
+     */
+    labelPosition?: ProgressBarLabelPosition;
+    /**
+     * Show the percentage value.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Where the percentage sits relative to the bar / hint row.
+     * @default horizontal
+     */
+    valuePosition?: ProgressBarValuePosition;
+    /**
+     * Override the rendered value text (e.g. `"1 / 5"`) without affecting the fill.
+     */
+    valueLabel?: string;
+    /**
+     * Hint or error text rendered below the bar via `FeedbackText`.
+     */
+    helper?: FeedbackTextProps;
+    /** Class on the root wrapper. */
+    className?: string;
+};
+export interface ProgressBarProps extends BreakpointSupport<ProgressBarBreakpointProps> {
+    /**
+     * Id forwarded to the bar element so external `<label htmlFor>` can target it.
+     */
+    id?: string;
+    /**
+     * Progress value, clamped to `0..100`. `NaN` is treated as `0`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Label rendered above or inline with the bar.
+     */
+    label?: string;
+    /**
+     * Renders a required indicator on the label. Ignored without `label`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Accessible name. Falls back to `label`.
+     */
+    ariaLabel?: string;
+}
+export declare const ProgressBar: {
+    (props: ProgressBarProps): JSX.Element;
+    displayName: string;
+};
+export default ProgressBar;

package/src/tedi/components/loaders/progress-bar/progress-bar.es.js

@@ -0,0 +1,74 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useId as j } from "react";
+import { FeedbackText as F } from "../../form/feedback-text/feedback-text.es.js";
+import { FormLabel as R } from "../../form/form-label/form-label.es.js";
+import e from "./progress-bar.module.scss.es.js";
+import { useBreakpointProps as q } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const A = (r) => r === void 0 || Number.isNaN(r) || r < 0 ? 0 : r > 100 ? 100 : r, C = (r) => {
+  const { getCurrentBreakpointProps: f } = q(r.defaultServerBreakpoint), {
+    id: w,
+    value: x,
+    small: y = !1,
+    label: l,
+    labelPosition: n = "top",
+    required: B = !1,
+    showValue: c = !0,
+    valuePosition: p = "horizontal",
+    valueLabel: b,
+    ariaLabel: m,
+    helper: s,
+    className: I
+  } = f(r), L = j(), o = w ?? `tedi-progress-bar-${L.replace(/[^a-zA-Z0-9-]/g, "")}`, t = `${o}__label`, u = s ? s.id ?? `${o}__helper` : void 0, d = A(x), _ = b ?? `${Math.round(d)}%`, v = l ? /* @__PURE__ */ a(
+    R,
+    {
+      id: o,
+      label: l,
+      required: B,
+      renderWithoutLabel: !0,
+      className: e["tedi-progress-bar__label"]
+    }
+  ) : null, P = c && p === "horizontal" ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null, V = /* @__PURE__ */ a(
+    "div",
+    {
+      id: o,
+      role: "progressbar",
+      "aria-valuenow": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": b,
+      "aria-labelledby": l && !m ? t : void 0,
+      "aria-label": m || void 0,
+      "aria-describedby": u,
+      className: e["tedi-progress-bar__track"],
+      children: /* @__PURE__ */ a("div", { className: e["tedi-progress-bar__fill"], style: { width: `${d}%` } })
+    }
+  ), g = c && p === "bottom", k = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__row"], children: [
+    V,
+    P
+  ] }), $ = s || g ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__hint-row"], children: [
+    s ? /* @__PURE__ */ a(F, { ...s, id: u, className: N(e["tedi-progress-bar__hint"], s.className) }) : null,
+    g ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null
+  ] }) : null, h = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__group"], children: [
+    k,
+    $
+  ] }), z = l && n === "horizontal";
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: N(e["tedi-progress-bar"], { [e["tedi-progress-bar--small"]]: y }, I),
+      "data-name": "progress-bar",
+      children: [
+        l && n === "top" ? /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__label-wrapper"], children: v }) : null,
+        z ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__main"], children: [
+          /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__inline-label"], children: v }),
+          h
+        ] }) : h
+      ]
+    }
+  );
+};
+C.displayName = "ProgressBar";
+export {
+  C as ProgressBar
+};

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={"tedi-progress-bar":"tedi-progress-bar-770f14b0","tedi-progress-bar__main":"tedi-progress-bar__main-e6d028ee","tedi-progress-bar__inline-label":"tedi-progress-bar__inline-label-92e2bcb6","tedi-progress-bar__group":"tedi-progress-bar__group-03a58869","tedi-progress-bar__row":"tedi-progress-bar__row-89a78ec6","tedi-progress-bar__label":"tedi-progress-bar__label-af2d533b","tedi-progress-bar__track":"tedi-progress-bar__track-519efc0e","tedi-progress-bar__fill":"tedi-progress-bar__fill-5eaa3943","tedi-progress-bar__value":"tedi-progress-bar__value-f105b0d1","tedi-progress-bar__hint-row":"tedi-progress-bar__hint-row-7e6ce05b","tedi-progress-bar__hint":"tedi-progress-bar__hint-886a36f5","tedi-progress-bar--small":"tedi-progress-bar--small-fbdb4f60"};exports.default=r;

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.es.js

@@ -0,0 +1,17 @@
+const r = {
+  "tedi-progress-bar": "tedi-progress-bar-770f14b0",
+  "tedi-progress-bar__main": "tedi-progress-bar__main-e6d028ee",
+  "tedi-progress-bar__inline-label": "tedi-progress-bar__inline-label-92e2bcb6",
+  "tedi-progress-bar__group": "tedi-progress-bar__group-03a58869",
+  "tedi-progress-bar__row": "tedi-progress-bar__row-89a78ec6",
+  "tedi-progress-bar__label": "tedi-progress-bar__label-af2d533b",
+  "tedi-progress-bar__track": "tedi-progress-bar__track-519efc0e",
+  "tedi-progress-bar__fill": "tedi-progress-bar__fill-5eaa3943",
+  "tedi-progress-bar__value": "tedi-progress-bar__value-f105b0d1",
+  "tedi-progress-bar__hint-row": "tedi-progress-bar__hint-row-7e6ce05b",
+  "tedi-progress-bar__hint": "tedi-progress-bar__hint-886a36f5",
+  "tedi-progress-bar--small": "tedi-progress-bar--small-fbdb4f60"
+};
+export {
+  r as default
+};

package/src/tedi/components/loaders/skeleton/skeleton.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),x=require("../../../providers/accessibility-provider/accessibility-provider.cjs.js"),S=require("../../../providers/accessibility-provider/use-declare-loader.cjs.js"),L=require("./skeleton.module.scss.cjs.js"),g=require("./skeleton-block/skeleton-block.cjs.js"),y=require("../../../providers/label-provider/use-labels.cjs.js"),o=d=>{const{getLabel:l}=y.useLabels(),{children:m,className:k,label:e=l("skeleton.loading"),completedLabel:t=l("skeleton.loading-completed"),labelDelay:s=200,...b}=d,f=v.default(L.default["tedi-skeleton"],k),r=n.useContext(x.AccessibilityContext),[a,c]=n.useState(null);return S.useDeclareLoader(e,t,s),n.useEffect(()=>{if(!r){let i=!0;const q=setTimeout(()=>{i&&c(e)},s);return()=>{i=!1,clearTimeout(q),c(t)}}},[r,e,t,s]),u.jsxs("div",{"data-name":"skeleton",...b,className:f,children:[a&&u.jsx("span",{className:"sr-only",role:"status","aria-live":"assertive","aria-atomic":"true",children:a}),m]})};o.Block=g.SkeletonBlock;exports.Skeleton=o;exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),S=require("../../../providers/accessibility-provider/accessibility-provider.cjs.js"),v=require("../../../providers/accessibility-provider/use-declare-loader.cjs.js"),y=require("./skeleton.module.scss.cjs.js"),L=require("./skeleton-block/skeleton-block.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),u=d=>{const{getLabel:o}=g.useLabels(),{children:m,className:k,label:e=o("skeleton.loading"),completedLabel:t=o("skeleton.loading-completed"),labelDelay:s=200,...b}=d,f=x.default(y.default["tedi-skeleton"],k),l=n.useContext(S.AccessibilityContext),[r,c]=n.useState(null);return v.useDeclareLoader(e,t,s),n.useEffect(()=>{if(!l){let a=!0;const q=setTimeout(()=>{a&&c(e)},s);return()=>{a=!1,clearTimeout(q),c(t)}}},[l,e,t,s]),i.jsxs("div",{"data-name":"skeleton",...b,className:f,children:[r&&i.jsx("span",{className:"sr-only",role:"status","aria-live":"assertive","aria-atomic":"true",children:r}),m]})};u.Block=L.SkeletonBlock;exports.Skeleton=u;

package/src/tedi/components/loaders/skeleton/skeleton.d.ts

@@ -31,6 +31,6 @@ export interface SkeletonProps {
 }
 export declare const Skeleton: {
     (props: SkeletonProps): JSX.Element;
-    Block: (props: import('./skeleton-block/skeleton-block').SkeletonBlockProps) => import("react/jsx-runtime").JSX.Element;
+    Block: (props: import('.').SkeletonBlockProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Skeleton;

package/src/tedi/components/loaders/skeleton/skeleton.es.js

@@ -14,15 +14,15 @@ const B = (c) => {
     completedLabel: t = s("skeleton.loading-completed"),
     labelDelay: o = 200,
     ...u
-  } = c, d = b(S["tedi-skeleton"], m), l = x.useContext(L), [n, a] = v(null);
+  } = c, d = b(S["tedi-skeleton"], m), l = x.useContext(L), [n, r] = v(null);
   return N(e, t, o), y(() => {
     if (!l) {
-      let r = !0;
+      let a = !0;
       const f = setTimeout(() => {
-        r && a(e);
+        a && r(e);
       }, o);
       return () => {
-        r = !1, clearTimeout(f), a(t);
+        a = !1, clearTimeout(f), r(t);
       };
     }
   }, [l, e, t, o]), /* @__PURE__ */ p("div", { "data-name": "skeleton", ...u, className: d, children: [
@@ -32,6 +32,5 @@ const B = (c) => {
 };
 B.Block = g;
 export {
-  B as Skeleton,
-  B as default
+  B as Skeleton
 };

package/src/tedi/components/loaders/spinner/spinner.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),p=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=require("../../../providers/label-provider/use-labels.cjs.js"),m=s=>{const{getLabel:a}=f.useLabels(),{getCurrentBreakpointProps:l}=p.useBreakpointProps(s.defaultServerBreakpoint),{className:o,size:r=16,color:i="primary",label:c=a("spinner.loading"),position:t}=l(s),d=u.default(e.default["tedi-spinner"],o,t&&e.default[`tedi-spinner--${t}`],r&&e.default[`tedi-spinner--size-${r}`],i&&e.default[`tedi-spinner--color-${i}`]);return n.jsxs("span",{className:d,role:"status","aria-live":"polite","data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),p=require("../../../providers/label-provider/use-labels.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getLabel:a}=p.useLabels(),{getCurrentBreakpointProps:l}=f.useBreakpointProps(s.defaultServerBreakpoint),{className:o,size:r=16,color:i="primary",label:c=a("spinner.loading"),position:t}=l(s),d=u.default(e.default["tedi-spinner"],o,t&&e.default[`tedi-spinner--${t}`],r&&e.default[`tedi-spinner--size-${r}`],i&&e.default[`tedi-spinner--color-${i}`]);return n.jsxs("span",{className:d,role:"status","aria-live":"polite","data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;

package/src/tedi/components/loaders/spinner/spinner.es.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
 import e from "./spinner.module.scss.es.js";
-import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as u } from "../../../providers/label-provider/use-labels.es.js";
+import { useLabels as f } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as u } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 const v = (s) => {
-  const { getLabel: o } = u(), { getCurrentBreakpointProps: a } = f(s.defaultServerBreakpoint), {
+  const { getLabel: o } = f(), { getCurrentBreakpointProps: a } = u(s.defaultServerBreakpoint), {
     className: l,
     size: i = 16,
     color: n = "primary",