ionbase-ui 0.81.1 → 0.86.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.81.1",
+  "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",
@@ -550,19 +584,40 @@
       "hasIntent": true
     },
     "Menu": {
-      "summary": "The list surface only — no trigger, no anchor, no open state. Positioning it is the caller's job.",
+      "summary": "An ARIA menu: one tab stop, arrow keys, typeahead, and optional single or multiple selection. Children are MenuItem and MenuSection. Inside a MenuTrigger it floats, opens and closes, and can open submenus; on its own it renders in flow.",
       "status": "stable",
       "variants": {},
       "detail": "dist/meta/Menu.json",
       "hasIntent": true
     },
     "MenuItem": {
-      "summary": "One row in a Menu. A real <button> inside an <li>, with an optional leading icon and a trailing selected check.",
+      "summary": "One row of a Menu. A collection element: Menu reads its props and draws the row as `menuitem`, `menuitemradio` or `menuitemcheckbox`.",
       "status": "stable",
       "variants": {},
       "detail": "dist/meta/MenuItem.json",
       "hasIntent": true
     },
+    "MenuSection": {
+      "summary": "A named group of MenuItems. Re-exported from react-stately's collection Section — `title` is Figma's Menu Section Title.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/MenuSection.json",
+      "hasIntent": true
+    },
+    "MenuTrigger": {
+      "summary": "A Button that opens a Menu. The \"⋯\" overflow menu is this with an icon-only Button. Owns open state, positioning, focus, and the ARIA link between the two.",
+      "status": "stable",
+      "variants": {
+        "placement": [
+          "bottom start",
+          "bottom end",
+          "top start",
+          "top end"
+        ]
+      },
+      "detail": "dist/meta/MenuTrigger.json",
+      "hasIntent": true
+    },
     "Modal": {
       "summary": "A focus-trapping dialog. Renders nothing when closed and portals when open.",
       "status": "stable",
@@ -601,6 +656,13 @@
       "detail": "dist/meta/NumberInput.json",
       "hasIntent": true
     },
+    "PageHeader": {
+      "summary": "The top of a page: breadcrumb, the page's h1, a description, the record's status, and the page's actions. Not a landmark — main is, named by this title.",
+      "status": "stable",
+      "variants": {},
+      "detail": "dist/meta/PageHeader.json",
+      "hasIntent": true
+    },
     "Pagination": {
       "summary": "Page navigation for a table or list. Renders prev/next arrows, a truncated run of page numbers, and an optional rows-per-page Select.",
       "status": "stable",
@@ -707,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",
@@ -736,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",
@@ -852,8 +931,8 @@
       "status": "stable",
       "variants": {
         "orientation": [
-          "horizontal",
-          "vertical"
+          "vertical",
+          "horizontal"
         ]
       },
       "detail": "dist/meta/Stepper.json",
@@ -962,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/PageShell.json

@@ -14,6 +14,7 @@
     "Logo",
     "LogoMark",
     "Avatar",
+    "PageHeader",
     "Button",
     "Divider",
     "ToastProvider",
@@ -22,15 +23,15 @@
   ],
   "structure": [
     "Header at the top with the brand in `brand`, primary navigation in `center` and account actions in `end`.",
-    "One <main> content region, named, holding the page's own heading as its h1.",
+    "One <main> content region, named by the page's PageHeader: pass PageHeader a `titleId` and point <main aria-labelledby> at it. The PageHeader's title is the page's h1.",
     "ToastProvider mounted once around the whole shell, not per route.",
-    "Breadcrumbs, when present, sit inside <main> above the h1 — they describe where the content is, not where the chrome is.",
+    "Breadcrumbs, when present, go in PageHeader's `breadcrumb` slot, inside <main> above the h1 — they describe where the content is, not where the chrome is.",
     "When navigation is hierarchical or longer than a header row holds, a Sidebar replaces the NavItems in Header's `center`: Header keeps the brand and account actions, and the Sidebar sits beside <main> as the primary navigation. Below the tablet breakpoint the same Sidebar moves into a Drawer opened by Header's own toggle with `menuType=\"dialog\"` — one copy, not two, and one menu button.",
     "A CommandPalette, when the product has one, is mounted once inside the shell beside ToastProvider, not per route. Header's `end` carries a Search button showing <Kbd shortcut=\"mod+k\" /> — the visible door for anyone who does not know the shortcut, and the only one on a phone. Everything in the palette is also reachable from the navigation."
   ],
   "states": {
     "loading": {
-      "must": "Render the shell immediately and load only the content region. Never block the header on the page's data.",
+      "must": "Render the shell and the PageHeader immediately and load only what is beneath it. Never block the header on the page's data; when the title itself is data (a record's name), show the route's generic name until it arrives.",
       "why": "the navigation is what a user reaches for when a page is slow; hiding it makes a slow page feel like a broken one"
     },
     "empty": {
@@ -38,7 +39,7 @@
       "why": "a blank content region with working chrome reads as a failed load"
     },
     "error": {
-      "must": "Keep the shell. Put the error inside <main> with a retry and a way back to somewhere that works.",
+      "must": "Keep the shell and the PageHeader. Put the error beneath the header inside <main>, with a retry and a way back to somewhere that works.",
       "why": "a full-page error strands the user with no navigation, so their only option is the browser's back button"
     }
   },
@@ -102,6 +103,14 @@
     ],
     "Kbd": [
       "shortcut"
+    ],
+    "PageHeader": [
+      "title",
+      "titleId",
+      "description",
+      "breadcrumb",
+      "status",
+      "actions"
     ]
   },
   "variantsUsed": {
@@ -120,7 +129,7 @@
     "requires": [
       "`menuLabel` on Header — the mobile toggle is icon-only",
       "a <nav> with its own accessible name wrapping the NavItems; Header supplies the banner landmark, not the navigation one",
-      "exactly one <main>, and exactly one h1 inside it",
+      "exactly one <main>, and exactly one h1 inside it — the PageHeader's title",
       "`aria-current=\"page\"` on the NavItem for the current route — colour alone does not tell a screen-reader user where they are",
       "with a Sidebar, `isCurrent` on the SidebarItem for the current route, and a Sidebar `label` distinct from any other nav on the page"
     ],
@@ -144,6 +153,10 @@
     {
       "dont": "rendering a second nav for mobile",
       "why": "Header moves the one copy, and two copies duplicate every link in the accessibility tree"
+    },
+    {
+      "dont": "a hand-built title block instead of PageHeader",
+      "why": "the demo had five, in three shapes, with actions aligned three ways; PageHeader is the one shape, and the one place its gaps and alignment are decided"
     }
   ]
 }

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.81.1",
+  "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",
@@ -137,6 +139,7 @@
         "Logo",
         "LogoMark",
         "Avatar",
+        "PageHeader",
         "Button",
         "Divider",
         "ToastProvider",

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');
@@ -95,6 +97,7 @@
 @import url('./setting-row.css');
 @import url('./chart.css');
 @import url('./card.css');
+@import url('./page-header.css');
 @import url('./tag-group.css');
 @import url('./kbd.css');
 @import url('./command-palette.css');