@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/dataDisplay/avatar/avatar.js

@@ -1,53 +1,66 @@
-import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { jsx as d, jsxs as $ } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { forwardRef as N, useState as $, Children as E, isValidElement as S } from "react";
-import h from "clsx";
-const _ = (i) => typeof i == "string", j = N(function({ className: m, src: s, alt: e, size: t = "medium", variant: u = "circular", color: l, style: d, imgProps: a, children: v, ...r }, f) {
-  const [b, c] = $(!1), n = !!s && !b, x = h(
+import { forwardRef as x, useState as E, Children as S, isValidElement as j } from "react";
+import w from "clsx";
+const N = (o) => typeof o == "string", k = x(function({
+  className: u,
+  src: l,
+  alt: e,
+  size: t = "medium",
+  variant: i = "circular",
+  color: s,
+  style: v,
+  imgProps: a,
+  children: m,
+  "data-testid": f = "avatar",
+  ...r
+}, b) {
+  const [h, c] = E(!1), n = !!l && !h, y = w(
     "smwb-avatar",
-    `smwb-avatar_${u}`,
-    _(t) ? `smwb-avatar_${t}` : null,
-    m
-  ), y = {
-    ...d,
-    ..._(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...l && !n ? { backgroundColor: l } : {}
+    `smwb-avatar_${i}`,
+    N(t) ? `smwb-avatar_${t}` : null,
+    u
+  ), A = {
+    ...v,
+    ...N(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...s && !n ? { backgroundColor: s } : {}
   };
-  return /* @__PURE__ */ o("div", { ref: f, ...r, "data-testid": "avatar", className: x, style: y, children: n ? /* @__PURE__ */ o(
+  return /* @__PURE__ */ d("div", { ref: b, ...r, "data-testid": f, className: y, style: A, children: n ? /* @__PURE__ */ d(
     "img",
     {
       ...a,
-      className: h("smwb-avatar__img", a == null ? void 0 : a.className),
-      src: s,
-      alt: e,
-      onError: (A) => {
-        var w;
-        c(!0), (w = a == null ? void 0 : a.onError) == null || w.call(a, A);
+      className: w("smwb-avatar__img", a == null ? void 0 : a.className),
+      src: l,
+      alt: e != null ? e : a == null ? void 0 : a.alt,
+      onError: (C) => {
+        var _;
+        c(!0), (_ = a == null ? void 0 : a.onError) == null || _.call(a, C);
       }
     }
-  ) : /* @__PURE__ */ o("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: v }) });
-}), M = N(function({
-  className: m,
-  max: s = 5,
+  ) : /* @__PURE__ */ d("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
+}), R = x(function({
+  className: u,
+  max: l = 5,
   total: e,
   onSurplusClick: t,
-  surplusAriaLabel: u = (r) => `${r} more`,
-  size: l,
-  children: d,
-  ...a
-}, v) {
-  const r = E.toArray(d).filter(S), f = e != null ? e : r.length, b = Math.max(s, 1), c = r.slice(0, b), n = f - c.length;
+  surplusAriaLabel: i = (r) => `${r} more`,
+  size: s,
+  children: v,
+  "data-testid": a = "avatar-group",
+  ...m
+}, f) {
+  const r = S.toArray(v).filter(j), b = e != null ? e : r.length, h = Math.max(l, 1), c = r.slice(0, h), n = b - c.length;
   return (
     // In order, the first avatar first; the "+N" chip ends the row.
-    /* @__PURE__ */ C("div", { ref: v, ...a, "data-testid": "avatar-group", className: h("smwb-avatar-group", m), children: [
+    /* @__PURE__ */ $("div", { ref: f, ...m, "data-testid": a, className: w("smwb-avatar-group", u), children: [
       c,
-      n > 0 ? /* @__PURE__ */ o(
-        j,
+      n > 0 ? /* @__PURE__ */ d(
+        k,
         {
           className: "smwb-avatar-group__surplus",
-          size: l,
-          alt: u(n),
+          size: s,
+          alt: i(n),
           onClick: t,
           style: t ? { cursor: "pointer" } : void 0,
           children: `+${n}`
@@ -57,8 +70,8 @@ const _ = (i) => typeof i == "string", j = N(function({ className: m, src: s, al
   );
 });
 export {
-  j as Avatar,
-  M as AvatarGroup,
-  j as default
+  k as Avatar,
+  R as AvatarGroup,
+  k as default
 };
 //# sourceMappingURL=avatar.js.map

package/dist/components/dataDisplay/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  { className, src, alt, size = \"medium\", variant = \"circular\", color, style, imgProps, children, ...props },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid=\"avatar\" className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid=\"avatar-group\" className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;;AA+BA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E,EAAE,WAAAC,GAAW,KAAAC,GAAK,KAAAC,GAAK,MAAAL,IAAO,UAAU,SAAAM,IAAU,YAAY,OAAAC,GAAO,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GACnGC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQZ,KAAQ,CAACS,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeZ,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIgB,IAA6B;AAAA,IACjC,GAAGX;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACS,IAAY,EAAE,iBAAiBT,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAa,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAY,UAAS,WAAWM,GAAiB,OAAOE,GAC/E,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGX;AAAA,MACJ,WAAWS,EAAG,oBAAoBT,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MACA,KAAAC;AAAA,MACA,SAAS,CAACgB,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAb,KAAA,gBAAAA,EAAU,YAAV,QAAAa,EAAA,KAAAb,GAAoBY;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYf,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAgBYa,IAAcrB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAqB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA5B;AAAA,EACA,UAAAU;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQpB,CAAQ,EAAE,OAAOqB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAY,gBAAe,WAAWO,EAAG,qBAAqBf,CAAS,GAC9F,UAAA;AAAA,MAAA+B;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK2B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  Children,\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ImgHTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  useState,\n} from \"react\";\nimport cn from \"clsx\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string;\n  alt?: string;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport const Avatar = forwardRef<HTMLDivElement, PropsWithChildren<AvatarProps>>(function Avatar(\n  {\n    className,\n    src,\n    alt,\n    size = \"medium\",\n    variant = \"circular\",\n    color,\n    style,\n    imgProps,\n    children,\n    \"data-testid\": dataTestId = \"avatar\",\n    ...props\n  },\n  ref\n) {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(src) && !imgFailed;\n\n  const avatarClassName = cn(\n    \"smwb-avatar\",\n    `smwb-avatar_${variant}`,\n    isPresetSize(size) ? `smwb-avatar_${size}` : null,\n    className\n  );\n\n  const inlineStyle: CSSProperties = {\n    ...style,\n    ...(isPresetSize(size) ? {} : { width: size, height: size, fontSize: size / 2.5 }),\n    ...(color && !showImage ? { backgroundColor: color } : {}),\n  };\n\n  return (\n    <div ref={ref} {...props} data-testid={dataTestId} className={avatarClassName} style={inlineStyle}>\n      {showImage ? (\n        <img\n          {...imgProps}\n          className={cn(\"smwb-avatar__img\", imgProps?.className)}\n          src={src}\n          // Avatar's own alt wins; without it, the one in imgProps stays.\n          alt={alt ?? imgProps?.alt}\n          onError={(e) => {\n            setImgFailed(true);\n            imgProps?.onError?.(e);\n          }}\n        />\n      ) : (\n        <span className=\"smwb-avatar__fallback\" role=\"img\" aria-label={alt}>\n          {children}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, PropsWithChildren<AvatarGroupProps>>(function AvatarGroup(\n  {\n    className,\n    max = 5,\n    total,\n    onSurplusClick,\n    surplusAriaLabel = (count: number) => `${count} more`,\n    size,\n    children,\n    \"data-testid\": dataTestId = \"avatar-group\",\n    ...props\n  },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  const totalCount = total ?? items.length;\n  const clampedMax = Math.max(max, 1);\n  const visible: ReactNode[] = items.slice(0, clampedMax);\n  const surplus = totalCount - visible.length;\n\n  return (\n    // In order, the first avatar first; the \"+N\" chip ends the row.\n    <div ref={ref} {...props} data-testid={dataTestId} className={cn(\"smwb-avatar-group\", className)}>\n      {visible}\n      {surplus > 0 ? (\n        <Avatar\n          className=\"smwb-avatar-group__surplus\"\n          size={size}\n          alt={surplusAriaLabel(surplus)}\n          onClick={onSurplusClick}\n          style={onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus}`}\n        </Avatar>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","forwardRef","className","src","alt","variant","color","style","imgProps","children","dataTestId","props","ref","imgFailed","setImgFailed","useState","showImage","avatarClassName","cn","inlineStyle","jsx","e","_a","AvatarGroup","max","total","onSurplusClick","surplusAriaLabel","count","items","Children","isValidElement","totalCount","clampedMax","visible","surplus","jsxs"],"mappings":";;;;;AAiCA,MAAMA,IAAe,CAACC,MAAkD,OAAOA,KAAS,UAE3EC,IAASC,EAA2D,SAC/E;AAAA,EACE,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAL,IAAO;AAAA,EACP,SAAAM,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAY,EAAQb,KAAQ,CAACU,GAE7BI,IAAkBC;AAAA,IACtB;AAAA,IACA,eAAeb,CAAO;AAAA,IACtBP,EAAaC,CAAI,IAAI,eAAeA,CAAI,KAAK;AAAA,IAC7CG;AAAA,EAAA,GAGIiB,IAA6B;AAAA,IACjC,GAAGZ;AAAA,IACH,GAAIT,EAAaC,CAAI,IAAI,CAAA,IAAK,EAAE,OAAOA,GAAM,QAAQA,GAAM,UAAUA,IAAO,IAAA;AAAA,IAC5E,GAAIO,KAAS,CAACU,IAAY,EAAE,iBAAiBV,EAAA,IAAU,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAAR,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWO,GAAiB,OAAOE,GACnF,UAAAH,IACC,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,WAAWU,EAAG,oBAAoBV,KAAA,gBAAAA,EAAU,SAAS;AAAA,MACrD,KAAAL;AAAA,MAEA,KAAKC,KAAA,OAAAA,IAAOI,KAAA,gBAAAA,EAAU;AAAA,MACtB,SAAS,CAACa,MAAM;;AACd,QAAAP,EAAa,EAAI,IACjBQ,IAAAd,KAAA,gBAAAA,EAAU,YAAV,QAAAc,EAAA,KAAAd,GAAoBa;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA,IAGF,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAwB,MAAK,OAAM,cAAYhB,GAC5D,UAAAK,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC,GAkBYc,IAActB,EAAgE,SACzF;AAAA,EACE,WAAAC;AAAA,EACA,KAAAsB,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC,IAAmB,CAACC,MAAkB,GAAGA,CAAK;AAAA,EAC9C,MAAA7B;AAAA,EACA,UAAAU;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMiB,IAAQC,EAAS,QAAQrB,CAAQ,EAAE,OAAOsB,CAAc,GACxDC,IAAaP,KAAA,OAAAA,IAASI,EAAM,QAC5BI,IAAa,KAAK,IAAIT,GAAK,CAAC,GAC5BU,IAAuBL,EAAM,MAAM,GAAGI,CAAU,GAChDE,IAAUH,IAAaE,EAAQ;AAErC;AAAA;AAAA,IAEE,gBAAAE,EAAC,OAAA,EAAI,KAAAxB,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAWQ,EAAG,qBAAqBhB,CAAS,GAC5F,UAAA;AAAA,MAAAgC;AAAA,MACAC,IAAU,IACT,gBAAAf;AAAA,QAACpB;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAAD;AAAA,UACA,KAAK4B,EAAiBQ,CAAO;AAAA,UAC7B,SAAST;AAAA,UACT,OAAOA,IAAiB,EAAE,QAAQ,cAAc;AAAA,UAE/C,cAAIS,CAAO;AAAA,QAAA;AAAA,MAAA,IAEZ;AAAA,IAAA,EAAA,CACN;AAAA;AAEJ,CAAC;"}

package/dist/components/dataDisplay/badge/badge.js

@@ -1,36 +1,45 @@
-import { jsxs as u, jsx as $ } from "react/jsx-runtime";
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/badge/badge.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { forwardRef as g } from "react";
-import n from "clsx";
-const R = g(function({
-  className: o,
-  color: i = "primary",
+import { forwardRef as b } from "react";
+import h from "clsx";
+const R = b(function({
+  className: e,
+  color: c = "primary",
   badgeContent: s,
-  variant: r = "outside",
-  vertical: a = "top",
-  horizontal: l = "right",
-  max: e,
-  showZero: p = !1,
-  badgeAriaLabel: b,
-  children: c,
-  ...f
-}, _) {
-  const t = s === 0 || s === "0", m = (s == null || t && !p) === !0;
-  let d = s;
-  typeof s == "number" && e !== void 0 && s > e && (d = `${e}+`);
-  const w = n(
+  variant: m = "outside",
+  vertical: p = "top",
+  horizontal: f = "right",
+  max: o,
+  showZero: _ = !1,
+  badgeAriaLabel: r,
+  children: a,
+  ...d
+}, w) {
+  const t = s === 0 || s === "0", i = (s == null || t && !_) === !0;
+  let l = s;
+  typeof s == "number" && o !== void 0 && s > o && (l = `${o}+`);
+  const u = h(
     "smwb-badge",
-    `smwb-badge_${i}`,
-    `smwb-badge_${r}`,
-    `smwb-badge_${r}_${a}`,
-    `smwb-badge_${r}_${a}_${l}`,
-    o,
-    { "smwb-badge_no-content": m }
+    `smwb-badge_${c}`,
+    `smwb-badge_${m}`,
+    `smwb-badge_${m}_${p}`,
+    `smwb-badge_${m}_${p}_${f}`,
+    e,
+    { "smwb-badge_no-content": i }
   );
-  return /* @__PURE__ */ u("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
-    c,
-    /* @__PURE__ */ $("span", { ref: _, className: w, "aria-label": b, ...f, children: m ? null : d })
+  return /* @__PURE__ */ $("span", { className: "smwb-badge__wrapper", "data-testid": "badge", children: [
+    a,
+    /* @__PURE__ */ n(
+      "span",
+      {
+        ...d,
+        ref: w,
+        className: u,
+        "aria-label": r != null ? r : d["aria-label"],
+        children: i ? null : l
+      }
+    )
   ] });
 });
 export {

package/dist/components/dataDisplay/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span ref={ref} className={badgeClassname} aria-label={badgeAriaLabel} {...rest}>\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;;AAoBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS,EAAC,QAAA,EAAK,KAAAP,GAAU,WAAWI,GAAgB,cAAYP,GAAiB,GAAGE,GACxE,UAAAG,IAAS,OAAOC,EAAA,CACnB;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"badge.js","sources":["../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  badgeContent?: React.ReactNode;\n  color?: \"primary\" | \"success\" | \"danger\";\n  variant?: \"inside\" | \"outside\";\n  vertical?: \"top\" | \"bottom\";\n  horizontal?: \"right\" | \"left\";\n  /** Cap numeric content, rendering `{max}+` when exceeded. */\n  max?: number;\n  /** Render the badge even when content is 0. */\n  showZero?: boolean;\n  /** Accessible label for the badge value. */\n  badgeAriaLabel?: string;\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, PropsWithChildren<BadgeProps>>(function Badge(\n  {\n    className,\n    color = \"primary\",\n    badgeContent,\n    variant = \"outside\",\n    vertical = \"top\",\n    horizontal = \"right\",\n    max,\n    showZero = false,\n    badgeAriaLabel,\n    children,\n    ...rest\n  },\n  ref\n) {\n  const isZero = badgeContent === 0 || badgeContent === \"0\";\n  const hidden = (badgeContent === undefined || badgeContent === null || (isZero && !showZero)) === true;\n\n  let display: React.ReactNode = badgeContent;\n  if (typeof badgeContent === \"number\" && max !== undefined && badgeContent > max) {\n    display = `${max}+`;\n  }\n\n  const badgeClassname = cn(\n    \"smwb-badge\",\n    `smwb-badge_${color}`,\n    `smwb-badge_${variant}`,\n    `smwb-badge_${variant}_${vertical}`,\n    `smwb-badge_${variant}_${vertical}_${horizontal}`,\n    className,\n    { \"smwb-badge_no-content\": hidden }\n  );\n\n  return (\n    <span className=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {children}\n      <span\n        {...rest}\n        ref={ref}\n        className={badgeClassname}\n        // `badgeAriaLabel` wins over the caller's aria-label; without it, the caller's stays.\n        aria-label={badgeAriaLabel ?? rest[\"aria-label\"]}\n      >\n        {hidden ? null : display}\n      </span>\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","forwardRef","className","color","badgeContent","variant","vertical","horizontal","max","showZero","badgeAriaLabel","children","rest","ref","isZero","hidden","display","badgeClassname","cn","jsxs","jsx"],"mappings":";;;;;AAoBO,MAAMA,IAAQC,EAA2D,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,KAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASV,MAAiB,KAAKA,MAAiB,KAChDW,KAAwCX,KAAiB,QAASU,KAAU,CAACL,OAAe;AAElG,MAAIO,IAA2BZ;AAC/B,EAAI,OAAOA,KAAiB,YAAYI,MAAQ,UAAaJ,IAAeI,MAC1EQ,IAAU,GAAGR,CAAG;AAGlB,QAAMS,IAAiBC;AAAA,IACrB;AAAA,IACA,cAAcf,CAAK;AAAA,IACnB,cAAcE,CAAO;AAAA,IACrB,cAAcA,CAAO,IAAIC,CAAQ;AAAA,IACjC,cAAcD,CAAO,IAAIC,CAAQ,IAAIC,CAAU;AAAA,IAC/CL;AAAA,IACA,EAAE,yBAAyBa,EAAA;AAAA,EAAO;AAGpC,SACE,gBAAAI,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,SAC/C,UAAA;AAAA,IAAAR;AAAA,IACD,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWI;AAAA,QAEX,cAAYP,KAAA,OAAAA,IAAkBE,EAAK,YAAY;AAAA,QAE9C,cAAS,OAAOI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ,CAAC;"}

package/dist/components/dataDisplay/card/card.d.ts

@@ -1,13 +1,41 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event
+     * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`
+     * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element
+     * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.
+     */
     className?: string;
     variant?: "filled" | "elevated" | "outlined";
+    /**
+     * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is
+     * still a button, out of the tab order.
+     */
     disabled?: boolean;
+    /**
+     * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,
+     * and the button's name starts with it.
+     */
     title?: string;
-    /** Footer slot rendered after the content. */
+    /**
+     * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so
+     * controls here keep their own names, clicks and keys; see `onClick`.
+     */
     footer?: ReactNode;
-    /** Makes the card interactive (role=button, keyboard, focus ring). */
+    /**
+     * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with
+     * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls
+     * go there: a control in the children would sit inside the button, and its name would join the card's.
+     *
+     * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control
+     * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does
+     * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click
+     * from activating the card by calling `preventDefault()` on it.
+     */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /** Test id of the root `<div>`; `card` unless given. */
+    "data-testid"?: string;
 }
 export declare const Card: React.ForwardRefExoticComponent<CardProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/card/card.js

@@ -1,37 +1,64 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { jsxs as n, jsx as v } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/card/card.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import _ from "react";
-import l from "clsx";
-const R = _.forwardRef(function({ className: m, variant: v = "elevated", children: o, disabled: d, title: s, footer: i, onClick: r, onKeyDown: e, ...f }, b) {
-  const a = !!r && !d, n = (t) => {
-    e == null || e(t), a && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r(t));
+import N, { useRef as R } from "react";
+import j from "clsx";
+import { isOwnClick as I } from "../../../utils/ownClick.js";
+import { splitControlProps as g } from "../../../utils/controlProps.js";
+const B = N.forwardRef(function({
+  className: b,
+  variant: p = "elevated",
+  children: l,
+  disabled: a,
+  title: m,
+  footer: c,
+  onClick: r,
+  onKeyDown: e,
+  "data-testid": u = "card",
+  ..._
+}, h) {
+  var f;
+  const d = !!r && !a, [s, o] = g(_, !!r), i = R(null), w = (t) => {
+    e == null || e(t), !(!d || t.target !== i.current) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r == null || r(t));
+  }, x = (t) => {
+    I(t, i.current) && (r == null || r(t));
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ n(
     "div",
     {
-      ref: b,
-      "data-testid": "card",
-      className: l("smwb-card", `smwb-card_${v}`, m, {
-        card_disabled: d,
-        "smwb-card_interactive": a
+      ref: h,
+      "data-testid": u,
+      className: j("smwb-card", `smwb-card_${p}`, b, {
+        card_disabled: a,
+        "smwb-card_interactive": d
       }),
-      role: a ? "button" : void 0,
-      tabIndex: a ? 0 : void 0,
-      "aria-disabled": d || void 0,
-      onClick: a ? r : void 0,
-      onKeyDown: n,
-      ...f,
+      ...o,
+      "aria-disabled": r ? void 0 : a || o["aria-disabled"],
+      onClick: d ? x : void 0,
+      onKeyDown: w,
       children: [
-        s && /* @__PURE__ */ c("div", { className: "smwb-card__title", children: s }),
-        o,
-        i && /* @__PURE__ */ c("div", { className: "smwb-card__footer", children: i })
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ...s,
+            ref: i,
+            className: "smwb-card__content",
+            role: r ? "button" : void 0,
+            tabIndex: (f = s.tabIndex) != null ? f : d ? 0 : void 0,
+            "aria-disabled": r ? a || s["aria-disabled"] : void 0,
+            children: [
+              m && /* @__PURE__ */ v("div", { className: "smwb-card__title", children: m }),
+              l
+            ]
+          }
+        ),
+        c && /* @__PURE__ */ v("div", { className: "smwb-card__footer", children: c })
       ]
     }
   );
 });
 export {
-  R as Card,
-  R as default
+  B as Card,
+  B as default
 };
 //# sourceMappingURL=card.js.map

package/dist/components/dataDisplay/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: ReactNode;\n  /** Makes the card interactive (role=button, keyboard, focus ring). */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  { className, variant = \"elevated\", children, disabled, title, footer, onClick, onKeyDown, ...rest },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (interactive && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid=\"card\"\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={interactive ? onClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {title && <div className=\"smwb-card__title\">{title}</div>}\n      {children}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","rest","ref","interactive","handleKeyDown","e","jsxs","cn","jsx"],"mappings":";;;;;AAgBO,MAAMA,IAAOC,EAAM,WAAyD,SACjF,EAAE,WAAAC,GAAW,SAAAC,IAAU,YAAY,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW,GAAGC,EAAA,GAC7FC,GACA;AACA,QAAMC,IAAc,CAAC,CAACJ,KAAW,CAACH,GAE5BQ,IAAgB,CAACC,MAA2C;AAChE,IAAAL,KAAA,QAAAA,EAAYK,IACRF,MAAgBE,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjDA,EAAE,eAAA,GACFN,KAAA,QAAAA,EAAUM;AAAA,EAEd;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,aAAa,aAAab,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBO;AAAA,MAAA,CAC1B;AAAA,MACD,MAAMA,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,iBAAeP,KAAY;AAAA,MAC3B,SAASO,IAAcJ,IAAU;AAAA,MACjC,WAAWK;AAAA,MACV,GAAGH;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QAClDF;AAAA,QACAG,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAV,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, ReactNode, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabIndex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  className?: string;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: ReactNode;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(\n  {\n    className,\n    variant = \"elevated\",\n    children,\n    disabled,\n    title,\n    footer,\n    onClick,\n    onKeyDown,\n    \"data-testid\": dataTestId = \"card\",\n    ...rest\n  },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, !!onClick);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (!interactive || e.target !== contentRef.current) return;\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a portal rendered inside (React delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isOwnClick(e, contentRef.current)) onClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-card\", `smwb-card_${variant}`, className, {\n        card_disabled: disabled,\n        \"smwb-card_interactive\": interactive,\n      })}\n      {...box}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={contentRef}\n        className=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none,\n        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (interactive ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-disabled\"] : undefined}\n      >\n        {title && <div className=\"smwb-card__title\">{title}</div>}\n        {children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      {footer && <div className=\"smwb-card__footer\">{footer}</div>}\n    </div>\n  );\n});\n\nexport default Card;\n"],"names":["Card","React","className","variant","children","disabled","title","footer","onClick","onKeyDown","dataTestId","rest","ref","interactive","control","box","splitControlProps","contentRef","useRef","handleKeyDown","e","handleClick","isOwnClick","jsxs","cn","_a","jsx"],"mappings":";;;;;;;AA8CO,MAAMA,IAAOC,EAAM,WAAyD,SACjF;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAc,CAAC,CAACL,KAAW,CAACH,GAK5B,CAACS,GAASC,CAAG,IAAIC,EAAkBL,GAAM,CAAC,CAACH,CAAO,GAClDS,IAAaC,EAA8B,IAAI,GAK/CC,IAAgB,CAACC,MAA2C;AAEhE,IADAX,KAAA,QAAAA,EAAYW,IACR,GAACP,KAAeO,EAAE,WAAWH,EAAW,aACxCG,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFZ,KAAA,QAAAA,EAAUY;AAAA,EAEd,GAMMC,IAAc,CAACD,MAAwC;AAC3D,IAAIE,EAAWF,GAAGH,EAAW,OAAO,qBAAaG;AAAA,EACnD;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,eAAaF;AAAA,MACb,WAAWc,EAAG,aAAa,aAAarB,CAAO,IAAID,GAAW;AAAA,QAC5D,eAAeG;AAAA,QACf,yBAAyBQ;AAAA,MAAA,CAC1B;AAAA,MACA,GAAGE;AAAA,MAGJ,iBAAeP,IAAU,SAAYH,KAAYU,EAAI,eAAe;AAAA,MACpE,SAASF,IAAcQ,IAAc;AAAA,MACrC,WAAWF;AAAA,MAEX,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGT;AAAA,YACJ,KAAKG;AAAA,YACL,WAAU;AAAA,YAKV,MAAMT,IAAU,WAAW;AAAA,YAC3B,WAAUiB,IAAAX,EAAQ,aAAR,OAAAW,IAAqBZ,IAAc,IAAI;AAAA,YACjD,iBAAeL,IAAUH,KAAYS,EAAQ,eAAe,IAAI;AAAA,YAE/D,UAAA;AAAA,cAAAR,KAAS,gBAAAoB,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAApB,GAAM;AAAA,cAClDF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KAAU,gBAAAmB,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAnB,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D,CAAC;"}