ionbase-ui 0.22.0 → 0.24.0

package/dist/meta/index.json

@@ -1,11 +1,24 @@
 {
   "package": "ionbase-ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
   ],
   "components": {
+    "AgentStop": {
+      "summary": "The always-visible way to end a running agent. Not optional, and not behind a menu.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/AgentStop.json",
+      "hasIntent": true
+    },
     "Alert": {
       "summary": "A persistent, in-page status message. Intent picks the ARIA role for you.",
       "status": "stable",
@@ -30,15 +43,34 @@
       "detail": "dist/meta/Alert.json",
       "hasIntent": true
     },
+    "ApprovalGate": {
+      "summary": "A proposed action held until a person approves, rejects or amends it. It renders the decision; it does not enforce it.",
+      "status": "stable",
+      "variants": {
+        "risk": [
+          "low",
+          "medium",
+          "high"
+        ],
+        "status": [
+          "pending",
+          "approved",
+          "rejected",
+          "expired"
+        ]
+      },
+      "detail": "dist/meta/ApprovalGate.json",
+      "hasIntent": true
+    },
     "Avatar": {
       "summary": "A person or entity marker. Content is chosen by precedence — image, then initials, then icon — not by a type prop.",
       "status": "stable",
       "variants": {
         "size": [
-          "mini",
           "sm",
           "md",
-          "lg"
+          "lg",
+          "mini"
         ],
         "shape": [
           "circle",
@@ -53,10 +85,10 @@
       "status": "stable",
       "variants": {
         "size": [
-          "mini",
           "sm",
           "md",
-          "lg"
+          "lg",
+          "mini"
         ],
         "shape": [
           "circle",

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "DataTable": {

package/dist/styles/agent-stop.css

@@ -0,0 +1,109 @@
+/*
+ * AgentStop
+ *
+ * NOT DRAWN IN FIGMA. This component has no Figma counterpart yet, so the
+ * measurements are borrowed rather than invented: the size ramp, radius, focus
+ * ring and icon sizing are Button's, read from the same tokens. When Figma
+ * draws it, this file should need values changed, not structure.
+ *
+ * DELIBERATELY NOT `surface/error`. Stopping a run is normal and expected, and
+ * you can start it again. Colouring it like a delete teaches hesitation about
+ * the one control that must never be hesitated over. It reads as a firm
+ * neutral: strong border, plain surface, error colour only on hover, where it
+ * confirms rather than warns.
+ */
+.ion-agent-stop {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  min-height: var(--spacing-40);
+  padding: var(--spacing-8) var(--spacing-16);
+  border: var(--border-width-default) solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background-color: var(--surface-default);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out),
+    color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-agent-stop:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * Disabled ONLY while the stop is in flight, never as a resting state. A
+ * greyed-out stop button on a running agent is the failure this component
+ * exists to prevent, so the styling deliberately does not read as
+ * "unavailable" — it reads as "already asked".
+ *
+ * Declared before :hover so specificity reads non-decreasing; the :not(:disabled)
+ * on the hover rules is what keeps them from fighting.
+ */
+.ion-agent-stop:disabled {
+  cursor: default;
+  background-color: var(--surface-muted);
+  border-color: var(--border-default);
+  color: var(--text-secondary);
+}
+
+.ion-agent-stop:hover:not(:disabled) {
+  background-color: var(--surface-error-subtle);
+  border-color: var(--border-error);
+  color: var(--text-error);
+}
+
+.ion-agent-stop:active:not(:disabled) {
+  background-color: var(--surface-error-subtle-hover);
+}
+
+.ion-agent-stop__glyph {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-agent-stop__glyph svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* The square shrinks while stopping — the one motion cue that the press
+ * landed, on a control whose text also changed. */
+.ion-agent-stop[data-stopping] .ion-agent-stop__glyph svg {
+  transform: scale(0.7);
+  transition: transform var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-agent-stop--sm {
+  min-height: var(--spacing-32);
+  padding: var(--spacing-4) var(--spacing-12);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-agent-stop--sm .ion-agent-stop__glyph {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
+
+.ion-agent-stop--lg {
+  min-height: var(--spacing-48);
+  padding: var(--spacing-12) var(--spacing-20);
+  font-size: var(--type-body-lg);
+  line-height: var(--type-body-lg-line-height);
+}
+
+.ion-agent-stop--lg .ion-agent-stop__glyph {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}

package/dist/styles/approval-gate.css

@@ -0,0 +1,181 @@
+/*
+ * ApprovalGate
+ *
+ * NOT DRAWN IN FIGMA. Structure is Alert's — icon rail, body, one variable per
+ * colour slot — so that when Figma draws it, this file needs values changed
+ * rather than rewriting. The action row borrows Button's ramp.
+ *
+ * RISK CHANGES EMPHASIS, NOT MEANING
+ *
+ * Three risk tiers reassign four variables, exactly the way Alert's intents do.
+ * `low` sits on the neutral surface, `medium` on information, `high` on
+ * warning — NOT on error. Error is for something that has gone wrong; a
+ * high-risk approval is working correctly, and it is asking. Reserving red for
+ * failure is what keeps red meaningful when a failure actually happens.
+ */
+.ion-approval-gate {
+  --ion-approval-surface: var(--surface-information-subtle);
+  --ion-approval-border: var(--border-information);
+  --ion-approval-icon: var(--icon-information);
+  --ion-approval-accent: var(--text-information);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+  padding: var(--spacing-16);
+  background-color: var(--ion-approval-surface);
+
+  /*
+   * A thicker leading edge, not a heavier box. A decision waiting on a person
+   * has to be findable at a glance down a long transcript, and a full heavy
+   * border would compete with every Alert on the page.
+   */
+  border: var(--border-width-default) solid var(--ion-approval-border);
+  border-inline-start-width: var(--border-width-thicker);
+  border-radius: var(--radius-md);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-approval-gate--low {
+  --ion-approval-surface: var(--surface-muted);
+  --ion-approval-border: var(--border-default);
+  --ion-approval-icon: var(--icon-secondary);
+  --ion-approval-accent: var(--text-secondary);
+}
+
+.ion-approval-gate--high {
+  --ion-approval-surface: var(--surface-warning-subtle);
+  --ion-approval-border: var(--border-warning-strong);
+  --ion-approval-icon: var(--icon-warning);
+  --ion-approval-accent: var(--text-warning);
+}
+
+/* Resolved: the decision is a record now, not a question. Drop the tint and
+ * keep the rule, so the row stays scannable without still looking pending. */
+.ion-approval-gate--approved,
+.ion-approval-gate--rejected,
+.ion-approval-gate--expired {
+  --ion-approval-surface: var(--surface-default);
+  --ion-approval-border: var(--border-default);
+  --ion-approval-icon: var(--icon-tertiary);
+}
+
+.ion-approval-gate--approved {
+  --ion-approval-border: var(--border-success);
+  --ion-approval-icon: var(--icon-success);
+  --ion-approval-accent: var(--text-success);
+}
+
+.ion-approval-gate--rejected {
+  --ion-approval-accent: var(--text-secondary);
+}
+
+.ion-approval-gate__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--ion-approval-icon);
+}
+
+.ion-approval-gate__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ion-approval-gate__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  min-width: 0;
+  flex: 1;
+}
+
+.ion-approval-gate__title {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-default);
+}
+
+/* Focusable only programmatically, so it takes a ring but no tab stop. */
+.ion-approval-gate__title:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.ion-approval-gate__detail {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-approval-gate__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-4);
+}
+
+.ion-approval-gate__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--spacing-32);
+  padding: var(--spacing-4) var(--spacing-12);
+  border: var(--border-width-default) solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-default);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color var(--ion-duration-base) var(--ion-ease-out),
+    border-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-approval-gate__action:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* Before :hover so specificity reads non-decreasing. */
+.ion-approval-gate__action:disabled {
+  cursor: default;
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+  color: var(--text-disabled);
+}
+
+.ion-approval-gate__action:hover:not(:disabled) {
+  background-color: var(--surface-hover);
+}
+
+/*
+ * Approve is the only filled button, and it is filled in brand rather than
+ * success. Success would state an outcome before there is one.
+ */
+.ion-approval-gate__action--approve {
+  background-color: var(--surface-primary);
+  border-color: var(--surface-primary);
+  color: var(--text-on-color);
+}
+
+.ion-approval-gate__action--approve:hover:not(:disabled) {
+  background-color: var(--surface-primary-hover);
+  border-color: var(--surface-primary-hover);
+}
+
+.ion-approval-gate__resolution {
+  margin: 0;
+  font-weight: var(--font-weight-medium);
+  color: var(--ion-approval-accent);
+}

package/dist/styles/index.css

@@ -52,6 +52,36 @@
 @import url('./scroll-progress.css');
 @import url('./full-card.css');
 
+/*
+ * The agentic tier. No Figma counterpart yet, so these borrow their
+ * measurements from Button and Alert rather than inventing any — see the
+ * header of each file.
+ */
+@import url('./agent-stop.css');
+@import url('./approval-gate.css');
+
+/*
+ * Visually hidden, but not hidden from assistive tech.
+ *
+ * Written once here rather than per component: two components already needed
+ * it for their live regions, and a second copy of a rule this fiddly is how the
+ * two quietly diverge. `display: none` and `visibility: hidden` both remove the
+ * node from the accessibility tree, so an announcement placed in one would
+ * never be made — the clip-path is what keeps it readable while occupying no
+ * space. No `margin: -1px`: that belongs to the older `clip: rect()` variant
+ * and is not needed here, which is convenient, because it is also not a token.
+ */
+.ion-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /*
  * Every IonBase element is border-box.
  *

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.22.0. 35 components.
+Version 0.24.0. 37 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`Alert`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
+`AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",
@@ -62,7 +62,7 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-patterns.mjs && node scripts/verify-figma-map.mjs && node scripts/build-llms.mjs",
+    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-patterns.mjs && node scripts/verify-figma-map.mjs && node scripts/build-figma-descriptions.mjs && node scripts/build-llms.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . && stylelint \"src/styles/*.css\"",
     "format": "prettier --check .",
@@ -73,7 +73,8 @@
     "contrast:list": "node scripts/verify-contrast.mjs --list",
     "llms": "node scripts/build-llms.mjs",
     "patterns": "node scripts/build-patterns.mjs",
-    "figma:map": "node scripts/verify-figma-map.mjs"
+    "figma:map": "node scripts/verify-figma-map.mjs",
+    "figma:descriptions": "node scripts/build-figma-descriptions.mjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",