ionbase-ui 0.16.0 → 0.18.0

package/dist/meta/index.json

@@ -0,0 +1,479 @@
+{
+  "package": "ionbase-ui",
+  "version": "0.18.0",
+  "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
+  "hooks": [
+    "useToast"
+  ],
+  "components": {
+    "Alert": {
+      "summary": "A persistent, in-page status message. Intent picks the ARIA role for you.",
+      "status": "stable",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ],
+        "emphasis": [
+          "subtle",
+          "solid"
+        ],
+        "layout": [
+          "inline",
+          "banner"
+        ]
+      },
+      "detail": "dist/meta/Alert.json",
+      "hasIntent": true
+    },
+    "Avatar": {
+      "summary": "Avatar picks its content the way Figma's `Type` variant does, but by",
+      "variants": {
+        "size": [
+          "mini",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "shape": [
+          "circle",
+          "square"
+        ]
+      },
+      "detail": "dist/meta/Avatar.json",
+      "hasIntent": false
+    },
+    "AvatarGroup": {
+      "summary": "AvatarGroup overlaps its children by a quarter of the avatar size, matching",
+      "variants": {
+        "size": [
+          "mini",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "shape": [
+          "circle",
+          "square"
+        ]
+      },
+      "detail": "dist/meta/AvatarGroup.json",
+      "hasIntent": false
+    },
+    "Badge": {
+      "summary": "Badge is presentational — no role, no interaction. React Aria has nothing to",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ]
+      },
+      "detail": "dist/meta/Badge.json",
+      "hasIntent": false
+    },
+    "Button": {
+      "summary": "Triggers an action in place. Never navigates.",
+      "status": "stable",
+      "variants": {
+        "variant": [
+          "success",
+          "primary-brand",
+          "primary-neutral",
+          "primary-soft",
+          "secondary",
+          "tertiary",
+          "destructive"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "detail": "dist/meta/Button.json",
+      "hasIntent": true
+    },
+    "Checkbox": {
+      "summary": "Checkbox wraps a native `<input type=\"checkbox\">` and hides it.",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Checkbox.json",
+      "hasIntent": false
+    },
+    "Divider": {
+      "summary": "A single `<hr>`, matching Figma's `Border` (70:22153).",
+      "variants": {
+        "orientation": [
+          "horizontal",
+          "vertical"
+        ]
+      },
+      "detail": "dist/meta/Divider.json",
+      "hasIntent": false
+    },
+    "FullCard": {
+      "summary": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).",
+      "variants": {
+        "alignment": [
+          "right",
+          "left"
+        ]
+      },
+      "detail": "dist/meta/FullCard.json",
+      "hasIntent": false
+    },
+    "Header": {
+      "summary": "Header renders Figma's four Device variants — Desktop, Tablet,",
+      "variants": {},
+      "detail": "dist/meta/Header.json",
+      "hasIntent": false
+    },
+    "Icon": {
+      "summary": "Wrapper that applies the design system's icon sizing and accessibility",
+      "variants": {},
+      "detail": "dist/meta/Icon.json",
+      "hasIntent": false
+    },
+    "Input": {
+      "summary": "A single-line text field, together with its label, helper text and error message.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "autoCapitalize": [
+          "none",
+          "off",
+          "on",
+          "sentences",
+          "words",
+          "characters"
+        ]
+      },
+      "detail": "dist/meta/Input.json",
+      "hasIntent": true
+    },
+    "Link": {
+      "summary": "Link — Figma `Link` (774:1516).",
+      "variants": {
+        "variant": [
+          "inline",
+          "standalone"
+        ]
+      },
+      "detail": "dist/meta/Link.json",
+      "hasIntent": false
+    },
+    "Logo": {
+      "summary": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`",
+      "variants": {
+        "size": [
+          "sm",
+          "lg"
+        ],
+        "wordmark": [
+          "text",
+          "vector"
+        ]
+      },
+      "detail": "dist/meta/Logo.json",
+      "hasIntent": false
+    },
+    "LogoMark": {
+      "summary": "The bare icon glyph, no wordmark — what `Header` actually uses.",
+      "variants": {
+        "size": [
+          "sm",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/LogoMark.json",
+      "hasIntent": false
+    },
+    "Menu": {
+      "summary": "Menu is the list surface, not a popover.",
+      "variants": {},
+      "detail": "dist/meta/Menu.json",
+      "hasIntent": false
+    },
+    "MenuItem": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/MenuItem.json",
+      "hasIntent": false
+    },
+    "Modal": {
+      "summary": "A focus-trapping dialog. Renders nothing when closed and portals when open.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "fullscreen"
+        ],
+        "align": [
+          "left",
+          "center"
+        ]
+      },
+      "detail": "dist/meta/Modal.json",
+      "hasIntent": true
+    },
+    "NavItem": {
+      "summary": "Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —",
+      "variants": {},
+      "detail": "dist/meta/NavItem.json",
+      "hasIntent": false
+    },
+    "PhoneInput": {
+      "summary": "PhoneInput — Figma `Input/Phone` (80:372).",
+      "variants": {
+        "autoCapitalize": [
+          "none",
+          "off",
+          "on",
+          "sentences",
+          "words",
+          "characters"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/PhoneInput.json",
+      "hasIntent": false
+    },
+    "Popover": {
+      "summary": "Popover — Figma `Popover` (825:1853).",
+      "variants": {
+        "placement": [
+          "right",
+          "left",
+          "top",
+          "bottom"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Popover.json",
+      "hasIntent": false
+    },
+    "Radio": {
+      "summary": null,
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Radio.json",
+      "hasIntent": false
+    },
+    "RadioGroup": {
+      "summary": "Renders a `<fieldset>` with a `<legend>` rather than a div with",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/RadioGroup.json",
+      "hasIntent": false
+    },
+    "ScrollProgress": {
+      "summary": "The compact rail is the disclosure trigger. It is a real `<button>`, so a",
+      "variants": {},
+      "detail": "dist/meta/ScrollProgress.json",
+      "hasIntent": false
+    },
+    "Select": {
+      "summary": "A dropdown over a native <select>, with the same label and error wiring as Input.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Select.json",
+      "hasIntent": true
+    },
+    "TabItem": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TabItem.json",
+      "hasIntent": false
+    },
+    "Table": {
+      "summary": "A data table. Table owns the scroll container and density; rows and cells are composed.",
+      "status": "stable",
+      "variants": {
+        "density": [
+          "compact",
+          "default",
+          "relaxed"
+        ]
+      },
+      "detail": "dist/meta/Table.json",
+      "hasIntent": true
+    },
+    "TableBody": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TableBody.json",
+      "hasIntent": false
+    },
+    "TableCell": {
+      "summary": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never",
+      "variants": {
+        "scope": [
+          "row",
+          "rowgroup",
+          "col",
+          "colgroup"
+        ],
+        "align": [
+          "center",
+          "leading",
+          "trailing"
+        ],
+        "variant": [
+          "link",
+          "default"
+        ]
+      },
+      "detail": "dist/meta/TableCell.json",
+      "hasIntent": false
+    },
+    "TableHead": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TableHead.json",
+      "hasIntent": false
+    },
+    "TableRow": {
+      "summary": "A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape",
+      "variants": {},
+      "detail": "dist/meta/TableRow.json",
+      "hasIntent": false
+    },
+    "Tabs": {
+      "summary": null,
+      "variants": {
+        "type": [
+          "pill",
+          "underline"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "orientation": [
+          "horizontal",
+          "vertical"
+        ]
+      },
+      "detail": "dist/meta/Tabs.json",
+      "hasIntent": false
+    },
+    "Toast": {
+      "summary": "Toast — Figma `Toast` (820:1655).",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ]
+      },
+      "detail": "dist/meta/Toast.json",
+      "hasIntent": false
+    },
+    "ToastProvider": {
+      "summary": "Renders the queue and supplies `useToast`.",
+      "variants": {
+        "placement": [
+          "top-left",
+          "top-right",
+          "bottom-left",
+          "bottom-right"
+        ]
+      },
+      "detail": "dist/meta/ToastProvider.json",
+      "hasIntent": false
+    },
+    "Toggle": {
+      "summary": "Toggle is a checkbox with `role=\"switch\"`.",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Toggle.json",
+      "hasIntent": false
+    },
+    "Tooltip": {
+      "summary": "Tooltip — Figma `Tooltip` (801:1568).",
+      "variants": {
+        "placement": [
+          "right",
+          "left",
+          "top",
+          "bottom"
+        ]
+      },
+      "detail": "dist/meta/Tooltip.json",
+      "hasIntent": false
+    }
+  }
+}

package/dist/styles/alert.css

@@ -84,11 +84,16 @@
  * at equal specificity, and only the surface and border differ per intent —
  * the text and icon are the same two roles throughout.
  *
- * KNOWN, pending a decision on the accent ramps: solid `success` measures
- * 3.69:1 in Light and solid `information` 3.44:1 in Dark against
- * `text/on-color`, both short of WCAG AA's 4.5:1 for normal text. Neither is a
- * one-step fix — every accent runs base/hover/pressed at 600/700/800, so
- * moving a base onto 700 makes it identical to its own hover. See AGENTS.md.
+ * KNOWN: solid `information` measures 3.44:1 in Dark against `text/on-color`,
+ * short of WCAG AA's 4.5:1. Tracked in contrast-exceptions.json and reported by
+ * `pnpm --filter ionbase-ui contrast` on every build.
+ *
+ * Solid `success` used to be listed here too, at 3.69:1 in Light. It is now
+ * 5.24:1 — fixed on 2026-08-18 by shifting the green PRIMITIVES a rung rather
+ * than re-pointing the role, which is also the fix `information` needs. Moving
+ * the role would have made the base identical to its own hover, since every
+ * accent runs base/hover/pressed at 600/700/800; moving the values underneath
+ * left every role on the rung it already had. See AGENTS.md.
  */
 .ion-alert--solid {
   --ion-alert-text: var(--text-on-color);

package/dist/styles/tokens/base.css

@@ -45,16 +45,16 @@
   --color-orange-700: #8e2f07;
   --color-orange-800: #671f07;
   --color-orange-900: #401604;
-  --color-green-50: #effbf6;
+  --color-green-50: #f8fefc;
   --color-green-100: #e4f7f3;
   --color-green-200: #c6ebdc;
-  --color-green-300: #8fdbbb;
-  --color-green-400: #50c38c;
-  --color-green-500: #12a154;
-  --color-green-600: #14994e;
-  --color-green-700: #0d7d38;
-  --color-green-800: #076426;
-  --color-green-900: #054d1a;
+  --color-green-300: #82d8b4;
+  --color-green-400: #39b378;
+  --color-green-500: #14994e;
+  --color-green-600: #0d7d38;
+  --color-green-700: #076426;
+  --color-green-800: #054d1a;
+  --color-green-900: #023c13;
   --color-blue-50: #ebf7ff;
   --color-blue-100: #e2f1fd;
   --color-blue-200: #c7e4fa;
@@ -174,16 +174,16 @@
   --neutral-700: #384252;
   --neutral-800: #1d2735;
   --neutral-900: #131923;
-  --success-50: #effbf6;
+  --success-50: #f8fefc;
   --success-100: #e4f7f3;
   --success-200: #c6ebdc;
-  --success-300: #8fdbbb;
-  --success-400: #50c38c;
-  --success-500: #12a154;
-  --success-600: #14994e;
-  --success-700: #0d7d38;
-  --success-800: #076426;
-  --success-900: #054d1a;
+  --success-300: #82d8b4;
+  --success-400: #39b378;
+  --success-500: #14994e;
+  --success-600: #0d7d38;
+  --success-700: #076426;
+  --success-800: #054d1a;
+  --success-900: #023c13;
   --warning-50: #fff4e5;
   --warning-100: #ffeed6;
   --warning-200: #fedbb4;
@@ -215,7 +215,7 @@
   --information-800: #350e8b;
   --information-900: #260769;
   --chart-1: #286ef0;
-  --chart-2: #12a154;
+  --chart-2: #14994e;
   --chart-3: #5a4cd6;
   --chart-4: #ea5600;
   --chart-5: #f04299;
@@ -262,7 +262,7 @@
   --text-inverse: #f6f8f9;
   --text-primary: #1c62e3;
   --text-error: #ba1c1c;
-  --text-success: #0d7d38;
+  --text-success: #076426;
   --text-warning: #af3e0e;
   --text-information: #4715b2;
   --text-link: #1541b2;
@@ -279,7 +279,7 @@
   --icon-inverse: #f6f8f9;
   --icon-primary: #1c62e3;
   --icon-error: #dc2828;
-  --icon-success: #14994e;
+  --icon-success: #0d7d38;
   --icon-warning: #af3e0e;
   --icon-information: #4f3cc8;
   --icon-interactive: #384252;
@@ -312,10 +312,10 @@
   --surface-error-subtle: #fef1f1;
   --surface-error-subtle-hover: #fee7e7;
   --surface-error-tint: #fee7e7;
-  --surface-success: #14994e;
-  --surface-success-hover: #0d7d38;
-  --surface-success-pressed: #076426;
-  --surface-success-subtle: #effbf6;
+  --surface-success: #0d7d38;
+  --surface-success-hover: #076426;
+  --surface-success-pressed: #054d1a;
+  --surface-success-subtle: #f8fefc;
   --surface-success-subtle-hover: #e4f7f3;
   --surface-success-tint: #e4f7f3;
   --surface-warning: #af3e0e;
@@ -343,8 +343,8 @@
   --border-error: #ef4343;
   --border-error-strong: #ba1c1c;
   --border-error-subtle: #fed2d2;
-  --border-success: #12a154;
-  --border-success-strong: #0d7d38;
+  --border-success: #14994e;
+  --border-success-strong: #076426;
   --border-success-subtle: #c6ebdc;
   --border-warning: #ea5600;
   --border-warning-strong: #8e2f07;

package/dist/styles/tokens/theme-dark.css

@@ -11,7 +11,7 @@
   --text-inverse: #131923;
   --text-primary: #609cf0;
   --text-error: #ffadad;
-  --text-success: #50c38c;
+  --text-success: #39b378;
   --text-warning: #ef8539;
   --text-information: #adadf5;
   --text-link: #609cf0;
@@ -26,7 +26,7 @@
   --icon-inverse: #131923;
   --icon-primary: #609cf0;
   --icon-error: #f56b6b;
-  --icon-success: #50c38c;
+  --icon-success: #39b378;
   --icon-warning: #ef8539;
   --icon-information: #7e6ff1;
   --icon-interactive: #dde0e4;
@@ -59,12 +59,12 @@
   --surface-error-subtle: #811d1d;
   --surface-error-subtle-hover: #981b1b;
   --surface-error-tint: #981b1b;
-  --surface-success: #12a154;
-  --surface-success-hover: #50c38c;
-  --surface-success-pressed: #8fdbbb;
-  --surface-success-subtle: #054d1a;
-  --surface-success-subtle-hover: #076426;
-  --surface-success-tint: #076426;
+  --surface-success: #14994e;
+  --surface-success-hover: #39b378;
+  --surface-success-pressed: #82d8b4;
+  --surface-success-subtle: #023c13;
+  --surface-success-subtle-hover: #054d1a;
+  --surface-success-tint: #054d1a;
   --surface-warning: #ea5600;
   --surface-warning-hover: #ef8539;
   --surface-warning-pressed: #fdc17c;
@@ -90,9 +90,9 @@
   --border-error: #f56b6b;
   --border-error-strong: #dc2828;
   --border-error-subtle: #981b1b;
-  --border-success: #50c38c;
-  --border-success-strong: #14994e;
-  --border-success-subtle: #076426;
+  --border-success: #39b378;
+  --border-success-strong: #0d7d38;
+  --border-success-subtle: #054d1a;
   --border-warning: #ef8539;
   --border-warning-strong: #af3e0e;
   --border-warning-subtle: #671f07;

package/dist/tokens/index.d.ts

@@ -1491,7 +1491,7 @@ export declare const tokenValues: {
         readonly Value: "#401604";
     };
     readonly "color/green/50": {
-        readonly Value: "#effbf6";
+        readonly Value: "#f8fefc";
     };
     readonly "color/green/100": {
         readonly Value: "#e4f7f3";
@@ -1500,25 +1500,25 @@ export declare const tokenValues: {
         readonly Value: "#c6ebdc";
     };
     readonly "color/green/300": {
-        readonly Value: "#8fdbbb";
+        readonly Value: "#82d8b4";
     };
     readonly "color/green/400": {
-        readonly Value: "#50c38c";
+        readonly Value: "#39b378";
     };
     readonly "color/green/500": {
-        readonly Value: "#12a154";
+        readonly Value: "#14994e";
     };
     readonly "color/green/600": {
-        readonly Value: "#14994e";
+        readonly Value: "#0d7d38";
     };
     readonly "color/green/700": {
-        readonly Value: "#0d7d38";
+        readonly Value: "#076426";
     };
     readonly "color/green/800": {
-        readonly Value: "#076426";
+        readonly Value: "#054d1a";
     };
     readonly "color/green/900": {
-        readonly Value: "#054d1a";
+        readonly Value: "#023c13";
     };
     readonly "color/blue/50": {
         readonly Value: "#ebf7ff";