@k2b/ui 0.20.0 → 0.22.0

package/dist/browser/content/ChartFilterControls.js

@@ -16,6 +16,7 @@ import { Button } from "../actions/Button";
 import { FilterChip } from "../actions/FilterChip";
 import { Slider } from "../inputs/ChoiceInputs";
 import { useUiMessages } from "../intl/messages";
+import { useChartMessages } from "./chart-messages";
 /** Shared controls for a standalone explorer or an atomic group of charts. */
 export function ChartFilterControls(props) {
   const validateOptions = () => {
@@ -27,6 +28,7 @@ export function ChartFilterControls(props) {
   validateOptions();
   createEffect(validateOptions);
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const id = `k2b-chart-controls-${createUniqueId()}`;
   const [keyboardSteps, setKeyboardSteps] = createSignal(false);
   let pointerFocus = false;
@@ -129,7 +131,7 @@ export function ChartFilterControls(props) {
       get children() {
         return _$createComponent(FilterChip, {
           get label() {
-            return messages().chartSeries;
+            return chartMessages().chartSeries;
           },
           icon: "ti ti-chart-dots",
           get disabled() {
@@ -183,7 +185,7 @@ export function ChartFilterControls(props) {
         return props.failed;
       },
       get children() {
-        return ["· ", _$memo(() => messages().chartPreviousData), _$createComponent(Show, {
+        return ["· ", _$memo(() => chartMessages().chartPreviousData), _$createComponent(Show, {
           get when() {
             return props.steps?.length;
           },

package/dist/browser/content/ChartFilterControls.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartFilterControls.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { FilterChip } from \"../actions/FilterChip\";\nimport { Slider } from \"../inputs/ChoiceInputs\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartExplorerRequest } from \"./chart-explorer\";\n\nexport type ChartFilterControlsProps = {\n  request: ChartExplorerRequest;\n  displayedRequest: ChartExplorerRequest;\n  steps?: readonly { key: string; label: string }[];\n  series?: readonly { key: string; label: string; color: string }[];\n  dimensionLabel?: string;\n  disabled?: boolean;\n  failed?: boolean;\n  onRequest: (request: ChartExplorerRequest) => void;\n  onRetry?: () => void;\n};\n\n/** Shared controls for a standalone explorer or an atomic group of charts. */\nexport function ChartFilterControls(props: ChartFilterControlsProps) {\n  const validateOptions = () => {\n    for (const items of [props.steps, props.series]) {\n      const keys = items?.map((item) => item.key) ?? [];\n      if (keys.some((key) => !key) || new Set(keys).size !== keys.length)\n        throw new Error(\"Chart control options require nonempty unique keys\");\n    }\n  };\n  validateOptions();\n  createEffect(validateOptions);\n  const messages = useUiMessages();\n  const id = `k2b-chart-controls-${createUniqueId()}`;\n  const [keyboardSteps, setKeyboardSteps] = createSignal(false);\n  let pointerFocus = false;\n  const stepLabel = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <>\n      <Show when={props.steps?.length}>\n        <div\n          class=\"k2b-chart-explorer__dimension\"\n          role=\"group\"\n          aria-label={props.dimensionLabel ?? messages().range}\n          data-keyboard={keyboardSteps() ? \"true\" : undefined}\n          onPointerDown={() => {\n            pointerFocus = true;\n            setKeyboardSteps(false);\n          }}\n          onKeyDown={() => {\n            pointerFocus = false;\n            setKeyboardSteps(true);\n          }}\n          onFocusIn={(event) => {\n            if (!pointerFocus && event.target.matches(\":focus-visible\")) setKeyboardSteps(true);\n          }}\n          onFocusOut={() => {\n            pointerFocus = false;\n            setKeyboardSteps(false);\n          }}\n        >\n          <Slider\n            id={`${id}-dimension`}\n            showValue={false}\n            aria-describedby={`${id}-steps`}\n            label={props.dimensionLabel ?? messages().range}\n            min={0}\n            max={Math.max(0, (props.steps?.length ?? 1) - 1)}\n            step={1}\n            value={Math.max(0, props.steps?.findIndex((step) => step.key === props.request.step) ?? 0)}\n            disabled={props.disabled || (props.steps?.length ?? 0) < 2}\n            formatValue={(index) => props.steps?.[index]?.label ?? \"\"}\n            aria-valuetext={stepLabel(props.request.step)}\n            onValueChange={(index) => {\n              const step = props.steps?.[index];\n              if (step) props.onRequest({ ...props.request, step: step.key });\n            }}\n          />\n          <output class=\"k2b-chart-explorer__dimension-value\" for={`${id}-dimension`}>\n            {stepLabel(props.request.step)}\n          </output>\n          <div id={`${id}-steps`} class=\"k2b-chart-explorer__steps\">\n            <For each={props.steps}>\n              {(step) => <span data-current={step.key === props.request.step ? \"true\" : undefined}>{step.label}</span>}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <div class=\"k2b-chart-explorer__legend\">\n        <Show when={props.series?.length}>\n          <FilterChip\n            label={messages().chartSeries}\n            icon=\"ti ti-chart-dots\"\n            disabled={props.disabled}\n            value={props.request.visibleKeys ?? props.series?.map((item) => item.key) ?? []}\n            defaultValue={props.series?.map((item) => item.key) ?? []}\n            isActive={props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length}\n            options={[\n              { multiple: true, options: (props.series ?? []).map((item) => ({ value: item.key, label: item.label, color: item.color })) },\n            ]}\n            onValueChange={(visibleKeys) => props.onRequest({ ...props.request, visibleKeys })}\n          />\n        </Show>\n        <div class=\"k2b-chart-explorer__status\" role=\"status\">\n          <Show when={props.failed}>\n            {messages().couldNotLoadData}{\" \"}\n            <Button variant=\"text\" size=\"sm\" onClick={props.onRetry}>\n              {messages().retry}\n            </Button>\n          </Show>\n          <Show when={props.failed}>\n            · {messages().chartPreviousData}\n            <Show when={props.steps?.length}>: {stepLabel(props.displayedRequest.step)}</Show>\n          </Show>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartFilterControls.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { FilterChip } from \"../actions/FilterChip\";\nimport { Slider } from \"../inputs/ChoiceInputs\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartExplorerRequest } from \"./chart-explorer\";\nimport { useChartMessages } from \"./chart-messages\";\n\nexport type ChartFilterControlsProps = {\n  request: ChartExplorerRequest;\n  displayedRequest: ChartExplorerRequest;\n  steps?: readonly { key: string; label: string }[];\n  series?: readonly { key: string; label: string; color: string }[];\n  dimensionLabel?: string;\n  disabled?: boolean;\n  failed?: boolean;\n  onRequest: (request: ChartExplorerRequest) => void;\n  onRetry?: () => void;\n};\n\n/** Shared controls for a standalone explorer or an atomic group of charts. */\nexport function ChartFilterControls(props: ChartFilterControlsProps) {\n  const validateOptions = () => {\n    for (const items of [props.steps, props.series]) {\n      const keys = items?.map((item) => item.key) ?? [];\n      if (keys.some((key) => !key) || new Set(keys).size !== keys.length)\n        throw new Error(\"Chart control options require nonempty unique keys\");\n    }\n  };\n  validateOptions();\n  createEffect(validateOptions);\n  const messages = useUiMessages();\n  const chartMessages = useChartMessages();\n  const id = `k2b-chart-controls-${createUniqueId()}`;\n  const [keyboardSteps, setKeyboardSteps] = createSignal(false);\n  let pointerFocus = false;\n  const stepLabel = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <>\n      <Show when={props.steps?.length}>\n        <div\n          class=\"k2b-chart-explorer__dimension\"\n          role=\"group\"\n          aria-label={props.dimensionLabel ?? messages().range}\n          data-keyboard={keyboardSteps() ? \"true\" : undefined}\n          onPointerDown={() => {\n            pointerFocus = true;\n            setKeyboardSteps(false);\n          }}\n          onKeyDown={() => {\n            pointerFocus = false;\n            setKeyboardSteps(true);\n          }}\n          onFocusIn={(event) => {\n            if (!pointerFocus && event.target.matches(\":focus-visible\")) setKeyboardSteps(true);\n          }}\n          onFocusOut={() => {\n            pointerFocus = false;\n            setKeyboardSteps(false);\n          }}\n        >\n          <Slider\n            id={`${id}-dimension`}\n            showValue={false}\n            aria-describedby={`${id}-steps`}\n            label={props.dimensionLabel ?? messages().range}\n            min={0}\n            max={Math.max(0, (props.steps?.length ?? 1) - 1)}\n            step={1}\n            value={Math.max(0, props.steps?.findIndex((step) => step.key === props.request.step) ?? 0)}\n            disabled={props.disabled || (props.steps?.length ?? 0) < 2}\n            formatValue={(index) => props.steps?.[index]?.label ?? \"\"}\n            aria-valuetext={stepLabel(props.request.step)}\n            onValueChange={(index) => {\n              const step = props.steps?.[index];\n              if (step) props.onRequest({ ...props.request, step: step.key });\n            }}\n          />\n          <output class=\"k2b-chart-explorer__dimension-value\" for={`${id}-dimension`}>\n            {stepLabel(props.request.step)}\n          </output>\n          <div id={`${id}-steps`} class=\"k2b-chart-explorer__steps\">\n            <For each={props.steps}>\n              {(step) => <span data-current={step.key === props.request.step ? \"true\" : undefined}>{step.label}</span>}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <div class=\"k2b-chart-explorer__legend\">\n        <Show when={props.series?.length}>\n          <FilterChip\n            label={chartMessages().chartSeries}\n            icon=\"ti ti-chart-dots\"\n            disabled={props.disabled}\n            value={props.request.visibleKeys ?? props.series?.map((item) => item.key) ?? []}\n            defaultValue={props.series?.map((item) => item.key) ?? []}\n            isActive={props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length}\n            options={[\n              { multiple: true, options: (props.series ?? []).map((item) => ({ value: item.key, label: item.label, color: item.color })) },\n            ]}\n            onValueChange={(visibleKeys) => props.onRequest({ ...props.request, visibleKeys })}\n          />\n        </Show>\n        <div class=\"k2b-chart-explorer__status\" role=\"status\">\n          <Show when={props.failed}>\n            {messages().couldNotLoadData}{\" \"}\n            <Button variant=\"text\" size=\"sm\" onClick={props.onRetry}>\n              {messages().retry}\n            </Button>\n          </Show>\n          <Show when={props.failed}>\n            · {chartMessages().chartPreviousData}\n            <Show when={props.steps?.length}>: {stepLabel(props.displayedRequest.step)}</Show>\n          </Show>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartSnapshotView.js

@@ -12,13 +12,13 @@ import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart data-interactive=true role=group tabindex=0><div class=k2b-chart__svg></div><span class=k2b-chart__anchor aria-hidden=true></span><span class="k2b-chart__tooltip k2b-tooltip"role=tooltip popover=manual data-instant=true>`);
 import { createEffect, createUniqueId, onCleanup, onMount } from "solid-js";
 import { isServer } from "solid-js/web";
-import { useUiMessages } from "../intl/messages";
 import { createChartInspection, sameChartDatum } from "./chart-inspection";
+import { useChartMessages } from "./chart-messages";
 import { selectedChartSvg } from "./chart-svg";
 
 /** Internal display for server-prepared geometry. Viewports are snapshot-owned. */
 export function ChartSnapshotView(props) {
-  const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   let container;
   let tooltip;
   let anchor;
@@ -81,7 +81,7 @@ export function ChartSnapshotView(props) {
     _$effect(_p$ => {
       var _v$ = props.snapshot.kind,
         _v$2 = props.style,
-        _v$3 = messages().interactiveChart,
+        _v$3 = chartMessages().interactiveChart,
         _v$4 = props.snapshot.stretch ? "true" : undefined,
         _v$5 = `${props.snapshot.width}px`,
         _v$6 = `${props.snapshot.height}px`,

package/dist/browser/content/ChartSnapshotView.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartSnapshotView.tsx"],"sourcesContent":["import { createEffect, createUniqueId, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { createChartInspection, sameChartDatum } from \"./chart-inspection\";\nimport type { ChartSnapshot } from \"./chart-snapshot\";\nimport { selectedChartSvg } from \"./chart-svg\";\n\n/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */\nexport function ChartSnapshotView(props: {\n  snapshot: ChartSnapshot;\n  cursor?: ChartCursor;\n  selectedKey: string | null;\n  onSelect: (key: string) => void;\n  style?: JSX.CSSProperties;\n}) {\n  const messages = useUiMessages();\n  let container: HTMLDivElement | undefined;\n  let tooltip: HTMLSpanElement | undefined;\n  let anchor: HTMLSpanElement | undefined;\n  const id = `k2b-chart-tooltip-${createUniqueId()}`;\n  const inspection = createChartInspection({\n    container: () => container,\n    cursor: () => props.cursor,\n    tooltip: () => tooltip,\n    anchor: () => anchor,\n    kind: () => props.snapshot.kind,\n    enabled: () => true,\n    format: ({ datum }) => props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum))?.tooltip ?? { rows: [] },\n    select: ({ datum }) => {\n      const mark = props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum));\n      if (mark) props.onSelect(mark.rowKey);\n    },\n  });\n  createEffect(() => {\n    props.snapshot;\n    inspection.invalidate();\n  });\n  createEffect(() => inspection.selectData(props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum)));\n  onMount(() => {\n    const outside = (event: Event) => {\n      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();\n    };\n    window.addEventListener(\"pointerdown\", outside);\n    window.addEventListener(\"scroll\", inspection.close, true);\n    onCleanup(() => {\n      window.removeEventListener(\"pointerdown\", outside);\n      window.removeEventListener(\"scroll\", inspection.close, true);\n    });\n  });\n  onCleanup(inspection.close);\n  return (\n    <div\n      ref={container}\n      class=\"k2b-chart\"\n      data-chart-kind={props.snapshot.kind}\n      data-interactive=\"true\"\n      style={props.style}\n      role=\"group\"\n      aria-label={messages().interactiveChart}\n      tabIndex={0}\n      onPointerDown={inspection.down}\n      onPointerMove={inspection.move}\n      onClick={inspection.click}\n      onPointerLeave={inspection.leave}\n      onFocusIn={inspection.focus}\n      onFocusOut={inspection.close}\n      onKeyDown={inspection.key}\n    >\n      <div\n        class=\"k2b-chart__svg\"\n        data-stretch={props.snapshot.stretch ? \"true\" : undefined}\n        style={{\n          \"--k2b-chart-width\": `${props.snapshot.width}px`,\n          \"--k2b-chart-height\": `${props.snapshot.height}px`,\n          \"aspect-ratio\": `${props.snapshot.width}/${props.snapshot.height}`,\n        }}\n        innerHTML={\n          isServer\n            ? selectedChartSvg(\n                props.snapshot.svg,\n                props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum),\n              )\n            : props.snapshot.svg\n        }\n      />\n      <span ref={anchor} class=\"k2b-chart__anchor\" aria-hidden=\"true\" />\n      <span ref={tooltip} id={id} class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/ChartSnapshotView.tsx"],"sourcesContent":["import { createEffect, createUniqueId, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { createChartInspection, sameChartDatum } from \"./chart-inspection\";\nimport { useChartMessages } from \"./chart-messages\";\nimport type { ChartSnapshot } from \"./chart-snapshot\";\nimport { selectedChartSvg } from \"./chart-svg\";\n\n/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */\nexport function ChartSnapshotView(props: {\n  snapshot: ChartSnapshot;\n  cursor?: ChartCursor;\n  selectedKey: string | null;\n  onSelect: (key: string) => void;\n  style?: JSX.CSSProperties;\n}) {\n  const chartMessages = useChartMessages();\n  let container: HTMLDivElement | undefined;\n  let tooltip: HTMLSpanElement | undefined;\n  let anchor: HTMLSpanElement | undefined;\n  const id = `k2b-chart-tooltip-${createUniqueId()}`;\n  const inspection = createChartInspection({\n    container: () => container,\n    cursor: () => props.cursor,\n    tooltip: () => tooltip,\n    anchor: () => anchor,\n    kind: () => props.snapshot.kind,\n    enabled: () => true,\n    format: ({ datum }) => props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum))?.tooltip ?? { rows: [] },\n    select: ({ datum }) => {\n      const mark = props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum));\n      if (mark) props.onSelect(mark.rowKey);\n    },\n  });\n  createEffect(() => {\n    props.snapshot;\n    inspection.invalidate();\n  });\n  createEffect(() => inspection.selectData(props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum)));\n  onMount(() => {\n    const outside = (event: Event) => {\n      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();\n    };\n    window.addEventListener(\"pointerdown\", outside);\n    window.addEventListener(\"scroll\", inspection.close, true);\n    onCleanup(() => {\n      window.removeEventListener(\"pointerdown\", outside);\n      window.removeEventListener(\"scroll\", inspection.close, true);\n    });\n  });\n  onCleanup(inspection.close);\n  return (\n    <div\n      ref={container}\n      class=\"k2b-chart\"\n      data-chart-kind={props.snapshot.kind}\n      data-interactive=\"true\"\n      style={props.style}\n      role=\"group\"\n      aria-label={chartMessages().interactiveChart}\n      tabIndex={0}\n      onPointerDown={inspection.down}\n      onPointerMove={inspection.move}\n      onClick={inspection.click}\n      onPointerLeave={inspection.leave}\n      onFocusIn={inspection.focus}\n      onFocusOut={inspection.close}\n      onKeyDown={inspection.key}\n    >\n      <div\n        class=\"k2b-chart__svg\"\n        data-stretch={props.snapshot.stretch ? \"true\" : undefined}\n        style={{\n          \"--k2b-chart-width\": `${props.snapshot.width}px`,\n          \"--k2b-chart-height\": `${props.snapshot.height}px`,\n          \"aspect-ratio\": `${props.snapshot.width}/${props.snapshot.height}`,\n        }}\n        innerHTML={\n          isServer\n            ? selectedChartSvg(\n                props.snapshot.svg,\n                props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum),\n              )\n            : props.snapshot.svg\n        }\n      />\n      <span ref={anchor} class=\"k2b-chart__anchor\" aria-hidden=\"true\" />\n      <span ref={tooltip} id={id} class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/DataTable.js

@@ -17,7 +17,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`
   _tmpl$4 = /*#__PURE__*/_$template(`<a class="k2b-data-table__header-content k2b-data-table__sort"><span class=k2b-data-table__header-line><!$><!/><i aria-hidden=true>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div role=region tabindex=0 class=k2b-table-wrap><table><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<th scope=col>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
   _tmpl$0 = /*#__PURE__*/_$template(`<tr>`),
@@ -30,11 +30,13 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`
   _tmpl$15 = /*#__PURE__*/_$template(`<footer>`);
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
+import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { PanelHeader } from "../layout/PanelHeader";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
+import { useDataTableMessages } from "./data-table-messages";
 const DataTablePanelContext = createContext();
 const defaultRender = (value, locale, messages) => {
   if (value === null || value === undefined || value === "") return "—";
@@ -71,6 +73,7 @@ const scrollbarMetrics = (viewportSize, contentSize, scrollOffset) => {
 };
 function DataTableRoot(props) {
   const messages = useUiMessages();
+  const dataTableMessages = useDataTableMessages();
   const locale = useLocale();
   const [hoveredColumn, setHoveredColumn] = createSignal(null);
   const [scrollbars, setScrollbars] = createSignal({
@@ -176,12 +179,15 @@ function DataTableRoot(props) {
     revealScrollbars();
   };
   const startScrollbarDrag = (event, axis) => {
+    if (event.button !== 0) return;
     event.preventDefault();
     const metrics = scrollbars()[axis];
     const rect = event.currentTarget.getBoundingClientRect();
     const pointerOffset = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
     scrollbarDragOffset = event.target === event.currentTarget ? metrics.size / 2 : Math.min(metrics.size, Math.max(0, pointerOffset - metrics.offset));
     event.currentTarget.setPointerCapture(event.pointerId);
+    // The track's own pointerup or pointercancel ends the hold.
+    suppressTextSelection(event.pointerId);
     scrollFromPointer(event, axis);
   };
   const valueOf = (row, col) => {
@@ -358,7 +364,7 @@ function DataTableRoot(props) {
       return _$createComponent(Placeholder, {
         surface: "paper",
         get description() {
-          return _$memo(() => messages().noColumns);
+          return _$memo(() => dataTableMessages().noColumns);
         }
       });
     },
@@ -420,14 +426,14 @@ function DataTableRoot(props) {
                   }) : renderHeaderDefault(col);
                 })());
                 _$effect(_p$ => {
-                  var _v$12 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
-                    _v$13 = alignAttr(col),
-                    _v$14 = columnHighlighted(index()),
-                    _v$15 = ariaSortFor(col);
-                  _v$12 !== _p$.e && _$className(_el$19, _p$.e = _v$12);
-                  _v$13 !== _p$.t && _$setAttribute(_el$19, "data-align", _p$.t = _v$13);
-                  _v$14 !== _p$.a && _$setAttribute(_el$19, "data-highlighted", _p$.a = _v$14);
-                  _v$15 !== _p$.o && _$setAttribute(_el$19, "aria-sort", _p$.o = _v$15);
+                  var _v$13 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
+                    _v$14 = alignAttr(col),
+                    _v$15 = columnHighlighted(index()),
+                    _v$16 = ariaSortFor(col);
+                  _v$13 !== _p$.e && _$className(_el$19, _p$.e = _v$13);
+                  _v$14 !== _p$.t && _$setAttribute(_el$19, "data-align", _p$.t = _v$14);
+                  _v$15 !== _p$.a && _$setAttribute(_el$19, "data-highlighted", _p$.a = _v$15);
+                  _v$16 !== _p$.o && _$setAttribute(_el$19, "aria-sort", _p$.o = _v$16);
                   return _p$;
                 }, {
                   e: undefined,
@@ -448,7 +454,7 @@ function DataTableRoot(props) {
                     _el$21 = _el$20.firstChild;
                   _$insert(_el$21, _$createComponent(Placeholder, {
                     get description() {
-                      return _$memo(() => props.empty ?? messages().noRecords);
+                      return _$memo(() => props.empty ?? dataTableMessages().noRecords);
                     }
                   }));
                   _$effect(() => _$setAttribute(_el$21, "colspan", props.columns.length));
@@ -500,16 +506,16 @@ function DataTableRoot(props) {
                               }) : renderValueDefault(value());
                             })());
                             _$effect(_p$ => {
-                              var _v$22 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$23 = alignAttr(col),
-                                _v$24 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$25 = columnHighlighted(index()),
-                                _v$26 = cellContentClass();
-                              _v$22 !== _p$.e && _$className(_el$23, _p$.e = _v$22);
-                              _v$23 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$23);
-                              _v$24 !== _p$.a && _$setAttribute(_el$23, "data-valign", _p$.a = _v$24);
-                              _v$25 !== _p$.o && _$setAttribute(_el$23, "data-highlighted", _p$.o = _v$25);
-                              _v$26 !== _p$.i && _$className(_el$24, _p$.i = _v$26);
+                              var _v$23 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                                _v$24 = alignAttr(col),
+                                _v$25 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$26 = columnHighlighted(index()),
+                                _v$27 = cellContentClass();
+                              _v$23 !== _p$.e && _$className(_el$23, _p$.e = _v$23);
+                              _v$24 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$24);
+                              _v$25 !== _p$.a && _$setAttribute(_el$23, "data-valign", _p$.a = _v$25);
+                              _v$26 !== _p$.o && _$setAttribute(_el$23, "data-highlighted", _p$.o = _v$26);
+                              _v$27 !== _p$.i && _$className(_el$24, _p$.i = _v$27);
                               return _p$;
                             }, {
                               e: undefined,
@@ -523,18 +529,18 @@ function DataTableRoot(props) {
                         }
                       }));
                       _$effect(_p$ => {
-                        var _v$16 = `k2b-data-table__row ${rowClass(row)}`,
-                          _v$17 = shouldHoverRows() ? "true" : undefined,
-                          _v$18 = shouldHoverRows() && isInteractive() ? "true" : undefined,
-                          _v$19 = isSelected() ? "true" : undefined,
-                          _v$20 = props.selection ? !!isSelected() : undefined,
-                          _v$21 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$16 !== _p$.e && _$className(_el$22, _p$.e = _v$16);
-                        _v$17 !== _p$.t && _$setAttribute(_el$22, "data-hover", _p$.t = _v$17);
-                        _v$18 !== _p$.a && _$setAttribute(_el$22, "data-clickable", _p$.a = _v$18);
-                        _v$19 !== _p$.o && _$setAttribute(_el$22, "data-selected", _p$.o = _v$19);
-                        _v$20 !== _p$.i && _$setAttribute(_el$22, "aria-selected", _p$.i = _v$20);
-                        _v$21 !== _p$.n && _$setAttribute(_el$22, "tabindex", _p$.n = _v$21);
+                        var _v$17 = `k2b-data-table__row ${rowClass(row)}`,
+                          _v$18 = shouldHoverRows() ? "true" : undefined,
+                          _v$19 = shouldHoverRows() && isInteractive() ? "true" : undefined,
+                          _v$20 = isSelected() ? "true" : undefined,
+                          _v$21 = props.selection ? !!isSelected() : undefined,
+                          _v$22 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
+                        _v$17 !== _p$.e && _$className(_el$22, _p$.e = _v$17);
+                        _v$18 !== _p$.t && _$setAttribute(_el$22, "data-hover", _p$.t = _v$18);
+                        _v$19 !== _p$.a && _$setAttribute(_el$22, "data-clickable", _p$.a = _v$19);
+                        _v$20 !== _p$.o && _$setAttribute(_el$22, "data-selected", _p$.o = _v$20);
+                        _v$21 !== _p$.i && _$setAttribute(_el$22, "aria-selected", _p$.i = _v$21);
+                        _v$22 !== _p$.n && _$setAttribute(_el$22, "tabindex", _p$.n = _v$22);
                         return _p$;
                       }, {
                         e: undefined,
@@ -586,10 +592,10 @@ function DataTableRoot(props) {
                         }) : renderValueDefault(value());
                       })());
                       _$effect(_p$ => {
-                        var _v$27 = alignAttr(col),
-                          _v$28 = columnHighlighted(index());
-                        _v$27 !== _p$.e && _$setAttribute(_el$27, "data-align", _p$.e = _v$27);
-                        _v$28 !== _p$.t && _$setAttribute(_el$27, "data-highlighted", _p$.t = _v$28);
+                        var _v$28 = alignAttr(col),
+                          _v$29 = columnHighlighted(index());
+                        _v$28 !== _p$.e && _$setAttribute(_el$27, "data-align", _p$.e = _v$28);
+                        _v$29 !== _p$.t && _$setAttribute(_el$27, "data-highlighted", _p$.t = _v$29);
                         return _p$;
                       }, {
                         e: undefined,
@@ -614,24 +620,26 @@ function DataTableRoot(props) {
               }
             }), _el$18, _co$3);
             _$effect(_p$ => {
-              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? messages().dataTable,
+              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
                 _v$6 = labelledBy(),
-                _v$7 = props.density === "compact" ? "compact" : undefined,
-                _v$8 = props.footer ? "true" : undefined,
-                _v$9 = surface(),
-                _v$0 = props.scrollPreserveKey || undefined,
-                _v$1 = tableClass(),
-                _v$10 = props.fillHeight ? "true" : undefined,
-                _v$11 = props.stickyHeader === false ? undefined : "true";
+                _v$7 = `k2b-table-wrap${props.scrollClass ? ` ${props.scrollClass}` : ""}`,
+                _v$8 = props.density === "compact" ? "compact" : undefined,
+                _v$9 = props.footer ? "true" : undefined,
+                _v$0 = surface(),
+                _v$1 = props.scrollPreserveKey || undefined,
+                _v$10 = tableClass(),
+                _v$11 = props.fillHeight ? "true" : undefined,
+                _v$12 = props.stickyHeader === false ? undefined : "true";
               _v$5 !== _p$.e && _$setAttribute(_el$9, "aria-label", _p$.e = _v$5);
               _v$6 !== _p$.t && _$setAttribute(_el$9, "aria-labelledby", _p$.t = _v$6);
-              _v$7 !== _p$.a && _$setAttribute(_el$9, "data-density", _p$.a = _v$7);
-              _v$8 !== _p$.o && _$setAttribute(_el$9, "data-has-footer", _p$.o = _v$8);
-              _v$9 !== _p$.i && _$setAttribute(_el$9, "data-surface", _p$.i = _v$9);
-              _v$0 !== _p$.n && _$setAttribute(_el$9, "data-scroll-preserve", _p$.n = _v$0);
-              _v$1 !== _p$.s && _$className(_el$0, _p$.s = _v$1);
-              _v$10 !== _p$.h && _$setAttribute(_el$0, "data-fill", _p$.h = _v$10);
-              _v$11 !== _p$.r && _$setAttribute(_el$1, "data-sticky", _p$.r = _v$11);
+              _v$7 !== _p$.a && _$className(_el$9, _p$.a = _v$7);
+              _v$8 !== _p$.o && _$setAttribute(_el$9, "data-density", _p$.o = _v$8);
+              _v$9 !== _p$.i && _$setAttribute(_el$9, "data-has-footer", _p$.i = _v$9);
+              _v$0 !== _p$.n && _$setAttribute(_el$9, "data-surface", _p$.n = _v$0);
+              _v$1 !== _p$.s && _$setAttribute(_el$9, "data-scroll-preserve", _p$.s = _v$1);
+              _v$10 !== _p$.h && _$className(_el$0, _p$.h = _v$10);
+              _v$11 !== _p$.r && _$setAttribute(_el$0, "data-fill", _p$.r = _v$11);
+              _v$12 !== _p$.d && _$setAttribute(_el$1, "data-sticky", _p$.d = _v$12);
               return _p$;
             }, {
               e: undefined,
@@ -642,7 +650,8 @@ function DataTableRoot(props) {
               n: undefined,
               s: undefined,
               h: undefined,
-              r: undefined
+              r: undefined,
+              d: undefined
             });
             return _el$9;
           })(), _$createComponent(For, {
@@ -658,12 +667,12 @@ function DataTableRoot(props) {
               _el$28.$$pointerdown = event => startScrollbarDrag(event, axis);
               _$setAttribute(_el$28, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$29 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$30 = `${scrollbars()[axis].offset}px`,
-                  _v$31 = `${scrollbars()[axis].size}px`;
-                _v$29 !== _p$.e && _$setAttribute(_el$28, "data-overflow", _p$.e = _v$29);
-                _v$30 !== _p$.t && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-offset", _p$.t = _v$30);
-                _v$31 !== _p$.a && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-size", _p$.a = _v$31);
+                var _v$30 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$31 = `${scrollbars()[axis].offset}px`,
+                  _v$32 = `${scrollbars()[axis].size}px`;
+                _v$30 !== _p$.e && _$setAttribute(_el$28, "data-overflow", _p$.e = _v$30);
+                _v$31 !== _p$.t && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-offset", _p$.t = _v$31);
+                _v$32 !== _p$.a && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-size", _p$.a = _v$32);
                 return _p$;
               }, {
                 e: undefined,