@microbit/ui 0.1.0-alpha.4 → 0.1.0-alpha.5

package/LICENSE.md

@@ -19,3 +19,35 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+## Third-party notices
+
+This package includes design tokens and component styling derived from
+[Chakra UI](https://github.com/chakra-ui/chakra-ui) v2: the token scales in
+`src/base-tokens.ts` were snapshotted from `@chakra-ui/theme`'s default
+values, and the component recipes were ported from Chakra's component styles.
+Chakra UI is used under the MIT License:
+
+> MIT License
+>
+> Copyright (c) 2019 Segun Adebayo
+>
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+>
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+>
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.

package/README.md

@@ -1,7 +1,9 @@
 # @microbit/ui
 
 react-aria-components + Panda CSS primitives with a design language ported from
-the Micro:bit Educational Foundation apps' original Chakra UI v2 themes.
+the Micro:bit Educational Foundation apps' original
+[Chakra UI](https://chakra-ui.com/) v2 themes (see
+[Chakra UI heritage](#chakra-ui-heritage-and-license)).
 
 The package **ships as source**: components import `styled-system/*`, which
 each consumer generates with its own Panda preset stack. There is no build
@@ -154,8 +156,9 @@ the token is consumed.
 ## Runtime token lookups
 
 For values that feed _computation_ rather than stylesheets (canvas painting,
-colour math, inline `style` for data-driven values — see gotcha #9 in
-RAC-MIGRATION.md), import the runtime lookup:
+colour math, inline `style` for data-driven values — see gotcha #9 in the
+repo's [migration playbook](../../docs/migration-playbook.md)), import the
+runtime lookup:
 
 ```ts
 import { token } from "@microbit/ui"; // re-exports styled-system/tokens
@@ -188,3 +191,17 @@ Crowdin via the repo-root `npm run update-translations -- <path to extracted
 Crowdin ZIP>` (config-driven over packages in
 `bin/update-translations.cjs`), after which you run `npm run i18n:tidy`
 from the root.
+
+## Chakra UI heritage and license
+
+This package's design language began as a faithful port of
+[Chakra UI](https://chakra-ui.com/) v2's, done so the apps it serves could
+leave Chakra without a redesign: `src/base-tokens.ts` was snapshotted from
+`@chakra-ui/theme`'s default token scales, and the `*.recipe.ts` files were
+ported from Chakra's component styles onto Panda config recipes.
+However far it evolves from that starting point, it owes its foundations to
+Chakra. Thanks to Segun Adebayo and the Chakra UI contributors.
+
+The package is [MIT](LICENSE.md) © Micro:bit Educational Foundation and
+contributors; Chakra UI is MIT © Segun Adebayo, and its notice is carried
+in [LICENSE.md](LICENSE.md).

package/lang/ui.de.json

@@ -0,0 +1,22 @@
+{
+  "ui.close-action": {
+    "defaultMessage": "Schließen",
+    "description": "Close button text or label"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "Error",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "Information",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "Success",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "Warning",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/lang/ui.ga-ie.json

@@ -0,0 +1,22 @@
+{
+  "ui.close-action": {
+    "defaultMessage": "Dún",
+    "description": "Close button text or label"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "Error",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "Information",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "Success",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "Warning",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/lang/ui.zh-cn.json

@@ -0,0 +1,22 @@
+{
+  "ui.close-action": {
+    "defaultMessage": "关闭",
+    "description": "Close button text or label"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "Error",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "Information",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "Success",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "Warning",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.4",
-  "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a Chakra v2 design language. Ships as source; see README for the consumption setup.",
+  "version": "0.1.0-alpha.5",
+  "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",
   "exports": {
     ".": "./src/index.ts",
     "./base-preset": "./src/base-preset.ts",
-    "./chakra-tokens": "./src/chakra-tokens.ts",
+    "./base-tokens": "./src/base-tokens.ts",
     "./messages": "./src/messages.ts",
     "./postcss-legacy-safari": "./postcss-legacy-safari.cjs",
     "./lang/*": "./lang/*"

package/src/Code.tsx

@@ -0,0 +1,20 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Code — inline code chip matching Chakra's <Code> (gray subtle, light mode).
+ */
+export const Code = styled("code", {
+  base: {
+    fontFamily: "mono",
+    fontSize: "sm",
+    px: "0.2em",
+    borderRadius: "sm",
+    bg: "gray.100",
+    color: "gray.800",
+  },
+});

package/src/Collapse.tsx

@@ -0,0 +1,168 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  CSSProperties,
+  ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface CollapseProps {
+  /** Expanded when true (Chakra's `in`). */
+  isOpen: boolean;
+  /** Height when collapsed (Chakra's `startingHeight`). */
+  startingHeight?: number | string;
+  /**
+   * Height when expanded (Chakra's `endingHeight`; defaults to the measured
+   * content height, tracked with a ResizeObserver so nested expansion works).
+   */
+  endingHeight?: number | string;
+  /** Remove the content from the DOM once the exit transition finishes. */
+  unmountOnExit?: boolean;
+  css?: SystemStyleObject;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+const toCssSize = (v: number | string) =>
+  typeof v === "number" ? `${v}px` : v;
+
+/**
+ * Collapse — Chakra's Collapse transition without framer-motion: the content
+ * is measured and the wrapper's height (and opacity, when collapsing to zero)
+ * transitions between the collapsed and expanded sizes. Content stays mounted
+ * unless `unmountOnExit` is set.
+ *
+ * As with framer-motion, only `isOpen` changes animate: initial mounts render
+ * at rest, and height corrections (late measurement, content growth) snap —
+ * otherwise a collapse mounted inside an entering view morphs during the
+ * outer animation.
+ */
+export const Collapse = ({
+  isOpen,
+  startingHeight = 0,
+  endingHeight,
+  unmountOnExit = false,
+  css: cssProp,
+  className,
+  style,
+  children,
+}: CollapseProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [measuredHeight, setMeasuredHeight] = useState<number>();
+  // For unmountOnExit: stay in the DOM until the exit transition ends.
+  const [present, setPresent] = useState(isOpen);
+  // The state the DOM shows. It follows isOpen from a layout effect so the
+  // transition-enable and the height flip land in the same commit (a
+  // render-time flip detector is unreliable: React can discard renders,
+  // losing the state update while keeping ref mutations).
+  const [displayOpen, setDisplayOpen] = useState(isOpen);
+  const [animating, setAnimating] = useState(false);
+
+  useLayoutEffect(() => {
+    if (isOpen === displayOpen) {
+      return;
+    }
+    if (isOpen) {
+      // Opening: mount (collapsed) first, then flip on the next frame so
+      // the browser has a computed collapsed state to transition from.
+      setPresent(true);
+      const raf = requestAnimationFrame(() => {
+        setAnimating(true);
+        setDisplayOpen(true);
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+    // Closing: enable the transition and flip together, pre-paint.
+    setAnimating(true);
+    setDisplayOpen(false);
+  }, [isOpen, displayOpen]);
+
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el || endingHeight !== undefined) {
+      return;
+    }
+    setMeasuredHeight(el.scrollHeight);
+    const observer = new ResizeObserver(() =>
+      setMeasuredHeight(el.scrollHeight),
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [endingHeight, present]);
+
+  // Fallback for browsers/edge cases where transitionend doesn't fire.
+  useEffect(() => {
+    if (animating) {
+      const timeout = setTimeout(() => {
+        setAnimating(false);
+        if (!isOpen && unmountOnExit) {
+          setPresent(false);
+        }
+      }, 400);
+      return () => clearTimeout(timeout);
+    }
+  }, [animating, isOpen, unmountOnExit]);
+
+  if (unmountOnExit && !present) {
+    return null;
+  }
+
+  const expanded =
+    endingHeight !== undefined
+      ? toCssSize(endingHeight)
+      : measuredHeight !== undefined
+        ? `${measuredHeight}px`
+        : "auto";
+  const collapsed = toCssSize(startingHeight);
+  const hideWhenCollapsed = collapsed === "0px" || collapsed === "0";
+
+  return (
+    <div
+      onTransitionEnd={(e) => {
+        if (e.propertyName === "height" && e.target === e.currentTarget) {
+          setAnimating(false);
+          if (!isOpen && unmountOnExit) {
+            setPresent(false);
+          }
+        }
+      }}
+      className={cx(
+        css(
+          {
+            overflow: "hidden",
+            display: "block",
+            transitionDuration: "0.25s",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            _motionReduce: { transition: "none" },
+          },
+          cssProp,
+        ),
+        className,
+      )}
+      // Runtime-measured/caller-supplied heights; transitions enabled only
+      // while an isOpen change is in flight.
+      style={{
+        transitionProperty: animating ? "height, opacity" : "none",
+        height: displayOpen ? expanded : collapsed,
+        opacity: displayOpen || !hideWhenCollapsed ? 1 : 0,
+        // At rest fully-collapsed, remove the content from the a11y tree
+        // and tab order, as Chakra did (kept visible while animating so
+        // the exit transition shows).
+        visibility:
+          displayOpen || animating || !hideWhenCollapsed ? undefined : "hidden",
+        ...style,
+      }}
+    >
+      <div ref={contentRef}>{children}</div>
+    </div>
+  );
+};

package/src/Divider.tsx

@@ -3,19 +3,50 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { ComponentProps, forwardRef } from "react";
 import { styled } from "styled-system/jsx";
 
-/**
- * Divider — a horizontal rule matching Chakra's <Divider> (hairline at 60%
- * opacity; set `borderColor` to tint). Horizontal only.
- */
-export const Divider = styled("hr", {
+const StyledDivider = styled("hr", {
   base: {
     border: 0,
-    borderBottomWidth: "1px",
-    borderBottomStyle: "solid",
     borderColor: "gray.200",
     opacity: 0.6,
-    width: "100%",
   },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        width: "100%",
+      },
+      vertical: {
+        borderLeftWidth: "1px",
+        borderLeftStyle: "solid",
+        height: "100%",
+      },
+    },
+  },
+  defaultVariants: { orientation: "horizontal" },
 });
+
+export interface DividerProps extends ComponentProps<typeof StyledDivider> {}
+
+/**
+ * Divider — a hairline rule matching Chakra's <Divider> (60% opacity; set
+ * `borderColor` to tint). `orientation="vertical"` needs a height from the
+ * layout, e.g. a stretched flex row (Chakra's vertical divider likewise
+ * relied on `height: 100%`).
+ */
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
+  function Divider(props, ref) {
+    return (
+      <StyledDivider
+        ref={ref}
+        aria-orientation={
+          props.orientation === "vertical" ? "vertical" : "horizontal"
+        }
+        {...props}
+      />
+    );
+  },
+);

package/src/Fade.tsx

@@ -0,0 +1,48 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import { css, cx } from "styled-system/css";
+import { SystemStyleObject } from "styled-system/types";
+
+export interface FadeProps {
+  /** Visible when true; faded out (but mounted) when false. */
+  isOpen: boolean;
+  css?: SystemStyleObject;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Fade — Chakra's Fade transition as a CSS opacity transition (see Slide for
+ * the pattern). Content stays mounted throughout.
+ */
+export const Fade = ({
+  isOpen,
+  css: cssProp,
+  className,
+  children,
+}: FadeProps) => (
+  <div
+    data-open={isOpen ? "" : undefined}
+    className={cx(
+      css(
+        {
+          opacity: 0,
+          pointerEvents: "none",
+          "&[data-open]": { opacity: 1, pointerEvents: "auto" },
+          transitionProperty: "opacity",
+          transitionDuration: "0.2s",
+          transitionTimingFunction: "ease-out",
+          _motionReduce: { transition: "none" },
+        },
+        cssProp,
+      ),
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/IconButton.tsx

@@ -10,7 +10,12 @@ export interface IconButtonProps
   extends Omit<ButtonProps, "leftIcon" | "rightIcon"> {
   /** Icon-only buttons have no visible label, so this is required. */
   "aria-label": string;
-  /** Circular rather than the recipe's border-radius (Chakra's `isRound`). */
+  /**
+   * Circular rather than the recipe's border-radius (Chakra's `isRound`).
+   * Usually a visual no-op here: the 2rem `button` radius already renders
+   * square icon buttons as circles. Kept for ported call sites and for
+   * variants/overrides with a smaller radius (e.g. `unstyled`).
+   */
   isRound?: boolean;
 }
 

package/src/Kbd.tsx

@@ -0,0 +1,26 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { styled } from "styled-system/jsx";
+
+/**
+ * Kbd — keyboard-key chip matching Chakra's <Kbd> (light mode).
+ */
+export const Kbd = styled("kbd", {
+  base: {
+    bg: "gray.100",
+    borderRadius: "md",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "gray.200",
+    borderBottomWidth: "3px",
+    fontFamily: "mono",
+    fontSize: "0.8em",
+    fontWeight: "bold",
+    lineHeight: "normal",
+    px: "0.4em",
+    whiteSpace: "nowrap",
+  },
+});

package/src/List.tsx

@@ -6,10 +6,14 @@
 import { styled } from "styled-system/jsx";
 
 /**
- * Unstyled list, matching Chakra's <List> (Panda's preflight already zeroes
- * margins/padding and removes list markers).
+ * Unstyled list, matching Chakra's <List>. The marker removal is explicit —
+ * Chakra's List set listStyleType itself, and coexisting apps run without
+ * Panda's preflight (margins/padding are zeroed by whichever reset is
+ * active).
  */
-export const List = styled("ul");
+export const List = styled("ul", {
+  base: { listStyleType: "none" },
+});
 
 /** List item, matching Chakra's <ListItem>. */
 export const ListItem = styled("li", {

package/src/Menu.recipe.ts

@@ -18,7 +18,17 @@ import { defineSlotRecipe } from "@pandacss/dev";
  */
 export const menu = defineSlotRecipe({
   className: "menu",
-  slots: ["content", "list", "item", "icon", "label", "divider"],
+  slots: [
+    "content",
+    "list",
+    "item",
+    "icon",
+    "label",
+    "divider",
+    "group",
+    "groupTitle",
+    "itemIndicator",
+  ],
   base: {
     content: {
       bg: "white",
@@ -84,5 +94,26 @@ export const menu = defineSlotRecipe({
       my: "2",
       opacity: 0.6,
     },
+    group: {},
+    // Chakra's MenuGroup/MenuOptionGroup title.
+    groupTitle: {
+      display: "block",
+      mx: "4",
+      my: "2",
+      fontWeight: "semibold",
+      fontSize: "sm",
+    },
+    // Check glyph slot for MenuItemOption: space always reserved (as Chakra
+    // does), visible only on the selected item (RAC sets data-selected on it).
+    itemIndicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      marginEnd: "0.75rem",
+      fontSize: "0.8em",
+      opacity: 0,
+      "[data-selected] &": { opacity: 1 },
+    },
   },
 });

package/src/Menu.tsx

@@ -5,17 +5,21 @@
  */
 import { ReactNode, useCallback, useState } from "react";
 import {
+  Header as RACHeader,
   Menu as RACMenu,
   MenuItem as RACMenuItem,
   MenuItemProps as RACMenuItemProps,
+  MenuSection as RACMenuSection,
   MenuTrigger as RACMenuTrigger,
   Popover,
   PopoverProps,
   Separator,
 } from "react-aria-components";
+import { RiCheckLine } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
 import { menu } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
+import { Icon } from "./Icon";
 import { useOverlayCloseRegistrar } from "./SharedUIProvider";
 
 export interface MenuTriggerProps {
@@ -152,6 +156,91 @@ export const MenuItem = ({
   );
 };
 
+export interface MenuOptionGroupProps {
+  /** Group heading shown above the options (Chakra's `title`). */
+  title?: ReactNode;
+  /** The selected `MenuItemOption`'s value (radio semantics). */
+  value?: string;
+  /** Called with the newly selected option's value. */
+  onChange?: (value: string) => void;
+  /** `MenuItemOption` children. */
+  children: ReactNode;
+  css?: SystemStyleObject;
+  className?: string;
+}
+
+/**
+ * MenuOptionGroup — a single-select (radio) group of `MenuItemOption`s within
+ * a menu, replacing Chakra's `MenuOptionGroup type="radio"`. Selection is
+ * section-scoped (RAC MenuSection), so a menu can mix action items and option
+ * groups.
+ */
+export const MenuOptionGroup = ({
+  title,
+  value,
+  onChange,
+  children,
+  css: cssProp,
+  className,
+}: MenuOptionGroupProps) => {
+  const slots = menu();
+  return (
+    <RACMenuSection
+      className={cx(slots.group, cssProp ? css(cssProp) : undefined, className)}
+      selectionMode="single"
+      selectedKeys={value != null ? [value] : []}
+      onSelectionChange={(keys) => {
+        if (keys !== "all") {
+          const key = keys.values().next().value;
+          if (key != null) {
+            onChange?.(String(key));
+          }
+        }
+      }}
+    >
+      {title != null && (
+        <RACHeader className={slots.groupTitle}>{title}</RACHeader>
+      )}
+      {children}
+    </RACMenuSection>
+  );
+};
+
+export interface MenuItemOptionProps
+  extends Omit<RACMenuItemProps, "className" | "children" | "id" | "value"> {
+  /** This option's value within its `MenuOptionGroup`. */
+  value: string;
+  css?: SystemStyleObject;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * MenuItemOption — a selectable option inside a `MenuOptionGroup`, with a
+ * check indicator on the selected item (Chakra's MenuItemOption).
+ */
+export const MenuItemOption = ({
+  value,
+  css: cssProp,
+  className,
+  children,
+  ...rest
+}: MenuItemOptionProps) => {
+  const slots = menu();
+  return (
+    <RACMenuItem
+      id={value}
+      className={cx(slots.item, cssProp ? css(cssProp) : undefined, className)}
+      {...rest}
+    >
+      <span className={slots.itemIndicator} aria-hidden>
+        <Icon as={RiCheckLine} />
+      </span>
+      <span className={slots.label}>{children}</span>
+    </RACMenuItem>
+  );
+};
+
 export interface MenuDividerProps {
   css?: SystemStyleObject;
   className?: string;

package/src/Modal.tsx

@@ -3,7 +3,13 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { createContext, ReactNode, RefObject, useContext } from "react";
+import {
+  createContext,
+  CSSProperties,
+  ReactNode,
+  RefObject,
+  useContext,
+} from "react";
 import {
   Button as RACButton,
   Dialog,
@@ -54,6 +60,12 @@ export interface ModalProps {
   isKeyboardDismissDisabled?: boolean;
   /** Style overrides for the dialog box (Chakra's ModalContent props). */
   contentCss?: SystemStyleObject;
+  /**
+   * Inline styles for the dialog box, for runtime-computed positioning that
+   * Panda can't statically extract (e.g. a dialog aligned to a measured
+   * element). Prefer `contentCss` for static styles.
+   */
+  contentStyle?: CSSProperties;
   /**
    * Style overrides for the backdrop (Chakra's ModalOverlay props), e.g. a
    * transparent backdrop when something else provides the dimming.
@@ -99,6 +111,7 @@ export const Modal = ({
   motionless,
   isKeyboardDismissDisabled,
   contentCss,
+  contentStyle,
   overlayCss,
   role,
   isCentered,
@@ -141,6 +154,7 @@ export const Modal = ({
     >
       <UnmountCallback callback={handleUnmount} />
       <RACModal
+        style={contentStyle}
         className={cx(
           slots.content,
           motionlessClass,

package/src/NumberField.recipe.ts

@@ -0,0 +1,67 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * NumberField slot recipe — Chakra's NumberInput look: an outline input (the
+ * `input` recipe styles the input itself) with a right-hand stepper column of
+ * two stacked buttons. Consumed by the shared-ui NumberField
+ * (react-aria-components NumberField).
+ *
+ * Registered in the base preset (base-preset.ts). No variants, so it needs
+ * no `staticCss` entry.
+ */
+export const numberField = defineSlotRecipe({
+  className: "numberField",
+  slots: ["root", "group", "stepper", "stepperButton"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+    },
+    group: {
+      position: "relative",
+      zIndex: 0,
+    },
+    // Chakra's NumberInputStepper: a column overlaying the input's right
+    // edge, inset by the input border.
+    stepper: {
+      display: "flex",
+      flexDirection: "column",
+      position: "absolute",
+      insetEnd: "0",
+      top: "0",
+      height: "calc(100% - 2px)",
+      margin: "1px",
+      width: "6",
+      zIndex: 1,
+    },
+    stepperButton: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1,
+      cursor: "pointer",
+      lineHeight: "normal",
+      fontSize: "xs",
+      color: "inherit",
+      bg: "transparent",
+      borderStart: "1px solid",
+      borderColor: "gray.200",
+      transitionProperty: "background",
+      transitionDuration: "ultra-fast",
+      "&:last-child": {
+        borderTop: "1px solid",
+        borderTopColor: "gray.200",
+        marginTop: "-1px",
+      },
+      "&[data-hovered]": { bg: "gray.100" },
+      "&[data-pressed]": { bg: "gray.200" },
+      "&[data-disabled]": { opacity: 0.4, cursor: "not-allowed" },
+    },
+  },
+});

package/src/NumberField.tsx

@@ -0,0 +1,86 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { forwardRef, ReactNode } from "react";
+import {
+  Button as RACButton,
+  Group as RACGroup,
+  Input as RACInput,
+  Label as RACLabel,
+  NumberField as RACNumberField,
+  NumberFieldProps as RACNumberFieldProps,
+} from "react-aria-components";
+import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
+import { css, cx } from "styled-system/css";
+import { field, input, numberField } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
+import { Icon } from "./Icon";
+
+export interface NumberFieldProps
+  extends Omit<RACNumberFieldProps, "className" | "children" | "style"> {
+  /** Visible label (optional; otherwise pass `aria-label`). */
+  label?: ReactNode;
+  /** Root style overrides (e.g. row layout for label-beside-field forms). */
+  css?: SystemStyleObject;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
+  /** Group (input + steppers) style overrides — set `width` here. */
+  groupCss?: SystemStyleObject;
+  /** Input style overrides (e.g. a smaller size than the recipe's md). */
+  inputCss?: SystemStyleObject;
+}
+
+/**
+ * NumberField — react-aria-components <NumberField> styled like Chakra's
+ * NumberInput (outline input + right-hand stepper column). The ref is
+ * forwarded to the input element. Value clamping to min/maxValue is
+ * handled by react-aria; onChange receives NaN when the field is emptied.
+ */
+export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
+  function NumberField(
+    { label, css: cssProp, labelCss, groupCss, inputCss, ...rest },
+    ref,
+  ) {
+    const slots = numberField();
+    const fieldSlots = field();
+    return (
+      <RACNumberField
+        {...rest}
+        className={cx(slots.root, cssProp ? css(cssProp) : undefined)}
+      >
+        {label != null && (
+          <RACLabel
+            className={cx(
+              fieldSlots.label,
+              labelCss ? css(labelCss) : undefined,
+            )}
+          >
+            {label}
+          </RACLabel>
+        )}
+        <RACGroup
+          className={cx(slots.group, groupCss ? css(groupCss) : undefined)}
+        >
+          <RACInput
+            ref={ref}
+            className={cx(
+              input(),
+              // Room for the stepper column.
+              css({ paddingEnd: "6" }, inputCss),
+            )}
+          />
+          <div className={slots.stepper}>
+            <RACButton slot="increment" className={slots.stepperButton}>
+              <Icon as={RiArrowUpSFill} />
+            </RACButton>
+            <RACButton slot="decrement" className={slots.stepperButton}>
+              <Icon as={RiArrowDownSFill} />
+            </RACButton>
+          </div>
+        </RACGroup>
+      </RACNumberField>
+    );
+  },
+);

package/src/PopoverArrow.tsx

@@ -13,11 +13,26 @@ import { SystemStyleObject } from "styled-system/types";
 // rotating about the centre keeps it flush against the overlay on every side
 // — no translate fix-ups, whose signs depend on rotation direction and are
 // easy to get wrong (they detached the tooltip arrow from its box).
+//
+// "Flush" still antialiases to a hairline seam when the overlay's edge lands
+// on a subpixel boundary, so each placement also pulls the svg 1px into the
+// overlay with a negative margin on the overlay-facing side (margins move the
+// box before the rotate, so the bleed direction is unaffected by it).
 const arrowBase = css({
   "& svg": { display: "block" },
-  "&[data-placement='bottom'] svg": { transform: "rotate(180deg)" },
-  "&[data-placement='right'] svg": { transform: "rotate(90deg)" },
-  "&[data-placement='left'] svg": { transform: "rotate(-90deg)" },
+  "&[data-placement='top'] svg": { marginTop: "-1px" },
+  "&[data-placement='bottom'] svg": {
+    transform: "rotate(180deg)",
+    marginBottom: "-1px",
+  },
+  "&[data-placement='right'] svg": {
+    transform: "rotate(90deg)",
+    marginRight: "-1px",
+  },
+  "&[data-placement='left'] svg": {
+    transform: "rotate(-90deg)",
+    marginLeft: "-1px",
+  },
 });
 
 export interface PopoverArrowProps {

package/src/Slider.tsx

@@ -37,6 +37,23 @@ export interface SliderProps {
    */
   mark?: ReactNode;
   markCss?: SystemStyleObject;
+  /**
+   * Additional positioned overlays rendered inside the slider root
+   * (always-visible value labels, threshold markers, ...). The root is
+   * position: relative; position children absolutely, typically with a
+   * percentage `left` for the track position.
+   */
+  children?: ReactNode;
+  /**
+   * Tooltip-styled bubble anchored above the thumb (Chakra's
+   * Tooltip-around-SliderThumb pattern). Rendered only while
+   * `isThumbTooltipOpen`; drive it from hover/focus, e.g. via
+   * `onThumbFocusChange` and mouse handlers on an enclosing element.
+   */
+  thumbTooltip?: ReactNode;
+  isThumbTooltipOpen?: boolean;
+  /** Thumb focus tracking (react-aria focus events). */
+  onThumbFocusChange?: (isFocused: boolean) => void;
 }
 
 /**
@@ -57,6 +74,10 @@ export const Slider = ({
   thumbCss,
   mark,
   markCss,
+  children,
+  thumbTooltip,
+  isThumbTooltipOpen,
+  onThumbFocusChange,
 }: SliderProps) => {
   const slots = slider();
   const percent = ((value - minValue) / (maxValue - minValue)) * 100;
@@ -91,9 +112,52 @@ export const Slider = ({
           style={{ width: `${percent}%` }}
         />
       </SliderTrack>
+      {thumbTooltip && isThumbTooltipOpen && (
+        // Matches the shared Tooltip's look (tooltipBase) with a bottom
+        // arrow, anchored above the thumb.
+        <div
+          role="presentation"
+          className={css({
+            position: "absolute",
+            bottom: "calc(50% + 14px)",
+            transform: "translateX(-50%)",
+            bg: "gray.700",
+            color: "white",
+            px: "2",
+            py: "1",
+            borderRadius: "md",
+            fontSize: "sm",
+            fontWeight: "medium",
+            boxShadow: "md",
+            zIndex: "tooltip",
+            whiteSpace: "nowrap",
+            _after: {
+              content: '""',
+              position: "absolute",
+              // 1px into the box so subpixel edges can't antialias into a
+              // hairline seam (see PopoverArrow).
+              top: "calc(100% - 1px)",
+              left: "50%",
+              transform: "translateX(-50%)",
+              borderWidth: "4px",
+              borderStyle: "solid",
+              // Per-side: tokens don't resolve inside multi-value
+              // shorthands (they emit verbatim and the browser drops the
+              // invalid declaration).
+              borderColor: "transparent",
+              borderTopColor: "gray.700",
+            },
+          })}
+          style={{ left: `${percent}%` }}
+        >
+          {thumbTooltip}
+        </div>
+      )}
       <SliderThumb
+        onFocusChange={onThumbFocusChange}
         className={cx(slots.thumb, thumbCss ? css(thumbCss) : undefined)}
       />
+      {children}
     </RACSlider>
   );
 };

package/src/TextField.tsx

@@ -30,6 +30,8 @@ export interface TextFieldProps
   /** Per-instance style overrides for the helper text. */
   helperTextCss?: SystemStyleObject;
   onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  /** Input autocapitalize attribute (react-aria's TextField omits it). */
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
 }
 
 /**
@@ -39,7 +41,15 @@ export interface TextFieldProps
  */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   function TextField(
-    { label, helperText, errorMessage, helperTextCss, onFocus, ...rest },
+    {
+      label,
+      helperText,
+      errorMessage,
+      helperTextCss,
+      onFocus,
+      autoCapitalize,
+      ...rest
+    },
     ref,
   ) {
     const slots = field();
@@ -53,7 +63,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             </span>
           ) : null}
         </RACLabel>
-        <RACInput ref={ref} className={input()} onFocus={onFocus} />
+        <RACInput
+          ref={ref}
+          className={input()}
+          onFocus={onFocus}
+          autoCapitalize={autoCapitalize}
+        />
         {helperText && (
           <RACText
             slot="description"

package/src/Toast.tsx

@@ -118,6 +118,8 @@ export interface ToastFn {
    * re-added, so unlike Chakra it re-animates and restarts any timeout.
    */
   update(id: string, options: ToastOptions): void;
+  /** Dismiss all visible toasts (Chakra's toast.closeAll). */
+  closeAll(): void;
 }
 
 /**
@@ -161,5 +163,9 @@ export const useToast = (): ToastFn =>
       }
       add({ ...options, id });
     };
-    return Object.assign(add, { isActive, update });
+    const closeAll = () => {
+      // Copy first: closing mutates visibleToasts as we iterate.
+      [...toastQueue.visibleToasts].forEach((t) => toastQueue.close(t.key));
+    };
+    return Object.assign(add, { isActive, update, closeAll });
   }, []);

package/src/base-preset.ts

@@ -20,7 +20,7 @@ import {
   sizes,
   spacing,
   zIndex,
-} from "./chakra-tokens";
+} from "./base-tokens";
 // Config recipes are colocated with the shared-ui components they style; this
 // preset registers them so Panda merges them at codegen time.
 import { button } from "./Button.recipe";
@@ -29,6 +29,7 @@ import { checkbox } from "./Checkbox.recipe";
 import { drawer } from "./Drawer.recipe";
 import { heading } from "./Heading.recipe";
 import { input } from "./Input.recipe";
+import { numberField } from "./NumberField.recipe";
 import { menu } from "./Menu.recipe";
 import { slider } from "./Slider.recipe";
 import { switchRecipe } from "./Switch.recipe";
@@ -37,8 +38,8 @@ import { field } from "./TextField.recipe";
 import { toast } from "./Toast.recipe";
 
 /**
- * The base preset: the complete, working micro:bit design system. Chakra v2's
- * default token scales (chakra-tokens.ts snapshot), the micro:bit house style
+ * The base preset: the complete, working micro:bit design system. The base
+ * token scales (base-tokens.ts), the micro:bit house style
  * (pill `radii.button`, `outline*` focus shadows, Helvetica fonts, the
  * `language`/`toolbar` button variants in Button.recipe.ts, the
  * `languageText`/`toast*Bg`/`statusBarBg` semantic tokens), the shared-ui
@@ -175,6 +176,7 @@ export const basePreset = definePreset({
       drawer,
       field,
       menu,
+      numberField,
       slider,
       switchRecipe,
       toast,

package/src/{chakra-tokens.ts → base-tokens.ts}

@@ -1,12 +1,15 @@
 /**
  * (c) 2026, Micro:bit Educational Foundation and contributors
  *
+ * Token values (c) 2019, Segun Adebayo — Chakra UI's @chakra-ui/theme
+ * defaults, used under the MIT License (see LICENSE.md third-party notices).
+ *
  * SPDX-License-Identifier: MIT
  */
-/* eslint-disable */
-// GENERATED by bin/gen-chakra-tokens.mjs (snapshot of @chakra-ui/theme defaults).
-// Do not edit by hand. Canonical Chakra v2 foundation values in Panda token
-// format so the OSS preset matches Chakra exactly.
+// The base token scales, in Panda token format. Began as a mechanical
+// snapshot of Chakra UI v2's @chakra-ui/theme defaults; hand-maintained.
+// Deliberately absent: `fonts` (foundation-owned, defined in base-preset.ts)
+// and `transition.property` (no Panda token category; inlined at use sites).
 
 export const colors = {
   transparent: {

package/src/hooks/useClipboard.ts

@@ -0,0 +1,27 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Copy a value to the clipboard with a transient `hasCopied` flag for
+ * "Copied!" feedback. Replaces Chakra's `useClipboard`.
+ */
+export function useClipboard(
+  value: string,
+  timeoutMs = 1500,
+): { onCopy: () => void; hasCopied: boolean } {
+  const [hasCopied, setHasCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setHasCopied(true);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
+    });
+  }, [value, timeoutMs]);
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return { onCopy, hasCopied };
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useSyncExternalStore } from "react";
+
+/**
+ * Tracks a raw CSS media query, replacing Chakra's `useMediaQuery` for
+ * queries that aren't breakpoint-based (custom widths, height-based
+ * queries). For the preset's breakpoint scale prefer `useBreakpointValue`.
+ * Returns false during SSR.
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,18 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useRef } from "react";
+
+/**
+ * The value from the previous render (undefined on the first render).
+ * Replaces Chakra's `usePrevious`.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/src/index.ts

@@ -19,6 +19,7 @@ export * from "./Input";
 export * from "./InputGroup";
 export * from "./LinkBox";
 export * from "./NativeSelect";
+export * from "./NumberField";
 export * from "./ProgressBar";
 export * from "./Slide";
 export * from "./Slider";
@@ -32,6 +33,10 @@ export * from "./Link";
 export * from "./Icon";
 export * from "./CloseButton";
 export * from "./CloseIcon";
+export * from "./Code";
+export * from "./Collapse";
+export * from "./Fade";
+export * from "./Kbd";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./List";
@@ -43,3 +48,6 @@ export * from "./Tooltip";
 export * from "./Toast";
 export * from "./VisuallyHidden";
 export { useBreakpointValue } from "./hooks/useBreakpointValue";
+export { useClipboard } from "./hooks/useClipboard";
+export { useMediaQuery } from "./hooks/useMediaQuery";
+export { usePrevious } from "./hooks/usePrevious";