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

package/package.json

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

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

@@ -40,6 +40,14 @@ type CollapseBreakpointProps = {
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Inverted color palette — flips the link / icon colors to their
+     * inverted-surface equivalents (white text + icon), for use on top of dark
+     * backgrounds. Pairs with both the with-text and icon-only variants; the
+     * secondary-arrow style has no inverted form in the design.
+     * @default false
+     */
+    inverted?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**

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

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

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

@@ -11,7 +11,8 @@ const e = {
   "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"
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
+  "tedi-collapse--inverted": "tedi-collapse--inverted-bd2d0e21"
 };
 export {
   e as default

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

package/src/tedi/components/notifications/alert/alert.d.ts

@@ -54,8 +54,18 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      * Callback function triggered when the close button is clicked.
      * Adding this handler renders a close button in the alert.
      * Useful for dismissible alerts.
+     *
+     * Ignored when `action` is also set — the consumer's slot wins, and is
+     * responsible for any close affordance it wants to expose.
      */
     onClose?: () => void;
+    /**
+     * Custom content for the right-side slot of the alert (e.g. a CTA button,
+     * a link, or a small icon stack). Replaces the default close button when
+     * provided. Use this instead of squeezing buttons into `children` so the
+     * layout slot is reserved and aligned consistently.
+     */
+    action?: React.ReactNode;
     /**
      * The ARIA role of the alert, informing screen readers about the alert's purpose.
      * Options:
@@ -80,5 +90,8 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      */
     titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-export declare const Alert: (props: AlertProps) => JSX.Element | null;
+export declare const Alert: {
+    (props: AlertProps): JSX.Element | null;
+    displayName: string;
+};
 export default Alert;

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

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

package/src/tedi/components/notifications/alert/alert.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0","tedi-alert--has-action":"tedi-alert--has-action-0140d06a"};exports.default=e;

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

@@ -9,7 +9,8 @@ const e = {
   "tedi-alert--warning": "tedi-alert--warning-88456526",
   "tedi-alert--danger": "tedi-alert--danger-b9a2aa60",
   "tedi-alert--global": "tedi-alert--global-14ff86d0",
-  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0"
+  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0",
+  "tedi-alert--has-action": "tedi-alert--has-action-0140d06a"
 };
 export {
   e as default