ionbase-ui 0.84.0 → 0.88.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.88.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useAgentRun",
@@ -298,6 +298,28 @@
       "detail": "dist/meta/Checkbox.json",
       "hasIntent": true
     },
+    "CheckboxGroup": {
+      "summary": "A set of checkboxes answering one question. Owns the selected values, the group's label, help and error, and \"select at least one\".",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "danger",
+          "brand"
+        ],
+        "orientation": [
+          "vertical",
+          "horizontal"
+        ]
+      },
+      "detail": "dist/meta/CheckboxGroup.json",
+      "hasIntent": true
+    },
     "Citation": {
       "summary": "The inline source marker. The visible number is for the eye; the accessible name is the sentence.",
       "status": "stable",
@@ -388,8 +410,8 @@
       "status": "stable",
       "variants": {
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Divider.json",
@@ -433,6 +455,18 @@
       "detail": "dist/meta/EmptyState.json",
       "hasIntent": true
     },
+    "Fieldset": {
+      "summary": "A <fieldset>/<legend> that groups related fields under one label, one description and one error — an address, a pair of limits, a date typed as two fields.",
+      "status": "stable",
+      "variants": {
+        "orientation": [
+          "vertical",
+          "horizontal"
+        ]
+      },
+      "detail": "dist/meta/Fieldset.json",
+      "hasIntent": true
+    },
     "FileUpload": {
       "summary": "A drop target wrapped around a real file input, with client-side accept and size checks.",
       "status": "stable",
@@ -602,6 +636,19 @@
       "detail": "dist/meta/Modal.json",
       "hasIntent": true
     },
+    "MultiSelect": {
+      "summary": "A text field that filters a list, with any number of values chosen. The choices show as removable tags beneath the field and are read with it.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/MultiSelect.json",
+      "hasIntent": true
+    },
     "NavItem": {
       "summary": "A primary navigation destination. Renders an <a> when given `href`, a <button> otherwise.",
       "status": "stable",
@@ -735,9 +782,13 @@
       "hasIntent": true
     },
     "RadioGroup": {
-      "summary": "A <fieldset>/<legend> group of mutually exclusive options. Owns the shared name and the selected value.",
+      "summary": "A <fieldset>/<legend> group of mutually exclusive options. Owns the shared name and the selected value, and the group's label, help and error.",
       "status": "stable",
       "variants": {
+        "orientation": [
+          "vertical",
+          "horizontal"
+        ],
         "size": [
           "sm",
           "md",
@@ -764,6 +815,19 @@
       "detail": "dist/meta/ScrollProgress.json",
       "hasIntent": true
     },
+    "SearchField": {
+      "summary": "A text field for a search query: role=\"searchbox\", Enter submits, Escape clears, and a clear button once there is something to clear. Input's box and sizes.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/SearchField.json",
+      "hasIntent": true
+    },
     "SegmentedControl": {
       "summary": "Pick one of two to five options, all visible at once. A radio group drawn as a segmented track — it sets a value and controls no panel.",
       "status": "stable",
@@ -880,8 +944,8 @@
       "status": "stable",
       "variants": {
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Stepper.json",
@@ -990,8 +1054,8 @@
           "lg"
         ],
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Tabs.json",
@@ -1103,6 +1167,18 @@
       "detail": "dist/meta/Toggle.json",
       "hasIntent": true
     },
+    "Toolbar": {
+      "summary": "A row of controls that act on one thing, reached as one tab stop: arrow keys between the controls, Tab out in one press, and back to the control used last.",
+      "status": "stable",
+      "variants": {
+        "orientation": [
+          "vertical",
+          "horizontal"
+        ]
+      },
+      "detail": "dist/meta/Toolbar.json",
+      "hasIntent": true
+    },
     "ToolCall": {
       "summary": "The evidence behind one step of an agent run: which tool, with what input, and what came back — collapsed by default, with any failure shown without a click.",
       "status": "stable",

package/dist/meta/patterns/DataTable.json

@@ -12,15 +12,17 @@
     "TableRow",
     "TableCell",
     "Checkbox",
+    "Toolbar",
     "Button",
     "Badge",
     "Alert",
-    "Input",
+    "SearchField",
+    "MultiSelect",
     "TagGroup"
   ],
   "structure": [
-    "A toolbar above the table: a search Input, filter controls, and the bulk-action Buttons that appear once something is selected.",
-    "Under the toolbar, once any filter is applied: a TagGroup of the active filters, each removable on its own, beside a Clear all Button. When the last one goes the row goes with it, so move focus to the search Input.",
+    "A toolbar above the table: a SearchField (size sm, with an aria-label naming what it searches), filter controls — a MultiSelect with `hideTags` for any filter that can match more than one value — and, once something is selected, the bulk actions in a Toolbar named for what they act on. The search and filters stay ordinary tab stops outside it — see Toolbar's contract.",
+    "Under the toolbar, once any filter is applied: a TagGroup of the active filters, each removable on its own — one tag per value of a multi-value filter — beside a Clear all Button. When the last one goes the row goes with it, so move focus to the SearchField.",
     "Table with a TableHead whose first cell carries the select-all Checkbox, and a TableBody whose rows each carry their own.",
     "Sortable columns: every header that sorts gets `sortDirection` — the current direction on the sorted column, `none` on the others — so each shows it can be sorted before anyone tries.",
     "One region below the table for pagination or a load-more Button.",
@@ -71,6 +73,9 @@
       "isIndeterminate",
       "isDisabled"
     ],
+    "Toolbar": [
+      "aria-label"
+    ],
     "Button": [
       "variant",
       "size"
@@ -80,13 +85,26 @@
       "title",
       "actions"
     ],
-    "Input": [
-      "leadingIcon"
-    ],
     "TagGroup": [
       "label",
       "items",
       "onRemove"
+    ],
+    "SearchField": [
+      "size",
+      "value",
+      "onChange",
+      "placeholder",
+      "aria-label"
+    ],
+    "MultiSelect": [
+      "size",
+      "aria-label",
+      "options",
+      "value",
+      "onChange",
+      "hideTags",
+      "placeholder"
     ]
   },
   "variantsUsed": {
@@ -152,6 +170,15 @@
     {
       "dont": "sorting only the current page of a paged table",
       "why": "the reader sees \"A–Z\" and takes it as the whole list; send the sort to the server, which knows every row"
+    },
+    {
+      "dont": "an Input with type=\"search\" and a magnifier icon as the table's search",
+      "why": "it has no searchbox role, no Escape to clear and no labelled clear button — SearchField is the same box with that behaviour"
+    },
+    {
+      "dont": "a multi-value filter as a MultiSelect showing its own tags above the active-filters row",
+      "do": "`hideTags` on the MultiSelect, and one active-filter tag per value",
+      "why": "the same values drawn twice, each removable, in two places that can disagree about focus"
     }
   ]
 }

package/dist/meta/patterns/Form.json

@@ -9,6 +9,8 @@
     "Input",
     "Select",
     "Checkbox",
+    "CheckboxGroup",
+    "Fieldset",
     "Radio",
     "RadioGroup",
     "Toggle",
@@ -21,6 +23,7 @@
   "structure": [
     "Fields in a single column. Two columns only for genuinely paired values, and they stack below the mobile breakpoint.",
     "Each field carries its own label and, when invalid, its own errorMessage — the message sits with the control it is about.",
+    "Related fields that answer one question — an address, a pair of limits, a set of checkboxes — sit in a Fieldset, CheckboxGroup or RadioGroup, so the question is announced with each field and a group-level error has somewhere to live.",
     "An error summary Alert above the form after a failed submit, listing each invalid field as a link to it.",
     "A submit Button and a cancel Link or Button, in that reading order, at the end."
   ],
@@ -70,7 +73,23 @@
       "label",
       "name",
       "value",
-      "onChange"
+      "onChange",
+      "isInvalid",
+      "errorMessage",
+      "isRequired"
+    ],
+    "CheckboxGroup": [
+      "label",
+      "value",
+      "onChange",
+      "isInvalid",
+      "errorMessage",
+      "isRequired"
+    ],
+    "Fieldset": [
+      "label",
+      "isInvalid",
+      "errorMessage"
     ],
     "Checkbox": [
       "isDisabled"
@@ -104,7 +123,8 @@
       "a visible `label` on every field, or `aria-label` where the label is genuinely elsewhere",
       "`isInvalid` alongside `errorMessage` — the message alone styles the field without announcing it as invalid",
       "focus moved to the error summary after a failed submit",
-      "`isRequired` on required fields rather than an asterisk in the label text"
+      "`isRequired` on required fields rather than an asterisk in the label text",
+      "a group-level error on the CheckboxGroup, RadioGroup or Fieldset it is about — \"choose at least one\" belongs to the set, not to its first box"
     ],
     "notes": [
       "Validate on blur and on submit, not on every keystroke: an error that appears while the user is still typing the value is wrong more often than right."
@@ -131,6 +151,11 @@
       "dont": "a Toggle inside a form that is submitted",
       "do": "Checkbox",
       "why": "a switch says the change already took effect"
+    },
+    {
+      "dont": "a row of Checkboxes under a heading, with the error in a paragraph beneath",
+      "do": "<CheckboxGroup label=\"…\" isRequired isInvalid errorMessage=\"…\">",
+      "why": "the heading is not announced with the boxes and the error is attached to none of them"
     }
   ]
 }

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.88.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": {
     "AgentRun": {
@@ -52,10 +52,12 @@
         "TableRow",
         "TableCell",
         "Checkbox",
+        "Toolbar",
         "Button",
         "Badge",
         "Alert",
-        "Input",
+        "SearchField",
+        "MultiSelect",
         "TagGroup"
       ],
       "drivenBy": "useTableSort",
@@ -90,6 +92,8 @@
         "Input",
         "Select",
         "Checkbox",
+        "CheckboxGroup",
+        "Fieldset",
         "Radio",
         "RadioGroup",
         "Toggle",

package/dist/styles/fieldset.css

@@ -0,0 +1,65 @@
+/*
+ * Fieldset — and CheckboxGroup and RadioGroup, which render the same shell.
+ *
+ * The type is Form Field's (`.ion-field`, input.css): the legend is its label,
+ * the helper its helper, the error the same recolour. A group of fields reads
+ * as one field with several controls, so it must not introduce a second label
+ * style for agents and designers to choose between.
+ *
+ * The fieldset stays `display: block`. A rendered <legend> is laid out in the
+ * fieldset's border, not as a flex item, so a flex column here would space
+ * everything except the gap under the legend. Spacing is margins on the legend
+ * and helper, and a flex wrapper around the fields themselves.
+ *
+ * Two spacings. A Fieldset of Inputs spaces them as a form does, 16; the
+ * choice groups space their options at 8, which is what RadioGroup has always
+ * used — options in a list, not fields in a form.
+ */
+.ion-fieldset {
+  --ion-fieldset-gap: var(--spacing-16);
+  --ion-fieldset-inline-gap: var(--spacing-16);
+
+  min-width: 0; /* a fieldset's default min-content width would stop wrapping */
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-family: var(--font-family-sans);
+}
+
+.ion-fieldset--choices {
+  --ion-fieldset-gap: var(--spacing-8);
+}
+
+.ion-fieldset__legend {
+  /* Legend has default inline padding; the label beside an Input has none. */
+  padding: 0;
+  margin-bottom: var(--spacing-6);
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-fieldset__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ion-fieldset-gap);
+}
+
+.ion-fieldset--horizontal .ion-fieldset__content {
+  flex-flow: row wrap;
+  column-gap: var(--ion-fieldset-inline-gap);
+}
+
+.ion-fieldset__helper {
+  display: block;
+  margin-top: var(--spacing-6);
+  color: var(--text-tertiary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-regular);
+}
+
+.ion-fieldset--error .ion-fieldset__helper {
+  color: var(--text-error);
+}

package/dist/styles/index.css

@@ -37,6 +37,7 @@
 @import url('./select.css');
 @import url('./checkbox.css');
 @import url('./radio.css');
+@import url('./fieldset.css');
 @import url('./toggle.css');
 @import url('./menu.css');
 @import url('./avatar.css');
@@ -46,6 +47,7 @@
 @import url('./table.css');
 @import url('./pagination.css');
 @import url('./divider.css');
+@import url('./toolbar.css');
 @import url('./link.css');
 @import url('./modal.css');
 @import url('./popover.css');
@@ -77,10 +79,12 @@
 @import url('./prompt-input.css');
 @import url('./tool-call.css');
 @import url('./number-input.css');
+@import url('./search-field.css');
 @import url('./segmented-control.css');
 @import url('./sidebar.css');
 @import url('./file-upload.css');
 @import url('./combobox.css');
+@import url('./multi-select.css');
 
 /*
  * date-range-picker AFTER date-picker, and the order is load-bearing rather

package/dist/styles/multi-select.css

@@ -0,0 +1,104 @@
+/*
+ * MultiSelect
+ *
+ * The field is Combobox's, which is Input's box: `.ion-input .ion-combobox`
+ * with `.ion-multi-select` on top, so the three never drift apart. The menu is
+ * Combobox's menu, block and all, which is also what keeps the contrast gate
+ * measuring these rows against `surface/raised` — see combobox.css.
+ *
+ * What is new is the row's check box, and the tags row under the field.
+ *
+ * THE CHECK IS CHECKBOX'S BOX, DRAWN
+ *
+ * 16px at radius/xs; empty it is 2px `border/stronger`, filled it drops to
+ * 1px of `border/primary-strong` over `surface/primary` with the flush bevel —
+ * the Small checkbox exactly. A multi-select row reads as "tick as many as you
+ * like" only if its mark is recognisably a checkbox; Combobox's single-select
+ * tint says "the one", which is the opposite.
+ *
+ * NO SELECTED TINT
+ *
+ * Combobox tints its one selected row. Here any number can be selected, and a
+ * list of tinted rows loses the one thing the tint is for — so the check says
+ * selected, and the background is left to say focused.
+ */
+.ion-multi-select-menu__option {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+}
+
+.ion-multi-select-menu__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.ion-multi-select-menu__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-16);
+  height: var(--spacing-16);
+
+  /* Centred on the label's first line, as Checkbox centres its box. */
+  margin-top: calc((var(--type-body-line-height) - var(--spacing-16)) / 2);
+  background-color: var(--surface-default);
+  border: var(--border-width-thick) solid var(--border-stronger);
+  border-radius: var(--radius-xs);
+}
+
+.ion-multi-select-menu__check svg {
+  display: block;
+
+  /* Checkbox's derived mark at 16: box / 2 + 4. */
+  width: calc(var(--spacing-16) / 2 + var(--spacing-4));
+  height: calc(var(--spacing-16) / 2 + var(--spacing-4));
+  opacity: 0;
+}
+
+.ion-combobox-menu__option.ion-multi-select-menu__option[data-selected='true'] {
+  background-color: transparent;
+}
+
+.ion-combobox-menu__option.ion-multi-select-menu__option[data-focused='true'] {
+  background-color: var(--surface-hover);
+}
+
+.ion-multi-select-menu__option[data-selected='true'] .ion-combobox-menu__label {
+  font-weight: var(--font-weight-regular);
+}
+
+.ion-multi-select-menu__option[data-selected='true']
+  .ion-multi-select-menu__check {
+  /* Coloured only once filled: empty, the glyph is hidden and has no ground. */
+  color: var(--icon-on-color);
+  background-color: var(--surface-primary);
+  border-width: var(--border-width-default);
+  border-color: var(--border-primary-strong);
+  box-shadow: var(--ion-shadow-raised-flush-xs);
+}
+
+.ion-multi-select-menu__option[data-selected='true']
+  .ion-multi-select-menu__check
+  svg {
+  opacity: 1;
+}
+
+.ion-multi-select-menu__option[data-disabled='true']
+  .ion-multi-select-menu__check {
+  background-color: var(--surface-disabled);
+  border-color: var(--border-disabled);
+  box-shadow: none;
+}
+
+@media (forced-colors: active) {
+  .ion-multi-select-menu__option[data-selected='true']
+    .ion-multi-select-menu__check {
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+}

package/dist/styles/radio.css

@@ -178,23 +178,3 @@
 .ion-radio[data-disabled='true'] .ion-radio__label {
   color: var(--text-disabled);
 }
-
-/* The group stacks its radios; Figma has no group component, so this is the
- * minimum a fieldset needs rather than an invented layout. */
-.ion-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ion-radio-group__label {
-  color: var(--text-secondary);
-  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);
-  padding: 0;
-}

package/dist/styles/search-field.css

@@ -0,0 +1,70 @@
+/*
+ * SearchField
+ *
+ * The box is `.ion-input` itself — the component renders Input's classes, so
+ * every size and state comes from input.css and cannot drift from it. This
+ * file owns only what Input does not have: the clear button, and silencing the
+ * browser's own.
+ *
+ * The clear button is (field height − 8px) square — 24 / 32 / 40 — like
+ * NumberInput's steps, so a Small field's target still meets WCAG 2.5.8.
+ */
+
+/* Restates Input's surface at zero specificity, for the contrast gate — the
+ * same reason, and the same :where(), as number-input.css. */
+:where(.ion-search-field) {
+  background-color: var(--surface-default);
+}
+
+.ion-search-field--clearable {
+  /* The button carries its own inset; full padding would double it. */
+  padding-inline-end: var(--spacing-4);
+}
+
+/*
+ * `type="search"` gets a native cancel button in Chromium and Safari, drawn in
+ * the platform's style and sitting beside ours. Two clear buttons, one of them
+ * unlabelled and unstyled, is the bug this removes.
+ */
+.ion-search-field__field::-webkit-search-cancel-button,
+.ion-search-field__field::-webkit-search-decoration {
+  display: none;
+}
+
+.ion-search-field__clear {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--ion-input-height) - var(--spacing-8));
+  height: calc(var(--ion-input-height) - var(--spacing-8));
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background-color: transparent;
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+.ion-search-field__clear svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+}
+
+@media (hover: hover) {
+  .ion-search-field__clear:hover {
+    background-color: var(--surface-hover);
+    color: var(--icon-default);
+  }
+}
+
+.ion-search-field__clear:active {
+  background-color: var(--surface-pressed);
+  color: var(--icon-default);
+}
+
+.ion-search-field__clear:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(-1 * var(--border-width-thick));
+}

package/dist/styles/toolbar.css

@@ -0,0 +1,36 @@
+/*
+ * Toolbar
+ *
+ * Drawn in Figma as `Toolbar` on the Toolbar page. A row of controls 8 apart —
+ * the gap PageHeader's actions and the demo's bulk bar already used, so a
+ * toolbar dropped into either changes nothing — centred on one line, wrapping
+ * rather than overflowing on a narrow screen.
+ *
+ * Wrapping keeps DOM order, and DOM order is arrow-key order, so a wrapped
+ * toolbar still walks left to right, top to bottom.
+ *
+ * The separator is Divider, vertical: an <hr> with `aria-orientation`, which a
+ * screen reader announces between groups and focus skips. Inset 4 top and
+ * bottom so it reads as a break between groups rather than a border drawn
+ * around the row.
+ */
+.ion-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.ion-toolbar--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ion-toolbar > .ion-divider--vertical {
+  margin-block: var(--spacing-4);
+}
+
+.ion-toolbar--vertical > .ion-divider--horizontal {
+  margin-inline: var(--spacing-4);
+}

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.84.0. 84 components.
+Version 0.88.0. 89 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Card`, `ChartLegend`, `ChartTooltip`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `CommandPalette`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Kbd`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `MenuSection`, `MenuTrigger`, `Modal`, `NavItem`, `NumberInput`, `PageHeader`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Tag`, `TagGroup`, `Textarea`, `TimeField`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
+`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Card`, `ChartLegend`, `ChartTooltip`, `Checkbox`, `CheckboxGroup`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `CommandPalette`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `Fieldset`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Kbd`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `MenuSection`, `MenuTrigger`, `Modal`, `MultiSelect`, `NavItem`, `NumberInput`, `PageHeader`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SearchField`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `SettingRow`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `StatGroup`, `StatTile`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Tag`, `TagGroup`, `Textarea`, `TimeField`, `Toast`, `ToastProvider`, `Toggle`, `Toolbar`, `ToolCall`, `Tooltip`
 
 ## Patterns