@microbit/ui 0.1.0-alpha.10 → 0.1.0-alpha.12

package/package.json

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

package/src/ButtonGroup.tsx

@@ -32,9 +32,12 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
             display: "inline-flex",
             alignItems: "center",
             // Buttons are position: relative, so without this an attached
-            // sibling paints over the focused button's focus-ring shadow
-            // (Chakra's Button applied zIndex 1 on focus when grouped).
-            "& > *": { _focus: { zIndex: 1 } },
+            // sibling paints over the focused button's focus-ring shadow.
+            // Chakra raised on :focus, but with the attached -1px overlap a
+            // raised button also paints over a seam its neighbour draws
+            // (e.g. a solid split button's white borderLeft), so raise only
+            // when the ring is actually shown.
+            "& > *": { _focusVisible: { zIndex: 1 } },
           }),
           isAttached
             ? css({
@@ -42,11 +45,15 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
                 // :first-child/:last-child, not :first-of-type: attached
                 // groups can mix element types (e.g. select + button), and
                 // -of-type matches per element type.
+                // marginEnd -1px (Chakra parity): overlaps adjacent borders
+                // so two 1px inner edges read as a single 1px seam.
                 "& > *:first-child:not(:last-child)": {
                   borderEndRadius: 0,
+                  marginEnd: "-1px",
                 },
                 "& > *:not(:first-child):not(:last-child)": {
                   borderRadius: 0,
+                  marginEnd: "-1px",
                 },
                 "& > *:not(:first-child):last-child": {
                   borderStartRadius: 0,

package/src/Divider.tsx

@@ -15,33 +15,66 @@ const StyledDivider = styled("hr", {
   variants: {
     orientation: {
       horizontal: {
-        borderBottomWidth: "1px",
         borderBottomStyle: "solid",
         width: "100%",
       },
       vertical: {
-        borderLeftWidth: "1px",
         borderLeftStyle: "solid",
         height: "100%",
       },
     },
+    // Rule weight, on the orientation's drawn edge (see compoundVariants).
+    // Semantic rather than a raw border width so call sites don't need to
+    // know which edge an orientation draws with.
+    thickness: {
+      thin: {},
+      thick: {},
+    },
   },
-  defaultVariants: { orientation: "horizontal" },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      thickness: "thin",
+      css: { borderBottomWidth: "1px" },
+    },
+    {
+      orientation: "horizontal",
+      thickness: "thick",
+      css: { borderBottomWidth: "2px" },
+    },
+    {
+      orientation: "vertical",
+      thickness: "thin",
+      css: { borderLeftWidth: "1px" },
+    },
+    {
+      orientation: "vertical",
+      thickness: "thick",
+      css: { borderLeftWidth: "2px" },
+    },
+  ],
+  defaultVariants: { orientation: "horizontal", thickness: "thin" },
 });
 
 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%`).
+ * `borderColor` to tint, `thickness="thick"` for a 2px rule).
+ * `orientation="vertical"` needs a height from the layout, e.g. a stretched
+ * flex row (Chakra's vertical divider likewise relied on `height: 100%`).
+ *
+ * Decorative by default: hidden from assistive tech, since a visual rule
+ * between sections is noise as an announced separator (and every call site
+ * was opting out by hand). Pass `aria-hidden={false}` for a divider that
+ * should be exposed as a semantic separator.
  */
 export const Divider = forwardRef<HTMLHRElement, DividerProps>(
   function Divider(props, ref) {
     return (
       <StyledDivider
         ref={ref}
+        aria-hidden
         aria-orientation={
           props.orientation === "vertical" ? "vertical" : "horizontal"
         }