hlmnhkl-ui 0.22.0 → 0.23.0

package/README.md

@@ -66,7 +66,7 @@ Every copied file starts with one line naming hlmnhkl/ui and the MIT licence, so
 
 ## Pro
 
-54 more components (such as Calendar, Chart, KanbanBoard, Combobox and Route), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
+71 more components (such as DataGrid, Calendar, Chart, KanbanBoard and Combobox), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
 
 ## Licence
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/src/internal/focus.ts

@@ -48,6 +48,9 @@ export function useFocusTrap(
     const first = initialFocus?.current ?? list.find((el) => !el.hasAttribute('data-skip-initial-focus')) ?? list[0] ?? root
     first.focus({ preventScroll: true })
 
+    // Safari's plain Tab skips buttons, so it can jump from the middle of the layer to the page behind,
+    // or off the page. A Tab that lands outside goes back to the end it wrapped past.
+    let check = 0
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== 'Tab') return
       const items = focusables(root)
@@ -65,10 +68,19 @@ export function useFocusTrap(
       } else if (!e.shiftKey && current === lastEl) {
         e.preventDefault()
         firstEl.focus()
+      } else {
+        const back = e.shiftKey
+        clearTimeout(check)
+        check = window.setTimeout(() => {
+          if (root.contains(document.activeElement)) return
+          const now = focusables(root)
+          now[back ? now.length - 1 : 0]?.focus({ preventScroll: true })
+        })
       }
     }
     root.addEventListener('keydown', onKey)
     return () => {
+      clearTimeout(check)
       root.removeEventListener('keydown', onKey)
       // Give focus back only if it is still in the layer, so a click elsewhere keeps its own focus.
       const now = document.activeElement

package/src/tokens.css

@@ -215,21 +215,21 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --hl-color-bg: #161616;
-    --hl-color-surface: #1e1e1e;
-    --hl-color-surface-sunken: #121212;
-    --hl-color-surface-hover: #262626;
-    --hl-color-surface-active: #2e2e2e;
-    --hl-color-surface-raised: #2c2c2c;
+    --hl-color-bg: #0a0a0a;
+    --hl-color-surface: #111111;
+    --hl-color-surface-sunken: #070707;
+    --hl-color-surface-hover: #1a1a1a;
+    --hl-color-surface-active: #222222;
+    --hl-color-surface-raised: #1c1c1c;
     --hl-color-overlay: rgb(0 0 0 / 0.6);
     --hl-color-fg: #ececec;
     --hl-color-fg-muted: #ababab;
     --hl-color-fg-subtle: #949494;
     --hl-color-fg-disabled: #5a5a5a;
-    --hl-color-border: #2e2e2e;
+    --hl-color-border: #262626;
     --hl-color-border-strong: #707070;
     --hl-color-inverse: #ececec;
-    --hl-color-inverse-fg: #161616;
+    --hl-color-inverse-fg: #0a0a0a;
     --hl-color-inverse-hover: var(--hl-gray-300);
     --hl-color-shimmer: rgb(255 255 255 / 0.06);
     --hl-color-success: #4cc97a;
@@ -250,24 +250,24 @@
   }
 }
 
-/* Dark theme (forced). Never pure black: a dark grey page, raised surfaces a step lighter, and a soft
-   white for text, so it does not glare. */
+/* Dark theme (forced). Near black, never pure black: raised surfaces a step lighter, and a soft white
+   for text, so it does not glare. */
 [data-theme="dark"] {
-  --hl-color-bg: #161616;
-  --hl-color-surface: #1e1e1e;
-  --hl-color-surface-sunken: #121212;
-  --hl-color-surface-hover: #262626;
-  --hl-color-surface-active: #2e2e2e;
-  --hl-color-surface-raised: #2c2c2c;
+  --hl-color-bg: #0a0a0a;
+  --hl-color-surface: #111111;
+  --hl-color-surface-sunken: #070707;
+  --hl-color-surface-hover: #1a1a1a;
+  --hl-color-surface-active: #222222;
+  --hl-color-surface-raised: #1c1c1c;
   --hl-color-overlay: rgb(0 0 0 / 0.6);
   --hl-color-fg: #ececec;
   --hl-color-fg-muted: #ababab;
   --hl-color-fg-subtle: #949494;
   --hl-color-fg-disabled: #5a5a5a;
-  --hl-color-border: #2e2e2e;
+  --hl-color-border: #262626;
   --hl-color-border-strong: #707070;
   --hl-color-inverse: #ececec;
-  --hl-color-inverse-fg: #161616;
+  --hl-color-inverse-fg: #0a0a0a;
   --hl-color-inverse-hover: var(--hl-gray-300);
   --hl-color-shimmer: rgb(255 255 255 / 0.06);
   --hl-color-success: #4cc97a;