@microbit/ui 0.1.0-alpha.8 → 0.1.0

package/lang/ui.pt-br.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Trilha de navegação",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Fechar",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Sugestões",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Mostrar sugestões",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Carregando",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Diminuir {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Aumentar {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Selecione um item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Seleciona",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notificação} other {# notificações}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "Erro",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Informações",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "Sucesso",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "Atenção",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/lang/ui.vi.json

@@ -0,0 +1,62 @@
+{
+  "ui.breadcrumb": {
+    "defaultMessage": "Đường dẫn",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
+  "ui.close-action": {
+    "defaultMessage": "Đóng",
+    "description": "Close button text or label"
+  },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Gợi ý",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Hiển thị gợi ý",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Đang tải",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Giảm {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Tăng {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Chọn một mục",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Lựa chọn",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, other {# thông báo}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
+  "ui.toast-status-error": {
+    "defaultMessage": "Lỗi",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "Thông tin",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "Thành công",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-warning": {
+    "defaultMessage": "Cảnh báo",
+    "description": "Announced by screen readers before a warning notification"
+  }
+}

package/lang/ui.zh-cn.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "痕迹导航",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "关闭",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "建议",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "显示建议",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "正在加载",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "降低 {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "提高 {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "选择一个项目",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "选择",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# 个通知} other {# 个通知}}。",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "错误",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "信息",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "成功",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "警告",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/lang/ui.zh-tw.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "巡覽路徑",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "關閉",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "建議",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "顯示建議",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "正在載入",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.new-tab-notice": {
+    "defaultMessage": "opens in a new tab",
+    "description": "Visually hidden suffix on links that open a new tab, announced by screen readers"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "縮小 {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "放大 {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "選取項目",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "選擇",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# 個通知} other {# 個通知}}。",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "錯誤",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "資訊",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "成功",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "警告",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.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",
@@ -8,6 +8,7 @@
     ".": "./src/index.ts",
     "./base-preset": "./src/base-preset.ts",
     "./base-tokens": "./src/base-tokens.ts",
+    "./dense-preset": "./src/dense-preset.ts",
     "./messages": "./src/messages.ts",
     "./postcss-legacy-safari": "./postcss-legacy-safari.cjs",
     "./reset.css": "./reset.css",
@@ -25,14 +26,13 @@
   "scripts": {
     "panda": "panda codegen",
     "typecheck": "npm run panda && tsc --noEmit",
-    "prestorybook": "npm run panda",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "prebuild-storybook": "npm run panda",
-    "build-storybook": "storybook build"
+    "pretest": "npm run panda",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "@pandacss/dev": "^1.11.4",
     "react": "^18.3.1",
+    "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-icons": "^4.12.0 || ^5.0.0",
     "react-intl": "^6.6.8 || ^7.0.0"
@@ -40,19 +40,21 @@
   "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": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
     "react-intl": "^6.6.8",
-    "storybook": "^10.5.2",
     "typescript": "^5.4.2",
-    "vite": "^6.3.5"
-  },
-  "publishConfig": {
-    "tag": "alpha"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.10"
   }
 }

package/reset.css

@@ -21,3 +21,15 @@
   border-color: var(--colors-gray-200);
   word-wrap: break-word;
 }
+
+/*
+ * Panda's preflight (base layer) beats the rule above with
+ * `border-color: var(--global-color-border, currentcolor)`. The currentcolor
+ * fallback poisons `border-color: inherit` chains (inherit copies the
+ * currentcolor KEYWORD, which then resolves against the child's own `color`
+ * — e.g. white on the checkbox/radio control). Defining the hook keeps the
+ * default border colour a real colour, as Chakra's global reset did.
+ */
+:root {
+  --global-color-border: var(--colors-gray-200);
+}

package/src/Avatar.recipe.ts

@@ -0,0 +1,191 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { defineSlotRecipe } from "@pandacss/dev";
+
+/**
+ * Avatar slot recipe — a circle showing an image, the initials of a name, or
+ * a generic person glyph, optionally with a badge pinned to one corner.
+ *
+ * The background and text colour come from `var(--avatar-bg)` and
+ * `var(--avatar-color)` rather than being flat values, because the component
+ * derives them from the name (see Avatar.tsx) and writes them as inline custom
+ * properties. Two reasons, both about letting a call site win with a plain
+ * `css={{ bg: …, color: … }}`: an inline *property* would beat any class,
+ * where an inline *variable* only feeds this declaration; and both must stay
+ * single-class selectors, since a state selector like `&[data-light-bg]`
+ * would outrank the call site's utility class on specificity.
+ *
+ * The `calc(size / 2.5)` font size is resolved per size so an app preset can
+ * restate either independently (classroom's avatars are a grade larger).
+ *
+ * Registered in the base preset (base-preset.ts), which also has the
+ * `staticCss` entry that keeps the runtime-prop variants generated.
+ */
+export const avatar = defineSlotRecipe({
+  className: "avatar",
+  slots: ["root", "label", "image", "badge"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      position: "relative",
+      verticalAlign: "top",
+      textAlign: "center",
+      textTransform: "uppercase",
+      fontWeight: "medium",
+      borderRadius: "full",
+      // The no-name defaults; the name-derived pair arrives inline.
+      // gray.350 is the decorative-fill stop — 400+ are reserved for
+      // accessible outlines and text (see the ramp in base-preset.ts).
+      background: "var(--avatar-bg, token(colors.gray.350))",
+      color: "var(--avatar-color, token(colors.white))",
+      borderColor: "white",
+    },
+    label: {
+      lineHeight: "1",
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: "inherit",
+    },
+    badge: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      // em-relative, so a badge keeps its proportions at every avatar size.
+      borderWidth: "0.2em",
+      borderStyle: "solid",
+      borderColor: "white",
+      // The corner variants pin the badge with logical insets but nudge it
+      // out over the edge with a transform, which is physical — so the
+      // outward direction is a variable the RTL rule negates. Without it a
+      // `start` badge would sit at the right corner and nudge left, i.e.
+      // inwards over the avatar.
+      // Fallbacks carry a unit: `calc(-1 * 0)` is a number, which is invalid
+      // where a length is wanted, and would drop the RTL transform whole.
+      transform:
+        "translate(var(--avatar-badge-x, 0px), var(--avatar-badge-y, 0px))",
+      _rtl: {
+        transform:
+          "translate(calc(-1 * var(--avatar-badge-x, 0px)), var(--avatar-badge-y, 0px))",
+      },
+    },
+  },
+  variants: {
+    // The container size, and the `calc(size / 2.5)` font size kept as a
+    // calc over the same token so both track a preset that rescales `sizes`
+    // (the dense preset does, by 0.88).
+    //
+    // The font size lands on the root *and* the label. They are separate
+    // declarations so an app can
+    // move one without the other: the root's is the em basis for a badge,
+    // the label's is how big the initials are, and the two are not always
+    // the same wish.
+    size: {
+      "2xs": {
+        root: {
+          width: "4",
+          height: "4",
+          fontSize: "calc(token(sizes.4) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.4) / 2.5)" },
+      },
+      xs: {
+        root: {
+          width: "6",
+          height: "6",
+          fontSize: "calc(token(sizes.6) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.6) / 2.5)" },
+      },
+      sm: {
+        root: {
+          width: "8",
+          height: "8",
+          fontSize: "calc(token(sizes.8) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.8) / 2.5)" },
+      },
+      md: {
+        root: {
+          width: "12",
+          height: "12",
+          fontSize: "calc(token(sizes.12) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.12) / 2.5)" },
+      },
+      lg: {
+        root: {
+          width: "16",
+          height: "16",
+          fontSize: "calc(token(sizes.16) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.16) / 2.5)" },
+      },
+      xl: {
+        root: {
+          width: "24",
+          height: "24",
+          fontSize: "calc(token(sizes.24) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.24) / 2.5)" },
+      },
+      "2xl": {
+        root: {
+          width: "32",
+          height: "32",
+          fontSize: "calc(token(sizes.32) / 2.5)",
+        },
+        label: { fontSize: "calc(token(sizes.32) / 2.5)" },
+      },
+    },
+    /** Which corner the badge sits in. */
+    placement: {
+      "top-start": {
+        badge: {
+          top: "0",
+          insetStart: "0",
+          "--avatar-badge-x": "-25%",
+          "--avatar-badge-y": "-25%",
+        },
+      },
+      "top-end": {
+        badge: {
+          top: "0",
+          insetEnd: "0",
+          "--avatar-badge-x": "25%",
+          "--avatar-badge-y": "-25%",
+        },
+      },
+      "bottom-start": {
+        badge: {
+          bottom: "0",
+          insetStart: "0",
+          "--avatar-badge-x": "-25%",
+          "--avatar-badge-y": "25%",
+        },
+      },
+      "bottom-end": {
+        badge: {
+          bottom: "0",
+          insetEnd: "0",
+          "--avatar-badge-x": "25%",
+          "--avatar-badge-y": "25%",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    placement: "bottom-end",
+  },
+});