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

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.es.js

@@ -1,92 +1,94 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-import R from "../../../../../../external/classnames/index.es.js";
-import i, { useRef as a, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
-import { Icon as D } from "../../../base/icon/icon.es.js";
-import { Print as F } from "../../../misc/print/print.es.js";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import _ from "../../../../../../external/classnames/index.es.js";
+import i, { useRef as v, useState as V, useCallback as L, useLayoutEffect as B, useEffect as D } from "react";
+import { Icon as F } from "../../../base/icon/icon.es.js";
+import { Print as q } from "../../../misc/print/print.es.js";
 import { Dropdown as n } from "../../../overlays/dropdown/dropdown.es.js";
-import l from "../tabs.module.scss.es.js";
-import { useTabsContext as q } from "../tabs-context.es.js";
-import { useLabels as G } from "../../../../providers/label-provider/use-labels.es.js";
-import { useScrollFade as H } from "../../../../helpers/hooks/use-scroll-fade.es.js";
-const J = (S) => {
+import s from "../tabs.module.scss.es.js";
+import { useTabsContext as G } from "../tabs-context.es.js";
+import { useLabels as H } from "../../../../providers/label-provider/use-labels.es.js";
+import { useScrollFade as J } from "../../../../helpers/hooks/use-scroll-fade.es.js";
+const K = (g) => {
   const {
     children: c,
-    className: W,
-    "aria-label": L,
-    "aria-labelledby": N,
-    printVisibility: C = "show",
-    overflowMode: r = "dropdown"
-  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = a(null), d = a(null), [f, b] = A(!1), m = a(!1), u = a(0);
-  m.current = f;
-  const {
-    scrollRef: _,
-    canScrollStart: I,
-    canScrollEnd: M,
-    handleScroll: O
-  } = H({ direction: "horizontal" }), k = P(
+    className: y,
+    "aria-label": S,
+    "aria-labelledby": C,
+    printVisibility: R = "show",
+    overflowMode: t = "dropdown",
+    dropdownLabel: N
+  } = g, { getLabel: T } = H(), { currentTab: x, setCurrentTab: E } = G(), d = v(null), m = v(null), [I, M] = V(!1), {
+    scrollRef: p,
+    canScrollStart: O,
+    canScrollEnd: W,
+    handleScroll: k
+  } = J({ direction: "horizontal" }), z = L(
     (e) => {
-      d.current = e, r === "scroll" && _(e);
+      m.current = e, t === "scroll" && p(e);
     },
-    [r, _]
-  ), p = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), v = i.useMemo(() => {
+    [t, p]
+  ), b = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), u = i.useMemo(() => {
     const e = [];
-    return p.forEach((t) => {
-      const o = t.props;
-      e.push({ id: o.id, label: o.children, disabled: o.disabled });
+    return b.forEach((r) => {
+      const l = r.props;
+      e.push({ id: l.id, label: l.children, disabled: l.disabled });
     }), e;
-  }, [p]), g = r === "dropdown" && f && v.length > 1, z = v.filter((e) => e.id !== x), j = (e) => {
+  }, [b]), h = t === "dropdown" && I && u.length > 1, j = u.filter((e) => e.id !== x), A = (e) => {
     e && E(e);
-  };
-  return V(() => {
-    if (r !== "dropdown") return;
+  }, a = L(() => {
+    const e = d.current, r = m.current;
+    if (!e || !r || r.clientWidth === 0) return;
+    const l = s["tedi-tabs__list--overflow"], w = r.classList.contains(l);
+    w && r.classList.remove(l);
+    const P = r.scrollWidth;
+    w && r.classList.add(l), M(P > e.clientWidth);
+  }, []);
+  return B(() => {
+    t === "dropdown" && a();
+  }, [t, a, b]), D(() => {
+    if (t !== "dropdown") return;
     const e = d.current;
-    !e || m.current || (u.current = e.scrollWidth, e.scrollWidth > e.clientWidth && e.clientWidth > 0 && b(!0));
-  }, [r, f, p]), B(() => {
-    if (r !== "dropdown") return;
-    const e = w.current, t = d.current;
-    if (!e || !t) return;
-    const o = () => {
-      m.current ? u.current <= e.clientWidth && b(!1) : t.scrollWidth > t.clientWidth && t.clientWidth > 0 && (u.current = t.scrollWidth, b(!0));
-    }, y = new ResizeObserver(o);
-    return y.observe(e), () => y.disconnect();
-  }, [r]), /* @__PURE__ */ s(F, { visibility: C, children: /* @__PURE__ */ h(
+    if (!e) return;
+    const r = new ResizeObserver(a);
+    return r.observe(e), () => r.disconnect();
+  }, [t, a]), /* @__PURE__ */ o(q, { visibility: R, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: w,
-      className: R(l["tedi-tabs__list-wrapper"], {
-        [l["tedi-tabs__list-wrapper--scroll-fade-left"]]: r === "scroll" && I,
-        [l["tedi-tabs__list-wrapper--scroll-fade-right"]]: r === "scroll" && M
+      ref: d,
+      className: _(s["tedi-tabs__list-wrapper"], {
+        [s["tedi-tabs__list-wrapper--scroll-fade-left"]]: t === "scroll" && O,
+        [s["tedi-tabs__list-wrapper--scroll-fade-right"]]: t === "scroll" && W
       }),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "div",
           {
-            ref: k,
+            ref: z,
             "data-name": "tabs-list",
             role: "tablist",
-            "aria-label": L,
-            "aria-labelledby": N,
-            className: R(
-              l["tedi-tabs__list"],
-              { [l["tedi-tabs__list--overflow"]]: g },
-              { [l["tedi-tabs__list--scroll"]]: r === "scroll" },
-              W
+            "aria-label": S,
+            "aria-labelledby": C,
+            className: _(
+              s["tedi-tabs__list"],
+              { [s["tedi-tabs__list--overflow"]]: h },
+              { [s["tedi-tabs__list--scroll"]]: t === "scroll" },
+              y
             ),
-            onScroll: r === "scroll" ? O : void 0,
+            onScroll: t === "scroll" ? k : void 0,
             children: c
           }
         ),
-        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(n, { placement: "bottom-end", children: [
-          /* @__PURE__ */ s(n.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
-            T("tabs.more"),
-            /* @__PURE__ */ s(D, { name: "expand_more", size: 18 })
+        h && /* @__PURE__ */ o("div", { className: s["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ f(n, { placement: "bottom-end", children: [
+          /* @__PURE__ */ o(n.Trigger, { children: /* @__PURE__ */ f("button", { "data-name": "tabs-more-btn", type: "button", className: s["tedi-tabs__more-btn"], children: [
+            N ?? T("tabs.more"),
+            /* @__PURE__ */ o(F, { name: "expand_more", size: 18 })
           ] }) }),
-          /* @__PURE__ */ s(n.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+          /* @__PURE__ */ o(n.Content, { children: j.map((e, r) => /* @__PURE__ */ o(
             n.Item,
             {
-              index: t,
+              index: r,
               disabled: e.disabled,
-              onClick: () => j(e.id),
+              onClick: () => A(e.id),
               children: e.label
             },
             e.id
@@ -96,8 +98,7 @@ const J = (S) => {
     }
   ) });
 };
-J.displayName = "TabsList";
+K.displayName = "TabsList";
 export {
-  J as TabsList,
-  J as default
+  K as TabsList
 };

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../../external/classnames/index.cjs.js"),m=require("../../../base/icon/icon.cjs.js"),a=require("../tabs.module.scss.cjs.js"),x=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),r=c=>{const{id:e,children:d,icon:i,disabled:t=!1,className:u}=c,{currentTab:b,setCurrentTab:n}=x.useTabsContext(),s=b===e,g=()=>{t||n(e)},T=f=>{const o=q.navigateTablist(f);o&&n(o.id)};return l.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:_.default(a.default["tedi-tabs__trigger"],{[a.default["tedi-tabs__trigger--selected"]]:s},{[a.default["tedi-tabs__trigger--disabled"]]:t},u),onClick:g,onKeyDown:T,children:[i&&l.jsx(m.Icon,{name:i,size:18,color:"inherit"}),d]})};r.displayName="TabsTrigger";exports.TabsTrigger=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../base/icon/icon.cjs.js"),r=require("../tabs.module.scss.cjs.js"),_=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),c=l=>{const{id:e,children:d,icon:a,disabled:t=!1,className:b}=l,{currentTab:u,setCurrentTab:i}=_.useTabsContext(),s=u===e,g=()=>{t||i(e)},T=f=>{const n=q.navigateTablist(f);n&&i(n.id)};return o.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:m.default(r.default["tedi-tabs__trigger"],{[r.default["tedi-tabs__trigger--selected"]]:s},{[r.default["tedi-tabs__trigger--disabled"]]:t},b),onClick:g,onKeyDown:T,children:[a&&o.jsx(x.Icon,{name:a,size:18,color:"inherit"}),d]})};c.displayName="TabsTrigger";exports.TabsTrigger=c;

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.es.js

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
 import T from "../../../../../../external/classnames/index.es.js";
 import { Icon as u } from "../../../base/icon/icon.es.js";
-import a from "../tabs.module.scss.es.js";
+import s from "../tabs.module.scss.es.js";
 import { useTabsContext as _ } from "../tabs-context.es.js";
 import { navigateTablist as h } from "../tabs-helpers.es.js";
 const x = (n) => {
-  const { id: e, children: l, icon: s, disabled: t = !1, className: c } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
+  const { id: e, children: c, icon: a, disabled: t = !1, className: l } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
     t || i(e);
   }, b = (g) => {
     const o = h(g);
     o && i(o.id);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "button",
     {
       "data-name": "tabs-trigger",
@@ -23,22 +23,21 @@ const x = (n) => {
       tabIndex: r ? 0 : -1,
       disabled: t,
       className: T(
-        a["tedi-tabs__trigger"],
-        { [a["tedi-tabs__trigger--selected"]]: r },
-        { [a["tedi-tabs__trigger--disabled"]]: t },
-        c
+        s["tedi-tabs__trigger"],
+        { [s["tedi-tabs__trigger--selected"]]: r },
+        { [s["tedi-tabs__trigger--disabled"]]: t },
+        l
       ),
       onClick: m,
       onKeyDown: b,
       children: [
-        s && /* @__PURE__ */ p(u, { name: s, size: 18, color: "inherit" }),
-        l
+        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
+        c
       ]
     }
   );
 };
 x.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger,
-  x as default
+  x as TabsTrigger
 };

package/src/tedi/components/navigation/tabs/tabs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),f=require("./tabs.module.scss.cjs.js"),g=require("./tabs-content/tabs-content.cjs.js"),m=require("./tabs-context.cjs.js"),v=require("./tabs-list/tabs-list.cjs.js"),x=require("./tabs-trigger/tabs-trigger.cjs.js"),e=u=>{const{children:i,value:s,defaultValue:l,onChange:t,className:c}=u,[b,d]=o.useState(l||""),r=s??b,T=o.useCallback(a=>{a!==r&&(s===void 0&&d(a),t==null||t(a))},[s,r,t]);return n.jsx(m.TabsContext.Provider,{value:{currentTab:r,setCurrentTab:T},children:n.jsx("div",{"data-name":"tabs",className:q.default(f.default["tedi-tabs"],c),children:i})})};e.displayName="Tabs";e.List=v.TabsList;e.Trigger=x.TabsTrigger;e.Content=g.TabsContent;exports.Tabs=e;exports.default=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),g=require("./tabs.module.scss.cjs.js"),m=require("./tabs-content/tabs-content.cjs.js"),f=require("./tabs-context.cjs.js"),v=require("./tabs-list/tabs-list.cjs.js"),x=require("./tabs-trigger/tabs-trigger.cjs.js"),e=i=>{const{children:u,value:s,defaultValue:c,onChange:t,className:l}=i,[b,d]=o.useState(c||""),r=s??b,T=o.useCallback(a=>{a!==r&&(s===void 0&&d(a),t==null||t(a))},[s,r,t]);return n.jsx(f.TabsContext.Provider,{value:{currentTab:r,setCurrentTab:T},children:n.jsx("div",{"data-name":"tabs",className:q.default(g.default["tedi-tabs"],l),children:u})})};e.displayName="Tabs";e.List=v.TabsList;e.Trigger=x.TabsTrigger;e.Content=m.TabsContent;exports.Tabs=e;

package/src/tedi/components/navigation/tabs/tabs.d.ts

@@ -25,15 +25,15 @@ export declare const Tabs: {
     (props: TabsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     List: {
-        (props: import('./tabs-list/tabs-list').TabsListProps): import("react/jsx-runtime").JSX.Element;
+        (props: import('.').TabsListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Trigger: {
-        (props: import('./tabs-trigger/tabs-trigger').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        (props: import('.').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {
-        (props: import('./tabs-content/tabs-content').TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+        (props: import('.').TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
 };

package/src/tedi/components/navigation/tabs/tabs.es.js

@@ -1,25 +1,24 @@
 import { jsx as s } from "react/jsx-runtime";
-import T from "../../../../../external/classnames/index.es.js";
-import l from "react";
+import u from "../../../../../external/classnames/index.es.js";
+import m from "react";
 import d from "./tabs.module.scss.es.js";
 import { TabsContent as p } from "./tabs-content/tabs-content.es.js";
 import { TabsContext as v } from "./tabs-context.es.js";
 import { TabsList as C } from "./tabs-list/tabs-list.es.js";
 import { TabsTrigger as N } from "./tabs-trigger/tabs-trigger.es.js";
-const r = (m) => {
-  const { children: n, value: a, defaultValue: i, onChange: t, className: c } = m, [b, f] = l.useState(i || ""), e = a ?? b, u = l.useCallback(
+const r = (l) => {
+  const { children: n, value: e, defaultValue: i, onChange: t, className: c } = l, [b, T] = m.useState(i || ""), a = e ?? b, f = m.useCallback(
     (o) => {
-      o !== e && (a === void 0 && f(o), t == null || t(o));
+      o !== a && (e === void 0 && T(o), t == null || t(o));
     },
-    [a, e, t]
+    [e, a, t]
   );
-  return /* @__PURE__ */ s(v.Provider, { value: { currentTab: e, setCurrentTab: u }, children: /* @__PURE__ */ s("div", { "data-name": "tabs", className: T(d["tedi-tabs"], c), children: n }) });
+  return /* @__PURE__ */ s(v.Provider, { value: { currentTab: a, setCurrentTab: f }, children: /* @__PURE__ */ s("div", { "data-name": "tabs", className: u(d["tedi-tabs"], c), children: n }) });
 };
 r.displayName = "Tabs";
 r.List = C;
 r.Trigger = N;
 r.Content = p;
 export {
-  r as Tabs,
-  r as default
+  r as Tabs
 };

package/src/tedi/components/notifications/alert/alert.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"),S=require("react"),M=require("../../base/icon/icon.cjs.js"),P=require("../../base/typography/heading/heading.cjs.js"),k=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),$=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),A=require("../../layout/grid/row.cjs.js"),n=require("../../layout/grid/col.cjs.js"),o=c=>{const{getCurrentBreakpointProps:h}=z.useBreakpointProps(c.defaultServerBreakpoint),{children:i,role:s="alert",title:r,className:m,type:d="info",icon:u,onClose:f,action:a,isGlobal:j=!1,noSideBorders:x=!1,titleElement:q="h3",size:v="default",..._}=h(c),B=N.default(t.default["tedi-alert"],t.default[`tedi-alert--${d}`],t.default[`tedi-alert--size-${v}`],{[t.default["tedi-alert--global"]]:j,[t.default["tedi-alert--no-side-borders"]]:x,[t.default["tedi-alert--has-action"]]:!!a},m),b=y.useIsMounted(),I=l=>{const g={size:18},C=typeof l=="string"?{...g,name:l}:{...g,...l};return e.jsx(M.Icon,{...C,className:t.default["tedi-alert__icon"]})},w=s==="alert"?"assertive":s==="status"?"polite":"off",p=S.useId();return b?e.jsx("div",{role:s,"data-name":"alert","aria-label":`${d} alert`,"aria-live":w,"aria-labelledby":r?p:void 0,..._,className:B,children:e.jsxs($.VerticalSpacing,{size:.25,children:[e.jsxs(A.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(n.Col,{grow:1,className:t.default["tedi-alert__content"],children:[u&&I(u),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(P.Heading,{element:q,id:p,modifiers:["h5"],children:r}):i})]}),a?e.jsx(n.Col,{width:"auto",children:a}):f&&e.jsx(n.Col,{width:"auto",children:e.jsx(k.ClosingButton,{onClick:f,iconSize:18})})]}),r&&i&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:i})]})}):null};o.displayName="Alert";exports.Alert=o;exports.default=o;
+"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"),S=require("react"),M=require("../../base/icon/icon.cjs.js"),P=require("../../base/typography/heading/heading.cjs.js"),k=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),y=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),$=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),A=require("../../layout/grid/row.cjs.js"),n=require("../../layout/grid/col.cjs.js"),o=c=>{const{getCurrentBreakpointProps:h}=y.useBreakpointProps(c.defaultServerBreakpoint),{children:i,role:s="alert",title:r,className:m,type:d="info",icon:u,onClose:f,action:a,isGlobal:j=!1,noSideBorders:x=!1,titleElement:q="h3",size:v="default",..._}=h(c),B=N.default(t.default["tedi-alert"],t.default[`tedi-alert--${d}`],t.default[`tedi-alert--size-${v}`],{[t.default["tedi-alert--global"]]:j,[t.default["tedi-alert--no-side-borders"]]:x,[t.default["tedi-alert--has-action"]]:!!a},m),b=z.useIsMounted(),I=l=>{const g={size:18},C=typeof l=="string"?{...g,name:l}:{...g,...l};return e.jsx(M.Icon,{...C,className:t.default["tedi-alert__icon"]})},w=s==="alert"?"assertive":s==="status"?"polite":"off",p=S.useId();return b?e.jsx("div",{role:s,"data-name":"alert","aria-label":`${d} alert`,"aria-live":w,"aria-labelledby":r?p:void 0,..._,className:B,children:e.jsxs($.VerticalSpacing,{size:.25,children:[e.jsxs(A.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(n.Col,{grow:1,className:t.default["tedi-alert__content"],children:[u&&I(u),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(P.Heading,{element:q,id:p,modifiers:["h5"],children:r}):i})]}),a?e.jsx(n.Col,{width:"auto",children:a}):f&&e.jsx(n.Col,{width:"auto",children:e.jsx(k.ClosingButton,{onClick:f,iconSize:18})})]}),r&&i&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:i})]})}):null};o.displayName="Alert";exports.Alert=o;exports.default=o;

package/src/tedi/components/notifications/alert/alert.es.js

@@ -5,13 +5,13 @@ import { Icon as S } from "../../base/icon/icon.es.js";
 import { Heading as x } from "../../base/typography/heading/heading.es.js";
 import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
 import t from "./alert.module.scss.es.js";
-import { useIsMounted as $ } from "../../../helpers/hooks/use-is-mounted.es.js";
-import { useBreakpointProps as j } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useIsMounted as j } from "../../../helpers/hooks/use-is-mounted.es.js";
 import { VerticalSpacing as A } from "../../layout/vertical-spacing/vertical-spacing.es.js";
 import { Row as E } from "../../layout/grid/row.es.js";
 import { Col as n } from "../../layout/grid/col.es.js";
 const R = (d) => {
-  const { getCurrentBreakpointProps: h } = j(d.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: h } = $(d.defaultServerBreakpoint), {
     children: o,
     role: i = "alert",
     title: r,
@@ -35,7 +35,7 @@ const R = (d) => {
       [t["tedi-alert--has-action"]]: !!a
     },
     g
-  ), w = $(), y = (l) => {
+  ), w = j(), y = (l) => {
     const u = { size: 18 }, C = typeof l == "string" ? { ...u, name: l } : { ...u, ...l };
     return /* @__PURE__ */ e(S, { ...C, className: t["tedi-alert__icon"] });
   }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", f = P.useId();

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),j=require("../../../../../../external/classnames/index.cjs.js"),T=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),K=({children:m,onClick:t,disabled:n,active:c,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:w=!1,className:y})=>{const{getItemProps:_,listItemsRef:l,setOpen:s,activeIndex:v,divided:b,variant:f}=T.useDropdownContext(),x=o?"div":"button",I=e=>typeof e!="number"?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},g=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&&s(!1))},q=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&&s(!1)}},a={ref(e){typeof u=="number"&&(l.current[u]=e)},tabIndex:v===u?0:-1,className:j.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:c,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:b,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:f==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:f==="tree"&&w},y),style:I(i),onClick:g,onKeyDown:q},D=o&&p===!1?a:_({role:"menuitem",disabled:o?void 0:n,...a});return P.jsx(x,{...D,children:m})};exports.DropdownItem=K;
+"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;

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

@@ -63,5 +63,12 @@ export type DropdownItemProps = {
      */
     isParent?: boolean;
     className?: string;
-};
-export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * ARIA role for the item. Defaults to `menuitem`; override to convey selection
+     * semantics (e.g. `menuitemcheckbox` / `menuitemradio` / `option`) and pair it
+     * with the matching `aria-checked` / `aria-selected`.
+     * @default menuitem
+     */
+    role?: React.AriaRole;
+} & React.AriaAttributes;
+export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),O=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),z=require("./dropdown-context.cjs.js"),G=require("./dropdown-helpers.cjs.js"),J=require("./dropdown-item/dropdown-item.cjs.js"),K=require("./dropdown-separator/dropdown-separator.cjs.js"),Q=require("./dropdown-trigger/dropdown-trigger.cjs.js"),V=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),m=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=4,d=w=>{var I;const{getCurrentBreakpointProps:S}=X.useBreakpointProps(w.defaultServerBreakpoint),{children:F,modal:v=!1,divided:P=!1,width:R="auto",variant:u="default",open:p,defaultOpen:b=!1,onOpenChange:a,defaultActiveIndex:o,placement:f="bottom-start",className:j}=S(w),{getLabel:k}=Y.useLabels(),y=e.useFloatingNodeId(),q=t.useRef([]),[l,g]=t.useState(o??null),[h,B]=t.useState(null),[N,T]=t.useState(b),n=p??N;t.useEffect(()=>{n||g(o??null)},[n,o]);const x=t.useCallback(i=>{p===void 0&&T(i),a==null||a(i)},[p,a]),U=e.useFloating({nodeId:y,open:n,placement:f,onOpenChange:x,middleware:[m.offset(Z),m.flip(),m.shift()],whileElementsMounted:V.autoUpdate}),{context:r,refs:s,x:_,y:L,strategy:M}=U,D=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:q,activeIndex:l,onNavigate:g,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto"})]),W={open:n,setOpen:x,refs:s,listItemsRef:q,activeIndex:l,setActiveIndex:g,placement:f,content:h,setContent:B,divided:P,variant:u,...D},E=(I=s.reference.current)==null?void 0:I.getBoundingClientRect().width,A=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const C=i.offsetParent;if(C)return C.getBoundingClientRect().width},[s.reference.current]);return c.jsxs(z.DropdownContext.Provider,{value:W,children:[F,c.jsx(e.FloatingPortal,{children:n&&c.jsx(e.FloatingFocusManager,{context:r,modal:v,visuallyHiddenDismiss:v?k("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:s.setFloating,className:H.default(O.default["tedi-dropdown"],{[O.default[`tedi-dropdown--${u}`]]:u==="tree"},j),style:{position:M,left:_??0,top:L??0,width:G.resolveDropdownWidth(R,E,A)},role:"menu","aria-orientation":"vertical","aria-activedescendant":l!==null?`dropdown-item-${l}`:void 0}),"data-placement":f,"data-state":n?"open":"closed",children:h})})})]})};d.Trigger=Q.DropdownTrigger;d.Content=$.DropdownContent;d.Item=J.DropdownItem;d.Separator=K.DropdownSeparator;exports.Dropdown=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),O=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),z=require("./dropdown-context.cjs.js"),G=require("./dropdown-helpers.cjs.js"),J=require("./dropdown-item/dropdown-item.cjs.js"),K=require("./dropdown-separator/dropdown-separator.cjs.js"),Q=require("./dropdown-trigger/dropdown-trigger.cjs.js"),V=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),Y=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),m=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Z=4,d=w=>{var I;const{getCurrentBreakpointProps:S}=V.useBreakpointProps(w.defaultServerBreakpoint),{children:F,modal:v=!1,divided:P=!1,width:R="auto",variant:u="default",open:p,defaultOpen:b=!1,onOpenChange:a,defaultActiveIndex:o,placement:f="bottom-start",className:j}=S(w),{getLabel:k}=X.useLabels(),y=e.useFloatingNodeId(),q=t.useRef([]),[l,g]=t.useState(o??null),[h,B]=t.useState(null),[N,T]=t.useState(b),n=p??N;t.useEffect(()=>{n||g(o??null)},[n,o]);const x=t.useCallback(i=>{p===void 0&&T(i),a==null||a(i)},[p,a]),U=e.useFloating({nodeId:y,open:n,placement:f,onOpenChange:x,middleware:[m.offset(Z),m.flip(),m.shift()],whileElementsMounted:Y.autoUpdate}),{context:r,refs:s,x:_,y:L,strategy:M}=U,D=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:q,activeIndex:l,onNavigate:g,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto"})]),W={open:n,setOpen:x,refs:s,listItemsRef:q,activeIndex:l,setActiveIndex:g,placement:f,content:h,setContent:B,divided:P,variant:u,...D},E=(I=s.reference.current)==null?void 0:I.getBoundingClientRect().width,A=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const C=i.offsetParent;if(C)return C.getBoundingClientRect().width},[s.reference.current]);return c.jsxs(z.DropdownContext.Provider,{value:W,children:[F,c.jsx(e.FloatingPortal,{children:n&&c.jsx(e.FloatingFocusManager,{context:r,modal:v,visuallyHiddenDismiss:v?k("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:s.setFloating,className:H.default(O.default["tedi-dropdown"],{[O.default[`tedi-dropdown--${u}`]]:u==="tree"},j),style:{position:M,left:_??0,top:L??0,width:G.resolveDropdownWidth(R,E,A)},role:"menu","aria-orientation":"vertical","aria-activedescendant":l!==null?`dropdown-item-${l}`:void 0}),"data-placement":f,"data-state":n?"open":"closed",children:h})})})]})};d.Trigger=Q.DropdownTrigger;d.Content=$.DropdownContent;d.Item=J.DropdownItem;d.Separator=K.DropdownSeparator;exports.Dropdown=d;

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

@@ -74,11 +74,11 @@ export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps
 }
 export declare const Dropdown: {
     (props: DropdownProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ children }: import('./dropdown-trigger/dropdown-trigger').DropdownTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    Trigger: ({ children }: import('.').DropdownTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Content: ({ children }: {
         children: React.ReactNode;
     }) => null;
-    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: import('./dropdown-item/dropdown-item').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: import('.').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
     Separator: () => import("react/jsx-runtime").JSX.Element;
 };
 export {};

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

@@ -9,13 +9,13 @@ import { resolveDropdownWidth as ee } from "./dropdown-helpers.es.js";
 import { DropdownItem as te } from "./dropdown-item/dropdown-item.es.js";
 import { DropdownSeparator as oe } from "./dropdown-separator/dropdown-separator.es.js";
 import { DropdownTrigger as ne } from "./dropdown-trigger/dropdown-trigger.es.js";
-import { autoUpdate as re } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as ie, flip as se, shift as ae } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useBreakpointProps as le } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as de } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as re } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as ie } from "../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as se } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as ae, flip as le, shift as de } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 const ce = 4, l = (p) => {
   var I;
-  const { getCurrentBreakpointProps: C } = le(p.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: C } = re(p.defaultServerBreakpoint), {
     children: F,
     modal: g = !1,
     divided: R = !1,
@@ -27,7 +27,7 @@ const ce = 4, l = (p) => {
     defaultActiveIndex: o,
     placement: u = "bottom-start",
     className: S
-  } = C(p), { getLabel: k } = de(), y = $(), v = e.useRef([]), [a, m] = e.useState(o ?? null), [w, B] = e.useState(null), [b, W] = e.useState(P), t = c ?? b;
+  } = C(p), { getLabel: k } = ie(), y = $(), v = e.useRef([]), [a, m] = e.useState(o ?? null), [w, B] = e.useState(null), [b, W] = e.useState(P), t = c ?? b;
   e.useEffect(() => {
     t || m(o ?? null);
   }, [t, o]);
@@ -41,8 +41,8 @@ const ce = 4, l = (p) => {
     open: t,
     placement: u,
     onOpenChange: h,
-    middleware: [ie(ce), se(), ae()],
-    whileElementsMounted: re
+    middleware: [ae(ce), le(), de()],
+    whileElementsMounted: se
   }), { context: n, refs: r, x: L, y: M, strategy: T } = E, D = q([
     z(n),
     G(n, { role: "menu" }),
@@ -52,9 +52,6 @@ const ce = 4, l = (p) => {
       activeIndex: a,
       onNavigate: m,
       loop: !0,
-      // When the caller passes `defaultActiveIndex`, treat that item as the
-      // current selection and force focus to land on it when the dropdown
-      // opens — regardless of whether it was opened via click or keyboard.
       selectedIndex: o ?? null,
       focusItemOnOpen: o !== null ? !0 : "auto"
     })

package/src/tedi/components/overlays/modal/index.d.ts

@@ -0,0 +1,8 @@
+export * from './modal';
+export * from './modal-trigger/modal-trigger';
+export * from './modal-content/modal-content';
+export * from './modal-header/modal-header';
+export * from './modal-body/modal-body';
+export * from './modal-footer/modal-footer';
+export * from './modal-closer/modal-closer';
+export * from './modal-context';

package/src/tedi/components/overlays/modal/modal-body/modal-body.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),e=require("../modal.module.scss.cjs.js"),d=({children:o,noScroll:l=!1,className:a})=>t.jsx("div",{className:s.default(e.default["tedi-modal__body"],{[e.default["tedi-modal__body--scroll-page"]]:l},a),children:o});d.displayName="Modal.Body";exports.ModalBody=d;

package/src/tedi/components/overlays/modal/modal-body/modal-body.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface ModalBodyProps {
+    /**
+     * Body content.
+     */
+    children: ReactNode;
+    /**
+     * Disable the body's internal scroll. Use when the modal is wrapped in
+     * `<Modal.Content scrollBehavior="page">` and overflow is handled by the page.
+     * @default false
+     */
+    noScroll?: boolean;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const ModalBody: {
+    ({ children, noScroll, className }: ModalBodyProps): JSX.Element;
+    displayName: string;
+};
+export default ModalBody;

package/src/tedi/components/overlays/modal/modal-body/modal-body.es.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import o from "../modal.module.scss.es.js";
+const e = ({ children: a, noScroll: d = !1, className: s }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: m(
+      o["tedi-modal__body"],
+      {
+        [o["tedi-modal__body--scroll-page"]]: d
+      },
+      s
+    ),
+    children: a
+  }
+);
+e.displayName = "Modal.Body";
+export {
+  e as ModalBody
+};