@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/jsx/views/ImageGrid.native.js

@@ -41,11 +41,12 @@ module.exports = __toCommonJS(ImageGrid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_AsyncBoundary = require("../layouts/AsyncBoundary.native.js");
 var import_Skeleton = require("../Skeleton/index.native.js");
+var import_useDirection = require("../hooks/useDirection.native.js");
 var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_hotkeys = require("@tanstack/react-hotkeys");
 var import_react = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.native.js");
 var import_tamagui = require("tamagui");
 function ImageGridSkeleton(param) {
   var {
@@ -74,6 +75,76 @@ function ImageGridSkeleton(param) {
     })
   });
 }
+function ImageGridTile(param) {
+  var {
+    id,
+    isFocused,
+    showRing,
+    clickable,
+    cellPadding,
+    columns,
+    colIndex,
+    rowIndex,
+    radius,
+    radiusClassName,
+    onPress,
+    children
+  } = param;
+  var [hovered, setHovered] = (0, import_react.useState)(false);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: `${100 / columns}%`,
+    padding: cellPadding,
+    role: "presentation",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      id,
+      // "gridcell" is a valid ARIA role but outside RN's `Role` union;
+      // forwarded to the DOM node on web (house Record cast).
+      ...{
+        role: "gridcell"
+      },
+      "aria-colindex": colIndex,
+      "aria-rowindex": rowIndex,
+      "aria-selected": isFocused,
+      "data-focused": isFocused || void 0,
+      position: "relative",
+      borderRadius: radius,
+      ...(radiusClassName ? {
+        className: radiusClassName
+      } : {}),
+      cursor: clickable ? "pointer" : void 0,
+      ...(showRing ? import_theme.keyboardFocusRingProps : {
+        outlineWidth: 0
+      }),
+      // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored
+      // View prop type omits them (house Record cast).
+      ...{
+        onHoverIn: function onHoverIn() {
+          return setHovered(true);
+        },
+        onHoverOut: function onHoverOut() {
+          return setHovered(false);
+        }
+      },
+      onPress,
+      children: [
+      /* Clip media to the radius; keep overflow off the ring node so
+      LC-71 outline is not severed (same split as Input.Box). */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        borderRadius: radius,
+        overflow: "hidden",
+        children
+      }), hovered && !showRing ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        backgroundColor: "$color12",
+        opacity: 0.08,
+        borderRadius: radius
+      }) : null]
+    })
+  });
+}
 function ImageGrid(param) {
   var {
     items,
@@ -92,14 +163,15 @@ function ImageGrid(param) {
     hotkeys: hotkeyOverrides,
     ...stackProps
   } = param;
-  var _getTokenValue, _ref, _ref1, _ref2, _ref3, _ref4;
+  var _getTokenValue, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var emptyMessage = emptyMessageProp !== null && emptyMessageProp !== void 0 ? emptyMessageProp : t("No items found");
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var isRTL = (0, import_useDirection.useDirection)() === "rtl";
   var {
     width: windowWidth
   } = (0, import_tamagui.useWindowDimensions)();
@@ -116,6 +188,13 @@ function ImageGrid(param) {
   var containerRef = (0, import_react.useRef)(null);
   var sentinelRef = (0, import_react.useRef)(null);
   var [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  var handleContainerFocus = (0, import_react.useCallback)(function () {
+    if (!(0, import_theme.wasKeyboardFocus)()) return;
+    setFocusedIndex(function (prev) {
+      return prev < 0 ? 0 : prev;
+    });
+  }, []);
   var gapToken = knobProps.gap.gap;
   var gutter = typeof gapToken === "number" ? gapToken : (_getTokenValue = (0, import_tamagui.getTokenValue)(gapToken, "space")) !== null && _getTokenValue !== void 0 ? _getTokenValue : 16;
   var cellPadding = gutter / 2;
@@ -127,59 +206,50 @@ function ImageGrid(param) {
       });
     }
   }, [gridId, items.length]);
+  var moveFocus = (0, import_react.useCallback)(function (delta) {
+    setFocusedIndex(function (prev) {
+      if (items.length === 0) return prev;
+      if (prev < 0) {
+        scrollToIndex(0);
+        return 0;
+      }
+      var next = Math.max(0, Math.min(items.length - 1, prev + delta));
+      scrollToIndex(next);
+      return next;
+    });
+  }, [items.length, scrollToIndex]);
   var hotkeyOpts = {
     target: containerRef
   };
   (0, import_react_hotkeys.useHotkey)((_ref = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.right) !== null && _ref !== void 0 ? _ref : "ArrowRight", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var col = prev % columns;
-      if (col < columns - 1 && prev + 1 < items.length) {
-        var next = prev + 1;
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(isRTL ? -1 : 1);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)((_ref1 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.left) !== null && _ref1 !== void 0 ? _ref1 : "ArrowLeft", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var col = prev % columns;
-      if (col > 0) {
-        var next = prev - 1;
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(isRTL ? 1 : -1);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)((_ref2 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.down) !== null && _ref2 !== void 0 ? _ref2 : "ArrowDown", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var next = prev + columns;
-      if (next < items.length) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(columns);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)((_ref3 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.up) !== null && _ref3 !== void 0 ? _ref3 : "ArrowUp", function () {
-    setFocusedIndex(function (prev) {
-      if (prev < 0) return 0;
-      var next = prev - columns;
-      if (next >= 0) {
-        scrollToIndex(next);
-        return next;
-      }
-      return prev;
-    });
+    return moveFocus(-columns);
   }, hotkeyOpts);
-  (0, import_react_hotkeys.useHotkey)((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", function () {
+  var activateFocused = (0, import_react.useCallback)(function () {
     if (focusedIndex >= 0 && focusedIndex < items.length) {
       onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(items[focusedIndex]);
     }
+  }, [focusedIndex, items, onItemClick]);
+  (0, import_react_hotkeys.useHotkey)((_ref4 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.select) !== null && _ref4 !== void 0 ? _ref4 : "Enter", activateFocused, hotkeyOpts);
+  (0, import_react_hotkeys.useHotkey)("Space", activateFocused, hotkeyOpts);
+  (0, import_react_hotkeys.useHotkey)((_ref5 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.first) !== null && _ref5 !== void 0 ? _ref5 : "Home", function () {
+    if (items.length === 0) return;
+    setFocusedIndex(0);
+    scrollToIndex(0);
+  }, hotkeyOpts);
+  (0, import_react_hotkeys.useHotkey)((_ref6 = hotkeyOverrides === null || hotkeyOverrides === void 0 ? void 0 : hotkeyOverrides.last) !== null && _ref6 !== void 0 ? _ref6 : "End", function () {
+    if (items.length === 0) return;
+    var last = items.length - 1;
+    setFocusedIndex(last);
+    scrollToIndex(last);
   }, hotkeyOpts);
   (0, import_react.useEffect)(function () {
     if (height !== void 0 || !onLoadMore || !hasMore || isLoading) return;
@@ -200,13 +270,26 @@ function ImageGrid(param) {
     error
   }) === "error";
   var effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
+  var showKeyboardRing = effectiveFocused >= 0 && (0, import_theme.wasKeyboardFocus)();
+  var rowCount = Math.ceil(items.length / columns);
+  var radius = knobProps.borderRadius.borderRadius;
+  var radiusClassName = knobProps.borderRadius.className;
   var gridBody = items.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
     ref: containerRef,
     role: "grid",
     "aria-label": t("Image grid"),
+    "aria-colcount": columns,
+    "aria-rowcount": rowCount,
     "aria-activedescendant": effectiveFocused >= 0 ? `${gridId}-item-${effectiveFocused}` : void 0,
     tabIndex: 0,
     outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: {
+      outlineWidth: 0
+    },
+    onFocus: handleContainerFocus,
     ...(height !== void 0 ? {
       style: {
         height,
@@ -219,36 +302,37 @@ function ImageGrid(param) {
         }
       } : void 0
     } : null),
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      flexWrap: "wrap",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       margin: -cellPadding,
-      children: items.map(function (item, index) {
-        var isFocused = effectiveFocused === index;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          id: `${gridId}-item-${index}`,
-          "data-focused": isFocused || void 0,
-          width: `${100 / columns}%`,
-          padding: cellPadding,
-          backgroundColor: isFocused ? "$accentBackground" : void 0,
-          borderRadius: isFocused ? knobProps.borderRadius.borderRadius : void 0,
-          cursor: onItemClick ? "pointer" : void 0,
-          onPress: onItemClick ? function () {
-            setFocusedIndex(index);
-            onItemClick(item);
-          } : void 0,
-          children: (
-          /* Cards/media are R-SCALE (spec ImageGrid): the owned card
-          frame rounds with the radius knob and clips the media. */
-          /* @__PURE__ */
-          (0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            borderRadius: knobProps.borderRadius.borderRadius,
-            ...(knobProps.borderRadius.className ? {
-              className: knobProps.borderRadius.className
-            } : {}),
-            overflow: "hidden",
-            children: renderItem(item)
-          }))
-        }, `${gridId}-item-${index}`);
+      children: Array.from({
+        length: rowCount
+      }, function (_, row) {
+        var start = row * columns;
+        var rowItems = items.slice(start, start + columns);
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          role: "row",
+          children: rowItems.map(function (item, col) {
+            var index = start + col;
+            var isFocused = effectiveFocused === index;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ImageGridTile, {
+              id: `${gridId}-item-${index}`,
+              isFocused,
+              showRing: isFocused && showKeyboardRing,
+              clickable: Boolean(onItemClick),
+              cellPadding,
+              columns,
+              colIndex: col + 1,
+              rowIndex: row + 1,
+              radius,
+              radiusClassName,
+              onPress: onItemClick ? function () {
+                setFocusedIndex(index);
+                onItemClick(item);
+              } : void 0,
+              children: renderItem(item)
+            }, `${gridId}-item-${index}`);
+          })
+        }, `${gridId}-row-${row}`);
       })
     }), isLoading && items.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       padding: "$2",

package/dist/jsx/views/ImageGrid.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","ImageGrid_exports","ImageGrid","module","exports","import_jsx_runtime","require","import_AsyncBoundary","import_Skeleton","import_forms","import_theme","import_react_hotkeys","import_react","import_react_i18next","import_tamagui","ImageGridSkeleton","param","columns","cellPadding","loadingLabel","jsx","XStack","flexWrap","margin","children","Array","length","map","_","i","View","width","padding","Skeleton","variant","aspectRatio","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","error","onRetry","columnsProp","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","emptyMessageProp","hotkeys","hotkeyOverrides","stackProps","_getTokenValue","_ref","_ref1","_ref2","_ref3","_ref4","t","useTranslation","knobProps","useResolvedKnobs","windowWidth","useWindowDimensions","columnsBySizeClass","compact","medium","expanded","large","xl","getLayoutSizeClass","gridId","useId","containerRef","useRef","sentinelRef","focusedIndex","setFocusedIndex","useState","gapToken","gap","gutter","getTokenValue","scrollToIndex","useCallback","index","_document_getElementById","document","getElementById","scrollIntoView","block","hotkeyOpts","useHotkey","right","prev","col","next","left","down","up","select","useEffect","IntersectionObserver","el","current","observer","entries","some","entry","isIntersecting","observe","disconnect","hasError","resolveAsyncStatus","effectiveFocused","gridBody","jsxs","ref","role","tabIndex","outlineWidth","style","overflowY","onScroll","scrollTop","clientHeight","scrollHeight","item","isFocused","id","backgroundColor","borderRadius","cursor","onPress","className","overflow","YStack","alignItems","Spinner","size"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","ImageGrid_exports","ImageGrid","module","exports","import_jsx_runtime","require","import_AsyncBoundary","import_Skeleton","import_useDirection","import_forms","import_theme","import_react_hotkeys","import_react","import_i18n","import_tamagui","ImageGridSkeleton","param","columns","cellPadding","loadingLabel","jsx","XStack","flexWrap","margin","children","Array","length","map","_","i","View","width","padding","Skeleton","variant","aspectRatio","ImageGridTile","id","isFocused","showRing","clickable","colIndex","rowIndex","radius","radiusClassName","onPress","hovered","setHovered","useState","role","jsxs","position","borderRadius","className","cursor","keyboardFocusRingProps","outlineWidth","onHoverIn","onHoverOut","overflow","inset","pointerEvents","backgroundColor","opacity","items","renderItem","onItemClick","onLoadMore","hasMore","isLoading","error","onRetry","columnsProp","estimateSize","_estimateSize","overscan","_overscan","height","heightProp","emptyMessage","emptyMessageProp","hotkeys","hotkeyOverrides","stackProps","_getTokenValue","_ref","_ref1","_ref2","_ref3","_ref4","_ref5","_ref6","t","useTranslation","knobProps","useResolvedKnobs","isRTL","useDirection","windowWidth","useWindowDimensions","columnsBySizeClass","compact","medium","expanded","large","xl","getLayoutSizeClass","gridId","useId","containerRef","useRef","sentinelRef","focusedIndex","setFocusedIndex","document","ensureKeyboardModalityTracking","handleContainerFocus","useCallback","wasKeyboardFocus","prev","gapToken","gap","gutter","getTokenValue","scrollToIndex","index","_document_getElementById","getElementById","scrollIntoView","block","moveFocus","delta","next","Math","max","min","hotkeyOpts","useHotkey","right","left","down","up","activateFocused","select","first","last","useEffect","IntersectionObserver","el","current","observer","entries","some","entry","isIntersecting","observe","disconnect","hasError","resolveAsyncStatus","effectiveFocused","showKeyboardRing","rowCount","ceil","gridBody","ref","tabIndex","focusStyle","focusVisibleStyle","onFocus","style","overflowY","onScroll","scrollTop","clientHeight","scrollHeight","YStack","row","start","rowItems","slice","item","col"],"sources":["../../../src/views/ImageGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/views/Kanban.mjs

@@ -2,11 +2,11 @@ import { componentColors } from "../componentColors.mjs";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary.mjs";
 import { EmptyState } from "../layouts/page.mjs";
 import { Spinner } from "@multiplatform.one/forms";
-import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairlineWidth, keyboardFocusRingProps, MIN_PRESS_TARGET, radiusClassProps, useResolvedKnobs, ensureKeyboardModalityTracking, wasKeyboardFocus } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useCallback, useRef, useEffect, useId, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n.mjs";
 import { AnimatePresence, Card, ListItem, ScrollView, Text, View, XStack, YStack } from "tamagui";
 import { autoScrollVelocity, describeCancel, describeDragState, gapPosition, insertionIndexForY, keyboardLift, keyboardMove, resolveDrop, siblingOffset } from "./kanbanDnd.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -63,6 +63,12 @@ function Kanban({
   const boardScrollRef = useRef(null);
   const [focusedCol, setFocusedCol] = useState(-1);
   const [focusedCard, setFocusedCard] = useState(-1);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleContainerFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedCol(prev => prev < 0 ? 0 : prev);
+    setFocusedCard(prev => prev < 0 ? 0 : prev);
+  }, []);
   const canDrag = Boolean(onCardMove || onCardReorder);
   const [drag, setDrag] = useState(null);
   const [settle, setSettle] = useState(null);
@@ -576,6 +582,7 @@ function Kanban({
       role: "grid",
       "aria-label": t("Kanban board"),
       outlineWidth: 0,
+      onFocus: handleContainerFocus,
       position: "relative",
       children: [/* @__PURE__ */jsx(ScrollView, {
         ref: boardScrollRef,
@@ -605,7 +612,11 @@ function Kanban({
             onLoadMore,
             getItemKey,
             hasMore,
-            isLoading
+            isLoading,
+            onCardFocus: (col, card) => {
+              setFocusedCol(col);
+              setFocusedCard(card);
+            }
           }, column.id)), boardEnd]
         })
       }), overlaySession && /* @__PURE__ */jsx(KanbanDragOverlay, {
@@ -692,6 +703,7 @@ function KanbanDragOverlay({
       height: "100%",
       children: /* @__PURE__ */jsx(Card, {
         size: sizeToken,
+        padding: 0,
         borderWidth: 0,
         backgroundColor: "transparent",
         height: "100%",
@@ -722,7 +734,8 @@ function KanbanColumnView({
   onLoadMore,
   getItemKey,
   hasMore,
-  isLoading
+  isLoading,
+  onCardFocus
 }) {
   const {
     t
@@ -857,20 +870,22 @@ function KanbanColumnView({
   }) : null;
   const isEmpty = column.items.length === 0;
   const wrapperTransition = drag != null ? knobProps.transition : flipReady && !virtualizer.isScrolling ? knobProps.transition : void 0;
-  return /* @__PURE__ */jsxs(Card, {
-    size: knobProps.sizeToken,
-    ...knobProps.borderRadius,
-    ...{
-      backgroundColor: isDropTarget ? componentColors.interactive.background : componentColors.surface.background
-    },
-    transition: knobProps.transition,
+  return /* @__PURE__ */jsxs(YStack, {
     width: columnWidth,
     minHeight: minColumnHeight,
-    borderWidth: isActiveColumn ? 2 : 1,
-    borderColor: isDropTarget ? componentColors.interactive.border : isActiveColumn ? "$accentBackground" : "$borderColor",
+    flexShrink: 0,
     overflow: "hidden",
+    transition: knobProps.transition,
+    ...knobProps.borderRadius,
+    backgroundColor: isDropTarget || isActiveColumn ? componentColors.interactive.background : componentColors.surface.background,
+    borderWidth: knobProps.inputSurface.borderWidth,
+    borderColor: isDropTarget ? componentColors.interactive.border : componentColors.surface.border,
     "data-kanban-column": column.id,
-    children: [/* @__PURE__ */jsx(ListItem, {
+    children: [column.color ? /* @__PURE__ */jsx(View, {
+      height: 3,
+      width: "100%",
+      backgroundColor: column.color
+    }) : null, /* @__PURE__ */jsx(ListItem, {
       title: column.title,
       icon: column.color ? /* @__PURE__ */jsx(YStack, {
         ...radiusClassProps("R-PILL", "Kanban column dot"),
@@ -884,18 +899,14 @@ function KanbanColumnView({
         gap: "$1",
         children: [itemCount !== void 0 && /* @__PURE__ */jsx(Text, {
           color: componentColors.text.muted,
-          fontSize: knobProps.sizeToken,
-          ...{
-            backgroundColor: componentColors.surface.background
-          },
-          paddingHorizontal: "$2",
-          borderRadius: knobProps.borderRadius.borderRadius,
+          ...knobProps.label,
+          ...knobProps.textWeight,
           "data-async-count": true,
           children: itemCount
         }), renderColumnActions?.(column)]
       }) : void 0,
       size: knobProps.sizeToken,
-      borderBottomWidth: 1,
+      borderBottomWidth: hairlineWidth,
       borderBottomColor: "$borderColor"
     }), /* @__PURE__ */jsxs(View, {
       ref: parentRef,
@@ -971,8 +982,10 @@ function KanbanColumnView({
             children: /* @__PURE__ */jsx(Card, {
               id: `${kanbanId}-col-${columnIndex}-card-${virtualItem.index}`,
               size: knobProps.sizeToken,
+              padding: 0,
               ...knobProps.borderRadius,
               elevation: knobProps.elevation,
+              minHeight: MIN_PRESS_TARGET,
               transition: knobProps.transition,
               ...(isNew && {
                 enterStyle: {
@@ -980,26 +993,33 @@ function KanbanColumnView({
                   scale: 0.97
                 }
               }),
-              borderWidth: 1,
+              borderWidth: knobProps.inputSurface.borderWidth,
               borderColor: ghost ? componentColors.interactive.border : "$borderColor",
               borderStyle: ghost ? "dashed" : void 0,
-              backgroundColor: isFocused ? "$accentBackground" : void 0,
+              backgroundColor: isFocused ? "$accentBackground" : "$color1",
+              ...(isFocused && wasKeyboardFocus() ? keyboardFocusRingProps : {
+                outlineWidth: 0
+              }),
               hoverStyle: {
-                borderColor: "$accentBackground"
+                backgroundColor: componentColors.interactive.background
               },
               pressStyle: {
                 scale: 0.98
               },
               overflow: "hidden",
               "data-kanban-card": String(itemKey),
+              ...(isFocused && {
+                "data-kanban-focused": "true"
+              }),
               ...(onCardPointerDown && {
                 "data-kanban-draggable": "true"
               }),
-              onPress: onCardSelect ? () => {
+              onPress: () => {
+                onCardFocus?.(columnIndex, virtualItem.index);
                 if (suppressClickRef.current) return;
-                onCardSelect(item, column.id);
-              } : void 0,
-              cursor: onCardPointerDown ? "grab" : onCardSelect ? "pointer" : void 0,
+                onCardSelect?.(item, column.id);
+              },
+              cursor: onCardPointerDown ? "grab" : "pointer",
               ...(onCardPointerDown && {
                 onPointerDown: e => onCardPointerDown(item, column.id, virtualItem.index, e)
               }),
@@ -1022,9 +1042,11 @@ function KanbanColumnView({
             },
             children: /* @__PURE__ */jsx(Card, {
               size: knobProps.sizeToken,
+              padding: 0,
               ...knobProps.borderRadius,
-              borderWidth: 1,
+              borderWidth: knobProps.inputSurface.borderWidth,
               borderColor: "$borderColor",
+              backgroundColor: "$color1",
               overflow: "hidden",
               children: renderCard(l.item)
             })
@@ -1059,7 +1081,7 @@ function KanbanColumnView({
             justifyContent: "center",
             children: isEmpty && /* @__PURE__ */jsx(Text, {
               color: componentColors.text.muted,
-              fontSize: "$2",
+              ...knobProps.label,
               children: t("Drop here")
             })
           })