@microbit/ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/lang/ui.nl.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Kruimelpad",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Afsluiten",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Suggesties",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Suggesties weergeven",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Laden",
+    "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": "Verlaag {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": "Verhoog {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": "Selecteer een item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Selecteer",
+    "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 {# melding} other {# meldingen}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "Fout",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Informatie",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "Succes",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "Waarschuwing",
     "description": "Announced by screen readers before a warning notification"
   }
 }

package/lang/ui.pl.json

@@ -1,22 +1,62 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Ścieżka nawigacji",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Zamknij",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Sugestie",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Pokaż sugestie",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Ładowanie",
+    "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": "Zmniejsz {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": "Zwiększ {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": "Wybierz element",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Wybierz",
+    "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 {# powiadomienie} few {# powiadomienia} many {# powiadomień} other {# powiadomienia}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
-    "defaultMessage": "Error",
+    "defaultMessage": "Błąd",
     "description": "Announced by screen readers before an error notification"
   },
   "ui.toast-status-info": {
-    "defaultMessage": "Information",
+    "defaultMessage": "Informacja",
     "description": "Announced by screen readers before an informational notification"
   },
   "ui.toast-status-success": {
-    "defaultMessage": "Success",
+    "defaultMessage": "Sukces",
     "description": "Announced by screen readers before a success notification"
   },
   "ui.toast-status-warning": {
-    "defaultMessage": "Warning",
+    "defaultMessage": "Ostrzeżenie",
     "description": "Announced by screen readers before a warning notification"
   }
 }

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

@@ -0,0 +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": "错误",
+    "description": "Announced by screen readers before an error notification"
+  },
+  "ui.toast-status-info": {
+    "defaultMessage": "信息",
+    "description": "Announced by screen readers before an informational notification"
+  },
+  "ui.toast-status-success": {
+    "defaultMessage": "成功",
+    "description": "Announced by screen readers before a success notification"
+  },
+  "ui.toast-status-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,34 +1,38 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.3",
-  "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.31",
+  "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",
+    "./dense-preset": "./src/dense-preset.ts",
     "./messages": "./src/messages.ts",
+    "./postcss-legacy-safari": "./postcss-legacy-safari.cjs",
+    "./reset.css": "./reset.css",
     "./lang/*": "./lang/*"
   },
   "files": [
     "src",
     "lang",
+    "postcss-legacy-safari.cjs",
+    "reset.css",
     "README.md",
     "LICENSE.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "panda": "panda codegen && panda cssgen --outfile styled-system.css",
+    "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"
@@ -36,17 +40,22 @@
   "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"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "tag": "alpha"

package/postcss-legacy-safari.cjs

@@ -0,0 +1,96 @@
+/*
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * TEMPORARY compatibility shim for consuming apps that still support Safari
+ * below 15. Delete this file (and the app-side wiring — see the README) once
+ * every consuming app has raised its support floor past the affected browsers.
+ *
+ * The bug: Safari 14.x silently drops logical *shorthands* whose value
+ * contains var() — `padding-inline: var(--spacing-2)` applies nothing, even
+ * though `padding-inline: 10px` (literal) and `padding-inline-start:
+ * var(--spacing-2)` (longhand) both work. Panda emits these shorthands for its
+ * px/py/mx/my utilities, so the bug removes most token-based spacing.
+ *
+ * The fix: rewrite the inline/block logical shorthands into their -start/-end
+ * longhands. Kept logical (not physical left/right) so RTL still flips.
+ *
+ * This is one of TWO legacy concerns for the same era of browsers; the other
+ * is @layer, which those browsers drop wholesale. Apps also run
+ * @csstools/postcss-cascade-layers (de-layering) and pin build.cssTarget — see
+ * the "Legacy browser support" section of the README. All of it is expected to
+ * be removed together when the floor rises.
+ *
+ * Exposed as a PostCSS plugin factory:
+ *   const { expandLogicalShorthands } = require("@microbit/ui/postcss-legacy-safari");
+ *   module.exports = { plugins: [expandLogicalShorthands(), ...] };
+ */
+
+// Logical shorthands whose value is `<start> <end>` (one value applies to
+// both). NOT included: border-inline / border-block — those are compound
+// (`width style color`) and duplicate the whole value to each side rather than
+// splitting, so they would need different handling. Add them explicitly if a
+// consuming app ever emits them.
+const LOGICAL_SHORTHANDS = {
+  "padding-inline": ["padding-inline-start", "padding-inline-end"],
+  "padding-block": ["padding-block-start", "padding-block-end"],
+  "margin-inline": ["margin-inline-start", "margin-inline-end"],
+  "margin-block": ["margin-block-start", "margin-block-end"],
+  "inset-inline": ["inset-inline-start", "inset-inline-end"],
+  "inset-block": ["inset-block-start", "inset-block-end"],
+  "scroll-margin-inline": [
+    "scroll-margin-inline-start",
+    "scroll-margin-inline-end",
+  ],
+  "scroll-margin-block": [
+    "scroll-margin-block-start",
+    "scroll-margin-block-end",
+  ],
+  "scroll-padding-inline": [
+    "scroll-padding-inline-start",
+    "scroll-padding-inline-end",
+  ],
+  "scroll-padding-block": [
+    "scroll-padding-block-start",
+    "scroll-padding-block-end",
+  ],
+};
+
+// Split a value on top-level whitespace, ignoring spaces inside parens so
+// var() fallbacks stay intact. One value applies to both sides; two map to
+// start then end (per the CSS shorthand rules).
+const splitTopLevel = (value) => {
+  const parts = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of value) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    if (depth === 0 && /\s/.test(ch)) {
+      if (current.trim()) parts.push(current.trim());
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+};
+
+const expandLogicalShorthands = () => ({
+  postcssPlugin: "microbit-ui-expand-logical-shorthands",
+  Declaration(decl) {
+    const longhands = LOGICAL_SHORTHANDS[decl.prop.toLowerCase()];
+    if (!longhands) return;
+    const parts = splitTopLevel(decl.value);
+    if (parts.length === 0) return;
+    const [start, end = start] = parts;
+    decl.cloneBefore({ prop: longhands[0], value: start });
+    decl.cloneBefore({ prop: longhands[1], value: end });
+    decl.remove();
+  },
+});
+expandLogicalShorthands.postcss = true;
+
+module.exports = { expandLogicalShorthands };

package/reset.css

@@ -0,0 +1,35 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * Chakra-reset parity that must live in the `reset` cascade layer: import
+ * from the app's layers.css with
+ *
+ *   @import "@microbit/ui/reset.css" layer(reset);
+ *
+ * Deliberately not in the preset's globalCss: globalCss emits into the
+ * `base` layer, and the legacy-Safari cascade-layer flattening
+ * specificity-boosts base+ rules above CSS it can't see (runtime-injected
+ * styles such as CodeMirror themes, and other per-file-processed app CSS).
+ * A reset must stay at the bottom of the cascade in production exactly as
+ * it is in dev — see playbook gotcha #28.
+ */
+*,
+*::before,
+*::after {
+  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);
+}