@smwb/ui-solid 0.11.2 → 0.12.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"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"],"mappings":"AAAA,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAA+B;AACxC,SAAS,iBAA2B;AAG7B,SAAS,WAAW,MAAsB;AAC/C,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,QAAM,QAAQ,CAAC,SAAsC,OAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,KAAK,KAAM;AAC1F,UAAQ,MAAM,MAAM,CAAC,CAAC,KAAK,MAAM,SAAS,IAAI,MAAM,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAY;AAClG;AAMO,SAAS,YAAY,MAAsB;AAChD,MAAI,OAAO;AACX,aAAW,QAAQ,KAAM,QAAQ,OAAO,MAAM,KAAK,YAAY,CAAC,KAAK,OAAQ;AAC7E,SAAO,OAAO,OAAO,GAAG;AAC1B;AAwBA,SAAS,WAAW,OAAyD;AAC3E,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,SACE,CAAC,KAAK,MAAM,yBAAyB;AAAA,MACnC,CAAC,KAAK,MAAM,0BAA0B,MAAM,KAAK,EAAhD,KAAuD;AAAA,MACxD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,0BAA0B,KAAK,EAAE,EAA5C,KAAmD;AAAA,MACtD,EAFC,KAEM;AAAA,IACT,EALC;AAOL;AAGO,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,MAAM,GAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,WAAW,MAAM,OAAO,MAAM;AAAA,QAC1B;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,OAAO,MAAM,UAAU,MAAM,OAAO;AAAA,IACpC,MAAM,MAAM,WAAW,CAAC,MAAM,OAAO,QAAQ;AAAA,IAC7C,YAAY,MAAM,UAAU,MAAM,OAAO;AAAA,IACzC,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,yBAAyB,CAAC,CAAC,MAAM,MAAM,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GAChI;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,MAAM,MAAM;AAAA,IACZ,KAAK,MAAM;AAAA,IACX,OAAO,MAAM,SAAS,YAAY,MAAM,aAAa,MAAM,IAAI;AAAA,IAC/D,YAAY;AAAA,GACb;AAAA,SACE,WAAW,MAAM,IAAI,EAAE;AAAA,MAC1B,EARC,OAQQ;AAAA,MACT,CAAC,KAAK,MAAM,CAAC,MAAM,SAAS;AAAA,QAC1B,CAAC,WAAW,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,MACpD,EAFC,KAEM;AAAA,IACT,EAvBC;AAyBL;AAEA,IAAO,qBAAQ;","names":[],"file":"personChip.jsx"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"ref\"]);\n  return (\n    <td {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-table__cell\", local.class)} align={local.cellAlign || \"left\"}>\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAO7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,KAAK,CAAC;AAClF,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,oBAAoB,MAAM,KAAK,GAAG,OAAO,MAAM,aAAa,QAAQ;AAAA,OACpH,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableCell(props: ParentProps<TableCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"children\", \"cellAlign\", \"class\", \"label\", \"ref\"]);\n  return (\n    <td\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-table__cell\", local.class)}\n      align={local.cellAlign || \"left\"}\n      data-label={local.label}\n    >\n      {local.children}\n    </td>\n  );\n}\n\nexport default TableCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAS7B,SAAS,UAAU,OAAiD;AACzE,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,aAAa,SAAS,SAAS,KAAK,CAAC;AAC3F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,oBAAoB,MAAM,KAAK;AAAA,IACzC,OAAO,MAAM,aAAa;AAAA,IAC1B,YAAY,MAAM;AAAA,GACnB;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EARC;AAUL;AAEA,IAAO,oBAAQ;","names":[],"file":"tableCell.jsx"}

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

@@ -2,6 +2,34 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+const INTERACTIVE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((role) => `[role='${role}']`)
+].join(",");
 function TableHeadCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
   const [local, rest] = splitProps(merged, [
@@ -19,11 +47,17 @@ function TableHeadCell(props) {
   const ariaSort = () => local.sortable ? direction() === "asc" ? "ascending" : direction() === "desc" ? "descending" : "none" : void 0;
   const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "unfold_more";
   const onKeyDown = (event) => {
-    if (local.sortable && local.onSort && (event.key === "Enter" || event.key === " ")) {
+    if (!local.sortable || event.target !== event.currentTarget) return;
+    if (local.onSort && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       local.onSort();
     }
   };
+  const onClick = (event) => {
+    if (!local.sortable || event.defaultPrevented) return;
+    if (event.target?.closest(INTERACTIVE) !== event.currentTarget) return;
+    local.onSort?.();
+  };
   return <th
     {...rest}
     ref={mergeRefs(local.ref)}
@@ -36,8 +70,8 @@ function TableHeadCell(props) {
   >
       <span
     class="smwb-head-cell__content"
-    onClick={local.sortable ? () => local.onSort?.() : void 0}
-    onKeyDown={local.sortable ? onKeyDown : void 0}
+    onClick={onClick}
+    onKeyDown={onKeyDown}
     role={local.sortable ? "button" : void 0}
     tabindex={local.sortable ? 0 : void 0}
   >

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /**\n   * Enables the interactive sort affordance with keyboard/aria support.\n   *\n   * The children sit inside the sort control, and controls among them keep\n   * their own input: Enter and Space sort only while the sort control itself\n   * has focus, and a click sorts unless it lands in a nested control (input,\n   * button, link, label, anything focusable) or in a portal. Content that is not\n   * a control, such as click-to-edit text, keeps its click from sorting by\n   * calling `preventDefault()` on it. A nested control's name, or its value,\n   * becomes part of the sort control's accessible name.\n   */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\n/**\n * Whatever takes a click of its own inside the sort control. The control\n * matches too (`role=\"button\"`), so it is the nearest match for a click on the\n * header's text or marker, and only then does the click sort.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  // Solid binds event handlers once, so both are always attached and check\n  // `sortable` themselves: a cell can turn sortable, or stop, after it renders.\n\n  // Keys typed into an input or pressed on a button inside bubble up here too;\n  // only the control's own keys sort.\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!local.sortable || event.target !== event.currentTarget) return;\n    if (local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  // A click sorts only when the control is the nearest thing that takes it. A\n  // click in a Portal rendered inside fails that too: Solid delivers it here,\n  // though it landed outside the control.\n  const onClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (!local.sortable || event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    local.onSort?.();\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAkCpC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,IAAI,CAAC,SAAS,UAAU,IAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAEH,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAOnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,CAAC,MAAM,YAAY,MAAM,WAAW,MAAM,cAAe;AAC7D,QAAI,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAChE,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAKA,QAAM,UAAyD,CAAC,UAAU;AACxE,QAAI,CAAC,MAAM,YAAY,MAAM,iBAAkB;AAC/C,QAAK,MAAM,QAA2B,QAAQ,WAAW,MAAM,MAAM,cAAe;AACpF,UAAM,SAAS;AAAA,EACjB;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}

package/dist/headless/source/components/dataDisplay/thumbCard/thumbCard.jsx

@@ -1,4 +1,4 @@
-import { Show, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, children, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import cn from "clsx";
 import { createFloating } from "../../../primitives/createFloating";
@@ -21,6 +21,9 @@ function ThumbCard(props) {
     "class",
     "ref"
   ]);
+  const topStart = children(() => local.topStart);
+  const topEnd = children(() => local.topEnd);
+  const caption = children(() => local.caption);
   const floating = createFloating({ placement: () => "right" });
   const [previewOpen, setPreviewOpen] = createSignal(false);
   let hoverTimer;
@@ -66,15 +69,15 @@ function ThumbCard(props) {
   >
       <div class="smwb-thumb-card__media">
         <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
-        <Show when={local.topStart}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{local.topStart}</div>
+        <Show when={topStart()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{topStart()}</div>
         </Show>
-        <Show when={local.topEnd}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{local.topEnd}</div>
+        <Show when={topEnd()}>
+          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{topEnd()}</div>
         </Show>
       </div>
-      <Show when={local.caption}>
-        <div class="smwb-thumb-card__caption">{local.caption}</div>
+      <Show when={caption()}>
+        <div class="smwb-thumb-card__caption">{caption()}</div>
       </Show>
       <Show when={previewOpen() && !isServer}>
         <Portal>

package/dist/headless/source/components/dataDisplay/thumbCard/thumbCard.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, children, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // (The hover preview is read on hover only, after hydration.)\n  const topStart = children(() => local.topStart);\n  const topEnd = children(() => local.topEnd);\n  const caption = children(() => local.caption);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={topStart()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart()}</div>\n        </Show>\n        <Show when={topEnd()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd()}</div>\n        </Show>\n      </div>\n      <Show when={caption()}>\n        <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"mappings":"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","names":[],"file":"thumbCard.jsx"}

package/dist/headless/source/components/dataDisplay/timeline/index.js

@@ -0,0 +1,8 @@
+import { Timeline, TimelineGroup, TimelineItem, default as default2 } from "./timeline";
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/dataDisplay/timeline/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/timeline/index.ts"],
+  "sourcesContent": ["export { Timeline, TimelineGroup, TimelineItem, default } from \"./timeline\";\nexport type { TimelineProps, TimelineGroupProps, TimelineItemProps, TimelineTone } from \"./timeline\";\n"],
+  "mappings": "AAAA,SAAS,UAAU,eAAe,cAAc,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/headless/source/components/dataDisplay/timeline/timeline.jsx

@@ -0,0 +1,64 @@
+import { Show, children, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Timeline(props) {
+  const [local, rest] = splitProps(props, ["class", "dense", "stickyLabels", "children", "ref"]);
+  return <ol
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn(
+      "smwb-timeline",
+      { "smwb-timeline_dense": local.dense, "smwb-timeline_sticky-labels": local.stickyLabels },
+      local.class
+    )}
+  >
+      {local.children}
+    </ol>;
+}
+function TimelineGroup(props) {
+  const [local, rest] = splitProps(props, ["class", "label", "children", "ref"]);
+  return <li {...rest} ref={mergeRefs(local.ref)} class={cn("smwb-timeline__group", local.class)}>
+      <div class="smwb-timeline__label">{local.label}</div>
+      <ol class="smwb-timeline__items">{local.children}</ol>
+    </li>;
+}
+function TimelineItem(props) {
+  const merged = mergeProps({ tone: "neutral" }, props);
+  const [local, rest] = splitProps(merged, ["class", "title", "meta", "time", "icon", "tone", "children", "ref"]);
+  const meta = children(() => local.meta);
+  const time = children(() => local.time);
+  const icon = children(() => local.icon);
+  const content = children(() => local.children);
+  return <li
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-timeline__item", `smwb-timeline__item_tone-${local.tone}`, local.class)}
+  >
+      <span class="smwb-timeline__mark" aria-hidden="true">
+        <Show when={icon()} fallback={<span class="smwb-timeline__dot" />}>
+          {(resolved) => typeof resolved() === "string" ? <Icon name={resolved()} size={16} /> : resolved()}
+        </Show>
+      </span>
+      <div class="smwb-timeline__body">
+        <div class="smwb-timeline__title">{local.title}</div>
+        <Show when={meta()}>
+          <div class="smwb-timeline__meta">{meta()}</div>
+        </Show>
+        <Show when={content()}>
+          <div class="smwb-timeline__content">{content()}</div>
+        </Show>
+      </div>
+      <Show when={time()}>
+        <div class="smwb-timeline__time">{time()}</div>
+      </Show>
+    </li>;
+}
+var timeline_default = Timeline;
+export {
+  Timeline,
+  TimelineGroup,
+  TimelineItem,
+  timeline_default as default
+};
+//# sourceMappingURL=timeline.jsx.map

package/dist/headless/source/components/dataDisplay/timeline/timeline.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/timeline/timeline.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TimelineTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {\n  /** Tighter rows, for side panels. */\n  dense?: boolean;\n  /** Keep a group's label in view while its events scroll past (in a scrolling container). */\n  stickyLabels?: boolean;\n  ref?: Ref<HTMLOListElement>;\n}\n\nexport interface TimelineGroupProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** What groups the events — a day, a week, a stage. */\n  label: JSX.Element;\n  ref?: Ref<HTMLLIElement>;\n}\n\nexport interface TimelineItemProps extends Omit<JSX.HTMLAttributes<HTMLLIElement>, \"title\"> {\n  /** The event itself: a line of text, usually a link. */\n  title: JSX.Element;\n  /** A second line: who, what kind, where. */\n  meta?: JSX.Element;\n  /** When: a time or a date, at the end of the row. */\n  time?: JSX.Element;\n  /** The event's mark on the line: a Material Symbols name or an element. A dot without it. */\n  icon?: string | JSX.Element;\n  /** Colour of the mark. */\n  tone?: TimelineTone;\n  ref?: Ref<HTMLLIElement>;\n}\n\n/**\n * Events on a line, newest or oldest first as given: TimelineItem children,\n * optionally grouped by TimelineGroup (a day, a week).\n */\nexport function Timeline(props: ParentProps<TimelineProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"dense\", \"stickyLabels\", \"children\", \"ref\"]);\n  return (\n    <ol\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-timeline\",\n        { \"smwb-timeline_dense\": local.dense, \"smwb-timeline_sticky-labels\": local.stickyLabels },\n        local.class\n      )}\n    >\n      {local.children}\n    </ol>\n  );\n}\n\n/** A labelled run of events: the label, then its TimelineItem children on the line. */\nexport function TimelineGroup(props: ParentProps<TimelineGroupProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"class\", \"label\", \"children\", \"ref\"]);\n  return (\n    <li {...rest} ref={mergeRefs(local.ref)} class={cn(\"smwb-timeline__group\", local.class)}>\n      <div class=\"smwb-timeline__label\">{local.label}</div>\n      <ol class=\"smwb-timeline__items\">{local.children}</ol>\n    </li>\n  );\n}\n\n/** One event: its mark on the line, the title and meta lines, the time; children below. */\nexport function TimelineItem(props: ParentProps<TimelineItemProps>): JSX.Element {\n  const merged = mergeProps({ tone: \"neutral\" as TimelineTone }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"meta\", \"time\", \"icon\", \"tone\", \"children\", \"ref\"]);\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 meta = children(() => local.meta);\n  const time = children(() => local.time);\n  const icon = children(() => local.icon);\n  const content = children(() => local.children);\n\n  return (\n    <li\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-timeline__item\", `smwb-timeline__item_tone-${local.tone}`, local.class)}\n    >\n      <span class=\"smwb-timeline__mark\" aria-hidden=\"true\">\n        <Show when={icon()} fallback={<span class=\"smwb-timeline__dot\" />}>\n          {(resolved) => (typeof resolved() === \"string\" ? <Icon name={resolved() as string} size={16} /> : resolved())}\n        </Show>\n      </span>\n      <div class=\"smwb-timeline__body\">\n        <div class=\"smwb-timeline__title\">{local.title}</div>\n        <Show when={meta()}>\n          <div class=\"smwb-timeline__meta\">{meta()}</div>\n        </Show>\n        <Show when={content()}>\n          <div class=\"smwb-timeline__content\">{content()}</div>\n        </Show>\n      </div>\n      <Show when={time()}>\n        <div class=\"smwb-timeline__time\">{time()}</div>\n      </Show>\n    </li>\n  );\n}\n\nexport default Timeline;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAoC7B,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,gBAAgB,YAAY,KAAK,CAAC;AAC7F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,EAAE,uBAAuB,MAAM,OAAO,+BAA+B,MAAM,aAAa;AAAA,MACxF,MAAM;AAAA,IACR;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAVC;AAYL;AAGO,SAAS,cAAc,OAAqD;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,YAAY,KAAK,CAAC;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,OAAO,GAAG,wBAAwB,MAAM,KAAK,GAAG;AAAA,MACvF,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,MACrD,CAAC,GAAG,MAAM,wBAAwB,MAAM,SAAS,EAAhD,GAAqD;AAAA,IACxD,EAHC;AAKL;AAGO,SAAS,aAAa,OAAoD;AAC/E,QAAM,SAAS,WAAW,EAAE,MAAM,UAA0B,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,YAAY,KAAK,CAAC;AAI9G,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,uBAAuB,4BAA4B,MAAM,IAAI,IAAI,MAAM,KAAK;AAAA,GACvF;AAAA,MACC,CAAC,KAAK,MAAM,sBAAsB,YAAY,OAAO;AAAA,QACnD,CAAC,KAAK,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,MAAM,qBAAqB,IAAI;AAAA,WAChE,CAAC,aAAc,OAAO,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,SAAS,GAAa,MAAM,IAAI,KAAK,SAAS,EAAG;AAAA,QAChH,EAFC,KAEM;AAAA,MACT,EAJC,KAIM;AAAA,MACP,CAAC,IAAI,MAAM,sBAAsB;AAAA,QAC/B,CAAC,IAAI,MAAM,wBAAwB,MAAM,MAAM,EAA9C,IAAoD;AAAA,QACrD,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,UAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,QACjD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,0BAA0B,QAAQ,EAAE,EAA9C,IAAoD;AAAA,QACvD,EAFC,KAEM;AAAA,MACT,EARC,IAQK;AAAA,MACN,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,IAAI,MAAM,uBAAuB,KAAK,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,mBAAQ;","names":[],"file":"timeline.jsx"}

package/dist/headless/source/components/dataDisplay/typography/typography.jsx

@@ -9,8 +9,9 @@ const defaultTag = {
   h4: "h4",
   h5: "h5",
   h6: "h6",
-  subtitle1: "h6",
-  subtitle2: "h6",
+  // A subtitle is not a heading: as h6 it would break the page's outline.
+  subtitle1: "p",
+  subtitle2: "p",
   body1: "p",
   body2: "p",
   caption: "span",
@@ -25,11 +26,21 @@ function Typography(props) {
     "align",
     "gutterBottom",
     "noWrap",
+    "lines",
+    "tabularNums",
     "component",
     "class",
+    "style",
     "children",
     "ref"
   ]);
+  const clamped = () => local.lines !== void 0 && local.lines > 0;
+  const style = () => {
+    if (!clamped()) return local.style;
+    const lines = String(local.lines);
+    if (typeof local.style === "string") return `${local.style};--smwb-typography-lines:${lines}`;
+    return { ...local.style, "--smwb-typography-lines": lines };
+  };
   return <Dynamic
     component={local.component ?? defaultTag[local.variant]}
     ref={mergeRefs(local.ref)}
@@ -40,10 +51,13 @@ function Typography(props) {
       local.align && `smwb-typography_align-${local.align}`,
       {
         "smwb-typography_gutter": local.gutterBottom,
-        "smwb-typography_nowrap": local.noWrap
+        "smwb-typography_nowrap": local.noWrap,
+        "smwb-typography_clamp": clamped(),
+        "smwb-typography_tabular-nums": local.tabularNums
       },
       local.class
     )}
+    style={style()}
     {...rest}
   >
       {local.children}