@microbit/ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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",
@@ -45,7 +45,7 @@
     "@types/node": "^26.1.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react": "^5.2.0",
     "jsdom": "^29.1.1",
     "react": "^18.3.1",
     "react-aria": "^3.50.0",
@@ -54,7 +54,7 @@
     "react-icons": "^4.12.0",
     "react-intl": "^6.6.8",
     "typescript": "^5.4.2",
-    "vite": "^6.3.5",
+    "vite": "^7.3.6",
     "vitest": "^4.1.10"
   }
 }

package/src/Breadcrumb.tsx

@@ -110,5 +110,6 @@ export const BreadcrumbLink = (props: BreadcrumbLinkProps) => {
       </CurrentPageText>
     );
   }
-  return <Link {...props} />;
+  // The trail is navigation, so the prose underline stays off by default.
+  return <Link variant="standalone" {...props} />;
 };

package/src/Link.recipe.ts

@@ -0,0 +1,36 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineRecipe } from "@pandacss/dev";
+
+/**
+ * Link recipe — underlined by default: a link in prose must be marked by
+ * more than colour (WCAG 1.4.1). `standalone` drops the underline until
+ * hover, for links whose context already shows they are links (navigation,
+ * menus, cards, icon links).
+ *
+ * Registered in the base preset (base-preset.ts).
+ */
+export const link = defineRecipe({
+  className: "link",
+  jsx: ["Link"],
+  base: {
+    cursor: "pointer",
+    textDecoration: "underline",
+    outline: "none",
+    transitionProperty:
+      "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
+    transitionDuration: "normal",
+    _focusVisible: { focusRing: "outline" },
+  },
+  variants: {
+    variant: {
+      standalone: {
+        textDecoration: "none",
+        _hover: { textDecoration: "underline" },
+      },
+    },
+  },
+});

package/src/Link.tsx

@@ -4,20 +4,11 @@
  * SPDX-License-Identifier: MIT
  */
 import { styled } from "styled-system/jsx";
+import { link } from "styled-system/recipes";
 
 /**
- * Link — a styled anchor (no underline until hover, focus ring on keyboard
- * focus). Accepts Panda style props for colour etc.
+ * Link — a styled anchor, underlined by default (see Link.recipe.ts).
+ * Pass `variant="standalone"` for links whose context already shows they
+ * are links. Accepts Panda style props for colour etc.
  */
-export const Link = styled("a", {
-  base: {
-    cursor: "pointer",
-    textDecoration: "none",
-    outline: "none",
-    transitionProperty:
-      "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
-    transitionDuration: "normal",
-    _hover: { textDecoration: "underline" },
-    _focusVisible: { focusRing: "outline" },
-  },
-});
+export const Link = styled("a", link);

package/src/base-preset.ts

@@ -33,6 +33,7 @@ import { drawer } from "./Drawer.recipe";
 import { gridList } from "./GridList.recipe";
 import { heading } from "./Heading.recipe";
 import { input } from "./Input.recipe";
+import { link } from "./Link.recipe";
 import { listBox } from "./ListBox.recipe";
 import { numberField } from "./NumberField.recipe";
 import { menu } from "./Menu.recipe";
@@ -295,6 +296,7 @@ export const basePreset = definePreset({
       button,
       heading,
       input,
+      link,
       text,
       tooltip,
     },
@@ -439,6 +441,7 @@ export const basePreset = definePreset({
       drawer: ["*"],
       field: ["*"],
       gridList: ["*"],
+      link: ["*"],
       listBox: ["*"],
       input: ["*"],
       numberField: ["*"],