ionbase-ui 0.24.0 → 0.25.0

package/dist/meta/contrast.json

@@ -8,6 +8,118 @@
     "Dark"
   ],
   "pairings": [
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--medium&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-information",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#4f3cc8",
+      "ratio": 1.36,
+      "min": 4.5
+    },
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--low&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-warning",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#af3e0e",
+      "ratio": 1.7,
+      "min": 4.5
+    },
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--high&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-success",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#0d7d38",
+      "ratio": 1.94,
+      "min": 4.5
+    },
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--low&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-warning",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#ef8539",
+      "ratio": 1.96,
+      "min": 4.5
+    },
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--high&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-success",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#39b378",
+      "ratio": 2.01,
+      "min": 4.5
+    },
+    {
+      "component": "streaming-text",
+      "context": "ion-streaming-text ion-streaming-text__cursor",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--text-tertiary",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#4b5563",
+      "ratio": 2.33,
+      "min": 4.5
+    },
+    {
+      "component": "streaming-text",
+      "context": "ion-streaming-text ion-streaming-text__cursor",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--text-tertiary",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#9ca3b0",
+      "ratio": 2.38,
+      "min": 4.5
+    },
+    {
+      "component": "confidence-indicator",
+      "context": "ion-confidence--medium&ion-confidence__bar--on ion-confidence__bar--on",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--icon-information",
+      "backdrop": null,
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#7e6ff1",
+      "ratio": 2.92,
+      "min": 4.5
+    },
     {
       "component": "approval-gate",
       "context": "ion-approval-gate ion-approval-gate__action",
@@ -359,6 +471,20 @@
       "ratio": 4.25,
       "min": 4.5
     },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "hover",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle-hover",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#609cf0",
+      "bgHex": "#0e2d8b",
+      "ratio": 4.25,
+      "min": 4.5
+    },
     {
       "component": "approval-gate",
       "context": "ion-approval-gate ion-approval-gate__action",
@@ -863,6 +989,34 @@
       "ratio": 5.37,
       "min": 4.5
     },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "default",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#609cf0",
+      "bgHex": "#071e69",
+      "ratio": 5.37,
+      "min": 4.5
+    },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "focus",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#609cf0",
+      "bgHex": "#071e69",
+      "ratio": 5.37,
+      "min": 4.5
+    },
     {
       "component": "menu",
       "context": "ion-menu__item--selected ion-menu__item--selected",
@@ -1578,6 +1732,20 @@
       "ratio": 7.47,
       "min": 3
     },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "hover",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle-hover",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#1541b2",
+      "bgHex": "#e2f1fd",
+      "ratio": 7.5,
+      "min": 4.5
+    },
     {
       "component": "approval-gate",
       "context": "ion-approval-gate__action--approve ion-approval-gate__action--approve",
@@ -1802,6 +1970,34 @@
       "ratio": 7.93,
       "min": 4.5
     },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "default",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#1541b2",
+      "bgHex": "#ebf7ff",
+      "ratio": 7.93,
+      "min": 4.5
+    },
+    {
+      "component": "citation",
+      "context": "ion-citation",
+      "state": "focus",
+      "fg": "--text-link",
+      "bg": "--surface-primary-subtle",
+      "backdrop": "--surface-primary-subtle",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#1541b2",
+      "bgHex": "#ebf7ff",
+      "ratio": 7.93,
+      "min": 4.5
+    },
     {
       "component": "select",
       "context": "ion-select--placeholder ion-select__field",
@@ -4350,6 +4546,50 @@
         "Input",
         "Select"
       ]
+    },
+    {
+      "fg": "--text-secondary",
+      "bg": "--icon-warning",
+      "mode": "Light",
+      "kind": "wcag-exempt",
+      "ratio": 1.7,
+      "reason": "Not a text pairing. `.ion-confidence__bar--on` is an empty, aria-hidden <span> — the gate pairs the inherited text colour against its background because it models every element as potentially holding text. There is no text here and SC 1.4.3 does not apply. What DOES apply is SC 1.4.11, and it was measured by hand: the filled bar reads 5.32:1 against the unfilled one, and the unfilled bar's outline reads 7.09:1 against the page. Both clear 3:1.",
+      "affects": [
+        "ConfidenceIndicator"
+      ]
+    },
+    {
+      "fg": "--text-secondary",
+      "bg": "--icon-information",
+      "mode": "Light",
+      "kind": "wcag-exempt",
+      "ratio": 1.36,
+      "reason": "As above — an empty bar, not text. Filled vs unfilled measures 6.65:1, over the 3:1 SC 1.4.11 asks of a non-text indicator.",
+      "affects": [
+        "ConfidenceIndicator"
+      ]
+    },
+    {
+      "fg": "--text-secondary",
+      "bg": "--icon-success",
+      "mode": "Light",
+      "kind": "wcag-exempt",
+      "ratio": 1.94,
+      "reason": "As above — an empty bar, not text. Filled vs unfilled measures 4.67:1, over 3:1.",
+      "affects": [
+        "ConfidenceIndicator"
+      ]
+    },
+    {
+      "fg": "--text-default",
+      "bg": "--text-tertiary",
+      "mode": "Light",
+      "kind": "wcag-exempt",
+      "ratio": 2.33,
+      "reason": "Not a text pairing. `.ion-streaming-text__cursor` is an empty, aria-hidden <span> drawn as a block — deliberately not a text character, since some screen readers read a literal cursor glyph aloud. The gate pairs the paragraph's inherited colour against the cursor's background. Measured properly, the cursor is 7.09:1 against the page.",
+      "affects": [
+        "StreamingText"
+      ]
     }
   ],
   "deferred": [

package/dist/meta/index.json

@@ -1,11 +1,33 @@
 {
   "package": "ionbase-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
   ],
   "components": {
+    "AgentActivity": {
+      "summary": "An ordered, plain-language log of what the agent is doing. Status is text and shape, never colour alone.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/AgentActivity.json",
+      "hasIntent": true
+    },
+    "AgentActivityStep": {
+      "summary": "One step in an activity log: what happened, in the user's language, with a status carried by shape and text.",
+      "status": "stable",
+      "variants": {
+        "status": [
+          "pending",
+          "active",
+          "done",
+          "failed",
+          "skipped"
+        ]
+      },
+      "detail": "dist/meta/AgentActivityStep.json",
+      "hasIntent": true
+    },
     "AgentStop": {
       "summary": "The always-visible way to end a running agent. Not optional, and not behind a menu.",
       "status": "stable",
@@ -155,6 +177,40 @@
       "detail": "dist/meta/Checkbox.json",
       "hasIntent": true
     },
+    "Citation": {
+      "summary": "The inline source marker. The visible number is for the eye; the accessible name is the sentence.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/Citation.json",
+      "hasIntent": true
+    },
+    "CitationList": {
+      "summary": "The footer list of sources, as an ordered list so the count and order are structural.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/CitationList.json",
+      "hasIntent": true
+    },
+    "CitationListItem": {
+      "summary": "One source row: its number, what it is, and the passage it supports.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/CitationListItem.json",
+      "hasIntent": true
+    },
+    "ConfidenceIndicator": {
+      "summary": "How much to trust the thing next to it — three levels with a required basis, never a percentage.",
+      "status": "stable",
+      "variants": {
+        "level": [
+          "low",
+          "medium",
+          "high"
+        ]
+      },
+      "detail": "dist/meta/ConfidenceIndicator.json",
+      "hasIntent": true
+    },
     "Divider": {
       "summary": "A semantic thematic break, rendered as a real <hr>.",
       "status": "stable",
@@ -389,6 +445,13 @@
       "detail": "dist/meta/Select.json",
       "hasIntent": true
     },
+    "StreamingText": {
+      "summary": "Model output arriving a token at a time, in a container that does not move. Deliberately not a live region.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/StreamingText.json",
+      "hasIntent": true
+    },
     "TabItem": {
       "summary": "One tab and its panel. Re-exported from react-stately's collection Item — `title` is the tab label, children are the panel.",
       "status": "stable",

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.24.0",
+  "version": "0.25.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-activity.css

@@ -0,0 +1,95 @@
+/*
+ * AgentActivity
+ *
+ * NOT DRAWN IN FIGMA. The rail-and-body layout is Alert's, one step down in
+ * scale; colours are the status roles used everywhere else in the system.
+ */
+.ion-agent-activity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-agent-activity__step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  color: var(--text-secondary);
+}
+
+.ion-agent-activity__glyph {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+
+  /* Optical alignment to the first line of the label, not to the box. */
+  margin-top: var(--spacing-2);
+  color: var(--icon-tertiary);
+}
+
+.ion-agent-activity__glyph svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ion-agent-activity__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.ion-agent-activity__detail {
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+}
+
+/*
+ * Status colour is the second signal, never the only one: each status also has
+ * a differently SHAPED glyph, and its name in visually hidden text. A row of
+ * dots that differ only in hue fails WCAG 1.4.1 outright.
+ */
+.ion-agent-activity__step--active {
+  color: var(--text-default);
+}
+
+.ion-agent-activity__step--active .ion-agent-activity__glyph {
+  color: var(--icon-primary);
+  animation: ion-agent-activity-spin 1.2s linear infinite;
+}
+
+.ion-agent-activity__step--done .ion-agent-activity__glyph {
+  color: var(--icon-success);
+}
+
+.ion-agent-activity__step--failed {
+  color: var(--text-error);
+}
+
+.ion-agent-activity__step--failed .ion-agent-activity__glyph {
+  color: var(--icon-error);
+}
+
+.ion-agent-activity__step--skipped {
+  color: var(--text-tertiary);
+}
+
+@keyframes ion-agent-activity-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-agent-activity__step--active .ion-agent-activity__glyph {
+    animation: none;
+  }
+}

package/dist/styles/citation.css

@@ -0,0 +1,93 @@
+/*
+ * Citation
+ *
+ * NOT DRAWN IN FIGMA. The inline marker borrows Badge's pill geometry at the
+ * smallest size; the footer list borrows the Table's row rhythm.
+ */
+.ion-citation {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-16);
+  height: var(--spacing-16);
+  padding: 0 var(--spacing-4);
+
+  /* Sits with the text, not on it: superscript positioning would shift the
+   * line box and make a paragraph of citations ripple. */
+  margin-inline-start: var(--spacing-2);
+  border-radius: var(--radius-xs);
+  background-color: var(--surface-primary-subtle);
+  color: var(--text-link);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  vertical-align: baseline;
+}
+
+a.ion-citation:hover {
+  background-color: var(--surface-primary-subtle-hover);
+}
+
+a.ion-citation:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 1px;
+}
+
+.ion-citation-list {
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-citation-list__label {
+  margin: 0 0 var(--spacing-8);
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ion-citation-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  margin: 0;
+  padding: 0;
+
+  /* The <ol> keeps its semantics and loses its markers: the visible number is
+   * the citation's own, which must match the inline marker exactly. */
+  list-style: none;
+}
+
+.ion-citation-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+}
+
+.ion-citation-list__marker {
+  flex: none;
+  min-width: var(--spacing-16);
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-body-sm-line-height);
+  text-align: end;
+}
+
+.ion-citation-list__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.ion-citation-list__source {
+  color: var(--text-link);
+}
+
+.ion-citation-list__passage {
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+}

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

@@ -59,6 +59,10 @@
  */
 @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.