@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1,35 +1,36 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import {
+  Show,
+  children,
+  createComputed,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  mergeProps,
+  onCleanup,
+  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(",");
+import { isOwnClick } from "../../../utils/ownClick";
+import { cellRowSpan, cellSpan, textOf, useInTableHead, useTableLabels, useTableRow } from "./tableColumns";
+function useColumnLabel(element, span, rowSpan, text) {
+  const table = useTableLabels();
+  const row = useTableRow();
+  const inHead = useInTableHead();
+  const place = row?.registerCell(element, span, rowSpan);
+  if (!table || !place || !inHead) return;
+  const owner = /* @__PURE__ */ Symbol();
+  const label = createMemo(() => text() || void 0);
+  createComputed(() => {
+    if (!table.stacked() || span() !== 1) return;
+    const column = place.column();
+    const at = place.row();
+    if (column < 0) return;
+    table.labels.set(column, at, owner, label());
+    onCleanup(() => table.labels.remove(column, at, owner));
+  });
+}
 function TableHeadCell(props) {
   const merged = mergeProps({ cellAlign: "left" }, props);
   const [local, rest] = splitProps(merged, [
@@ -41,8 +42,19 @@ function TableHeadCell(props) {
     "sortable",
     "sortDirection",
     "onSort",
+    "actions",
+    "label",
     "ref"
   ]);
+  const content = children(() => local.children);
+  const [element, setElement] = createSignal();
+  useColumnLabel(
+    element,
+    () => cellSpan(rest.colSpan ?? rest.colspan),
+    () => cellRowSpan(rest.rowSpan ?? rest.rowspan),
+    () => local.label ?? textOf(content())
+  );
+  const actions = children(() => local.actions);
   const direction = () => local.sortDirection !== void 0 ? local.sortDirection : local.isSortedByAsc ? "asc" : local.isSortedByDesc ? "desc" : false;
   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";
@@ -54,13 +66,15 @@ function TableHeadCell(props) {
     }
   };
   const onClick = (event) => {
-    if (!local.sortable || event.defaultPrevented) return;
-    if (event.target?.closest(INTERACTIVE) !== event.currentTarget) return;
+    if (!local.sortable || !isOwnClick(event)) return;
     local.onSort?.();
   };
+  const labelId = `${createUniqueId()}-label`;
+  const labelled = () => !!actions() && rest["aria-label"] == null && rest["aria-labelledby"] == null;
   return <th
     {...rest}
-    ref={mergeRefs(local.ref)}
+    ref={mergeRefs(local.ref, setElement)}
+    aria-labelledby={labelled() ? labelId : rest["aria-labelledby"]}
     aria-sort={ariaSort()}
     class={cn("smwb-table__cell", "smwb-head-cell", local.class, {
       [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,
@@ -69,17 +83,21 @@ function TableHeadCell(props) {
     })}
   >
       <span
+    id={labelled() ? labelId : void 0}
     class="smwb-head-cell__content"
     onClick={onClick}
     onKeyDown={onKeyDown}
     role={local.sortable ? "button" : void 0}
     tabindex={local.sortable ? 0 : void 0}
   >
-        {local.children}
+        {content()}
         <Show when={local.sortable}>
           <Icon class="smwb-head-cell__icon" name={iconName()} size={18} weight={800} />
         </Show>
       </span>
+      <Show when={actions()}>
+        <div class="smwb-head-cell__actions">{actions()}</div>
+      </Show>
     </th>;
 }
 var tableHeadCell_default = TableHeadCell;

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  /**\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"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import {\n  type Accessor,\n  type JSX,\n  type ParentProps,\n  Show,\n  children,\n  createComputed,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { cellRowSpan, cellSpan, textOf, useInTableHead, useTableLabels, useTableRow } from \"./tableColumns\";\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: put controls in\n   * `actions` instead.\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   * The column's controls — a filter field, a menu button, a column resizer —\n   * drawn after the sort control, outside it. Their names and values stay out\n   * of the sort control's accessible name, and their keys and clicks never\n   * reach it. Rendered whether or not the cell is sortable.\n   *\n   * The column header is then named after the children alone: the cell's\n   * `aria-labelledby` points at the sort control, unless the cell is given\n   * `aria-label` or `aria-labelledby`. Named from its content, the header would\n   * take in the controls' names and values too.\n   */\n  actions?: JSX.Element;\n  /**\n   * The column's name for its body cells while the table stacks rows as cards\n   * (`Table stackBelow`). Without it, the text of the children is the name; give\n   * `label` where they hold no text of their own (an icon) or more than the\n   * name, or where their text changes inside markup: the text of markup is read\n   * when it is created. An empty `label` leaves the column's cells unlabelled, so\n   * they fill the card's width.\n   */\n  label?: string;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\n/**\n * A head cell of a stacked table labels its column, for its own head row: the\n * lowest row's label wins. It labels as soon as it is created: the body cells,\n * created after it, read the label at once. In a body row (a row header) it\n * labels nothing, but still takes its column, as the cells after it count it.\n */\nfunction useColumnLabel(\n  element: Accessor<Element | undefined>,\n  span: Accessor<number>,\n  rowSpan: Accessor<number>,\n  text: Accessor<string>\n): void {\n  const table = useTableLabels();\n  const row = useTableRow();\n  const inHead = useInTableHead();\n  const place = row?.registerCell(element, span, rowSpan);\n  if (!table || !place || !inHead) return;\n  const owner = Symbol();\n  const label = createMemo(() => text() || undefined);\n  createComputed(() => {\n    if (!table.stacked() || span() !== 1) return;\n    const column = place.column();\n    const at = place.row();\n    if (column < 0) return;\n    table.labels.set(column, at, owner, label());\n    onCleanup(() => table.labels.remove(column, at, owner));\n  });\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    \"actions\",\n    \"label\",\n    \"ref\",\n  ]);\n\n  // Read once: the content is drawn, and its text names the column.\n  const content = children(() => local.children);\n  const [element, setElement] = createSignal<HTMLTableCellElement>();\n  useColumnLabel(\n    element,\n    () => cellSpan(rest.colSpan ?? rest.colspan),\n    () => cellRowSpan(rest.rowSpan ?? rest.rowspan),\n    () => local.label ?? textOf(content())\n  );\n\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const actions = children(() => local.actions);\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 || !isOwnClick(event)) return;\n    local.onSort?.();\n  };\n\n  // With actions drawn, the column header is named after the content of its\n  // sort control, not after the whole cell: the controls' names and the text\n  // typed into them would join the header's name.\n  const labelId = `${createUniqueId()}-label`;\n  const labelled = (): boolean => !!actions() && rest[\"aria-label\"] == null && rest[\"aria-labelledby\"] == null;\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref, setElement)}\n      aria-labelledby={labelled() ? labelId : rest[\"aria-labelledby\"]}\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        id={labelled() ? labelId : undefined}\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        {content()}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n      <Show when={actions()}>\n        <div class=\"smwb-head-cell__actions\">{actions()}</div>\n      </Show>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"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","names":[],"file":"tableHeadCell.jsx"}

package/dist/headless/source/components/dataDisplay/table/tableHtmlText.js

@@ -0,0 +1,140 @@
+import { LEGACY_REFERENCES, NAMED_REFERENCES } from "./tableEntities";
+let named;
+let legacy;
+function references() {
+  if (!named || !legacy) {
+    named = new Map(
+      NAMED_REFERENCES.split(",").map((entry) => {
+        const [name, points] = entry.split(":");
+        return [name, String.fromCodePoint(...points.split(".").map((point) => parseInt(point, 36)))];
+      })
+    );
+    legacy = new Set(LEGACY_REFERENCES.split(","));
+  }
+  return { named, legacy };
+}
+const WINDOWS_1252 = {
+  128: 8364,
+  130: 8218,
+  131: 402,
+  132: 8222,
+  133: 8230,
+  134: 8224,
+  135: 8225,
+  136: 710,
+  137: 8240,
+  138: 352,
+  139: 8249,
+  140: 338,
+  142: 381,
+  145: 8216,
+  146: 8217,
+  147: 8220,
+  148: 8221,
+  149: 8226,
+  150: 8211,
+  151: 8212,
+  152: 732,
+  153: 8482,
+  154: 353,
+  155: 8250,
+  156: 339,
+  158: 382,
+  159: 376
+};
+function fromNumber(value) {
+  if (value === 0 || value > 1114111 || value >= 55296 && value <= 57343) return "\uFFFD";
+  return String.fromCodePoint(WINDOWS_1252[value] ?? value);
+}
+function decode(text) {
+  return text.replace(/&(?:#([0-9]+);?|#[xX]([0-9a-fA-F]+);?|([A-Za-z0-9]+)(;?))/g, (match, dec, hex, name, semi) => {
+    if (dec !== void 0) return fromNumber(Number.parseInt(dec, 10));
+    if (hex !== void 0) return fromNumber(Number.parseInt(hex, 16));
+    const refs = references();
+    const word = name;
+    if (semi) {
+      const char = refs.named.get(word);
+      if (char !== void 0) return char;
+    }
+    for (let length = Math.min(word.length, 6); length > 1; length--) {
+      const prefix = word.slice(0, length);
+      if (refs.legacy.has(prefix)) return refs.named.get(prefix) + match.slice(1 + length);
+    }
+    return match;
+  });
+}
+const RAW_TEXT = /* @__PURE__ */ new Set(["script", "style", "xmp", "iframe", "noembed", "noframes"]);
+const ESCAPABLE_RAW_TEXT = /* @__PURE__ */ new Set(["textarea", "title"]);
+function htmlText(html) {
+  let text = "";
+  let at = 0;
+  let lower;
+  while (at < html.length) {
+    const open = html.indexOf("<", at);
+    if (open < 0) break;
+    const next = html[open + 1] ?? "";
+    let end;
+    if (html.startsWith("<!--", open)) {
+      if (html.startsWith(">", open + 4)) end = open + 5;
+      else if (html.startsWith("->", open + 4)) end = open + 6;
+      else {
+        const close = html.indexOf("-->", open + 4);
+        end = close < 0 ? html.length : close + 3;
+      }
+    } else if (/[A-Za-z]/.test(next)) {
+      end = tagEnd(html, open + 1);
+      const name = /^[A-Za-z][^\s/>]*/.exec(html.slice(open + 1, open + 10))?.[0].toLowerCase() ?? "";
+      const raw = RAW_TEXT.has(name);
+      if (raw || ESCAPABLE_RAW_TEXT.has(name)) {
+        lower ?? (lower = html.toLowerCase());
+        const close = endTag(lower, name, end);
+        const content = html.slice(end, close);
+        text += decode(html.slice(at, open)) + (raw ? content : decode(content));
+        at = close < html.length ? tagEnd(html, close + 1) : close;
+        continue;
+      }
+    } else if (next === "/") {
+      end = tagEnd(html, open + 1);
+    } else if (next === "!" || next === "?") {
+      const close = html.indexOf(">", open);
+      end = close < 0 ? html.length : close + 1;
+    } else {
+      text += decode(html.slice(at, open + 1));
+      at = open + 1;
+      continue;
+    }
+    text += decode(html.slice(at, open));
+    at = end;
+  }
+  return text + decode(html.slice(at));
+}
+function endTag(lower, name, from) {
+  for (let at = lower.indexOf(`</${name}`, from); at >= 0; at = lower.indexOf(`</${name}`, at + 1)) {
+    const after = lower[at + 2 + name.length];
+    if (after === void 0 || /[\s/>]/.test(after)) return at;
+  }
+  return lower.length;
+}
+function tagEnd(html, from) {
+  let at = from;
+  let afterEquals = false;
+  while (at < html.length) {
+    const char = html[at];
+    if (char === ">") return at + 1;
+    if (afterEquals && (char === '"' || char === "'")) {
+      const close = html.indexOf(char, at + 1);
+      if (close < 0) return html.length;
+      at = close + 1;
+      afterEquals = false;
+      continue;
+    }
+    if (char === "=") afterEquals = true;
+    else if (!/\s/.test(char)) afterEquals = false;
+    at++;
+  }
+  return html.length;
+}
+export {
+  htmlText
+};
+//# sourceMappingURL=tableHtmlText.js.map

package/dist/headless/source/components/dataDisplay/table/tableHtmlText.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/dataDisplay/table/tableHtmlText.ts"],
+  "sourcesContent": ["import { LEGACY_REFERENCES, NAMED_REFERENCES } from \"./tableEntities\";\n\nlet named: Map<string, string> | undefined;\nlet legacy: Set<string> | undefined;\n\nfunction references(): { named: Map<string, string>; legacy: Set<string> } {\n  if (!named || !legacy) {\n    named = new Map(\n      NAMED_REFERENCES.split(\",\").map((entry) => {\n        const [name, points] = entry.split(\":\") as [string, string];\n        return [name, String.fromCodePoint(...points.split(\".\").map((point) => parseInt(point, 36)))];\n      })\n    );\n    legacy = new Set(LEGACY_REFERENCES.split(\",\"));\n  }\n  return { named, legacy };\n}\n\n// Numeric references to C1 controls that browsers read as windows-1252.\nconst WINDOWS_1252: Record<number, number> = {\n  0x80: 0x20ac,\n  0x82: 0x201a,\n  0x83: 0x0192,\n  0x84: 0x201e,\n  0x85: 0x2026,\n  0x86: 0x2020,\n  0x87: 0x2021,\n  0x88: 0x02c6,\n  0x89: 0x2030,\n  0x8a: 0x0160,\n  0x8b: 0x2039,\n  0x8c: 0x0152,\n  0x8e: 0x017d,\n  0x91: 0x2018,\n  0x92: 0x2019,\n  0x93: 0x201c,\n  0x94: 0x201d,\n  0x95: 0x2022,\n  0x96: 0x2013,\n  0x97: 0x2014,\n  0x98: 0x02dc,\n  0x99: 0x2122,\n  0x9a: 0x0161,\n  0x9b: 0x203a,\n  0x9c: 0x0153,\n  0x9e: 0x017e,\n  0x9f: 0x0178,\n};\n\nfunction fromNumber(value: number): string {\n  if (value === 0 || value > 0x10ffff || (value >= 0xd800 && value <= 0xdfff)) return \"\uFFFD\";\n  return String.fromCodePoint(WINDOWS_1252[value] ?? value);\n}\n\n/** Reads the character references of HTML text as a browser does. */\nfunction decode(text: string): string {\n  return text.replace(/&(?:#([0-9]+);?|#[xX]([0-9a-fA-F]+);?|([A-Za-z0-9]+)(;?))/g, (match, dec, hex, name, semi) => {\n    if (dec !== undefined) return fromNumber(Number.parseInt(dec as string, 10));\n    if (hex !== undefined) return fromNumber(Number.parseInt(hex as string, 16));\n    const refs = references();\n    const word = name as string;\n    if (semi) {\n      const char = refs.named.get(word);\n      if (char !== undefined) return char;\n    }\n    // Without a \";\" (or with an unknown name before it), the longest name that\n    // counts without one is read, and the rest stays as written.\n    for (let length = Math.min(word.length, 6); length > 1; length--) {\n      const prefix = word.slice(0, length);\n      if (refs.legacy.has(prefix)) return refs.named.get(prefix)! + match.slice(1 + length);\n    }\n    return match;\n  });\n}\n\n// Elements whose content is text up to their end tag: kept as written (raw\n// text), or with its character references decoded (escapable raw text).\nconst RAW_TEXT = new Set([\"script\", \"style\", \"xmp\", \"iframe\", \"noembed\", \"noframes\"]);\nconst ESCAPABLE_RAW_TEXT = new Set([\"textarea\", \"title\"]);\n\n/**\n * The text of a piece of HTML, as `textContent` reads it once a browser has\n * parsed it: tags and comments dropped (`>` inside a quoted attribute value\n * included), and character references, named or numeric, decoded. The content\n * of `<script>`, `<style>`, `<textarea>`, `<title>` and the like is text up to\n * the end tag, as the browser reads it.\n */\nexport function htmlText(html: string): string {\n  let text = \"\";\n  let at = 0;\n  let lower: string | undefined;\n  while (at < html.length) {\n    const open = html.indexOf(\"<\", at);\n    if (open < 0) break;\n    const next = html[open + 1] ?? \"\";\n    let end: number;\n    if (html.startsWith(\"<!--\", open)) {\n      if (html.startsWith(\">\", open + 4)) end = open + 5;\n      else if (html.startsWith(\"->\", open + 4)) end = open + 6;\n      else {\n        const close = html.indexOf(\"-->\", open + 4);\n        end = close < 0 ? html.length : close + 3;\n      }\n    } else if (/[A-Za-z]/.test(next)) {\n      end = tagEnd(html, open + 1);\n      const name = /^[A-Za-z][^\\s/>]*/.exec(html.slice(open + 1, open + 10))?.[0].toLowerCase() ?? \"\";\n      const raw = RAW_TEXT.has(name);\n      if (raw || ESCAPABLE_RAW_TEXT.has(name)) {\n        lower ??= html.toLowerCase();\n        const close = endTag(lower, name, end);\n        const content = html.slice(end, close);\n        text += decode(html.slice(at, open)) + (raw ? content : decode(content));\n        at = close < html.length ? tagEnd(html, close + 1) : close;\n        continue;\n      }\n    } else if (next === \"/\") {\n      end = tagEnd(html, open + 1);\n    } else if (next === \"!\" || next === \"?\") {\n      const close = html.indexOf(\">\", open);\n      end = close < 0 ? html.length : close + 1;\n    } else {\n      // A \"<\" that starts no tag is text.\n      text += decode(html.slice(at, open + 1));\n      at = open + 1;\n      continue;\n    }\n    text += decode(html.slice(at, open));\n    at = end;\n  }\n  return text + decode(html.slice(at));\n}\n\n/** Where the end tag of a raw-text element starts, in the lower-cased markup; its length if there is none. */\nfunction endTag(lower: string, name: string, from: number): number {\n  for (let at = lower.indexOf(`</${name}`, from); at >= 0; at = lower.indexOf(`</${name}`, at + 1)) {\n    const after = lower[at + 2 + name.length];\n    if (after === undefined || /[\\s/>]/.test(after)) return at;\n  }\n  return lower.length;\n}\n\n/** Where a tag that starts at `from` ends: after its \">\", skipping quoted attribute values. */\nfunction tagEnd(html: string, from: number): number {\n  let at = from;\n  let afterEquals = false;\n  while (at < html.length) {\n    const char = html[at]!;\n    if (char === \">\") return at + 1;\n    if (afterEquals && (char === '\"' || char === \"'\")) {\n      const close = html.indexOf(char, at + 1);\n      if (close < 0) return html.length;\n      at = close + 1;\n      afterEquals = false;\n      continue;\n    }\n    if (char === \"=\") afterEquals = true;\n    else if (!/\\s/.test(char)) afterEquals = false;\n    at++;\n  }\n  return html.length;\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB,wBAAwB;AAEpD,IAAI;AACJ,IAAI;AAEJ,SAAS,aAAkE;AACzE,MAAI,CAAC,SAAS,CAAC,QAAQ;AACrB,YAAQ,IAAI;AAAA,MACV,iBAAiB,MAAM,GAAG,EAAE,IAAI,CAAC,UAAU;AACzC,cAAM,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,GAAG;AACtC,eAAO,CAAC,MAAM,OAAO,cAAc,GAAG,OAAO,MAAM,GAAG,EAAE,IAAI,CAAC,UAAU,SAAS,OAAO,EAAE,CAAC,CAAC,CAAC;AAAA,MAC9F,CAAC;AAAA,IACH;AACA,aAAS,IAAI,IAAI,kBAAkB,MAAM,GAAG,CAAC;AAAA,EAC/C;AACA,SAAO,EAAE,OAAO,OAAO;AACzB;AAGA,MAAM,eAAuC;AAAA,EAC3C,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AAAA,EACN,KAAM;AACR;AAEA,SAAS,WAAW,OAAuB;AACzC,MAAI,UAAU,KAAK,QAAQ,WAAa,SAAS,SAAU,SAAS,MAAS,QAAO;AACpF,SAAO,OAAO,cAAc,aAAa,KAAK,KAAK,KAAK;AAC1D;AAGA,SAAS,OAAO,MAAsB;AACpC,SAAO,KAAK,QAAQ,8DAA8D,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS;AACjH,QAAI,QAAQ,OAAW,QAAO,WAAW,OAAO,SAAS,KAAe,EAAE,CAAC;AAC3E,QAAI,QAAQ,OAAW,QAAO,WAAW,OAAO,SAAS,KAAe,EAAE,CAAC;AAC3E,UAAM,OAAO,WAAW;AACxB,UAAM,OAAO;AACb,QAAI,MAAM;AACR,YAAM,OAAO,KAAK,MAAM,IAAI,IAAI;AAChC,UAAI,SAAS,OAAW,QAAO;AAAA,IACjC;AAGA,aAAS,SAAS,KAAK,IAAI,KAAK,QAAQ,CAAC,GAAG,SAAS,GAAG,UAAU;AAChE,YAAM,SAAS,KAAK,MAAM,GAAG,MAAM;AACnC,UAAI,KAAK,OAAO,IAAI,MAAM,EAAG,QAAO,KAAK,MAAM,IAAI,MAAM,IAAK,MAAM,MAAM,IAAI,MAAM;AAAA,IACtF;AACA,WAAO;AAAA,EACT,CAAC;AACH;AAIA,MAAM,WAAW,oBAAI,IAAI,CAAC,UAAU,SAAS,OAAO,UAAU,WAAW,UAAU,CAAC;AACpF,MAAM,qBAAqB,oBAAI,IAAI,CAAC,YAAY,OAAO,CAAC;AASjD,SAAS,SAAS,MAAsB;AAC7C,MAAI,OAAO;AACX,MAAI,KAAK;AACT,MAAI;AACJ,SAAO,KAAK,KAAK,QAAQ;AACvB,UAAM,OAAO,KAAK,QAAQ,KAAK,EAAE;AACjC,QAAI,OAAO,EAAG;AACd,UAAM,OAAO,KAAK,OAAO,CAAC,KAAK;AAC/B,QAAI;AACJ,QAAI,KAAK,WAAW,QAAQ,IAAI,GAAG;AACjC,UAAI,KAAK,WAAW,KAAK,OAAO,CAAC,EAAG,OAAM,OAAO;AAAA,eACxC,KAAK,WAAW,MAAM,OAAO,CAAC,EAAG,OAAM,OAAO;AAAA,WAClD;AACH,cAAM,QAAQ,KAAK,QAAQ,OAAO,OAAO,CAAC;AAC1C,cAAM,QAAQ,IAAI,KAAK,SAAS,QAAQ;AAAA,MAC1C;AAAA,IACF,WAAW,WAAW,KAAK,IAAI,GAAG;AAChC,YAAM,OAAO,MAAM,OAAO,CAAC;AAC3B,YAAM,OAAO,oBAAoB,KAAK,KAAK,MAAM,OAAO,GAAG,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,YAAY,KAAK;AAC7F,YAAM,MAAM,SAAS,IAAI,IAAI;AAC7B,UAAI,OAAO,mBAAmB,IAAI,IAAI,GAAG;AACvC,0BAAU,KAAK,YAAY;AAC3B,cAAM,QAAQ,OAAO,OAAO,MAAM,GAAG;AACrC,cAAM,UAAU,KAAK,MAAM,KAAK,KAAK;AACrC,gBAAQ,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,MAAM,UAAU,OAAO,OAAO;AACtE,aAAK,QAAQ,KAAK,SAAS,OAAO,MAAM,QAAQ,CAAC,IAAI;AACrD;AAAA,MACF;AAAA,IACF,WAAW,SAAS,KAAK;AACvB,YAAM,OAAO,MAAM,OAAO,CAAC;AAAA,IAC7B,WAAW,SAAS,OAAO,SAAS,KAAK;AACvC,YAAM,QAAQ,KAAK,QAAQ,KAAK,IAAI;AACpC,YAAM,QAAQ,IAAI,KAAK,SAAS,QAAQ;AAAA,IAC1C,OAAO;AAEL,cAAQ,OAAO,KAAK,MAAM,IAAI,OAAO,CAAC,CAAC;AACvC,WAAK,OAAO;AACZ;AAAA,IACF;AACA,YAAQ,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC;AACnC,SAAK;AAAA,EACP;AACA,SAAO,OAAO,OAAO,KAAK,MAAM,EAAE,CAAC;AACrC;AAGA,SAAS,OAAO,OAAe,MAAc,MAAsB;AACjE,WAAS,KAAK,MAAM,QAAQ,KAAK,IAAI,IAAI,IAAI,GAAG,MAAM,GAAG,KAAK,MAAM,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC,GAAG;AAChG,UAAM,QAAQ,MAAM,KAAK,IAAI,KAAK,MAAM;AACxC,QAAI,UAAU,UAAa,SAAS,KAAK,KAAK,EAAG,QAAO;AAAA,EAC1D;AACA,SAAO,MAAM;AACf;AAGA,SAAS,OAAO,MAAc,MAAsB;AAClD,MAAI,KAAK;AACT,MAAI,cAAc;AAClB,SAAO,KAAK,KAAK,QAAQ;AACvB,UAAM,OAAO,KAAK,EAAE;AACpB,QAAI,SAAS,IAAK,QAAO,KAAK;AAC9B,QAAI,gBAAgB,SAAS,OAAO,SAAS,MAAM;AACjD,YAAM,QAAQ,KAAK,QAAQ,MAAM,KAAK,CAAC;AACvC,UAAI,QAAQ,EAAG,QAAO,KAAK;AAC3B,WAAK,QAAQ;AACb,oBAAc;AACd;AAAA,IACF;AACA,QAAI,SAAS,IAAK,eAAc;AAAA,aACvB,CAAC,KAAK,KAAK,IAAI,EAAG,eAAc;AACzC;AAAA,EACF;AACA,SAAO,KAAK;AACd;",
+  "names": []
+}

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

@@ -1,12 +1,16 @@
-import { splitProps } from "solid-js";
+import { createSignal, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { ChildElements, TableRowContext, createRowColumns, useTableLabels, useTableSection } from "./tableColumns";
 function TableRow(props) {
-  const [local, rest] = splitProps(props, ["children", "class", "selected", "expanded", "ref"]);
+  const [local, rest] = splitProps(props, ["children", "class", "selected", "expanded", "ref", "data-testid"]);
+  const table = useTableLabels();
+  const [element, setElement] = createSignal();
+  const columns = createRowColumns(() => !!table?.stacked(), useTableSection(), element);
   return <tr
     {...rest}
-    ref={mergeRefs(local.ref)}
-    data-testid="table-row"
+    ref={mergeRefs(local.ref, setElement)}
+    data-testid={local["data-testid"] ?? "table-row"}
     class={cn("smwb-table__row", local.class, {
       "smwb-table__row_selected": local.selected,
       "smwb-table__row_expanded": local.expanded
@@ -14,7 +18,9 @@ function TableRow(props) {
     aria-selected={local.selected ?? void 0}
     aria-expanded={local.expanded ?? void 0}
   >
-      {local.children}
+      <TableRowContext.Provider value={columns}>
+        <ChildElements onItems={columns.setItems}>{local.children}</ChildElements>
+      </TableRowContext.Provider>
     </tr>;
 }
 var tableRow_default = TableRow;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableRow.tsx"],"sourcesContent":["import { type JSX, type ParentProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {\n  /** Marks the row as selected (adds aria-selected + styling). */\n  selected?: boolean;\n  /** Reflects expandable-row state (adds aria-expanded + styling). */\n  expanded?: boolean;\n  ref?: Ref<HTMLTableRowElement>;\n}\n\nexport function TableRow(props: ParentProps<TableRowProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"selected\", \"expanded\", \"ref\"]);\n  return (\n    <tr\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"table-row\"\n      class={cn(\"smwb-table__row\", local.class, {\n        \"smwb-table__row_selected\": local.selected,\n        \"smwb-table__row_expanded\": local.expanded,\n      })}\n      aria-selected={local.selected ?? undefined}\n      aria-expanded={local.expanded ?? undefined}\n    >\n      {local.children}\n    </tr>\n  );\n}\n\nexport default TableRow;\n"],"mappings":"AAAA,SAAqC,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAU7B,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,YAAY,YAAY,KAAK,CAAC;AAC5F,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,4BAA4B,MAAM;AAAA,MAClC,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,IACD,eAAe,MAAM,YAAY;AAAA,IACjC,eAAe,MAAM,YAAY;AAAA,GAClC;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAZC;AAcL;AAEA,IAAO,mBAAQ;","names":[],"file":"tableRow.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableRow.tsx"],"sourcesContent":["import { type JSX, type ParentProps, createSignal, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ChildElements, TableRowContext, createRowColumns, useTableLabels, useTableSection } from \"./tableColumns\";\n\nexport interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {\n  /** Marks the row as selected (adds aria-selected + styling). */\n  selected?: boolean;\n  /** Reflects expandable-row state (adds aria-expanded + styling). */\n  expanded?: boolean;\n  /** Test id of the `<tr>`; `table-row` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLTableRowElement>;\n}\n\nexport function TableRow(props: ParentProps<TableRowProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"selected\", \"expanded\", \"ref\", \"data-testid\"]);\n  // Each cell learns its column, by which a body cell of a stacked table finds\n  // its label in the head.\n  const table = useTableLabels();\n  const [element, setElement] = createSignal<HTMLTableRowElement>();\n  const columns = createRowColumns(() => !!table?.stacked(), useTableSection(), element);\n  return (\n    <tr\n      {...rest}\n      ref={mergeRefs(local.ref, setElement)}\n      data-testid={local[\"data-testid\"] ?? \"table-row\"}\n      class={cn(\"smwb-table__row\", local.class, {\n        \"smwb-table__row_selected\": local.selected,\n        \"smwb-table__row_expanded\": local.expanded,\n      })}\n      // `selected` and `expanded` win over the caller's aria-selected and\n      // aria-expanded; without them (undefined), the caller's stay.\n      aria-selected={local.selected ?? undefined}\n      aria-expanded={local.expanded ?? undefined}\n    >\n      <TableRowContext.Provider value={columns}>\n        <ChildElements onItems={columns.setItems}>{local.children}</ChildElements>\n      </TableRowContext.Provider>\n    </tr>\n  );\n}\n\nexport default TableRow;\n"],"mappings":"AAAA,SAAqC,cAAc,kBAAkB;AACrE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,eAAe,iBAAiB,kBAAkB,gBAAgB,uBAAuB;AAY3F,SAAS,SAAS,OAAgD;AACvE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,YAAY,YAAY,OAAO,aAAa,CAAC;AAG3G,QAAM,QAAQ,eAAe;AAC7B,QAAM,CAAC,SAAS,UAAU,IAAI,aAAkC;AAChE,QAAM,UAAU,iBAAiB,MAAM,CAAC,CAAC,OAAO,QAAQ,GAAG,gBAAgB,GAAG,OAAO;AACrF,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,UAAU;AAAA,IACpC,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,mBAAmB,MAAM,OAAO;AAAA,MACxC,4BAA4B,MAAM;AAAA,MAClC,4BAA4B,MAAM;AAAA,IACpC,CAAC;AAAA,IAGD,eAAe,MAAM,YAAY;AAAA,IACjC,eAAe,MAAM,YAAY;AAAA,GAClC;AAAA,MACC,CAAC,gBAAgB,SAAS,OAAO,SAAS;AAAA,QACxC,CAAC,cAAc,SAAS,QAAQ,WAAW,MAAM,SAAS,EAAzD,cAAyE;AAAA,MAC5E,EAFC,gBAAgB,SAEU;AAAA,IAC7B,EAhBC;AAkBL;AAEA,IAAO,mBAAQ;","names":[],"file":"tableRow.jsx"}

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

@@ -4,6 +4,9 @@ import cn from "clsx";
 import { createFloating } from "../../../primitives/createFloating";
 import { LazyImage } from "../lazyImage";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
+import { isOwnClick } from "../../../utils/ownClick";
+import { splitControlProps } from "../../../utils/controlProps";
 function ThumbCard(props) {
   const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);
   const [local, rest] = splitProps(merged, [
@@ -19,8 +22,15 @@ function ThumbCard(props) {
     "disabled",
     "hoverDelay",
     "class",
-    "ref"
+    "ref",
+    // The card sets these on its root too; its own handlers call the caller's.
+    "onClick",
+    "onKeyDown",
+    "onMouseEnter",
+    "onMouseLeave"
   ]);
+  const [control, box] = splitControlProps(rest);
+  let content;
   const topStart = children(() => local.topStart);
   const topEnd = children(() => local.topEnd);
   const caption = children(() => local.caption);
@@ -33,51 +43,70 @@ function ThumbCard(props) {
       hoverTimer = void 0;
     }
   };
-  const onEnter = () => {
+  const onEnter = (event) => {
+    callHandler(local.onMouseEnter, event);
     if (local.hoverPreview == null || local.disabled) return;
     clearTimer();
     hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);
   };
-  const onLeave = () => {
+  const onLeave = (event) => {
+    callHandler(local.onMouseLeave, event);
     clearTimer();
     setPreviewOpen(false);
   };
   onCleanup(clearTimer);
   const interactive = () => !!local.onSelect && !local.disabled;
+  const onClick = (event) => {
+    if (local.disabled) return;
+    const selects = isOwnClick(event, content ?? null);
+    callHandler(local.onClick, event);
+    if (selects) local.onSelect?.();
+  };
   const onKeyDown = (event) => {
-    if (interactive() && (event.key === "Enter" || event.key === " ")) {
+    callHandler(local.onKeyDown, event);
+    if (!interactive() || event.target !== content) return;
+    if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       local.onSelect?.();
     }
   };
   return <div
-    {...rest}
+    {...box}
     ref={mergeRefs(local.ref, (el) => floating.setReference(el))}
     class={cn("smwb-thumb-card", local.class, {
       "smwb-thumb-card--selected": local.selected,
       "smwb-thumb-card--disabled": local.disabled,
       "smwb-thumb-card--interactive": interactive()
     })}
-    role={interactive() ? "button" : void 0}
-    tabindex={interactive() ? 0 : void 0}
-    aria-pressed={local.onSelect ? local.selected ?? false : void 0}
-    aria-disabled={local.disabled || void 0}
-    onClick={interactive() ? () => local.onSelect?.() : void 0}
+    onClick={onClick}
     onKeyDown={onKeyDown}
     onMouseEnter={onEnter}
     onMouseLeave={onLeave}
   >
-      <div class="smwb-thumb-card__media">
-        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
-        <Show when={topStart()}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{topStart()}</div>
-        </Show>
-        <Show when={topEnd()}>
-          <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{topEnd()}</div>
+      <div
+    {...control}
+    ref={(el) => content = el}
+    class="smwb-thumb-card__content"
+    role={local.onSelect ? "button" : void 0}
+    tabindex={control.tabindex ?? (interactive() ? 0 : void 0)}
+    aria-pressed={local.onSelect ? local.selected ?? false : void 0}
+    aria-disabled={local.disabled || void 0}
+  >
+        <div class="smwb-thumb-card__media">
+          <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />
+        </div>
+        <Show when={caption()}>
+          <div class="smwb-thumb-card__caption">{caption()}</div>
         </Show>
       </div>
-      <Show when={caption()}>
-        <div class="smwb-thumb-card__caption">{caption()}</div>
+      {
+    /* Beside the button, not in it: controls here keep their names and input. */
+  }
+      <Show when={topStart()}>
+        <div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">{topStart()}</div>
+      </Show>
+      <Show when={topEnd()}>
+        <div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">{topEnd()}</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, 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"}
+{"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\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too, but `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*` attributes go to\n   * the card's content, `.smwb-thumb-card__content` (the image and the caption): that is the card's button when it has\n   * `onSelect`, and the element to focus.\n   */\n  class?: string | undefined;\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  /**\n   * Text under the image. With `onSelect` it is part of the card's button and names it, so keep controls out of it:\n   * they go in `topStart` / `topEnd`.\n   */\n  caption?: JSX.Element;\n  /** Outlines the image; with `onSelect`, the card's button is also `aria-pressed=\"true\"`. */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: its content (the image and the caption) becomes a toggle button with `aria-pressed`,\n   * selected by a click and by Enter / Space. The corner slots are not part of that button but its siblings, laid over\n   * the image, so their controls keep their own names, clicks and keys.\n   *\n   * A click selects the card unless it lands in a control in a slot (button, link, input, anything focusable) or in a\n   * portal opened from the card. Slot content that is not a control keeps its click from selecting the card by calling\n   * `preventDefault()` on it.\n   */\n  onSelect?: () => void;\n  /**\n   * Runs on each click on the card, before `onSelect`, but not while the card is `disabled`.\n   * A click on a control in a slot runs it too, without selecting the card.\n   * Enter / Space select the card without a click, so they call only `onSelect`.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\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  /**\n   * Top-left overlay slot (e.g. a favourite star). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topStart?: JSX.Element;\n  /**\n   * Top-right overlay slot (e.g. a kebab menu). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  /**\n   * Dims the card and ignores clicks on it: neither `onClick` nor `onSelect` runs.\n   * Keys do not select it either, and there is no hover preview. With `onSelect`\n   * the card is still a button, `aria-disabled` and out of the tab order.\n   */\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 *\n * The root is a box around the card's content (the image and the caption, the\n * card's button when it is selectable) and the corner slots, which are laid\n * over the image beside that button rather than inside it.\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    // The card sets these on its root too; its own handlers call the caller's.\n    \"onClick\",\n    \"onKeyDown\",\n    \"onMouseEnter\",\n    \"onMouseLeave\",\n  ]);\n  // What the card is to the keyboard and to assistive tech goes to its\n  // content, the element that is its button; the rest stays on the root.\n  const [control, box] = splitControlProps(rest);\n  let content: HTMLDivElement | undefined;\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: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseEnter, event);\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseLeave, event);\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  // A disabled card ignores clicks, the caller's onClick included: it says\n  // aria-disabled, and its styles turn pointer events off. The caller's onClick\n  // sees every other click, those in the slots too, but only clicks on the\n  // card's content and on what is not a control in a slot select it: not one\n  // on a control in a slot, nor one in a Portal opened from the card. That is\n  // settled before onClick runs, so what onClick does to the event or the DOM\n  // does not change it.\n  const onClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    const selects = isOwnClick(event, content ?? null);\n    callHandler(local.onClick, event);\n    if (selects) local.onSelect?.();\n  };\n  // Keys pressed on a control in a slot bubble up here too; only the keys of\n  // the card's button select it.\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!interactive() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...box}\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      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"smwb-thumb-card__content\"\n        // With onSelect the content is the card's button and says whether it is\n        // pressed, and a disabled card says so: these win over the caller's, and\n        // where the card sets none (undefined), the caller's stay. Its tabindex\n        // is a default: the caller's wins, e.g. for roving focus.\n        role={local.onSelect ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n        aria-disabled={local.disabled || undefined}\n      >\n        <div class=\"smwb-thumb-card__media\">\n          <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        </div>\n        <Show when={caption()}>\n          <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n        </Show>\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\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      <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"}