@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/components/base/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import { type JSX, For, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"style\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n\n  const onRipple = (event: MouseEvent): void => {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid=\"ripple\"\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"names":["Ripple","props","merged","mergeProps","duration","local","rest","splitProps","ripples","setRipples","createSignal","nextKey","onRipple","event","rect","currentTarget","getBoundingClientRect","diameter","Math","max","width","height","radius","coordX","coordY","center","clientX","left","clientY","top","key","prev","x","y","size","setTimeout","slice","actionRef","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","classes","ripple","_$insert","_$createComponent","For","each","children","_el$2","_$effect","_p$","_v$","child","_v$2","_v$3","_v$4","_v$5","_v$6","color","e","_$className","t","_$setStyleProperty","a","o","i","n","undefined"],"mappings":"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"}
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import { type JSX, For, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"style\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n\n  const onRipple = (event: MouseEvent): void => {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid=\"ripple\"\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"names":["Ripple","props","merged","mergeProps","duration","local","rest","splitProps","ripples","setRipples","createSignal","nextKey","onRipple","event","rect","currentTarget","getBoundingClientRect","diameter","Math","max","width","height","radius","coordX","coordY","center","clientX","left","clientY","top","key","prev","x","y","size","setTimeout","slice","actionRef","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","classes","ripple","_$insert","_$createComponent","For","each","children","_el$2","_$effect","_p$","_v$","child","_v$2","_v$3","_v$4","_v$5","_v$6","color","e","_$className","t","_$setStyleProperty","a","o","i","n","undefined"],"mappings":"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"}

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

@@ -1,8 +1,19 @@
 import { type JSX, type ParentProps } from "solid-js";
 import { type Ref } from "../../../primitives/mergeRefs";
+/**
+ * `filled` — the header is an app-bar strip on a raised panel (the original look).
+ * `outlined` — a bordered card with a flat header: for feeds of records.
+ * `plain` — no frame, a divider under each panel: for FAQ-style lists.
+ * The flat variants stretch to the container and wrap long titles.
+ */
+export type AccordionVariant = "filled" | "outlined" | "plain";
 export interface AccordionProps {
     class?: string;
-    title?: string;
+    /** Header text or markup (a date, an author, a badge…). */
+    title?: JSX.Element;
+    /** Secondary line under the title. */
+    subtitle?: JSX.Element;
+    variant?: AccordionVariant;
     isOpenByDefault?: boolean;
     /** Controlled open state. When set, the component is controlled. */
     open?: boolean;
@@ -12,7 +23,13 @@ export interface AccordionProps {
     icon?: JSX.Element;
     id?: string;
     startAdornment?: (isOpen: boolean) => JSX.Element;
+    /** Rendered after the title, before the expand icon. */
+    endAdornment?: (isOpen: boolean) => JSX.Element;
     noIcon?: boolean;
+    /** Create the content on first open instead of up front. */
+    lazy?: boolean;
+    /** Remove the content once the panel has collapsed (created again on open). */
+    unmountOnExit?: boolean;
     onToggleClick?: (e: MouseEvent & {
         currentTarget: HTMLButtonElement;
         target: Element;

package/dist/components/dataDisplay/accordion/accordion.js

@@ -1,83 +1,126 @@
-import { use as $, setAttribute as i, insert as a, createComponent as c, effect as O, className as k, template as _, delegateEvents as A } from "solid-js/web";
-import '../../../assets/styles/less/components/accordion/accordion.entry.css';/* empty css                                                             */
-import { mergeProps as x, splitProps as B, Show as l } from "solid-js";
-import v from "clsx";
-import { AnimateHeight as D } from "../../base/animateHeight/animateHeight.js";
-import { createControllableState as P } from "../../../primitives/createControllableState.js";
-import { createId as S } from "../../../primitives/createId.js";
-import { mergeRefs as T } from "../../../primitives/mergeRefs.js";
-import { Icon as z } from "../../base/icon/icon.js";
-var E = /* @__PURE__ */ _("<div role=region>"), H = /* @__PURE__ */ _("<div data-testid=accordion><button class=smwb-accordion__header type=button><span class=smwb-accordion__title>");
-function L(w) {
-  const C = x({
-    isOpenByDefault: !1
-  }, w), [e] = B(C, ["class", "title", "isOpenByDefault", "open", "disabled", "icon", "id", "children", "startAdornment", "noIcon", "onToggleClick", "onChange", "ref"]), [o, I] = P({
+import { use as P, setAttribute as c, insert as i, createComponent as a, effect as S, className as H, template as g, delegateEvents as T } from "solid-js/web";
+import '../../../assets/styles/less/components/accordion/accordion.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { mergeProps as N, splitProps as R, children as m, createSignal as V, createComputed as j, Show as l } from "solid-js";
+import O from "clsx";
+import { AnimateHeight as q } from "../../base/animateHeight/animateHeight.js";
+import { createControllableState as F } from "../../../primitives/createControllableState.js";
+import { createId as G } from "../../../primitives/createId.js";
+import { mergeRefs as J } from "../../../primitives/mergeRefs.js";
+import { Icon as K } from "../../base/icon/icon.js";
+var L = /* @__PURE__ */ g("<span class=smwb-accordion__subtitle>"), M = /* @__PURE__ */ g("<span class=smwb-accordion__end>"), Q = /* @__PURE__ */ g("<div role=region>"), U = /* @__PURE__ */ g("<div data-testid=accordion><button class=smwb-accordion__header type=button><span class=smwb-accordion__heading><span class=smwb-accordion__title>");
+function W(s) {
+  const d = m(() => s.icon);
+  return a(l, {
+    get when() {
+      return d();
+    },
+    get fallback() {
+      return a(K, {
+        get class() {
+          return O("smwb-accordion__arrow-icon", {
+            "smwb-accordion__arrow-icon_opened": s.open
+          });
+        },
+        name: "expand_more",
+        size: 24
+      });
+    },
+    get children() {
+      return d();
+    }
+  });
+}
+function ce(s) {
+  const d = N({
+    isOpenByDefault: !1,
+    variant: "filled"
+  }, s), [e] = R(d, ["class", "title", "subtitle", "variant", "isOpenByDefault", "open", "disabled", "icon", "id", "children", "startAdornment", "endAdornment", "noIcon", "lazy", "unmountOnExit", "onToggleClick", "onChange", "ref"]), [r, x] = F({
     value: () => e.open,
     defaultValue: e.isOpenByDefault,
-    onChange: (r) => e.onChange?.(r)
-  }), d = S(e.id), s = `${d}-content`, m = `${d}-header`, y = (r) => {
-    e.disabled || (I(!o()), e.onToggleClick?.(r));
+    onChange: (t) => e.onChange?.(t)
+  }), h = G(e.id), p = `${h}-content`, b = `${h}-header`, E = m(() => e.title), _ = m(() => e.subtitle), u = !!(e.lazy || e.unmountOnExit) ? void 0 : m(() => e.children), v = () => u ? !!u() : "children" in e, [k, w] = V(r());
+  j(() => {
+    r() && w(!0);
+  });
+  const B = (t) => {
+    t === 0 && e.unmountOnExit && !r() && w(!1);
+  }, z = (t) => {
+    e.disabled || (x(!r()), e.onToggleClick?.(t));
   };
   return (() => {
-    var r = H(), n = r.firstChild, u = n.firstChild, f = T(e.ref);
-    return typeof f == "function" && $(f, r), n.$$click = y, i(n, "id", m), a(n, () => e.startAdornment?.(o()), u), a(u, () => e.title), a(n, c(l, {
+    var t = U(), o = t.firstChild, f = o.firstChild, D = f.firstChild, C = J(e.ref);
+    return typeof C == "function" && P(C, t), o.$$click = z, c(o, "id", b), i(o, () => e.startAdornment?.(r()), f), i(D, E), i(f, a(l, {
+      get when() {
+        return _();
+      },
+      get children() {
+        var n = L();
+        return i(n, _), n;
+      }
+    }), null), i(o, a(l, {
+      get when() {
+        return e.endAdornment;
+      },
+      get children() {
+        var n = M();
+        return i(n, () => e.endAdornment?.(r())), n;
+      }
+    }), null), i(o, a(l, {
       get when() {
         return !e.noIcon;
       },
       get children() {
-        return c(l, {
-          get when() {
+        return a(W, {
+          get icon() {
             return e.icon;
           },
-          get fallback() {
-            return c(z, {
-              get class() {
-                return v("smwb-accordion__arrow-icon", {
-                  "smwb-accordion__arrow-icon_opened": o()
-                });
-              },
-              name: "expand_more",
-              size: 24
-            });
-          },
-          get children() {
-            return e.icon;
+          get open() {
+            return r();
           }
         });
       }
-    }), null), a(r, c(l, {
+    }), null), i(t, a(l, {
       get when() {
-        return e.children;
+        return v();
       },
       get children() {
-        var t = E();
-        return i(t, "id", s), i(t, "aria-labelledby", m), a(t, c(D, {
+        var n = Q();
+        return c(n, "id", p), c(n, "aria-labelledby", b), i(n, a(q, {
           get height() {
-            return o() ? "auto" : 0;
+            return r() ? "auto" : 0;
           },
           animateOpacity: !0,
           duration: 300,
           class: "smwb-accordion__content",
+          onHeightAnimationEnd: B,
           get children() {
-            return e.children;
+            return u ? u() : a(l, {
+              get when() {
+                return k();
+              },
+              get children() {
+                return e.children;
+              }
+            });
           }
-        })), t;
+        })), n;
       }
-    }), null), O((t) => {
-      var g = v("smwb-accordion", {
+    }), null), S((n) => {
+      var $ = O("smwb-accordion", `smwb-accordion_${e.variant}`, {
         "smwb-disabled": e.disabled
-      }, e.class), h = e.disabled, p = o(), b = e.children ? s : void 0;
-      return g !== t.e && k(r, t.e = g), h !== t.t && (n.disabled = t.t = h), p !== t.a && i(n, "aria-expanded", t.a = p), b !== t.o && i(n, "aria-controls", t.o = b), t;
+      }, e.class), y = e.disabled, A = r(), I = v() ? p : void 0;
+      return $ !== n.e && H(t, n.e = $), y !== n.t && (o.disabled = n.t = y), A !== n.a && c(o, "aria-expanded", n.a = A), I !== n.o && c(o, "aria-controls", n.o = I), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), r;
+    }), t;
   })();
 }
-A(["click"]);
+T(["click"]);
 export {
-  L as Accordion
+  ce as Accordion
 };
 //# sourceMappingURL=accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","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"],"names":["Accordion","props","merged","mergeProps","isOpenByDefault","local","splitProps","isOpen","setIsOpen","createControllableState","value","open","defaultValue","onChange","next","baseId","createId","id","contentId","headerId","toggle","event","disabled","onToggleClick","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","$$click","_$setAttribute","_$insert","startAdornment","title","_$createComponent","Show","when","noIcon","children","icon","fallback","Icon","cn","name","size","_el$4","_tmpl$","AnimateHeight","height","animateOpacity","duration","_$effect","_p$","_v$","class","_v$2","_v$3","_v$4","undefined","e","_$className","t","a","o","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"accordion.js","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"],"names":["ExpandIcon","props","icon","children","_$createComponent","Show","when","fallback","Icon","cn","open","name","size","Accordion","merged","mergeProps","isOpenByDefault","variant","local","splitProps","isOpen","setIsOpen","createControllableState","value","defaultValue","onChange","next","baseId","createId","id","contentId","headerId","title","subtitle","content","Boolean","lazy","unmountOnExit","undefined","hasContent","present","setPresent","createSignal","createComputed","onCollapsed","height","toggle","event","disabled","onToggleClick","_el$","_tmpl$4","_el$2","firstChild","_el$3","_el$4","_ref$","mergeRefs","ref","_$use","$$click","_$setAttribute","_$insert","startAdornment","_el$5","_tmpl$","endAdornment","_el$6","_tmpl$2","noIcon","_el$7","_tmpl$3","AnimateHeight","animateOpacity","duration","onHeightAnimationEnd","_$effect","_p$","_v$","class","_v$2","_v$3","_v$4","e","_$className","t","a","o","_$delegateEvents"],"mappings":"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"}

package/dist/components/dataDisplay/assetGrid/assetGrid.js

@@ -1,10 +1,11 @@
-import { addEventListener as P, use as E, insert as g, createComponent as o, effect as m, style as h, setStyleProperty as w, className as O, template as c } from "solid-js/web";
-import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';/* empty css                                                             */
-import { mergeProps as W, splitProps as Y, createSignal as f, onMount as F, createMemo as _, Show as p, For as v, onCleanup as G } from "solid-js";
+import { addEventListener as P, use as E, insert as g, createComponent as o, effect as m, style as p, setStyleProperty as w, className as O, template as c } from "solid-js/web";
+import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { mergeProps as W, splitProps as Y, createSignal as f, onMount as F, createMemo as _, Show as h, For as v, onCleanup as G } from "solid-js";
 import N from "clsx";
 import { createVirtualList as V } from "../../../primitives/createVirtualList.js";
 var j = /* @__PURE__ */ c("<div class=smwb-asset-grid__sizer style=position:relative><div class=smwb-asset-grid__band style=position:absolute;top:0;left:0;right:0>"), q = /* @__PURE__ */ c("<div>"), b = /* @__PURE__ */ c("<div class=smwb-asset-grid__plain>"), B = /* @__PURE__ */ c("<div class=smwb-asset-grid__skeleton>"), D = /* @__PURE__ */ c("<div class=smwb-asset-grid__empty>"), J = /* @__PURE__ */ c("<div class=smwb-asset-grid__row>");
-function ee(y) {
+function te(y) {
   const x = W({
     minColumn: 160,
     gap: 8,
@@ -46,7 +47,7 @@ function ee(y) {
   });
   return (() => {
     var r = q();
-    return P(r, "scroll", d.onScroll), E((e) => l = e, r), g(r, o(p, {
+    return P(r, "scroll", d.onScroll), E((e) => l = e, r), g(r, o(h, {
       get when() {
         return !t.loading;
       },
@@ -63,11 +64,11 @@ function ee(y) {
               var n = B();
               return m((i) => w(n, "height", `${t.rowHeight}px`)), n;
             })()
-          })), m((n) => h(e, $(), n)), e;
+          })), m((n) => p(e, $(), n)), e;
         })();
       },
       get children() {
-        return o(p, {
+        return o(h, {
           get when() {
             return t.items.length > 0;
           },
@@ -78,7 +79,7 @@ function ee(y) {
             })();
           },
           get children() {
-            return o(p, {
+            return o(h, {
               get when() {
                 return M();
               },
@@ -90,7 +91,7 @@ function ee(y) {
                       return t.items;
                     },
                     children: (n, i) => t.renderItem(n, i())
-                  })), m((n) => h(e, $(), n)), e;
+                  })), m((n) => p(e, $(), n)), e;
                 })();
               },
               get children() {
@@ -107,7 +108,7 @@ function ee(y) {
                           length: u()
                         }, (s, A) => i * u() + A);
                       },
-                      children: (s) => o(p, {
+                      children: (s) => o(h, {
                         get when() {
                           return s < t.items.length;
                         },
@@ -115,7 +116,7 @@ function ee(y) {
                           return t.renderItem(t.items[s], s);
                         }
                       })
-                    })), m((s) => h(a, z(), s)), a;
+                    })), m((s) => p(a, z(), s)), a;
                   })()
                 })), m((i) => {
                   var a = `${d.totalHeight()}px`, s = `translateY(${d.offsetY()}px)`;
@@ -131,7 +132,7 @@ function ee(y) {
       }
     })), m((e) => {
       var n = N("smwb-asset-grid", t.class), i = t.style;
-      return n !== e.e && O(r, e.e = n), e.t = h(r, i, e.t), e;
+      return n !== e.e && O(r, e.e = n), e.t = p(r, i, e.t), e;
     }, {
       e: void 0,
       t: void 0
@@ -139,6 +140,6 @@ function ee(y) {
   })();
 }
 export {
-  ee as AssetGrid
+  te as AssetGrid
 };
 //# sourceMappingURL=assetGrid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => JSX.Element;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: JSX.Element;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `createVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element {\n  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);\n  const [local] = splitProps(merged, [\n    \"items\",\n    \"renderItem\",\n    \"minColumn\",\n    \"rowHeight\",\n    \"gap\",\n    \"overscan\",\n    \"loading\",\n    \"loadingCount\",\n    \"emptyLabel\",\n    \"class\",\n    \"style\",\n  ]);\n\n  let viewportEl: HTMLDivElement | undefined;\n  const [width, setWidth] = createSignal(0);\n  const [height, setHeight] = createSignal(0);\n  const [ready, setReady] = createSignal(false);\n\n  onMount(() => {\n    if (!viewportEl || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      if (!viewportEl) return;\n      setWidth(viewportEl.clientWidth);\n      setHeight(viewportEl.clientHeight);\n      setReady(true);\n    });\n    ro.observe(viewportEl);\n    onCleanup(() => ro.disconnect());\n  });\n\n  const cols = createMemo(() => {\n    const w = width();\n    if (w <= 0) return 1;\n    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));\n  });\n  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));\n  const rowStride = (): number => local.rowHeight + local.gap;\n\n  const vl = createVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowStride,\n    viewportHeight: () => height() || 1,\n    overscan: local.overscan,\n  });\n\n  const visibleRows = createMemo(() => {\n    const out: number[] = [];\n    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);\n    return out;\n  });\n\n  const rowStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(${cols()}, minmax(0, 1fr))`,\n    gap: `${local.gap}px`,\n    height: `${local.rowHeight}px`,\n    \"margin-bottom\": `${local.gap}px`,\n  });\n\n  const plainStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,\n    gap: `${local.gap}px`,\n    \"grid-auto-rows\": `${local.rowHeight}px`,\n  });\n\n  return (\n    <div\n      ref={(el) => (viewportEl = el)}\n      class={cn(\"smwb-asset-grid\", local.class)}\n      style={local.style}\n      onScroll={vl.onScroll}\n    >\n      <Show\n        when={!local.loading}\n        fallback={\n          <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n            <For each={Array.from({ length: local.loadingCount })}>\n              {() => <div class=\"smwb-asset-grid__skeleton\" style={{ height: `${local.rowHeight}px` }} />}\n            </For>\n          </div>\n        }\n      >\n        <Show\n          when={local.items.length > 0}\n          fallback={<div class=\"smwb-asset-grid__empty\">{local.emptyLabel}</div>}\n        >\n          <Show\n            when={ready()}\n            fallback={\n              <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>\n              </div>\n            }\n          >\n            <div class=\"smwb-asset-grid__sizer\" style={{ height: `${vl.totalHeight()}px`, position: \"relative\" }}>\n              <div\n                class=\"smwb-asset-grid__band\"\n                style={{ position: \"absolute\", top: \"0\", left: \"0\", right: \"0\", transform: `translateY(${vl.offsetY()}px)` }}\n              >\n                <For each={visibleRows()}>\n                  {(row) => (\n                    <div class=\"smwb-asset-grid__row\" style={rowStyle()}>\n                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>\n                        {(index) => (\n                          <Show when={index < local.items.length}>\n                            {local.renderItem(local.items[index] as T, index)}\n                          </Show>\n                        )}\n                      </For>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","props","merged","mergeProps","minColumn","gap","overscan","loadingCount","local","splitProps","viewportEl","width","setWidth","createSignal","height","setHeight","ready","setReady","onMount","ResizeObserver","ro","clientWidth","clientHeight","observe","onCleanup","disconnect","cols","createMemo","w","Math","max","floor","rowCount","ceil","items","length","vl","createVirtualList","itemCount","itemHeight","rowStride","rowHeight","viewportHeight","visibleRows","out","row","startIndex","endIndex","push","rowStyle","display","plainStyle","_el$","_tmpl$2","_$addEventListener","onScroll","_$use","el","_$insert","_$createComponent","Show","when","loading","fallback","_el$4","_tmpl$3","For","each","Array","from","children","_el$5","_tmpl$4","_$effect","_$p","_$setStyleProperty","_$style","_el$6","_tmpl$5","emptyLabel","_el$7","item","index","renderItem","_el$2","_tmpl$","_el$3","firstChild","_el$8","_tmpl$6","_","c","_p$","_v$","totalHeight","_v$2","offsetY","e","t","undefined","_v$3","cn","class","_v$4","style","_$className"],"mappings":"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"}
+{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => JSX.Element;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: JSX.Element;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `createVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element {\n  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);\n  const [local] = splitProps(merged, [\n    \"items\",\n    \"renderItem\",\n    \"minColumn\",\n    \"rowHeight\",\n    \"gap\",\n    \"overscan\",\n    \"loading\",\n    \"loadingCount\",\n    \"emptyLabel\",\n    \"class\",\n    \"style\",\n  ]);\n\n  let viewportEl: HTMLDivElement | undefined;\n  const [width, setWidth] = createSignal(0);\n  const [height, setHeight] = createSignal(0);\n  const [ready, setReady] = createSignal(false);\n\n  onMount(() => {\n    if (!viewportEl || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      if (!viewportEl) return;\n      setWidth(viewportEl.clientWidth);\n      setHeight(viewportEl.clientHeight);\n      setReady(true);\n    });\n    ro.observe(viewportEl);\n    onCleanup(() => ro.disconnect());\n  });\n\n  const cols = createMemo(() => {\n    const w = width();\n    if (w <= 0) return 1;\n    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));\n  });\n  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));\n  const rowStride = (): number => local.rowHeight + local.gap;\n\n  const vl = createVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowStride,\n    viewportHeight: () => height() || 1,\n    overscan: local.overscan,\n  });\n\n  const visibleRows = createMemo(() => {\n    const out: number[] = [];\n    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);\n    return out;\n  });\n\n  const rowStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(${cols()}, minmax(0, 1fr))`,\n    gap: `${local.gap}px`,\n    height: `${local.rowHeight}px`,\n    \"margin-bottom\": `${local.gap}px`,\n  });\n\n  const plainStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,\n    gap: `${local.gap}px`,\n    \"grid-auto-rows\": `${local.rowHeight}px`,\n  });\n\n  return (\n    <div\n      ref={(el) => (viewportEl = el)}\n      class={cn(\"smwb-asset-grid\", local.class)}\n      style={local.style}\n      onScroll={vl.onScroll}\n    >\n      <Show\n        when={!local.loading}\n        fallback={\n          <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n            <For each={Array.from({ length: local.loadingCount })}>\n              {() => <div class=\"smwb-asset-grid__skeleton\" style={{ height: `${local.rowHeight}px` }} />}\n            </For>\n          </div>\n        }\n      >\n        <Show\n          when={local.items.length > 0}\n          fallback={<div class=\"smwb-asset-grid__empty\">{local.emptyLabel}</div>}\n        >\n          <Show\n            when={ready()}\n            fallback={\n              <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>\n              </div>\n            }\n          >\n            <div class=\"smwb-asset-grid__sizer\" style={{ height: `${vl.totalHeight()}px`, position: \"relative\" }}>\n              <div\n                class=\"smwb-asset-grid__band\"\n                style={{ position: \"absolute\", top: \"0\", left: \"0\", right: \"0\", transform: `translateY(${vl.offsetY()}px)` }}\n              >\n                <For each={visibleRows()}>\n                  {(row) => (\n                    <div class=\"smwb-asset-grid__row\" style={rowStyle()}>\n                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>\n                        {(index) => (\n                          <Show when={index < local.items.length}>\n                            {local.renderItem(local.items[index] as T, index)}\n                          </Show>\n                        )}\n                      </For>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","props","merged","mergeProps","minColumn","gap","overscan","loadingCount","local","splitProps","viewportEl","width","setWidth","createSignal","height","setHeight","ready","setReady","onMount","ResizeObserver","ro","clientWidth","clientHeight","observe","onCleanup","disconnect","cols","createMemo","w","Math","max","floor","rowCount","ceil","items","length","vl","createVirtualList","itemCount","itemHeight","rowStride","rowHeight","viewportHeight","visibleRows","out","row","startIndex","endIndex","push","rowStyle","display","plainStyle","_el$","_tmpl$2","_$addEventListener","onScroll","_$use","el","_$insert","_$createComponent","Show","when","loading","fallback","_el$4","_tmpl$3","For","each","Array","from","children","_el$5","_tmpl$4","_$effect","_$p","_$setStyleProperty","_$style","_el$6","_tmpl$5","emptyLabel","_el$7","item","index","renderItem","_el$2","_tmpl$","_el$3","firstChild","_el$8","_tmpl$6","_","c","_p$","_v$","totalHeight","_v$2","offsetY","e","t","undefined","_v$3","cn","class","_v$4","style","_$className"],"mappings":";;;;;;;AAkCO,SAASA,GAAaC,GAAuC;AAClE,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,IAAKC,KAAK;AAAA,IAAGC,UAAU;AAAA,IAAGC,cAAc;AAAA,EAAA,GAAMN,CAAK,GACpF,CAACO,CAAK,IAAIC,EAAWP,GAAQ,CACjC,SACA,cACA,aACA,aACA,OACA,YACA,WACA,gBACA,cACA,SACA,OAAO,CACR;AAED,MAAIQ;AACJ,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAa,CAAC,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAa,CAAC,GACpC,CAACG,GAAOC,CAAQ,IAAIJ,EAAa,EAAK;AAE5CK,EAAAA,EAAQ,MAAM;AACZ,QAAI,CAACR,KAAc,OAAOS,iBAAmB,IAAa;AAC1D,UAAMC,IAAK,IAAID,eAAe,MAAM;AAClC,MAAKT,MACLE,EAASF,EAAWW,WAAW,GAC/BN,EAAUL,EAAWY,YAAY,GACjCL,EAAS,EAAI;AAAA,IACf,CAAC;AACDG,IAAAA,EAAGG,QAAQb,CAAU,GACrBc,EAAU,MAAMJ,EAAGK,YAAY;AAAA,EACjC,CAAC;AAED,QAAMC,IAAOC,EAAW,MAAM;AAC5B,UAAMC,IAAIjB,EAAAA;AACV,WAAIiB,KAAK,IAAU,IACZC,KAAKC,IAAI,GAAGD,KAAKE,OAAOH,IAAIpB,EAAMH,QAAQG,EAAMJ,YAAYI,EAAMH,IAAI,CAAC;AAAA,EAChF,CAAC,GACK2B,IAAWL,EAAW,MAAME,KAAKI,KAAKzB,EAAM0B,MAAMC,SAAST,EAAAA,CAAM,CAAC,GAGlEU,IAAKC,EAAkB;AAAA,IAC3BC,WAAWN;AAAAA,IACXO,YAJgBC,MAAchC,EAAMiC,YAAYjC,EAAMH;AAAAA,IAKtDqC,gBAAgBA,MAAM5B,EAAAA,KAAY;AAAA,IAClCR,UAAUE,EAAMF;AAAAA,EAAAA,CACjB,GAEKqC,IAAchB,EAAW,MAAM;AACnC,UAAMiB,IAAgB,CAAA;AACtB,aAASC,IAAMT,EAAGU,WAAAA,GAAcD,IAAMT,EAAGW,SAAAA,GAAYF,IAAOD,CAAAA,EAAII,KAAKH,CAAG;AACxE,WAAOD;AAAAA,EACT,CAAC,GAEKK,IAAWA,OAA0B;AAAA,IACzCC,SAAS;AAAA,IACT,yBAAyB,UAAUxB,EAAAA,CAAM;AAAA,IACzCrB,KAAK,GAAGG,EAAMH,GAAG;AAAA,IACjBS,QAAQ,GAAGN,EAAMiC,SAAS;AAAA,IAC1B,iBAAiB,GAAGjC,EAAMH,GAAG;AAAA,EAAA,IAGzB8C,IAAaA,OAA0B;AAAA,IAC3CD,SAAS;AAAA,IACT,yBAAyB,4BAA4B1C,EAAMJ,SAAS;AAAA,IACpEC,KAAK,GAAGG,EAAMH,GAAG;AAAA,IACjB,kBAAkB,GAAGG,EAAMiC,SAAS;AAAA,EAAA;AAGtC,UAAA,MAAA;AAAA,QAAAW,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAA,UAKchB,EAAGmB,QAAQ,GAAAC,EAHfC,CAAAA,MAAQ/C,IAAa+C,GAAGL,CAAA,GAAAM,EAAAN,GAAAO,EAK7BC,GAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eAAE,CAACrD,EAAMsD;AAAAA,MAAO;AAAA,MAAA,IACpBC,WAAQ;AAAA,gBAAA,MAAA;AAAA,cAAAC,IAAAC,EAAAA;AAAAP,iBAAAA,EAAAM,GAAAL,EAEHO,GAAG;AAAA,YAAA,IAACC,OAAI;AAAA,qBAAEC,MAAMC,KAAK;AAAA,gBAAElC,QAAQ3B,EAAMD;AAAAA,cAAAA,CAAc;AAAA,YAAC;AAAA,YAAA+D,UAClDA,OAAA,MAAA;AAAA,kBAAAC,IAAAC,EAAAA;AAAAC,qBAAAA,EAAAC,CAAAA,MAAAC,EAAAJ,GAAA,UAA8D,GAAG/D,EAAMiC,SAAS,IAAI,CAAA,GAAA8B;AAAAA,YAAA,GAAA;AAAA,UAAA,CAAM,CAAA,GAAAE,EAAAC,OAAAE,EAAAZ,GAFpDb,EAAAA,GAAYuB,CAAA,CAAA,GAAAV;AAAAA,QAAA,GAAA;AAAA,MAAA;AAAA,MAAA,IAAAM,WAAA;AAAA,eAAAX,EAOxDC,GAAI;AAAA,UAAA,IACHC,OAAI;AAAA,mBAAErD,EAAM0B,MAAMC,SAAS;AAAA,UAAC;AAAA,UAAA,IAC5B4B,WAAQ;AAAA,oBAAA,MAAA;AAAA,kBAAAc,IAAAC,EAAAA;AAAApB,qBAAAA,EAAAmB,GAAA,MAAuCrE,EAAMuE,UAAU,GAAAF;AAAAA,YAAA,GAAA;AAAA,UAAA;AAAA,UAAA,IAAAP,WAAA;AAAA,mBAAAX,EAE9DC,GAAI;AAAA,cAAA,IACHC,OAAI;AAAA,uBAAE7C,EAAAA;AAAAA,cAAO;AAAA,cAAA,IACb+C,WAAQ;AAAA,wBAAA,MAAA;AAAA,sBAAAiB,IAAAf,EAAAA;AAAAP,yBAAAA,EAAAsB,GAAArB,EAEHO,GAAG;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE3D,EAAM0B;AAAAA,oBAAK;AAAA,oBAAAoC,UAAGA,CAACW,GAAMC,MAAU1E,EAAM2E,WAAWF,GAAMC,GAAO;AAAA,kBAAA,CAAC,CAAA,GAAAT,EAAAC,OAAAE,EAAAI,GADhC7B,EAAAA,GAAYuB,CAAA,CAAA,GAAAM;AAAAA,gBAAA,GAAA;AAAA,cAAA;AAAA,cAAA,IAAAV,WAAA;AAAA,oBAAAc,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAA7B,uBAAAA,EAAA4B,GAAA3B,EAUpDO,GAAG;AAAA,kBAAA,IAACC,OAAI;AAAA,2BAAExB,EAAAA;AAAAA,kBAAa;AAAA,kBAAA2B,UACpBzB,QAAG,MAAA;AAAA,wBAAA2C,IAAAC,EAAAA;AAAA/B,2BAAAA,EAAA8B,GAAA7B,EAEAO,GAAG;AAAA,sBAAA,IAACC,OAAI;AAAA,+BAAEC,MAAMC,KAAK;AAAA,0BAAElC,QAAQT,EAAAA;AAAAA,wBAAK,GAAK,CAACgE,GAAGC,MAAM9C,IAAMnB,EAAAA,IAASiE,CAAC;AAAA,sBAAC;AAAA,sBAAArB,UACjEY,CAAAA,MAAKvB,EACJC,GAAI;AAAA,wBAAA,IAACC,OAAI;AAAA,iCAAEqB,IAAQ1E,EAAM0B,MAAMC;AAAAA,wBAAM;AAAA,wBAAA,IAAAmC,WAAA;AAAA,iCACnC9D,EAAM2E,WAAW3E,EAAM0B,MAAMgD,CAAK,GAAQA,CAAK;AAAA,wBAAC;AAAA,sBAAA,CAAA;AAAA,oBAAA,CAEpD,CAAA,GAAAT,EAAAC,OAAAE,EAAAY,GANoCvC,EAAAA,GAAUyB,CAAA,CAAA,GAAAc;AAAAA,kBAAA,GAAA;AAAA,gBAAA,CASpD,CAAA,GAAAf,EAAAmB,CAAAA,MAAA;AAAA,sBAAAC,IAhB8C,GAAGzD,EAAG0D,YAAAA,CAAa,MAAIC,IAGG,cAAc3D,EAAG4D,QAAAA,CAAS;AAAKH,yBAAAA,MAAAD,EAAAK,KAAAtB,EAAAS,GAAA,UAAAQ,EAAAK,IAAAJ,CAAA,GAAAE,MAAAH,EAAAM,KAAAvB,EAAAW,GAAA,aAAAM,EAAAM,IAAAH,CAAA,GAAAH;AAAAA,gBAAA,GAAA;AAAA,kBAAAK,GAAAE;AAAAA,kBAAAD,GAAAC;AAAAA,gBAAAA,CAAA,GAAAf;AAAAA,cAAA;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAX,EAAAmB,CAAAA,MAAA;AAAA,UAAAQ,IA7B7GC,EAAG,mBAAmB7F,EAAM8F,KAAK,GAACC,IAClC/F,EAAMgG;AAAKJ,aAAAA,MAAAR,EAAAK,KAAAQ,EAAArD,GAAAwC,EAAAK,IAAAG,CAAA,GAAAR,EAAAM,IAAAtB,EAAAxB,GAAAmD,GAAAX,EAAAM,CAAA,GAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA,GAAA/C;AAAAA,EAAA,GAAA;AAkDxB;"}

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

@@ -22,6 +22,10 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
     total?: number;
     /** Click handler for the "+N" surplus chip. */
     onSurplusClick?: () => void;
+    /** Accessible name of the "+N" surplus chip. */
+    surplusAriaLabel?: (count: number) => string;
+    /** Size of the "+N" surplus chip: match the avatars in the group. */
+    size?: AvatarSize | number;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element;

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

@@ -1,54 +1,55 @@
-import { use as $, spread as g, mergeProps as f, insert as i, createComponent as d, effect as z, setAttribute as k, template as h } from "solid-js/web";
-import '../../../assets/styles/less/components/avatar/avatar.entry.css';/* empty css                                                       */
-import { mergeProps as b, splitProps as w, createSignal as S, Show as y, children as C } from "solid-js";
-import v from "clsx";
-import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
-import { callHandler as A } from "../../../primitives/callHandler.js";
-var E = /* @__PURE__ */ h("<img>"), P = /* @__PURE__ */ h("<div>"), F = /* @__PURE__ */ h("<span class=smwb-avatar__fallback role=img>");
-const _ = (a) => typeof a == "string";
-function I(a) {
-  const c = b({
+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 '../../../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 _ 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>");
+const w = (l) => typeof l == "string";
+function j(l) {
+  const p = z({
     size: "medium",
     variant: "circular"
-  }, a), [r, u] = w(c, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref"]), [m, l] = S(!1), o = () => !!r.src && !m(), p = () => {
+  }, l), [r, g] = x(p, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref"]), [d, n] = C(!1), i = () => !!r.src && !d(), c = () => {
     const e = r.size;
     return {
       ...typeof r.style == "object" && r.style ? r.style : {},
-      ..._(e) ? {} : {
+      ...w(e) ? {} : {
         width: `${e}px`,
         height: `${e}px`,
         "font-size": `${e / 2.5}px`
       },
-      ...r.color && !o() ? {
+      ...r.color && !i() ? {
         "background-color": r.color
       } : {}
     };
   };
   return (() => {
-    var e = P(), s = x(r.ref);
-    return typeof s == "function" && $(s, e), g(e, f(u, {
+    var e = k(), o = P(r.ref);
+    return typeof o == "function" && y(o, e), f(e, v(g, {
       "data-testid": "avatar",
       get class() {
-        return v("smwb-avatar", `smwb-avatar_${r.variant}`, _(r.size) ? `smwb-avatar_${r.size}` : void 0, r.class);
+        return _("smwb-avatar", `smwb-avatar_${r.variant}`, w(r.size) ? `smwb-avatar_${r.size}` : void 0, r.class);
       },
       get style() {
-        return p();
+        return c();
       }
-    }), !1, !0), i(e, d(y, {
+    }), !1, !0), a(e, u(h, {
       get when() {
-        return o();
+        return i();
       },
       get fallback() {
         return (() => {
-          var t = F();
-          return i(t, () => r.children), z(() => k(t, "aria-label", r.alt)), t;
+          var t = I();
+          return a(t, () => r.children), A(() => S(t, "aria-label", r.alt)), t;
         })();
       },
       get children() {
-        var t = E();
-        return g(t, f(() => r.imgProps ?? {}, {
+        var t = F();
+        return f(t, v(() => r.imgProps ?? {}, {
           get class() {
-            return v("smwb-avatar__img", r.imgProps?.class);
+            return _("smwb-avatar__img", r.imgProps?.class);
           },
           get src() {
             return r.src;
@@ -56,32 +57,39 @@ function I(a) {
           get alt() {
             return r.alt;
           },
-          onError: (n) => {
-            l(!0), A(r.imgProps?.onError, n);
+          onError: (s) => {
+            n(!0), E(r.imgProps?.onError, s);
           }
         }), !1, !1), t;
       }
     })), e;
   })();
 }
-function q(a) {
-  const c = b({
-    max: 5
-  }, a), [r, u] = w(c, ["class", "max", "total", "onSurplusClick", "children", "ref"]), m = C(() => r.children), l = () => m.toArray(), o = () => r.total ?? l().length, p = () => Math.max(r.max, 1), e = () => l().slice(0, p()), s = () => o() - e().length;
+function K(l) {
+  const p = z({
+    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;
   return (() => {
-    var t = P(), n = x(r.ref);
-    return typeof n == "function" && $(n, t), g(t, f(u, {
+    var s = k(), $ = P(r.ref);
+    return typeof $ == "function" && y($, s), f(s, v(g, {
       "data-testid": "avatar-group",
       get class() {
-        return v("smwb-avatar-group", r.class);
+        return _("smwb-avatar-group", r.class);
       }
-    }), !1, !0), i(t, d(y, {
+    }), !1, !0), a(s, () => e(), null), a(s, u(h, {
       get when() {
-        return s() > 0;
+        return t() > 0;
       },
       get children() {
-        return d(I, {
+        return u(j, {
           class: "smwb-avatar-group__surplus",
+          get size() {
+            return r.size ?? "medium";
+          },
+          get alt() {
+            return r.surplusAriaLabel(t());
+          },
           get onClick() {
             return r.onSurplusClick;
           },
@@ -91,15 +99,23 @@ function q(a) {
             } : void 0;
           },
           get children() {
-            return `+${s()}`;
+            return `+${t()}`;
           }
         });
       }
-    }), null), i(t, () => e(), null), t;
+    }), null), a(s, u(h, {
+      get when() {
+        return o().length > 0;
+      },
+      get children() {
+        var b = M();
+        return a(b, () => o()), b;
+      }
+    }), null), s;
   })();
 }
 export {
-  I as Avatar,
-  q as AvatarGroup
+  j as Avatar,
+  K as AvatarGroup
 };
 //# sourceMappingURL=avatar.js.map