@smwb/ui-react 2.6.3 → 2.7.0

package/dist/components/dataDisplay/meter/meter.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export type MeterColor = "neutral" | "primary" | "info" | "success" | "warning" | "error";
+/** From this share of `max` (0–1) on, the meter takes `color`. */
+export interface MeterThreshold {
+    from: number;
+    color: MeterColor;
+}
+/** Info while under way, success when complete. */
+export declare const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[];
+export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    className?: string;
+    /** How many are done (X of Y). */
+    value: number;
+    /** How many there are in all (X of Y). */
+    max: number;
+    /** What is measured — the accessible name, e.g. "Requirements accepted". */
+    label: string;
+    /** Visible text instead of "X of Y": markup, or a function of (value, max). */
+    text?: ReactNode | ((value: number, max: number) => ReactNode);
+    /** The word between the figures in the default text and in aria-valuetext. */
+    ofLabel?: string;
+    /** Colour by share of `max`: the last threshold the share reaches wins. */
+    thresholds?: readonly MeterThreshold[];
+    /** A fixed colour, instead of the thresholds. */
+    color?: MeterColor;
+    /** The bar only; the text stays available to assistive technology. */
+    hideText?: boolean;
+}
+/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */
+export declare function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor;
+/** A share of a whole, "X of Y": a bar and the figures beside it, coloured by thresholds. */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export default Meter;

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

@@ -0,0 +1,62 @@
+import { jsxs as n, jsx as m, Fragment as u } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/meter/meter.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import w from "react";
+import b from "clsx";
+const N = [
+  { from: 0, color: "info" },
+  { from: 1, color: "success" }
+];
+function M(i, o) {
+  let e = "neutral", r = -1 / 0;
+  for (const t of o)
+    i >= t.from && t.from >= r && (e = t.color, r = t.from);
+  return e;
+}
+const j = w.forwardRef(function({
+  className: o,
+  value: e,
+  max: r,
+  label: t,
+  text: a,
+  ofLabel: l = "of",
+  thresholds: d = N,
+  color: s,
+  hideText: c,
+  ..._
+}, h) {
+  const f = r > 0 ? Math.min(1, Math.max(0, e / r)) : 0, p = s != null ? s : M(f, d);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ..._,
+      ref: h,
+      role: "meter",
+      "aria-label": t,
+      "aria-valuenow": e,
+      "aria-valuemin": 0,
+      "aria-valuemax": r,
+      "aria-valuetext": `${e} ${l} ${r}`,
+      "data-testid": "meter",
+      className: b("smwb-meter", `smwb-meter_color-${p}`, { "smwb-meter_bar-only": c }, o),
+      children: [
+        /* @__PURE__ */ m("span", { className: "smwb-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ m("span", { className: "smwb-meter__fill", style: { width: `${f * 100}%` } }) }),
+        c ? null : /* @__PURE__ */ m("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ n(u, { children: [
+          /* @__PURE__ */ m("b", { className: "smwb-meter__value", children: e }),
+          /* @__PURE__ */ n("span", { className: "smwb-meter__of", children: [
+            " ",
+            l,
+            " ",
+            r
+          ] })
+        ] }) : typeof a == "function" ? a(e, r) : a })
+      ]
+    }
+  );
+});
+export {
+  N as DEFAULT_METER_THRESHOLDS,
+  j as Meter,
+  M as meterColor
+};
+//# sourceMappingURL=meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sources":["../../../../src/components/dataDisplay/meter/meter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type MeterColor = \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n/** From this share of `max` (0–1) on, the meter takes `color`. */\nexport interface MeterThreshold {\n  from: number;\n  color: MeterColor;\n}\n\n/** Info while under way, success when complete. */\nexport const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[] = [\n  { from: 0, color: \"info\" },\n  { from: 1, color: \"success\" },\n];\n\nexport interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  className?: string;\n  /** How many are done (X of Y). */\n  value: number;\n  /** How many there are in all (X of Y). */\n  max: number;\n  /** What is measured — the accessible name, e.g. \"Requirements accepted\". */\n  label: string;\n  /** Visible text instead of \"X of Y\": markup, or a function of (value, max). */\n  text?: ReactNode | ((value: number, max: number) => ReactNode);\n  /** The word between the figures in the default text and in aria-valuetext. */\n  ofLabel?: string;\n  /** Colour by share of `max`: the last threshold the share reaches wins. */\n  thresholds?: readonly MeterThreshold[];\n  /** A fixed colour, instead of the thresholds. */\n  color?: MeterColor;\n  /** The bar only; the text stays available to assistive technology. */\n  hideText?: boolean;\n}\n\n/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */\nexport function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor {\n  let color: MeterColor = \"neutral\";\n  let from = -Infinity;\n  for (const threshold of thresholds) {\n    if (share >= threshold.from && threshold.from >= from) {\n      color = threshold.color;\n      from = threshold.from;\n    }\n  }\n  return color;\n}\n\n/** A share of a whole, \"X of Y\": a bar and the figures beside it, coloured by thresholds. */\nexport const Meter = React.forwardRef<HTMLDivElement, MeterProps>(function Meter(\n  {\n    className,\n    value,\n    max,\n    label,\n    text,\n    ofLabel = \"of\",\n    thresholds = DEFAULT_METER_THRESHOLDS,\n    color,\n    hideText,\n    ...rest\n  },\n  ref\n) {\n  const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;\n  const tone = color ?? meterColor(share, thresholds);\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      role=\"meter\"\n      aria-label={label}\n      aria-valuenow={value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${value} ${ofLabel} ${max}`}\n      data-testid=\"meter\"\n      className={cn(\"smwb-meter\", `smwb-meter_color-${tone}`, { \"smwb-meter_bar-only\": hideText }, className)}\n    >\n      <span className=\"smwb-meter__track\" aria-hidden=\"true\">\n        <span className=\"smwb-meter__fill\" style={{ width: `${share * 100}%` }} />\n      </span>\n      {hideText ? null : (\n        <span className=\"smwb-meter__text\" aria-hidden=\"true\">\n          {text === undefined ? (\n            <>\n              <b className=\"smwb-meter__value\">{value}</b>\n              <span className=\"smwb-meter__of\">\n                {\" \"}\n                {ofLabel} {max}\n              </span>\n            </>\n          ) : typeof text === \"function\" ? (\n            text(value, max)\n          ) : (\n            text\n          )}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Meter;\n"],"names":["DEFAULT_METER_THRESHOLDS","meterColor","share","thresholds","color","from","threshold","Meter","React","className","value","max","label","text","ofLabel","hideText","rest","ref","tone","jsxs","cn","jsx","Fragment"],"mappings":";;;;;AAcO,MAAMA,IAAsD;AAAA,EACjE,EAAE,MAAM,GAAG,OAAO,OAAA;AAAA,EAClB,EAAE,MAAM,GAAG,OAAO,UAAA;AACpB;AAuBO,SAASC,EAAWC,GAAeC,GAAmD;AAC3F,MAAIC,IAAoB,WACpBC,IAAO;AACX,aAAWC,KAAaH;AACtB,IAAID,KAASI,EAAU,QAAQA,EAAU,QAAQD,MAC/CD,IAAQE,EAAU,OAClBD,IAAOC,EAAU;AAGrB,SAAOF;AACT;AAGO,MAAMG,IAAQC,EAAM,WAAuC,SAChE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAX,IAAaH;AAAA,EACb,OAAAI;AAAA,EACA,UAAAW;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMf,IAAQS,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI,GAC1DO,IAAOd,KAAA,OAAAA,IAASH,EAAWC,GAAOC,CAAU;AAClD,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYL;AAAA,MACZ,iBAAeF;AAAA,MACf,iBAAe;AAAA,MACf,iBAAeC;AAAA,MACf,kBAAgB,GAAGD,CAAK,IAAII,CAAO,IAAIH,CAAG;AAAA,MAC1C,eAAY;AAAA,MACZ,WAAWS,EAAG,cAAc,oBAAoBF,CAAI,IAAI,EAAE,uBAAuBH,EAAA,GAAYN,CAAS;AAAA,MAEtG,UAAA;AAAA,QAAA,gBAAAY,EAAC,UAAK,WAAU,qBAAoB,eAAY,QAC9C,4BAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,OAAO,GAAGnB,IAAQ,GAAG,OAAO,GAC1E;AAAA,QACCa,IAAW,OACV,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAC5C,UAAAR,MAAS,SACR,gBAAAM,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAX,GAAM;AAAA,UACxC,gBAAAS,EAAC,QAAA,EAAK,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,YACAL;AAAA,YAAQ;AAAA,YAAEH;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GACF,IACE,OAAOE,KAAS,aAClBA,EAAKH,GAAOC,CAAG,IAEfE,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/personChip/index.d.ts

@@ -0,0 +1,2 @@
+export { PersonChip, initialsOf, avatarColor, default } from "./personChip";
+export type { PersonChipProps } from "./personChip";

package/dist/components/dataDisplay/personChip/personChip.d.ts

@@ -0,0 +1,31 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { type AvatarSize } from "../avatar";
+/** Up to two initials from a name: "Anna Petrova" → "AP", "anna" → "A". */
+export declare function initialsOf(name: string): string;
+/**
+ * A steady background colour for a person's avatar, derived from a seed (an id
+ * or the name): the same person always gets the same colour, on the server too.
+ */
+export declare function avatarColor(seed: string): string;
+export interface PersonChipProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    className?: string;
+    /** The person's name: shown beside the avatar, and the source of its initials. */
+    name: string;
+    /** Avatar image; initials on a colour without it or when it fails. */
+    src?: string;
+    /** Link to the person's card. */
+    href?: string;
+    /** The avatar only; the name becomes its tooltip and accessible name. */
+    compact?: boolean;
+    /** Avatar size: a preset or pixels. 24px by default. */
+    size?: AvatarSize | number;
+    /** Seed for the avatar colour (an id); the name by default. */
+    colorSeed?: string;
+    /** A fixed avatar colour instead of the derived one. */
+    color?: string;
+    /** A second line under the name: a role, a date. */
+    meta?: ReactNode;
+}
+/** A person: avatar and name, a link to their card when `href` is set. */
+export declare const PersonChip: React.ForwardRefExoticComponent<PersonChipProps & React.RefAttributes<HTMLElement>>;
+export default PersonChip;

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

@@ -0,0 +1,61 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/personChip/personChip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
+import d from "react";
+import _ from "clsx";
+import { Avatar as u } from "../avatar/avatar.js";
+function b(a) {
+  const i = a.trim().split(/\s+/).filter(Boolean), s = (r) => {
+    var n;
+    return r && (n = Array.from(r)[0]) != null ? n : "";
+  };
+  return (s(i[0]) + (i.length > 1 ? s(i[i.length - 1]) : "")).toUpperCase();
+}
+function w(a) {
+  var s;
+  let i = 0;
+  for (const r of a) i = i * 31 + ((s = r.codePointAt(0)) != null ? s : 0) >>> 0;
+  return `hsl(${i % 360} 42% 42%)`;
+}
+const j = d.forwardRef(function({ className: i, name: s, src: r, href: n, compact: t, size: h = 24, colorSeed: p, color: o, meta: l, ...c }, f) {
+  return /* @__PURE__ */ m(
+    n ? "a" : "span",
+    {
+      ...c,
+      ref: f,
+      ...n ? { href: n } : {},
+      title: t ? s : void 0,
+      role: t && !n ? "img" : void 0,
+      "aria-label": t ? s : void 0,
+      "data-testid": "person-chip",
+      className: _(
+        "smwb-person-chip",
+        { "smwb-person-chip_link": !!n, "smwb-person-chip_compact": t },
+        i
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          u,
+          {
+            className: "smwb-person-chip__avatar",
+            size: h,
+            src: r,
+            color: o != null ? o : w(p != null ? p : s),
+            "aria-hidden": "true",
+            children: b(s)
+          }
+        ),
+        t ? null : /* @__PURE__ */ m("span", { className: "smwb-person-chip__text", children: [
+          /* @__PURE__ */ e("span", { className: "smwb-person-chip__name", children: s }),
+          l ? /* @__PURE__ */ e("span", { className: "smwb-person-chip__meta", children: l }) : null
+        ] })
+      ]
+    }
+  );
+});
+export {
+  j as PersonChip,
+  w as avatarColor,
+  b as initialsOf
+};
+//# sourceMappingURL=personChip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"personChip.js","sources":["../../../../src/components/dataDisplay/personChip/personChip.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport { Avatar, type AvatarSize } from \"../avatar\";\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<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\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?: ReactNode;\n}\n\n/** A person: avatar and name, a link to their card when `href` is set. */\nexport const PersonChip = React.forwardRef<HTMLElement, PersonChipProps>(function PersonChip(\n  { className, name, src, href, compact, size = 24, colorSeed, color, meta, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"span\") as \"span\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      {...(href ? { href } : {})}\n      title={compact ? name : undefined}\n      role={compact && !href ? \"img\" : undefined}\n      aria-label={compact ? name : undefined}\n      data-testid=\"person-chip\"\n      className={cn(\n        \"smwb-person-chip\",\n        { \"smwb-person-chip_link\": !!href, \"smwb-person-chip_compact\": compact },\n        className\n      )}\n    >\n      <Avatar\n        className=\"smwb-person-chip__avatar\"\n        size={size}\n        src={src}\n        color={color ?? avatarColor(colorSeed ?? name)}\n        aria-hidden=\"true\"\n      >\n        {initialsOf(name)}\n      </Avatar>\n      {compact ? null : (\n        <span className=\"smwb-person-chip__text\">\n          <span className=\"smwb-person-chip__name\">{name}</span>\n          {meta ? <span className=\"smwb-person-chip__meta\">{meta}</span> : null}\n        </span>\n      )}\n    </Tag>\n  );\n});\n\nexport default PersonChip;\n"],"names":["initialsOf","name","words","first","word","_a","avatarColor","seed","hash","char","PersonChip","React","className","src","href","compact","size","colorSeed","color","meta","rest","ref","jsxs","cn","jsx","Avatar"],"mappings":";;;;;;AAOO,SAASA,EAAWC,GAAsB;AAC/C,QAAMC,IAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO,GAC/CE,IAAQ,CAACC,MAAA;;AAAsC,WAAAA,MAAQC,IAAA,MAAM,KAAKD,CAAI,EAAE,CAAC,MAAlB,OAAAC,IAA6B;AAAA;AAC1F,UAAQF,EAAMD,EAAM,CAAC,CAAC,KAAKA,EAAM,SAAS,IAAIC,EAAMD,EAAMA,EAAM,SAAS,CAAC,CAAC,IAAI,KAAK,YAAA;AACtF;AAMO,SAASI,EAAYC,GAAsB;;AAChD,MAAIC,IAAO;AACX,aAAWC,KAAQF,EAAM,CAAAC,IAAQA,IAAO,OAAMH,IAAAI,EAAK,YAAY,CAAC,MAAlB,OAAAJ,IAAuB,OAAQ;AAC7E,SAAO,OAAOG,IAAO,GAAG;AAC1B;AAuBO,MAAME,IAAaC,EAAM,WAAyC,SACvE,EAAE,WAAAC,GAAW,MAAAX,GAAM,KAAAY,GAAK,MAAAC,GAAM,SAAAC,GAAS,MAAAC,IAAO,IAAI,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,GAAGC,EAAA,GAC7EC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWR,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGM;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIP,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,OAAOC,IAAUd,IAAO;AAAA,MACxB,MAAMc,KAAW,CAACD,IAAO,QAAQ;AAAA,MACjC,cAAYC,IAAUd,IAAO;AAAA,MAC7B,eAAY;AAAA,MACZ,WAAWsB;AAAA,QACT;AAAA,QACA,EAAE,yBAAyB,CAAC,CAACT,GAAM,4BAA4BC,EAAA;AAAA,QAC/DH;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAAT;AAAA,YACA,KAAAH;AAAA,YACA,OAAOK,KAAA,OAAAA,IAASZ,EAAYW,KAAA,OAAAA,IAAahB,CAAI;AAAA,YAC7C,eAAY;AAAA,YAEX,YAAWA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBc,IAAU,OACT,gBAAAO,EAAC,QAAA,EAAK,WAAU,0BACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAvB,GAAK;AAAA,UAC9CkB,IAAO,gBAAAK,EAAC,QAAA,EAAK,WAAU,0BAA0B,aAAK,IAAU;AAAA,QAAA,EAAA,CACnE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/dataDisplay/stat/index.d.ts

@@ -0,0 +1,2 @@
+export { Stat, StatGroup, default } from "./stat";
+export type { StatProps, StatGroupProps, StatTone } from "./stat";

package/dist/components/dataDisplay/stat/stat.d.ts

@@ -0,0 +1,36 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export type StatTone = "neutral" | "info" | "success" | "warning" | "error";
+export interface StatProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    className?: string;
+    /** What the figure counts. */
+    label: ReactNode;
+    /** The figure — a number, or a short value such as "3 / 14". */
+    value: ReactNode;
+    /** A line under the value: a comparison, a period, a caveat. */
+    hint?: ReactNode;
+    /** An icon beside the figure: a Material Symbols name or an element. */
+    icon?: string | ReactNode;
+    /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */
+    tone?: StatTone;
+    /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */
+    variant?: "tile" | "plain";
+    /** Make the whole stat a link to what the figure is made of. */
+    href?: string;
+}
+/**
+ * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.
+ * Children go under it — a meter, a sparkline, a note.
+ */
+export declare const Stat: React.ForwardRefExoticComponent<StatProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */
+    minItemWidth?: number | string;
+}
+/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */
+export declare const StatGroup: React.ForwardRefExoticComponent<StatGroupProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Stat;

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

@@ -0,0 +1,48 @@
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/stat/stat.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import c from "react";
+import p from "clsx";
+import { Icon as d } from "../../base/icon/icon.js";
+const $ = c.forwardRef(function({ className: o, label: r, value: a, hint: m, icon: t, tone: l = "neutral", variant: n = "tile", href: e, children: i, ...b }, u) {
+  return /* @__PURE__ */ _(
+    e ? "a" : "div",
+    {
+      ...b,
+      ref: u,
+      ...e ? { href: e } : {},
+      "data-testid": "stat",
+      className: p(
+        "smwb-stat",
+        `smwb-stat_${n}`,
+        `smwb-stat_tone-${l}`,
+        { "smwb-stat_link": !!e, "smwb-stat_with-icon": !!t },
+        o
+      ),
+      children: [
+        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(d, { name: t, size: 20 }) : t }) : null,
+        /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: r }),
+        /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
+        m ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: m }) : null,
+        i ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: i }) : null
+      ]
+    }
+  );
+}), h = c.forwardRef(function({ className: o, style: r, minItemWidth: a, children: m, ...t }, l) {
+  const n = typeof a == "number" ? `${a}px` : a;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...t,
+      ref: l,
+      className: p("smwb-stat-group", o),
+      style: n === void 0 ? r : { ...r, "--smwb-stat-min": n },
+      children: m
+    }
+  );
+});
+export {
+  $ as Stat,
+  h as StatGroup
+};
+//# sourceMappingURL=stat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sources":["../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\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}\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 const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  { className, label, value, hint, icon, tone = \"neutral\", variant = \"tile\", href, children, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid=\"stat\"\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;;;AA8BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,SAAAC,IAAU,QAAQ,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC9FC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWJ,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGE;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIH,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAY;AAAA,MACZ,WAAWK;AAAA,QACT;AAAA,QACA,aAAaN,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAS,EAACC,KAAK,MAAMV,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAS,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QAC1C,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QACzCC,IAAO,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDL,IAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAL,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYO,IAAYhB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAgB,GAAO,cAAAC,GAAc,UAAAT,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBZ,CAAS;AAAA,MAC1C,OAAOkB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/table/table.d.ts

@@ -9,6 +9,13 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     stickyHeader?: boolean;
     /** Optional accessible caption rendered for screen readers. */
     caption?: ReactNode;
+    /**
+     * Show each row as a card — cells one under another, each with its column's
+     * label — while the table's container is narrower than this breakpoint:
+     * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space
+     * the table has decides, not the window. Labels come from `TableCell label`.
+     */
+    stackBelow?: "sm" | "md" | "lg";
     paginationSettings?: TablePaginationProps;
 }
 declare const Table: import("react").ForwardRefExoticComponent<TableProps & {

package/dist/components/dataDisplay/table/table.js

@@ -1,38 +1,44 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/table/table.entry.css';/* empty css                                                     */
-import { forwardRef as n } from "react";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/table/table.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import { forwardRef as p } from "react";
 import r from "clsx";
-import _ from "./tablePagination/tablePagination.js";
-const v = n(
-  ({ className: l, dense: b, hovered: o, children: t, paginationSettings: e, isLoading: i, stickyHeader: c, caption: m, ...w }, d) => /* @__PURE__ */ s(
+import n from "./tablePagination/tablePagination.js";
+const j = p(
+  ({ className: b, dense: t, hovered: o, children: i, paginationSettings: e, isLoading: w, stickyHeader: c, caption: m, stackBelow: s, ..._ }, d) => /* @__PURE__ */ l(
     "div",
     {
       ref: d,
-      className: r("smwb-table__wrapper", l, {
-        "smwb-table__wrapper_loading": i
-      }),
-      ...w,
+      className: r(
+        "smwb-table__wrapper",
+        b,
+        {
+          "smwb-table__wrapper_loading": w
+        },
+        s && `smwb-table__wrapper_stack-${s}`
+      ),
+      ..._,
       children: [
-        /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ s(
+        /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ l(
           "table",
           {
             className: r("smwb-table", {
-              "smwb-dense": b,
+              "smwb-dense": t,
               "smwb-hovered": o,
               "smwb-table_sticky-header": c
             }),
             children: [
               m != null && /* @__PURE__ */ a("caption", { className: "smwb-table__caption", children: m }),
-              t
+              i
             ]
           }
         ) }),
-        !!e && /* @__PURE__ */ a(_, { ...e })
+        !!e && /* @__PURE__ */ a(n, { ...e })
       ]
     }
   )
 );
 export {
-  v as default
+  j as default
 };
 //# sourceMappingURL=table.js.map

package/dist/components/dataDisplay/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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?: ReactNode;\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  ({ className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-table__wrapper\", className, {\n          [\"smwb-table__wrapper_loading\"]: isLoading,\n        })}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;;AAiBA,MAAMA,IAAQC;AAAA,EACZ,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,GAAGC,EAAA,GAASC,MAEtG,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAG,uBAAuBX,GAAW;AAAA,QAC7C,+BAAgCK;AAAA,MAAA,CAClC;AAAA,MACA,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACP,GAAoB,GACzF,UAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcV;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAK,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAL,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAQ,EAACC,GAAA,EAAiB,GAAGT,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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?: ReactNode;\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}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  (\n    { className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, stackBelow, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"smwb-table__wrapper\",\n          className,\n          {\n            [\"smwb-table__wrapper_loading\"]: isLoading,\n          },\n          stackBelow && `smwb-table__wrapper_stack-${stackBelow}`\n        )}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","stackBelow","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;;;AAyBA,MAAMA,IAAQC;AAAA,EACZ,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,YAAAC,GAAY,GAAGC,EAAA,GAC5GC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAZ;AAAA,QACA;AAAA,UACG,+BAAgCK;AAAA,QAAA;AAAA,QAEnCG,KAAc,6BAA6BA,CAAU;AAAA,MAAA;AAAA,MAEtD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACR,GAAoB,GACzF,UAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcX;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAM,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAN,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAS,EAACC,GAAA,EAAiB,GAAGV,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}

package/dist/components/dataDisplay/table/tableCell.d.ts

@@ -2,6 +2,8 @@ import { PropsWithChildren, TdHTMLAttributes } from "react";
 export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     className?: string;
     cellAlign?: "left" | "right" | "center";
+    /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */
+    label?: string;
 }
-declare const TableCell: ({ children, cellAlign, className, ...props }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
+declare const TableCell: ({ children, cellAlign, className, label, ...props }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/dataDisplay/table/tableCell.js

@@ -1,7 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
 import m from "clsx";
-const f = ({ children: l, cellAlign: e = "left", className: t, ...a }) => /* @__PURE__ */ r("td", { ...a, className: m("smwb-table__cell", t), align: e || "left", children: l });
+const c = ({ children: t, cellAlign: e = "left", className: a, label: l, ...o }) => /* @__PURE__ */ r(
+  "td",
+  {
+    ...o,
+    className: m("smwb-table__cell", a),
+    align: e || "left",
+    ...l !== void 0 && { "data-label": l },
+    children: t
+  }
+);
 export {
-  f as default
+  c as default
 };
 //# sourceMappingURL=tableCell.js.map

package/dist/components/dataDisplay/table/tableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td {...props} className={cn(\"smwb-table__cell\", className)} align={cellAlign || \"left\"}>\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","props","jsx","cn"],"mappings":";;AAQA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,GAAGC,QAE7D,gBAAAC,EAAC,MAAA,EAAI,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAAG,OAAOD,KAAa,QAC9E,UAAAD,EAAA,CACH;"}
+{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\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}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, label, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td\n      {...props}\n      className={cn(\"smwb-table__cell\", className)}\n      align={cellAlign || \"left\"}\n      // Only a given label sets data-label: without one, a caller's own\n      // data-label (the way to label cells by hand) must survive, as in Solid.\n      {...(label !== undefined && { \"data-label\": label })}\n    >\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","label","props","jsx","cn"],"mappings":";;AAUA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,OAAAC,GAAO,GAAGC,QAEpE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE,EAAG,oBAAoBJ,CAAS;AAAA,IAC3C,OAAOD,KAAa;AAAA,IAGnB,GAAIE,MAAU,UAAa,EAAE,cAAcA,EAAA;AAAA,IAE3C,UAAAH;AAAA,EAAA;AAAA;"}

package/dist/components/dataDisplay/table/tableHeadCell.d.ts

@@ -7,7 +7,17 @@ export interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElemen
     isSortedByDesc?: boolean;
     /** @deprecated use `sortDirection="asc"`. */
     isSortedByAsc?: boolean;
-    /** Enables the interactive sort affordance with keyboard/aria support. */
+    /**
+     * Enables the interactive sort affordance with keyboard/aria support.
+     *
+     * The children sit inside the sort control, and controls among them keep
+     * their own input: Enter and Space sort only while the sort control itself
+     * has focus, and a click sorts unless it lands in a nested control (input,
+     * button, link, label, anything focusable) or in a portal. Content that is not
+     * a control, such as click-to-edit text, keeps its click from sorting by
+     * calling `preventDefault()` on it. A nested control's name, or its value,
+     * becomes part of the sort control's accessible name.
+     */
     sortable?: boolean;
     /** Current sort direction for this column. */
     sortDirection?: SortDirection;

package/dist/components/dataDisplay/table/tableHeadCell.js

@@ -1,41 +1,71 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import p from "clsx";
-import { Icon as x } from "../../base/icon/icon.js";
-const y = ({
-  children: i,
+import { jsx as d, jsxs as p } from "react/jsx-runtime";
+import _ from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+const g = [
+  "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((c) => `[role='${c}']`)
+].join(","), T = ({
+  children: c,
   className: l,
-  cellAlign: a = "left",
+  cellAlign: s = "left",
   isSortedByAsc: m,
-  isSortedByDesc: t,
+  isSortedByDesc: r,
   sortable: e,
-  sortDirection: d,
-  onSort: s,
-  ..._
+  sortDirection: i,
+  onSort: t,
+  ...u
 }) => {
-  const n = d !== void 0 ? d : m ? "asc" : t ? "desc" : !1, r = e ? n === "asc" ? "ascending" : n === "desc" ? "descending" : "none" : void 0, f = n === "asc" ? "expand_more" : n === "desc" ? "expand_less" : "unfold_more", w = (c) => {
-    e && s && (c.key === "Enter" || c.key === " ") && (c.preventDefault(), s());
+  const a = i !== void 0 ? i : m ? "asc" : r ? "desc" : !1, b = e ? a === "asc" ? "ascending" : a === "desc" ? "descending" : "none" : void 0, f = a === "asc" ? "expand_more" : a === "desc" ? "expand_less" : "unfold_more", h = (n) => {
+    n.target === n.currentTarget && e && t && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), t());
+  }, x = (n) => {
+    var o;
+    n.defaultPrevented || ((o = n.target) == null ? void 0 : o.closest(g)) === n.currentTarget && (t == null || t());
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ d(
     "th",
     {
-      ..._,
-      "aria-sort": r,
-      className: p("smwb-table__cell", "smwb-head-cell", l, {
-        [`smwb-align_${a}`]: !!a,
+      ...u,
+      "aria-sort": b,
+      className: _("smwb-table__cell", "smwb-head-cell", l, {
+        [`smwb-align_${s}`]: !!s,
         "smwb-head-cell_sortable": e,
-        "smwb-head-cell_sorted": !!e && n !== !1
+        "smwb-head-cell_sorted": !!e && a !== !1
       }),
-      children: /* @__PURE__ */ h(
+      children: /* @__PURE__ */ p(
         "span",
         {
           className: "smwb-head-cell__content",
-          onClick: e ? s : void 0,
-          onKeyDown: e ? w : void 0,
+          onClick: e ? x : void 0,
+          onKeyDown: e ? h : void 0,
           role: e ? "button" : void 0,
           tabIndex: e ? 0 : void 0,
           children: [
-            i,
-            e && /* @__PURE__ */ o(x, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
+            c,
+            e && /* @__PURE__ */ d(w, { className: "smwb-head-cell__icon", name: f, size: 18, weight: 800 })
           ]
         }
       )
@@ -43,6 +73,6 @@ const y = ({
   );
 };
 export {
-  y as default
+  T as default
 };
 //# sourceMappingURL=tableHeadCell.js.map

package/dist/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\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}\n\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : 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 = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      onSort();\n    }\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onSort : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","jsx","cn","jsxs","Icon"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAExFG,IAAY,CAACC,MAAgD;AACjE,IAAIR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWK,EAAG,oBAAoB,kBAAkBd,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASX,IAAWE,IAAS;AAAA,UAC7B,WAAWF,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAS,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMN,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, ThHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\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}\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\nconst TableHeadCell = ({\n  children,\n  className,\n  cellAlign = \"left\",\n  isSortedByAsc,\n  isSortedByDesc,\n  sortable,\n  sortDirection,\n  onSort,\n  ...props\n}: PropsWithChildren<TableHeadCellProps>) => {\n  const direction: SortDirection =\n    sortDirection !== undefined ? sortDirection : isSortedByAsc ? \"asc\" : isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = sortable\n    ? direction === \"asc\"\n      ? \"ascending\"\n      : direction === \"desc\"\n        ? \"descending\"\n        : \"none\"\n    : 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 = direction === \"asc\" ? \"expand_more\" : direction === \"desc\" ? \"expand_less\" : \"unfold_more\";\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 = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (sortable && onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      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: React delivers it here,\n  // though it landed outside the control.\n  const onClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (event.defaultPrevented) return;\n    if ((event.target as Element | null)?.closest(INTERACTIVE) !== event.currentTarget) return;\n    onSort?.();\n  };\n\n  return (\n    <th\n      {...props}\n      aria-sort={ariaSort}\n      className={cn(\"smwb-table__cell\", \"smwb-head-cell\", className, {\n        [`smwb-align_${cellAlign}`]: !!cellAlign,\n        \"smwb-head-cell_sortable\": sortable,\n        \"smwb-head-cell_sorted\": !!sortable && direction !== false,\n      })}\n    >\n      <span\n        className=\"smwb-head-cell__content\"\n        onClick={sortable ? onClick : undefined}\n        onKeyDown={sortable ? onKeyDown : undefined}\n        role={sortable ? \"button\" : undefined}\n        tabIndex={sortable ? 0 : undefined}\n      >\n        {children}\n        {sortable && <Icon className=\"smwb-head-cell__icon\" name={iconName} size={18} weight={800} />}\n      </span>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["INTERACTIVE","role","TableHeadCell","children","className","cellAlign","isSortedByAsc","isSortedByDesc","sortable","sortDirection","onSort","props","direction","ariaSort","iconName","onKeyDown","event","onClick","_a","jsx","cn","jsxs","Icon"],"mappings":";;;AAoCA,MAAMA,IAAc;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,EAAA,EACA,IAAI,CAACC,MAAS,UAAUA,CAAI,IAAI;AACpC,EAAE,KAAK,GAAG,GAEJC,IAAgB,CAAC;AAAA,EACrB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAA6C;AAC3C,QAAMC,IACJH,MAAkB,SAAYA,IAAgBH,IAAgB,QAAQC,IAAiB,SAAS,IAE5FM,IAAWL,IACbI,MAAc,QACZ,cACAA,MAAc,SACZ,eACA,SACJ,QASEE,IAAWF,MAAc,QAAQ,gBAAgBA,MAAc,SAAS,gBAAgB,eAIxFG,IAAY,CAACC,MAAgD;AACjE,IAAIA,EAAM,WAAWA,EAAM,iBACvBR,KAAYE,MAAWM,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SAChEA,EAAM,eAAA,GACNN,EAAA;AAAA,EAEJ,GAKMO,IAAU,CAACD,MAA6C;;AAC5D,IAAIA,EAAM,sBACLE,IAAAF,EAAM,WAAN,gBAAAE,EAAiC,QAAQlB,QAAiBgB,EAAM,kBACrEN,KAAA,QAAAA;AAAA,EACF;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,aAAWE;AAAA,MACX,WAAWO,EAAG,oBAAoB,kBAAkBhB,GAAW;AAAA,QAC7D,CAAC,cAAcC,CAAS,EAAE,GAAG,CAAC,CAACA;AAAA,QAC/B,2BAA2BG;AAAA,QAC3B,yBAAyB,CAAC,CAACA,KAAYI,MAAc;AAAA,MAAA,CACtD;AAAA,MAED,UAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASb,IAAWS,IAAU;AAAA,UAC9B,WAAWT,IAAWO,IAAY;AAAA,UAClC,MAAMP,IAAW,WAAW;AAAA,UAC5B,UAAUA,IAAW,IAAI;AAAA,UAExB,UAAA;AAAA,YAAAL;AAAA,YACAK,KAAY,gBAAAW,EAACG,GAAA,EAAK,WAAU,wBAAuB,MAAMR,GAAU,MAAM,IAAI,QAAQ,IAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC7F;AAAA,EAAA;AAGN;"}