@tedi-design-system/react 18.0.0-rc.11 → 18.0.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.11",
+  "version": "18.0.0-rc.12",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/layout/footer/footer.d.ts

@@ -8,6 +8,9 @@ export type FooterCategory = {
     heading: React.ReactNode;
     icon?: string | IconProps;
 };
+/**
+ * @deprecated Use `Footer` from `@tedi-design-system/react/tedi` instead.
+ */
 export type FooterProps = {
     /**
      * Footer Categorys
@@ -30,5 +33,8 @@ export type FooterProps = {
      */
     bottomElement?: React.ReactNode;
 };
+/**
+ * @deprecated Use `Footer` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),H=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),J=require("../../../providers/printing-provider/printing-provider.cjs.js"),Q=require("../../base/icon/icon.cjs.js"),U=require("../../base/typography/text/text.cjs.js"),V=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),N=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),P=x=>{const{getCurrentBreakpointProps:k}=W.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=X.useLabels(),{id:r,children:w,className:O,openText:j=h("open"),closeText:y=h("close"),hideCollapseText:$=!1,title:d,titleRowProps:S,defaultOpen:B,open:c,onToggle:u,arrowType:s="default",size:o="default",underline:M=!0,toggleLabel:g,iconOnly:R=!1,controlsId:v,inverted:T=!1,...L}=k(x),b=v!==void 0,p=`${r}__trigger`,f=`${r}__content`,D=`${r}__animate`,[C,E]=_.useState(()=>B),m=J.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:C),[m,c,C]),z=R===!0&&!d,K=T&&s!=="secondary",A=n.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],z&&e.default["tedi-collapse--icon-only"],K&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${s}`],O),q=()=>{const l=!a;E(l),u==null||u(l)},F=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},G=g||(a?y:j),I=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...L,className:A,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":G,"aria-expanded":a,"aria-controls":b?v:f,onKeyDown:F,onClick:q,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...S,element:"span",children:[d&&t.jsx(i.Col,{"aria-hidden":"true",children:d}),t.jsx(i.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(V.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:n.default({"visually-hidden":$}),children:t.jsx(U.Text,{element:"span",className:n.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:M}),children:a?y:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:n.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${s}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(Q.Icon,{className:n.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${s}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:o==="small"||s==="secondary"?18:24})})})]})})]})}),!b&&(m?I:t.jsx(H.default,{id:D,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:I}))]})};exports.Collapse=P;exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),H=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),J=require("../../../providers/printing-provider/printing-provider.cjs.js"),Q=require("../../base/icon/icon.cjs.js"),U=require("../../base/typography/text/text.cjs.js"),V=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),N=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),P=x=>{const{getCurrentBreakpointProps:k}=W.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=X.useLabels(),{id:r,children:w,className:O,openText:j=h("open"),closeText:y=h("close"),hideCollapseText:$=!1,title:d,titleRowProps:S,defaultOpen:B,open:c,onToggle:u,arrowType:n="default",size:o="default",underline:M=!0,toggleLabel:g,iconOnly:R=!1,controlsId:v,inverted:T=!1,...L}=k(x),b=v!==void 0,p=`${r}__trigger`,f=`${r}__content`,D=`${r}__animate`,[C,E]=_.useState(()=>B),m=J.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:C),[m,c,C]),z=R===!0&&!d,K=T&&n!=="secondary",A=s.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],z&&e.default["tedi-collapse--icon-only"],K&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${n}`],O),q=()=>{const l=!a;E(l),u==null||u(l)},F=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},G=g||(a?y:j),I=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...L,className:A,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":G,"aria-expanded":a,"aria-controls":b?v:f,onKeyDown:F,onClick:q,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...S,element:"span",children:[d&&t.jsx(i.Col,{"aria-hidden":"true",children:d}),t.jsx(i.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(V.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:s.default({"visually-hidden":$}),children:t.jsx(U.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:M}),children:a?y:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(Q.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",color:"inherit",size:o==="small"||n==="secondary"?18:24})})})]})})]})}),!b&&(m?I:t.jsx(H.default,{id:D,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:I}))]})};exports.Collapse=P;exports.default=P;

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import n from "../../../../../external/classnames/index.es.js";
-import h from "react";
+import f from "react";
 import G from "../../../../../external/react-animate-height/dist/esm/index.es.js";
 import { usePrint as J } from "../../../providers/printing-provider/printing-provider.es.js";
 import { Icon as Q } from "../../base/icon/icon.es.js";
@@ -32,7 +32,7 @@ const pe = (w) => {
     controlsId: C,
     inverted: L = !1,
     ...M
-  } = $(w), I = C !== void 0, m = `${r}__trigger`, u = `${r}__content`, R = `${r}__animate`, [N, z] = h.useState(() => j), _ = J(), o = h.useMemo(
+  } = $(w), I = C !== void 0, m = `${r}__trigger`, u = `${r}__content`, R = `${r}__animate`, [N, z] = f.useState(() => j), _ = J(), o = f.useMemo(
     () => _ || (d !== void 0 ? d : N),
     [_, d, N]
   ), K = E === !0 && !c, A = L && a !== "secondary", H = n(
@@ -48,11 +48,11 @@ const pe = (w) => {
     z(l), p == null || p(l);
   }, q = (l) => {
     (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), k());
-  }, F = b || (o ? x : v), O = h.useMemo(
+  }, F = b || (o ? x : v), O = f.useMemo(
     () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
     [g, u, m]
   );
-  return /* @__PURE__ */ f("div", { "data-name": "collapse", ...M, className: H, children: [
+  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...M, className: H, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -65,9 +65,9 @@ const pe = (w) => {
         "aria-controls": I ? C : u,
         onKeyDown: q,
         onClick: k,
-        children: /* @__PURE__ */ f(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...T, element: "span", children: [
+        children: /* @__PURE__ */ h(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...T, element: "span", children: [
           c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
-          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ f(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
             /* @__PURE__ */ t(V, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": S }), children: /* @__PURE__ */ t(
               U,
               {
@@ -95,6 +95,7 @@ const pe = (w) => {
                       i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
+                    color: "inherit",
                     size: i === "small" || a === "secondary" ? 18 : 24
                   }
                 )

package/src/tedi/components/layout/footer/footer-body/footer-body.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),p=require("react"),o=require("../footer.module.scss.cjs.js"),B=require("../footer-context.cjs.js"),b=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),s=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),t=r=>{const{getCurrentBreakpointProps:u}=b.useBreakpointProps(r.defaultServerBreakpoint),{children:a,className:d,columns:e}=u(r),l=s.useBreakpoint(),{mobileBreakpoint:c}=p.useContext(B.FooterContext),i=s.isBreakpointBelow(l,c),n=!i&&typeof e=="number"&&e>0;return f.jsx("div",{"data-name":"footer-body",className:m.default(o.default["tedi-footer-body"],{[o.default["tedi-footer-body--mobile"]]:i,[o.default["tedi-footer-body--grid"]]:n},d),style:n?{gridTemplateColumns:`repeat(${e}, minmax(0, 1fr))`}:void 0,children:a})};t.displayName="Footer.Body";exports.FooterBody=t;exports.default=t;

package/src/tedi/components/layout/footer/footer-body/footer-body.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+type FooterBodyBreakpointProps = {
+    /**
+     * Number of equal-width columns laid out per row, controllable per breakpoint via the
+     * `sm`/`md`/`lg`/`xl`/`xxl` keys. The keys are **mobile-first** — a value applies at that
+     * breakpoint and up — so raise the count as the viewport widens
+     * (e.g. `columns={2} md={{ columns: 3 }} lg={{ columns: 4 }}`). When set, the body uses a CSS grid
+     * of `columns` equal tracks; when omitted, columns are content-sized and spread with
+     * `space-between` (the default). Ignored below the footer's `mobileBreakpoint`, where the body
+     * always stacks into a single column.
+     */
+    columns?: number;
+};
+export interface FooterBodyProps extends BreakpointSupport<FooterBodyBreakpointProps> {
+    /**
+     * `<Footer.Section>` children. Other nodes render verbatim but won't pick up the
+     * mobile-collapse behaviour.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const FooterBody: {
+    (props: FooterBodyProps): JSX.Element;
+    displayName: string;
+};
+export default FooterBody;

package/src/tedi/components/layout/footer/footer-body/footer-body.es.js

@@ -0,0 +1,28 @@
+import { jsx as p } from "react/jsx-runtime";
+import l from "../../../../../../external/classnames/index.es.js";
+import { useContext as f } from "react";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as c } from "../footer-context.es.js";
+import { useBreakpointProps as u } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as y, isBreakpointBelow as b } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const B = (t) => {
+  const { getCurrentBreakpointProps: s } = u(t.defaultServerBreakpoint), { children: m, className: a, columns: o } = s(t), n = y(), { mobileBreakpoint: d } = f(c), r = b(n, d), i = !r && typeof o == "number" && o > 0;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-name": "footer-body",
+      className: l(
+        e["tedi-footer-body"],
+        { [e["tedi-footer-body--mobile"]]: r, [e["tedi-footer-body--grid"]]: i },
+        a
+      ),
+      style: i ? { gridTemplateColumns: `repeat(${o}, minmax(0, 1fr))` } : void 0,
+      children: m
+    }
+  );
+};
+B.displayName = "Footer.Body";
+export {
+  B as FooterBody,
+  B as default
+};

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("../../../../../../external/classnames/index.cjs.js"),o=require("react"),r=require("../footer.module.scss.cjs.js"),x=require("../footer-context.cjs.js"),d=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),s=({children:a,separator:u=!1,className:m})=>{const c=d.useBreakpoint(),{mobileBreakpoint:f,maxWidth:n}=o.useContext(x.FooterContext),b=d.isBreakpointBelow(c,f),i=u?o.Children.toArray(a).filter(e=>o.isValidElement(e)||e):null;return t.jsx("div",{"data-name":"footer-bottom",className:p.default(r.default["tedi-footer-bottom"],{[r.default["tedi-footer-bottom--mobile"]]:b},m),children:t.jsx("div",{className:r.default["tedi-footer-bottom__inner"],style:n!==void 0?{maxWidth:n}:void 0,children:i?i.map((e,l)=>t.jsxs(o.Fragment,{children:[e,l<i.length-1&&t.jsx("span",{className:r.default["tedi-footer-bottom__dot"],"aria-hidden":"true"})]},l)):a})})};s.displayName="Footer.Bottom";exports.FooterBottom=s;exports.default=s;

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface FooterBottomProps {
+    /**
+     * Bottom-row content — typically a sequence of `<Link>` elements. On mobile the gap shrinks
+     * and items wrap to multiple lines.
+     */
+    children: ReactNode;
+    /**
+     * Insert a small dot between items (matches the Figma "with separator" bottom variant). When
+     * `false`, items are spaced only by the flex `gap`.
+     * @default false
+     */
+    separator?: boolean;
+    /**
+     * Additional class name on the bottom strip.
+     */
+    className?: string;
+}
+export declare const FooterBottom: {
+    ({ children, separator, className }: FooterBottomProps): JSX.Element;
+    displayName: string;
+};
+export default FooterBottom;

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.es.js

@@ -0,0 +1,25 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { useContext as b, Children as u, isValidElement as B, Fragment as h } from "react";
+import t from "../footer.module.scss.es.js";
+import { FooterContext as x } from "../footer-context.es.js";
+import { useBreakpoint as N, isBreakpointBelow as k } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const v = ({ children: i, separator: a = !1, className: n }) => {
+  const l = N(), { mobileBreakpoint: d, maxWidth: m } = b(x), f = k(l, d), e = a ? u.toArray(i).filter((o) => B(o) || o) : null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-name": "footer-bottom",
+      className: c(t["tedi-footer-bottom"], { [t["tedi-footer-bottom--mobile"]]: f }, n),
+      children: /* @__PURE__ */ r("div", { className: t["tedi-footer-bottom__inner"], style: m !== void 0 ? { maxWidth: m } : void 0, children: e ? e.map((o, s) => /* @__PURE__ */ p(h, { children: [
+        o,
+        s < e.length - 1 && /* @__PURE__ */ r("span", { className: t["tedi-footer-bottom__dot"], "aria-hidden": "true" })
+      ] }, s)) : i })
+    }
+  );
+};
+v.displayName = "Footer.Bottom";
+export {
+  v as FooterBottom,
+  v as default
+};

package/src/tedi/components/layout/footer/footer-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({mobileBreakpoint:"sm"});exports.FooterContext=t;

package/src/tedi/components/layout/footer/footer-context.d.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from '../../../helpers';
+export interface FooterContextValue {
+    /**
+     * Viewport breakpoint at and below which every Footer subcomponent
+     * (`Footer.Body`, `Footer.Bottom`, `Footer.Side`, `Footer.Section`)
+     * switches to its stacked mobile layout — accordion sections, stacked
+     * sides, wrapped bottom strip.
+     *
+     * Set on `<Footer mobileBreakpoint="…">`. Subcomponents read from this
+     * context so all five sites agree on the threshold; without it they'd
+     * each hardcode their own value and drift apart on intermediate
+     * viewports (e.g. tablet 600–760px).
+     */
+    mobileBreakpoint: Breakpoint;
+    /**
+     * Optional cap for the inner content width (the column row and the bottom
+     * strip's content), centered inside the full-bleed backgrounds. Set on
+     * `<Footer maxWidth="…">`; subcomponents read it so the body row and the
+     * bottom strip align to the same width.
+     */
+    maxWidth?: number | string;
+}
+export declare const FooterContext: import('react').Context<FooterContextValue>;

package/src/tedi/components/layout/footer/footer-context.es.js

@@ -0,0 +1,7 @@
+import { createContext as o } from "react";
+const e = o({
+  mobileBreakpoint: "sm"
+});
+export {
+  e as FooterContext
+};

package/src/tedi/components/layout/footer/footer-section/footer-section.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../../../../../../external/classnames/index.cjs.js"),u=require("react"),g=require("../../../base/icon/icon.cjs.js"),q=require("../../../base/typography/heading/heading.cjs.js"),b=require("../../../buttons/collapse/collapse.cjs.js"),t=require("../footer.module.scss.cjs.js"),v=require("../footer-context.cjs.js"),s=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),i=({heading:o,icon:n,collapsible:f=!1,defaultOpen:p=!1,iconBreakpoint:m="lg",children:r,className:_})=>{const l=s.useBreakpoint(),{mobileBreakpoint:x}=u.useContext(v.FooterContext),c=s.isBreakpointBelow(l,x),j=s.isBreakpointBelow(l,m),a=f&&c,h=u.useId();return e.jsxs("div",{"data-name":"footer-section",className:d.default(t.default["tedi-footer-section"],{[t.default["tedi-footer-section--collapsible"]]:a},_),children:[n&&!j&&e.jsx("span",{className:t.default["tedi-footer-section__icon"],children:e.jsx(g.Icon,{name:n,color:"white",size:24})}),e.jsx("div",{className:d.default(t.default["tedi-footer-section__container"],{[t.default["tedi-footer-section__container--mobile"]]:c}),children:a?e.jsx(b.Collapse,{id:`tedi-footer-section-${h}`,title:e.jsx(q.Heading,{element:"h6",color:"white",children:o}),size:"small",inverted:!0,hideCollapseText:!0,defaultOpen:p,toggleLabel:typeof o=="string"?o:void 0,className:t.default["tedi-footer-section__collapse"],titleRowProps:{gutter:0},children:e.jsx("div",{className:t.default["tedi-footer-section__content-inner"],children:r})}):e.jsxs(e.Fragment,{children:[e.jsx("strong",{className:t.default["tedi-footer-section__heading"],children:o}),e.jsx("div",{className:t.default["tedi-footer-section__content"],children:r})]})})]})};i.displayName="Footer.Section";exports.FooterSection=i;exports.default=i;

package/src/tedi/components/layout/footer/footer-section/footer-section.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { Breakpoint } from '../../../../helpers';
+export interface FooterSectionProps {
+    /**
+     * Section heading text. Rendered as `<strong>` on desktop or as the trigger label of a
+     * `<Collapse>` on mobile (when `collapsible` is true).
+     */
+    heading: ReactNode;
+    /**
+     * Optional Material Symbols icon name shown in a circular tinted background next to
+     * the heading on desktop. Automatically hidden below the `lg` breakpoint to save space.
+     */
+    icon?: string;
+    /**
+     * When `true`, the section's link list collapses into an accordion below the
+     * footer's `mobileBreakpoint` (`sm` by default) — the heading turns into a
+     * toggle button (wired via the shared `<Collapse>` component for keyboard,
+     * focus, and aria-expanded handling). Desktop layout is unaffected.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Initial open state of the collapse — only relevant when `collapsible` is true and the
+     * viewport is below the footer's mobile breakpoint.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Viewport breakpoint at and below which the section's icon is hidden to save
+     * horizontal space. Separate from the footer-wide `mobileBreakpoint` because
+     * icons are typically dropped one tier earlier than the layout flips.
+     * @default lg
+     */
+    iconBreakpoint?: Breakpoint;
+    /**
+     * Section content — typically a sequence of `<Link>` elements.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name on the section root.
+     */
+    className?: string;
+}
+export declare const FooterSection: {
+    ({ heading, icon, collapsible, defaultOpen, iconBreakpoint, children, className, }: FooterSectionProps): JSX.Element;
+    displayName: string;
+};
+export default FooterSection;

package/src/tedi/components/layout/footer/footer-section/footer-section.es.js

@@ -0,0 +1,65 @@
+import { jsxs as c, jsx as o, Fragment as b } from "react/jsx-runtime";
+import a from "../../../../../../external/classnames/index.es.js";
+import { useContext as g, useId as v } from "react";
+import { Icon as x } from "../../../base/icon/icon.es.js";
+import { Heading as C } from "../../../base/typography/heading/heading.es.js";
+import { Collapse as k } from "../../../buttons/collapse/collapse.es.js";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as w } from "../footer-context.es.js";
+import { useBreakpoint as y, isBreakpointBelow as m } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const B = ({
+  heading: t,
+  icon: i,
+  collapsible: d = !1,
+  defaultOpen: p = !1,
+  iconBreakpoint: f = "lg",
+  children: s,
+  className: _
+}) => {
+  const r = y(), { mobileBreakpoint: h } = g(w), n = m(r, h), N = m(r, f), l = d && n, u = v();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-name": "footer-section",
+      className: a(
+        e["tedi-footer-section"],
+        { [e["tedi-footer-section--collapsible"]]: l },
+        _
+      ),
+      children: [
+        i && !N && /* @__PURE__ */ o("span", { className: e["tedi-footer-section__icon"], children: /* @__PURE__ */ o(x, { name: i, color: "white", size: 24 }) }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: a(e["tedi-footer-section__container"], {
+              [e["tedi-footer-section__container--mobile"]]: n
+            }),
+            children: l ? /* @__PURE__ */ o(
+              k,
+              {
+                id: `tedi-footer-section-${u}`,
+                title: /* @__PURE__ */ o(C, { element: "h6", color: "white", children: t }),
+                size: "small",
+                inverted: !0,
+                hideCollapseText: !0,
+                defaultOpen: p,
+                toggleLabel: typeof t == "string" ? t : void 0,
+                className: e["tedi-footer-section__collapse"],
+                titleRowProps: { gutter: 0 },
+                children: /* @__PURE__ */ o("div", { className: e["tedi-footer-section__content-inner"], children: s })
+              }
+            ) : /* @__PURE__ */ c(b, { children: [
+              /* @__PURE__ */ o("strong", { className: e["tedi-footer-section__heading"], children: t }),
+              /* @__PURE__ */ o("div", { className: e["tedi-footer-section__content"], children: s })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+B.displayName = "Footer.Section";
+export {
+  B as FooterSection,
+  B as default
+};

package/src/tedi/components/layout/footer/footer-side/footer-side.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),f=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),e=require("../footer.module.scss.cjs.js"),k=require("../footer-context.cjs.js"),B=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),t=o=>{const{getCurrentBreakpointProps:i}=B.useBreakpointProps(o.defaultServerBreakpoint),s=r.useBreakpoint(),{mobileBreakpoint:n}=m.useContext(k.FooterContext),a=r.isBreakpointBelow(s,n),{placement:u="start",position:d="center",children:c,className:l}=i(o,{placement:"start",position:"center"});return p.jsx("div",{"data-name":"footer-side",className:f.default(e.default["tedi-footer-side"],e.default[`tedi-footer-side--${u}`],e.default[`tedi-footer-side--vertical-${d}`],{[e.default["tedi-footer-side--mobile"]]:a},l),children:c})};t.displayName="Footer.Side";exports.FooterSide=t;exports.default=t;

package/src/tedi/components/layout/footer/footer-side/footer-side.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+export type FooterSidePlacement = 'start' | 'end';
+export type FooterSidePosition = 'start' | 'center' | 'end';
+export interface FooterSideBaseProps {
+    /**
+     * Where the side slot sits relative to `<Footer.Body>`. `'start'` renders before the body
+     * (left on LTR, and first — above the sections — once the footer stacks on mobile); `'end'`
+     * renders after the body (right on LTR, and last — below the sections — when stacked).
+     *
+     * Accepts breakpoint props, so the logo can sit on the side on desktop and drop to the bottom
+     * on mobile — e.g. `placement="end" sm={{ placement: 'start' }}` keeps the logo on the left
+     * from `sm` up and moves it to the last position once the footer collapses to its stacked layout.
+     * @default start
+     */
+    placement?: FooterSidePlacement;
+    /**
+     * Vertical alignment of the contents inside the side slot. Accepts breakpoint props.
+     * @default center
+     */
+    position?: FooterSidePosition;
+    /**
+     * Side content — typically a `<img>` logo.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name on the side wrapper.
+     */
+    className?: string;
+}
+export type FooterSideProps = BreakpointSupport<FooterSideBaseProps>;
+export declare const FooterSide: {
+    (props: FooterSideProps): JSX.Element;
+    displayName: string;
+};
+export default FooterSide;

package/src/tedi/components/layout/footer/footer-side/footer-side.es.js

@@ -0,0 +1,34 @@
+import { jsx as d } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { useContext as l } from "react";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as f } from "../footer-context.es.js";
+import { useBreakpointProps as k } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as u, isBreakpointBelow as B } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const b = (o) => {
+  const { getCurrentBreakpointProps: t } = k(o.defaultServerBreakpoint), r = u(), { mobileBreakpoint: i } = l(f), s = B(r, i), {
+    placement: a = "start",
+    position: n = "center",
+    children: m,
+    className: p
+  } = t(o, { placement: "start", position: "center" });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-name": "footer-side",
+      className: c(
+        e["tedi-footer-side"],
+        e[`tedi-footer-side--${a}`],
+        e[`tedi-footer-side--vertical-${n}`],
+        { [e["tedi-footer-side--mobile"]]: s },
+        p
+      ),
+      children: m
+    }
+  );
+};
+b.displayName = "Footer.Side";
+export {
+  b as FooterSide,
+  b as default
+};

package/src/tedi/components/layout/footer/footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),n=require("./footer.module.scss.cjs.js"),B=require("./footer-body/footer-body.cjs.js"),q=require("./footer-bottom/footer-bottom.cjs.js"),g=require("./footer-context.cjs.js"),k=require("./footer-section/footer-section.cjs.js"),F=require("./footer-side/footer-side.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),o=({children:y,className:v,mobileBreakpoint:s="sm",maxWidth:t})=>{const S=m.useBreakpoint(),_=m.isBreakpointBelow(S,s),{getCurrentBreakpointProps:j}=P.useBreakpointProps(),x=l.useMemo(()=>({mobileBreakpoint:s,maxWidth:t}),[s,t]),c=[],d=[];let u=null,f=null;const i=[];return l.Children.forEach(y,e=>{if(!l.isValidElement(e)){e!=null&&e!==!1&&i.push(e);return}const a=e.type;if(a===F.FooterSide){const{placement:b="start"}=j(e.props);(b==="end"?d:c).push(e);return}if(a===B.FooterBody){u=e;return}if(a===q.FooterBottom){f=e;return}i.push(e)}),r.jsx(g.FooterContext.Provider,{value:x,children:r.jsxs("footer",{"data-name":"footer",className:p.default(n.default["tedi-footer"],v),children:[r.jsxs("div",{className:p.default(n.default["tedi-footer__container"],{[n.default["tedi-footer__container--mobile"]]:_}),style:t!==void 0?{maxWidth:t,marginInline:"auto"}:void 0,children:[c,u!==null&&r.jsx("div",{className:n.default["tedi-footer__center"],children:u}),i,d]}),f]})})};o.Side=F.FooterSide;o.Body=B.FooterBody;o.Section=k.FooterSection;o.Bottom=q.FooterBottom;o.displayName="Footer";exports.Footer=o;exports.default=o;

package/src/tedi/components/layout/footer/footer.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { FooterSideProps } from './footer-side/footer-side';
+export interface FooterProps {
+    /**
+     * `<Footer.Side>`, `<Footer.Body>` (with `<Footer.Section>` children), and `<Footer.Bottom>` slots.
+     *
+     * Recognised arrangement:
+     * 1. Zero or more `<Footer.Side placement="start">` elements (logos on the left).
+     * 2. Exactly one `<Footer.Body>`.
+     * 3. Zero or more `<Footer.Side placement="end">` elements (logos on the right).
+     * 4. Optional `<Footer.Bottom>` rendered below the main row as a strip with separator dots.
+     *
+     * Other nodes are rendered verbatim where the consumer placed them.
+     */
+    children: ReactNode;
+    /**
+     * Viewport breakpoint at and below which the footer switches to its stacked
+     * mobile layout — sections collapse into accordions, sides stack, the bottom
+     * strip wraps. Propagated to every Footer subcomponent via context so they
+     * agree on the threshold.
+     * @default sm
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Caps the inner content — the column row and the bottom strip's content — to a maximum width
+     * and centers it, while the dark backgrounds stay full-bleed. Pass any CSS length (e.g. `1280`,
+     * `'1280px'`, `'80rem'`). Omit to let the content fill the full width (with the 40px padding).
+     */
+    maxWidth?: number | string;
+    /**
+     * Additional class name on the `<footer>` root.
+     */
+    className?: string;
+}
+export declare const Footer: {
+    ({ children, className, mobileBreakpoint, maxWidth }: FooterProps): JSX.Element;
+    Side: {
+        (props: FooterSideProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        (props: import('./footer-body/footer-body').FooterBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        ({ heading, icon, collapsible, defaultOpen, iconBreakpoint, children, className, }: import('./footer-section/footer-section').FooterSectionProps): JSX.Element;
+        displayName: string;
+    };
+    Bottom: {
+        ({ children, separator, className }: import('./footer-bottom/footer-bottom').FooterBottomProps): JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Footer;

package/src/tedi/components/layout/footer/footer.es.js

@@ -0,0 +1,64 @@
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import c from "../../../../../external/classnames/index.es.js";
+import { useMemo as k, Children as C, isValidElement as P } from "react";
+import r from "./footer.module.scss.es.js";
+import { FooterBody as d } from "./footer-body/footer-body.es.js";
+import { FooterBottom as y } from "./footer-bottom/footer-bottom.es.js";
+import { FooterContext as j } from "./footer-context.es.js";
+import { FooterSection as x } from "./footer-section/footer-section.es.js";
+import { FooterSide as v } from "./footer-side/footer-side.es.js";
+import { useBreakpoint as E, isBreakpointBelow as M } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useBreakpointProps as V } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const t = ({ children: B, className: F, mobileBreakpoint: n = "sm", maxWidth: e }) => {
+  const _ = E(), N = M(_, n), { getCurrentBreakpointProps: S } = V(), b = k(
+    () => ({ mobileBreakpoint: n, maxWidth: e }),
+    [n, e]
+  ), a = [], p = [];
+  let s = null, f = null;
+  const i = [];
+  return C.forEach(B, (o) => {
+    if (!P(o)) {
+      o != null && o !== !1 && i.push(o);
+      return;
+    }
+    const m = o.type;
+    if (m === v) {
+      const { placement: g = "start" } = S(o.props);
+      (g === "end" ? p : a).push(o);
+      return;
+    }
+    if (m === d) {
+      s = o;
+      return;
+    }
+    if (m === y) {
+      f = o;
+      return;
+    }
+    i.push(o);
+  }), /* @__PURE__ */ l(j.Provider, { value: b, children: /* @__PURE__ */ u("footer", { "data-name": "footer", className: c(r["tedi-footer"], F), children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: c(r["tedi-footer__container"], { [r["tedi-footer__container--mobile"]]: N }),
+        style: e !== void 0 ? { maxWidth: e, marginInline: "auto" } : void 0,
+        children: [
+          a,
+          s !== null && /* @__PURE__ */ l("div", { className: r["tedi-footer__center"], children: s }),
+          i,
+          p
+        ]
+      }
+    ),
+    f
+  ] }) });
+};
+t.Side = v;
+t.Body = d;
+t.Section = x;
+t.Bottom = y;
+t.displayName = "Footer";
+export {
+  t as Footer,
+  t as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-footer":"tedi-footer-f088bd56","tedi-footer__container":"tedi-footer__container-ee64c062","tedi-footer__container--mobile":"tedi-footer__container--mobile-20a477c0","tedi-footer__center":"tedi-footer__center-25181d1f","tedi-footer-body":"tedi-footer-body-21881fd3","tedi-footer-body--grid":"tedi-footer-body--grid-a3777db4","tedi-footer-body--mobile":"tedi-footer-body--mobile-3310507d","tedi-footer-section":"tedi-footer-section-5b630c85","tedi-footer-section--collapsible":"tedi-footer-section--collapsible-8adbd143","tedi-footer-section__icon":"tedi-footer-section__icon-9c09e5d8","tedi-footer-section__container":"tedi-footer-section__container-3527098d","tedi-footer-section__container--mobile":"tedi-footer-section__container--mobile-a2563a40","tedi-footer-section__content":"tedi-footer-section__content-b2dc3f8b","tedi-footer-section__content-inner":"tedi-footer-section__content-inner-edb818fc","tedi-footer-section__heading":"tedi-footer-section__heading-fef39ed8","tedi-footer-section__collapse":"tedi-footer-section__collapse-ef9ed5bc","tedi-footer-side":"tedi-footer-side-f51f8e61","tedi-footer-side--vertical-start":"tedi-footer-side--vertical-start-50a9b280","tedi-footer-side--vertical-end":"tedi-footer-side--vertical-end-0da54b78","tedi-footer-side--start":"tedi-footer-side--start-4d4d7a07","tedi-footer-side--end":"tedi-footer-side--end-f24367c3","tedi-footer-side--mobile":"tedi-footer-side--mobile-31b9b02e","tedi-footer-bottom":"tedi-footer-bottom-f3128374","tedi-footer-bottom__inner":"tedi-footer-bottom__inner-9d79617c","tedi-footer-bottom--mobile":"tedi-footer-bottom--mobile-6510a7e3","tedi-footer-bottom__dot":"tedi-footer-bottom__dot-a7f48402"};exports.default=e;

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

@@ -0,0 +1,31 @@
+const e = {
+  "tedi-footer": "tedi-footer-f088bd56",
+  "tedi-footer__container": "tedi-footer__container-ee64c062",
+  "tedi-footer__container--mobile": "tedi-footer__container--mobile-20a477c0",
+  "tedi-footer__center": "tedi-footer__center-25181d1f",
+  "tedi-footer-body": "tedi-footer-body-21881fd3",
+  "tedi-footer-body--grid": "tedi-footer-body--grid-a3777db4",
+  "tedi-footer-body--mobile": "tedi-footer-body--mobile-3310507d",
+  "tedi-footer-section": "tedi-footer-section-5b630c85",
+  "tedi-footer-section--collapsible": "tedi-footer-section--collapsible-8adbd143",
+  "tedi-footer-section__icon": "tedi-footer-section__icon-9c09e5d8",
+  "tedi-footer-section__container": "tedi-footer-section__container-3527098d",
+  "tedi-footer-section__container--mobile": "tedi-footer-section__container--mobile-a2563a40",
+  "tedi-footer-section__content": "tedi-footer-section__content-b2dc3f8b",
+  "tedi-footer-section__content-inner": "tedi-footer-section__content-inner-edb818fc",
+  "tedi-footer-section__heading": "tedi-footer-section__heading-fef39ed8",
+  "tedi-footer-section__collapse": "tedi-footer-section__collapse-ef9ed5bc",
+  "tedi-footer-side": "tedi-footer-side-f51f8e61",
+  "tedi-footer-side--vertical-start": "tedi-footer-side--vertical-start-50a9b280",
+  "tedi-footer-side--vertical-end": "tedi-footer-side--vertical-end-0da54b78",
+  "tedi-footer-side--start": "tedi-footer-side--start-4d4d7a07",
+  "tedi-footer-side--end": "tedi-footer-side--end-f24367c3",
+  "tedi-footer-side--mobile": "tedi-footer-side--mobile-31b9b02e",
+  "tedi-footer-bottom": "tedi-footer-bottom-f3128374",
+  "tedi-footer-bottom__inner": "tedi-footer-bottom__inner-9d79617c",
+  "tedi-footer-bottom--mobile": "tedi-footer-bottom--mobile-6510a7e3",
+  "tedi-footer-bottom__dot": "tedi-footer-bottom__dot-a7f48402"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/footer/index.d.ts

@@ -0,0 +1,5 @@
+export * from './footer';
+export * from './footer-body/footer-body';
+export * from './footer-bottom/footer-bottom';
+export * from './footer-section/footer-section';
+export * from './footer-side/footer-side';