@k2b/ui 0.21.0 → 0.23.0

package/dist/ssr/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 to filter; `color` shows a swatch and belongs only to series the chart colors that way. */\n  series?: readonly { key: string; label: string; color?: string }[];\n  dimensionLabel?: string;\n  /** Label of the series filter, such as the column the series come from; defaults to the inherited series label. */\n  seriesLabel?: string;\n  /** Offer pinning the current step as a reference for comparison. */\n  compare?: boolean;\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  // The step name reserves the width of the longest one, so stepping never resizes the slider under the finger.\n  const widestStep = () =>\n    props.steps?.reduce((widest, step) => ([...step.label].length > [...widest].length ? step.label : widest), \"\") ?? \"\";\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`} title={stepLabel(props.request.step)}>\n            <span aria-hidden=\"true\">{widestStep()}</span>\n            <span>{stepLabel(props.request.step)}</span>\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={props.seriesLabel ?? 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        <Show when={props.compare && props.steps?.length}>\n          <Button\n            variant=\"secondary\"\n            class=\"k2b-chart-explorer__pin\"\n            disabled={props.disabled || (props.request.referenceStep === undefined && props.request.step === undefined)}\n            aria-label={\n              props.request.referenceStep === undefined\n                ? undefined\n                : `${chartMessages().chartRemoveComparison}: ${stepLabel(props.request.referenceStep)}`\n            }\n            onClick={() =>\n              props.onRequest({\n                ...props.request,\n                referenceStep: props.request.referenceStep === undefined ? props.request.step : undefined,\n              })\n            }\n          >\n            <Show when={props.request.referenceStep === undefined}>\n              <i class=\"ti ti-pin\" aria-hidden=\"true\" />\n            </Show>\n            <span>\n              {props.request.referenceStep === undefined\n                ? chartMessages().chartPinReference\n                : `${chartMessages().chartReference}: ${stepLabel(props.request.referenceStep)}`}\n            </span>\n            <Show when={props.request.referenceStep !== undefined}>\n              <i class=\"ti ti-x\" aria-hidden=\"true\" />\n            </Show>\n          </Button>\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/ssr/content/ChartSnapshotView.js

@@ -6,13 +6,13 @@ import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<div class=\"k2b-chart\"", " data-interactive=\"true\" style=\"", "\" role=\"group\"", " tabindex=\"0\"><div class=\"k2b-chart__svg\"", " style=\"", "\">", "</div><span class=\"k2b-chart__anchor\" aria-hidden=\"true\"></span><span", " class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\"></span></div>"];
 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;
@@ -53,6 +53,6 @@ export function ChartSnapshotView(props) {
     });
   });
   onCleanup(inspection.close);
-  return _$ssr(_tmpl$, _$ssrAttribute("data-chart-kind", _$escape(props.snapshot.kind, true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(messages().interactiveChart, true), false), _$ssrAttribute("data-stretch", props.snapshot.stretch ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-chart-width:", `${_$escape(props.snapshot.width, true)}px`) + _$ssrStyleProperty(";--k2b-chart-height:", `${_$escape(props.snapshot.height, true)}px`) + _$ssrStyleProperty(";aspect-ratio:", `${_$escape(props.snapshot.width, true)}/${_$escape(props.snapshot.height, true)}`), isServer ? selectedChartSvg(props.snapshot.svg, props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)) : props.snapshot.svg, _$ssrAttribute("id", _$escape(id, true), false));
+  return _$ssr(_tmpl$, _$ssrAttribute("data-chart-kind", _$escape(props.snapshot.kind, true), false), _$ssrStyle(props.style), _$ssrAttribute("aria-label", _$escape(chartMessages().interactiveChart, true), false), _$ssrAttribute("data-stretch", props.snapshot.stretch ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-chart-width:", `${_$escape(props.snapshot.width, true)}px`) + _$ssrStyleProperty(";--k2b-chart-height:", `${_$escape(props.snapshot.height, true)}px`) + _$ssrStyleProperty(";aspect-ratio:", `${_$escape(props.snapshot.width, true)}/${_$escape(props.snapshot.height, true)}`), isServer ? selectedChartSvg(props.snapshot.svg, props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)) : props.snapshot.svg, _$ssrAttribute("id", _$escape(id, true), false));
 }
 //# sourceMappingURL=ChartSnapshotView.js.map

package/dist/ssr/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/ssr/content/DataTable.js

@@ -6,28 +6,32 @@ import { ssr as _$ssr } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<span class=\"k2b-data-table__header-title\">", "</span>"],
   _tmpl$2 = ["<span class=\"k2b-data-table__header-subtitle\">", "</span>"],
-  _tmpl$3 = ["<div class=\"k2b-data-table__header-content\"", ">", "</div>"],
-  _tmpl$4 = ["<a", " class=\"k2b-data-table__header-content k2b-data-table__sort\"", "><span class=\"k2b-data-table__header-line\">", "<i class=\"", "\"", " aria-hidden=\"true\"></i></span></a>"],
-  _tmpl$5 = ["<tr aria-hidden=\"true\"><td class=\"k2b-data-table__fill\"", "></td></tr>"],
-  _tmpl$6 = "<div class=\"k2b-data-table__sentinel\" aria-hidden=\"true\"></div>",
-  _tmpl$7 = ["<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>", "</div>"],
-  _tmpl$8 = ["<th scope=\"col\" class=\"", "\"", ">", "</th>"],
-  _tmpl$9 = ["<tr><td class=\"k2b-data-table__empty\"", ">", "</td></tr>"],
-  _tmpl$0 = ["<tr class=\"", "\"", ">", "</tr>"],
-  _tmpl$1 = ["<td class=\"", "\"", "><div", ">", "</div></td>"],
-  _tmpl$10 = ["<tfoot class=\"k2b-data-table__foot\" data-sticky=\"true\"><tr class=\"k2b-data-table__foot-row\">", "</tr></tfoot>"],
-  _tmpl$11 = ["<td class=\"k2b-data-table__footer-cell\"", ">", "</td>"],
-  _tmpl$12 = ["<div class=\"k2b-data-table__scrollbar\"", " aria-hidden=\"true\"><span style=\"", "\"></span></div>"],
-  _tmpl$13 = ["<div class=\"", "\">", "</div>"],
-  _tmpl$14 = ["<span", ">", "</span>"],
-  _tmpl$15 = ["<footer class=\"", "\">", "</footer>"];
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
+  _tmpl$3 = ["<span class=\"k2b-data-table__header-line\">", "<i class=\"", "\"", " aria-hidden=\"true\"></i></span>"],
+  _tmpl$4 = ["<a", " class=\"k2b-data-table__header-content k2b-data-table__sort\"", ">", "</a>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-data-table__header-content k2b-data-table__sort\"", ">", "</button>"],
+  _tmpl$6 = ["<div class=\"k2b-data-table__header-content\"", ">", "</div>"],
+  _tmpl$7 = ["<tr aria-hidden=\"true\"><td class=\"k2b-data-table__fill\"", "></td></tr>"],
+  _tmpl$8 = "<div class=\"k2b-data-table__sentinel\" aria-hidden=\"true\"></div>",
+  _tmpl$9 = ["<div role=\"region\"", " tabindex=\"0\" class=\"", "\"", "><table", "><thead class=\"k2b-data-table__head\"", "><tr class=\"k2b-data-table__head-row\">", "</tr></thead><tbody>", "</tbody>", "</table>", "</div>"],
+  _tmpl$0 = ["<th scope=\"col\" class=\"", "\"", ">", "</th>"],
+  _tmpl$1 = ["<tr><td class=\"k2b-data-table__empty\"", ">", "</td></tr>"],
+  _tmpl$10 = ["<tr class=\"", "\"", ">", "</tr>"],
+  _tmpl$11 = ["<td class=\"", "\"", "><div", ">", "</div></td>"],
+  _tmpl$12 = ["<tfoot class=\"k2b-data-table__foot\" data-sticky=\"true\"><tr class=\"k2b-data-table__foot-row\">", "</tr></tfoot>"],
+  _tmpl$13 = ["<td class=\"k2b-data-table__footer-cell\"", ">", "</td>"],
+  _tmpl$14 = ["<div class=\"k2b-data-table__scrollbar\"", " aria-hidden=\"true\"><span style=\"", "\"></span></div>"],
+  _tmpl$15 = ["<div class=\"", "\">", "</div>"],
+  _tmpl$16 = ["<span", ">", "</span>"],
+  _tmpl$17 = ["<footer class=\"", "\">", "</footer>"];
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, Match, onCleanup, onMount, Show, Switch, 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 "—";
@@ -64,6 +68,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({
@@ -169,12 +174,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) => {
@@ -209,34 +217,29 @@ function DataTableRoot(props) {
   const sortKeyOf = col => col.sortable === true ? col.id : typeof col.sortable === "string" ? col.sortable : null;
 
   /**
-   * Sorting is a link, not a handler: these tables are server-rendered, so the
-   * order belongs in the URL. Clicking the active column flips its direction.
+   * Sorting is a link by default: server-rendered tables keep the order in the
+   * URL. Client tables pass onSortChange instead. Clicking the active column
+   * flips its direction.
    */
-  const sortLinkFor = col => {
-    const key = sortKeyOf(col);
-    if (!key || !props.sortHref) return null;
-    const active = props.sort?.key === key;
-    const direction = active && props.sort?.direction === "desc" ? "asc" : "desc";
-    return {
-      href: props.sortHref({
-        key,
-        direction
-      }),
-      active,
-      direction
-    };
-  };
+  const nextSortFor = key => ({
+    key,
+    direction: props.sort?.key === key && props.sort?.direction === "desc" ? "asc" : "desc"
+  });
 
   /** Only a sortable column carries a sort state; the rest carry none at all. */
   const ariaSortFor = col => {
     const key = sortKeyOf(col);
-    if (!key || !props.sortHref && !props.renderHeader) return undefined;
+    if (!key || !props.sortHref && !props.onSortChange && !props.renderHeader) return undefined;
     if (props.sort?.key !== key) return "none";
     return props.sort?.direction === "asc" ? "ascending" : "descending";
   };
   const renderHeaderDefault = col => {
-    const sort = sortLinkFor(col);
-    const title = [_$ssr(_tmpl$, _$escape(renderColumnPart(col.header, col))), _$createComponent(Show, {
+    const key = sortKeyOf(col);
+    // Only how a column sorts decides the element. The order lives in its attributes, so a header button keeps
+    // keyboard focus when a click sorts the table and the reader can press it again to reverse the order.
+    const mode = createMemo(() => !key ? null : props.sortHref ? "link" : props.onSortChange ? "button" : null);
+    const active = () => key !== null && props.sort?.key === key;
+    const title = () => [_$ssr(_tmpl$, _$escape(renderColumnPart(col.header, col))), _$createComponent(Show, {
       get when() {
         return col.subtitle !== undefined;
       },
@@ -244,8 +247,29 @@ function DataTableRoot(props) {
         return _$ssr(_tmpl$2, _$escape(renderColumnPart(col.subtitle, col)));
       }
     })];
-    if (!sort) return _$ssr(_tmpl$3, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false), _$escape(title));
-    return _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(sort.href, true), false), _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false), _$escape(title), `k2b-data-table__sort-icon ti ${props.sort?.direction === "asc" && sort.active ? "ti-arrow-up" : "ti-arrow-down"}`, _$ssrAttribute("data-active", sort.active ? "true" : _$escape(undefined, true), false));
+    const line = () => _$ssr(_tmpl$3, _$escape(title()), `k2b-data-table__sort-icon ti ${active() && props.sort?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`, _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false));
+    return _$createComponent(Switch, {
+      get fallback() {
+        return _$ssr(_tmpl$6, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false), _$escape(title()));
+      },
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return mode() === "link";
+          },
+          get children() {
+            return _$ssr(_tmpl$4, _$ssrAttribute("href", key ? _$escape(props.sortHref?.(nextSortFor(key)), true) : _$escape(undefined, true), false), _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false), _$escape(line()));
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return mode() === "button";
+          },
+          get children() {
+            return _$ssr(_tmpl$5, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false), _$escape(line()));
+          }
+        })];
+      }
+    });
   };
   const renderValueDefault = value => defaultRender(value, locale(), messages());
   const renderCellDefault = (row, col) => renderValueDefault(valueOf(row, col));
@@ -316,7 +340,7 @@ function DataTableRoot(props) {
       return _$createComponent(Placeholder, {
         surface: "paper",
         get description() {
-          return messages().noColumns;
+          return dataTableMessages().noColumns;
         }
       });
     },
@@ -348,11 +372,11 @@ function DataTableRoot(props) {
         },
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
-          return [_$ssr(_tmpl$7, _$ssrAttribute("aria-label", labelledBy() ? _$escape(undefined, true) : _$escape(props.ariaLabel ?? messages().dataTable, true), false) + _$ssrAttribute("aria-labelledby", _$escape(labelledBy(), true), false), _$ssrAttribute("data-density", props.density === "compact" ? "compact" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-footer", props.footer ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-surface", _$escape(surface(), true), false) + _$ssrAttribute("data-scroll-preserve", _$escape(props.scrollPreserveKey || undefined, true), false), _$ssrAttribute("class", _$escape(tableClass(), true), false) + _$ssrAttribute("data-fill", props.fillHeight ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-sticky", props.stickyHeader === false ? _$escape(undefined, true) : "true", false), _$escape(_$createComponent(For, {
+          return [_$ssr(_tmpl$9, _$ssrAttribute("aria-label", labelledBy() ? _$escape(undefined, true) : _$escape(props.ariaLabel ?? dataTableMessages().dataTable, true), false) + _$ssrAttribute("aria-labelledby", _$escape(labelledBy(), true), false), `k2b-table-wrap${props.scrollClass ? ` ${_$escape(props.scrollClass, true)}` : ""}`, _$ssrAttribute("data-density", props.density === "compact" ? "compact" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-footer", props.footer ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-surface", _$escape(surface(), true), false) + _$ssrAttribute("data-scroll-preserve", _$escape(props.scrollPreserveKey || undefined, true), false), _$ssrAttribute("class", _$escape(tableClass(), true), false) + _$ssrAttribute("data-fill", props.fillHeight ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-sticky", props.stickyHeader === false ? _$escape(undefined, true) : "true", false), _$escape(_$createComponent(For, {
             get each() {
               return props.columns;
             },
-            children: (col, index) => _$ssr(_tmpl$8, `${_$escape(col.headerClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false) + _$ssrAttribute("aria-sort", _$escape(ariaSortFor(col), true), false), props.renderHeader ? _$escape(props.renderHeader({
+            children: (col, index) => _$ssr(_tmpl$0, `${_$escape(col.headerClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false) + _$ssrAttribute("aria-sort", _$escape(ariaSortFor(col), true), false), props.renderHeader ? _$escape(props.renderHeader({
               col,
               render: () => renderHeaderDefault(col)
             })) : _$escape(renderHeaderDefault(col)))
@@ -361,9 +385,9 @@ function DataTableRoot(props) {
               return props.rows.length > 0;
             },
             get fallback() {
-              return _$ssr(_tmpl$9, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false), _$escape(_$createComponent(Placeholder, {
+              return _$ssr(_tmpl$1, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false), _$escape(_$createComponent(Placeholder, {
                 get description() {
-                  return props.empty ?? messages().noRecords;
+                  return props.empty ?? dataTableMessages().noRecords;
                 }
               })));
             },
@@ -375,13 +399,13 @@ function DataTableRoot(props) {
                 children: row => {
                   const id = () => rowId(row);
                   const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
-                  return _$ssr(_tmpl$0, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-selected", props.selection ? !!isSelected() : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+                  return _$ssr(_tmpl$10, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-selected", props.selection ? !!isSelected() : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
                     get each() {
                       return props.columns;
                     },
                     children: (col, index) => {
                       const value = () => valueOf(row, col);
-                      return _$ssr(_tmpl$1, `${_$escape(col.cellClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-valign", props.verticalAlign && props.verticalAlign !== "middle" ? _$escape(props.verticalAlign, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), _$ssrAttribute("class", _$escape(cellContentClass(), true), false), props.renderCell ? _$escape(props.renderCell({
+                      return _$ssr(_tmpl$11, `${_$escape(col.cellClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-valign", props.verticalAlign && props.verticalAlign !== "middle" ? _$escape(props.verticalAlign, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), _$ssrAttribute("class", _$escape(cellContentClass(), true), false), props.renderCell ? _$escape(props.renderCell({
                         row,
                         col,
                         value: value(),
@@ -398,7 +422,7 @@ function DataTableRoot(props) {
                   return props.fillHeight;
                 },
                 get children() {
-                  return _$ssr(_tmpl$5, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false));
+                  return _$ssr(_tmpl$7, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false));
                 }
               })];
             }
@@ -406,13 +430,13 @@ function DataTableRoot(props) {
             get when() {
               return props.footer;
             },
-            children: footer => _$ssr(_tmpl$10, _$escape(_$createComponent(For, {
+            children: footer => _$ssr(_tmpl$12, _$escape(_$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => {
                 const value = () => footer().values?.[col.id];
-                return _$ssr(_tmpl$11, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), footer().renderCell ? _$escape(footer().renderCell({
+                return _$ssr(_tmpl$13, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), footer().renderCell ? _$escape(footer().renderCell({
                   col,
                   value: value(),
                   render: renderValueDefault
@@ -424,11 +448,11 @@ function DataTableRoot(props) {
               return shouldRenderLoadMoreSentinel();
             },
             get children() {
-              return _$ssr(_tmpl$6);
+              return _$ssr(_tmpl$8);
             }
           }))), _$createComponent(For, {
             each: ["y", "x"],
-            children: axis => _$ssr(_tmpl$12, _$ssrAttribute("data-axis", _$escape(axis, true), false) + _$ssrAttribute("data-overflow", scrollbars()[axis].overflow ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-data-table-scroll-offset:", `${_$escape(scrollbars()[axis].offset, true)}px`) + _$ssrStyleProperty(";--k2b-data-table-scroll-size:", `${_$escape(scrollbars()[axis].size, true)}px`))
+            children: axis => _$ssr(_tmpl$14, _$ssrAttribute("data-axis", _$escape(axis, true), false) + _$ssrAttribute("data-overflow", scrollbars()[axis].overflow ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-data-table-scroll-offset:", `${_$escape(scrollbars()[axis].offset, true)}px`) + _$ssrStyleProperty(";--k2b-data-table-scroll-size:", `${_$escape(scrollbars()[axis].size, true)}px`))
           })];
         }
       });
@@ -461,9 +485,9 @@ const DataTablePanel = props => {
 const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
-  return _$ssr(_tmpl$13, `k2b-data-panel__header ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(PanelHeader, {
+  return _$ssr(_tmpl$15, `k2b-data-panel__header ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(PanelHeader, {
     get title() {
-      return _$ssr(_tmpl$14, _$ssrAttribute("id", _$escape(panel?.headingId, true), false), _$escape(props.title));
+      return _$ssr(_tmpl$16, _$ssrAttribute("id", _$escape(panel?.headingId, true), false), _$escape(props.title));
     },
     get subtitle() {
       return props.subtitle;
@@ -479,8 +503,8 @@ const DataTableHeader = props => {
     }
   })));
 };
-const DataTableControls = props => _$ssr(_tmpl$13, `k2b-data-panel__controls ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
-const DataTablePanelFooter = props => _$ssr(_tmpl$15, `k2b-data-panel__footer ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+const DataTableControls = props => _$ssr(_tmpl$15, `k2b-data-panel__controls ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+const DataTablePanelFooter = props => _$ssr(_tmpl$17, `k2b-data-panel__footer ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;
 DataTable.Header = DataTableHeader;