@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -12,6 +12,8 @@ export interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {
     color?: string;
     /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */
     imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;
+    /** Test id of the root `<div>`; `avatar` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Avatar(props: ParentProps<AvatarProps>): JSX.Element;
@@ -26,6 +28,8 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
     surplusAriaLabel?: (count: number) => string;
     /** Size of the "+N" surplus chip: match the avatars in the group. */
     size?: AvatarSize | number;
+    /** Test id of the root `<div>`; `avatar-group` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element;

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

@@ -1,20 +1,20 @@
-import { use as y, spread as f, mergeProps as v, insert as a, createComponent as u, effect as A, setAttribute as S, template as m } from "solid-js/web";
+import { use as z, spread as f, mergeProps as v, insert as s, createComponent as u, effect as k, setAttribute as A, template as m } from "solid-js/web";
 import '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as z, splitProps as x, createSignal as C, Show as h, children as L } from "solid-js";
+import { mergeProps as y, splitProps as x, createSignal as C, Show as h, children as L } from "solid-js";
 import _ from "clsx";
 import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
 import { callHandler as E } from "../../../primitives/callHandler.js";
-var F = /* @__PURE__ */ m("<img>"), k = /* @__PURE__ */ m("<div>"), I = /* @__PURE__ */ m("<span class=smwb-avatar__fallback role=img>"), M = /* @__PURE__ */ m("<span class=smwb-avatar-group__hidden hidden>");
+import { mergeStyle as F } from "../../../primitives/mergeStyle.js";
+var I = /* @__PURE__ */ m("<img>"), S = /* @__PURE__ */ m("<div>"), M = /* @__PURE__ */ m("<span class=smwb-avatar__fallback role=img>"), B = /* @__PURE__ */ m("<span class=smwb-avatar-group__hidden hidden>");
 const w = (l) => typeof l == "string";
-function j(l) {
-  const p = z({
+function G(l) {
+  const g = y({
     size: "medium",
     variant: "circular"
-  }, l), [r, g] = x(p, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref"]), [d, n] = C(!1), i = () => !!r.src && !d(), c = () => {
+  }, l), [r, p] = x(g, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref", "data-testid"]), [d, n] = C(!1), i = () => !!r.src && !d(), c = () => {
     const e = r.size;
-    return {
-      ...typeof r.style == "object" && r.style ? r.style : {},
+    return F(r.style, {
       ...w(e) ? {} : {
         width: `${e}px`,
         height: `${e}px`,
@@ -23,30 +23,32 @@ function j(l) {
       ...r.color && !i() ? {
         "background-color": r.color
       } : {}
-    };
+    });
   };
   return (() => {
-    var e = k(), o = P(r.ref);
-    return typeof o == "function" && y(o, e), f(e, v(g, {
-      "data-testid": "avatar",
+    var e = S(), o = P(r.ref);
+    return typeof o == "function" && z(o, e), f(e, v(p, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "avatar";
+      },
       get class() {
         return _("smwb-avatar", `smwb-avatar_${r.variant}`, w(r.size) ? `smwb-avatar_${r.size}` : void 0, r.class);
       },
       get style() {
         return c();
       }
-    }), !1, !0), a(e, u(h, {
+    }), !1, !0), s(e, u(h, {
       get when() {
         return i();
       },
       get fallback() {
         return (() => {
-          var t = I();
-          return a(t, () => r.children), A(() => S(t, "aria-label", r.alt)), t;
+          var t = M();
+          return s(t, () => r.children), k(() => A(t, "aria-label", r.alt)), t;
         })();
       },
       get children() {
-        var t = F();
+        var t = I();
         return f(t, v(() => r.imgProps ?? {}, {
           get class() {
             return _("smwb-avatar__img", r.imgProps?.class);
@@ -57,32 +59,34 @@ function j(l) {
           get alt() {
             return r.alt;
           },
-          onError: (s) => {
-            n(!0), E(r.imgProps?.onError, s);
+          onError: (a) => {
+            n(!0), E(r.imgProps?.onError, a);
           }
         }), !1, !1), t;
       }
     })), e;
   })();
 }
-function K(l) {
-  const p = z({
+function O(l) {
+  const g = y({
     max: 5,
-    surplusAriaLabel: (s) => `${s} more`
-  }, l), [r, g] = x(p, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref"]), d = L(() => r.children), n = () => d.toArray(), i = () => r.total ?? n().length, c = () => Math.max(r.max, 1), e = () => n().slice(0, c()), o = () => n().slice(c()), t = () => i() - e().length;
+    surplusAriaLabel: (a) => `${a} more`
+  }, l), [r, p] = x(g, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref", "data-testid"]), d = L(() => r.children), n = () => d.toArray(), i = () => r.total ?? n().length, c = () => Math.max(r.max, 1), e = () => n().slice(0, c()), o = () => n().slice(c()), t = () => i() - e().length;
   return (() => {
-    var s = k(), $ = P(r.ref);
-    return typeof $ == "function" && y($, s), f(s, v(g, {
-      "data-testid": "avatar-group",
+    var a = S(), $ = P(r.ref);
+    return typeof $ == "function" && z($, a), f(a, v(p, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "avatar-group";
+      },
       get class() {
         return _("smwb-avatar-group", r.class);
       }
-    }), !1, !0), a(s, () => e(), null), a(s, u(h, {
+    }), !1, !0), s(a, () => e(), null), s(a, u(h, {
       get when() {
         return t() > 0;
       },
       get children() {
-        return u(j, {
+        return u(G, {
           class: "smwb-avatar-group__surplus",
           get size() {
             return r.size ?? "medium";
@@ -103,19 +107,19 @@ function K(l) {
           }
         });
       }
-    }), null), a(s, u(h, {
+    }), null), s(a, u(h, {
       get when() {
         return o().length > 0;
       },
       get children() {
-        var b = M();
-        return a(b, () => o()), b;
+        var b = B();
+        return s(b, () => o()), b;
       }
-    }), null), s;
+    }), null), a;
   })();
 }
 export {
-  j as Avatar,
-  K as AvatarGroup
+  G as Avatar,
+  O as AvatarGroup
 };
 //# 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  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\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?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties => {\n    const size = local.size;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"avatar\"\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\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  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","props","merged","mergeProps","variant","local","rest","splitProps","imgFailed","setImgFailed","createSignal","showImage","Boolean","src","inlineStyle","style","width","height","color","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","undefined","class","_$insert","_$createComponent","Show","when","fallback","_el$3","_tmpl$3","children","_$effect","_$setAttribute","alt","_el$2","_tmpl$","imgProps","event","callHandler","onError","AvatarGroup","max","surplusAriaLabel","count","resolved","resolveChildren","items","toArray","totalCount","total","length","clampedMax","Math","visible","slice","hidden","surplus","_el$4","_ref$2","onClick","onSurplusClick","cursor","_el$5","_tmpl$4"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\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?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties | string | undefined => {\n    const size = local.size;\n    return mergeStyle(local.style, {\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    });\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar\"}\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\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 | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar-group\"}\n      class={cn(\"smwb-avatar-group\", local.class)}\n    >\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","props","merged","mergeProps","variant","local","rest","splitProps","imgFailed","setImgFailed","createSignal","showImage","Boolean","src","inlineStyle","mergeStyle","style","width","height","color","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","undefined","class","_$insert","_$createComponent","Show","when","fallback","_el$3","_tmpl$3","children","_$effect","_$setAttribute","alt","_el$2","_tmpl$","imgProps","event","callHandler","onError","AvatarGroup","max","surplusAriaLabel","count","resolved","resolveChildren","items","toArray","totalCount","total","length","clampedMax","Math","visible","slice","hidden","surplus","_el$4","_ref$2","onClick","onSurplusClick","cursor","_el$5","_tmpl$4"],"mappings":"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"}

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

@@ -1,11 +1,42 @@
 import { type JSX, type ParentProps } from "solid-js";
 import { type Ref } from "../../../primitives/mergeRefs";
 export interface CardProps extends JSX.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.
+     */
+    class?: string | undefined;
     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. */
+    /**
+     * 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?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;
+    /**
+     * 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?: JSX.Element;
+    /** Test id of the root `<div>`; `card` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Card(props: ParentProps<CardProps>): JSX.Element;

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

@@ -1,60 +1,73 @@
-import { use as v, spread as g, mergeProps as _, memo as b, insert as n, createComponent as d, template as i } from "solid-js/web";
+import { use as f, spread as p, mergeProps as u, memo as b, insert as o, createComponent as g, template as d } from "solid-js/web";
 import '../../../assets/styles/less/components/card/card.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as w, splitProps as h, children as $, Show as s } from "solid-js";
-import k from "clsx";
-import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
-import { callHandler as c } from "../../../primitives/callHandler.js";
-var C = /* @__PURE__ */ i("<div class=smwb-card__title>"), D = /* @__PURE__ */ i("<div class=smwb-card__footer>"), K = /* @__PURE__ */ i("<div>");
-function q(m) {
-  const p = w({
+import { mergeProps as y, splitProps as D, children as P, Show as _ } from "solid-js";
+import x from "clsx";
+import { mergeRefs as K } from "../../../primitives/mergeRefs.js";
+import { callHandler as a } from "../../../primitives/callHandler.js";
+import { isOwnClick as E } from "../../../utils/ownClick.js";
+import { splitControlProps as H } from "../../../utils/controlProps.js";
+var O = /* @__PURE__ */ d("<div class=smwb-card__title>"), R = /* @__PURE__ */ d("<div class=smwb-card__footer>"), S = /* @__PURE__ */ d("<div><div>");
+function L(v) {
+  const C = y({
     variant: "elevated"
-  }, m), [e, u] = h(p, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref"]), l = $(() => e.footer), t = () => !!e.onClick && !e.disabled, f = (r) => {
-    c(e.onKeyDown, r), t() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), c(e.onClick, r));
+  }, v), [r, w] = D(C, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref", "data-testid"]), s = P(() => r.footer), i = () => !!r.onClick && !r.disabled, [c, k] = H(w, () => !!r.onClick);
+  let l;
+  const h = (e) => {
+    a(r.onKeyDown, e), !(!i() || e.target !== l) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a(r.onClick, e));
+  }, $ = (e) => {
+    E(e, l ?? null) && a(r.onClick, e);
   };
   return (() => {
-    var r = K(), a = y(e.ref);
-    return typeof a == "function" && v(a, r), g(r, _(u, {
-      "data-testid": "card",
+    var e = S(), n = e.firstChild, m = K(r.ref);
+    return typeof m == "function" && f(m, e), p(e, u(k, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "card";
+      },
       get class() {
-        return k("smwb-card", `smwb-card_${e.variant}`, e.class, {
-          card_disabled: e.disabled,
-          "smwb-card_interactive": t()
+        return x("smwb-card", `smwb-card_${r.variant}`, r.class, {
+          card_disabled: r.disabled,
+          "smwb-card_interactive": i()
         });
       },
+      get "aria-disabled"() {
+        return b(() => !r.onClick)() && r.disabled || void 0;
+      },
+      get onClick() {
+        return i() ? $ : void 0;
+      },
+      onKeyDown: h
+    }), !1, !0), f((t) => l = t, n), p(n, u(c, {
+      class: "smwb-card__content",
       get role() {
-        return t() ? "button" : void 0;
+        return r.onClick ? "button" : void 0;
       },
       get tabindex() {
-        return t() ? 0 : void 0;
+        return c.tabindex ?? (i() ? 0 : void 0);
       },
       get "aria-disabled"() {
-        return e.disabled || void 0;
-      },
-      get onClick() {
-        return b(() => !!t())() ? e.onClick : void 0;
-      },
-      onKeyDown: f
-    }), !1, !0), n(r, d(s, {
+        return b(() => !!r.onClick)() && r.disabled || void 0;
+      }
+    }), !1, !0), o(n, g(_, {
       get when() {
-        return e.title;
+        return r.title;
       },
       get children() {
-        var o = C();
-        return n(o, () => e.title), o;
+        var t = O();
+        return o(t, () => r.title), t;
       }
-    }), null), n(r, () => e.children, null), n(r, d(s, {
+    }), null), o(n, () => r.children, null), o(e, g(_, {
       get when() {
-        return l();
+        return s();
       },
       get children() {
-        var o = D();
-        return n(o, l), o;
+        var t = R();
+        return o(t, s), t;
       }
-    }), null), r;
+    }), null), e;
   })();
 }
 export {
-  q as Card
+  L as Card
 };
 //# 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 { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","handleKeyDown","event","callHandler","onKeyDown","key","preventDefault","_el$","_tmpl$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","role","undefined","tabindex","_$memo","_$insert","_$createComponent","Show","when","title","_el$2","_tmpl$","_el$3","_tmpl$2"],"mappings":";;;;;;;;AAgBO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAAuBH,CAAK,GAC3D,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,WACA,YACA,YACA,SACA,UACA,WACA,aACA,KAAK,CACN,GAIKM,IAASC,EAAS,MAAMJ,EAAMG,MAAM,GACpCE,IAAcA,MAAe,CAAC,CAACL,EAAMM,WAAW,CAACN,EAAMO,UAEvDC,IAAkEC,CAAAA,MAAU;AAChFC,IAAAA,EAAYV,EAAMW,WAAWF,CAAK,GAC9BJ,QAAkBI,EAAMG,QAAQ,WAAWH,EAAMG,QAAQ,SAC3DH,EAAMI,eAAAA,GACNH,EAAYV,EAAMM,SAASG,CAAmF;AAAA,EAElH;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA,GAAAC,IAGSC,EAAUjB,EAAMkB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBpB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,IAAA,QAAA;AAAA,eACXqB,EAAG,aAAa,aAAatB,EAAMD,OAAO,IAAIC,EAAMuB,OAAO;AAAA,UAChEC,eAAexB,EAAMO;AAAAA,UACrB,yBAAyBF,EAAAA;AAAAA,QAAY,CACtC;AAAA,MAAC;AAAA,MAAA,IACFoB,OAAI;AAAA,eAAEpB,EAAAA,IAAgB,WAAWqB;AAAAA,MAAS;AAAA,MAAA,IAC1CC,WAAQ;AAAA,eAAEtB,EAAAA,IAAgB,IAAIqB;AAAAA,MAAS;AAAA,MAAA,IAAA,kBAAA;AAAA,eACxB1B,EAAMO,YAAYmB;AAAAA,MAAS;AAAA,MAAA,IAC1CpB,UAAO;AAAA,eAAEsB,EAAA,MAAA,CAAA,CAAAvB,GAAa,MAAGL,EAAMM,UAAUoB;AAAAA,MAAS;AAAA,MAAA,WACvClB;AAAAA,IAAAA,CAAa,GAAA,IAAA,EAAA,GAAAqB,EAAAf,GAAAgB,EAEvBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhC,EAAMiC;AAAAA,MAAK;AAAA,MAAA,IAAA7B,WAAA;AAAA,YAAA8B,IAAAC,EAAAA;AAAAN,eAAAA,EAAAK,GAAA,MACUlC,EAAMiC,KAAK,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAL,EAAAf,GAAA,MAE3Cd,EAAMI,UAAQ,IAAA,GAAAyB,EAAAf,GAAAgB,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE7B,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAgC,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GACcjC,CAAM,GAAAiC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAtB;AAAAA,EAAA,GAAA;AAI9C;"}
+{"version":3,"file":"card.js","sources":["../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends JSX.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  class?: string | undefined;\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   * 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?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\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?: JSX.Element;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.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, () => !!local.onClick);\n  let content: HTMLDivElement | undefined;\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: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!interactive() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\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 (Solid delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) callHandler(local.onClick, event);\n  };\n\n  return (\n    <div\n      {...box}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"card\"}\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without. Where it sets none\n      // (undefined), the caller's stay.\n      aria-disabled={(!local.onClick && local.disabled) || undefined}\n      onClick={interactive() ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"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        // (undefined), the caller's stay. Its tabindex is a default: the\n        // caller's wins, e.g. for roving focus.\n        role={local.onClick ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-disabled={(!!local.onClick && local.disabled) || undefined}\n      >\n        <Show when={local.title}>\n          <div class=\"smwb-card__title\">{local.title}</div>\n        </Show>\n        {local.children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","control","box","splitControlProps","content","handleKeyDown","event","callHandler","onKeyDown","target","key","preventDefault","handleClick","isOwnClick","_el$","_tmpl$3","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","_$memo","undefined","el","role","tabindex","_$insert","_$createComponent","Show","when","title","_el$3","_tmpl$","_el$4","_tmpl$2"],"mappings":"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"}