@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1 +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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"}
+{"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\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\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  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string | undefined;\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  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string | undefined;\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  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLLIElement>;\n}\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\", \"data-testid\"]);\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"kanban\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-kanban\", local.class)}\n      style={mergeStyle(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    \"data-testid\",\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={local[\"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={mergeStyle(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, [\n    \"class\",\n    \"style\",\n    \"title\",\n    \"href\",\n    \"titleLines\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const title = children(() => local.title);\n  const body = children(() => local.children);\n\n  return (\n    <li\n      data-testid={local[\"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={mergeStyle(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":["cssLength","value","present","Kanban","props","local","rest","splitProps","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","style","mergeStyle","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/kbd/kbd.js

@@ -0,0 +1,45 @@
+import { use as g, spread as h, mergeProps as $, insert as s, createComponent as d, memo as w, template as o } from "solid-js/web";
+import { splitProps as v, createSignal as y, onMount as x, For as K, Show as P } from "solid-js";
+import C from "clsx";
+import { mergeRefs as S } from "../../../primitives/mergeRefs.js";
+import { detectKbdPlatform as j, kbdKeyLabel as D } from "./kbdKeys.js";
+var F = /* @__PURE__ */ o("<kbd><span class=smwb-kbd__text>"), L = /* @__PURE__ */ o("<span class=smwb-kbd__separator aria-hidden=true>"), M = /* @__PURE__ */ o("<kbd class=smwb-kbd__key aria-hidden=true>");
+function E(p) {
+  const [t, c] = v(p, ["class", "keys", "platform", "separator", "label", "ref", "data-testid"]), [i, b] = y("other");
+  x(() => b(j()));
+  const a = () => t.platform ?? i(), n = () => t.keys.map((e) => D(e, a())), l = () => t.separator ?? (a() === "mac" ? "" : "+"), f = () => t.label ?? n().map((e) => e.name).join(a() === "mac" ? " " : "+");
+  return (() => {
+    var e = F(), u = e.firstChild, m = S(t.ref);
+    return typeof m == "function" && g(m, e), h(e, $(c, {
+      get "data-testid"() {
+        return t["data-testid"] ?? "kbd";
+      },
+      get "data-platform"() {
+        return a();
+      },
+      get class() {
+        return C("smwb-kbd", t.class);
+      }
+    }), !1, !0), s(u, f), s(e, d(K, {
+      get each() {
+        return n();
+      },
+      children: (_, k) => [d(P, {
+        get when() {
+          return w(() => k() > 0)() && l() !== "";
+        },
+        get children() {
+          var r = L();
+          return s(r, l), r;
+        }
+      }), (() => {
+        var r = M();
+        return s(r, () => _.text), r;
+      })()]
+    }), null), e;
+  })();
+}
+export {
+  E as Kbd
+};
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sources":["../../../../../src/components/dataDisplay/kbd/kbd.tsx"],"sourcesContent":["import { type JSX, For, Show, createSignal, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { detectKbdPlatform, kbdKeyLabel, type KbdPlatform } from \"./kbdKeys\";\n\nexport interface KbdProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"children\"> {\n  /**\n   * The keys of the shortcut in order, e.g. `[\"Mod\", \"K\"]` or `[\"Shift\", \"Enter\"]`. `Mod` is the\n   * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,\n   * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the\n   * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,\n   * Esc, Tab, Backspace and Del, whatever their case. `\" \"` and `Space` are the Space key, `+` and\n   * `Plus` the plus key.\n   * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given\n   * (a single letter in upper case).\n   */\n  keys: string[];\n  /**\n   * The platform whose keys are drawn. Without it the browser's own is used: `other` on the\n   * server and in the first client render (so that hydration matches), `mac` right after on a Mac.\n   * Set it for a fixed look, in stories and in tests.\n   */\n  platform?: KbdPlatform | undefined;\n  /**\n   * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols\n   * stand side by side; `\"\"` draws none. It is for the eye only; assistive technology reads `label`.\n   */\n  separator?: string | undefined;\n  /**\n   * What assistive technology reads instead of the key caps. By default the key names, joined\n   * with `+` on `other` (\"Ctrl+K\") and with a space on `mac` (\"Command K\").\n   */\n  label?: string | undefined;\n  /** Test id of the root `<kbd>`; `kbd` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and\n * every cap are `<kbd>`; assistive technology reads one text (\"Ctrl+K\", \"Command K\") and skips the caps.\n */\nexport function Kbd(props: KbdProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"keys\",\n    \"platform\",\n    \"separator\",\n    \"label\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // `other` on the server and in the first client render, so that hydration matches.\n  const [detected, setDetected] = createSignal<KbdPlatform>(\"other\");\n  onMount(() => setDetected(detectKbdPlatform()));\n\n  const platform = (): KbdPlatform => local.platform ?? detected();\n  const labels = () => local.keys.map((key) => kbdKeyLabel(key, platform()));\n  const between = (): string => local.separator ?? (platform() === \"mac\" ? \"\" : \"+\");\n  const spoken = (): string =>\n    local.label ??\n    labels()\n      .map((item) => item.name)\n      .join(platform() === \"mac\" ? \" \" : \"+\");\n\n  return (\n    <kbd\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"kbd\"}\n      data-platform={platform()}\n      class={cn(\"smwb-kbd\", local.class)}\n    >\n      <span class=\"smwb-kbd__text\">{spoken()}</span>\n      <For each={labels()}>\n        {(item, index) => (\n          <>\n            <Show when={index() > 0 && between() !== \"\"}>\n              <span class=\"smwb-kbd__separator\" aria-hidden=\"true\">\n                {between()}\n              </span>\n            </Show>\n            <kbd class=\"smwb-kbd__key\" aria-hidden=\"true\">\n              {item.text}\n            </kbd>\n          </>\n        )}\n      </For>\n    </kbd>\n  );\n}\n\nexport default Kbd;\n"],"names":["Kbd","props","local","rest","splitProps","detected","setDetected","createSignal","onMount","detectKbdPlatform","platform","labels","keys","map","key","kbdKeyLabel","between","separator","spoken","label","item","name","join","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","children","index","Show","when","_$memo","_el$3","_tmpl$2","_el$4","_tmpl$3","text"],"mappings":";;;;;;AA0CO,SAASA,EAAIC,GAA8B;AAChD,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CACtC,SACA,QACA,YACA,aACA,SACA,OACA,aAAa,CACd,GAGK,CAACI,GAAUC,CAAW,IAAIC,EAA0B,OAAO;AACjEC,EAAAA,EAAQ,MAAMF,EAAYG,EAAAA,CAAmB,CAAC;AAE9C,QAAMC,IAAWA,MAAmBR,EAAMQ,YAAYL,EAAAA,GAChDM,IAASA,MAAMT,EAAMU,KAAKC,IAAKC,OAAQC,EAAYD,GAAKJ,EAAAA,CAAU,CAAC,GACnEM,IAAUA,MAAcd,EAAMe,cAAcP,EAAAA,MAAe,QAAQ,KAAK,MACxEQ,IAASA,MACbhB,EAAMiB,SACNR,EAAAA,EACGE,IAAKO,CAAAA,MAASA,EAAKC,IAAI,EACvBC,KAAKZ,EAAAA,MAAe,QAAQ,MAAM,GAAG;AAE1C,UAAA,MAAA;AAAA,QAAAa,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAU1B,EAAM2B,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrB7B,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAK;AAAA,MAAA,IAAA,kBAAA;AAAA,eAC3BQ,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAA,QAAA;AAAA,eAClBuB,EAAG,YAAY/B,EAAMgC,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAV,GAEJP,CAAM,GAAAiB,EAAAZ,GAAAa,EACnCC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE3B,EAAAA;AAAAA,MAAQ;AAAA,MAAA4B,UAChBA,CAACnB,GAAMoB,MAAK,CAAAJ,EAERK,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEC,EAAA,MAAAH,EAAAA,IAAU,CAAC,EAAA,KAAIxB,QAAc;AAAA,QAAE;AAAA,QAAA,IAAAuB,WAAA;AAAA,cAAAK,IAAAC,EAAAA;AAAAV,iBAAAA,EAAAS,GAEtC5B,CAAO,GAAA4B;AAAAA,QAAA;AAAA,MAAA,CAAA,IAAA,MAAA;AAAA,YAAAE,IAAAC,EAAAA;AAAAZ,eAAAA,EAAAW,GAAA,MAIT1B,EAAK4B,IAAI,GAAAF;AAAAA,MAAA,IAAA;AAAA,IAAA,CAGf,GAAA,IAAA,GAAAvB;AAAAA,EAAA,GAAA;AAIT;"}

package/dist/headless/components/dataDisplay/kbd/kbdKeys.js

@@ -0,0 +1,70 @@
+const a = (e, n) => ({ text: e, name: n }), p = {
+  up: a("↑", "Up arrow"),
+  arrowup: a("↑", "Up arrow"),
+  down: a("↓", "Down arrow"),
+  arrowdown: a("↓", "Down arrow"),
+  left: a("←", "Left arrow"),
+  arrowleft: a("←", "Left arrow"),
+  right: a("→", "Right arrow"),
+  arrowright: a("→", "Right arrow"),
+  // `KeyboardEvent.key` is " " for the space bar, and a bare "+" would read "Ctrl++".
+  " ": { text: "Space", name: "Space" },
+  space: { text: "Space", name: "Space" },
+  spacebar: { text: "Space", name: "Space" },
+  "+": { text: "+", name: "Plus" },
+  plus: { text: "+", name: "Plus" }
+}, r = { text: "⌘", name: "Command" }, s = {
+  mod: r,
+  meta: r,
+  cmd: r,
+  command: r,
+  shift: { text: "⇧", name: "Shift" },
+  alt: { text: "⌥", name: "Option" },
+  option: { text: "⌥", name: "Option" },
+  ctrl: { text: "⌃", name: "Control" },
+  control: { text: "⌃", name: "Control" },
+  enter: { text: "↩", name: "Return" },
+  return: { text: "↩", name: "Return" },
+  escape: { text: "⎋", name: "Escape" },
+  esc: { text: "⎋", name: "Escape" },
+  tab: { text: "⇥", name: "Tab" },
+  backspace: { text: "⌫", name: "Delete" },
+  delete: { text: "⌦", name: "Forward delete" },
+  del: { text: "⌦", name: "Forward delete" }
+}, o = { text: "Meta", name: "Meta" }, t = (e, n = e) => ({ text: e, name: n }), d = {
+  mod: t("Ctrl"),
+  ctrl: t("Ctrl"),
+  control: t("Ctrl"),
+  alt: t("Alt"),
+  option: t("Alt"),
+  shift: t("Shift"),
+  meta: o,
+  cmd: o,
+  command: o,
+  enter: t("Enter"),
+  return: t("Enter"),
+  escape: t("Esc", "Escape"),
+  esc: t("Esc", "Escape"),
+  tab: t("Tab"),
+  backspace: t("Backspace"),
+  delete: t("Del", "Delete"),
+  del: t("Del", "Delete")
+};
+function i() {
+  if (typeof navigator > "u")
+    return "other";
+  const e = navigator.userAgentData?.platform;
+  return /mac|iphone|ipad|ipod/i.test(e || navigator.platform || "") ? "mac" : "other";
+}
+function w(e, n) {
+  const c = e.trim().toLowerCase() || e, m = (n === "mac" ? s : d)[c] ?? p[c];
+  if (m)
+    return m;
+  const l = e.length === 1 ? e.toUpperCase() : e;
+  return { text: l, name: l };
+}
+export {
+  i as detectKbdPlatform,
+  w as kbdKeyLabel
+};
+//# sourceMappingURL=kbdKeys.js.map

package/dist/headless/components/dataDisplay/kbd/kbdKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbdKeys.js","sources":["../../../../../src/components/dataDisplay/kbd/kbdKeys.ts"],"sourcesContent":["export type KbdPlatform = \"mac\" | \"other\";\n\n/** How one key is drawn, and how it is read out. */\nexport interface KbdKeyLabel {\n  /** What is drawn on the key cap. */\n  text: string;\n  /** What assistive technology reads. */\n  name: string;\n}\n\nconst arrow = (text: string, name: string): KbdKeyLabel => ({ text, name });\n\n// Names, in lower case, the same on every platform.\nconst COMMON: Record<string, KbdKeyLabel> = {\n  up: arrow(\"↑\", \"Up arrow\"),\n  arrowup: arrow(\"↑\", \"Up arrow\"),\n  down: arrow(\"↓\", \"Down arrow\"),\n  arrowdown: arrow(\"↓\", \"Down arrow\"),\n  left: arrow(\"←\", \"Left arrow\"),\n  arrowleft: arrow(\"←\", \"Left arrow\"),\n  right: arrow(\"→\", \"Right arrow\"),\n  arrowright: arrow(\"→\", \"Right arrow\"),\n  // `KeyboardEvent.key` is \" \" for the space bar, and a bare \"+\" would read \"Ctrl++\".\n  \" \": { text: \"Space\", name: \"Space\" },\n  space: { text: \"Space\", name: \"Space\" },\n  spacebar: { text: \"Space\", name: \"Space\" },\n  \"+\": { text: \"+\", name: \"Plus\" },\n  plus: { text: \"+\", name: \"Plus\" },\n};\n\nconst COMMAND: KbdKeyLabel = { text: \"⌘\", name: \"Command\" };\n\n// On macOS the modifiers and the editing keys are drawn as the symbols the Mac\n// keyboard and its menus use.\nconst MAC: Record<string, KbdKeyLabel> = {\n  mod: COMMAND,\n  meta: COMMAND,\n  cmd: COMMAND,\n  command: COMMAND,\n  shift: { text: \"⇧\", name: \"Shift\" },\n  alt: { text: \"⌥\", name: \"Option\" },\n  option: { text: \"⌥\", name: \"Option\" },\n  ctrl: { text: \"⌃\", name: \"Control\" },\n  control: { text: \"⌃\", name: \"Control\" },\n  enter: { text: \"↩\", name: \"Return\" },\n  return: { text: \"↩\", name: \"Return\" },\n  escape: { text: \"⎋\", name: \"Escape\" },\n  esc: { text: \"⎋\", name: \"Escape\" },\n  tab: { text: \"⇥\", name: \"Tab\" },\n  backspace: { text: \"⌫\", name: \"Delete\" },\n  delete: { text: \"⌦\", name: \"Forward delete\" },\n  del: { text: \"⌦\", name: \"Forward delete\" },\n};\n\n// Elsewhere the same names are written in their usual capitalisation, so one `keys` array\n// looks alike on every platform. `Meta`, `Cmd` and `Command` have no key of their own here\n// and are drawn as `Meta`.\nconst META: KbdKeyLabel = { text: \"Meta\", name: \"Meta\" };\nconst named = (text: string, name = text): KbdKeyLabel => ({ text, name });\nconst OTHER: Record<string, KbdKeyLabel> = {\n  mod: named(\"Ctrl\"),\n  ctrl: named(\"Ctrl\"),\n  control: named(\"Ctrl\"),\n  alt: named(\"Alt\"),\n  option: named(\"Alt\"),\n  shift: named(\"Shift\"),\n  meta: META,\n  cmd: META,\n  command: META,\n  enter: named(\"Enter\"),\n  return: named(\"Enter\"),\n  escape: named(\"Esc\", \"Escape\"),\n  esc: named(\"Esc\", \"Escape\"),\n  tab: named(\"Tab\"),\n  backspace: named(\"Backspace\"),\n  delete: named(\"Del\", \"Delete\"),\n  del: named(\"Del\", \"Delete\"),\n};\n\n/**\n * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself\n * so), `other` everywhere else and without a `navigator` (on the server).\n */\nexport function detectKbdPlatform(): KbdPlatform {\n  if (typeof navigator === \"undefined\") {\n    return \"other\";\n  }\n  const hinted = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform;\n  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || \"\") ? \"mac\" : \"other\";\n}\n\n/**\n * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the\n * tables above for the rest. A single letter is drawn in upper case; any other key as given.\n */\nexport function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel {\n  const lower = key.trim().toLowerCase() || key; // a lone \" \" is the space bar\n  const known = (platform === \"mac\" ? MAC : OTHER)[lower] ?? COMMON[lower];\n  if (known) {\n    return known;\n  }\n  const text = key.length === 1 ? key.toUpperCase() : key;\n  return { text, name: text };\n}\n"],"names":["arrow","text","name","COMMON","COMMAND","MAC","META","named","OTHER","detectKbdPlatform","hinted","kbdKeyLabel","key","platform","lower","known"],"mappings":"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"}

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

@@ -1,32 +1,32 @@
-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 { insert as o, createComponent as d, 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 v, 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) {
+function G(y) {
   const c = S({
     lazy: !0
-  }, v), [r, y] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [b, z] = p(!1), [m, f] = p(!c.lazy);
+  }, y), [r, m] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [b, z] = p(!1), [f, g] = p(!c.lazy);
   let a;
   F(() => {
-    if (!r.lazy || m() || !a) return;
+    if (!r.lazy || f() || !a) return;
     if (typeof IntersectionObserver > "u") {
-      f(!0);
+      g(!0);
       return;
     }
     const t = new IntersectionObserver((e) => {
-      e.some((s) => s.isIntersecting) && (f(!0), t.disconnect());
+      e.some((s) => s.isIntersecting) && (g(!0), t.disconnect());
     });
     t.observe(a), x(() => t.disconnect());
   });
   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 ? {
+  }, n = () => b() || !r.src, _ = () => f() ? 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 = j();
-    return o(t, g(d, {
+    return o(t, d(v, {
       get when() {
         return u();
       },
@@ -34,13 +34,13 @@ function G(v) {
         var e = N();
         return o(e, u), e;
       }
-    }), null), o(t, g(d, {
+    }), null), o(t, d(v, {
       get when() {
         return !n();
       },
       get children() {
         var e = V(), s = M(r.ref, (l) => a = l);
-        return typeof s == "function" && $(s, e), k(e, E(y, {
+        return typeof s == "function" && $(s, e), k(e, E(m, {
           class: "smwb-lazy-image__img",
           get src() {
             return _();
@@ -51,7 +51,9 @@ function G(v) {
           get loading() {
             return r.lazy ? "lazy" : void 0;
           },
-          decoding: "async",
+          get decoding() {
+            return m.decoding ?? "async";
+          },
           onError: w
         }), !1, !1), e;
       }

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, 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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"}
+{"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          // `lazy` wins over the caller's loading; without it (undefined), the\n          // caller's stays. decoding=\"async\" is a default: the caller's wins,\n          // and an explicit undefined keeps it.\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding={rest.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","decoding","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":";;;;;AAyBO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,EAAA,GAAQH,CAAK,GACzC,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,OACA,OACA,YACA,QACA,eACA,SACA,WACA,KAAK,CACN,GAEK,CAACM,GAAQC,CAAS,IAAIC,EAAa,EAAK,GAExC,CAACC,GAASC,CAAU,IAAIF,EAAa,CAACR,EAAOE,IAAI;AACvD,MAAIS;AAEJC,EAAAA,EAAQ,MAAM;AACZ,QAAI,CAACT,EAAMD,QAAQO,EAAAA,KAAa,CAACE,EAAO;AACxC,QAAI,OAAOE,uBAAyB,KAAa;AAC/CH,MAAAA,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMI,IAAK,IAAID,qBAAsBE,CAAAA,MAAY;AAC/C,MAAIA,EAAQC,KAAMC,CAAAA,MAAUA,EAAMC,cAAc,MAC9CR,EAAW,EAAI,GACfI,EAAGK,WAAAA;AAAAA,IAEP,CAAC;AACDL,IAAAA,EAAGM,QAAQT,CAAK,GAChBU,EAAU,MAAMP,EAAGK,YAAY;AAAA,EACjC,CAAC;AAED,QAAMG,IAAUA,CAACC,MAAuB;AACtChB,IAAAA,EAAU,EAAI,GACdJ,EAAMmB,UAAUC,CAAK;AAAA,EACvB,GAEMC,IAAeA,MAAelB,OAAY,CAACH,EAAMsB,KACjDC,IAAcA,MAA2BjB,EAAAA,IAAYN,EAAMsB,MAAME,QAIjEC,IAAWC,EAAS,MAAOL,MAAiBrB,EAAMyB,WAAWD,MAAU,GACvEG,IAAQA,MACZ3B,EAAM4B,eAAe,OAAO;AAAA,IAAE,gBAAgBC,OAAO7B,EAAM4B,WAAW;AAAA,EAAA,IAAMJ;AAE9E,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEV,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAU,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACqBX,CAAQ,GAAAW;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAF,GAAAG,EAElDC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE,CAACd,EAAAA;AAAAA,MAAc;AAAA,MAAA,IAAAK,WAAA;AAAA,YAAAY,IAAAC,EAAAA,GAAAC,IAGlBC,EAAUzC,EAAM0C,KAAMC,CAAAA,MAAQnC,IAAQmC,CAAuB;AAAC,sBAAAH,KAAA,cAAAI,EAAAJ,GAAAF,CAAA,GAAAO,EAAAP,GAAAQ,EAD/D7C,GAAI;AAAA,UAAA,OAEF;AAAA,UAAsB,IAC5BqB,MAAG;AAAA,mBAAEC,EAAAA;AAAAA,UAAa;AAAA,UAAA,IAClBwB,MAAG;AAAA,mBAAE/C,EAAM+C,OAAO;AAAA,UAAE;AAAA,UAAA,IAIpBC,UAAO;AAAA,mBAAEhD,EAAMD,OAAO,SAASyB;AAAAA,UAAS;AAAA,UAAA,IACxCyB,WAAQ;AAAA,mBAAEhD,EAAKgD,YAAY;AAAA,UAAO;AAAA,UAAA,SACzB9B;AAAAA,QAAAA,CAAO,GAAA,IAAA,EAAA,GAAAmB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAY,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAhBTC,EAAG,mBAAmBrD,EAAMsD,OAAO;AAAA,QAAE,0BAA0BjC,EAAAA;AAAAA,MAAa,CAAG,GAACkC,IAAS5B,EAAAA;AAAOyB,aAAAA,MAAAD,EAAAK,KAAAC,EAAA3B,GAAAqB,EAAAK,IAAAJ,CAAA,GAAAD,EAAAO,IAAAC,EAAA7B,GAAAyB,GAAAJ,EAAAO,CAAA,GAAAP;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAhC;AAAAA,MAAAkC,GAAAlC;AAAAA,IAAAA,CAAA,GAAAM;AAAAA,EAAA,GAAA;AAqBjH;"}

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

@@ -1,27 +1,31 @@
-import { use as m, spread as u, mergeProps as c, insert as t, createComponent as d, template as o } from "solid-js/web";
+import { use as d, spread as u, mergeProps as m, insert as t, createComponent as c, template as i } 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);
+var g = /* @__PURE__ */ i("<li class=smwb-list__subheader>"), w = /* @__PURE__ */ i("<ul>");
+function y(o) {
+  const [e, s] = p(o, ["class", "dense", "subheader", "children", "ref", "data-testid"]), l = f(() => e.subheader);
   return (() => {
-    var r = w(), l = b(e.ref);
-    return typeof l == "function" && m(l, r), u(r, c(a, {
-      "data-testid": "list",
-      role: "list",
+    var r = w(), n = b(e.ref);
+    return typeof n == "function" && d(n, r), u(r, m(s, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "list";
+      },
+      get role() {
+        return s.role ?? "list";
+      },
       get class() {
         return _("smwb-list", {
           "smwb-list_dense": e.dense
         }, e.class);
       }
-    }), !1, !0), t(r, d(h, {
+    }), !1, !0), t(r, c(h, {
       get when() {
-        return s();
+        return l();
       },
       get children() {
-        var n = g();
-        return t(n, s), n;
+        var a = g();
+        return t(a, l), a;
       }
     }), null), t(r, () => e.children, null), r;
   })();

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, 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;"}
+{"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  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string | undefined;\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\", \"data-testid\"]);\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={local[\"data-testid\"] ?? \"list\"}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.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","role","cn","dense","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$"],"mappings":";;;;;AAcO,SAASA,EAAKC,GAA4C;AAC/D,QAAM,CAACC,GAAOC,CAAI,IAAIC,EAAWH,GAAO,CAAC,SAAS,SAAS,aAAa,YAAY,OAAO,aAAa,CAAC,GAGnGI,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,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAM;AAAA,MAAA,IAE3Ca,OAAI;AAAA,eAAEZ,EAAKY,QAAQ;AAAA,MAAM;AAAA,MAAA,IAAA,QAAA;AAAA,eAClBC,EAAG,aAAa;AAAA,UAAE,mBAAmBd,EAAMe;AAAAA,QAAAA,GAASf,EAAMgB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAAa,EAEtEC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjB,EAAAA;AAAAA,MAAW;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAiB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACalB,CAAS,GAAAkB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAZ,GAAA,MAE5CL,EAAMI,UAAQ,IAAA,GAAAC;AAAAA,EAAA,GAAA;AAGrB;"}

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

@@ -1,35 +1,74 @@
-import { addEventListener as v, use as k, insert as s, effect as u, setAttribute as d, className as w, template as p, delegateEvents as y } from "solid-js/web";
-import { splitProps as A } from "solid-js";
-import C from "clsx";
-import { mergeRefs as g } from "../../../primitives/mergeRefs.js";
-import { callHandler as x } from "../../../primitives/callHandler.js";
-var h = /* @__PURE__ */ p("<li role=listitem data-testid=list-item><span class=smwb-list__item__start></span><span class=smwb-list__item__main></span><span class=smwb-list__item__end>");
-function H(b) {
-  const [e] = A(b, ["class", "children", "disabled", "selected", "dense", "divider", "startAdornment", "endAdornment", "onClick", "ref"]), l = () => !!e.onClick && !e.disabled;
+import { use as k, insert as n, createComponent as A, effect as w, setAttribute as l, memo as C, className as E, template as d, delegateEvents as L } from "solid-js/web";
+import { splitProps as x, Show as D } from "solid-js";
+import R from "clsx";
+import { mergeRefs as T } from "../../../primitives/mergeRefs.js";
+import { callHandler as h } from "../../../primitives/callHandler.js";
+import { resolveLinkRel as H, resolveLinkTarget as I } from "../../../utils/linkAttrs.js";
+var K = /* @__PURE__ */ d("<span class=smwb-list__item__start>"), N = /* @__PURE__ */ d("<span class=smwb-list__item__main>"), P = /* @__PURE__ */ d("<a class=smwb-list__item__link data-testid=list-item-link>"), g = /* @__PURE__ */ d("<span class=smwb-list__item__end>"), S = /* @__PURE__ */ d("<li role=listitem data-testid=list-item>");
+function J($) {
+  const [e] = x($, ["class", "children", "disabled", "selected", "dense", "divider", "startAdornment", "endAdornment", "href", "target", "rel", "onClick", "ref"]), c = () => !!e.onClick && !e.disabled && !e.href, v = () => I(e.target);
+  let m;
+  const _ = () => [(() => {
+    var r = K();
+    return n(r, () => e.startAdornment), r;
+  })(), (() => {
+    var r = N();
+    return n(r, () => e.children), r;
+  })()], p = (r) => {
+    e.disabled || e.href && !m?.contains(r.target) || h(e.onClick, r);
+  }, y = (r) => {
+    c() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), h(e.onClick, r));
+  };
   return (() => {
-    var i = h(), r = i.firstChild, n = r.nextSibling, f = n.nextSibling;
-    v(i, "keydown", l() ? (t) => {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), x(e.onClick, t));
-    } : void 0, !0), v(i, "click", e.disabled ? void 0 : e.onClick, !0);
-    var a = g(e.ref);
-    return typeof a == "function" && k(a, i), s(r, () => e.startAdornment), s(n, () => e.children), s(f, () => e.endAdornment), u((t) => {
-      var o = l() ? 0 : void 0, m = e.disabled || void 0, c = e.selected || void 0, _ = C("smwb-list__item", e.class, {
+    var r = S();
+    r.$$keydown = y, r.$$click = p;
+    var f = T(e.ref);
+    return typeof f == "function" && k(f, r), n(r, A(D, {
+      get when() {
+        return e.href;
+      },
+      get fallback() {
+        return [C(_), (() => {
+          var t = g();
+          return n(t, () => e.endAdornment), t;
+        })()];
+      },
+      get children() {
+        return [(() => {
+          var t = P(), s = m;
+          return typeof s == "function" ? k(s, t) : m = t, n(t, _), w((i) => {
+            var a = e.selected ? "page" : void 0, o = e.disabled ? void 0 : e.href, b = v(), u = H(e.rel, v());
+            return a !== i.e && l(t, "aria-current", i.e = a), o !== i.t && l(t, "href", i.t = o), b !== i.a && l(t, "target", i.a = b), u !== i.o && l(t, "rel", i.o = u), i;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          }), t;
+        })(), (() => {
+          var t = g();
+          return n(t, () => e.endAdornment), t;
+        })()];
+      }
+    })), w((t) => {
+      var s = c() ? 0 : void 0, i = e.disabled || void 0, a = !e.href && e.selected || void 0, o = R("smwb-list__item", e.class, {
         "smwb-disabled": e.disabled,
         "smwb-selected": e.selected,
+        "smwb-list__item_link": !!e.href,
         "smwb-list__item_dense": e.dense,
         "smwb-list__item_divider": e.divider
       });
-      return o !== t.e && d(i, "tabindex", t.e = o), m !== t.t && d(i, "aria-disabled", t.t = m), c !== t.a && d(i, "aria-selected", t.a = c), _ !== t.o && w(i, t.o = _), t;
+      return s !== t.e && l(r, "tabindex", t.e = s), i !== t.t && l(r, "aria-disabled", t.t = i), a !== t.a && l(r, "aria-selected", t.a = a), o !== t.o && E(r, t.o = o), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), i;
+    }), r;
   })();
 }
-y(["click", "keydown"]);
+L(["click", "keydown"]);
 export {
-  H as ListItem
+  J as ListItem
 };
 //# sourceMappingURL=listItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={local.selected || undefined}\n      onClick={local.disabled ? undefined : local.onClick}\n      onKeyDown={\n        interactive()\n          ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                callHandler(\n                  local.onClick,\n                  event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element }\n                );\n              }\n            }\n          : undefined\n      }\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n      <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"names":["ListItem","props","local","splitProps","interactive","onClick","disabled","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_$addEventListener","event","key","preventDefault","callHandler","undefined","_ref$","mergeRefs","ref","_$use","_$insert","startAdornment","children","endAdornment","_$effect","_p$","_v$","_v$2","_v$3","selected","_v$4","cn","class","dense","divider","e","_$setAttribute","t","a","o","_$className","_$delegateEvents"],"mappings":";;;;;;AAmBO,SAASA,EAASC,GAAgD;AACvE,QAAM,CAACC,CAAK,IAAIC,EAAWF,GAAO,CAChC,SACA,YACA,YACA,YACA,SACA,WACA,kBACA,gBACA,WACA,KAAK,CACN,GAEKG,IAAcA,MAAe,CAAC,CAACF,EAAMG,WAAW,CAACH,EAAMI;AAE7D,UAAA,MAAA;AAAA,QAAAC,IAAAC,KAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAG,aAAAC,IAAAF,EAAAC;AAAAE,IAAAA,EAAAP,GAAA,WASMH,EAAAA,IACKW,CAAAA,MAAU;AACT,OAAIA,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,SACzCD,EAAME,eAAAA,GACNC,EACEhB,EAAMG,SACNU,CACF;AAAA,IAEJ,IACAI,QAAS,EAAA,GAAAL,EAAAP,GAAA,SAZNL,EAAMI,WAAWa,SAAYjB,EAAMG,SAAO,EAAA;AAAA,QAAAe,IAL9CC,EAAUnB,EAAMoB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAb,CAAA,GAAAiB,EAAAf,GAAA,MA2BaP,EAAMuB,cAAc,GAAAD,EAAAb,GAAA,MACrBT,EAAMwB,QAAQ,GAAAF,EAAAX,GAAA,MACfX,EAAMyB,YAAY,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IA3B5C1B,MAAgB,IAAIe,QAASY,IACxB7B,EAAMI,YAAYa,QAASa,IAC3B9B,EAAM+B,YAAYd,QAASe,IAenCC,EAAG,mBAAmBjC,EAAMkC,OAAO;AAAA,QACxC,iBAAiBlC,EAAMI;AAAAA,QACvB,iBAAiBJ,EAAM+B;AAAAA,QACvB,yBAAyB/B,EAAMmC;AAAAA,QAC/B,2BAA2BnC,EAAMoC;AAAAA,MAAAA,CAClC;AAACR,aAAAA,MAAAD,EAAAU,KAAAC,EAAAjC,GAAA,YAAAsB,EAAAU,IAAAT,CAAA,GAAAC,MAAAF,EAAAY,KAAAD,EAAAjC,GAAA,iBAAAsB,EAAAY,IAAAV,CAAA,GAAAC,MAAAH,EAAAa,KAAAF,EAAAjC,GAAA,iBAAAsB,EAAAa,IAAAV,CAAA,GAAAE,MAAAL,EAAAc,KAAAC,EAAArC,GAAAsB,EAAAc,IAAAT,CAAA,GAAAL;AAAAA,IAAA,GAAA;AAAA,MAAAU,GAAApB;AAAAA,MAAAsB,GAAAtB;AAAAA,MAAAuB,GAAAvB;AAAAA,MAAAwB,GAAAxB;AAAAA,IAAAA,CAAA,GAAAZ;AAAAA,EAAA,GAAA;AAQR;AAEwBsC,EAAA,CAAA,SAAA,SAAA,CAAA;"}
+{"version":3,"file":"listItem.js","sources":["../../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  class?: string;\n  /**\n   * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\n   * with `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\n   * stays `aria-selected`.\n   */\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: JSX.Element;\n  /**\n   * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n   * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.\n   */\n  endAdornment?: JSX.Element;\n  /**\n   * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\n   * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\n   * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the\n   * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\n   * Alt, or a button other than the main one) to the browser, as a router's `Link` does.\n   */\n  href?: string;\n  /**\n   * Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\n   * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\n   * string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\n   * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  /**\n   * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\n   * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\n   * own, the link is.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLLIElement, MouseEvent>;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport function ListItem(props: ParentProps<ListItemProps>): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"selected\",\n    \"dense\",\n    \"divider\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"onClick\",\n    \"ref\",\n  ]);\n\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = (): boolean => !!local.onClick && !local.disabled && !local.href;\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n\n  let linkEl: HTMLAnchorElement | undefined;\n\n  // The start and the main part, which a link row puts in the anchor.\n  const content = (): JSX.Element => (\n    <>\n      <span class=\"smwb-list__item__start\">{local.startAdornment}</span>\n      <span class=\"smwb-list__item__main\">{local.children}</span>\n    </>\n  );\n\n  // Solid binds event handlers once, so both are always attached and read the\n  // props themselves: an item can be disabled, or get another onClick, after it\n  // renders.\n  const onClick: JSX.EventHandler<HTMLLIElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    // The end adornment of a link row is beside the link, and its own clicks are not the row's.\n    if (local.href && !linkEl?.contains(event.target as Node)) return;\n    callHandler(local.onClick, event);\n  };\n  const onKeyDown: JSX.EventHandler<HTMLLIElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLLIElement; target: Element });\n    }\n  };\n\n  return (\n    <li\n      ref={mergeRefs(local.ref)}\n      role=\"listitem\"\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      aria-selected={(!local.href && local.selected) || undefined}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      class={cn(\"smwb-list__item\", local.class, {\n        \"smwb-disabled\": local.disabled,\n        \"smwb-selected\": local.selected,\n        \"smwb-list__item_link\": !!local.href,\n        \"smwb-list__item_dense\": local.dense,\n        \"smwb-list__item_divider\": local.divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <Show\n        when={local.href}\n        fallback={\n          <>\n            {content()}\n            <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n          </>\n        }\n      >\n        <a\n          ref={linkEl}\n          class=\"smwb-list__item__link\"\n          data-testid=\"list-item-link\"\n          aria-current={local.selected ? \"page\" : undefined}\n          // A disabled link has no href, so it is no link to follow or to focus.\n          href={local.disabled ? undefined : local.href}\n          target={linkTarget()}\n          rel={resolveLinkRel(local.rel, linkTarget())}\n        >\n          {content()}\n        </a>\n        <span class=\"smwb-list__item__end\">{local.endAdornment}</span>\n      </Show>\n    </li>\n  );\n}\n\nexport default ListItem;\n"],"names":["ListItem","props","local","splitProps","interactive","onClick","disabled","href","linkTarget","resolveLinkTarget","target","linkEl","content","_el$","_tmpl$","_$insert","startAdornment","_el$2","_tmpl$2","children","event","contains","callHandler","onKeyDown","key","preventDefault","_el$3","_tmpl$5","$$keydown","$$click","_ref$","mergeRefs","ref","_$use","_$createComponent","Show","when","fallback","_$memo","_el$6","_tmpl$4","endAdornment","_el$4","_tmpl$3","_ref$2","_$effect","_p$","_v$","selected","undefined","_v$2","_v$3","_v$4","resolveLinkRel","rel","e","_$setAttribute","t","a","o","_el$5","_v$5","_v$6","_v$7","_v$8","cn","class","dense","divider","_$className","_$delegateEvents"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-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 { use as $, spread as g, mergeProps as w, insert as a, createComponent as d, 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 _ } 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> <!> ");
@@ -11,22 +11,22 @@ const H = [{
   color: "success"
 }];
 function A(n, m) {
-  let e = "neutral", a = -1 / 0;
+  let e = "neutral", o = -1 / 0;
   for (const t of m)
-    n >= t.from && t.from >= a && (e = t.color, a = t.from);
+    n >= t.from && t.from >= o && (e = t.color, o = 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 = () => {
+  }, n), [e, o] = T(m, ["class", "value", "max", "label", "text", "ofLabel", "thresholds", "color", "hideText", "ref", "data-testid"]), t = () => e.max > 0 ? Math.min(1, Math.max(0, e.value / e.max)) : 0, h = () => 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, {
+    return typeof u == "function" && $(u, r), g(r, w(o, {
       role: "meter",
       get "aria-label"() {
         return e.label;
@@ -41,29 +41,31 @@ function j(n) {
       get "aria-valuetext"() {
         return `${e.value} ${e.ofLabel} ${e.max}`;
       },
-      "data-testid": "meter",
+      get "data-testid"() {
+        return e["data-testid"] ?? "meter";
+      },
       get class() {
-        return P("smwb-meter", `smwb-meter_color-${d()}`, {
+        return P("smwb-meter", `smwb-meter_color-${h()}`, {
           "smwb-meter_bar-only": e.hideText
         }, e.class);
       }
-    }), !1, !0), o(r, _(h, {
+    }), !1, !0), a(r, d(_, {
       get when() {
         return !e.hideText;
       },
       get children() {
         var i = M();
-        return o(i, _(h, {
+        return a(i, d(_, {
           get when() {
             return c() !== void 0;
           },
           get fallback() {
             return [(() => {
               var l = k();
-              return o(l, () => e.value), l;
+              return a(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;
+              return f.nextSibling, a(l, () => e.ofLabel, f), a(l, () => e.max, null), l;
             })()];
           },
           get children() {