ionbase-ui 0.84.0 → 0.86.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.86.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",
@@ -735,9 +769,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 +802,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 +931,8 @@
       "status": "stable",
       "variants": {
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Stepper.json",
@@ -990,8 +1041,8 @@
           "lg"
         ],
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Tabs.json",

package/dist/meta/patterns/DataTable.json

@@ -15,12 +15,12 @@
     "Button",
     "Badge",
     "Alert",
-    "Input",
+    "SearchField",
     "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, 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 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.",
@@ -80,13 +80,17 @@
       "title",
       "actions"
     ],
-    "Input": [
-      "leadingIcon"
-    ],
     "TagGroup": [
       "label",
       "items",
       "onRemove"
+    ],
+    "SearchField": [
+      "size",
+      "value",
+      "onChange",
+      "placeholder",
+      "aria-label"
     ]
   },
   "variantsUsed": {
@@ -152,6 +156,10 @@
     {
       "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"
     }
   ]
 }

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.86.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": {
@@ -55,7 +55,7 @@
         "Button",
         "Badge",
         "Alert",
-        "Input",
+        "SearchField",
         "TagGroup"
       ],
       "drivenBy": "useTableSort",
@@ -90,6 +90,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');
@@ -77,6 +78,7 @@
 @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');

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/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.86.0. 87 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`, `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`, `ToolCall`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.86.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",