gigaboard 1.5.0 → 1.5.2

package/dist/index.cjs

@@ -347,9 +347,12 @@ function BoardEditor({
   getSquareAriaLabel,
   focusedSquare: propFocusedSquare,
   onSquareFocus,
+  id,
   onClear,
   onSetStartingPosition,
-  onToggleSideToMove
+  onToggleSideToMove,
+  onFocus,
+  onBlur
 }) {
   const containerRef = react.useRef(null);
   const liveRegionRef = react.useRef(null);
@@ -635,6 +638,7 @@ function BoardEditor({
     "div",
     {
       ref: containerRef,
+      id,
       role: "application",
       tabIndex: 0,
       "aria-label": ariaLabel,
@@ -645,8 +649,14 @@ function BoardEditor({
           setHasKeyboardFocus(true);
           announceSquare(focusedSquare);
         }
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (e.target === e.currentTarget) {
+          setHasKeyboardFocus(false);
+        }
+        onBlur?.(e);
       },
-      onBlur: () => setHasKeyboardFocus(false),
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
@@ -728,6 +738,39 @@ function BoardEditor({
             })
           }
         ),
+        hasKeyboardFocus && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gridTemplateRows: "repeat(8, 1fr)",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: (() => {
+              const { col, row } = gridCoord(focusedSquare, orientation);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-gb-editor-focus-square": algebraicOf2(focusedSquare),
+                  style: {
+                    gridColumnStart: col,
+                    gridRowStart: row,
+                    outline: "3px solid var(--gb-editor-sq-focus, #f59e0b)",
+                    outlineOffset: "-3px",
+                    boxShadow: "inset 0 0 0 1.5px rgba(0, 0, 0, 0.75), 0 0 8px rgba(245, 158, 11, 0.7)",
+                    borderRadius: "2px",
+                    pointerEvents: "none"
+                  }
+                }
+              );
+            })()
+          }
+        ),
         dragging && containerRef.current ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -3088,16 +3131,19 @@ function injectSelectionStyles() {
   background: var(--gb-selected);
 }
 [data-gb-square][data-gb-selection="legal-quiet"]::before {
-  background-image: radial-gradient(var(--gb-legal-target) 22%, transparent 24%);
+  background-image: radial-gradient(var(--gb-legal-target) 19%, transparent 21%);
 }
 [data-gb-square][data-gb-selection="legal-capture"]::before {
-  background-image: radial-gradient(transparent 0 75%, var(--gb-legal-target-capture) 77% 83%, transparent 85%);
+  background-image: radial-gradient(transparent 0 78%, var(--gb-legal-target-capture) 80%);
+}
+[data-gb-target-style="rings"] [data-gb-square][data-gb-selection="legal-capture"]::before {
+  background-image: radial-gradient(transparent 0 70%, var(--gb-legal-target-capture) 72% 84%, transparent 86%);
 }
 [data-gb-target-style="dots"] [data-gb-square][data-gb-selection="legal-quiet"]::before {
-  background-image: radial-gradient(var(--gb-legal-target) 14%, transparent 16%);
+  background-image: radial-gradient(var(--gb-legal-target) 19%, transparent 21%);
 }
 [data-gb-target-style="dots"] [data-gb-square][data-gb-selection="legal-capture"]::before {
-  background-image: radial-gradient(var(--gb-legal-target-capture) 20%, transparent 22%);
+  background-image: radial-gradient(transparent 0 78%, var(--gb-legal-target-capture) 80%);
 }
 `;
   document.head.appendChild(style);