@tedi-design-system/react 18.2.0-rc.4 → 19.0.0-rc.10

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),L=require("../../misc/affix/affix.cjs.js"),S=require("./components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js"),g=require("./components/table-of-contents-item/table-of-contents-item.cjs.js"),k=require("./components/table-of-contents-list/table-of-contents-list.cjs.js"),m=require("./table-of-contents.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),M=require("../../content/card/card.cjs.js"),E=require("../../content/card/card-content/card-content.cjs.js"),q=l.createContext({activeTrail:new Set}),h=n=>l.isValidElement(n)&&n.type===g.TableOfContentsItem,p=n=>l.Children.toArray(n).filter(h).map(c=>{const{id:s,isValid:i,separator:o,hideIcon:a,children:e}=c.props,r=l.Children.toArray(e),d=r.filter(h),u=r.filter(b=>!h(b));return{id:s,isValid:i,separator:o,hideIcon:a,content:t.jsx(t.Fragment,{children:u}),children:d.length?p(e):void 0}}),j=(n,c)=>{const s=new Set;if(!c)return s;const i=(o,a)=>{for(const e of o){const r=e.id?[...a,e.id]:a;if(e.id===c||e.children&&i(e.children,r))return r.forEach(d=>s.add(d)),!0}return!1};return i(n,[]),s};function f(n){const{getLabel:c}=w.useLabels(),{children:s,heading:i,activeId:o,showIcons:a=!1,numbered:e=!1,sticky:r=!0,variant:d="default",padding:u,className:b}=n,I=i===void 0?c("table-of-contents.title"):i,C=l.useMemo(()=>p(s),[s]),x=l.useMemo(()=>j(C,o),[C,o]),N=l.useMemo(()=>({activeId:o,showIcons:a,numbered:e,activeTrail:x}),[o,a,e,x]),A=u!==void 0?{"--tedi-table-of-contents-padding":`${u}rem`}:void 0,T=t.jsx("div",{className:y.default(m.default["tedi-table-of-contents"],{[m.default["tedi-table-of-contents--transparent"]]:d==="transparent"}),style:A,children:t.jsx(k.TableOfContentsList,{nodes:C,heading:I})}),v=y.default({[m.default["tedi-table-of-contents--sticky"]]:r},b),O=d==="transparent"?t.jsx("div",{className:v,children:T}):t.jsx(M.Card,{className:v,children:t.jsx(E.CardContent,{padding:0,children:T})});return t.jsx(q.Provider,{value:N,children:r?t.jsx(L.Affix,{position:"sticky",top:1.5,bottom:1.5,children:O}):O})}f.displayName="TableOfContents";f.Item=g.TableOfContentsItem;f.Collapsible=S.TableOfContentsCollapsible;exports.TableOfContents=f;exports.TableOfContentsContext=q;exports.buildActiveTrail=j;exports.childrenToNodes=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),S=require("../../misc/affix/affix.cjs.js"),k=require("./components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js"),y=require("./components/table-of-contents-item/table-of-contents-item.cjs.js"),M=require("./components/table-of-contents-list/table-of-contents-list.cjs.js"),b=require("./table-of-contents.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),E=require("../../content/card/card.cjs.js"),P=require("../../content/card/card-content/card-content.cjs.js"),q=l.createContext({activeTrail:new Set}),C=n=>l.isValidElement(n)&&n.type===y.TableOfContentsItem,m=n=>l.Children.toArray(n).filter(C).map(c=>{const{id:s,separator:r,children:a}=c.props,o=l.Children.toArray(a),e=o.filter(C),i=o.filter(d=>!C(d));return{id:s,separator:r,content:t.jsx(t.Fragment,{children:i}),children:e.length?m(a):void 0}}),j=(n,c)=>{const s=new Set;if(!c)return s;const r=(a,o)=>{for(const e of a){const i=e.id?[...o,e.id]:o;if(e.id===c||e.children&&r(e.children,i))return i.forEach(d=>s.add(d)),!0}return!1};return r(n,[]),s};function u(n){const{getLabel:c}=w.useLabels(),{children:s,heading:r,headingLevel:a="h3",ariaLabel:o,activeId:e,numbered:i=!1,sticky:d=!0,variant:h="default",padding:p,className:N}=n,L=r===void 0?c("table-of-contents.title"):r,f=l.useMemo(()=>m(s),[s]),v=l.useMemo(()=>j(f,e),[f,e]),A=l.useMemo(()=>({activeId:e,numbered:i,headingLevel:a,ariaLabel:o,activeTrail:v}),[e,i,a,o,v]),I=p!==void 0?{"--tedi-table-of-contents-padding":`${p}rem`}:void 0,x=t.jsx("div",{className:g.default(b.default["tedi-table-of-contents"],{[b.default["tedi-table-of-contents--transparent"]]:h==="transparent"}),style:I,children:t.jsx(M.TableOfContentsList,{nodes:f,heading:L})}),T=g.default({[b.default["tedi-table-of-contents--sticky"]]:d},N),O=h==="transparent"?t.jsx("div",{className:T,children:x}):t.jsx(E.Card,{className:T,children:t.jsx(P.CardContent,{padding:0,children:x})});return t.jsx(q.Provider,{value:A,children:d?t.jsx(S.Affix,{position:"sticky",top:1.5,bottom:1.5,children:O}):O})}u.displayName="TableOfContents";u.Item=y.TableOfContentsItem;u.Collapsible=k.TableOfContentsCollapsible;exports.TableOfContents=u;exports.TableOfContentsContext=q;exports.buildActiveTrail=j;exports.childrenToNodes=m;

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { TableOfContentsItemProps } from './components/table-of-contents-item/table-of-contents-item';
+/** Semantic level of the `TableOfContents` heading element. */
+export type TableOfContentsHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface TableOfContentsProps {
     /**
      * `TableOfContents.Item` elements. An item's non-`Item` children are its
@@ -12,6 +14,19 @@ export interface TableOfContentsProps {
      * the navigation keeps an accessible name via `aria-label`).
      */
     heading?: string | null;
+    /**
+     * Configurable semantic heading level (`h1`–`h6`); the visual style stays H4 regardless. Set it
+     * to match the surrounding page's heading outline and avoid skipped heading levels (WCAG 1.3.1).
+     * Ignored when the list is headless.
+     * @default h3
+     */
+    headingLevel?: TableOfContentsHeadingLevel;
+    /**
+     * Override the navigation landmark's accessible name. When empty, the `<nav>` falls back to the
+     * heading (via `aria-labelledby`), or the localised title when headless. Use it to disambiguate
+     * multiple tables of contents on the same page.
+     */
+    ariaLabel?: string;
     /**
      * Visual variant:
      * - `default` — rendered inside a bordered `Card`.
@@ -32,13 +47,6 @@ export interface TableOfContentsProps {
      * children.
      */
     activeId?: string;
-    /**
-     * Show a validation glyph before each item (multistep-form usage). Each state uses a distinct
-     * icon shape (not colour alone) with a localised text alternative: a check for `isValid === true`,
-     * an empty circle for `undefined` (not completed), and a warning for `isValid === false`.
-     * @default false
-     */
-    showIcons?: boolean;
     /**
      * Render the list as an ordered list with auto-generated hierarchical numbers
      * (`1.`, `2.`, `2.1`, …) shown before each item.
@@ -60,14 +68,13 @@ export interface TableOfContentsNode {
     id?: string;
     content: ReactNode;
     children?: TableOfContentsNode[];
-    isValid?: boolean;
     separator?: boolean;
-    hideIcon?: boolean;
 }
 interface TableOfContentsContextValue {
     activeId?: string;
-    showIcons?: boolean;
     numbered?: boolean;
+    headingLevel?: TableOfContentsHeadingLevel;
+    ariaLabel?: string;
     activeTrail: Set<string>;
 }
 export declare const TableOfContentsContext: import('react').Context<TableOfContentsContextValue>;

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

@@ -1,71 +1,70 @@
-import { jsx as i, Fragment as w } from "react/jsx-runtime";
-import g from "../../../../../external/classnames/index.es.js";
-import { useMemo as p, createContext as E, Children as N, isValidElement as L } from "react";
-import { Affix as S } from "../../misc/affix/affix.es.js";
-import { TableOfContentsCollapsible as V } from "./components/table-of-contents-collapsible/table-of-contents-collapsible.es.js";
+import { jsx as r, Fragment as w } from "react/jsx-runtime";
+import T from "../../../../../external/classnames/index.es.js";
+import { useMemo as m, createContext as E, Children as N, isValidElement as S } from "react";
+import { Affix as V } from "../../misc/affix/affix.es.js";
+import { TableOfContentsCollapsible as j } from "./components/table-of-contents-collapsible/table-of-contents-collapsible.es.js";
 import { TableOfContentsItem as x } from "./components/table-of-contents-item/table-of-contents-item.es.js";
-import { TableOfContentsList as j } from "./components/table-of-contents-list/table-of-contents-list.es.js";
-import h from "./table-of-contents.module.scss.es.js";
-import { useLabels as F } from "../../../providers/label-provider/use-labels.es.js";
-import { Card as H } from "../../content/card/card.es.js";
-import { CardContent as M } from "../../content/card/card-content/card-content.es.js";
-const P = E({
+import { TableOfContentsList as F } from "./components/table-of-contents-list/table-of-contents-list.es.js";
+import f from "./table-of-contents.module.scss.es.js";
+import { useLabels as H } from "../../../providers/label-provider/use-labels.es.js";
+import { Card as M } from "../../content/card/card.es.js";
+import { CardContent as P } from "../../content/card/card-content/card-content.es.js";
+const $ = E({
   activeTrail: /* @__PURE__ */ new Set()
-}), b = (e) => L(e) && e.type === x, I = (e) => N.toArray(e).filter(b).map((l) => {
-  const { id: n, isValid: s, separator: o, hideIcon: a, children: t } = l.props, r = N.toArray(t), c = r.filter(b), d = r.filter((m) => !b(m));
+}), p = (e) => S(e) && e.type === x, O = (e) => N.toArray(e).filter(p).map((l) => {
+  const { id: n, separator: i, children: s } = l.props, o = N.toArray(s), t = o.filter(p), a = o.filter((c) => !p(c));
   return {
     id: n,
-    isValid: s,
-    separator: o,
-    hideIcon: a,
-    content: /* @__PURE__ */ i(w, { children: d }),
-    children: c.length ? I(t) : void 0
+    separator: i,
+    content: /* @__PURE__ */ r(w, { children: a }),
+    children: t.length ? O(s) : void 0
   };
-}), $ = (e, l) => {
+}), q = (e, l) => {
   const n = /* @__PURE__ */ new Set();
   if (!l) return n;
-  const s = (o, a) => {
-    for (const t of o) {
-      const r = t.id ? [...a, t.id] : a;
-      if (t.id === l || t.children && s(t.children, r))
-        return r.forEach((c) => n.add(c)), !0;
+  const i = (s, o) => {
+    for (const t of s) {
+      const a = t.id ? [...o, t.id] : o;
+      if (t.id === l || t.children && i(t.children, a))
+        return a.forEach((c) => n.add(c)), !0;
     }
     return !1;
   };
-  return s(e, []), n;
+  return i(e, []), n;
 };
-function u(e) {
-  const { getLabel: l } = F(), {
+function h(e) {
+  const { getLabel: l } = H(), {
     children: n,
-    heading: s,
-    activeId: o,
-    showIcons: a = !1,
-    numbered: t = !1,
-    sticky: r = !0,
-    variant: c = "default",
-    padding: d,
-    className: m
-  } = e, O = s === void 0 ? l("table-of-contents.title") : s, f = p(() => I(n), [n]), C = p(() => $(f, o), [f, o]), A = p(
-    () => ({ activeId: o, showIcons: a, numbered: t, activeTrail: C }),
-    [o, a, t, C]
-  ), k = d !== void 0 ? { "--tedi-table-of-contents-padding": `${d}rem` } : void 0, v = /* @__PURE__ */ i(
+    heading: i,
+    headingLevel: s = "h3",
+    ariaLabel: o,
+    activeId: t,
+    numbered: a = !1,
+    sticky: c = !0,
+    variant: b = "default",
+    padding: u,
+    className: A
+  } = e, L = i === void 0 ? l("table-of-contents.title") : i, d = m(() => O(n), [n]), C = m(() => q(d, t), [d, t]), k = m(
+    () => ({ activeId: t, numbered: a, headingLevel: s, ariaLabel: o, activeTrail: C }),
+    [t, a, s, o, C]
+  ), I = u !== void 0 ? { "--tedi-table-of-contents-padding": `${u}rem` } : void 0, v = /* @__PURE__ */ r(
     "div",
     {
-      className: g(h["tedi-table-of-contents"], {
-        [h["tedi-table-of-contents--transparent"]]: c === "transparent"
+      className: T(f["tedi-table-of-contents"], {
+        [f["tedi-table-of-contents--transparent"]]: b === "transparent"
       }),
-      style: k,
-      children: /* @__PURE__ */ i(j, { nodes: f, heading: O })
+      style: I,
+      children: /* @__PURE__ */ r(F, { nodes: d, heading: L })
     }
-  ), y = g({ [h["tedi-table-of-contents--sticky"]]: r }, m), T = c === "transparent" ? /* @__PURE__ */ i("div", { className: y, children: v }) : /* @__PURE__ */ i(H, { className: y, children: /* @__PURE__ */ i(M, { padding: 0, children: v }) });
-  return /* @__PURE__ */ i(P.Provider, { value: A, children: r ? /* @__PURE__ */ i(S, { position: "sticky", top: 1.5, bottom: 1.5, children: T }) : T });
+  ), y = T({ [f["tedi-table-of-contents--sticky"]]: c }, A), g = b === "transparent" ? /* @__PURE__ */ r("div", { className: y, children: v }) : /* @__PURE__ */ r(M, { className: y, children: /* @__PURE__ */ r(P, { padding: 0, children: v }) });
+  return /* @__PURE__ */ r($.Provider, { value: k, children: c ? /* @__PURE__ */ r(V, { position: "sticky", top: 1.5, bottom: 1.5, children: g }) : g });
 }
-u.displayName = "TableOfContents";
-u.Item = x;
-u.Collapsible = V;
+h.displayName = "TableOfContents";
+h.Item = x;
+h.Collapsible = j;
 export {
-  u as TableOfContents,
-  P as TableOfContentsContext,
-  $ as buildActiveTrail,
-  I as childrenToNodes
+  h as TableOfContents,
+  $ as TableOfContentsContext,
+  q as buildActiveTrail,
+  O as childrenToNodes
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-table-of-contents":"tedi-table-of-contents-ce55e86d","tedi-table-of-contents--transparent":"tedi-table-of-contents--transparent-067ea2c2","tedi-table-of-contents__list":"tedi-table-of-contents__list-94025876","tedi-table-of-contents--sticky":"tedi-table-of-contents--sticky-1ee87047","tedi-table-of-contents__heading":"tedi-table-of-contents__heading-c6b7a6df","tedi-table-of-contents__group":"tedi-table-of-contents__group-590e4963","tedi-table-of-contents__list--headless":"tedi-table-of-contents__list--headless-99c1bab5","tedi-table-of-contents__item":"tedi-table-of-contents__item-29f072b5","tedi-table-of-contents__row":"tedi-table-of-contents__row-fb686650","tedi-table-of-contents__row--level-2":"tedi-table-of-contents__row--level-2-4fec675b","tedi-table-of-contents__icon":"tedi-table-of-contents__icon-5bb71193","tedi-table-of-contents__number":"tedi-table-of-contents__number-693b03b7","tedi-table-of-contents__content":"tedi-table-of-contents__content-8a05ad59","tedi-table-of-contents__item--selected":"tedi-table-of-contents__item--selected-632958d1","tedi-table-of-contents__bar":"tedi-table-of-contents__bar-f4daef0b","tedi-table-of-contents__bar--static":"tedi-table-of-contents__bar--static-f919cf73","tedi-table-of-contents__bar-title":"tedi-table-of-contents__bar-title-b82ab4ed","tedi-table-of-contents__sheet":"tedi-table-of-contents__sheet-16e41b54","tedi-table-of-contents__sheet-header":"tedi-table-of-contents__sheet-header-ec904c54"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-table-of-contents":"tedi-table-of-contents-ce55e86d","tedi-table-of-contents--transparent":"tedi-table-of-contents--transparent-067ea2c2","tedi-table-of-contents__list":"tedi-table-of-contents__list-94025876","tedi-table-of-contents--sticky":"tedi-table-of-contents--sticky-1ee87047","tedi-table-of-contents__heading":"tedi-table-of-contents__heading-c6b7a6df","tedi-table-of-contents__group":"tedi-table-of-contents__group-590e4963","tedi-table-of-contents__list--headless":"tedi-table-of-contents__list--headless-99c1bab5","tedi-table-of-contents__item":"tedi-table-of-contents__item-29f072b5","tedi-table-of-contents__row":"tedi-table-of-contents__row-fb686650","tedi-table-of-contents__row--level-2":"tedi-table-of-contents__row--level-2-4fec675b","tedi-table-of-contents__number":"tedi-table-of-contents__number-693b03b7","tedi-table-of-contents__content":"tedi-table-of-contents__content-8a05ad59","tedi-table-of-contents__item--selected":"tedi-table-of-contents__item--selected-632958d1","tedi-table-of-contents__bar":"tedi-table-of-contents__bar-f4daef0b","tedi-table-of-contents__bar--static":"tedi-table-of-contents__bar--static-f919cf73","tedi-table-of-contents__bar-title":"tedi-table-of-contents__bar-title-b82ab4ed","tedi-table-of-contents__sheet":"tedi-table-of-contents__sheet-16e41b54","tedi-table-of-contents__sheet-header":"tedi-table-of-contents__sheet-header-ec904c54"};exports.default=t;

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

@@ -9,7 +9,6 @@ const t = {
   "tedi-table-of-contents__item": "tedi-table-of-contents__item-29f072b5",
   "tedi-table-of-contents__row": "tedi-table-of-contents__row-fb686650",
   "tedi-table-of-contents__row--level-2": "tedi-table-of-contents__row--level-2-4fec675b",
-  "tedi-table-of-contents__icon": "tedi-table-of-contents__icon-5bb71193",
   "tedi-table-of-contents__number": "tedi-table-of-contents__number-693b03b7",
   "tedi-table-of-contents__content": "tedi-table-of-contents__content-8a05ad59",
   "tedi-table-of-contents__item--selected": "tedi-table-of-contents__item--selected-632958d1",

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),K=require("../../../../../../external/classnames/index.cjs.js"),R=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),S=({children:c,onClick:t,disabled:n,active:w,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:y=!1,className:_,role:s,...l})=>{const{getItemProps:v,listItemsRef:b,setOpen:f,activeIndex:x,divided:I,variant:a}=R.useDropdownContext(),g=o?"div":"button",q=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},D=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&f(!1))},P=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&f(!1)}},m={ref(e){typeof u=="number"&&(b.current[u]=e)},tabIndex:x===u?0:-1,className:K.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:w,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:I,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:a==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:a==="tree"&&y},_),style:q(i),onClick:D,onKeyDown:P,...l},j=o&&p===!1?{...m,role:s}:v({role:s??"menuitem",disabled:o?void 0:n,...m});return T.jsx(g,{...j,children:c})};exports.DropdownItem=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),U=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),D=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),z=require("../dropdown-context.cjs.js"),u=require("./dropdown-item.module.scss.cjs.js"),g=(n,t)=>r=>{n==null||n(r),r.defaultPrevented||t==null||t(r)},A=({children:n,onClick:t,disabled:r,active:x,index:d,indent:p,asChild:s=!1,closeOnSelect:f=!0,isParent:I=!1,className:b,role:y,...q})=>{const{getItemProps:R,listItemsRef:P,setOpen:a,activeIndex:k,divided:E,variant:l}=z.useDropdownContext(),K=s?"div":"button",c=s&&f!==!1&&m.isValidElement(n),w=e=>{typeof d=="number"&&(P.current[d]=e)},N=m.isValidElement(n)?n.ref:void 0,T=U.useMergeRefs([w,N]),j=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},V=e=>{if(r){e.preventDefault();return}const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){o.click();return}t==null||t(e),(!s||c)&&f&&a(!1)},M=e=>{if(r){(e.key==="Enter"||e.key===" ")&&e.preventDefault();return}if(e.key==="Enter"||e.key===" "){const o=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(o){e.preventDefault(),o.click(),!s&&f&&a(!1);return}if(c){e.preventDefault(),e.currentTarget.click();return}e.preventDefault(),t==null||t(e),!s&&f&&a(!1)}},_={ref:w,tabIndex:k===d?0:-1,className:D.default(u.default["tedi-dropdown__item"],{[u.default["tedi-dropdown__item--active"]]:x,[u.default["tedi-dropdown__item--disabled"]]:r,[u.default["tedi-dropdown__item--divided"]]:E,[u.default["tedi-dropdown__item--indent"]]:p,[u.default["tedi-dropdown__item--tree-item"]]:l==="tree"&&p,[u.default["tedi-dropdown__item--tree-parent"]]:l==="tree"&&I},b),style:j(p),onClick:V,onKeyDown:M,...q},v=s&&f===!1?{..._,role:y}:R({role:y??"menuitem",disabled:s?void 0:r,..._});if(c){const e=n,o=e.props,i=v;return m.cloneElement(e,{...i,ref:T,className:D.default(i.className,o.className),style:{...i.style,...o.style},"aria-disabled":r||void 0,tabIndex:r?-1:i.tabIndex,onClick:g(i.onClick,o.onClick),onKeyDown:g(i.onKeyDown,o.onKeyDown)})}return S.jsx(K,{...v,children:n})};exports.DropdownItem=A;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.d.ts

@@ -34,10 +34,14 @@ export type DropdownItemProps = {
      */
     indent?: number;
     /**
-     * When `true`, renders a plain `<div>` instead of a `<button>`.
-     * Useful when wrapping form controls like `<Checkbox>` or `<Radio>` that already handle their own events.
-     * **Warning:** When `asChild={true}`, the item is no longer focusable via keyboard navigation
-     * unless the child element itself is focusable.
+     * Render the item as its child element instead of a `<button>`.
+     *
+     * - **Navigable child (default `closeOnSelect`)** — e.g. a `Link`: the item props (`role`,
+     *   roving `tabindex`, handlers, styles) are merged directly onto the child so it becomes the
+     *   single focusable `menuitem`. This avoids a focusable wrapper *and* a focusable child (a
+     *   double Tab stop) and keeps the role and accessible name on one element.
+     * - **Form control (`closeOnSelect={false}`)** — e.g. a `Checkbox` / `Radio`: the child is
+     *   wrapped in a plain `<div>` menuitem that forwards activation to the inner control.
      *
      * @default false
      */

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.es.js

@@ -1,70 +1,101 @@
-import { jsx as T } from "react/jsx-runtime";
-import j from "../../../../../../external/classnames/index.es.js";
-import { useDropdownContext as E } from "../dropdown-context.es.js";
-import r from "./dropdown-item.module.scss.es.js";
-const l = ({
-  children: y,
-  onClick: t,
-  disabled: n,
-  active: _,
-  index: d,
-  indent: i,
-  asChild: o = !1,
-  closeOnSelect: s = !0,
-  isParent: w = !1,
-  className: c,
-  role: m,
-  ...v
+import { jsx as $ } from "react/jsx-runtime";
+import { useMergeRefs as z } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import D from "../../../../../../external/classnames/index.es.js";
+import { isValidElement as I, cloneElement as A } from "react";
+import { useDropdownContext as B } from "../dropdown-context.es.js";
+import p from "./dropdown-item.module.scss.es.js";
+const b = (n, e) => (o) => {
+  n == null || n(o), o.defaultPrevented || e == null || e(o);
+}, W = ({
+  children: n,
+  onClick: e,
+  disabled: o,
+  active: g,
+  index: m,
+  indent: u,
+  asChild: s = !1,
+  closeOnSelect: i = !0,
+  isParent: l = !1,
+  className: x,
+  role: d,
+  ...k
 }) => {
-  const { getItemProps: b, listItemsRef: x, setOpen: f, activeIndex: D, divided: I, variant: u } = E(), g = o ? "div" : "button", P = (e) => typeof e != "number" || e <= 0 ? {} : {
-    "--dropdown-indent-level": e,
-    "--dropdown-indent": `${e}rem`
-  }, q = (e) => {
-    if (n) return;
-    const p = e.currentTarget.querySelector(
+  const { getItemProps: K, listItemsRef: N, setOpen: a, activeIndex: P, divided: R, variant: y } = B(), E = s ? "div" : "button", c = s && i !== !1 && I(n), w = (t) => {
+    typeof m == "number" && (N.current[m] = t);
+  }, T = I(n) ? n.ref : void 0, q = z([w, T]), V = (t) => typeof t != "number" || t <= 0 ? {} : {
+    "--dropdown-indent-level": t,
+    "--dropdown-indent": `${t}rem`
+  }, j = (t) => {
+    if (o) {
+      t.preventDefault();
+      return;
+    }
+    const r = t.currentTarget.querySelector(
       'input[type="checkbox"], input[type="radio"]'
     );
-    if (p) {
-      p.click();
+    if (r) {
+      r.click();
+      return;
+    }
+    e == null || e(t), (!s || c) && i && a(!1);
+  }, M = (t) => {
+    if (o) {
+      (t.key === "Enter" || t.key === " ") && t.preventDefault();
       return;
     }
-    o ? t == null || t(e) : (t == null || t(e), s && f(!1));
-  }, K = (e) => {
-    if (!n && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      const p = e.currentTarget.querySelector(
+    if (t.key === "Enter" || t.key === " ") {
+      const r = t.currentTarget.querySelector(
         'input[type="checkbox"], input[type="radio"]'
       );
-      p ? p.click() : t == null || t(e), !o && s && f(!1);
+      if (r) {
+        t.preventDefault(), r.click(), !s && i && a(!1);
+        return;
+      }
+      if (c) {
+        t.preventDefault(), t.currentTarget.click();
+        return;
+      }
+      t.preventDefault(), e == null || e(t), !s && i && a(!1);
     }
-  }, a = {
-    ref(e) {
-      typeof d == "number" && (x.current[d] = e);
-    },
-    tabIndex: D === d ? 0 : -1,
-    className: j(
-      r["tedi-dropdown__item"],
+  }, v = {
+    ref: w,
+    tabIndex: P === m ? 0 : -1,
+    className: D(
+      p["tedi-dropdown__item"],
       {
-        [r["tedi-dropdown__item--active"]]: _,
-        [r["tedi-dropdown__item--disabled"]]: n,
-        [r["tedi-dropdown__item--divided"]]: I,
-        [r["tedi-dropdown__item--indent"]]: i,
-        [r["tedi-dropdown__item--tree-item"]]: u === "tree" && i,
-        [r["tedi-dropdown__item--tree-parent"]]: u === "tree" && w
+        [p["tedi-dropdown__item--active"]]: g,
+        [p["tedi-dropdown__item--disabled"]]: o,
+        [p["tedi-dropdown__item--divided"]]: R,
+        [p["tedi-dropdown__item--indent"]]: u,
+        [p["tedi-dropdown__item--tree-item"]]: y === "tree" && u,
+        [p["tedi-dropdown__item--tree-parent"]]: y === "tree" && l
       },
-      c
+      x
     ),
-    style: P(i),
-    onClick: q,
-    onKeyDown: K,
+    style: V(u),
+    onClick: j,
+    onKeyDown: M,
+    ...k
+  }, _ = s && i === !1 ? { ...v, role: d } : K({
+    role: d ?? "menuitem",
+    disabled: s ? void 0 : o,
     ...v
-  }, N = o && s === !1 ? { ...a, role: m } : b({
-    role: m ?? "menuitem",
-    disabled: o ? void 0 : n,
-    ...a
   });
-  return /* @__PURE__ */ T(g, { ...N, children: y });
+  if (c) {
+    const t = n, r = t.props, f = _;
+    return A(t, {
+      ...f,
+      ref: q,
+      className: D(f.className, r.className),
+      style: { ...f.style, ...r.style },
+      "aria-disabled": o || void 0,
+      tabIndex: o ? -1 : f.tabIndex,
+      onClick: b(f.onClick, r.onClick),
+      onKeyDown: b(f.onKeyDown, r.onKeyDown)
+    });
+  }
+  return /* @__PURE__ */ $(E, { ..._, children: n });
 };
 export {
-  l as DropdownItem
+  W as DropdownItem
 };

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"),C=require("./overlay.cjs.js"),E=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:h}=u,{open:l,x:m,y:g,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:d,contentId:j,role:F,ariaHidden:q}=s.useContext(C.OverlayContext);if(s.useEffect(()=>{d&&(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,d]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-hidden":q||void 0,"aria-labelledby":f,"aria-describedby":h,style:{position:b,left:m,top:g},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:c=>x.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"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=E;
+"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"),C=require("./overlay.cjs.js"),E=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:h,contentStyle:m}=u,{open:l,x:g,y:b,strategy:v,focusManager:o,floating:x,arrowRef:w,getFloatingProps:p,placement:j,context:i,arrow:t,scrollLock:d,contentId:F,role:S,ariaHidden:q}=s.useContext(C.OverlayContext);if(s.useEffect(()=>{d&&(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,d]),!l)return null;const a=n.jsxs("div",{...p({ref:x,tabIndex:-1,id:F,"aria-hidden":q||void 0,"aria-labelledby":f,"aria-describedby":h,style:{position:v,left:g,top:b,...m},className:e==null?void 0:e.content}),"data-placement":j,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:c=>w.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"}),y]});return n.jsx(r.FloatingPortal,{children:S==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=E;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface OverlayContentProps {
     /**
      * Overlay content.
@@ -36,5 +36,10 @@ export interface OverlayContentProps {
      * Useful for longer explanations or supporting content that complements the title.
      */
     describedBy?: string;
+    /**
+     * Extra inline styles merged onto the floating content container (after the positioning styles).
+     * Used to pass through consumer-controlled values such as padding CSS variables.
+     */
+    contentStyle?: CSSProperties;
 }
 export declare const OverlayContent: (props: OverlayContentProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,52 +1,53 @@
-import { jsxs as E, jsx as n } from "react/jsx-runtime";
-import { FloatingArrow as C, FloatingPortal as H, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as H, FloatingPortal as S, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import { useContext as B, useEffect as I } from "react";
 import { OverlayContext as O } from "./overlay.es.js";
-const L = (c) => {
-  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
+const R = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f, contentStyle: y } = c, {
     open: l,
-    x: y,
-    y: h,
-    strategy: u,
+    x: h,
+    y: u,
+    strategy: g,
     focusManager: o,
-    floating: g,
-    arrowRef: p,
-    getFloatingProps: b,
-    placement: v,
+    floating: p,
+    arrowRef: b,
+    getFloatingProps: v,
+    placement: w,
     context: r,
     arrow: t,
     scrollLock: i,
-    contentId: w,
-    role: x,
-    ariaHidden: F
+    contentId: x,
+    role: F,
+    ariaHidden: E
   } = B(O);
   if (I(() => {
     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) return null;
-  const d = /* @__PURE__ */ E(
+  const d = /* @__PURE__ */ C(
     "div",
     {
-      ...b({
-        ref: g,
+      ...v({
+        ref: p,
         tabIndex: -1,
-        id: w,
-        "aria-hidden": F || void 0,
+        id: x,
+        "aria-hidden": E || void 0,
         "aria-labelledby": m,
         "aria-describedby": f,
         style: {
-          position: u,
-          left: y,
-          top: h
+          position: g,
+          left: h,
+          top: u,
+          ...y
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": v,
+      "data-placement": w,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
-          C,
+          H,
           {
-            ref: (a) => p.current = a,
+            ref: (a) => b.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -58,8 +59,8 @@ const L = (c) => {
       ]
     }
   );
-  return /* @__PURE__ */ n(H, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
+  return /* @__PURE__ */ n(S, { children: F === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  L as OverlayContent
+  R as OverlayContent
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),y=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),b=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),g=require("./popover-context.cjs.js"),x=C=>{const{children:i,width:d="small",className:h,title:t,titleProps:l={element:"h4"},close:a,closeProps:r={size:"default"}}=C,{onOpenChange:m}=s.useContext(j.OverlayContext),{withBorder:c}=s.useContext(g.PopoverContext),u=s.useId(),p=!!i,v=s.useId();return o.jsxs(b.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${d}`]]:d&&d!=="none",[e.default["tedi-popover--border"]]:c},h),arrow:n.default(e.default["tedi-popover__arrow"],{[e.default["tedi-popover__arrow--border"]]:c})},labelledBy:t?u:void 0,describedBy:p?v:void 0,children:[(t||a)&&o.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&o.jsx(y.Text,{...l,id:u,className:n.default("align-self-center",l.className),children:t}),a&&o.jsx(_.ClosingButton,{...r,onClick:q=>{var f;m(!1),(f=r.onClick)==null||f.call(r,q)}})]}),p?o.jsx("div",{id:v,children:i}):i]})};x.displayName="PopoverContent";exports.PopoverContent=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),q=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),P=require("../overlay/overlay-content.cjs.js"),r=require("./popover.module.scss.cjs.js"),B=require("./popover-context.cjs.js"),N=e=>{if(e===void 0)return;const t=a=>`${a}rem`,o=typeof e=="number"?{top:e,right:e,bottom:e,left:e}:"vertical"in e?{top:e.vertical,right:e.horizontal,bottom:e.vertical,left:e.horizontal}:e;return{"--popover-content-padding-top":t(o.top),"--popover-content-padding-right":t(o.right),"--popover-content-padding-bottom":t(o.bottom),"--popover-content-padding-left":t(o.left)}},x=e=>{const{children:t,width:o="small",className:a,title:n,titleProps:d={element:"h4"},close:u,closeProps:i={size:"default"},padding:C}=e,{onOpenChange:b}=c.useContext(j.OverlayContext),{withBorder:p}=c.useContext(B.PopoverContext),v=c.useId(),f=!!t,m=c.useId();return l.jsxs(P.OverlayContent,{classNames:{content:s.default(r.default["tedi-popover"],{[r.default[`tedi-popover--${o}`]]:o&&o!=="none",[r.default["tedi-popover--border"]]:p},a),arrow:s.default(r.default["tedi-popover__arrow"],{[r.default["tedi-popover__arrow--border"]]:p})},labelledBy:n?v:void 0,describedBy:f?m:void 0,contentStyle:N(C),children:[(n||u)&&l.jsxs("div",{className:s.default(r.default["tedi-popover__header"],{[r.default["tedi-popover__header--no-title"]]:!n}),children:[n&&l.jsx(q.Text,{...d,id:v,className:s.default("align-self-center",d.className),children:n}),u&&l.jsx(_.ClosingButton,{...i,onClick:y=>{var h;b(!1),(h=i.onClick)==null||h.call(i,y)}})]}),f?l.jsx("div",{id:m,children:t}):t]})};x.displayName="PopoverContent";exports.PopoverContent=x;

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

@@ -1,5 +1,6 @@
 import { TextProps } from '../../base/typography/text/text';
 import { ClosingButtonProps } from '../../buttons/closing-button/closing-button';
+import { CardContentPadding } from '../../content/card/card';
 import { OverlayContentProps } from '../overlay/overlay-content';
 export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNames'> {
     /**
@@ -28,6 +29,12 @@ export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNam
      * @default small
      */
     width?: 'small' | 'medium' | 'large' | 'none';
+    /**
+     * Inner padding of the popover, using the same scale as `Card` — a number in rems,
+     * `{ vertical, horizontal }`, or `{ top, right, bottom, left }`. Set to `0` (or zero a single axis)
+     * when the popover holds a menu whose rows should reach the edges. Defaults to the popover padding.
+     */
+    padding?: CardContentPadding;
 }
 export declare const PopoverContent: {
     (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;