@jonmilner/ui 0.3.0 → 0.3.1

package/dist/Badge/Badge.css.mjs

@@ -10,11 +10,13 @@ var t = "_1ixfil10", n = e({
 		variant: {
 			neutral: "_1ixfil12",
 			accent: "_1ixfil13",
-			danger: "_1ixfil14"
+			success: "_1ixfil14",
+			warning: "_1ixfil15",
+			danger: "_1ixfil16"
 		},
 		size: {
-			sm: "_1ixfil15",
-			med: "_1ixfil16"
+			sm: "_1ixfil17",
+			med: "_1ixfil18"
 		}
 	},
 	defaultVariants: {},

package/dist/Badge/index.d.mts

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef } from "react";
 //#region src/Badge/index.d.ts
 export type BadgeOwnProps = {
   size?: "sm" | "med";
-  variant?: "neutral" | "accent" | "danger";
+  variant?: "neutral" | "accent" | "success" | "warning" | "danger";
 };
 export type BadgeProps = StyleProps & BadgeOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof BadgeOwnProps>;
 export declare function Badge({ variant, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;

package/dist/Badge/index.mjs

@@ -13,6 +13,14 @@ var o = {
 		backgroundColor: "accent",
 		color: "accentFg"
 	},
+	success: {
+		backgroundColor: "success",
+		color: "successFg"
+	},
+	warning: {
+		backgroundColor: "warning",
+		color: "warningFg"
+	},
 	danger: {
 		backgroundColor: "danger",
 		color: "dangerFg"

package/dist/docs/Badge.md

@@ -20,13 +20,13 @@ A static label that states the status of, or a short fact about, the thing besid
 
 ## Rules
 
-- `variant`: `neutral` (default, `fgMuted` on `bgMuted`) for most statuses and facts; `accent` (`accentFg` on `accent`) to draw the eye; `danger` (`dangerFg` on `danger`) for a failure or a blocked state. `success` and `warning` variants are planned (#103); the color roles exist, the variants do not yet.
+- `variant`: `neutral` (default, `fgMuted` on `bgMuted`) for most statuses and facts; `accent` (`accentFg` on `accent`) to draw the eye; `success` (`successFg` on `success`) for a done or healthy state; `warning` (`warningFg` on `warning`) for one that needs attention soon; `danger` (`dangerFg` on `danger`) for a failure or a blocked state.
 - `size`: `sm` or `med` (default), the label's `fontSize` step.
-- The label states the state. Color is never the only cue (WCAG 1.4.1): under forced colors every variant is the same outlined box, and some readers cannot tell the fills apart. Write "Failed", not a red badge reading "3".
+- The label states the state. Color is never the only cue (WCAG 1.4.1): under forced colors every variant, `success` and `warning` included, is the same outlined box, and some readers cannot tell the fills apart (green from red above all). Write "Failed" or "Passed", not a red or green badge reading "3".
 - Keep it to one or two words; it never wraps. With no children it renders nothing.
 - Fill, text color, padding, radius and `display` (`inline-block`) are default style props on the outer `span`; a consumer's win. `className`, `style` and `ref` go to it, `className` last. The box holds inside a `Text` or `Heading` too.
 - The module has no hooks, so a server component can render it.
-- Migrating from the inbox's `Pill`: `Pill tone=…` is `Badge variant=…`; `pillLink` has no Badge equivalent (compose `Clickable`).
+- Migrating from the inbox's `Pill`: `Pill tone=…` is `Badge variant=…`, with `good` as `success`, `warn` as `warning` and `bad` as `danger`; `pillLink` has no Badge equivalent (compose `Clickable`).
 
 ## Do
 
@@ -60,7 +60,7 @@ A static label that states the status of, or a short fact about, the thing besid
 - It is plain text in a `span`: screen readers read the label in line with what is around it, so the label must make sense there ("Quarterly report Draft").
 - No role, no `aria-live`: a badge that changes is not announced. If a status change matters right away, announce it elsewhere (a toast).
 - Each variant's text and fill pass AA (4.5:1) in light and dark mode; the pairs are in `contrastPairs` (ADR 0033).
-- Under forced colors every badge is `CanvasText` on `Canvas` with a `CanvasText` outline, so the box survives and the variants look alike; the label carries the meaning. The role fills are not kept: `accent` would take the link color, on something that is not a link, and the browser's backplate would hide the filled variants' text.
+- Under forced colors every badge is `CanvasText` on `Canvas` with a `CanvasText` outline, so the box survives and the variants look alike; the label carries the meaning. The role fills are not kept: `accent` would take the link color, on something that is not a link, and the browser's backplate would hide the filled variants' text. `success`, `warning` and `danger` map to the same system pair (ADR 0104), so only the label tells them apart.
 
 ## Props
 
@@ -71,6 +71,6 @@ Generated from the TypeScript types.
 | Prop | Type | Required | Description |
 | --- | --- | --- | --- |
 | `size` | `"med" \| "sm"` | no |  |
-| `variant` | `"accent" \| "danger" \| "neutral"` | no |  |
+| `variant` | `"accent" \| "danger" \| "neutral" \| "success" \| "warning"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "components": [
     {
       "name": "AlertDialog",
@@ -143,12 +143,14 @@
         },
         {
           "name": "variant",
-          "type": "\"accent\" | \"danger\" | \"neutral\"",
+          "type": "\"accent\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
           "required": false,
           "values": [
             "accent",
             "danger",
-            "neutral"
+            "neutral",
+            "success",
+            "warning"
           ]
         }
       ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"