@smwb/ui-solid 0.11.1 → 0.12.0

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

@@ -0,0 +1,101 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/kanban/kanban.entry.less";
+import { Show, children, createUniqueId, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const styleObject = (style) => typeof style === "object" && style ? style : {};
+const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const present = (value) => value !== void 0 && value !== null && value !== false && value !== true && value !== "";
+function Kanban(props) {
+  const [local, rest] = splitProps(props, ["class", "style", "columnWidth", "children", "ref"]);
+  return <div
+    data-testid="kanban"
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-kanban", local.class)}
+    style={{ ...styleObject(local.style), "--smwb-kanban-column-width": cssLength(local.columnWidth) }}
+  >
+      {local.children}
+    </div>;
+}
+function KanbanColumn(props) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "style",
+    "title",
+    "count",
+    "accent",
+    "empty",
+    "footer",
+    "children",
+    "ref"
+  ]);
+  const titleId = `${createUniqueId()}-title`;
+  const cards = children(() => local.children);
+  const empty = children(() => local.empty);
+  const footer = children(() => local.footer);
+  const hasCards = () => cards.toArray().some(present);
+  return <div
+    data-testid="kanban-column"
+    role="group"
+    aria-labelledby={titleId}
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-kanban__column", local.class)}
+    style={{ ...styleObject(local.style), "--smwb-kanban-accent": local.accent }}
+  >
+      <div class="smwb-kanban__column-header">
+        <div class="smwb-kanban__column-title" id={titleId}>
+          {local.title}
+        </div>
+        <Show when={local.count !== void 0 && local.count !== null}>
+          <span class="smwb-kanban__count">{local.count}</span>
+        </Show>
+      </div>
+      <Show
+    when={hasCards()}
+    fallback={<Show when={present(empty())}>
+            <div class="smwb-kanban__empty">{empty()}</div>
+          </Show>}
+  >
+        <ul class="smwb-kanban__cards" role="list">
+          {cards()}
+        </ul>
+      </Show>
+      <Show when={present(footer())}>
+        <div class="smwb-kanban__column-footer">{footer()}</div>
+      </Show>
+    </div>;
+}
+function KanbanCard(props) {
+  const merged = mergeProps({ titleLines: 3 }, props);
+  const [local, rest] = splitProps(merged, ["class", "style", "title", "href", "titleLines", "children", "ref"]);
+  const title = children(() => local.title);
+  const body = children(() => local.children);
+  return <li
+    data-testid="kanban-card"
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-kanban__card", { "smwb-kanban__card_link": Boolean(local.href) }, local.class)}
+    style={{ ...styleObject(local.style), "--smwb-kanban-title-lines": String(local.titleLines) }}
+  >
+      <Show when={present(title())}>
+        <Show when={local.href} fallback={<div class="smwb-kanban__card-title">{title()}</div>}>
+          {(href) => <a class="smwb-kanban__card-title" href={href()}>
+              {title()}
+            </a>}
+        </Show>
+      </Show>
+      <Show when={present(body())}>
+        <div class="smwb-kanban__card-body">{body()}</div>
+      </Show>
+    </li>;
+}
+var kanban_default = Kanban;
+export {
+  Kanban,
+  KanbanCard,
+  KanbanColumn,
+  kanban_default as default
+};
+//# sourceMappingURL=kanban.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/kanban/kanban.entry.less\";\nimport { type JSX, type ParentProps, Show, children, createUniqueId, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface KanbanProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanColumnProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: JSX.Element;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: JSX.Element;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: JSX.Element;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  ref?: Ref<HTMLLIElement>;\n}\n\ntype Style = JSX.CSSProperties | string | undefined;\n\nconst styleObject = (style: Style): JSX.CSSProperties => (typeof style === \"object\" && style ? style : {});\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport function Kanban(props: ParentProps<KanbanProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"columnWidth\", \"children\", \"ref\"]);\n  return (\n    <div\n      data-testid=\"kanban\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban\", local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-column-width\": cssLength(local.columnWidth) }}\n    >\n      {local.children}\n    </div>\n  );\n}\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport function KanbanColumn(props: ParentProps<KanbanColumnProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"style\",\n    \"title\",\n    \"count\",\n    \"accent\",\n    \"empty\",\n    \"footer\",\n    \"children\",\n    \"ref\",\n  ]);\n  const titleId = `${createUniqueId()}-title`;\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const cards = children(() => local.children);\n  const empty = children(() => local.empty);\n  const footer = children(() => local.footer);\n  const hasCards = (): boolean => cards.toArray().some(present);\n\n  return (\n    <div\n      data-testid=\"kanban-column\"\n      role=\"group\"\n      aria-labelledby={titleId}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__column\", local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-accent\": local.accent }}\n    >\n      <div class=\"smwb-kanban__column-header\">\n        <div class=\"smwb-kanban__column-title\" id={titleId}>\n          {local.title}\n        </div>\n        <Show when={local.count !== undefined && local.count !== null}>\n          <span class=\"smwb-kanban__count\">{local.count}</span>\n        </Show>\n      </div>\n      <Show\n        when={hasCards()}\n        fallback={\n          <Show when={present(empty())}>\n            <div class=\"smwb-kanban__empty\">{empty()}</div>\n          </Show>\n        }\n      >\n        <ul class=\"smwb-kanban__cards\" role=\"list\">\n          {cards()}\n        </ul>\n      </Show>\n      <Show when={present(footer())}>\n        <div class=\"smwb-kanban__column-footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport function KanbanCard(props: ParentProps<KanbanCardProps>): JSX.Element {\n  const merged = mergeProps({ titleLines: 3 }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"style\", \"title\", \"href\", \"titleLines\", \"children\", \"ref\"]);\n\n  const title = children(() => local.title);\n  const body = children(() => local.children);\n\n  return (\n    <li\n      data-testid=\"kanban-card\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(local.href) }, local.class)}\n      style={{ ...styleObject(local.style), \"--smwb-kanban-title-lines\": String(local.titleLines) }}\n    >\n      <Show when={present(title())}>\n        <Show when={local.href} fallback={<div class=\"smwb-kanban__card-title\">{title()}</div>}>\n          {(href) => (\n            <a class=\"smwb-kanban__card-title\" href={href()}>\n              {title()}\n            </a>\n          )}\n        </Show>\n      </Show>\n      <Show when={present(body())}>\n        <div class=\"smwb-kanban__card-body\">{body()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Kanban;\n"],"mappings":"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","names":[],"file":"kanban.jsx"}

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

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less";
-import { Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { Show, children, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function LazyImage(props) {
@@ -38,10 +39,11 @@ function LazyImage(props) {
   };
   const showFallback = () => failed() || !local.src;
   const resolvedSrc = () => visible() ? local.src : void 0;
+  const fallback = children(() => showFallback() ? local.fallback : void 0);
   const style = () => local.aspectRatio != null ? { "aspect-ratio": String(local.aspectRatio) } : void 0;
   return <span class={cn("smwb-lazy-image", local.class, { "smwb-lazy-image--empty": showFallback() })} style={style()}>
-      <Show when={showFallback() && local.fallback}>
-        <span class="smwb-lazy-image__fallback">{local.fallback}</span>
+      <Show when={fallback()}>
+        <span class="smwb-lazy-image__fallback">{fallback()}</span>
       </Show>
       <Show when={!showFallback()}>
         <img

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";\nimport { type JSX, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={showFallback() && local.fallback}>\n        <span class=\"smwb-lazy-image__fallback\">{local.fallback}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACzF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAuB7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,KAAK,GAAG,KAAK;AAC/C,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,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,OAAO,IAAI;AACvD,MAAI;AAEJ,UAAQ,MAAM;AACZ,QAAI,CAAC,MAAM,QAAQ,QAAQ,KAAK,CAAC,MAAO;AACxC,QAAI,OAAO,yBAAyB,aAAa;AAC/C,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,mBAAW,IAAI;AACf,WAAG,WAAW;AAAA,MAChB;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,KAAK;AAChB,cAAU,MAAM,GAAG,WAAW,CAAC;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,CAAC,UAAuB;AACtC,cAAU,IAAI;AACd,UAAM,UAAU,KAAK;AAAA,EACvB;AAEA,QAAM,eAAe,MAAe,OAAO,KAAK,CAAC,MAAM;AACvD,QAAM,cAAc,MAA2B,QAAQ,IAAI,MAAM,MAAM;AACvE,QAAM,QAAQ,MACZ,MAAM,eAAe,OAAO,EAAE,gBAAgB,OAAO,MAAM,WAAW,EAAE,IAAI;AAE9E,SACE,CAAC,KAAK,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,0BAA0B,aAAa,EAAE,CAAC,GAAG,OAAO,MAAM,GAAG;AAAA,MAC7G,CAAC,KAAK,MAAM,aAAa,KAAK,MAAM,UAAU;AAAA,QAC5C,CAAC,KAAK,MAAM,6BAA6B,MAAM,SAAS,EAAvD,KAA8D;AAAA,MACjE,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,aAAa,GAAG;AAAA,QAC3B,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAuB;AAAA,IAClE,MAAM;AAAA,IACN,KAAK,YAAY;AAAA,IACjB,KAAK,MAAM,OAAO;AAAA,IAClB,SAAS,MAAM,OAAO,SAAS;AAAA,IAC/B,SAAS;AAAA,IACT,SAAS;AAAA,EACX,EAAE;AAAA,MACJ,EAXC,KAWM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,oBAAQ;","names":[],"file":"lazyImage.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/lazyImage/lazyImage.entry.less\";\nimport { type JSX, Show, children, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  // Read the fallback once, and only while it is drawn: markup passed as a prop\n  // is created anew on every read, and during hydration a copy the server never\n  // rendered has no DOM node.\n  const fallback = children(() => (showFallback() ? local.fallback : undefined));\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={fallback()}>\n        <span class=\"smwb-lazy-image__fallback\">{fallback()}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACnG,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAuB7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,MAAM,KAAK,GAAG,KAAK;AAC/C,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,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,CAAC,OAAO,IAAI;AACvD,MAAI;AAEJ,UAAQ,MAAM;AACZ,QAAI,CAAC,MAAM,QAAQ,QAAQ,KAAK,CAAC,MAAO;AACxC,QAAI,OAAO,yBAAyB,aAAa;AAC/C,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,KAAK,IAAI,qBAAqB,CAAC,YAAY;AAC/C,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,mBAAW,IAAI;AACf,WAAG,WAAW;AAAA,MAChB;AAAA,IACF,CAAC;AACD,OAAG,QAAQ,KAAK;AAChB,cAAU,MAAM,GAAG,WAAW,CAAC;AAAA,EACjC,CAAC;AAED,QAAM,UAAU,CAAC,UAAuB;AACtC,cAAU,IAAI;AACd,UAAM,UAAU,KAAK;AAAA,EACvB;AAEA,QAAM,eAAe,MAAe,OAAO,KAAK,CAAC,MAAM;AACvD,QAAM,cAAc,MAA2B,QAAQ,IAAI,MAAM,MAAM;AAIvE,QAAM,WAAW,SAAS,MAAO,aAAa,IAAI,MAAM,WAAW,MAAU;AAC7E,QAAM,QAAQ,MACZ,MAAM,eAAe,OAAO,EAAE,gBAAgB,OAAO,MAAM,WAAW,EAAE,IAAI;AAE9E,SACE,CAAC,KAAK,OAAO,GAAG,mBAAmB,MAAM,OAAO,EAAE,0BAA0B,aAAa,EAAE,CAAC,GAAG,OAAO,MAAM,GAAG;AAAA,MAC7G,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,QACtB,CAAC,KAAK,MAAM,6BAA6B,SAAS,EAAE,EAAnD,KAA0D;AAAA,MAC7D,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,aAAa,GAAG;AAAA,QAC3B,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAuB;AAAA,IAClE,MAAM;AAAA,IACN,KAAK,YAAY;AAAA,IACjB,KAAK,MAAM,OAAO;AAAA,IAClB,SAAS,MAAM,OAAO,SAAS;AAAA,IAC/B,SAAS;AAAA,IACT,SAAS;AAAA,EACX,EAAE;AAAA,MACJ,EAXC,KAWM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,oBAAQ;","names":[],"file":"lazyImage.jsx"}

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

@@ -1,9 +1,11 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/list/list.entry.less";
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function List(props) {
   const [local, rest] = splitProps(props, ["class", "dense", "subheader", "children", "ref"]);
+  const subheader = children(() => local.subheader);
   return <ul
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -11,8 +13,8 @@ function List(props) {
     role="list"
     class={cn("smwb-list", { "smwb-list_dense": local.dense }, local.class)}
   >
-      <Show when={local.subheader}>
-        <li class="smwb-list__subheader">{local.subheader}</li>
+      <Show when={subheader()}>
+        <li class="smwb-list__subheader">{subheader()}</li>
       </Show>
       {local.children}
     </ul>;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/list/list.entry.less\";\nimport { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\"]);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"list\"\n      role=\"list\"\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={local.subheader}>\n        <li class=\"smwb-list__subheader\">{local.subheader}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAU7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAC1F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,aAAa,EAAE,mBAAmB,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,GACvE;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,WAAW;AAAA,QAC3B,CAAC,GAAG,MAAM,wBAAwB,MAAM,UAAU,EAAjD,GAAsD;AAAA,MACzD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,IAClB,EAXC;AAaL;AAEA,IAAO,eAAQ;","names":[],"file":"list.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/list/list.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: JSX.Element;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function List(props: ParentProps<ListProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"subheader\", \"children\", \"ref\"]);\n  // Read the subheader 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 subheader = children(() => local.subheader);\n  return (\n    <ul\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"list\"\n      role=\"list\"\n      class={cn(\"smwb-list\", { \"smwb-list_dense\": local.dense }, local.class)}\n    >\n      <Show when={subheader()}>\n        <li class=\"smwb-list__subheader\">{subheader()}</li>\n      </Show>\n      {local.children}\n    </ul>\n  );\n}\n\nexport default List;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAU7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAG1F,QAAM,YAAY,SAAS,MAAM,MAAM,SAAS;AAChD,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,aAAa,EAAE,mBAAmB,MAAM,MAAM,GAAG,MAAM,KAAK;AAAA,GACvE;AAAA,MACC,CAAC,KAAK,MAAM,UAAU,GAAG;AAAA,QACvB,CAAC,GAAG,MAAM,wBAAwB,UAAU,EAAE,EAA7C,GAAkD;AAAA,MACrD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,IAClB,EAXC;AAaL;AAEA,IAAO,eAAQ;","names":[],"file":"list.jsx"}

package/dist/source/components/dataDisplay/meter/index.js

@@ -0,0 +1,8 @@
+import { Meter, meterColor, DEFAULT_METER_THRESHOLDS, default as default2 } from "./meter";
+export {
+  DEFAULT_METER_THRESHOLDS,
+  Meter,
+  default2 as default,
+  meterColor
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/meter/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/meter/index.ts"],
+  "sourcesContent": ["export { Meter, meterColor, DEFAULT_METER_THRESHOLDS, default } from \"./meter\";\nexport type { MeterProps, MeterColor, MeterThreshold } from \"./meter\";\n"],
+  "mappings": "AAAA,SAAS,OAAO,YAAY,0BAA0B,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,82 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/meter/meter.entry.less";
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+const DEFAULT_METER_THRESHOLDS = [
+  { from: 0, color: "info" },
+  { from: 1, color: "success" }
+];
+function meterColor(share, thresholds) {
+  let color = "neutral";
+  let from = -Infinity;
+  for (const threshold of thresholds) {
+    if (share >= threshold.from && threshold.from >= from) {
+      color = threshold.color;
+      from = threshold.from;
+    }
+  }
+  return color;
+}
+function Meter(props) {
+  const merged = mergeProps({ ofLabel: "of", thresholds: DEFAULT_METER_THRESHOLDS }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "value",
+    "max",
+    "label",
+    "text",
+    "ofLabel",
+    "thresholds",
+    "color",
+    "hideText",
+    "ref"
+  ]);
+  const share = () => local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0;
+  const color = () => local.color ?? meterColor(share(), local.thresholds);
+  const custom = children(() => local.text);
+  const text = () => {
+    const resolved = custom();
+    return typeof resolved === "function" ? resolved(local.value, local.max) : resolved;
+  };
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    role="meter"
+    aria-label={local.label}
+    aria-valuenow={local.value}
+    aria-valuemin={0}
+    aria-valuemax={local.max}
+    aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}
+    data-testid="meter"
+    class={cn("smwb-meter", `smwb-meter_color-${color()}`, { "smwb-meter_bar-only": local.hideText }, local.class)}
+  >
+      <span class="smwb-meter__track" aria-hidden="true">
+        <span class="smwb-meter__fill" style={{ width: `${share() * 100}%` }} />
+      </span>
+      <Show when={!local.hideText}>
+        <span class="smwb-meter__text" aria-hidden="true">
+          <Show
+    when={custom() !== void 0}
+    fallback={<>
+                <b class="smwb-meter__value">{local.value}</b>
+                <span class="smwb-meter__of">
+                  {" "}
+                  {local.ofLabel} {local.max}
+                </span>
+              </>}
+  >
+            {text()}
+          </Show>
+        </span>
+      </Show>
+    </div>;
+}
+var meter_default = Meter;
+export {
+  DEFAULT_METER_THRESHOLDS,
+  Meter,
+  meter_default as default,
+  meterColor
+};
+//# sourceMappingURL=meter.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/meter/meter.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: JSX.Element | ((value: number, max: number) => JSX.Element);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport function Meter(props: MeterProps): JSX.Element {\n  const merged = mergeProps({ ofLabel: \"of\", thresholds: DEFAULT_METER_THRESHOLDS }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"max\",\n    \"label\",\n    \"text\",\n    \"ofLabel\",\n    \"thresholds\",\n    \"color\",\n    \"hideText\",\n    \"ref\",\n  ]);\n\n  const share = (): number => (local.max > 0 ? Math.min(1, Math.max(0, local.value / local.max)) : 0);\n  const color = (): MeterColor => local.color ?? meterColor(share(), local.thresholds);\n  // Read the text once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy made only to test it has no server DOM node. A\n  // function of (value, max) is kept as it is and called where the text renders.\n  const custom = children(() => local.text as JSX.Element);\n  const text = (): JSX.Element => {\n    const resolved = custom() as JSX.Element | ((value: number, max: number) => JSX.Element);\n    return typeof resolved === \"function\" ? resolved(local.value, local.max) : resolved;\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      role=\"meter\"\n      aria-label={local.label}\n      aria-valuenow={local.value}\n      aria-valuemin={0}\n      aria-valuemax={local.max}\n      aria-valuetext={`${local.value} ${local.ofLabel} ${local.max}`}\n      data-testid=\"meter\"\n      class={cn(\"smwb-meter\", `smwb-meter_color-${color()}`, { \"smwb-meter_bar-only\": local.hideText }, local.class)}\n    >\n      <span class=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span class=\"smwb-meter__fill\" style={{ width: `${share() * 100}%` }} />\n      </span>\n      <Show when={!local.hideText}>\n        <span class=\"smwb-meter__text\" aria-hidden=\"true\">\n          <Show\n            when={custom() !== undefined}\n            fallback={\n              <>\n                <b class=\"smwb-meter__value\">{local.value}</b>\n                <span class=\"smwb-meter__of\">\n                  {\" \"}\n                  {local.ofLabel} {local.max}\n                </span>\n              </>\n            }\n          >\n            {text()}\n          </Show>\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Meter;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAW7B,MAAM,2BAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAO;AAAA,EACzB,EAAE,MAAM,GAAG,OAAO,UAAU;AAC9B;AAuBO,SAAS,WAAW,OAAe,YAAmD;AAC3F,MAAI,QAAoB;AACxB,MAAI,OAAO;AACX,aAAW,aAAa,YAAY;AAClC,QAAI,SAAS,UAAU,QAAQ,UAAU,QAAQ,MAAM;AACrD,cAAQ,UAAU;AAClB,aAAO,UAAU;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,MAAM,OAAgC;AACpD,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,YAAY,yBAAyB,GAAG,KAAK;AACxF,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,EACF,CAAC;AAED,QAAM,QAAQ,MAAe,MAAM,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,QAAQ,MAAM,GAAG,CAAC,IAAI;AACjG,QAAM,QAAQ,MAAkB,MAAM,SAAS,WAAW,MAAM,GAAG,MAAM,UAAU;AAInF,QAAM,SAAS,SAAS,MAAM,MAAM,IAAmB;AACvD,QAAM,OAAO,MAAmB;AAC9B,UAAM,WAAW,OAAO;AACxB,WAAO,OAAO,aAAa,aAAa,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI;AAAA,EAC7E;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,KAAK;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,eAAe,MAAM;AAAA,IACrB,eAAe;AAAA,IACf,eAAe,MAAM;AAAA,IACrB,gBAAgB,GAAG,MAAM,KAAK,IAAI,MAAM,OAAO,IAAI,MAAM,GAAG;AAAA,IAC5D,YAAY;AAAA,IACZ,OAAO,GAAG,cAAc,oBAAoB,MAAM,CAAC,IAAI,EAAE,uBAAuB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,GAC9G;AAAA,MACC,CAAC,KAAK,MAAM,oBAAoB,YAAY,OAAO;AAAA,QACjD,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,GAAG,IAAI,GAAG,EAAE;AAAA,MAC1E,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,KAAK,MAAM,mBAAmB,YAAY,OAAO;AAAA,UAChD,CAAC;AAAA,IACC,MAAM,OAAO,MAAM;AAAA,IACnB,UACE,EAAE;AAAA,gBACA,CAAC,EAAE,MAAM,qBAAqB,MAAM,MAAM,EAAzC,EAA6C;AAAA,gBAC9C,CAAC,KAAK,MAAM,iBAAiB;AAAA,mBAC1B,IAAI;AAAA,mBACJ,MAAM,QAAQ,EAAE,MAAM,IAAI;AAAA,gBAC7B,EAHC,KAGM;AAAA,cACT;AAAA,GAEH;AAAA,aACE,KAAK,EAAE;AAAA,UACV,EAbC,KAaM;AAAA,QACT,EAfC,KAeM;AAAA,MACT,EAjBC,KAiBM;AAAA,IACT,EAjCC;AAmCL;AAEA,IAAO,gBAAQ;","names":[],"file":"meter.jsx"}

package/dist/source/components/dataDisplay/personChip/index.js

@@ -0,0 +1,8 @@
+import { PersonChip, initialsOf, avatarColor, default as default2 } from "./personChip";
+export {
+  PersonChip,
+  avatarColor,
+  default2 as default,
+  initialsOf
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/personChip/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/personChip/index.ts"],
+  "sourcesContent": ["export { PersonChip, initialsOf, avatarColor, default } from \"./personChip\";\nexport type { PersonChipProps } from \"./personChip\";\n"],
+  "mappings": "AAAA,SAAS,YAAY,YAAY,aAAa,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,73 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/personChip/personChip.entry.less";
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Avatar } from "../avatar";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function initialsOf(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const first = (word) => word ? Array.from(word)[0] ?? "" : "";
+  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : "")).toUpperCase();
+}
+function avatarColor(seed) {
+  let hash = 0;
+  for (const char of seed) hash = hash * 31 + (char.codePointAt(0) ?? 0) >>> 0;
+  return `hsl(${hash % 360} 42% 42%)`;
+}
+function PersonText(props) {
+  const meta = children(() => props.meta);
+  return <span class="smwb-person-chip__text">
+      <span class="smwb-person-chip__name">{props.name}</span>
+      <Show when={meta()}>
+        <span class="smwb-person-chip__meta">{meta()}</span>
+      </Show>
+    </span>;
+}
+function PersonChip(props) {
+  const merged = mergeProps({ size: 24 }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "name",
+    "src",
+    "href",
+    "compact",
+    "size",
+    "colorSeed",
+    "color",
+    "meta",
+    "ref"
+  ]);
+  return <Dynamic
+    component={local.href ? "a" : "span"}
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    href={local.href}
+    title={local.compact ? local.name : void 0}
+    role={local.compact && !local.href ? "img" : void 0}
+    aria-label={local.compact ? local.name : void 0}
+    data-testid="person-chip"
+    class={cn("smwb-person-chip", { "smwb-person-chip_link": !!local.href, "smwb-person-chip_compact": local.compact }, local.class)}
+  >
+      <Avatar
+    class="smwb-person-chip__avatar"
+    size={local.size}
+    src={local.src}
+    color={local.color ?? avatarColor(local.colorSeed ?? local.name)}
+    aria-hidden="true"
+  >
+        {initialsOf(local.name)}
+      </Avatar>
+      <Show when={!local.compact}>
+        <PersonText name={local.name} meta={local.meta} />
+      </Show>
+    </Dynamic>;
+}
+var personChip_default = PersonChip;
+export {
+  PersonChip,
+  avatarColor,
+  personChip_default as default,
+  initialsOf
+};
+//# sourceMappingURL=personChip.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/personChip/personChip.entry.less\";\nimport { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\n/** Up to two initials from a name: \"Anna Petrova\" → \"AP\", \"anna\" → \"A\". */\nexport function initialsOf(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const first = (word: string | undefined): string => (word ? (Array.from(word)[0] ?? \"\") : \"\");\n  return (first(words[0]) + (words.length > 1 ? first(words[words.length - 1]) : \"\")).toUpperCase();\n}\n\n/**\n * A steady background colour for a person's avatar, derived from a seed (an id\n * or the name): the same person always gets the same colour, on the server too.\n */\nexport function avatarColor(seed: string): string {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0;\n  return `hsl(${hash % 360} 42% 42%)`;\n}\n\nexport interface PersonChipProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  /** The person's name: shown beside the avatar, and the source of its initials. */\n  name: string;\n  /** Avatar image; initials on a colour without it or when it fails. */\n  src?: string;\n  /** Link to the person's card. */\n  href?: string;\n  /** The avatar only; the name becomes its tooltip and accessible name. */\n  compact?: boolean;\n  /** Avatar size: a preset or pixels. 24px by default. */\n  size?: AvatarSize | number;\n  /** Seed for the avatar colour (an id); the name by default. */\n  colorSeed?: string;\n  /** A fixed avatar colour instead of the derived one. */\n  color?: string;\n  /** A second line under the name: a role, a date. */\n  meta?: JSX.Element;\n  ref?: Ref<HTMLElement>;\n}\n\n/** The name and the meta line. Meta is read here, where it renders: markup\n *  created and not rendered (a compact chip) would have no server node. */\nfunction PersonText(props: { name: string; meta: JSX.Element }): JSX.Element {\n  const meta = children(() => props.meta);\n  return (\n    <span class=\"smwb-person-chip__text\">\n      <span class=\"smwb-person-chip__name\">{props.name}</span>\n      <Show when={meta()}>\n        <span class=\"smwb-person-chip__meta\">{meta()}</span>\n      </Show>\n    </span>\n  );\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport function PersonChip(props: PersonChipProps): JSX.Element {\n  const merged = mergeProps({ size: 24 as AvatarSize | number }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"name\",\n    \"src\",\n    \"href\",\n    \"compact\",\n    \"size\",\n    \"colorSeed\",\n    \"color\",\n    \"meta\",\n    \"ref\",\n  ]);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"span\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      title={local.compact ? local.name : undefined}\n      role={local.compact && !local.href ? \"img\" : undefined}\n      aria-label={local.compact ? local.name : undefined}\n      data-testid=\"person-chip\"\n      class={cn(\"smwb-person-chip\", { \"smwb-person-chip_link\": !!local.href, \"smwb-person-chip_compact\": local.compact }, local.class)}\n    >\n      <Avatar\n        class=\"smwb-person-chip__avatar\"\n        size={local.size}\n        src={local.src}\n        color={local.color ?? avatarColor(local.colorSeed ?? local.name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(local.name)}\n      </Avatar>\n      <Show when={!local.compact}>\n        <PersonText name={local.name} meta={local.meta} />\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport default PersonChip;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAA+B;AACxC,SAAS,iBAA2B;AAG7B,SAAS,WAAW,MAAsB;AAC/C,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,QAAM,QAAQ,CAAC,SAAsC,OAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,KAAK,KAAM;AAC1F,UAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAY;AAClG;AAMO,SAAS,YAAY,MAAsB;AAChD,MAAI,OAAO;AACX,aAAW,QAAQ,KAAM,QAAQ,OAAO,MAAM,KAAK,YAAY,CAAC,KAAK,OAAQ;AAC7E,SAAO,OAAO,OAAO,GAAG;AAC1B;AAwBA,SAAS,WAAW,OAAyD;AAC3E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,SACE,CAAC,KAAK,MAAM,yBAAyB;AAAA,MACnC,CAAC,KAAK,MAAM,0BAA0B,MAAM,KAAK,EAAhD,KAAuD;AAAA,MACxD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,0BAA0B,KAAK,EAAE,EAA5C,KAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,IACT,EALC;AAOL;AAGO,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,MAAM,GAA0B,GAAG,KAAK;AACpE,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,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM,UAAU,MAAM,OAAO;AAAA,IACpC,MAAM,MAAM,WAAW,CAAC,MAAM,OAAO,QAAQ;AAAA,IAC7C,YAAY,MAAM,UAAU,MAAM,OAAO;AAAA,IACzC,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,yBAAyB,CAAC,CAAC,MAAM,MAAM,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GAChI;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,MAAM,MAAM;AAAA,IACZ,KAAK,MAAM;AAAA,IACX,OAAO,MAAM,SAAS,YAAY,MAAM,aAAa,MAAM,IAAI;AAAA,IAC/D,YAAY;AAAA,GACb;AAAA,SACE,WAAW,MAAM,IAAI,EAAE;AAAA,MAC1B,EARC,OAQQ;AAAA,MACT,CAAC,KAAK,MAAM,CAAC,MAAM,SAAS;AAAA,QAC1B,CAAC,WAAW,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,MACpD,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,qBAAQ;","names":[],"file":"personChip.jsx"}

package/dist/source/components/dataDisplay/stat/index.js

@@ -0,0 +1,7 @@
+import { Stat, StatGroup, default as default2 } from "./stat";
+export {
+  Stat,
+  StatGroup,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/dataDisplay/stat/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/dataDisplay/stat/index.ts"],
+  "sourcesContent": ["export { Stat, StatGroup, default } from \"./stat\";\nexport type { StatProps, StatGroupProps, StatTone } from \"./stat\";\n"],
+  "mappings": "AAAA,SAAS,MAAM,WAAW,WAAAA,gBAAe;",
+  "names": ["default"]
+}

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

@@ -0,0 +1,74 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/stat/stat.entry.less";
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Stat(props) {
+  const merged = mergeProps({ tone: "neutral", variant: "tile" }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "label",
+    "value",
+    "hint",
+    "icon",
+    "tone",
+    "variant",
+    "href",
+    "children",
+    "ref"
+  ]);
+  const label = children(() => local.label);
+  const value = children(() => local.value);
+  const hint = children(() => local.hint);
+  const icon = children(() => local.icon);
+  const extra = children(() => local.children);
+  return <Dynamic
+    component={local.href ? "a" : "div"}
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    href={local.href}
+    data-testid="stat"
+    class={cn(
+      "smwb-stat",
+      `smwb-stat_${local.variant}`,
+      `smwb-stat_tone-${local.tone}`,
+      { "smwb-stat_link": !!local.href, "smwb-stat_with-icon": !!icon() },
+      local.class
+    )}
+  >
+      <Show when={icon()}>
+        {(resolved) => <span class="smwb-stat__icon" aria-hidden="true">
+            {typeof resolved() === "string" ? <Icon name={resolved()} size={20} /> : resolved()}
+          </span>}
+      </Show>
+      <span class="smwb-stat__label">{label()}</span>
+      <span class="smwb-stat__value">{value()}</span>
+      <Show when={hint()}>
+        <span class="smwb-stat__hint">{hint()}</span>
+      </Show>
+      <Show when={extra()}>
+        <div class="smwb-stat__extra">{extra()}</div>
+      </Show>
+    </Dynamic>;
+}
+function StatGroup(props) {
+  const [local, rest] = splitProps(props, ["class", "style", "minItemWidth", "children", "ref"]);
+  const style = () => {
+    if (local.minItemWidth === void 0) return local.style;
+    const width = typeof local.minItemWidth === "number" ? `${local.minItemWidth}px` : local.minItemWidth;
+    if (typeof local.style === "string") return `${local.style};--smwb-stat-min:${width}`;
+    return { ...local.style, "--smwb-stat-min": width };
+  };
+  return <div {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-stat-group", local.class)} style={style()}>
+      {local.children}
+    </div>;
+}
+var stat_default = Stat;
+export {
+  Stat,
+  StatGroup,
+  stat_default as default
+};
+//# sourceMappingURL=stat.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/stat/stat.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** What the figure counts. */\n  label: JSX.Element;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: JSX.Element;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: JSX.Element;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | JSX.Element;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport function Stat(props: ParentProps<StatProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as StatTone, variant: \"tile\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"value\",\n    \"hint\",\n    \"icon\",\n    \"tone\",\n    \"variant\",\n    \"href\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const label = children(() => local.label);\n  const value = children(() => local.value);\n  const hint = children(() => local.hint);\n  const icon = children(() => local.icon);\n  const extra = children(() => local.children);\n\n  return (\n    <Dynamic\n      component={local.href ? \"a\" : \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      href={local.href}\n      data-testid=\"stat\"\n      class={cn(\n        \"smwb-stat\",\n        `smwb-stat_${local.variant}`,\n        `smwb-stat_tone-${local.tone}`,\n        { \"smwb-stat_link\": !!local.href, \"smwb-stat_with-icon\": !!icon() },\n        local.class\n      )}\n    >\n      <Show when={icon()}>\n        {(resolved) => (\n          <span class=\"smwb-stat__icon\" aria-hidden=\"true\">\n            {typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={20} /> : resolved()}\n          </span>\n        )}\n      </Show>\n      <span class=\"smwb-stat__label\">{label()}</span>\n      <span class=\"smwb-stat__value\">{value()}</span>\n      <Show when={hint()}>\n        <span class=\"smwb-stat__hint\">{hint()}</span>\n      </Show>\n      <Show when={extra()}>\n        <div class=\"smwb-stat__extra\">{extra()}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nexport interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport function StatGroup(props: ParentProps<StatGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"style\", \"minItemWidth\", \"children\", \"ref\"]);\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (local.minItemWidth === undefined) return local.style;\n    const width = typeof local.minItemWidth === \"number\" ? `${local.minItemWidth}px` : local.minItemWidth;\n    if (typeof local.style === \"string\") return `${local.style};--smwb-stat-min:${width}`;\n    return { ...local.style, \"--smwb-stat-min\": width };\n  };\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-stat-group\", local.class)} style={style()}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default Stat;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AA0B7B,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,MAAM,WAAuB,SAAS,OAAgB,GAAG,KAAK;AAC1F,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,EACF,CAAC;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,QAAQ;AAE3C,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,aAAa,MAAM,OAAO;AAAA,MAC1B,kBAAkB,MAAM,IAAI;AAAA,MAC5B,EAAE,kBAAkB,CAAC,CAAC,MAAM,MAAM,uBAAuB,CAAC,CAAC,KAAK,EAAE;AAAA,MAClE,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,SACjB,CAAC,aACA,CAAC,KAAK,MAAM,kBAAkB,YAAY,OAAO;AAAA,aAC9C,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAE;AAAA,UAChG,EAFC,MAGD;AAAA,MACJ,EANC,KAMM;AAAA,MACP,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,oBAAoB,MAAM,EAAE,EAAvC,KAA8C;AAAA,MAC/C,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,mBAAmB,KAAK,EAAE,EAArC,KAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,QACnB,CAAC,IAAI,MAAM,oBAAoB,MAAM,EAAE,EAAtC,IAA4C;AAAA,MAC/C,EAFC,KAEM;AAAA,IACT,EA7BC;AA+BL;AASO,SAAS,UAAU,OAAiD;AACzE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,QAAM,QAAQ,MAA8C;AAC1D,QAAI,MAAM,iBAAiB,OAAW,QAAO,MAAM;AACnD,UAAM,QAAQ,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM;AACzF,QAAI,OAAO,MAAM,UAAU,SAAU,QAAO,GAAG,MAAM,KAAK,oBAAoB,KAAK;AACnF,WAAO,EAAE,GAAG,MAAM,OAAO,mBAAmB,MAAM;AAAA,EACpD;AACA,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,mBAAmB,MAAM,KAAK,GAAG,OAAO,MAAM,GAAG;AAAA,OAClG,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,eAAQ;","names":[],"file":"stat.jsx"}

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

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/table/table.entry.less";
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TablePagination } from "./tablePagination/tablePagination";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -13,12 +14,19 @@ function Table(props) {
     "isLoading",
     "stickyHeader",
     "caption",
+    "stackBelow",
     "ref"
   ]);
+  const caption = children(() => local.caption);
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    class={cn("smwb-table__wrapper", local.class, { "smwb-table__wrapper_loading": local.isLoading })}
+    class={cn(
+      "smwb-table__wrapper",
+      local.class,
+      { "smwb-table__wrapper_loading": local.isLoading },
+      local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`
+    )}
   >
       <div class={cn("smwb-table__container", { "smwb-withPagination": !!local.paginationSettings })}>
         <table
@@ -28,8 +36,8 @@ function Table(props) {
       "smwb-table_sticky-header": local.stickyHeader
     })}
   >
-          <Show when={local.caption != null}>
-            <caption class="smwb-table__caption">{local.caption}</caption>
+          <Show when={caption() != null}>
+            <caption class="smwb-table__caption">{caption()}</caption>
           </Show>
           {local.children}
         </table>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/table/table.entry.less\";\nimport { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"ref\",\n  ]);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__wrapper\", local.class, { \"smwb-table__wrapper_loading\": local.isLoading })}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={local.caption != null}>\n            <caption class=\"smwb-table__caption\">{local.caption}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AAc7B,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,MAAM,OAAO,EAAE,+BAA+B,MAAM,UAAU,CAAC;AAAA,GACjG;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC,QAAQ,MAAM,uBAAuB,MAAM,QAAQ,EAAnD,QAA6D;AAAA,UAChE,EAFC,KAEM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAXC,MAWO;AAAA,MACV,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/table/table.entry.less\";\nimport { type JSX, type ParentProps, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TablePagination, type TablePaginationProps } from \"./tablePagination/tablePagination\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: JSX.Element;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Table(props: ParentProps<TableProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"dense\",\n    \"hovered\",\n    \"children\",\n    \"paginationSettings\",\n    \"isLoading\",\n    \"stickyHeader\",\n    \"caption\",\n    \"stackBelow\",\n    \"ref\",\n  ]);\n\n  // Read the caption once: markup is created anew on every read, and during\n  // hydration the copy made for the <Show> test has no server DOM node.\n  const caption = children(() => local.caption);\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-table__wrapper\",\n        local.class,\n        { \"smwb-table__wrapper_loading\": local.isLoading },\n        local.stackBelow && `smwb-table__wrapper_stack-${local.stackBelow}`\n      )}\n    >\n      <div class={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!local.paginationSettings })}>\n        <table\n          class={cn(\"smwb-table\", {\n            \"smwb-dense\": local.dense,\n            \"smwb-hovered\": local.hovered,\n            \"smwb-table_sticky-header\": local.stickyHeader,\n          })}\n        >\n          <Show when={caption() != null}>\n            <caption class=\"smwb-table__caption\">{caption()}</caption>\n          </Show>\n          {local.children}\n        </table>\n      </div>\n      <Show when={local.paginationSettings}>\n        {(settings) => <TablePagination {...settings()} />}\n      </Show>\n    </div>\n  );\n}\n\nexport default Table;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,kBAAkB;AACvE,OAAO,QAAQ;AACf,SAAS,uBAAkD;AAC3D,SAAS,iBAA2B;AAqB7B,SAAS,MAAM,OAA6C;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;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,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,EAAE,+BAA+B,MAAM,UAAU;AAAA,MACjD,MAAM,cAAc,6BAA6B,MAAM,UAAU;AAAA,IACnE;AAAA,GACD;AAAA,MACC,CAAC,IAAI,OAAO,GAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAAC,MAAM,mBAAmB,CAAC,GAAG;AAAA,QAC9F,CAAC;AAAA,IACC,OAAO,GAAG,cAAc;AAAA,MACtB,cAAc,MAAM;AAAA,MACpB,gBAAgB,MAAM;AAAA,MACtB,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,GACF;AAAA,UACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM;AAAA,YAC7B,CAAC,QAAQ,MAAM,uBAAuB,QAAQ,EAAE,EAA/C,QAAyD;AAAA,UAC5D,EAFC,KAEM;AAAA,WACN,MAAM,SAAS;AAAA,QAClB,EAXC,MAWO;AAAA,MACV,EAbC,IAaK;AAAA,MACN,CAAC,KAAK,MAAM,MAAM,oBAAoB;AAAA,SACnC,CAAC,aAAa,CAAC,oBAAoB,SAAS,GAAG,GAAG;AAAA,MACrD,EAFC,KAEM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,gBAAQ;","names":[],"file":"table.jsx"}

package/dist/source/components/dataDisplay/table/tableCell.jsx

@@ -3,8 +3,14 @@ import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function TableCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
-  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "ref"]);
-  return <td {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-table__cell", local.class)} align={local.cellAlign || "left"}>
+  const [local, rest] = splitProps(merged, ["children", "cellAlign", "class", "label", "ref"]);
+  return <td
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-table__cell", local.class)}
+    align={local.cellAlign || "left"}
+    data-label={local.label}
+  >
       {local.children}
     </td>;
 }