ionbase-ui 0.86.0 → 0.88.0

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/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.86.0. 87 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`, `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`
+`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
 

package/package.json

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