@microbit/ui 0.1.0-alpha.11 → 0.1.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.13",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",
@@ -25,6 +25,8 @@
   "scripts": {
     "panda": "panda codegen",
     "typecheck": "npm run panda && tsc --noEmit",
+    "pretest": "npm run panda",
+    "test": "vitest run",
     "prestorybook": "npm run panda",
     "storybook": "storybook dev -p 6006 --no-open",
     "prebuild-storybook": "npm run panda",
@@ -40,9 +42,13 @@
   "devDependencies": {
     "@pandacss/dev": "^1.11.4",
     "@storybook/react-vite": "^10.5.2",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.1.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.5.2",
+    "jsdom": "^29.1.1",
     "react": "^18.3.1",
     "react-aria-components": "^1.19.0",
     "react-dom": "^18.3.1",
@@ -50,7 +56,8 @@
     "react-intl": "^6.6.8",
     "storybook": "^10.5.2",
     "typescript": "^5.4.2",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "tag": "alpha"

package/src/ButtonGroup.tsx

@@ -32,9 +32,12 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
             display: "inline-flex",
             alignItems: "center",
             // Buttons are position: relative, so without this an attached
-            // sibling paints over the focused button's focus-ring shadow
-            // (Chakra's Button applied zIndex 1 on focus when grouped).
-            "& > *": { _focus: { zIndex: 1 } },
+            // sibling paints over the focused button's focus-ring shadow.
+            // Chakra raised on :focus, but with the attached -1px overlap a
+            // raised button also paints over a seam its neighbour draws
+            // (e.g. a solid split button's white borderLeft), so raise only
+            // when the ring is actually shown.
+            "& > *": { _focusVisible: { zIndex: 1 } },
           }),
           isAttached
             ? css({

package/src/Toast.tsx

@@ -102,11 +102,13 @@ export const ToastProvider = () => {
 };
 
 export interface ToastOptions extends ToastContent {
+  /** Auto-dismiss after this many ms. Default 5000. Ignored when `persistent`. */
+  duration?: number;
   /**
-   * Auto-dismiss after ms; null means no auto-dismiss (Chakra's semantics).
-   * RAC enforces a 5000ms minimum for accessibility.
+   * Never auto-dismiss. The close button is forced on so the toast is not
+   * permanent and unremovable.
    */
-  duration?: number | null;
+  persistent?: boolean;
 }
 
 export interface ToastFn {
@@ -123,8 +125,9 @@ export interface ToastFn {
 }
 
 /**
- * useToast — imperative toast trigger matching the shape of Chakra's
- * `useToast()` call sites: `toast({ title, description, status, duration })`.
+ * useToast — imperative toast trigger in the shape of Chakra's `useToast()`
+ * call sites: `toast({ title, description, status, duration })`. Unlike
+ * Chakra there is no `duration: null`; use `persistent: true` instead.
  */
 export const useToast = (): ToastFn =>
   useMemo(() => {
@@ -137,6 +140,7 @@ export const useToast = (): ToastFn =>
       status,
       isClosable,
       duration,
+      persistent,
     }: ToastOptions) => {
       if (id && isActive(id)) {
         return;
@@ -147,11 +151,9 @@ export const useToast = (): ToastFn =>
           title,
           description,
           status,
-          // A toast that never times out must be dismissable or it is
-          // permanent and unremovable; force the close button on.
-          isClosable: isClosable || duration == null,
+          isClosable: isClosable || persistent,
         },
-        { timeout: duration ?? undefined },
+        { timeout: persistent ? undefined : duration ?? 5000 },
       );
     };
     const update = (id: string, options: ToastOptions) => {