ionbase-ui 0.84.0 → 0.86.0

package/dist/figma-map.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.84.0",
+  "version": "0.86.0",
   "figmaFile": "gaLbGd0QNb1fUl6BjSpfBA",
   "figmaExported": "2026-09-25",
   "usage": "Given a Figma node id or component name, look it up here for the React component, its import, and how each Figma property maps onto a real prop. Every mapping is verified against both the Figma export and the TypeScript API on each build.",
@@ -539,6 +539,41 @@
         }
       }
     },
+    "1501:475": {
+      "figmaComponent": "Checkbox Group",
+      "figmaNodeId": "1501:475",
+      "figmaPage": "Checkbox",
+      "component": "CheckboxGroup",
+      "import": "import { CheckboxGroup } from 'ionbase-ui';",
+      "docs": "components/checkbox-group/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Vertical": "vertical",
+            "Horizontal": "horizontal"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Error": true
+          },
+          "note": "Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox."
+        },
+        "Label#1501:0": {
+          "prop": "label"
+        },
+        "Helper Text#1501:7": {
+          "prop": "description",
+          "note": "the help text; while State=Error the same slot holds errorMessage"
+        },
+        "Show Helper#1501:14": {
+          "prop": "description",
+          "note": "an absent prop is the switch, so false means omit description"
+        }
+      }
+    },
     "1167:247": {
       "figmaComponent": "Citation",
       "figmaNodeId": "1167:247",
@@ -1512,6 +1547,35 @@
         }
       }
     },
+    "1498:242": {
+      "figmaComponent": "Search Field",
+      "figmaNodeId": "1498:242",
+      "figmaPage": "Search Field",
+      "component": "SearchField",
+      "import": "import { SearchField } from 'ionbase-ui';",
+      "docs": "components/search-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query."
+        },
+        "Value#80:0": {
+          "prop": "value",
+          "note": "The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder."
+        }
+      }
+    },
     "1390:435": {
       "figmaComponent": "Segmented Control",
       "figmaNodeId": "1390:435",
@@ -2892,6 +2956,41 @@
         }
       }
     },
+    "Checkbox Group": {
+      "figmaComponent": "Checkbox Group",
+      "figmaNodeId": "1501:475",
+      "figmaPage": "Checkbox",
+      "component": "CheckboxGroup",
+      "import": "import { CheckboxGroup } from 'ionbase-ui';",
+      "docs": "components/checkbox-group/index.html.md",
+      "props": {
+        "Orientation": {
+          "prop": "orientation",
+          "values": {
+            "Vertical": "vertical",
+            "Horizontal": "horizontal"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Error": true
+          },
+          "note": "Error recolours the helper and shows errorMessage in its place; pass the error copy as errorMessage, not description. Disabled is isDisabled on the group, which cascades to every Checkbox."
+        },
+        "Label#1501:0": {
+          "prop": "label"
+        },
+        "Helper Text#1501:7": {
+          "prop": "description",
+          "note": "the help text; while State=Error the same slot holds errorMessage"
+        },
+        "Show Helper#1501:14": {
+          "prop": "description",
+          "note": "an absent prop is the switch, so false means omit description"
+        }
+      }
+    },
     "Citation": {
       "figmaComponent": "Citation",
       "figmaNodeId": "1167:247",
@@ -3865,6 +3964,35 @@
         }
       }
     },
+    "Search Field": {
+      "figmaComponent": "Search Field",
+      "figmaNodeId": "1498:242",
+      "figmaPage": "Search Field",
+      "component": "SearchField",
+      "import": "import { SearchField } from 'ionbase-ui';",
+      "docs": "components/search-field/index.html.md",
+      "props": {
+        "Size": {
+          "prop": "size",
+          "values": {
+            "Small": "sm",
+            "Medium": "md",
+            "Large": "lg"
+          }
+        },
+        "State": {
+          "prop": "isInvalid",
+          "when": {
+            "Invalid": true
+          },
+          "note": "Hover, Focus and Filled are CSS or content; Disabled is isDisabled and Read-only is isReadOnly — Input's split, because the box is Input's. The clear button Filled shows is not a prop: it appears whenever there is a query."
+        },
+        "Value#80:0": {
+          "prop": "value",
+          "note": "The query. Figma's text is also the placeholder until one is typed — pass that as placeholder, and name the field with aria-label, not the placeholder."
+        }
+      }
+    },
     "Segmented Control": {
       "figmaComponent": "Segmented Control",
       "figmaNodeId": "1390:435",
@@ -4733,12 +4861,13 @@
     "DateRangePicker": "Drawn, but not as a set of its own: its field is Date Picker Type=Range and its calendar is Calendar Mode=Range. A Figma set maps to exactly one code component, and splitting one field into two sets to satisfy that would draw the same box twice. Read Date Picker’s Type note for the handoff.",
     "Icon": "Figma has no Icon component; icons are vector assets dropped into slots. Icon is the React wrapper that gives any of them a size rung and an accessible label, so there is nothing on the Figma side to point at.",
     "LogoMark": "Logo-Ionbase maps to Logo. Figma spells the no-wordmark case as that component's Type axis rather than a separate component; LogoMark is how code spells the same thing.",
-    "RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason.",
+    "RadioGroup": "Figma draws Radio only. The group is the thing that owns the selected value, which a static frame cannot express — Figma's Radio State axis is ignored for exactly this reason. Its label, help, error and orientation are the shell drawn as Checkbox Group; the two groups share it in code as well.",
     "ScrollProgress": "Drawn in Figma as its three parts — Line, Progress, Progress Heading — all of which the component owns internally. There is no whole-component frame to map.",
     "Table": "Figma draws Table Row and Table Cell; the table itself is the caller assembling them. Density, the one property Table owns, is mapped on Table Cell.",
     "TableBody": "As TableHead.",
     "TableHead": "As Table — a code-side grouping element. Figma expresses a header row as a Table Row variant, not a separate component.",
     "ToastProvider": "Figma draws Toast, which is mapped. The provider is placement, queueing and the live region — runtime behaviour with nothing to draw.",
-    "MenuTrigger": "Composition, not a drawing: a Button followed by a Menu, both already drawn and mapped. What MenuTrigger adds — open state, positioning, aria-haspopup and aria-expanded, focus on open and return on close — is runtime behaviour a static frame cannot hold, the same reason RadioGroup is here."
+    "MenuTrigger": "Composition, not a drawing: a Button followed by a Menu, both already drawn and mapped. What MenuTrigger adds — open state, positioning, aria-haspopup and aria-expanded, focus on open and return on close — is runtime behaviour a static frame cannot hold, the same reason RadioGroup is here.",
+    "Fieldset": "Drawn as the shell of Checkbox Group: the legend, the helper and the Error recolour are Form Field's type, laid around a set of options. A Fieldset of Inputs is the caller composing Form Fields under that legend, so there is no separate frame to point at."
   }
 }

package/dist/meta/Checkbox.json

@@ -8,8 +8,7 @@
   "summary": "A native checkbox with the system's styling, supporting an indeterminate state.",
   "useWhen": [
     "a single on/off choice inside a form that is submitted",
-    "selecting rows in a Table",
-    "several independent options where more than one may be picked"
+    "selecting rows in a Table"
   ],
   "useInstead": [
     {
@@ -17,6 +16,11 @@
       "use": "Toggle",
       "why": "a switch reads as a setting taking effect now; a checkbox reads as a value being collected"
     },
+    {
+      "when": "several options answer one question",
+      "use": "CheckboxGroup",
+      "why": "it announces the question with each option, carries the group's error, and can require at least one"
+    },
     {
       "when": "the options are mutually exclusive",
       "use": "RadioGroup"
@@ -148,8 +152,7 @@
         "sm",
         "md",
         "lg"
-      ],
-      "default": "md"
+      ]
     },
     "intent": {
       "type": "CheckboxIntent | undefined",
@@ -160,8 +163,7 @@
         "neutral",
         "danger",
         "brand"
-      ],
-      "default": "brand"
+      ]
     },
     "isIndeterminate": {
       "type": "boolean | undefined",

package/dist/meta/CheckboxGroup.json

@@ -0,0 +1,268 @@
+{
+  "name": "CheckboxGroup",
+  "source": "src/components/Checkbox.tsx",
+  "propsType": "CheckboxGroupProps",
+  "description": "A set of checkboxes that answers one question — \"notify me when…\", \"which\nregions\". Owns the selected values, the group's label, help text and error,\nand \"select at least one\".\n\nA row of loose Checkboxes can do none of that accessibly: the question is\nnot announced with the options, an error has nothing to attach to, and\n\"at least one\" has no native expression at all. See the `required` note in\nCheckbox for how that last one is done.",
+  "import": "import { CheckboxGroup } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A set of checkboxes answering one question. Owns the selected values, the group's label, help and error, and \"select at least one\".",
+  "useWhen": [
+    "several options may be picked and they answer one question — \"notify me when\", \"regions\", \"columns to show\"",
+    "the group needs a rule of its own — at least one, or an error that belongs to the set rather than to an option"
+  ],
+  "useInstead": [
+    {
+      "when": "only one option may be picked",
+      "use": "RadioGroup"
+    },
+    {
+      "when": "the options are many, or space is tight",
+      "use": "Select",
+      "why": "past about seven options a list of boxes is longer than the form around it"
+    },
+    {
+      "when": "there is one on/off choice",
+      "use": "Checkbox",
+      "why": "a group of one announces a question and then its only answer"
+    },
+    {
+      "when": "each option takes effect immediately",
+      "use": "Toggle"
+    }
+  ],
+  "composition": {
+    "order": [
+      "CheckboxGroup",
+      "Checkbox"
+    ],
+    "note": "Give every Checkbox a `value`; the group's `onChange` receives the array of ticked values. Selection lives on the group — do not also set `isSelected` on the boxes.",
+    "example": "<CheckboxGroup label=\"Notify the team when\" isRequired value={notifyOn} onChange={setNotifyOn} isInvalid={!!error} errorMessage={error}><Checkbox value=\"failed\">A run fails</Checkbox><Checkbox value=\"approval\">A run needs approval</Checkbox></CheckboxGroup>"
+  },
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms and filter panels"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "touch targets and prominent choices"
+      }
+    },
+    "intent": {
+      "brand": {
+        "use": "the default"
+      },
+      "neutral": {
+        "use": "facts rather than approvals — the columns shown, the filters applied"
+      },
+      "danger": {
+        "use": "a set of destructive consents"
+      }
+    },
+    "orientation": {
+      "vertical": {
+        "use": "the default, and always when a label runs past a few words"
+      },
+      "horizontal": {
+        "use": "two to four one-word options — weekdays, regions. Wraps rather than overflows"
+      }
+    }
+  },
+  "slots": {
+    "label": {
+      "accepts": "text",
+      "note": "renders as the <legend> — the question the options answer"
+    },
+    "description": {
+      "accepts": "text",
+      "note": "help beneath the options; replaced by `errorMessage` while `isInvalid` is set"
+    },
+    "errorMessage": {
+      "accepts": "text",
+      "note": "shown only while `isInvalid` is set"
+    },
+    "children": {
+      "accepts": "Checkbox"
+    }
+  },
+  "a11y": {
+    "role": "group, from <fieldset> and <legend>",
+    "guarantees": [
+      "the legend is announced as the group's name when focus enters any box",
+      "the description or error is on every box's `aria-describedby` as well as the fieldset's, so it is read on the box that takes focus",
+      "`isInvalid` sets `aria-invalid` on every box",
+      "`isRequired` sets native `required` on every box while none is ticked and on none once one is: the browser blocks the submit in its own language, and each box announces \"required\" exactly while the rule is unmet",
+      "`isDisabled` cascades to every Checkbox that has not set its own"
+    ],
+    "requires": [
+      "`label`, or `aria-label` when the question is already visible elsewhere",
+      "a `value` on every Checkbox — the group tracks the selection by it"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "loose Checkboxes under a text label",
+      "why": "the question is not announced with the options, an error has nothing to attach to, and \"at least one\" cannot be expressed"
+    },
+    {
+      "dont": "`isSelected` or `checked` on a Checkbox inside a group",
+      "why": "the group owns the selection; the box's own value is ignored"
+    },
+    {
+      "dont": "`isRequired` on every Checkbox in the group",
+      "why": "that means every box must be ticked; `isRequired` on the group means at least one"
+    }
+  ],
+  "stylesheet": "src/styles/checkbox.css",
+  "tokens": [
+    "--border-disabled",
+    "--border-error-strong",
+    "--border-focus",
+    "--border-inverse",
+    "--border-primary-strong",
+    "--border-stronger",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--icon-disabled",
+    "--icon-on-color",
+    "--ion-checkbox-border",
+    "--ion-checkbox-fill",
+    "--ion-checkbox-font-size",
+    "--ion-checkbox-gap",
+    "--ion-checkbox-line-height",
+    "--ion-checkbox-mark",
+    "--ion-checkbox-radius",
+    "--ion-checkbox-raised",
+    "--ion-checkbox-size",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-shadow-raised-flush-lg",
+    "--ion-shadow-raised-flush-sm",
+    "--ion-shadow-raised-flush-xs",
+    "--radius-sm",
+    "--radius-xs",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-4",
+    "--spacing-8",
+    "--surface-default",
+    "--surface-disabled",
+    "--surface-error",
+    "--surface-inverse",
+    "--surface-primary",
+    "--text-disabled",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "The question the options answer. Renders as the `<legend>`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Help text beneath the options. Replaced by `errorMessage` while invalid."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Shown in the description's place while `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Marks every box invalid and shows `errorMessage`."
+    },
+    "isRequired": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "At least one option must be selected — enforced by native validation."
+    },
+    "value": {
+      "type": "readonly string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The selected values (controlled)."
+    },
+    "defaultValue": {
+      "type": "readonly string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The initially selected values (uncontrolled)."
+    },
+    "onChange": {
+      "type": "((value: string[]) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Receives the whole new selection, in the order the options were ticked."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Shared input name, so a form submits every ticked value under it."
+    },
+    "size": {
+      "type": "CheckboxSize | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "intent": {
+      "type": "CheckboxIntent | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "neutral",
+        "danger",
+        "brand"
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether every checkbox in the group is disabled."
+    },
+    "orientation": {
+      "type": "FieldsetOrientation | undefined",
+      "required": false,
+      "origin": "own",
+      "values": [
+        "vertical",
+        "horizontal"
+      ]
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Checkboxes, each with a `value`."
+    }
+  },
+  "propCounts": {
+    "own": 14,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/Divider.json

@@ -55,8 +55,8 @@
       "origin": "own",
       "description": "Matches Figma's `Style` variant.",
       "values": [
-        "horizontal",
-        "vertical"
+        "vertical",
+        "horizontal"
       ]
     }
   },

package/dist/meta/Fieldset.json

@@ -0,0 +1,162 @@
+{
+  "name": "Fieldset",
+  "source": "src/components/Fieldset.tsx",
+  "propsType": "FieldsetProps",
+  "description": "Groups related fields under one label, with one description and one error —\nan address, a date range typed as two fields, a set of limits.\n\nFor checkboxes use CheckboxGroup and for radios RadioGroup: both render this\nsame shell, and add the selection state it deliberately does not own.\n\nThere is no `isDisabled`. A native `disabled` fieldset does disable every\ncontrol inside, but Input, Select and the rest draw their disabled state from\ntheir own prop, so the fields would stop working while still looking live.\nDisable the fields themselves; the choice groups can cascade because their\ncheckboxes and radios style off `:disabled`.",
+  "import": "import { Fieldset } from 'ionbase-ui';",
+  "status": "stable",
+  "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.",
+  "useWhen": [
+    "several fields answer one question and a reader must hear the question with each of them — street, city and postcode under \"Billing address\"",
+    "one error belongs to the group rather than to a field — \"the minimum must be below the maximum\""
+  ],
+  "useInstead": [
+    {
+      "when": "the fields are checkboxes",
+      "use": "CheckboxGroup",
+      "why": "it renders this same shell and adds the selected values and \"select at least one\""
+    },
+    {
+      "when": "the fields are radios",
+      "use": "RadioGroup",
+      "why": "it renders this same shell and adds the shared name and the selected value"
+    },
+    {
+      "when": "a single field needs a label and help text",
+      "use": "Input",
+      "why": "every field already renders its own label, description and error; a fieldset around one field announces the label twice"
+    },
+    {
+      "when": "the grouping is visual — a titled section of a settings page",
+      "use": "Card",
+      "why": "a fieldset is a form grouping that assistive technology announces on entry; a section of unrelated settings is not one question"
+    }
+  ],
+  "composition": {
+    "order": [
+      "Fieldset",
+      "Input"
+    ],
+    "note": "Each field keeps its own label — the legend names the group, not the fields. Put a group-level error in `errorMessage` with `isInvalid`, and keep field-level errors on the fields.",
+    "example": "<Fieldset label=\"Run limits\" description=\"Runs stop at whichever comes first.\" orientation=\"horizontal\"><NumberInput label=\"Max steps\" /><NumberInput label=\"Max minutes\" /></Fieldset>"
+  },
+  "variants": {
+    "orientation": {
+      "vertical": {
+        "use": "the default — fields stacked, as a form reads"
+      },
+      "horizontal": {
+        "use": "two or three short fields that read as one value — a range, a size, a city and postcode. Wraps rather than overflows"
+      }
+    }
+  },
+  "slots": {
+    "label": {
+      "accepts": "text",
+      "note": "renders as the <legend> — the question the fields answer"
+    },
+    "description": {
+      "accepts": "text",
+      "note": "help beneath the fields; replaced by `errorMessage` while `isInvalid` is set, as Input's is"
+    },
+    "errorMessage": {
+      "accepts": "text",
+      "note": "the group's error, shown only while `isInvalid` is set"
+    },
+    "children": {
+      "accepts": "Input, Select, NumberInput, DatePicker and other fields"
+    }
+  },
+  "a11y": {
+    "role": "group, from <fieldset> and <legend>",
+    "guarantees": [
+      "the legend is announced as the group's name when focus enters any field inside",
+      "`aria-describedby` on the fieldset points at whichever of the description or the error is showing"
+    ],
+    "requires": [
+      "`label`, or `aria-label` when the question is already visible as a heading"
+    ],
+    "notes": [
+      "There is no `isDisabled`. A native disabled fieldset disables every control inside, but Input, Select and the rest draw their disabled look from their own prop — the fields would stop working while still looking live. Disable the fields themselves."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a Fieldset around one field",
+      "why": "the field's label and the legend both announce, saying the same thing twice"
+    },
+    {
+      "dont": "a Fieldset of Checkboxes",
+      "do": "<CheckboxGroup label=\"Notify me when\">…</CheckboxGroup>",
+      "why": "it looks the same, but nothing owns the selected values or \"select at least one\""
+    },
+    {
+      "dont": "<fieldset disabled> around Inputs",
+      "why": "the fields stop accepting input while still drawn as enabled"
+    }
+  ],
+  "stylesheet": "src/styles/fieldset.css",
+  "tokens": [
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--font-weight-regular",
+    "--ion-fieldset-gap",
+    "--ion-fieldset-inline-gap",
+    "--spacing-16",
+    "--spacing-6",
+    "--spacing-8",
+    "--text-error",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "The question the fields answer. Renders as the `<legend>`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Help text beneath the fields. Replaced by `errorMessage` while invalid."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Shown in the description's place while `isInvalid` is set."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Whether the group as a whole fails validation."
+    },
+    "orientation": {
+      "type": "FieldsetOrientation | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "How the fields flow. Horizontal wraps rather than overflowing.",
+      "values": [
+        "vertical",
+        "horizontal"
+      ],
+      "default": "vertical"
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 6,
+    "aria": 0,
+    "dom": 279,
+    "other": 0
+  }
+}

package/dist/meta/Radio.json

@@ -91,7 +91,6 @@
     "--border-width-default",
     "--border-width-thick",
     "--font-family-sans",
-    "--font-weight-medium",
     "--icon-disabled",
     "--icon-on-color",
     "--ion-duration-base",