@microbit/ui 0.1.0-alpha.6 → 0.1.0-alpha.8

package/README.md

@@ -44,22 +44,35 @@ an app must do:
 4. **Generate and load the CSS** with Panda's PostCSS plugin. Keep Vite's
    default transformer — do **not** set `css.transformer: "lightningcss"`,
    which disables PostCSS. Add a `postcss.config.cjs`:
+
    ```js
    module.exports = { plugins: { "@pandacss/dev/postcss": {} } };
    ```
+
    Run `panda codegen` as a `prepare`/`predev` step so the `styled-system/*`
    helpers exist before `tsc`; the plugin generates the CSS during the bundle.
    Import **one** entry stylesheet — first, before app styles — that declares
    the cascade-layer order; the plugin injects the generated CSS into it (the
    declaration must list all of Panda's layers, hence ≥5 names):
+
    ```css
    /* e.g. src/layers.css, imported once at the app root */
    @layer reset, vendor, base, tokens, recipes, utilities;
+
+   @import "@microbit/ui/reset.css" layer(reset);
    ```
+
+   The `reset.css` import is **required**: it carries the Chakra-parity
+   `* { border-color; word-wrap }` defaults, which must sit in the bottom
+   layer (the legacy-Safari cascade-layer flattening specificity-boosts
+   higher layers above CSS it can't see — runtime-injected styles, other
+   files; playbook gotcha #28). Without it, elements that set a border
+   width but no colour render `currentColor` borders.
    The `vendor` layer is for third-party stylesheets: import any vendor CSS
    with `@import "..." layer(vendor)` so it beats the preflight reset but
    loses to app styling. See `.storybook/{layers.css,preview.tsx,main.ts}` +
    `postcss.config.cjs` for the worked example.
+
 5. **react-intl**: an `IntlProvider` above any shared-ui usage. English
    works with no setup (components carry inline `defaultMessage`); for
    other locales compile this package's `lang/ui.<locale>.json` into the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "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",
@@ -10,12 +10,14 @@
     "./base-tokens": "./src/base-tokens.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"
   ],

package/reset.css

@@ -0,0 +1,23 @@
+/**
+ * (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;
+}

package/src/Collapse.tsx

@@ -162,7 +162,19 @@ export const Collapse = ({
         ...style,
       }}
     >
-      <div ref={contentRef}>{children}</div>
+      <div
+        ref={contentRef}
+        // flow-root: the measured element must be a block formatting
+        // context, or children's margins collapse through it and
+        // scrollHeight under-measures — the outer (overflow: hidden)
+        // wrapper IS a BFC and needs the full height, so the mismatch
+        // clips the last line of margined content (python-editor's API
+        // docs). Rendering is unchanged: the margins always displayed
+        // inside the outer BFC.
+        className={css({ display: "flow-root" })}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/base-preset.ts

@@ -211,10 +211,12 @@ export const basePreset = definePreset({
     "*::placeholder": {
       color: "gray.500",
     },
-    "*, *::before, *::after": {
-      borderColor: "gray.200",
-      wordWrap: "break-word",
-    },
+    // The `* { border-color; word-wrap }` Chakra-reset parity lives in
+    // ../reset.css, imported into the `reset` layer by consumers'
+    // layers.css — NOT here: globalCss emits into the `base` layer, which
+    // the legacy-Safari cascade-layer flattening specificity-boosts above
+    // runtime-injected CSS (CodeMirror themes) and other app CSS files.
+    // Resets must stay at the bottom (playbook gotcha #28).
     // Panda's preflight, unlike Chakra's reset, doesn't set the pointer
     // cursor on buttons. Recipes' disabled states (cursor: not-allowed)
     // override this from the higher recipes layer.