@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/headless/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/headless/source/components/dataDisplay/accordion/accordion.jsx

@@ -1,15 +1,37 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import {
+  Show,
+  children,
+  createComputed,
+  createSignal,
+  mergeProps,
+  splitProps
+} from "solid-js";
 import cn from "clsx";
 import { AnimateHeight } from "../../base/animateHeight/animateHeight";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+function ExpandIcon(props) {
+  const icon = children(() => props.icon);
+  return <Show
+    when={icon()}
+    fallback={<Icon
+      class={cn("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": props.open })}
+      name="expand_more"
+      size={24}
+    />}
+  >
+      {icon()}
+    </Show>;
+}
 function Accordion(props) {
-  const merged = mergeProps({ isOpenByDefault: false }, props);
+  const merged = mergeProps({ isOpenByDefault: false, variant: "filled" }, props);
   const [local] = splitProps(merged, [
     "class",
     "title",
+    "subtitle",
+    "variant",
     "isOpenByDefault",
     "open",
     "disabled",
@@ -17,7 +39,10 @@ function Accordion(props) {
     "id",
     "children",
     "startAdornment",
+    "endAdornment",
     "noIcon",
+    "lazy",
+    "unmountOnExit",
     "onToggleClick",
     "onChange",
     "ref"
@@ -30,6 +55,18 @@ function Accordion(props) {
   const baseId = createId(local.id);
   const contentId = `${baseId}-content`;
   const headerId = `${baseId}-header`;
+  const title = children(() => local.title);
+  const subtitle = children(() => local.subtitle);
+  const deferred = Boolean(local.lazy || local.unmountOnExit);
+  const content = deferred ? void 0 : children(() => local.children);
+  const hasContent = () => content ? Boolean(content()) : "children" in local;
+  const [present, setPresent] = createSignal(isOpen());
+  createComputed(() => {
+    if (isOpen()) setPresent(true);
+  });
+  const onCollapsed = (height) => {
+    if (height === 0 && local.unmountOnExit && !isOpen()) setPresent(false);
+  };
   const toggle = (event) => {
     if (local.disabled) return;
     setIsOpen(!isOpen());
@@ -37,7 +74,7 @@ function Accordion(props) {
   };
   return <div
     ref={mergeRefs(local.ref)}
-    class={cn("smwb-accordion", { "smwb-disabled": local.disabled }, local.class)}
+    class={cn("smwb-accordion", `smwb-accordion_${local.variant}`, { "smwb-disabled": local.disabled }, local.class)}
     data-testid="accordion"
   >
       <button
@@ -47,28 +84,33 @@ function Accordion(props) {
     type="button"
     disabled={local.disabled}
     aria-expanded={isOpen()}
-    aria-controls={local.children ? contentId : void 0}
+    aria-controls={hasContent() ? contentId : void 0}
   >
         {local.startAdornment?.(isOpen())}
-        <span class="smwb-accordion__title">{local.title}</span>
-        <Show when={!local.noIcon}>
-          <Show
-    when={local.icon}
-    fallback={<Icon
-      class={cn("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": isOpen() })}
-      name="expand_more"
-      size={24}
-    />}
-  >
-            {local.icon}
+        <span class="smwb-accordion__heading">
+          <span class="smwb-accordion__title">{title()}</span>
+          <Show when={subtitle()}>
+            <span class="smwb-accordion__subtitle">{subtitle()}</span>
           </Show>
+        </span>
+        <Show when={local.endAdornment}>
+          <span class="smwb-accordion__end">{local.endAdornment?.(isOpen())}</span>
+        </Show>
+        <Show when={!local.noIcon}>
+          <ExpandIcon icon={local.icon} open={isOpen()} />
         </Show>
       </button>
 
-      <Show when={local.children}>
+      <Show when={hasContent()}>
         <div id={contentId} role="region" aria-labelledby={headerId}>
-          <AnimateHeight height={isOpen() ? "auto" : 0} animateOpacity duration={300} class="smwb-accordion__content">
-            {local.children}
+          <AnimateHeight
+    height={isOpen() ? "auto" : 0}
+    animateOpacity
+    duration={300}
+    class="smwb-accordion__content"
+    onHeightAnimationEnd={onCollapsed}
+  >
+            {content ? content() : <Show when={present()}>{local.children}</Show>}
           </AnimateHeight>
         </div>
       </Show>

package/dist/headless/source/components/dataDisplay/accordion/accordion.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { AnimateHeight } from \"../../base/animateHeight/animateHeight\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AccordionProps {\n  class?: string;\n  title?: string;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: JSX.Element;\n  id?: string;\n  startAdornment?: (isOpen: boolean) => JSX.Element;\n  noIcon?: boolean;\n  onToggleClick?: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Accordion(props: ParentProps<AccordionProps>): JSX.Element {\n  const merged = mergeProps({ isOpenByDefault: false }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"isOpenByDefault\",\n    \"open\",\n    \"disabled\",\n    \"icon\",\n    \"id\",\n    \"children\",\n    \"startAdornment\",\n    \"noIcon\",\n    \"onToggleClick\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [isOpen, setIsOpen] = createControllableState<boolean>({\n    value: () => local.open,\n    defaultValue: local.isOpenByDefault,\n    onChange: (next) => local.onChange?.(next),\n  });\n\n  const baseId = createId(local.id);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  const toggle: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    setIsOpen(!isOpen());\n    local.onToggleClick?.(event);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-accordion\", { \"smwb-disabled\": local.disabled }, local.class)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        class=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={local.disabled}\n        aria-expanded={isOpen()}\n        aria-controls={local.children ? contentId : undefined}\n      >\n        {local.startAdornment?.(isOpen())}\n        <span class=\"smwb-accordion__title\">{local.title}</span>\n        <Show when={!local.noIcon}>\n          <Show\n            when={local.icon}\n            fallback={\n              <Icon\n                class={cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen() })}\n                name=\"expand_more\"\n                size={24}\n              />\n            }\n          >\n            {local.icon}\n          </Show>\n        </Show>\n      </button>\n\n      <Show when={local.children}>\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight height={isOpen() ? \"auto\" : 0} animateOpacity duration={300} class=\"smwb-accordion__content\">\n            {local.children}\n          </AnimateHeight>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAqB7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,iBAAiB,MAAM,GAAG,KAAK;AAC3D,QAAM,CAAC,KAAK,IAAI,WAAW,QAAQ;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,QAAQ,SAAS,IAAI,wBAAiC;AAAA,IAC3D,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,WAAW,IAAI;AAAA,EAC3C,CAAC;AAED,QAAM,SAAS,SAAS,MAAM,EAAE;AAChC,QAAM,YAAY,GAAG,MAAM;AAC3B,QAAM,WAAW,GAAG,MAAM;AAE1B,QAAM,SAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,SAAU;AACpB,cAAU,CAAC,OAAO,CAAC;AACnB,UAAM,gBAAgB,KAAK;AAAA,EAC7B;AAEA,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,IAC5E,YAAY;AAAA,GACb;AAAA,MACC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,KAAK;AAAA,IACL,UAAU,MAAM;AAAA,IAChB,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,WAAW,YAAY;AAAA,GAC7C;AAAA,SACE,MAAM,iBAAiB,OAAO,CAAC,EAAE;AAAA,QAClC,CAAC,KAAK,MAAM,yBAAyB,MAAM,MAAM,EAAhD,KAAuD;AAAA,QACxD,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ;AAAA,UACzB,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,OAAO,GAAG,8BAA8B,EAAE,qCAAqC,OAAO,EAAE,CAAC;AAAA,MACzF,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,GAEH;AAAA,aACE,MAAM,KAAK;AAAA,UACd,EAXC,KAWM;AAAA,QACT,EAbC,KAaM;AAAA,MACT,EAzBC,OAyBQ;AAAA;AAAA,MAET,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,QAC1B,CAAC,IAAI,IAAI,WAAW,KAAK,SAAS,iBAAiB,UAAU;AAAA,UAC3D,CAAC,cAAc,QAAQ,OAAO,IAAI,SAAS,GAAG,eAAe,UAAU,KAAK,MAAM,0BAA0B;AAAA,aACzG,MAAM,SAAS;AAAA,UAClB,EAFC,cAEe;AAAA,QAClB,EAJC,IAIK;AAAA,MACR,EANC,KAMM;AAAA,IACT,EAvCC;AAyCL;AAEA,IAAO,oBAAQ;","names":[],"file":"accordion.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children,\n  createComputed,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { AnimateHeight, type Height } from \"../../base/animateHeight/animateHeight\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/**\n * `filled` — the header is an app-bar strip on a raised panel (the original look).\n * `outlined` — a bordered card with a flat header: for feeds of records.\n * `plain` — no frame, a divider under each panel: for FAQ-style lists.\n * The flat variants stretch to the container and wrap long titles.\n */\nexport type AccordionVariant = \"filled\" | \"outlined\" | \"plain\";\n\nexport interface AccordionProps {\n  class?: string;\n  /** Header text or markup (a date, an author, a badge…). */\n  title?: JSX.Element;\n  /** Secondary line under the title. */\n  subtitle?: JSX.Element;\n  variant?: AccordionVariant;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: JSX.Element;\n  id?: string;\n  startAdornment?: (isOpen: boolean) => JSX.Element;\n  /** Rendered after the title, before the expand icon. */\n  endAdornment?: (isOpen: boolean) => JSX.Element;\n  noIcon?: boolean;\n  /** Create the content on first open instead of up front. */\n  lazy?: boolean;\n  /** Remove the content once the panel has collapsed (created again on open). */\n  unmountOnExit?: boolean;\n  onToggleClick?: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The custom expand icon, read once where it renders, or the rotating chevron. */\nfunction ExpandIcon(props: { icon: JSX.Element; open: boolean }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show\n      when={icon()}\n      fallback={\n        <Icon\n          class={cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": props.open })}\n          name=\"expand_more\"\n          size={24}\n        />\n      }\n    >\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Accordion(props: ParentProps<AccordionProps>): JSX.Element {\n  const merged = mergeProps({ isOpenByDefault: false, variant: \"filled\" as AccordionVariant }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"subtitle\",\n    \"variant\",\n    \"isOpenByDefault\",\n    \"open\",\n    \"disabled\",\n    \"icon\",\n    \"id\",\n    \"children\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"noIcon\",\n    \"lazy\",\n    \"unmountOnExit\",\n    \"onToggleClick\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [isOpen, setIsOpen] = createControllableState<boolean>({\n    value: () => local.open,\n    defaultValue: local.isOpenByDefault,\n    onChange: (next) => local.onChange?.(next),\n  });\n\n  const baseId = createId(local.id);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  // Read each JSX prop once. A prop written as markup is created anew on every\n  // read, and during hydration a copy the server did not render where this one\n  // lands (or rendered only to test it, as a <Show> condition does) has no DOM\n  // node to adopt: hydrate() throws \"Unable to find DOM nodes for hydration key\".\n  // The icon is read by ExpandIcon, which renders only without noIcon.\n  const title = children(() => local.title);\n  const subtitle = children(() => local.subtitle);\n\n  // Deferred content (lazy / unmountOnExit) is created only while it is shown, so\n  // it can't be read up front to see whether there is any: the region is kept\n  // whenever children are passed. Otherwise the content is resolved right away.\n  const deferred = Boolean(local.lazy || local.unmountOnExit);\n  const content = deferred ? undefined : children(() => local.children);\n  const hasContent = (): boolean => (content ? Boolean(content()) : \"children\" in local);\n\n  const [present, setPresent] = createSignal(isOpen());\n  // Mount deferred content in the same update that opens the panel, so the\n  // height animation measures it.\n  createComputed(() => {\n    if (isOpen()) setPresent(true);\n  });\n  const onCollapsed = (height: Height): void => {\n    if (height === 0 && local.unmountOnExit && !isOpen()) setPresent(false);\n  };\n\n  const toggle: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    setIsOpen(!isOpen());\n    local.onToggleClick?.(event);\n  };\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-accordion\", `smwb-accordion_${local.variant}`, { \"smwb-disabled\": local.disabled }, local.class)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        class=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={local.disabled}\n        aria-expanded={isOpen()}\n        aria-controls={hasContent() ? contentId : undefined}\n      >\n        {local.startAdornment?.(isOpen())}\n        <span class=\"smwb-accordion__heading\">\n          <span class=\"smwb-accordion__title\">{title()}</span>\n          <Show when={subtitle()}>\n            <span class=\"smwb-accordion__subtitle\">{subtitle()}</span>\n          </Show>\n        </span>\n        <Show when={local.endAdornment}>\n          <span class=\"smwb-accordion__end\">{local.endAdornment?.(isOpen())}</span>\n        </Show>\n        <Show when={!local.noIcon}>\n          <ExpandIcon icon={local.icon} open={isOpen()} />\n        </Show>\n      </button>\n\n      <Show when={hasContent()}>\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen() ? \"auto\" : 0}\n            animateOpacity\n            duration={300}\n            class=\"smwb-accordion__content\"\n            onHeightAnimationEnd={onCollapsed}\n          >\n            {content ? content() : <Show when={present()}>{local.children}</Show>}\n          </AnimateHeight>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Accordion;\n"],"mappings":"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","names":[],"file":"accordion.jsx"}

package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx

@@ -65,25 +65,50 @@ function Avatar(props) {
     </div>;
 }
 function AvatarGroup(props) {
-  const merged = mergeProps({ max: 5 }, props);
-  const [local, rest] = splitProps(merged, ["class", "max", "total", "onSurplusClick", "children", "ref"]);
+  const merged = mergeProps(
+    { max: 5, surplusAriaLabel: (count) => `${count} more` },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "max",
+    "total",
+    "onSurplusClick",
+    "surplusAriaLabel",
+    "size",
+    "children",
+    "ref"
+  ]);
   const resolved = resolveChildren(() => local.children);
   const items = () => resolved.toArray();
   const totalCount = () => local.total ?? items().length;
   const clampedMax = () => Math.max(local.max, 1);
   const visible = () => items().slice(0, clampedMax());
+  const hidden = () => items().slice(clampedMax());
   const surplus = () => totalCount() - visible().length;
   return <div {...rest} ref={mergeRefs(local.ref)} data-testid="avatar-group" class={cn("smwb-avatar-group", local.class)}>
+      {visible()}
       <Show when={surplus() > 0}>
         <Avatar
     class="smwb-avatar-group__surplus"
+    size={local.size ?? "medium"}
+    alt={local.surplusAriaLabel(surplus())}
     onClick={local.onSurplusClick}
     style={local.onSurplusClick ? { cursor: "pointer" } : void 0}
   >
           {`+${surplus()}`}
         </Avatar>
       </Show>
-      {visible()}
+      {
+    /* Avatars past max are created with the rest (the children resolve at
+       once), so they are rendered, hidden: a server that left them out would
+       leave the browser without nodes to hydrate them from. */
+  }
+      <Show when={hidden().length > 0}>
+        <span class="smwb-avatar-group__hidden" hidden>
+          {hidden()}
+        </span>
+      </Show>
     </div>;
 }
 var avatar_default = Avatar;

package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx.map

@@ -1 +1 @@
-{"version":3,"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  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps({ max: 5 }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"max\", \"total\", \"onSurplusClick\", \"children\", \"ref\"]);\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 surplus = (): number => totalCount() - visible().length;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {visible() as JSX.Element}\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"mappings":"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","names":[],"file":"avatar.jsx"}
+{"version":3,"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"],"mappings":"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","names":[],"file":"avatar.jsx"}

package/dist/headless/source/components/dataDisplay/badge/badge.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Badge(props) {
@@ -25,9 +25,13 @@ function Badge(props) {
     "children",
     "ref"
   ]);
-  const isZero = () => local.badgeContent === 0 || local.badgeContent === "0";
-  const hidden = () => local.badgeContent === void 0 || local.badgeContent === null || isZero() && !local.showZero;
-  const display = () => typeof local.badgeContent === "number" && local.max !== void 0 && local.badgeContent > local.max ? `${local.max}+` : local.badgeContent;
+  const content = children(() => local.badgeContent);
+  const isZero = () => content() === 0 || content() === "0";
+  const hidden = () => content() === void 0 || content() === null || isZero() && !local.showZero;
+  const display = () => {
+    const value = content();
+    return typeof value === "number" && local.max !== void 0 && value > local.max ? `${local.max}+` : value;
+  };
   return <span class="smwb-badge__wrapper" data-testid="badge">
       {local.children}
       <span

package/dist/headless/source/components/dataDisplay/badge/badge.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\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  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const isZero = (): boolean => local.badgeContent === 0 || local.badgeContent === \"0\";\n  const hidden = (): boolean =>\n    local.badgeContent === undefined || local.badgeContent === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element | number | string | undefined =>\n    typeof local.badgeContent === \"number\" && local.max !== undefined && local.badgeContent > local.max\n      ? `${local.max}+`\n      : local.badgeContent;\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAiB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,SAAS,MAAe,MAAM,iBAAiB,KAAK,MAAM,iBAAiB;AACjF,QAAM,SAAS,MACb,MAAM,iBAAiB,UAAa,MAAM,iBAAiB,QAAS,OAAO,KAAK,CAAC,MAAM;AAEzF,QAAM,UAAU,MACd,OAAO,MAAM,iBAAiB,YAAY,MAAM,QAAQ,UAAa,MAAM,eAAe,MAAM,MAC5F,GAAG,MAAM,GAAG,MACZ,MAAM;AAEZ,SACE,CAAC,KAAK,MAAM,sBAAsB,YAAY,QAAQ;AAAA,OACnD,MAAM,SAAS;AAAA,MAChB,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,KAAK;AAAA,MACzB,cAAc,MAAM,OAAO;AAAA,MAC3B,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ;AAAA,MAC7C,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ,IAAI,MAAM,UAAU;AAAA,MACjE,MAAM;AAAA,MACN,EAAE,yBAAyB,OAAO,EAAE;AAAA,IACtC;AAAA,IACA,YAAY,MAAM;AAAA,GACnB;AAAA,QACC,CAAC,KAAK,MAAM,CAAC,OAAO,IAAI,QAAQ,EAAE,EAAjC,KAAwC;AAAA,MAC3C,EAfC,KAeM;AAAA,IACT,EAlBC;AAoBL;AAEA,IAAO,gBAAQ;","names":[],"file":"badge.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/badge/badge.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\";\n\nexport interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  badgeContent?: JSX.Element | number | string;\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  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Badge(props: ParentProps<BadgeProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      color: \"primary\" as const,\n      variant: \"outside\" as const,\n      vertical: \"top\" as const,\n      horizontal: \"right\" as const,\n      showZero: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"color\",\n    \"badgeContent\",\n    \"variant\",\n    \"vertical\",\n    \"horizontal\",\n    \"max\",\n    \"showZero\",\n    \"badgeAriaLabel\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the content once: markup passed as a prop is created anew on every\n  // read, and during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.badgeContent);\n  const isZero = (): boolean => content() === 0 || content() === \"0\";\n  const hidden = (): boolean => content() === undefined || content() === null || (isZero() && !local.showZero);\n\n  const display = (): JSX.Element => {\n    const value = content();\n    return typeof value === \"number\" && local.max !== undefined && value > local.max ? `${local.max}+` : value;\n  };\n\n  return (\n    <span class=\"smwb-badge__wrapper\" data-testid=\"badge\">\n      {local.children}\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-badge\",\n          `smwb-badge_${local.color}`,\n          `smwb-badge_${local.variant}`,\n          `smwb-badge_${local.variant}_${local.vertical}`,\n          `smwb-badge_${local.variant}_${local.vertical}_${local.horizontal}`,\n          local.class,\n          { \"smwb-badge_no-content\": hidden() }\n        )}\n        aria-label={local.badgeAriaLabel}\n      >\n        <Show when={!hidden()}>{display()}</Show>\n      </span>\n    </span>\n  );\n}\n\nexport default Badge;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAiB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,YAAY;AACjD,QAAM,SAAS,MAAe,QAAQ,MAAM,KAAK,QAAQ,MAAM;AAC/D,QAAM,SAAS,MAAe,QAAQ,MAAM,UAAa,QAAQ,MAAM,QAAS,OAAO,KAAK,CAAC,MAAM;AAEnG,QAAM,UAAU,MAAmB;AACjC,UAAM,QAAQ,QAAQ;AACtB,WAAO,OAAO,UAAU,YAAY,MAAM,QAAQ,UAAa,QAAQ,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM;AAAA,EACvG;AAEA,SACE,CAAC,KAAK,MAAM,sBAAsB,YAAY,QAAQ;AAAA,OACnD,MAAM,SAAS;AAAA,MAChB,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,KAAK;AAAA,MACzB,cAAc,MAAM,OAAO;AAAA,MAC3B,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ;AAAA,MAC7C,cAAc,MAAM,OAAO,IAAI,MAAM,QAAQ,IAAI,MAAM,UAAU;AAAA,MACjE,MAAM;AAAA,MACN,EAAE,yBAAyB,OAAO,EAAE;AAAA,IACtC;AAAA,IACA,YAAY,MAAM;AAAA,GACnB;AAAA,QACC,CAAC,KAAK,MAAM,CAAC,OAAO,IAAI,QAAQ,EAAE,EAAjC,KAAwC;AAAA,MAC3C,EAfC,KAeM;AAAA,IACT,EAlBC;AAoBL;AAEA,IAAO,gBAAQ;","names":[],"file":"badge.jsx"}

package/dist/headless/source/components/dataDisplay/card/card.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
@@ -15,6 +15,7 @@ function Card(props) {
     "onKeyDown",
     "ref"
   ]);
+  const footer = children(() => local.footer);
   const interactive = () => !!local.onClick && !local.disabled;
   const handleKeyDown = (event) => {
     callHandler(local.onKeyDown, event);
@@ -41,8 +42,8 @@ function Card(props) {
         <div class="smwb-card__title">{local.title}</div>
       </Show>
       {local.children}
-      <Show when={local.footer}>
-        <div class="smwb-card__footer">{local.footer}</div>
+      <Show when={footer()}>
+        <div class="smwb-card__footer">{footer()}</div>
       </Show>
     </div>;
 }

package/dist/headless/source/components/dataDisplay/card/card.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, 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  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={local.footer}>\n        <div class=\"smwb-card__footer\">{local.footer}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAWrB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IACD,MAAM,YAAY,IAAI,WAAW;AAAA,IACjC,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,YAAY,IAAI,MAAM,UAAU;AAAA,IACzC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,MAAM,QAAQ;AAAA,QACxB,CAAC,IAAI,MAAM,qBAAqB,MAAM,OAAO,EAA5C,IAAkD;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EArBC;AAuBL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}
+{"version":3,"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"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAWrB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IACD,MAAM,YAAY,IAAI,WAAW;AAAA,IACjC,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,YAAY,IAAI,MAAM,UAAU;AAAA,IACzC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,QACpB,CAAC,IAAI,MAAM,qBAAqB,OAAO,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EArBC;AAuBL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}

package/dist/headless/source/components/dataDisplay/chart/chart.jsx

@@ -0,0 +1,168 @@
+import {
+  Show,
+  createEffect,
+  createSignal,
+  mergeProps,
+  onCleanup,
+  onMount,
+  splitProps,
+  untrack
+} from "solid-js";
+import cn from "clsx";
+import { Skeleton } from "../../feedBack/skeleton";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { chartTheme, readChartPalette, samePalette } from "./chartTheme";
+const styleObject = (style) => typeof style === "object" && style ? style : {};
+const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const loadECharts = () => import("echarts");
+function Chart(props) {
+  const merged = mergeProps({ height: 240, renderer: "canvas" }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "style",
+    "label",
+    "summary",
+    "option",
+    "height",
+    "loader",
+    "renderer",
+    "onClick",
+    "onReady",
+    "ref"
+  ]);
+  let root;
+  let canvas;
+  const [palette, setPalette] = createSignal();
+  const [ready, setReady] = createSignal(false);
+  let module;
+  let instance;
+  let themed;
+  let announced;
+  let pending = false;
+  const hasSize = () => canvas.clientWidth > 0 && canvas.clientHeight > 0;
+  const optionFor = (colours) => typeof local.option === "function" ? local.option(colours) : local.option;
+  const create = (loaded, colours) => {
+    const created = loaded.init(canvas, chartTheme(colours), { renderer: local.renderer });
+    created.on("click", (params) => local.onClick?.(params));
+    themed = colours;
+    return created;
+  };
+  const draw = (option) => {
+    if (!instance) return;
+    if (!hasSize()) {
+      pending = true;
+      return;
+    }
+    pending = false;
+    try {
+      instance.setOption(option, { notMerge: true });
+    } catch (error) {
+      console.error("[smwb] Chart: the option did not draw.", error);
+    }
+  };
+  const retheme = (colours) => {
+    if (!instance || !module || themed && samePalette(themed, colours)) return;
+    if (typeof instance.setTheme === "function") {
+      try {
+        instance.setTheme(chartTheme(colours));
+      } catch (error) {
+        console.error("[smwb] Chart: the theme did not apply.", error);
+      }
+      themed = colours;
+    } else {
+      instance.dispose();
+      instance = create(module, colours);
+    }
+  };
+  createEffect(() => {
+    const colours = palette();
+    if (!ready() || !colours || !instance) return;
+    retheme(colours);
+    draw(optionFor(colours));
+    const current = instance;
+    if (current && announced !== current) {
+      announced = current;
+      untrack(() => local.onReady?.(current));
+    }
+  });
+  onMount(() => {
+    let disposed = false;
+    const refresh = () => {
+      const next = readChartPalette(root);
+      const current = untrack(palette);
+      if (!current || !samePalette(current, next)) setPalette(next);
+    };
+    refresh();
+    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class", "style"]
+    });
+    const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    media?.addEventListener("change", refresh);
+    const start = () => {
+      if (disposed || instance || !module || !hasSize()) return;
+      const colours = readChartPalette(root);
+      const current = untrack(palette);
+      if (!current || !samePalette(current, colours)) setPalette(colours);
+      instance = create(module, colours);
+      setReady(true);
+    };
+    const onResize = () => {
+      if (!hasSize()) return;
+      if (!instance) {
+        start();
+        return;
+      }
+      try {
+        instance.resize();
+      } catch {
+      }
+      const colours = untrack(palette);
+      if (pending && colours) draw(untrack(() => optionFor(colours)));
+    };
+    let frame = 0;
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(onResize);
+    }) : void 0;
+    resizeObserver?.observe(canvas);
+    (local.loader ?? loadECharts)().then(
+      (loaded) => {
+        module = loaded;
+        start();
+      },
+      (error) => console.error("[smwb] Chart: ECharts did not load.", error)
+    );
+    onCleanup(() => {
+      disposed = true;
+      themeObserver.disconnect();
+      media?.removeEventListener("change", refresh);
+      resizeObserver?.disconnect();
+      cancelAnimationFrame(frame);
+      instance?.dispose();
+      instance = void 0;
+    });
+  });
+  return <div
+    data-testid="chart"
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => root = el)}
+    class={cn("smwb-chart", local.class)}
+    style={{ ...styleObject(local.style), height: cssLength(local.height) }}
+  >
+      <div ref={canvas} class="smwb-chart__canvas" role="img" aria-label={local.label} />
+      <Show when={!ready()}>
+        <Skeleton class="smwb-chart__skeleton" variant="rounded" width="100%" height="100%" />
+      </Show>
+      <Show when={local.summary}>
+        <p class="smwb-chart__summary">{local.summary}</p>
+      </Show>
+    </div>;
+}
+var chart_default = Chart;
+export {
+  Chart,
+  chart_default as default
+};
+//# sourceMappingURL=chart.jsx.map

package/dist/headless/source/components/dataDisplay/chart/chart.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chart/chart.tsx"],"sourcesContent":["import {\n  type JSX,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { type ChartOption, type ChartPalette, chartTheme, readChartPalette, samePalette } from \"./chartTheme\";\n\n/** What an ECharts event hands its handler: the item under the pointer. */\nexport interface ChartEventParams {\n  componentType?: string;\n  seriesType?: string;\n  seriesIndex?: number;\n  seriesName?: string;\n  name?: string;\n  dataIndex?: number;\n  data?: unknown;\n  value?: unknown;\n  [key: string]: unknown;\n}\n\n/** The part of an ECharts instance the chart uses; `onReady` hands over the instance itself. */\nexport interface ChartInstance {\n  setOption(option: ChartOption, opts?: { notMerge?: boolean }): void;\n  resize(): void;\n  on(eventName: string, handler: (params: ChartEventParams) => void): void;\n  dispose(): void;\n  /** ECharts 6 switches the theme in place; with ECharts 5 the chart is created anew. */\n  setTheme?(theme: object): void;\n}\n\n/** What `loader` resolves to: `echarts`, or `echarts/core` with the charts you use registered. */\nexport interface ChartModule {\n  init(dom: HTMLElement, theme?: object | string | null, opts?: { renderer?: \"canvas\" | \"svg\" }): ChartInstance;\n}\n\nexport interface ChartProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** What the chart shows: its accessible name. */\n  label: string;\n  /** The chart in words, for screen readers; it is there before the chart draws, and on the server. */\n  summary?: string;\n  /**\n   * The ECharts option, or a function of the theme's palette that returns it.\n   * It is applied whole whenever it or the theme changes.\n   */\n  option: ChartOption | ((palette: ChartPalette) => ChartOption);\n  /** The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width. */\n  height?: number | string;\n  /**\n   * Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\n   * library. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\n   * that registers only the charts you use with `echarts/core`.\n   */\n  loader?: () => Promise<ChartModule>;\n  /** How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created. */\n  renderer?: \"canvas\" | \"svg\";\n  /** A click on an item: a bar, a point, a node. */\n  onClick?: (params: ChartEventParams) => void;\n  /** The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it. */\n  onReady?: (chart: ChartInstance) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Style = JSX.CSSProperties | string | undefined;\n\nconst styleObject = (style: Style): JSX.CSSProperties => (typeof style === \"object\" && style ? style : {});\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst loadECharts = (): Promise<ChartModule> => import(\"echarts\") as unknown as Promise<ChartModule>;\n\n/**\n * An ECharts chart in the theme's palette. On the server, and until ECharts\n * loads in the browser, a skeleton of the same size stands in its place, so\n * the page does not jump; the chart follows theme switches and its box's size.\n */\nexport function Chart(props: ChartProps): JSX.Element {\n  const merged = mergeProps({ height: 240 as number | string, renderer: \"canvas\" as \"canvas\" | \"svg\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"style\",\n    \"label\",\n    \"summary\",\n    \"option\",\n    \"height\",\n    \"loader\",\n    \"renderer\",\n    \"onClick\",\n    \"onReady\",\n    \"ref\",\n  ]);\n\n  let root!: HTMLDivElement;\n  let canvas!: HTMLDivElement;\n  const [palette, setPalette] = createSignal<ChartPalette>();\n  const [ready, setReady] = createSignal(false);\n  let module: ChartModule | undefined;\n  let instance: ChartInstance | undefined;\n  let themed: ChartPalette | undefined;\n  let announced: ChartInstance | undefined;\n  let pending = false;\n\n  const hasSize = (): boolean => canvas.clientWidth > 0 && canvas.clientHeight > 0;\n  const optionFor = (colours: ChartPalette): ChartOption =>\n    typeof local.option === \"function\" ? local.option(colours) : local.option;\n\n  const create = (loaded: ChartModule, colours: ChartPalette): ChartInstance => {\n    const created = loaded.init(canvas, chartTheme(colours), { renderer: local.renderer });\n    created.on(\"click\", (params) => local.onClick?.(params));\n    themed = colours;\n    return created;\n  };\n\n  // Not at zero size (a hidden tab, a collapsed panel): there the graph of\n  // ECharts 6.1 inverts a degenerate matrix and throws. The option waits for\n  // the chart to get a size, and a failed redraw is caught up on the next one.\n  const draw = (option: ChartOption): void => {\n    if (!instance) return;\n    if (!hasSize()) {\n      pending = true;\n      return;\n    }\n    pending = false;\n    try {\n      instance.setOption(option, { notMerge: true });\n    } catch (error) {\n      console.error(\"[smwb] Chart: the option did not draw.\", error);\n    }\n  };\n\n  const retheme = (colours: ChartPalette): void => {\n    if (!instance || !module || (themed && samePalette(themed, colours))) return;\n    if (typeof instance.setTheme === \"function\") {\n      try {\n        instance.setTheme(chartTheme(colours));\n      } catch (error) {\n        console.error(\"[smwb] Chart: the theme did not apply.\", error);\n      }\n      themed = colours;\n    } else {\n      instance.dispose();\n      instance = create(module, colours);\n    }\n  };\n\n  createEffect(() => {\n    const colours = palette();\n    if (!ready() || !colours || !instance) return;\n    retheme(colours);\n    draw(optionFor(colours));\n    const current = instance;\n    if (current && announced !== current) {\n      announced = current;\n      untrack(() => local.onReady?.(current));\n    }\n  });\n\n  onMount(() => {\n    let disposed = false;\n    const refresh = (): void => {\n      const next = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, next)) setPalette(next);\n    };\n    refresh();\n\n    // The theme switches by an attribute on <html> (data-theme, a class) or\n    // with the system setting.\n    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media =\n      typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : undefined;\n    media?.addEventListener(\"change\", refresh);\n\n    // The palette is read again here, not taken from mount: a theme set after\n    // the chart mounted would otherwise show for a frame in the old colours.\n    const start = (): void => {\n      if (disposed || instance || !module || !hasSize()) return;\n      const colours = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, colours)) setPalette(colours);\n      instance = create(module, colours);\n      setReady(true);\n    };\n\n    const onResize = (): void => {\n      if (!hasSize()) return;\n      if (!instance) {\n        start();\n        return;\n      }\n      try {\n        instance.resize();\n      } catch {\n        // It catches up on the next resize.\n      }\n      const colours = untrack(palette);\n      if (pending && colours) draw(untrack(() => optionFor(colours)));\n    };\n    // In the next frame, not in the observer's callback: drawing there resizes\n    // what it observes, and the browser reports a ResizeObserver loop.\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(onResize);\n          })\n        : undefined;\n    resizeObserver?.observe(canvas);\n\n    (local.loader ?? loadECharts)().then(\n      (loaded) => {\n        module = loaded;\n        start();\n      },\n      (error: unknown) => console.error(\"[smwb] Chart: ECharts did not load.\", error)\n    );\n\n    onCleanup(() => {\n      disposed = true;\n      themeObserver.disconnect();\n      media?.removeEventListener(\"change\", refresh);\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n      instance?.dispose();\n      instance = undefined;\n    });\n  });\n\n  return (\n    <div\n      data-testid=\"chart\"\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (root = el))}\n      class={cn(\"smwb-chart\", local.class)}\n      style={{ ...styleObject(local.style), height: cssLength(local.height) }}\n    >\n      <div ref={canvas} class=\"smwb-chart__canvas\" role=\"img\" aria-label={local.label} />\n      <Show when={!ready()}>\n        <Skeleton class=\"smwb-chart__skeleton\" variant=\"rounded\" width=\"100%\" height=\"100%\" />\n      </Show>\n      <Show when={local.summary}>\n        <p class=\"smwb-chart__summary\">{local.summary}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport default Chart;\n"],"mappings":"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","names":[],"file":"chart.jsx"}