mac-human-design 0.1.30-preview.1 → 0.1.30-preview.2

package/changelog.md

@@ -2,6 +2,23 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.30-preview.2
+
+### Added
+
+- Added `MacDataTable` arrow, Home, and End keyboard navigation for interactive
+  rows.
+- Added a layered `MacDataTable` row hover and selection treatment so row
+  feedback animates under cell content without shifting text or layout.
+- Added verifier coverage for data-table keyboard navigation and row state
+  layer invariants.
+
+### Changed
+
+- Improved Finder-style table interaction polish for object-browser style
+  screens while preserving row geometry and selected-row focus rings.
+- Bumped the package to `0.1.30-preview.2` under the `preview` dist-tag.
+
 ## 0.1.30-preview.1
 
 ### Added

package/docs/macos-base-ui-coverage.md

@@ -91,7 +91,7 @@ be reimplemented in consuming apps:
 
 | App pattern | Export | Contract |
 | --- | --- | --- |
-| Finder-style grid/table primitive | `MacDataTable` | Uses `table` semantics for static rows, upgrades to `grid` semantics for interactive rows, exposes row/column metadata, busy state, keyboard activation, selected row state, and focus-visible row styling. |
+| Finder-style grid/table primitive | `MacDataTable` | Uses `table` semantics for static rows, upgrades to `grid` semantics for interactive rows, exposes row/column metadata, busy state, keyboard activation, arrow/Home/End row focus navigation, selected row state, and layered hover/selection styling. |
 | Tauri window toolbar | `MacWindowToolbar` | Provides a labelled `toolbar` landmark, labelled leading/content/trailing control groups, a root drag region, no-drag regions around interactive controls, and stable wrapped-control sizing for dense icon toolbars. |
 | Segmented control | `MacSegmentedControl` | Wraps the shared macOS segmented toggle styling with accessible labels, stable class names, full-width layout support, and class/style pass-through. |
 | Centered SF Symbols icon button | `SymbolIconButton` | Renders through `MacIconButton`, defaults to `type="button"`, preserves fixed geometry while allowing style/class pass-through, supports tooltip offsets and per-symbol optical offsets, and exposes loading state with `aria-busy`. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.30-preview.1",
+  "version": "0.1.30-preview.2",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/scripts/verify-macos-design.mjs

@@ -305,6 +305,12 @@ const missingDataTableRequirements = [
   ["keyboard row handler", /handleRowKeyDown/],
   ["enter key activation", /event\.key === "Enter"/],
   ["space key activation", /event\.key === " "/],
+  ["arrow up row navigation", /event\.key === "ArrowUp"/],
+  ["arrow down row navigation", /event\.key === "ArrowDown"/],
+  ["home row navigation", /event\.key === "Home"/],
+  ["end row navigation", /event\.key === "End"/],
+  ["data table row focus helper", /function focusDataTableRow/],
+  ["interactive row query marker", /data-hd-mac-data-table-row=\{hasInteractiveRows \|\| undefined\}/],
 ].filter(([, pattern]) => !pattern.test(dataTableSource));
 
 if (missingDataTableRequirements.length > 0) {
@@ -319,6 +325,33 @@ requireCssDeclarations(".hd-mac-data-table-row-interactive:focus-visible", [
   ["focus ring", /var\(--hd-mac-focus-ring\)/],
 ]);
 
+requireCssDeclarations(".hd-mac-data-table-row", [
+  ["row state layer positioning", /position\s*:\s*relative\s*;/],
+  ["row state layer isolation", /isolation\s*:\s*isolate\s*;/],
+  ["row state layer clipping", /overflow\s*:\s*hidden\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-data-table-row::before", [
+  ["row state layer content", /content\s*:\s*""\s*;/],
+  ["row state layer fills row", /inset\s*:\s*0\s*;/],
+  ["row state layer behind cells", /z-index\s*:\s*0\s*;/],
+  ["row state layer hidden by default", /opacity\s*:\s*0\s*;/],
+  ["row state layer opacity transition", /opacity\s+var\(--hd-mac-motion-row\)/],
+]);
+
+requireCssDeclarations(".hd-mac-data-table-row-interactive:hover::before", [
+  ["row hover state layer visible", /opacity\s*:\s*1\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-data-table-row[data-selected]::before", [
+  ["selected row state layer uses accent fill", /color-mix\(in srgb,\s*var\(--hd-mac-blue\)\s*18%,\s*transparent\)/],
+  ["selected row state layer visible", /opacity\s*:\s*1\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-data-table-cell", [
+  ["cell above row state layer", /z-index\s*:\s*1\s*;/],
+]);
+
 const missingToolbarRequirements = [
   ["toolbar role", /role=["']toolbar["']/],
   ["optional aria label", /aria-label=\{ariaLabel\}/],

package/src/components/MacDataTable.tsx

@@ -46,6 +46,32 @@ function alignmentClassName(align: MacDataTableColumn<unknown>["align"]) {
   return undefined;
 }
 
+function focusDataTableRow(currentRow: HTMLElement, direction: "previous" | "next" | "first" | "last") {
+  const parent = currentRow.parentElement;
+  if (!parent) {
+    return;
+  }
+
+  const rows = Array.from(
+    parent.querySelectorAll<HTMLElement>('[data-hd-mac-data-table-row="true"]'),
+  );
+  const currentIndex = rows.indexOf(currentRow);
+  if (currentIndex === -1) {
+    return;
+  }
+
+  const nextIndex =
+    direction === "first"
+      ? 0
+      : direction === "last"
+        ? rows.length - 1
+        : direction === "previous"
+          ? Math.max(0, currentIndex - 1)
+          : Math.min(rows.length - 1, currentIndex + 1);
+
+  rows[nextIndex]?.focus();
+}
+
 const tableTransition: Transition = {
   default: { type: "spring", stiffness: 520, damping: 44, mass: 0.78 },
   opacity: { duration: 0.12, ease: "easeOut" },
@@ -78,6 +104,7 @@ export function MacDataTable<Row>({
       if (!hasInteractiveRows) {
         return;
       }
+      const currentRow = event.currentTarget as HTMLElement;
 
       if (event.key === "Enter") {
         event.preventDefault();
@@ -92,6 +119,26 @@ export function MacDataTable<Row>({
         event.preventDefault();
         onRowClick?.(row, index);
       }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusDataTableRow(currentRow, "previous");
+      }
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusDataTableRow(currentRow, "next");
+      }
+
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusDataTableRow(currentRow, "first");
+      }
+
+      if (event.key === "End") {
+        event.preventDefault();
+        focusDataTableRow(currentRow, "last");
+      }
     },
     [hasInteractiveRows, onRowClick, onRowDoubleClick],
   );
@@ -172,6 +219,7 @@ export function MacDataTable<Row>({
                 hasInteractiveRows && "hd-mac-data-table-row-interactive",
                 rowClassName?.(row, index),
               )}
+              data-hd-mac-data-table-row={hasInteractiveRows || undefined}
               data-selected={selected || undefined}
               onClick={onRowClick ? () => onRowClick(row, index) : undefined}
               onDoubleClick={onRowDoubleClick ? () => onRowDoubleClick(row, index) : undefined}

package/src/styles/macosBaseUi.css

@@ -1566,6 +1566,9 @@
 }
 
 .hd-mac-data-table-row {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
   border-bottom: 1px solid var(--hd-mac-border);
   padding: 8px 10px;
   transform-origin: center;
@@ -1576,6 +1579,19 @@
     filter var(--hd-mac-motion-fast);
 }
 
+.hd-mac-data-table-row::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: var(--hd-mac-fill-hover);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--hd-mac-motion-row),
+    background-color var(--hd-mac-motion-row);
+}
+
 .hd-mac-data-table-row:last-child {
   border-bottom: 0;
 }
@@ -1592,7 +1608,11 @@
 }
 
 .hd-mac-data-table-row-interactive:hover {
-  background: var(--hd-mac-fill-hover);
+  background: transparent;
+}
+
+.hd-mac-data-table-row-interactive:hover::before {
+  opacity: 1;
 }
 
 .hd-mac-data-table-row-interactive:active {
@@ -1600,10 +1620,15 @@
 }
 
 .hd-mac-data-table-row[data-selected] {
-  background: color-mix(in srgb, var(--hd-mac-blue) 18%, transparent);
+  background: transparent;
   box-shadow: inset 3px 0 0 var(--hd-mac-blue);
 }
 
+.hd-mac-data-table-row[data-selected]::before {
+  background: color-mix(in srgb, var(--hd-mac-blue) 18%, transparent);
+  opacity: 1;
+}
+
 .hd-mac-data-table-row[data-selected]:focus-visible {
   box-shadow:
     var(--hd-mac-focus-ring),
@@ -1611,17 +1636,28 @@
 }
 
 .hd-mac-data-table-row[data-selected]:hover {
+  background: transparent;
+}
+
+.hd-mac-data-table-row[data-selected]:hover::before {
   background: color-mix(in srgb, var(--hd-mac-blue) 24%, transparent);
+  opacity: 1;
 }
 
 .hd-mac-data-table-header-cell,
 .hd-mac-data-table-cell {
+  position: relative;
+  z-index: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.hd-mac-data-table-cell {
+  z-index: 1;
+}
+
 .hd-mac-data-table-cell {
   color: var(--hd-mac-secondary-text);
   font: 400 12px/18px var(--hd-mac-font);