ionbase-ui 0.22.0 → 0.25.0

package/dist/meta/index.json

@@ -1,11 +1,46 @@
 {
   "package": "ionbase-ui",
-  "version": "0.22.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",
+      "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 +65,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 +107,10 @@
       "status": "stable",
       "variants": {
         "size": [
-          "mini",
           "sm",
           "md",
-          "lg"
+          "lg",
+          "mini"
         ],
         "shape": [
           "circle",
@@ -123,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",
@@ -357,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.22.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/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/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);
+}