@dbcdk/react-components 0.0.208 → 0.0.209

package/dist/components/overlay/side-panel/SidePanel.cjs

@@ -13,6 +13,36 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -36,23 +66,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = react.useState(isOpen);
   const [isActive, setIsActive] = react.useState(false);
   const panelRef = react.useRef(null);
+  const returnFocusRef = react.useRef(null);
+  const wasOpenRef = react.useRef(false);
   react.useEffect(() => setMounted(true), []);
   react.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   react.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  react.useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   react.useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -103,6 +180,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: styles__default.default.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.detailsHeader, children: [

package/dist/components/overlay/side-panel/SidePanel.js

@@ -7,6 +7,36 @@ import { Headline } from '../../../components/headline/Headline';
 import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -30,23 +60,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = useState(isOpen);
   const [isActive, setIsActive] = useState(false);
   const panelRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  const wasOpenRef = useRef(false);
   useEffect(() => setMounted(true), []);
   useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -97,6 +174,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [

package/dist/components/split-pane/SplitPane.cjs

@@ -22,7 +22,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SplitPaneContext.SplitPaneProvider,
@@ -31,6 +32,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SplitPaneContainer,
@@ -38,6 +40,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -48,7 +51,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
   const style = react.useMemo(
@@ -66,6 +70,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -77,13 +82,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = SplitPaneContext.useSplitPaneContext();
@@ -101,9 +107,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = react.useCallback(
     (e) => {
       const el = containerRef.current;
@@ -163,13 +170,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = react.useState(Infinity);
   react.useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: styles__default.default.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.d.ts

@@ -10,12 +10,15 @@ export interface SplitPaneProps {
     gutterSize?: number;
     storageKey?: string;
     fillViewport?: boolean;
+    secondaryVisible?: boolean;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, secondaryVisible, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
     children: ReactNode;
 }): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
     children: ReactNode;
 }): JSX.Element;
-export declare function SplitPaneGutter(): JSX.Element;
+export declare function SplitPaneGutter({ label }: {
+    label?: string;
+}): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -16,7 +16,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsx(
     SplitPaneProvider,
@@ -25,6 +26,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsx(
         SplitPaneContainer,
@@ -32,6 +34,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -42,7 +45,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = useSplitPaneContext();
   const style = useMemo(
@@ -60,6 +64,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -71,13 +76,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = useSplitPaneContext();
@@ -95,9 +101,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = useCallback(
     (e) => {
       const el = containerRef.current;
@@ -157,13 +164,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = useState(Infinity);
   useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: styles.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.module.css

@@ -13,6 +13,15 @@
   max-height: 100%;
 }
 
+.container[data-secondary-visible='false'] > .primary {
+  flex: 1 1 auto;
+}
+
+.container[data-secondary-visible='false'] > .gutter,
+.container[data-secondary-visible='false'] > .secondary {
+  display: none;
+}
+
 .container[data-direction='horizontal'] {
   flex-direction: row;
 }

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -44,6 +44,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = React.useRef(null);
@@ -55,8 +56,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   React.useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -108,6 +109,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -118,6 +120,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -6,6 +6,7 @@ export interface SplitPaneContextValue {
     setPrimarySize: (newSize: number) => void;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
     storageKey?: string;
     resetDefault: () => void;
@@ -18,7 +19,8 @@ type SplitPaneProviderProps = {
     initialPrimarySize: number;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     storageKey?: string;
 };
-export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, gutterSize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
 export {};

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -38,6 +38,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = useRef(null);
@@ -49,8 +50,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -102,6 +103,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -112,6 +114,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/tree-view/TreeNodeRow.cjs

@@ -16,12 +16,17 @@ function TreeNodeRow({
   wrapLabels,
   isExpanded,
   toggle,
+  expand,
+  expandOnSelect,
   resolvedChildren,
   loadingIds,
   errorIds,
   requestLoad,
   loadChildren,
   selectedId,
+  currentId,
+  focusedId,
+  onFocusNode,
   onSelectNode,
   renderLabel
 }) {
@@ -33,6 +38,7 @@ function TreeNodeRow({
   const loading = loadingIds.has(node.id);
   const error = errorIds[node.id];
   const selected = selectedId !== void 0 && selectedId === node.id;
+  const current = currentId !== void 0 && currentId === node.id;
   react.useEffect(() => {
     if (expanded && children === void 0 && !loading && !error && loadChildren) {
       requestLoad(node);
@@ -44,38 +50,67 @@ function TreeNodeRow({
       role: "treeitem",
       "aria-expanded": expandable ? expanded : void 0,
       "aria-selected": selected,
+      "aria-current": current ? "page" : void 0,
+      "aria-level": depth + 1,
+      "data-tree-node-id": node.id,
       style: { ["--tree-depth"]: depth },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.row, "data-selected": selected || void 0, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.toggle,
-              onClick: () => expandable && toggle(node.id),
-              disabled: !expandable,
-              "aria-hidden": !expandable,
-              tabIndex: expandable ? 0 : -1,
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `spin ${styles__default.default.spinner}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
-                // A resolved node's chevron means "this has children"; an
-                // unresolved lazy node's dimmer chevron means "might have
-                // children, click to check" - we genuinely don't know yet,
-                // and shouldn't visually assert otherwise.
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: isResolved ? void 0 : styles__default.default.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }) })
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leafSpacer, "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: styles__default.default.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
-            node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: [styles__default.default.label, wrapLabels ? styles__default.default.labelWrap : styles__default.default.labelTruncate].filter(Boolean).join(" "),
-                children: renderLabel ? renderLabel(node) : node.label
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles__default.default.row,
+            "data-tree-row": "true",
+            "data-selected": selected || void 0,
+            "data-current": current || void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.toggle,
+                  "data-tree-toggle": "true",
+                  onClick: () => expandable && toggle(node.id),
+                  disabled: !expandable,
+                  "aria-hidden": !expandable,
+                  tabIndex: -1,
+                  "aria-label": expanded ? "Luk relationer" : "Vis relationer",
+                  children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `spin ${styles__default.default.spinner}`, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                    // A resolved node's chevron means "this has children"; an
+                    // unresolved lazy node's dimmer chevron means "might have
+                    // children, click to check" - we genuinely don't know yet,
+                    // and shouldn't visually assert otherwise.
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: isResolved ? void 0 : styles__default.default.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true" }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.leafSpacer, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.labelButton,
+                  "data-tree-focus-target": "true",
+                  "data-tree-focus-node-id": node.id,
+                  tabIndex: focusedId === node.id ? 0 : -1,
+                  onFocus: () => onFocusNode(node.id),
+                  onClick: () => {
+                    if (expandOnSelect && expandable) expand(node.id);
+                    onSelectNode == null ? void 0 : onSelectNode(node);
+                  },
+                  children: [
+                    node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: [styles__default.default.label, wrapLabels ? styles__default.default.labelWrap : styles__default.default.labelTruncate].filter(Boolean).join(" "),
+                        children: renderLabel ? renderLabel(node) : node.label
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.errorRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles__default.default.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
@@ -88,12 +123,17 @@ function TreeNodeRow({
             wrapLabels,
             isExpanded,
             toggle,
+            expand,
+            expandOnSelect,
             resolvedChildren,
             loadingIds,
             errorIds,
             requestLoad,
             loadChildren,
             selectedId,
+            currentId,
+            focusedId,
+            onFocusNode,
             onSelectNode,
             renderLabel
           },

package/dist/components/tree-view/TreeNodeRow.d.ts

@@ -6,14 +6,19 @@ type TreeNodeRowProps<T> = {
     wrapLabels: boolean;
     isExpanded: (id: string) => boolean;
     toggle: (id: string) => void;
+    expand: (id: string) => void;
+    expandOnSelect: boolean;
     resolvedChildren: Record<string, TreeNode<T>[]>;
     loadingIds: Set<string>;
     errorIds: Record<string, ReactNode>;
     requestLoad: (node: TreeNode<T>) => void;
     loadChildren?: LoadTreeChildren<T>;
     selectedId?: string;
+    currentId?: string;
+    focusedId?: string;
+    onFocusNode: (id: string) => void;
     onSelectNode?: (node: TreeNode<T>) => void;
     renderLabel?: (node: TreeNode<T>) => ReactNode;
 };
-export declare function TreeNodeRow<T>({ node, depth, wrapLabels, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
+export declare function TreeNodeRow<T>({ node, depth, wrapLabels, isExpanded, toggle, expand, expandOnSelect, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, currentId, focusedId, onFocusNode, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
 export {};

package/dist/components/tree-view/TreeNodeRow.js

@@ -10,12 +10,17 @@ function TreeNodeRow({
   wrapLabels,
   isExpanded,
   toggle,
+  expand,
+  expandOnSelect,
   resolvedChildren,
   loadingIds,
   errorIds,
   requestLoad,
   loadChildren,
   selectedId,
+  currentId,
+  focusedId,
+  onFocusNode,
   onSelectNode,
   renderLabel
 }) {
@@ -27,6 +32,7 @@ function TreeNodeRow({
   const loading = loadingIds.has(node.id);
   const error = errorIds[node.id];
   const selected = selectedId !== void 0 && selectedId === node.id;
+  const current = currentId !== void 0 && currentId === node.id;
   useEffect(() => {
     if (expanded && children === void 0 && !loading && !error && loadChildren) {
       requestLoad(node);
@@ -38,38 +44,67 @@ function TreeNodeRow({
       role: "treeitem",
       "aria-expanded": expandable ? expanded : void 0,
       "aria-selected": selected,
+      "aria-current": current ? "page" : void 0,
+      "aria-level": depth + 1,
+      "data-tree-node-id": node.id,
       style: { ["--tree-depth"]: depth },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.row, "data-selected": selected || void 0, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.toggle,
-              onClick: () => expandable && toggle(node.id),
-              disabled: !expandable,
-              "aria-hidden": !expandable,
-              tabIndex: expandable ? 0 : -1,
-              children: loading ? /* @__PURE__ */ jsx("span", { className: `spin ${styles.spinner}`, children: /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
-                // A resolved node's chevron means "this has children"; an
-                // unresolved lazy node's dimmer chevron means "might have
-                // children, click to check" - we genuinely don't know yet,
-                // and shouldn't visually assert otherwise.
-                /* @__PURE__ */ jsx("span", { className: isResolved ? void 0 : styles.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
-              ) : /* @__PURE__ */ jsx("span", { className: styles.leafSpacer, "aria-hidden": "true" })
-            }
-          ),
-          /* @__PURE__ */ jsxs("button", { type: "button", className: styles.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
-            node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: [styles.label, wrapLabels ? styles.labelWrap : styles.labelTruncate].filter(Boolean).join(" "),
-                children: renderLabel ? renderLabel(node) : node.label
-              }
-            )
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.row,
+            "data-tree-row": "true",
+            "data-selected": selected || void 0,
+            "data-current": current || void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles.toggle,
+                  "data-tree-toggle": "true",
+                  onClick: () => expandable && toggle(node.id),
+                  disabled: !expandable,
+                  "aria-hidden": !expandable,
+                  tabIndex: -1,
+                  "aria-label": expanded ? "Luk relationer" : "Vis relationer",
+                  children: loading ? /* @__PURE__ */ jsx("span", { className: `spin ${styles.spinner}`, children: /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true" }) }) : expandable ? (
+                    // A resolved node's chevron means "this has children"; an
+                    // unresolved lazy node's dimmer chevron means "might have
+                    // children, click to check" - we genuinely don't know yet,
+                    // and shouldn't visually assert otherwise.
+                    /* @__PURE__ */ jsx("span", { className: isResolved ? void 0 : styles.toggleUnresolved, children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+                  ) : /* @__PURE__ */ jsx("span", { className: styles.leafSpacer, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles.labelButton,
+                  "data-tree-focus-target": "true",
+                  "data-tree-focus-node-id": node.id,
+                  tabIndex: focusedId === node.id ? 0 : -1,
+                  onFocus: () => onFocusNode(node.id),
+                  onClick: () => {
+                    if (expandOnSelect && expandable) expand(node.id);
+                    onSelectNode == null ? void 0 : onSelectNode(node);
+                  },
+                  children: [
+                    node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: [styles.label, wrapLabels ? styles.labelWrap : styles.labelTruncate].filter(Boolean).join(" "),
+                        children: renderLabel ? renderLabel(node) : node.label
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         error ? /* @__PURE__ */ jsxs("div", { className: styles.errorRow, children: [
           /* @__PURE__ */ jsx("span", { children: error }),
           /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: () => requestLoad(node), children: "Pr\xF8v igen" })
@@ -82,12 +117,17 @@ function TreeNodeRow({
             wrapLabels,
             isExpanded,
             toggle,
+            expand,
+            expandOnSelect,
             resolvedChildren,
             loadingIds,
             errorIds,
             requestLoad,
             loadChildren,
             selectedId,
+            currentId,
+            focusedId,
+            onFocusNode,
             onSelectNode,
             renderLabel
           },

package/dist/components/tree-view/TreeView.cjs

@@ -14,19 +14,29 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function TreeView({
   data,
+  size = "sm",
   loadChildren,
   defaultExpandedIds,
   expandedIds,
   onExpandedIdsChange,
   selectedId,
+  currentId,
   onSelectNode,
+  expandOnSelect = false,
   renderLabel,
   wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const [focusedId, setFocusedId] = react.useState(
+    () => {
+      var _a, _b;
+      return (_b = currentId != null ? currentId : selectedId) != null ? _b : (_a = data[0]) == null ? void 0 : _a.id;
+    }
+  );
   const { isExpanded, toggle, expand } = useTreeExpansion.useTreeExpansion(
     defaultExpandedIds,
     expandedIds,
@@ -60,28 +70,106 @@ function TreeView({
     },
     [loadChildren, loadingIds, expand, loadErrorMessage]
   );
+  const handleTreeKeyDown = react.useCallback((event) => {
+    var _a, _b, _c, _d;
+    const target = event.target;
+    const focusedLabel = target.closest('[data-tree-focus-target="true"]');
+    if (!focusedLabel) return;
+    const visibleItems = Array.from(
+      event.currentTarget.querySelectorAll('[data-tree-focus-target="true"]')
+    );
+    const treeItem = focusedLabel.closest('[role="treeitem"]');
+    if (!treeItem) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const index = visibleItems.indexOf(focusedLabel);
+      const nextIndex = Math.max(
+        0,
+        Math.min(index + (event.key === "ArrowDown" ? 1 : -1), visibleItems.length - 1)
+      );
+      if (nextIndex !== index) {
+        event.preventDefault();
+        (_a = visibleItems[nextIndex]) == null ? void 0 : _a.focus();
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const expanded = treeItem.getAttribute("aria-expanded") === "true";
+      if (treeItem.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        (_b = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _b.click();
+      } else if (expanded) {
+        const firstChild = treeItem.querySelector(
+          ':scope > [role="group"] [data-tree-focus-target="true"]'
+        );
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      if (treeItem.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        (_c = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _c.click();
+        return;
+      }
+      const parentTreeItem = (_d = treeItem.parentElement) == null ? void 0 : _d.closest('[role="treeitem"]');
+      const parentLabel = parentTreeItem == null ? void 0 : parentTreeItem.querySelector(
+        ':scope > [data-tree-row] [data-tree-focus-target="true"]'
+      );
+      if (parentLabel) {
+        event.preventDefault();
+        parentLabel.focus();
+      }
+    }
+  }, []);
   if (data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [styles__default.default.emptyState, className].filter(Boolean).join(" "),
+        "aria-label": ariaLabel,
+        ...rest,
+        children: emptyMessage
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tree", className: [styles__default.default.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
-    TreeNodeRow.TreeNodeRow,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      node,
-      depth: 0,
-      wrapLabels,
-      isExpanded,
-      toggle,
-      resolvedChildren,
-      loadingIds,
-      errorIds,
-      requestLoad,
-      loadChildren,
-      selectedId,
-      onSelectNode,
-      renderLabel
-    },
-    node.id
-  )) });
+      role: "tree",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      className: [styles__default.default.tree, className].filter(Boolean).join(" "),
+      onKeyDown: handleTreeKeyDown,
+      ...rest,
+      children: data.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+        TreeNodeRow.TreeNodeRow,
+        {
+          node,
+          depth: 0,
+          wrapLabels,
+          isExpanded,
+          toggle,
+          expand,
+          expandOnSelect,
+          resolvedChildren,
+          loadingIds,
+          errorIds,
+          requestLoad,
+          loadChildren,
+          selectedId,
+          currentId,
+          focusedId,
+          onFocusNode: setFocusedId,
+          onSelectNode,
+          renderLabel
+        },
+        node.id
+      ))
+    }
+  );
 }
 
 Object.defineProperty(exports, "collectExpandableIds", {

package/dist/components/tree-view/TreeView.d.ts

@@ -17,4 +17,4 @@ export { collectExpandableIds, findAncestorIds } from './utils';
  * useTreeExpansion), and it can be left uncontrolled or owned by the
  * caller via `expandedIds`/`onExpandedIdsChange`.
  */
-export declare function TreeView<T = unknown>({ data, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, onSelectNode, renderLabel, wrapLabels, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;
+export declare function TreeView<T = unknown>({ data, size, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, currentId, onSelectNode, expandOnSelect, renderLabel, wrapLabels, emptyMessage, loadErrorMessage, className, 'aria-label': ariaLabel, ...rest }: TreeViewProps<T>): JSX.Element;

package/dist/components/tree-view/TreeView.js

@@ -8,19 +8,29 @@ export { collectExpandableIds, findAncestorIds } from './utils';
 
 function TreeView({
   data,
+  size = "sm",
   loadChildren,
   defaultExpandedIds,
   expandedIds,
   onExpandedIdsChange,
   selectedId,
+  currentId,
   onSelectNode,
+  expandOnSelect = false,
   renderLabel,
   wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const [focusedId, setFocusedId] = useState(
+    () => {
+      var _a, _b;
+      return (_b = currentId != null ? currentId : selectedId) != null ? _b : (_a = data[0]) == null ? void 0 : _a.id;
+    }
+  );
   const { isExpanded, toggle, expand } = useTreeExpansion(
     defaultExpandedIds,
     expandedIds,
@@ -54,28 +64,106 @@ function TreeView({
     },
     [loadChildren, loadingIds, expand, loadErrorMessage]
   );
+  const handleTreeKeyDown = useCallback((event) => {
+    var _a, _b, _c, _d;
+    const target = event.target;
+    const focusedLabel = target.closest('[data-tree-focus-target="true"]');
+    if (!focusedLabel) return;
+    const visibleItems = Array.from(
+      event.currentTarget.querySelectorAll('[data-tree-focus-target="true"]')
+    );
+    const treeItem = focusedLabel.closest('[role="treeitem"]');
+    if (!treeItem) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const index = visibleItems.indexOf(focusedLabel);
+      const nextIndex = Math.max(
+        0,
+        Math.min(index + (event.key === "ArrowDown" ? 1 : -1), visibleItems.length - 1)
+      );
+      if (nextIndex !== index) {
+        event.preventDefault();
+        (_a = visibleItems[nextIndex]) == null ? void 0 : _a.focus();
+      }
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      const expanded = treeItem.getAttribute("aria-expanded") === "true";
+      if (treeItem.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        (_b = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _b.click();
+      } else if (expanded) {
+        const firstChild = treeItem.querySelector(
+          ':scope > [role="group"] [data-tree-focus-target="true"]'
+        );
+        if (firstChild) {
+          event.preventDefault();
+          firstChild.focus();
+        }
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      if (treeItem.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        (_c = treeItem.querySelector('[data-tree-toggle="true"]')) == null ? void 0 : _c.click();
+        return;
+      }
+      const parentTreeItem = (_d = treeItem.parentElement) == null ? void 0 : _d.closest('[role="treeitem"]');
+      const parentLabel = parentTreeItem == null ? void 0 : parentTreeItem.querySelector(
+        ':scope > [data-tree-row] [data-tree-focus-target="true"]'
+      );
+      if (parentLabel) {
+        event.preventDefault();
+        parentLabel.focus();
+      }
+    }
+  }, []);
   if (data.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: [styles.emptyState, className].filter(Boolean).join(" "), ...rest, children: emptyMessage });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [styles.emptyState, className].filter(Boolean).join(" "),
+        "aria-label": ariaLabel,
+        ...rest,
+        children: emptyMessage
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { role: "tree", className: [styles.tree, className].filter(Boolean).join(" "), ...rest, children: data.map((node) => /* @__PURE__ */ jsx(
-    TreeNodeRow,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      node,
-      depth: 0,
-      wrapLabels,
-      isExpanded,
-      toggle,
-      resolvedChildren,
-      loadingIds,
-      errorIds,
-      requestLoad,
-      loadChildren,
-      selectedId,
-      onSelectNode,
-      renderLabel
-    },
-    node.id
-  )) });
+      role: "tree",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      className: [styles.tree, className].filter(Boolean).join(" "),
+      onKeyDown: handleTreeKeyDown,
+      ...rest,
+      children: data.map((node) => /* @__PURE__ */ jsx(
+        TreeNodeRow,
+        {
+          node,
+          depth: 0,
+          wrapLabels,
+          isExpanded,
+          toggle,
+          expand,
+          expandOnSelect,
+          resolvedChildren,
+          loadingIds,
+          errorIds,
+          requestLoad,
+          loadChildren,
+          selectedId,
+          currentId,
+          focusedId,
+          onFocusNode: setFocusedId,
+          onSelectNode,
+          renderLabel
+        },
+        node.id
+      ))
+    }
+  );
 }
 
 export { TreeView };

package/dist/components/tree-view/TreeView.module.css

@@ -21,8 +21,44 @@
   border-radius: var(--border-radius-default);
 }
 
+.tree[data-size='md'] .row {
+  min-block-size: calc(var(--spacing-md) + var(--spacing-sm));
+  padding-inline-start: 0;
+  padding-inline-end: calc(var(--spacing-xs) - var(--spacing-2xs));
+}
+
+.tree[data-size='md'] .toggle,
+.tree[data-size='md'] .labelButton {
+  box-sizing: border-box;
+  min-block-size: calc(var(--spacing-md) + var(--spacing-sm));
+}
+
+.tree[data-size='md'] .toggle {
+  justify-content: center;
+  align-self: stretch;
+  --tree-indent: calc(
+    var(--tree-depth) * (var(--spacing-md) + 2 * var(--spacing-2xs)) + var(--spacing-xs) -
+      var(--spacing-2xs)
+  );
+  inline-size: calc(var(--tree-indent) + var(--spacing-lg) + var(--spacing-sm));
+  padding-inline-start: var(--tree-indent);
+  padding-inline-end: 0;
+}
+
+.tree[data-size='md'] .errorRow {
+  padding-inline-start: calc(
+    (var(--tree-depth) + 1) * (var(--spacing-md) + 2 * var(--spacing-2xs)) + var(--spacing-xs) -
+      var(--spacing-2xs)
+  );
+}
+
 .row[data-selected='true'] {
-  background: color-mix(in oklab, var(--color-brand) 16%, transparent);
+  background: var(--color-status-info-bg);
+}
+
+.row[data-current='true'] {
+  background: var(--color-bg-surface-subtle);
+  font-weight: 600;
 }
 
 .toggle,
@@ -82,13 +118,21 @@
   padding-inline: var(--spacing-xs);
 }
 
-.row:hover .toggle:not(:disabled),
-.row:hover .labelButton,
+.row:hover {
+  background: var(--color-bg-hover-subtle);
+}
+
 .toggle:focus-visible,
 .labelButton:focus-visible {
   background: var(--color-bg-hover-subtle);
 }
 
+.toggle:not(:disabled):hover,
+.toggle:not(:disabled):focus-visible {
+  background: var(--color-bg-pressed-subtle);
+  color: var(--color-fg-default);
+}
+
 .toggle:focus-visible,
 .labelButton:focus-visible {
   outline: none;

package/dist/components/tree-view/types.d.ts

@@ -23,6 +23,7 @@ export type TreeNode<T = unknown> = {
 /** Fetches one node's children. Called once per node, the first time it's expanded (and again on retry after a failed load). Presence of this prop on TreeView is what switches it into lazy mode. */
 export type LoadTreeChildren<T = unknown> = (node: TreeNode<T>) => Promise<TreeNode<T>[]>;
 export type TreeViewProps<T = unknown> = {
+    size?: 'sm' | 'md';
     /** Top-level nodes. In eager mode every node's full subtree must already be present via `children`. In lazy mode only the nodes you already know about need to be here - deeper levels arrive via `loadChildren`. */
     data: TreeNode<T>[];
     /** Omit for eager mode. Provide for lazy mode. */
@@ -33,7 +34,11 @@ export type TreeViewProps<T = unknown> = {
     expandedIds?: string[];
     onExpandedIdsChange?: (ids: string[]) => void;
     selectedId?: string;
+    /** Marks the page's current record independently from the preview selection. */
+    currentId?: string;
     onSelectNode?: (node: TreeNode<T>) => void;
+    /** Expand branches when their labels are activated, without collapsing already-open branches. */
+    expandOnSelect?: boolean;
     /** Customize how a node's row content renders; defaults to `node.icon` + `node.label`. */
     renderLabel?: (node: TreeNode<T>) => ReactNode;
     /** Allows node labels to wrap onto multiple lines. Set to false to truncate them to one line. */
@@ -42,5 +47,6 @@ export type TreeViewProps<T = unknown> = {
     /** Formats the error shown under a node whose `loadChildren` call rejected. */
     loadErrorMessage?: (error: unknown, node: TreeNode<T>) => ReactNode;
     className?: string;
+    'aria-label'?: string;
     'data-testid'?: string;
 };

package/dist/styles/css-helper-classes/typography.css

@@ -6,6 +6,10 @@
   font-weight: var(--font-weight-semibold);
 }
 
+.dbc-normal-text {
+  font-weight: var(--font-weight-default);
+}
+
 .dbc-prose :is(p, ol, li) {
   line-height: var(--line-height-relaxed);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.208",
+  "version": "0.0.209",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",