@microbit/ui 0.1.0-alpha.20 → 0.1.0-alpha.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.21",
   "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",

package/src/Modal.recipe.ts

@@ -54,7 +54,13 @@ export const dialog = defineSlotRecipe({
     overlay: {
       position: "fixed",
       inset: 0,
-      w: "100%",
+      // 100vw, not 100%: react-aria's scroll lock reserves the root
+      // scrollbar gutter (scrollbar-gutter: stable), which narrows the
+      // containing block for fixed elements — 100% leaves an uncovered
+      // strip where the page scrollbar was. Viewport units span the
+      // reserved gutter, so the backdrop (and a full-size dialog) reach
+      // the real viewport edge.
+      w: "100vw",
       h: "100%",
       bg: "blackAlpha.600",
       zIndex: "modal",

package/src/Modal.tsx

@@ -195,6 +195,12 @@ export const Modal = ({
       }}
       isDismissable={isDismissable}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+      // Marker for the html:has() rule in base-preset.ts that releases the
+      // scroll lock's reserved scrollbar gutter while a full-size dialog is
+      // open: the reserved strip is a hit-testing dead zone (clicks fall
+      // through to the root and read as outside-dismissal), and the page
+      // reflowing behind an opaque full-screen dialog is invisible.
+      data-fullsize={size === "full" || undefined}
       className={cx(
         slots.overlay,
         motionlessClass,

package/src/Toast.tsx

@@ -36,11 +36,43 @@ export interface ToastContent {
   isClosable?: boolean;
 }
 
+// Enter/exit/reflow animation: queue updates run inside a view transition
+// (react-aria's supported mechanism — toasts unmount synchronously, so CSS
+// transitions on the element can't animate the exit). The keyframes and the
+// ::view-transition rules live in base-preset.ts, scoped by this class,
+// which marks the transition as toast-initiated while it runs: the rules
+// select entering/exiting groups with `(*)`, avoiding view-transition-class
+// (needs Safari 18.2/Chrome 125 vs 18.0/111 for the API itself), and the
+// scoping keeps them — and the pointer-events override — away from any view
+// transitions the app runs. Browsers without the API and reduced-motion
+// users get the bare update.
+const TRANSITION_CLASS = "microbit-ui-toast-transition";
+let activeTransitions = 0;
+const wrapUpdate = (fn: () => void) => {
+  if (
+    typeof document !== "undefined" &&
+    document.startViewTransition &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    activeTransitions++;
+    document.documentElement.classList.add(TRANSITION_CLASS);
+    const transition = document.startViewTransition(fn);
+    transition.finished.finally(() => {
+      if (--activeTransitions === 0) {
+        document.documentElement.classList.remove(TRANSITION_CLASS);
+      }
+    });
+  } else {
+    fn();
+  }
+};
+
 // Module-level queue shared by useToast() and the <ToastProvider/> region.
 // (RAC's Toast API is still flagged UNSTABLE_*; the surface is small and behind
 // this module, so a swap to a custom queue later is contained.)
 export const toastQueue = new RACToastQueue<ToastContent>({
   maxVisibleToasts: 5,
+  wrapUpdate,
 });
 
 // Status icon matching Chakra's AlertIcon (filled glyphs, coloured by the
@@ -83,7 +115,13 @@ export const ToastProvider = () => {
       {({ toast }) => {
         const status = toast.content.status ?? "info";
         return (
-          <RACToast toast={toast} className={toastRecipe({ status }).root}>
+          <RACToast
+            toast={toast}
+            className={toastRecipe({ status }).root}
+            // A unique view-transition-name per toast creates its snapshot
+            // group and lets old/new pair up across the transition.
+            style={{ viewTransitionName: toast.key }}
+          >
             <Icon as={statusIcon[status]} className={slots.icon} aria-hidden />
             <RACToastContent>
               {/* Colour and icon are the only visible status signals; say it

package/src/base-preset.ts

@@ -125,6 +125,15 @@ export const basePreset = definePreset({
           background: "var(--skeleton-end-color)",
         },
       },
+      // Toast enter/exit, played on the view-transition snapshots (see the
+      // ::view-transition rules in globalCss). Chakra-ballpark timings: fade
+      // + short slide in, quicker fade + shrink out.
+      toastSlideIn: {
+        from: { opacity: 0, transform: "translateY(-24px)" },
+      },
+      toastSlideOut: {
+        to: { opacity: 0, transform: "scale(0.85)" },
+      },
     },
     tokens: {
       colors: {
@@ -314,6 +323,40 @@ export const basePreset = definePreset({
     "h1, h2, h3, h4, h5, h6": {
       textWrap: "wrap",
     },
+    // While a full-size dialog is open (the Modal stamps data-fullsize on
+    // its overlay), release the scrollbar gutter that react-aria's scroll
+    // lock reserves on the root. The reserved strip is scrollbar chrome to
+    // hit-testing — elementFromPoint returns null there, so clicks fall
+    // through to the root and dismiss the dialog, and controls near the
+    // right edge lose part of their target. With the page fully covered,
+    // the reflow this causes is invisible. !important: react-aria sets the
+    // reservation as a non-important inline style.
+    "html:has([data-fullsize])": {
+      scrollbarGutter: "auto !important",
+    },
+    // Toast enter/exit (the ToastQueue wraps updates in
+    // document.startViewTransition — see Toast.tsx, which also stamps the
+    // scoping class on <html> while its transitions run). Timings sit in
+    // Chakra's ballpark: 0.4s fade+slide in, 0.2s fade+shrink out; the
+    // stack reflow comes from the default group animation. `(*)` +
+    // `:only-child` matches exactly the entering/exiting toast groups: the
+    // root snapshot always has both old and new children, and toasts are
+    // the only named groups during a toast transition. The snapshot
+    // overlay must not eat clicks while a toast animates, hence
+    // pointer-events, scoped likewise.
+    "html.microbit-ui-toast-transition::view-transition": {
+      pointerEvents: "none",
+    },
+    // `both` fill: the snapshots must hold the keyframes' end states for
+    // however long the rest of the transition (e.g. the 0.25s default group
+    // animation) outlives them, or they snap back to full size/opacity for
+    // the remainder.
+    "html.microbit-ui-toast-transition::view-transition-new(*):only-child": {
+      animation: "toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both",
+    },
+    "html.microbit-ui-toast-transition::view-transition-old(*):only-child": {
+      animation: "toastSlideOut 0.2s cubic-bezier(0.4, 0, 1, 1) both",
+    },
   },
   // shared-ui components forward `variant`/`size`/etc. as runtime props to
   // the recipe functions, so Panda's static analysis can't see which variants