@tedi-design-system/react 14.4.0-rc.2 → 14.4.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.4.0-rc.2",
+  "version": "14.4.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {

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

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

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -3,31 +3,36 @@ import { BreakpointSupport } from '../../../helpers';
 import { RowProps } from '../../layout/grid';
 type CollapseBreakpointProps = {
     /**
-     * Whether the collapse should be initially open (uncontrolled mode).
-     * This is ignored when `open` and `onToggle` are provided.
+     * Whether the collapse should be initially open (uncontrolled mode)
+     * This is ignored when `open` and `onToggle` are provided
      * @default false
      */
     defaultOpen?: boolean;
     /**
-     * Controls the open/closed state of the collapse (controlled mode).
-     * Should be used together with `onToggle`.
+     * Controls the open/closed state of the collapse (controlled mode)
+     * Should be used together with `onToggle`
      */
     open?: boolean;
     /**
-     * Whether to visually hide the open/close text on the toggle button.
-     * Useful for icon-only toggles.
+     * Whether to visually hide the open/close text on the toggle button
+     * Useful for icon-only toggles
      * @default false
      */
     hideCollapseText?: boolean;
     /**
-     * Additional props to pass to the `Row` component used in the title area.
+     * Additional props to pass to the `Row` component used in the title area
      */
     titleRowProps?: RowProps;
     /**
-     * Custom class name for the root element.
+     * Custom class name for the root element
      */
     className?: string;
     arrowType?: 'default' | 'secondary';
+    /**
+     * Collapse text & icon size
+     * @default default
+     */
+    size?: 'default' | 'small';
     underline?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse__content":"tedi-collapse__content-350b91f8"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3"};exports.default=e;

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

@@ -1,10 +1,17 @@
 const e = {
   "tedi-collapse__title": "tedi-collapse__title-3e140e5c",
+  "tedi-collapse__text": "tedi-collapse__text-d150fea1",
   "tedi-collapse__text--underline": "tedi-collapse__text--underline-73ca86bd",
   "tedi-collapse__icon-wrapper": "tedi-collapse__icon-wrapper-d2b036ea",
   "tedi-collapse__icon": "tedi-collapse__icon-5156e480",
-  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
-  "tedi-collapse__content": "tedi-collapse__content-350b91f8"
+  "tedi-collapse__icon-wrapper--secondary": "tedi-collapse__icon-wrapper--secondary-3321348a",
+  "tedi-collapse__icon--secondary": "tedi-collapse__icon--secondary-f0f3125f",
+  "tedi-collapse__icon--default": "tedi-collapse__icon--default-9c7e19e4",
+  "tedi-collapse__icon-wrapper--default": "tedi-collapse__icon-wrapper--default-450808b2",
+  "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
+  "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
+  "tedi-collapse__content": "tedi-collapse__content-350b91f8",
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
 };
 export {
   e as default

package/src/tedi/components/overlays/overlay/overlay-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),x=require("./overlay.cjs.js"),p=d=>{const{children:u,classNames:e}=d,{open:l,x:f,y,strategy:m,focusManager:o,floating:h,arrowRef:g,getFloatingProps:v,placement:w,context:i,arrow:t,scrollLock:c}=s.useContext(x.OverlayContext);return s.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),l?n.jsx(r.FloatingPortal,{children:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:n.jsxs("div",{...v({ref:h,style:{position:m,left:f,top:y},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:a=>g.current=a,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),p=require("./overlay.cjs.js"),j=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:n,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:a}=d.useContext(p.OverlayContext);return d.useEffect(()=>{a&&(n?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[n,a]),n?l.jsx(r.FloatingPortal,{children:l.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:l.jsxs("div",{...x({ref:b,tabIndex:-1,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[l.jsx(r.FloatingArrow,{ref:c=>v.current=c,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=j;

package/src/tedi/components/overlays/overlay/overlay-content.d.ts

@@ -1,15 +1,40 @@
 import { ReactNode } from 'react';
 export interface OverlayContentProps {
     /**
-     * Content.
+     * Overlay content.
+     * Can contain any valid React nodes (text, elements, components).
      */
     children: ReactNode | ReactNode[];
     /**
-     * Additional class names.
+     * Additional class names for styling overlay elements.
      */
     classNames?: {
+        /**
+         * Class name applied to the floating content container.
+         */
         content: string;
+        /**
+         * Class name applied to the overlay arrow element.
+         */
         arrow: string;
     };
+    /**
+     * ID of the element that labels the overlay content.
+     *
+     * This is used to set the `aria-labelledby` attribute on the overlay container,
+     * providing an accessible name for screen readers.
+     *
+     * Typically points to a heading element inside the overlay (e.g. a title).
+     */
+    labelledBy?: string;
+    /**
+     * ID of the element that describes the overlay content.
+     *
+     * This is used to set the `aria-describedby` attribute on the overlay container,
+     * allowing screen readers to announce additional descriptive text.
+     *
+     * Useful for longer explanations or supporting content that complements the title.
+     */
+    describedBy?: string;
 }
 export declare const OverlayContent: (props: OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/tedi/components/overlays/overlay/overlay-content.es.js

@@ -1,55 +1,58 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import { FloatingPortal as v, FloatingFocusManager as w, FloatingArrow as x } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useContext as F, useEffect as b } from "react";
-import { OverlayContext as E } from "./overlay.es.js";
-const P = (d) => {
-  const { children: a, classNames: t } = d, {
-    open: n,
-    x: m,
-    y: s,
-    strategy: f,
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { FloatingPortal as w, FloatingFocusManager as x, FloatingArrow as F } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useContext as E, useEffect as C } from "react";
+import { OverlayContext as j } from "./overlay.es.js";
+const S = (a) => {
+  const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
+    open: l,
+    x: f,
+    y,
+    strategy: h,
     focusManager: o,
-    floating: h,
-    arrowRef: u,
-    getFloatingProps: y,
-    placement: g,
+    floating: u,
+    arrowRef: b,
+    getFloatingProps: g,
+    placement: p,
     context: r,
-    arrow: e,
+    arrow: t,
     scrollLock: i
-  } = F(E);
-  return b(() => {
-    i && (n ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
-  }, [n, i]), n ? /* @__PURE__ */ l(v, { children: /* @__PURE__ */ l(w, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ p(
+  } = E(j);
+  return C(() => {
+    i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
+  }, [l, i]), l ? /* @__PURE__ */ n(w, { children: /* @__PURE__ */ n(x, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ v(
     "div",
     {
-      ...y({
-        ref: h,
+      ...g({
+        ref: u,
+        tabIndex: -1,
+        "aria-labelledby": s,
+        "aria-describedby": m,
         style: {
-          position: f,
-          left: m,
-          top: s
+          position: h,
+          left: f,
+          top: y
         },
-        className: t == null ? void 0 : t.content
+        className: e == null ? void 0 : e.content
       }),
-      "data-placement": g,
+      "data-placement": p,
       "data-testid": "overlay-content",
       children: [
-        /* @__PURE__ */ l(
-          x,
+        /* @__PURE__ */ n(
+          F,
           {
-            ref: (c) => u.current = c,
+            ref: (d) => b.current = d,
             context: r,
-            className: t == null ? void 0 : t.arrow,
-            height: e == null ? void 0 : e.height,
-            width: e == null ? void 0 : e.width,
+            className: e == null ? void 0 : e.arrow,
+            height: t == null ? void 0 : t.height,
+            width: t == null ? void 0 : t.width,
             "data-testid": "overlay-arrow"
           }
         ),
-        a
+        c
       ]
     }
   ) }) }) : null;
 };
 export {
-  P as OverlayContent
+  S as OverlayContent
 };

package/src/tedi/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),W=require("./overlay-content.cjs.js"),A=require("./overlay-trigger.cjs.js"),G=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),c=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),H=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),B=3,y=s.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0}),l=O=>{const m=H.useIsTouchDevice(),{children:M,placement:x="top",openWith:a=m?"click":"hover",defaultOpen:C=!1,open:r,onToggle:o,role:q="tooltip",arrowDimensions:e,offset:w=B+((e==null?void 0:e.height)??0),focusManager:P,dismissible:i,scrollLock:R}=O,{order:b=["reference","content"],initialFocus:F=-1,...k}=P??{},[u,f]=s.useState(C),d=s.useRef(null),T=z.useIsMounted(),g=s.useMemo(()=>o&&typeof r<"u"?r:u,[o,r,u]),p=s.useCallback(v=>{typeof r>"u"&&f(v),o==null||o(v)},[r,f,o]),{x:I,y:_,refs:h,strategy:U,context:n,middlewareData:j,placement:S}=t.useFloating({placement:x,open:g,onOpenChange:p,middleware:[c.offset(w),c.flip(),c.shift({padding:8}),c.arrow({element:d,padding:4})],whileElementsMounted:G.autoUpdate}),{getReferenceProps:D,getFloatingProps:E}=t.useInteractions([t.useHover(n,{enabled:a==="hover",handleClose:t.safePolygon()}),t.useClick(n,{toggle:i}),t.useFocus(n,{enabled:a==="hover"}),t.useRole(n,{role:q}),t.useDismiss(n,{enabled:i,outsidePressEvent:a==="click"?"mousedown":"pointerdown"})]);return L.jsx(y.Provider,{value:{open:g,onOpenChange:p,isMounted:T,openWith:a,reference:h.setReference,floating:h.setFloating,arrowRef:d,focusManager:{order:b,initialFocus:F,...k},x:I,y:_,strategy:U,getReferenceProps:D,getFloatingProps:E,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...j.arrow},context:n,placement:S,scrollLock:R},children:M})};l.Trigger=A.OverlayTrigger;l.Content=W.OverlayContent;exports.Overlay=l;exports.OverlayContext=y;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),G=require("./overlay-content.cjs.js"),H=require("./overlay-trigger.cjs.js"),z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),a=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),B=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),J=require("../../../helpers/hooks/use-is-mounted.cjs.js"),K=3,M=s.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0}),c=x=>{const C=B.useIsTouchDevice(),{children:q,placement:w="top",openWith:i=C?"click":"hover",defaultOpen:F=!1,open:r,onToggle:o,role:P="tooltip",arrowDimensions:e,offset:R=K+((e==null?void 0:e.height)??0),focusManager:l,dismissible:u,scrollLock:b}=x,{order:k=["reference","content"],initialFocus:d,modal:f,...I}=l??{},T=d!==void 0?d:f?0:void 0,[g,p]=s.useState(F),h=s.useRef(null),_=J.useIsMounted(),v=s.useMemo(()=>o&&typeof r<"u"?r:g,[o,r,g]),y=s.useCallback(m=>{typeof r>"u"&&p(m),o==null||o(m)},[r,p,o]),{x:U,y:j,refs:O,strategy:S,context:n,middlewareData:D,placement:E}=t.useFloating({placement:w,open:v,onOpenChange:y,middleware:[a.offset(R),a.flip(),a.shift({padding:8}),a.arrow({element:h,padding:4})],whileElementsMounted:z.autoUpdate}),{getReferenceProps:L,getFloatingProps:W}=t.useInteractions([t.useHover(n,{enabled:i==="hover",handleClose:t.safePolygon()}),t.useClick(n,{toggle:u}),t.useFocus(n,{enabled:i==="hover"}),t.useRole(n,{role:P}),t.useDismiss(n,{enabled:u,outsidePressEvent:i==="click"?"mousedown":"pointerdown"})]);return A.jsx(M.Provider,{value:{open:v,onOpenChange:y,isMounted:_,openWith:i,reference:O.setReference,floating:O.setFloating,arrowRef:h,focusManager:l?{order:k,modal:f,initialFocus:T,...I}:void 0,x:U,y:j,strategy:S,getReferenceProps:L,getFloatingProps:W,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...D.arrow},context:n,placement:E,scrollLock:b},children:q})};c.Trigger=H.OverlayTrigger;c.Content=G.OverlayContent;exports.Overlay=c;exports.OverlayContext=M;exports.default=c;