@smwb/ui-solid 0.11.2 → 0.12.1

package/dist/headless/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  createEffect(() => {\n    document.body.style.overflow = isOpen() ? \"hidden\" : \"auto\";\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={local.itemBarContent}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {local.itemBarContent}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","props","merged","mergeProps","cols","rows","itemBarPlacement","alt","local","splitProps","ctx","useImagesListContext","isOpen","setIsOpen","createSignal","createEffect","document","body","style","overflow","height","rowsHeight","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","$$click","_$insert","_$createComponent","Show","when","itemBarContent","children","_el$5","_tmpl$","_$effect","_$className","cn","class","rounded","_p$","_v$","variant","_v$2","_v$3","src","_v$4","_v$5","e","t","_$style","a","_$setAttribute","o","i","undefined","ImagesListItemModal","onClose","_$delegateEvents"],"mappings":";;;;;;AAiBO,SAASA,EAAeC,GAAyC;AACtE,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAGC,MAAM;AAAA,IAAGC,kBAAkB;AAAA,IAAmBC,KAAK;AAAA,EAAA,GAAWN,CAAK,GAClG,CAACO,CAAK,IAAIC,EAAWP,GAAQ,CACjC,SACA,OACA,WACA,kBACA,QACA,QACA,oBACA,KAAK,CACN,GAEKQ,IAAMC,EAAAA,GACN,CAACC,GAAQC,CAAS,IAAIC,EAAa,EAAK;AAE9CC,EAAAA,EAAa,MAAM;AACjBC,aAASC,KAAKC,MAAMC,WAAWP,EAAAA,IAAW,WAAW;AAAA,EACvD,CAAC;AAED,QAAMM,IAAQA,OAA0B;AAAA,IACtCE,QAAQV,EAAIW,aAAa,GAAGX,EAAIW,aAAab,EAAMH,IAAI,OAAO;AAAA,IAC9D,gBAAgB,QAAQG,EAAMH,IAAI;AAAA,IAClC,mBAAmB,QAAQG,EAAMJ,IAAI;AAAA,EAAA;AAGvC,SAAA,EAAA,MAAA;AAAA,QAAAkB,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAAAD,EAAAD;AAAAH,WAAAA,EAAAM,UAKe,MAAMf,EAAU,EAAI,GAACgB,EAAAL,GAAAM,EAO3BC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAExB,EAAMyB;AAAAA,MAAc;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MAI3B3B,EAAMyB,cAAc,GAAAI,QAAAC,EAAAH,GAFdI,EAAG,0BAA0B/B,EAAMgC,OAAO,QAAQhC,EAAMF,gBAAgB,IAAI;AAAA,UAAE,gBAAgBE,EAAMiC;AAAAA,QAAAA,CAAS,CAAC,CAAA,GAAAN;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAE,EAAAK,CAAAA,MAAA;AAAA,UAAAC,IAVpHJ,EAAG,4BAA4B/B,EAAMgC,OAAO,qBAAqB,QAAQ9B,EAAIkC,OAAO,EAAE,GAACC,IAEvF3B,KAAO4B,IAIAtC,EAAMuC,KAAGC,IAAOxC,EAAMD,OAAO,SAAO0C,IAASV,EAAG,0BAA0B;AAAA,QAAE,gBAAgB/B,EAAMiC;AAAAA,MAAAA,CAAS;AAACE,aAAAA,MAAAD,EAAAQ,KAAAZ,EAAAhB,GAAAoB,EAAAQ,IAAAP,CAAA,GAAAD,EAAAS,IAAAC,EAAA9B,GAAAuB,GAAAH,EAAAS,CAAA,GAAAL,MAAAJ,EAAAW,KAAAC,EAAA3B,GAAA,OAAAe,EAAAW,IAAAP,CAAA,GAAAE,MAAAN,EAAAa,KAAAD,EAAA3B,GAAA,OAAAe,EAAAa,IAAAP,CAAA,GAAAC,MAAAP,EAAAc,KAAAlB,EAAAX,GAAAe,EAAAc,IAAAP,CAAA,GAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAQ,GAAAO;AAAAA,MAAAN,GAAAM;AAAAA,MAAAJ,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA,GAAAnC;AAAAA,EAAA,GAAA,GAAAQ,EAW3H4B,GAAmB;AAAA,IAAA,IAACX,MAAG;AAAA,aAAEvC,EAAMuC;AAAAA,IAAG;AAAA,IAAEY,SAASA,MAAM9C,EAAU,EAAK;AAAA,IAAC,IAAED,SAAM;AAAA,aAAEA,EAAAA;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAG5F;AAE8BgD,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import { type JSX, Show, children, createEffect, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { ImagesListItemModal } from \"./imagesListItemModal\";\nimport { useImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  class?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: JSX.Element;\n  alt?: string;\n}\n\nexport function ImagesListItem(props: ImagesListItemProps): JSX.Element {\n  const merged = mergeProps({ cols: 1, rows: 1, itemBarPlacement: \"bottom\" as const, alt: \"image\" }, props);\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"rounded\",\n    \"itemBarContent\",\n    \"cols\",\n    \"rows\",\n    \"itemBarPlacement\",\n    \"alt\",\n  ]);\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const itemBar = children(() => local.itemBarContent);\n\n  const ctx = useImagesListContext();\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  // Lock the page's scroll while the viewer is open, and give it back as it was.\n  // (Every item used to set it to \"auto\" when it mounted, undoing another lock.)\n  createEffect(() => {\n    if (!isOpen()) return;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    onCleanup(() => {\n      document.body.style.overflow = previous;\n    });\n  });\n\n  const style = (): JSX.CSSProperties => ({\n    height: ctx.rowsHeight ? `${ctx.rowsHeight * local.rows}px` : \"\",\n    \"grid-row-end\": `span ${local.rows}`,\n    \"grid-column-end\": `span ${local.cols}`,\n  });\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        class={cn(\"smwb-gallery__list__item\", local.class, \"smwb-gallery-item\", `smwb-${ctx.variant}`)}\n        onClick={() => setIsOpen(true)}\n        style={style()}\n      >\n        <div class=\"smwb-gallery-item__inner\">\n          <div class=\"smwb-gallery-item__img-wrapper\">\n            <img src={local.src} alt={local.alt || \"image\"} class={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": local.rounded })} />\n          </div>\n          <Show when={itemBar()}>\n            <div\n              class={cn(\"smwb-gallery-item__bar\", local.class, `smwb-${local.itemBarPlacement}`, { \"smwb-rounded\": local.rounded })}\n            >\n              {itemBar()}\n            </div>\n          </Show>\n        </div>\n      </li>\n      <ImagesListItemModal src={local.src} onClose={() => setIsOpen(false)} isOpen={isOpen()} />\n    </>\n  );\n}\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","props","merged","mergeProps","cols","rows","itemBarPlacement","alt","local","splitProps","itemBar","children","itemBarContent","ctx","useImagesListContext","isOpen","setIsOpen","createSignal","createEffect","previous","document","body","style","overflow","onCleanup","height","rowsHeight","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","$$click","_$insert","_$createComponent","Show","when","_el$5","_tmpl$","_$effect","_$className","cn","class","rounded","_p$","_v$","variant","_v$2","_v$3","src","_v$4","_v$5","e","t","_$style","a","_$setAttribute","o","i","undefined","ImagesListItemModal","onClose","_$delegateEvents"],"mappings":"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"}

package/dist/headless/components/dataDisplay/kanban/kanban.js

@@ -0,0 +1,131 @@
+import { use as g, spread as $, mergeProps as w, insert as r, createComponent as u, effect as K, setAttribute as h, memo as j, template as s } from "solid-js/web";
+import { splitProps as k, mergeProps as x, children as b, Show as m, createUniqueId as A } from "solid-js";
+import y from "clsx";
+import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
+var I = /* @__PURE__ */ s("<div data-testid=kanban>"), S = /* @__PURE__ */ s("<span class=smwb-kanban__count>"), W = /* @__PURE__ */ s("<ul class=smwb-kanban__cards role=list>"), q = /* @__PURE__ */ s("<div class=smwb-kanban__column-footer>"), B = /* @__PURE__ */ s("<div data-testid=kanban-column role=group><div class=smwb-kanban__column-header><div class=smwb-kanban__column-title>"), O = /* @__PURE__ */ s("<div class=smwb-kanban__empty>"), R = /* @__PURE__ */ s("<div class=smwb-kanban__card-body>"), U = /* @__PURE__ */ s("<li data-testid=kanban-card>"), z = /* @__PURE__ */ s("<div class=smwb-kanban__card-title>"), D = /* @__PURE__ */ s("<a class=smwb-kanban__card-title>");
+const C = (e) => typeof e == "object" && e ? e : {}, E = (e) => typeof e == "number" ? `${e}px` : e, f = (e) => e != null && e !== !1 && e !== !0 && e !== "";
+function M(e) {
+  const [t, l] = k(e, ["class", "style", "columnWidth", "children", "ref"]);
+  return (() => {
+    var c = I(), o = v(t.ref);
+    return typeof o == "function" && g(o, c), $(c, w(l, {
+      get class() {
+        return y("smwb-kanban", t.class);
+      },
+      get style() {
+        return {
+          ...C(t.style),
+          "--smwb-kanban-column-width": E(t.columnWidth)
+        };
+      }
+    }), !1, !0), r(c, () => t.children), c;
+  })();
+}
+function N(e) {
+  const [t, l] = k(e, ["class", "style", "title", "count", "accent", "empty", "footer", "children", "ref"]), c = `${A()}-title`, o = b(() => t.children), _ = b(() => t.empty), i = b(() => t.footer), p = () => o.toArray().some(f);
+  return (() => {
+    var n = B(), d = n.firstChild, L = d.firstChild, P = v(t.ref);
+    return typeof P == "function" && g(P, n), h(n, "aria-labelledby", c), $(n, w(l, {
+      get class() {
+        return y("smwb-kanban__column", t.class);
+      },
+      get style() {
+        return {
+          ...C(t.style),
+          "--smwb-kanban-accent": t.accent
+        };
+      }
+    }), !1, !0), h(L, "id", c), r(L, () => t.title), r(d, u(m, {
+      get when() {
+        return j(() => t.count !== void 0)() && t.count !== null;
+      },
+      get children() {
+        var a = S();
+        return r(a, () => t.count), a;
+      }
+    }), null), r(n, u(m, {
+      get when() {
+        return p();
+      },
+      get fallback() {
+        return u(m, {
+          get when() {
+            return f(_());
+          },
+          get children() {
+            var a = O();
+            return r(a, _), a;
+          }
+        });
+      },
+      get children() {
+        var a = W();
+        return r(a, o), a;
+      }
+    }), null), r(n, u(m, {
+      get when() {
+        return f(i());
+      },
+      get children() {
+        var a = q();
+        return r(a, i), a;
+      }
+    }), null), n;
+  })();
+}
+function Q(e) {
+  const t = x({
+    titleLines: 3
+  }, e), [l, c] = k(t, ["class", "style", "title", "href", "titleLines", "children", "ref"]), o = b(() => l.title), _ = b(() => l.children);
+  return (() => {
+    var i = U(), p = v(l.ref);
+    return typeof p == "function" && g(p, i), $(i, w(c, {
+      get class() {
+        return y("smwb-kanban__card", {
+          "smwb-kanban__card_link": !!l.href
+        }, l.class);
+      },
+      get style() {
+        return {
+          ...C(l.style),
+          "--smwb-kanban-title-lines": String(l.titleLines)
+        };
+      }
+    }), !1, !0), r(i, u(m, {
+      get when() {
+        return f(o());
+      },
+      get children() {
+        return u(m, {
+          get when() {
+            return l.href;
+          },
+          get fallback() {
+            return (() => {
+              var n = z();
+              return r(n, o), n;
+            })();
+          },
+          children: (n) => (() => {
+            var d = D();
+            return r(d, o), K(() => h(d, "href", n())), d;
+          })()
+        });
+      }
+    }), null), r(i, u(m, {
+      get when() {
+        return f(_());
+      },
+      get children() {
+        var n = R();
+        return r(n, _), n;
+      }
+    }), null), i;
+  })();
+}
+export {
+  M as Kanban,
+  Q as KanbanCard,
+  N as KanbanColumn
+};
+//# sourceMappingURL=kanban.js.map

package/dist/headless/components/dataDisplay/kanban/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.js","sources":["../../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import { 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"],"names":["styleObject","style","cssLength","value","present","Kanban","props","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","columnWidth","_$insert","children","KanbanColumn","titleId","createUniqueId","cards","empty","footer","hasCards","toArray","some","_el$2","_tmpl$5","_el$3","firstChild","_el$4","_ref$2","_$setAttribute","accent","title","_$createComponent","Show","when","_$memo","count","undefined","_el$5","_tmpl$2","fallback","_el$8","_tmpl$6","_el$6","_tmpl$3","_el$7","_tmpl$4","KanbanCard","merged","mergeProps","titleLines","body","_el$9","_tmpl$8","_ref$3","Boolean","href","String","_el$1","_tmpl$9","_el$10","_tmpl$0","_$effect","_el$0","_tmpl$7"],"mappings":"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"}

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js

@@ -1,49 +1,49 @@
-import { insert as o, createComponent as u, memo as $, use as h, spread as k, mergeProps as E, effect as I, className as P, style as R, template as i } from "solid-js/web";
-import { mergeProps as S, splitProps as C, createSignal as g, onMount as F, Show as p, onCleanup as O } from "solid-js";
-import x from "clsx";
-import { mergeRefs as L } from "../../../primitives/mergeRefs.js";
-var M = /* @__PURE__ */ i("<span class=smwb-lazy-image__fallback>"), N = /* @__PURE__ */ i("<img>", !0, !1, !1), V = /* @__PURE__ */ i("<span>");
-function D(d) {
+import { insert as o, createComponent as g, use as $, spread as k, mergeProps as E, effect as I, className as P, style as R, template as i } from "solid-js/web";
+import { mergeProps as S, splitProps as C, createSignal as p, onMount as F, children as O, Show as d, onCleanup as x } from "solid-js";
+import L from "clsx";
+import { mergeRefs as M } from "../../../primitives/mergeRefs.js";
+var N = /* @__PURE__ */ i("<span class=smwb-lazy-image__fallback>"), V = /* @__PURE__ */ i("<img>", !0, !1, !1), j = /* @__PURE__ */ i("<span>");
+function G(v) {
   const c = S({
     lazy: !0
-  }, d), [r, v] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [y, b] = g(!1), [m, f] = g(!c.lazy);
-  let s;
+  }, v), [r, y] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [b, z] = p(!1), [m, f] = p(!c.lazy);
+  let a;
   F(() => {
-    if (!r.lazy || m() || !s) return;
+    if (!r.lazy || m() || !a) return;
     if (typeof IntersectionObserver > "u") {
       f(!0);
       return;
     }
     const t = new IntersectionObserver((e) => {
-      e.some((a) => a.isIntersecting) && (f(!0), t.disconnect());
+      e.some((s) => s.isIntersecting) && (f(!0), t.disconnect());
     });
-    t.observe(s), O(() => t.disconnect());
+    t.observe(a), x(() => t.disconnect());
   });
-  const z = (t) => {
-    b(!0), r.onError?.(t);
-  }, n = () => y() || !r.src, w = () => m() ? r.src : void 0, _ = () => r.aspectRatio != null ? {
+  const w = (t) => {
+    z(!0), r.onError?.(t);
+  }, n = () => b() || !r.src, _ = () => m() ? r.src : void 0, u = O(() => n() ? r.fallback : void 0), h = () => r.aspectRatio != null ? {
     "aspect-ratio": String(r.aspectRatio)
   } : void 0;
   return (() => {
-    var t = V();
-    return o(t, u(p, {
+    var t = j();
+    return o(t, g(d, {
       get when() {
-        return $(() => !!n())() && r.fallback;
+        return u();
       },
       get children() {
-        var e = M();
-        return o(e, () => r.fallback), e;
+        var e = N();
+        return o(e, u), e;
       }
-    }), null), o(t, u(p, {
+    }), null), o(t, g(d, {
       get when() {
         return !n();
       },
       get children() {
-        var e = N(), a = L(r.ref, (l) => s = l);
-        return typeof a == "function" && h(a, e), k(e, E(v, {
+        var e = V(), s = M(r.ref, (l) => a = l);
+        return typeof s == "function" && $(s, e), k(e, E(y, {
           class: "smwb-lazy-image__img",
           get src() {
-            return w();
+            return _();
           },
           get alt() {
             return r.alt ?? "";
@@ -52,14 +52,14 @@ function D(d) {
             return r.lazy ? "lazy" : void 0;
           },
           decoding: "async",
-          onError: z
+          onError: w
         }), !1, !1), e;
       }
     }), null), I((e) => {
-      var a = x("smwb-lazy-image", r.class, {
+      var s = L("smwb-lazy-image", r.class, {
         "smwb-lazy-image--empty": n()
-      }), l = _();
-      return a !== e.e && P(t, e.e = a), e.t = R(t, l, e.t), e;
+      }), l = h();
+      return s !== e.e && P(t, e.e = s), e.t = R(t, l, e.t), e;
     }, {
       e: void 0,
       t: void 0
@@ -67,6 +67,6 @@ function D(d) {
   })();
 }
 export {
-  D as LazyImage
+  G as LazyImage
 };
 //# sourceMappingURL=lazyImage.js.map

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import { 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"],"names":["LazyImage","props","merged","mergeProps","lazy","local","rest","splitProps","failed","setFailed","createSignal","visible","setVisible","imgEl","onMount","IntersectionObserver","io","entries","some","entry","isIntersecting","disconnect","observe","onCleanup","onError","event","showFallback","src","resolvedSrc","undefined","style","aspectRatio","String","_el$","_tmpl$3","_$insert","_$createComponent","Show","when","_$memo","fallback","children","_el$2","_tmpl$","_el$3","_tmpl$2","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","alt","loading","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":"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"}
+{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import { 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"],"names":["LazyImage","props","merged","mergeProps","lazy","local","rest","splitProps","failed","setFailed","createSignal","visible","setVisible","imgEl","onMount","IntersectionObserver","io","entries","some","entry","isIntersecting","disconnect","observe","onCleanup","onError","event","showFallback","src","resolvedSrc","undefined","fallback","children","style","aspectRatio","String","_el$","_tmpl$3","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$3","_tmpl$2","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","alt","loading","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":"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"}

package/dist/headless/components/dataDisplay/list/list.js

@@ -1,32 +1,32 @@
-import { use as i, spread as m, mergeProps as u, insert as t, createComponent as p, template as n } from "solid-js/web";
-import { splitProps as c, Show as d } from "solid-js";
-import f from "clsx";
-import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
-var _ = /* @__PURE__ */ n("<li class=smwb-list__subheader>"), b = /* @__PURE__ */ n("<ul>");
-function P(o) {
-  const [e, a] = c(o, ["class", "dense", "subheader", "children", "ref"]);
+import { use as m, spread as u, mergeProps as c, insert as t, createComponent as d, template as o } from "solid-js/web";
+import { splitProps as p, children as f, Show as h } from "solid-js";
+import _ from "clsx";
+import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
+var g = /* @__PURE__ */ o("<li class=smwb-list__subheader>"), w = /* @__PURE__ */ o("<ul>");
+function y(i) {
+  const [e, a] = p(i, ["class", "dense", "subheader", "children", "ref"]), s = f(() => e.subheader);
   return (() => {
-    var r = b(), s = h(e.ref);
-    return typeof s == "function" && i(s, r), m(r, u(a, {
+    var r = w(), l = b(e.ref);
+    return typeof l == "function" && m(l, r), u(r, c(a, {
       "data-testid": "list",
       role: "list",
       get class() {
-        return f("smwb-list", {
+        return _("smwb-list", {
           "smwb-list_dense": e.dense
         }, e.class);
       }
-    }), !1, !0), t(r, p(d, {
+    }), !1, !0), t(r, d(h, {
       get when() {
-        return e.subheader;
+        return s();
       },
       get children() {
-        var l = _();
-        return t(l, () => e.subheader), l;
+        var n = g();
+        return t(n, s), n;
       }
     }), null), t(r, () => e.children, null), r;
   })();
 }
 export {
-  P as List
+  y as List
 };
 //# sourceMappingURL=list.js.map

package/dist/headless/components/dataDisplay/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { 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"],"names":["List","props","local","rest","splitProps","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","dense","class","_$insert","_$createComponent","Show","when","subheader","children","_el$2","_tmpl$"],"mappings":";;;;;AAYO,SAASA,EAAKC,GAA4C;AAC/D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC;AAC1F,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAGSC,EAAUN,EAAMO,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBT,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,MACb;AAAA,MAAM,IAAA,QAAA;AAAA,eACJU,EAAG,aAAa;AAAA,UAAE,mBAAmBX,EAAMY;AAAAA,QAAAA,GAASZ,EAAMa,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAAY,EAEtEC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,EAAMkB;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,IAAAC,EAAAA;AAAAP,eAAAA,EAAAM,GAAA,MACSpB,EAAMkB,SAAS,GAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAN,EAAAX,GAAA,MAElDH,EAAMmB,UAAQ,IAAA,GAAAhB;AAAAA,EAAA,GAAA;AAGrB;"}
+{"version":3,"file":"list.js","sources":["../../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { 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"],"names":["List","props","local","rest","splitProps","subheader","children","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","dense","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$"],"mappings":";;;;;AAYO,SAASA,EAAKC,GAA4C;AAC/D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,aAAa,YAAY,KAAK,CAAC,GAGpFI,IAAYC,EAAS,MAAMJ,EAAMG,SAAS;AAChD,UAAA,MAAA;AAAA,QAAAE,IAAAC,EAAAA,GAAAC,IAGSC,EAAUR,EAAMS,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBX,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,MACb;AAAA,MAAM,IAAA,QAAA;AAAA,eACJY,EAAG,aAAa;AAAA,UAAE,mBAAmBb,EAAMc;AAAAA,QAAAA,GAASd,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAAY,EAEtEC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhB,EAAAA;AAAAA,MAAW;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAgB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACajB,CAAS,GAAAiB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAX,GAAA,MAE5CL,EAAMI,UAAQ,IAAA,GAAAC;AAAAA,EAAA,GAAA;AAGrB;"}

package/dist/headless/components/dataDisplay/meter/meter.js

@@ -0,0 +1,82 @@
+import { use as $, spread as g, mergeProps as w, insert as o, createComponent as _, effect as y, setStyleProperty as L, template as s } from "solid-js/web";
+import { mergeProps as S, splitProps as T, children as C, Show as h } from "solid-js";
+import P from "clsx";
+import { mergeRefs as E } from "../../../primitives/mergeRefs.js";
+var M = /* @__PURE__ */ s("<span class=smwb-meter__text aria-hidden=true>"), R = /* @__PURE__ */ s("<div><span class=smwb-meter__track aria-hidden=true><span class=smwb-meter__fill>"), k = /* @__PURE__ */ s("<b class=smwb-meter__value>"), D = /* @__PURE__ */ s("<span class=smwb-meter__of> <!> ");
+const H = [{
+  from: 0,
+  color: "info"
+}, {
+  from: 1,
+  color: "success"
+}];
+function A(n, m) {
+  let e = "neutral", a = -1 / 0;
+  for (const t of m)
+    n >= t.from && t.from >= a && (e = t.color, a = t.from);
+  return e;
+}
+function j(n) {
+  const m = S({
+    ofLabel: "of",
+    thresholds: H
+  }, n), [e, a] = T(m, ["class", "value", "max", "label", "text", "ofLabel", "thresholds", "color", "hideText", "ref"]), t = () => e.max > 0 ? Math.min(1, Math.max(0, e.value / e.max)) : 0, d = () => e.color ?? A(t(), e.thresholds), c = C(() => e.text), p = () => {
+    const r = c();
+    return typeof r == "function" ? r(e.value, e.max) : r;
+  };
+  return (() => {
+    var r = R(), b = r.firstChild, v = b.firstChild, u = E(e.ref);
+    return typeof u == "function" && $(u, r), g(r, w(a, {
+      role: "meter",
+      get "aria-label"() {
+        return e.label;
+      },
+      get "aria-valuenow"() {
+        return e.value;
+      },
+      "aria-valuemin": 0,
+      get "aria-valuemax"() {
+        return e.max;
+      },
+      get "aria-valuetext"() {
+        return `${e.value} ${e.ofLabel} ${e.max}`;
+      },
+      "data-testid": "meter",
+      get class() {
+        return P("smwb-meter", `smwb-meter_color-${d()}`, {
+          "smwb-meter_bar-only": e.hideText
+        }, e.class);
+      }
+    }), !1, !0), o(r, _(h, {
+      get when() {
+        return !e.hideText;
+      },
+      get children() {
+        var i = M();
+        return o(i, _(h, {
+          get when() {
+            return c() !== void 0;
+          },
+          get fallback() {
+            return [(() => {
+              var l = k();
+              return o(l, () => e.value), l;
+            })(), (() => {
+              var l = D(), x = l.firstChild, f = x.nextSibling;
+              return f.nextSibling, o(l, () => e.ofLabel, f), o(l, () => e.max, null), l;
+            })()];
+          },
+          get children() {
+            return p();
+          }
+        })), i;
+      }
+    }), null), y((i) => L(v, "width", `${t() * 100}%`)), r;
+  })();
+}
+export {
+  H as DEFAULT_METER_THRESHOLDS,
+  j as Meter,
+  A as meterColor
+};
+//# sourceMappingURL=meter.js.map

package/dist/headless/components/dataDisplay/meter/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import { 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"],"names":["DEFAULT_METER_THRESHOLDS","from","color","meterColor","share","thresholds","threshold","Meter","props","merged","mergeProps","ofLabel","local","rest","splitProps","max","Math","min","value","custom","children","text","resolved","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","label","cn","hideText","class","_$insert","_$createComponent","Show","when","_el$4","_tmpl$","undefined","fallback","_el$5","_tmpl$3","_el$6","_tmpl$4","_el$7","_el$9","nextSibling","_$effect","_$p","_$setStyleProperty"],"mappings":";;;;;AAaO,MAAMA,IAAsD,CACjE;AAAA,EAAEC,MAAM;AAAA,EAAGC,OAAO;AAAO,GACzB;AAAA,EAAED,MAAM;AAAA,EAAGC,OAAO;AAAU,CAAC;AAwBxB,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIH,IAAoB,WACpBD,IAAO;AACX,aAAWK,KAAaD;AACtB,IAAID,KAASE,EAAUL,QAAQK,EAAUL,QAAQA,MAC/CC,IAAQI,EAAUJ,OAClBD,IAAOK,EAAUL;AAGrB,SAAOC;AACT;AAGO,SAASK,EAAMC,GAAgC;AACpD,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAMN,YAAYL;AAAAA,EAAAA,GAA4BQ,CAAK,GAClF,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,SACA,OACA,SACA,QACA,WACA,cACA,SACA,YACA,KAAK,CACN,GAEKL,IAAQA,MAAeQ,EAAMG,MAAM,IAAIC,KAAKC,IAAI,GAAGD,KAAKD,IAAI,GAAGH,EAAMM,QAAQN,EAAMG,GAAG,CAAC,IAAI,GAC3Fb,IAAQA,MAAkBU,EAAMV,SAASC,EAAWC,EAAAA,GAASQ,EAAMP,UAAU,GAI7Ec,IAASC,EAAS,MAAMR,EAAMS,IAAmB,GACjDA,IAAOA,MAAmB;AAC9B,UAAMC,IAAWH,EAAAA;AACjB,WAAO,OAAOG,KAAa,aAAaA,EAASV,EAAMM,OAAON,EAAMG,GAAG,IAAIO;AAAAA,EAC7E;AAEA,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC,YAAAE,IAGSC,EAAUjB,EAAMkB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAL,CAAA,GAAAS,EAAAT,GAAAU,EADrBpB,GAAI;AAAA,MAAA,MAEH;AAAA,MAAO,IAAA,eAAA;AAAA,eACAD,EAAMsB;AAAAA,MAAK;AAAA,MAAA,IAAA,kBAAA;AAAA,eACRtB,EAAMM;AAAAA,MAAK;AAAA,MAAA,iBACX;AAAA,MAAC,IAAA,kBAAA;AAAA,eACDN,EAAMG;AAAAA,MAAG;AAAA,MAAA,IAAA,mBAAA;AAAA,eACR,GAAGH,EAAMM,KAAK,IAAIN,EAAMD,OAAO,IAAIC,EAAMG,GAAG;AAAA,MAAE;AAAA,MAAA,eAClD;AAAA,MAAO,IAAA,QAAA;AAAA,eACZoB,EAAG,cAAc,oBAAoBjC,EAAAA,CAAO,IAAI;AAAA,UAAE,uBAAuBU,EAAMwB;AAAAA,QAAAA,GAAYxB,EAAMyB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAf,GAAAgB,EAK7GC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAAC7B,EAAMwB;AAAAA,MAAQ;AAAA,MAAA,IAAAhB,WAAA;AAAA,YAAAsB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GAAAH,EAEtBC,GAAI;AAAA,UAAA,IACHC,OAAI;AAAA,mBAAEtB,QAAayB;AAAAA,UAAS;AAAA,UAAA,IAC5BC,WAAQ;AAAA,mBAAA,EAAA,MAAA;AAAA,kBAAAC,IAAAC,EAAAA;AAAAT,qBAAAA,EAAAQ,GAAA,MAE0BlC,EAAMM,KAAK,GAAA4B;AAAAA,YAAA,GAAA,IAAA,MAAA;AAAA,kBAAAE,IAAAC,KAAAC,IAAAF,EAAAtB,YAAAyB,IAAAD,EAAAE;AAAAD,qBAAAA,EAAAC,aAAAd,EAAAU,GAAA,MAGtCpC,EAAMD,SAAOwC,CAAA,GAAAb,EAAAU,GAAA,MAAGpC,EAAMG,KAAG,IAAA,GAAAiC;AAAAA,YAAA,IAAA;AAAA,UAAA;AAAA,UAAA,IAAA5B,WAAA;AAAA,mBAK/BC,EAAAA;AAAAA,UAAM;AAAA,QAAA,CAAA,CAAA,GAAAqB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAW,EAAAC,CAAAA,MAAAC,EAAA5B,GAAA,SAhBoC,GAAGvB,EAAAA,IAAU,GAAG,GAAG,CAAA,GAAAmB;AAAAA,EAAA,GAAA;AAsB1E;"}

package/dist/headless/components/dataDisplay/personChip/personChip.js

@@ -0,0 +1,102 @@
+import { createComponent as o, Dynamic as l, mergeProps as h, memo as m, insert as a, template as i } from "solid-js/web";
+import { mergeProps as f, splitProps as u, Show as p, children as g } from "solid-js";
+import d from "clsx";
+import { mergeRefs as _ } from "../../../primitives/mergeRefs.js";
+import { Avatar as v } from "../avatar/avatar.js";
+var w = /* @__PURE__ */ i("<span class=smwb-person-chip__meta>"), b = /* @__PURE__ */ i("<span class=smwb-person-chip__text><span class=smwb-person-chip__name>");
+function $(t) {
+  const r = t.trim().split(/\s+/).filter(Boolean), e = (n) => n ? Array.from(n)[0] ?? "" : "";
+  return (e(r[0]) + (r.length > 1 ? e(r[r.length - 1]) : "")).toUpperCase();
+}
+function P(t) {
+  let r = 0;
+  for (const e of t) r = r * 31 + (e.codePointAt(0) ?? 0) >>> 0;
+  return `hsl(${r % 360} 42% 42%)`;
+}
+function C(t) {
+  const r = g(() => t.meta);
+  return (() => {
+    var e = b(), n = e.firstChild;
+    return a(n, () => t.name), a(e, o(p, {
+      get when() {
+        return r();
+      },
+      get children() {
+        var s = w();
+        return a(s, r), s;
+      }
+    }), null), e;
+  })();
+}
+function k(t) {
+  const r = f({
+    size: 24
+  }, t), [e, n] = u(r, ["class", "name", "src", "href", "compact", "size", "colorSeed", "color", "meta", "ref"]);
+  return o(l, h({
+    get component() {
+      return e.href ? "a" : "span";
+    }
+  }, n, {
+    ref(s) {
+      var c = _(e.ref);
+      typeof c == "function" && c(s);
+    },
+    get href() {
+      return e.href;
+    },
+    get title() {
+      return m(() => !!e.compact)() ? e.name : void 0;
+    },
+    get role() {
+      return e.compact && !e.href ? "img" : void 0;
+    },
+    get "aria-label"() {
+      return m(() => !!e.compact)() ? e.name : void 0;
+    },
+    "data-testid": "person-chip",
+    get class() {
+      return d("smwb-person-chip", {
+        "smwb-person-chip_link": !!e.href,
+        "smwb-person-chip_compact": e.compact
+      }, e.class);
+    },
+    get children() {
+      return [o(v, {
+        class: "smwb-person-chip__avatar",
+        get size() {
+          return e.size;
+        },
+        get src() {
+          return e.src;
+        },
+        get color() {
+          return e.color ?? P(e.colorSeed ?? e.name);
+        },
+        "aria-hidden": "true",
+        get children() {
+          return $(e.name);
+        }
+      }), o(p, {
+        get when() {
+          return !e.compact;
+        },
+        get children() {
+          return o(C, {
+            get name() {
+              return e.name;
+            },
+            get meta() {
+              return e.meta;
+            }
+          });
+        }
+      })];
+    }
+  }));
+}
+export {
+  k as PersonChip,
+  P as avatarColor,
+  $ as initialsOf
+};
+//# sourceMappingURL=personChip.js.map

package/dist/headless/components/dataDisplay/personChip/personChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"personChip.js","sources":["../../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import { 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"],"names":["initialsOf","name","words","trim","split","filter","Boolean","first","word","Array","from","length","toUpperCase","avatarColor","seed","hash","char","codePointAt","PersonText","props","meta","children","_el$","_tmpl$2","_el$2","firstChild","_$insert","_$createComponent","Show","when","_el$3","_tmpl$","PersonChip","merged","mergeProps","size","local","rest","splitProps","Dynamic","_$mergeProps","component","href","ref","r$","_ref$","mergeRefs","title","_$memo","compact","undefined","role","cn","class","Avatar","src","color","colorSeed"],"mappings":"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"}