@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/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/source/components/base/icon/icon.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/icon/icon.entry.less";
 import { mergeProps, splitProps, useContext } from "solid-js";
 import cn from "clsx";

package/dist/source/components/base/icon/icon.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/icon/icon.entry.less\";\n/* eslint-disable solid/no-innerhtml -- icon bodies are static SVG geometry\n   generated from icons/data into src/icons/svg; nothing user-supplied reaches\n   this attribute, and an <svg> assembled from JSX children cannot be handed to\n   a consumer as plain data. */\nimport { type JSX, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { createIconVersion, IconContext } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-solid/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-solid/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"source\",\n    \"ref\",\n  ]);\n\n  const context = useContext(IconContext);\n  // Re-reads the registry when icons are registered late (lazy chunks, HMR).\n  const version = createIconVersion();\n\n  const source = (): IconSource => {\n    version();\n    return local.source ?? context?.source ?? getIconConfig().source;\n  };\n  const definition = (): IconDefinition | undefined => {\n    version();\n    return typeof local.name === \"object\" ? local.name : getIcon(local.name);\n  };\n  const glyph = (): string => (typeof local.name === \"string\" ? local.name : local.name.name);\n\n  const mode = (): \"google\" | \"smwb\" | \"missing\" => {\n    const resolved = source();\n    if (resolved === \"google\") return \"google\";\n    if (definition()) return \"smwb\";\n    if (resolved === \"smwb\") {\n      warnMissing(glyph());\n      return \"missing\";\n    }\n    return \"google\";\n  };\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n  const cssSize = (): string => (typeof local.size === \"number\" ? `${local.size}px` : local.size);\n  const strokeWidth = (): number => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      data-icon-source={mode()}\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        ...(mode() === \"google\"\n          ? {\n              \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n            }\n          : null),\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      {mode() === \"google\" ? (\n        <span class=\"material-symbols-outlined\" style={{ \"font-size\": cssSize() }}>\n          {glyph()}\n        </span>\n      ) : (\n        <svg\n          class=\"smwb-icon__svg\"\n          viewBox={definition()?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize(), height: cssSize() }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width={strokeWidth()}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          innerHTML={definition()?.body ?? \"\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default Icon;\n"],"mappings":"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","names":[],"file":"icon.jsx"}
+{"version":3,"sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/icon/icon.entry.less\";\n/* eslint-disable solid/no-innerhtml -- icon bodies are static SVG geometry\n   generated from icons/data into src/icons/svg; nothing user-supplied reaches\n   this attribute, and an <svg> assembled from JSX children cannot be handed to\n   a consumer as plain data. */\nimport { type JSX, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { createIconVersion, IconContext } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-solid/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-solid/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"source\",\n    \"ref\",\n  ]);\n\n  const context = useContext(IconContext);\n  // Re-reads the registry when icons are registered late (lazy chunks, HMR).\n  const version = createIconVersion();\n\n  const source = (): IconSource => {\n    version();\n    return local.source ?? context?.source ?? getIconConfig().source;\n  };\n  const definition = (): IconDefinition | undefined => {\n    version();\n    return typeof local.name === \"object\" ? local.name : getIcon(local.name);\n  };\n  const glyph = (): string => (typeof local.name === \"string\" ? local.name : local.name.name);\n\n  const mode = (): \"google\" | \"smwb\" | \"missing\" => {\n    const resolved = source();\n    if (resolved === \"google\") return \"google\";\n    if (definition()) return \"smwb\";\n    if (resolved === \"smwb\") {\n      warnMissing(glyph());\n      return \"missing\";\n    }\n    return \"google\";\n  };\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n  const cssSize = (): string => (typeof local.size === \"number\" ? `${local.size}px` : local.size);\n  const strokeWidth = (): number => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      data-icon-source={mode()}\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        ...(mode() === \"google\"\n          ? {\n              \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n            }\n          : null),\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      {mode() === \"google\" ? (\n        <span class=\"material-symbols-outlined\" style={{ \"font-size\": cssSize() }}>\n          {glyph()}\n        </span>\n      ) : (\n        <svg\n          class=\"smwb-icon__svg\"\n          viewBox={definition()?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize(), height: cssSize() }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width={strokeWidth()}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          innerHTML={definition()?.body ?? \"\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default Icon;\n"],"mappings":"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","names":[],"file":"icon.jsx"}

package/dist/source/components/base/ripple/ripple.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/ripple/ripple.entry.less";
 import { For, createSignal, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";

package/dist/source/components/base/ripple/ripple.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,SAAmB,KAAK,cAAc,YAAY,kBAAkB;AACpE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkC7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,UAAU,IAAI,GAAG,KAAK;AAClD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAC5D,MAAI,UAAU;AAEd,QAAM,WAAW,CAAC,UAA4B;AAC5C,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AACjD,UAAM,SAAS,WAAW;AAE1B,QAAI;AACJ,QAAI;AACJ,QAAI,MAAM,QAAQ;AAChB,eAAS,KAAK,QAAQ,KAAK,SAAS,IAAI,KAAK,QAAQ,IAAI;AACzD,eAAS,KAAK,SAAS,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI;AAAA,IAC5D,OAAO;AACL,eAAS,MAAM,UAAU,KAAK,OAAO;AACrC,eAAS,MAAM,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAM,MAAM;AACZ,eAAW,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,MAAM,SAAS,CAAC,CAAC;AAC7E,eAAW,MAAM,WAAW,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ;AAAA,EACtE;AAEA,QAAM,YAAY,EAAE,SAAS,CAAC;AAE9B,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,eAAe,MAAM,OAAO,MAAM,SAAS,MAAM;AAAA,IAC3D,YAAY;AAAA,IACZ,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,MAAM,QAAQ,GAAG;AAAA,SACnB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,GAAG,sBAAsB,MAAM,SAAS,KAAK;AAAA,IACpD,OAAO;AAAA,MACL,MAAM,GAAG,OAAO,CAAC;AAAA,MACjB,KAAK,GAAG,OAAO,CAAC;AAAA,MAChB,OAAO,GAAG,OAAO,IAAI;AAAA,MACrB,QAAQ,GAAG,OAAO,IAAI;AAAA,MACtB,oBAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EArBC;AAuBL;AAEA,IAAO,iBAAQ;","names":[],"file":"ripple.jsx"}
+{"version":3,"sources":["../../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,cAAc,YAAY,kBAAkB;AACpE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkC7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,UAAU,IAAI,GAAG,KAAK;AAClD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAC5D,MAAI,UAAU;AAEd,QAAM,WAAW,CAAC,UAA4B;AAC5C,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AACjD,UAAM,SAAS,WAAW;AAE1B,QAAI;AACJ,QAAI;AACJ,QAAI,MAAM,QAAQ;AAChB,eAAS,KAAK,QAAQ,KAAK,SAAS,IAAI,KAAK,QAAQ,IAAI;AACzD,eAAS,KAAK,SAAS,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI;AAAA,IAC5D,OAAO;AACL,eAAS,MAAM,UAAU,KAAK,OAAO;AACrC,eAAS,MAAM,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAM,MAAM;AACZ,eAAW,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,MAAM,SAAS,CAAC,CAAC;AAC7E,eAAW,MAAM,WAAW,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ;AAAA,EACtE;AAEA,QAAM,YAAY,EAAE,SAAS,CAAC;AAE9B,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,eAAe,MAAM,OAAO,MAAM,SAAS,MAAM;AAAA,IAC3D,YAAY;AAAA,IACZ,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,MAAM,QAAQ,GAAG;AAAA,SACnB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,GAAG,sBAAsB,MAAM,SAAS,KAAK;AAAA,IACpD,OAAO;AAAA,MACL,MAAM,GAAG,OAAO,CAAC;AAAA,MACjB,KAAK,GAAG,OAAO,CAAC;AAAA,MAChB,OAAO,GAAG,OAAO,IAAI;AAAA,MACrB,QAAQ,GAAG,OAAO,IAAI;AAAA,MACtB,oBAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EArBC;AAuBL;AAEA,IAAO,iBAAQ;","names":[],"file":"ripple.jsx"}

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

@@ -1,16 +1,39 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/accordion/accordion.entry.less";
-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",
@@ -18,7 +41,10 @@ function Accordion(props) {
     "id",
     "children",
     "startAdornment",
+    "endAdornment",
     "noIcon",
+    "lazy",
+    "unmountOnExit",
     "onToggleClick",
     "onChange",
     "ref"
@@ -31,6 +57,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());
@@ -38,7 +76,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
@@ -48,28 +86,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/source/components/dataDisplay/accordion/accordion.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/accordion/accordion.entry.less\";\nimport { 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,OAAO;AACP,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 \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/accordion/accordion.entry.less\";\nimport {\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/source/components/dataDisplay/assetGrid/assetGrid.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/assetGrid/assetGrid.entry.less";
 import { For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
 import cn from "clsx";

package/dist/source/components/dataDisplay/assetGrid/assetGrid.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/assetGrid/assetGrid.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"assetGrid.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/assetGrid/assetGrid.entry.less\";\nimport { 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"],"mappings":"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","names":[],"file":"assetGrid.jsx"}

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

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/avatar/avatar.entry.less";
 import {
   Show,
@@ -66,25 +67,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/source/components/dataDisplay/avatar/avatar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\nimport {\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 \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/avatar/avatar.entry.less\";\nimport {\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/source/components/dataDisplay/badge/badge.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/badge/badge.entry.less";
-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) {
@@ -26,9 +27,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/source/components/dataDisplay/badge/badge.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/badge/badge.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/badge/badge.entry.less\";\nimport { 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,OAAO;AACP,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 \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/badge/badge.entry.less\";\nimport { 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,OAAO;AACP,OAAO;AACP,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/source/components/dataDisplay/card/card.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/card/card.entry.less";
-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";
@@ -16,6 +17,7 @@ function Card(props) {
     "onKeyDown",
     "ref"
   ]);
+  const footer = children(() => local.footer);
   const interactive = () => !!local.onClick && !local.disabled;
   const handleKeyDown = (event) => {
     callHandler(local.onKeyDown, event);
@@ -42,8 +44,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/source/components/dataDisplay/card/card.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/card/card.entry.less\";\nimport { 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,OAAO;AACP,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 \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/card/card.entry.less\";\nimport { 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,OAAO;AACP,OAAO;AACP,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/source/components/dataDisplay/carousel/carousel.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/carousel/carousel.entry.less";
 import {
   For,