@k2b/ui 0.22.0 → 0.23.0

package/dist/ssr/content/ChartFilterControls.js

@@ -3,9 +3,12 @@ import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<div class=\"k2b-chart-explorer__dimension\" role=\"group\"", ">", "<output class=\"k2b-chart-explorer__dimension-value\" for=\"", "\">", "</output><div id=\"", "\" class=\"k2b-chart-explorer__steps\">", "</div></div>"],
-  _tmpl$2 = ["<div class=\"k2b-chart-explorer__legend\">", "<div class=\"k2b-chart-explorer__status\" role=\"status\">", "", "</div></div>"],
-  _tmpl$3 = ["<span", ">", "</span>"];
+var _tmpl$ = ["<div class=\"k2b-chart-explorer__dimension\" role=\"group\"", ">", "<output class=\"k2b-chart-explorer__dimension-value\" for=\"", "\"", "><span aria-hidden=\"true\">", "</span><span>", "</span></output><div id=\"", "\" class=\"k2b-chart-explorer__steps\">", "</div></div>"],
+  _tmpl$2 = "<i class=\"ti ti-pin\" aria-hidden=\"true\"></i>",
+  _tmpl$3 = ["<span>", "</span>"],
+  _tmpl$4 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = ["<div class=\"k2b-chart-explorer__legend\">", "", "<div class=\"k2b-chart-explorer__status\" role=\"status\">", "", "</div></div>"],
+  _tmpl$6 = ["<span", ">", "</span>"];
 import { createEffect, createSignal, createUniqueId, For, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { FilterChip } from "../actions/FilterChip";
@@ -28,6 +31,8 @@ export function ChartFilterControls(props) {
   const [keyboardSteps, setKeyboardSteps] = createSignal(false);
   let pointerFocus = false;
   const stepLabel = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
+  // The step name reserves the width of the longest one, so stepping never resizes the slider under the finger.
+  const widestStep = () => props.steps?.reduce((widest, step) => [...step.label].length > [...widest].length ? step.label : widest, "") ?? "";
   return [_$createComponent(Show, {
     get when() {
       return props.steps?.length;
@@ -62,21 +67,21 @@ export function ChartFilterControls(props) {
             step: step.key
           });
         }
-      })), `${_$escape(id, true)}-dimension`, _$escape(stepLabel(props.request.step)), `${_$escape(id, true)}-steps`, _$escape(_$createComponent(For, {
+      })), `${_$escape(id, true)}-dimension`, _$ssrAttribute("title", _$escape(stepLabel(props.request.step), true), false), _$escape(widestStep()), _$escape(stepLabel(props.request.step)), `${_$escape(id, true)}-steps`, _$escape(_$createComponent(For, {
         get each() {
           return props.steps;
         },
-        children: step => _$ssr(_tmpl$3, _$ssrAttribute("data-current", step.key === props.request.step ? "true" : _$escape(undefined, true), false), _$escape(step.label))
+        children: step => _$ssr(_tmpl$6, _$ssrAttribute("data-current", step.key === props.request.step ? "true" : _$escape(undefined, true), false), _$escape(step.label))
       })));
     }
-  }), _$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$5, _$escape(_$createComponent(Show, {
     get when() {
       return props.series?.length;
     },
     get children() {
       return _$createComponent(FilterChip, {
         get label() {
-          return chartMessages().chartSeries;
+          return props.seriesLabel ?? chartMessages().chartSeries;
         },
         icon: "ti ti-chart-dots",
         get disabled() {
@@ -107,6 +112,43 @@ export function ChartFilterControls(props) {
         })
       });
     }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.compare)() && props.steps?.length;
+    },
+    get children() {
+      return _$createComponent(Button, {
+        variant: "secondary",
+        "class": "k2b-chart-explorer__pin",
+        get disabled() {
+          return props.disabled || props.request.referenceStep === undefined && props.request.step === undefined;
+        },
+        get ["aria-label"]() {
+          return _$memo(() => props.request.referenceStep === undefined)() ? undefined : `${chartMessages().chartRemoveComparison}: ${stepLabel(props.request.referenceStep)}`;
+        },
+        onClick: () => props.onRequest({
+          ...props.request,
+          referenceStep: props.request.referenceStep === undefined ? props.request.step : undefined
+        }),
+        get children() {
+          return [_$createComponent(Show, {
+            get when() {
+              return props.request.referenceStep === undefined;
+            },
+            get children() {
+              return _$ssr(_tmpl$2);
+            }
+          }), _$ssr(_tmpl$3, props.request.referenceStep === undefined ? _$escape(chartMessages().chartPinReference) : `${_$escape(chartMessages().chartReference)}: ${_$escape(stepLabel(props.request.referenceStep))}`), _$createComponent(Show, {
+            get when() {
+              return props.request.referenceStep !== undefined;
+            },
+            get children() {
+              return _$ssr(_tmpl$4);
+            }
+          })];
+        }
+      });
+    }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.failed;

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\";\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":[]}
+{"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/DataTable.js

@@ -6,22 +6,24 @@ 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=\"", "\"", "><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";
@@ -215,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;
       },
@@ -250,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));
@@ -354,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 ?? 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, {
+          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)))
@@ -367,7 +385,7 @@ 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 ?? dataTableMessages().noRecords;
                 }
@@ -381,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(),
@@ -404,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));
                 }
               })];
             }
@@ -412,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
@@ -430,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`))
           })];
         }
       });
@@ -467,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;
@@ -485,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;