@stenajs-webui/elements 21.42.1 → 21.43.1

package/dist/components/ui/banners/banner/Banner.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { ReactNode } from "react";
+import { AriaAttributes, ReactNode } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { HeadingVariant } from "@stenajs-webui/core";
+import { DivProps, HeadingVariant } from "@stenajs-webui/core";
 export type BannerVariant = "standard" | "info" | "success" | "warning" | "error";
-export interface BannerProps {
+export interface BannerProps extends AriaAttributes {
     icon?: IconDefinition;
     headerText?: string;
     headingLevel?: HeadingVariant;
@@ -12,5 +12,10 @@ export interface BannerProps {
     contentRight?: ReactNode;
     variant?: BannerVariant;
     children?: ReactNode;
+    /**
+     * The role prop of the element, used for accessibility.
+     * If not set, it will default to "status" when variant is success, error or warning, otherwise not set.
+     */
+    role?: DivProps["role"];
 }
 export declare const Banner: React.FC<BannerProps>;

package/dist/index.es.js

@@ -2,7 +2,7 @@
 import * as y from "react";
 import { forwardRef as f, Children as t1, useState as R1, useCallback as F, useId as y1, useContext as T1, useMemo as D1 } from "react";
 import { jsx as C, jsxs as m, Fragment as B } from "react/jsx-runtime";
-import { Box as x, getDataProps as I, Column as _, Row as Z, Heading as J, Text as v, Space as $, Indent as s1, exhaustSwitchCaseElseThrow as w1, useForwardedRef as F1, Spacing as j1, SeparatorLine as E1, Txt as S, ScreenReaderOnlyText as O1 } from "@stenajs-webui/core";
+import { Box as x, getDataProps as I, Column as z, Row as Z, Heading as J, Text as v, Space as $, Indent as s1, exhaustSwitchCaseElseThrow as w1, useForwardedRef as F1, Spacing as j1, SeparatorLine as E1, Txt as S, ScreenReaderOnlyText as O1 } from "@stenajs-webui/core";
 import { FontAwesomeIcon as V } from "@fortawesome/react-fontawesome";
 import l from "classnames";
 import { keyframes as P1, ClassNames as W1 } from "@emotion/react";
@@ -3698,8 +3698,8 @@ const X1 = ({
   style: r,
   transform: d,
   display: u,
-  ...z
-}, h) {
+  ...h
+}, _) {
   if (!o)
     return null;
   const g = typeof c == "string" ? c : c / 10 + "rem";
@@ -3714,9 +3714,9 @@ const X1 = ({
       rotation: t,
       spin: s,
       style: { fontSize: g, ...r },
-      ref: h,
+      ref: _,
       transform: d,
-      ...z
+      ...h
     }
   ) });
 }), o2 = "_banner_hmwzu_1", a2 = "_iconBackground_hmwzu_7", t2 = "_standard_hmwzu_17", s2 = "_info_hmwzu_21", c2 = "_success_hmwzu_25", r2 = "_warning_hmwzu_29", m2 = "_error_hmwzu_33", O = {
@@ -3772,42 +3772,48 @@ const X1 = ({
   icon: a,
   variant: t = "standard",
   loading: c = !1,
-  ...s
-}) => /* @__PURE__ */ m(
-  _,
-  {
-    className: l(O.banner, O[t]),
-    spacing: i || n && e ? 2 : 1,
-    indent: 2,
-    ...I(s),
-    children: [
-      /* @__PURE__ */ m(Z, { justifyContent: "space-between", children: [
-        /* @__PURE__ */ C(Z, { flex: "none", width: x1, alignItems: "center", children: /* @__PURE__ */ C("div", { className: O.iconBackground, children: (a || p1[t] || c) && /* @__PURE__ */ C(B, { children: c ? /* @__PURE__ */ C(k1, { size: "tiny" }) : /* @__PURE__ */ C(
-          N,
-          {
-            icon: a ?? p1[t],
-            size: 20,
-            className: O.icon
-          }
-        ) }) }) }),
-        /* @__PURE__ */ m(Z, { justifyContent: "space-between", flexGrow: 1, gap: !0, children: [
-          /* @__PURE__ */ m(_, { justifyContent: "center", gap: !0, children: [
-            n && /* @__PURE__ */ C(J, { variant: "h5", as: L, children: n }),
-            e && /* @__PURE__ */ C(v, { children: e })
-          ] }),
-          o && /* @__PURE__ */ C(_, { justifyContent: "center", children: o })
-        ] })
-      ] }),
-      i && /* @__PURE__ */ m(Z, { children: [
-        /* @__PURE__ */ C(x, { minWidth: x1 }),
-        /* @__PURE__ */ m(x, { children: [
-          /* @__PURE__ */ C($, {}),
-          i
+  role: s,
+  ...r
+}) => {
+  const d = s ?? (t === "error" || t === "warning" || t === "success" ? "status" : void 0), u = I(r), h = t === "error" ? "polite" : void 0;
+  return /* @__PURE__ */ m(
+    z,
+    {
+      className: l(O.banner, O[t]),
+      spacing: i || n && e ? 2 : 1,
+      indent: 2,
+      role: d,
+      "aria-live": h,
+      ...u,
+      children: [
+        /* @__PURE__ */ m(Z, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ C(Z, { flex: "none", width: x1, alignItems: "center", children: /* @__PURE__ */ C("div", { className: O.iconBackground, children: (a || p1[t] || c) && /* @__PURE__ */ C(B, { children: c ? /* @__PURE__ */ C(k1, { size: "tiny" }) : /* @__PURE__ */ C(
+            N,
+            {
+              icon: a ?? p1[t],
+              size: 20,
+              className: O.icon
+            }
+          ) }) }) }),
+          /* @__PURE__ */ m(Z, { justifyContent: "space-between", flexGrow: 1, gap: !0, children: [
+            /* @__PURE__ */ m(z, { justifyContent: "center", gap: !0, children: [
+              n && /* @__PURE__ */ C(J, { variant: "h5", as: L, children: n }),
+              e && /* @__PURE__ */ C(v, { children: e })
+            ] }),
+            o && /* @__PURE__ */ C(z, { justifyContent: "center", children: o })
+          ] })
+        ] }),
+        i && /* @__PURE__ */ m(Z, { children: [
+          /* @__PURE__ */ C(x, { minWidth: x1 }),
+          /* @__PURE__ */ m(x, { children: [
+            /* @__PURE__ */ C($, {}),
+            i
+          ] })
         ] })
-      ] })
-    ]
-  }
-), g2 = "_link_oed7a_1", b2 = "_disabled_oed7a_31", y2 = "_standard_oed7a_61", w2 = "_bold_oed7a_64", S2 = "_caption_oed7a_68", B2 = "_overline_oed7a_75", k2 = "_large_oed7a_82", v2 = "_medium_oed7a_88", A2 = "_small_oed7a_93", H2 = "_smaller_oed7a_99", W = {
+      ]
+    }
+  );
+}, g2 = "_link_oed7a_1", b2 = "_disabled_oed7a_31", y2 = "_standard_oed7a_61", w2 = "_bold_oed7a_64", S2 = "_caption_oed7a_68", B2 = "_overline_oed7a_75", k2 = "_large_oed7a_82", v2 = "_medium_oed7a_88", A2 = "_small_oed7a_93", H2 = "_smaller_oed7a_99", W = {
   link: g2,
   disabled: b2,
   standard: y2,
@@ -3832,7 +3838,7 @@ const X1 = ({
     iconRight: r,
     href: d,
     ...u
-  }, z) => /* @__PURE__ */ m(
+  }, h) => /* @__PURE__ */ m(
     "a",
     {
       tabIndex: o ? void 0 : i,
@@ -3843,7 +3849,7 @@ const X1 = ({
         a && W.disabled,
         L
       ),
-      ref: z,
+      ref: h,
       href: a ? void 0 : d,
       onClick: a ? void 0 : e,
       ...u,
@@ -3988,17 +3994,17 @@ const X1 = ({
   spinnerClassName: r,
   leftWrapperClassName: d,
   rightWrapperClassName: u,
-  size: z = "medium",
-  responsiveIconOnly: h = !1
+  size: h = "medium",
+  responsiveIconOnly: _ = !1
 }) => {
   const g = (n || L || e || i) && /* @__PURE__ */ C(
     "div",
     {
       className: l(
         b.leftWrapper,
-        b[z],
+        b[h],
         d,
-        h && b.responsiveIconOnly
+        _ && b.responsiveIconOnly
       ),
       children: n ? /* @__PURE__ */ C(
         V,
@@ -4025,9 +4031,9 @@ const X1 = ({
     {
       className: l(
         b.rightWrapper,
-        b[z],
+        b[h],
         u,
-        h && b.responsiveIconOnly
+        _ && b.responsiveIconOnly
       ),
       children: o || (a ? /* @__PURE__ */ C(
         V,
@@ -4047,7 +4053,7 @@ const X1 = ({
         className: l(
           b.label,
           s,
-          h && b.responsiveIconOnly
+          _ && b.responsiveIconOnly
         ),
         children: t
       }
@@ -4068,8 +4074,8 @@ const X1 = ({
     left: r,
     rightIcon: d,
     right: u,
-    disabled: z,
-    onClick: h,
+    disabled: h,
+    onClick: _,
     iconClassName: g,
     labelClassName: w,
     spinnerClassName: A,
@@ -4091,10 +4097,10 @@ const X1 = ({
       {
         ref: $1,
         onClick: (Y) => {
-          if (h) {
-            if (Y.stopPropagation(), Y.preventDefault(), z || t || a)
+          if (_) {
+            if (Y.stopPropagation(), Y.preventDefault(), h || t || a)
               return;
-            h(Y);
+            _(Y);
           }
         },
         className: l(
@@ -4103,7 +4109,7 @@ const X1 = ({
           V1 && H.roundButton,
           e
         ),
-        disabled: z,
+        disabled: h,
         ...H1,
         children: /* @__PURE__ */ C(
           r1,
@@ -4297,8 +4303,8 @@ const T5 = f(
     disabled: r,
     variant: d = "standard",
     left: u,
-    right: z,
-    success: h = !1,
+    right: h,
+    success: _ = !1,
     loading: g = !1,
     ...w
   }, A) {
@@ -4318,9 +4324,9 @@ const T5 = f(
           ),
           disabled: r,
           ref: A,
-          ...w,
           "aria-expanded": i ? e : void 0,
           "aria-controls": i ? E : void 0,
+          ...w,
           children: [
             /* @__PURE__ */ C(
               l1,
@@ -4328,8 +4334,8 @@ const T5 = f(
                 label: L,
                 leftIcon: t,
                 left: u,
-                right: g ? /* @__PURE__ */ C(v1, {}) : z,
-                rightIcon: h ? j : c,
+                right: g ? /* @__PURE__ */ C(v1, {}) : h,
+                rightIcon: _ ? j : c,
                 color: "var(--current-text-color)"
               }
             ),
@@ -4406,7 +4412,7 @@ const T5 = f(
     (d == null ? void 0 : d.selected) && M.selected,
     M[o],
     L
-  ), { renderLink: z, selected: h, ...g } = t, w = ((A = r == null ? void 0 : r.renderLink) == null ? void 0 : A.call(
+  ), { renderLink: h, selected: _, ...g } = t, w = ((A = r == null ? void 0 : r.renderLink) == null ? void 0 : A.call(
     r,
     {
       ...g,
@@ -4444,10 +4450,10 @@ const T5 = f(
     M.iconOnly,
     M[i],
     n
-  ), { renderLink: u, selected: z, ...h } = a, g = ((w = s == null ? void 0 : s.renderLink) == null ? void 0 : w.call(
+  ), { renderLink: u, selected: h, ..._ } = a, g = ((w = s == null ? void 0 : s.renderLink) == null ? void 0 : w.call(
     s,
     {
-      ...h,
+      ..._,
       className: d,
       href: e ? void 0 : o,
       children: c
@@ -4459,7 +4465,7 @@ const T5 = f(
       className: d,
       href: e ? void 0 : o,
       ref: t,
-      ...h,
+      ..._,
       children: c
     }
   );
@@ -4488,8 +4494,8 @@ const T5 = f(
   left: r,
   rightIcon: d,
   right: u,
-  responsiveIconOnly: z,
-  ...h
+  responsiveIconOnly: h,
+  ..._
 }, g) {
   const w = c1(
     L,
@@ -4510,7 +4516,7 @@ const T5 = f(
         T && H.labelOnly,
         e
       ),
-      ...h,
+      ..._,
       children: /* @__PURE__ */ C(
         r1,
         {
@@ -4521,7 +4527,7 @@ const T5 = f(
           right: u,
           rightIcon: d,
           label: w,
-          responsiveIconOnly: z
+          responsiveIconOnly: h
         }
       )
     }
@@ -4569,7 +4575,7 @@ const T5 = f(
   onClickUp: L,
   iconColor: e,
   disabled: i
-}) => /* @__PURE__ */ m(_, { className: L1.upDownButtons, children: [
+}) => /* @__PURE__ */ m(z, { className: L1.upDownButtons, children: [
   /* @__PURE__ */ C("button", { onClick: L, className: L1.button, disabled: i, children: /* @__PURE__ */ C(Z, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ C(
     N,
     {
@@ -4636,7 +4642,7 @@ const T5 = f(
   background: n = "white",
   ...L
 }) => /* @__PURE__ */ C(
-  _,
+  z,
   {
     shadow: "box",
     background: n,
@@ -4674,7 +4680,7 @@ const T5 = f(
 ), TC = ({
   variant: n = "standard",
   ...L
-}) => /* @__PURE__ */ C(_, { indent: 3, spacing: n === "compact" ? 1 : 3, ...L }), q5 = "_cardy_voxad_1", J5 = "_cardyIndent_voxad_12", M1 = {
+}) => /* @__PURE__ */ C(z, { indent: 3, spacing: n === "compact" ? 1 : 3, ...L }), q5 = "_cardy_voxad_1", J5 = "_cardyIndent_voxad_12", M1 = {
   cardy: q5,
   cardyIndent: J5
 }, DC = ({
@@ -4820,7 +4826,7 @@ const T5 = f(
   label: L,
   children: e
 }) => /* @__PURE__ */ m(
-  _,
+  z,
   {
     borderRadius: "var(--swui-border-radius-large)",
     spacing: 2,
@@ -4929,7 +4935,7 @@ const T5 = f(
   trapFocus: o,
   className: a
 }) => L ? /* @__PURE__ */ C(U1, { contain: o, children: /* @__PURE__ */ m(
-  _,
+  z,
   {
     width: e,
     shadow: i,
@@ -4939,7 +4945,7 @@ const T5 = f(
     borderRadius: "8px",
     children: [
       n,
-      /* @__PURE__ */ C(_, { gap: 1, children: L })
+      /* @__PURE__ */ C(z, { gap: 1, children: L })
     ]
   }
 ) }) : null, _4 = y.createContext({}), Z1 = ({ disableCloseOnClick: n, onClick: L }, e) => {
@@ -5008,7 +5014,7 @@ const T5 = f(
 }, s) {
   const { onKeyDown: r, innerRef: d } = Z1(c, s);
   return /* @__PURE__ */ C(B, { children: /* @__PURE__ */ m(
-    _,
+    z,
     {
       gap: 1,
       ...c,
@@ -5046,8 +5052,8 @@ const T5 = f(
   // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
   responsiveIconOnly: d,
   ...u
-}, z) {
-  const h = c1(
+}, h) {
+  const _ = c1(
     e,
     s,
     void 0,
@@ -5061,7 +5067,7 @@ const T5 = f(
       role: "tab",
       "aria-selected": L,
       tabIndex: r,
-      ref: z,
+      ref: h,
       ...u,
       children: /* @__PURE__ */ C(
         r1,
@@ -5072,7 +5078,7 @@ const T5 = f(
           left: o,
           right: t,
           rightIcon: c,
-          label: h,
+          label: _,
           responsiveIconOnly: d
         }
       )
@@ -5143,7 +5149,7 @@ const T5 = f(
   footer: e,
   disableBorder: i = !1,
   variant: o = "standard"
-}) => /* @__PURE__ */ m(_, { children: [
+}) => /* @__PURE__ */ m(z, { children: [
   L && /* @__PURE__ */ C(Z, { spacing: !0, children: /* @__PURE__ */ C(J, { variant: "h5", children: L }) }),
   /* @__PURE__ */ C(
     "table",
@@ -5207,7 +5213,7 @@ const T5 = f(
   grid: W4
 }, b1 = ({ location: n, dateTime: L, originalDateTime: e, size: i }) => i === "compact" ? /* @__PURE__ */ m(Z, { gap: 2, justifyContent: "space-between", children: [
   /* @__PURE__ */ C(S, { size: "small", children: n }),
-  /* @__PURE__ */ m(_, { children: [
+  /* @__PURE__ */ m(z, { children: [
     e && /* @__PURE__ */ C(
       S,
       {
@@ -5220,9 +5226,9 @@ const T5 = f(
     ),
     /* @__PURE__ */ C(S, { size: "small", variant: "bold", children: L })
   ] })
-] }) : i === "relaxed" ? /* @__PURE__ */ m(_, { gap: 0.5, children: [
+] }) : i === "relaxed" ? /* @__PURE__ */ m(z, { gap: 0.5, children: [
   /* @__PURE__ */ C(S, { size: "large", variant: "bold", children: n }),
-  /* @__PURE__ */ m(_, { children: [
+  /* @__PURE__ */ m(z, { children: [
     e && /* @__PURE__ */ C(
       S,
       {
@@ -5235,9 +5241,9 @@ const T5 = f(
     ),
     /* @__PURE__ */ C(S, { size: "small", variant: "bold", children: L })
   ] })
-] }) : /* @__PURE__ */ m(_, { gap: 0.5, children: [
+] }) : /* @__PURE__ */ m(z, { gap: 0.5, children: [
   /* @__PURE__ */ C(S, { children: n }),
-  /* @__PURE__ */ m(_, { children: [
+  /* @__PURE__ */ m(z, { children: [
     e && /* @__PURE__ */ C(
       S,
       {
@@ -5274,7 +5280,7 @@ const T5 = f(
       }
     ),
     /* @__PURE__ */ m("div", { className: n1.grid, children: [
-      /* @__PURE__ */ m(_, { alignItems: "center", children: [
+      /* @__PURE__ */ m(z, { alignItems: "center", children: [
         /* @__PURE__ */ C(N, { icon: c, fixedWidth: !0, size: 20 }),
         /* @__PURE__ */ C($, { half: !0 }),
         /* @__PURE__ */ C(
@@ -5295,7 +5301,7 @@ const T5 = f(
           }
         )
       ] }),
-      /* @__PURE__ */ m(_, { gap: o === "standard" ? 3 : 2, children: [
+      /* @__PURE__ */ m(z, { gap: o === "standard" ? 3 : 2, children: [
         /* @__PURE__ */ C(b1, { ...L, size: o }),
         /* @__PURE__ */ C(b1, { ...e, size: o })
       ] }),