ionbase-ui 0.22.0 → 0.25.0

package/dist/styles/confidence-indicator.css

@@ -0,0 +1,97 @@
+/*
+ * ConfidenceIndicator
+ *
+ * NOT DRAWN IN FIGMA. Three bars and a line of text; the colours are the
+ * system's status roles.
+ *
+ * THE BARS ARE THE SECOND SIGNAL, NOT THE FIRST. The count of filled bars
+ * carries the level, so it reads in greyscale and in forced-colours mode; the
+ * colour only reinforces it. The label spells the level out regardless, which
+ * is what makes the meter safe to look at quickly.
+ */
+.ion-confidence {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-8);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  color: var(--text-secondary);
+}
+
+.ion-confidence__meter {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: var(--spacing-2);
+
+  /* Baseline-aligned with the label rather than centred, so the meter sits on
+   * the text's baseline the way a small-caps run would. */
+  align-self: center;
+}
+
+/*
+ * EVERY bar is outlined; only the filled ones take a colour.
+ *
+ * The first draft used `surface/muted` as the empty bar's fill, which measures
+ * 1.05:1 against `surface/page` — invisible. That breaks the reading the meter
+ * depends on: "one bar filled of three" collapses into "one bar", and the level
+ * can no longer be judged without reading the label. Found by computing the
+ * pairing the contrast gate does not model, since these spans hold no text.
+ *
+ * `icon/tertiary` is 7.09:1 against the page and 7.56:1 against a card, so the
+ * empty bars are legible on both surfaces. This is also the same construction
+ * the forced-colours block below uses, so the two no longer diverge.
+ */
+.ion-confidence__bar {
+  width: var(--spacing-4);
+  height: var(--spacing-8);
+  border: var(--border-width-default) solid var(--icon-tertiary);
+  border-radius: var(--radius-2xs);
+  background-color: transparent;
+}
+
+.ion-confidence__bar:nth-child(2) {
+  height: var(--spacing-12);
+}
+
+.ion-confidence__bar:nth-child(3) {
+  height: var(--spacing-16);
+}
+
+.ion-confidence--low .ion-confidence__bar--on {
+  border-color: var(--icon-warning);
+  background-color: var(--icon-warning);
+}
+
+.ion-confidence--medium .ion-confidence__bar--on {
+  border-color: var(--icon-information);
+  background-color: var(--icon-information);
+}
+
+.ion-confidence--high .ion-confidence__bar--on {
+  border-color: var(--icon-success);
+  background-color: var(--icon-success);
+}
+
+.ion-confidence__label {
+  color: var(--text-default);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-confidence__basis {
+  color: var(--text-tertiary);
+}
+
+@media (forced-colors: active) {
+  /* Colour is remapped away entirely here, so the filled bars must still be
+   * distinguishable from the empty ones by fill rather than hue. */
+  .ion-confidence__bar {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border: var(--border-width-default) solid CanvasText;
+  }
+
+  .ion-confidence__bar--on {
+    background-color: CanvasText;
+  }
+}

package/dist/styles/index.css

@@ -52,6 +52,40 @@
 @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');
+@import url('./agent-activity.css');
+@import url('./streaming-text.css');
+@import url('./citation.css');
+@import url('./confidence-indicator.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/dist/styles/streaming-text.css

@@ -0,0 +1,56 @@
+/*
+ * StreamingText
+ *
+ * NOT DRAWN IN FIGMA. Type and rhythm come from the body tokens, so this is
+ * ordinary prose that happens to be arriving late.
+ */
+.ion-streaming-text {
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  white-space: pre-wrap;
+}
+
+/*
+ * Reserve the height rather than growing into it. `lh` is the line box of THIS
+ * element, so the reserved space tracks the font size instead of a guessed
+ * pixel value — which is what makes it hold at any zoom level.
+ */
+.ion-streaming-text--reserved {
+  min-height: calc(var(--ion-streaming-min-lines, 3) * 1lh);
+}
+
+/*
+ * The cursor is a box, not a text character: a literal "▌" is read aloud by
+ * some screen readers even inside an aria-hidden span, and it inherits font
+ * metrics that differ per family.
+ */
+.ion-streaming-text__cursor {
+  display: inline-block;
+  width: 0.5em;
+  height: 1em;
+  margin-inline-start: 0.1em;
+  vertical-align: text-bottom;
+  background-color: var(--text-tertiary);
+  animation: ion-streaming-blink 1s step-end infinite;
+}
+
+@keyframes ion-streaming-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/*
+ * Blinking is a WCAG 2.3.1 concern and a real problem for some vestibular and
+ * attention conditions. The global reduced-motion block in index.css collapses
+ * the duration, which would leave the cursor stuck mid-blink — so pin it
+ * visible here instead of merely stopping the animation.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .ion-streaming-text__cursor {
+    animation: none;
+    opacity: 1;
+  }
+}

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.25.0. 44 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`
+`AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `ConfidenceIndicator`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `StreamingText`, `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.25.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",