ionbase-ui 0.81.1 → 0.84.0

package/dist/styles/menu.css

@@ -1,15 +1,22 @@
 /*
  * Menu
  *
- * Measured from Figma `Menu` (85:22440) and `Menu Item`.
+ * Measured from Figma `Menu` (82:306), `Menu Item` (82:217) and
+ * `Menu Section Title` (1468:271), all on the Menu page.
  *
  *   menu   padding 6, gap 2, radius/xl, surface/default, 1px border/subtle
  *   item   40 tall, padding 8/12, gap 8, radius/sm
  *
  * Figma models the list only — there is no trigger, popover or positioning in
  * the design, so there is none here. This is the surface a menu renders on;
- * anchoring it is the caller's job until Figma has a component that says
- * otherwise.
+ * anchoring it is the caller's job until MenuTrigger exists.
+ *
+ * HIGHLIGHT FOLLOWS FOCUS, NOT THE POINTER
+ *
+ * In an ARIA menu, hovering a row moves focus to it (useMenuItem does this), so
+ * the keyboard and the pointer share one highlighted row. Figma's `Hover`
+ * therefore reads `data-focused`, not `:hover`. Styling both would light two
+ * rows at once when the pointer rests on one and the arrow keys move to another.
  *
  * SELECTED-HOVER IS NOT SELECTED PLUS HOVER
  *
@@ -29,6 +36,11 @@
   border-width: var(--border-width-default);
   border-color: var(--border-subtle);
   border-radius: var(--radius-xl);
+
+  /* Figma's Menu carries Shadow/lg (82:306) — it is drawn as a dropdown
+   * surface. Code shipped without it until 0.83.0, which only showed once the
+   * menu floated over a page. */
+  box-shadow: var(--ion-shadow-shadow-lg);
   font-family: var(--font-family-sans);
   list-style: none;
   margin: 0;
@@ -50,9 +62,9 @@
   font-size: var(--type-body);
   line-height: var(--type-body-line-height);
   font-weight: var(--font-weight-regular);
-  text-align: left;
-  width: 100%;
+  text-align: start;
   cursor: pointer;
+  outline: none;
   user-select: none;
   transition: background-color var(--ion-duration-base) var(--ion-ease-out);
 }
@@ -75,7 +87,7 @@
 /* The check keeps its slot whether or not it is showing, so rows do not
  * reflow as the selection moves down the list. */
 .ion-menu__check {
-  margin-left: auto;
+  margin-inline-start: auto;
   visibility: hidden;
 }
 
@@ -84,13 +96,7 @@
   min-width: 0;
 }
 
-@media (hover: hover) {
-  .ion-menu__item:hover {
-    background-color: var(--surface-hover);
-  }
-}
-
-.ion-menu__item[data-hovered='true'] {
+.ion-menu__item[data-focused='true'] {
   background-color: var(--surface-hover);
 }
 
@@ -108,43 +114,158 @@
   visibility: visible;
 }
 
-/* See the header — hovering a selected row drops the tint rather than deepening
- * it. The check stays primary; everything else returns to the resting palette. */
-@media (hover: hover) {
-  .ion-menu__item--selected:hover {
-    background-color: var(--surface-hover);
-    color: var(--text-secondary);
-  }
-
-  .ion-menu__item--selected:hover .ion-menu__icon {
-    color: var(--icon-default);
-  }
-}
-
-.ion-menu__item--selected[data-hovered='true'] {
+/* See the header — highlighting a selected row drops the tint rather than
+ * deepening it. The check stays primary; everything else returns to the resting
+ * palette. */
+.ion-menu__item--selected[data-focused='true'] {
   background-color: var(--surface-hover);
   color: var(--text-secondary);
 }
 
-.ion-menu__item--selected[data-hovered='true'] .ion-menu__icon {
+.ion-menu__item--selected[data-focused='true'] .ion-menu__icon {
   color: var(--icon-default);
 }
 
-.ion-menu__item:focus-visible {
+.ion-menu__item[data-focus-visible='true'] {
   outline: var(--border-width-thick) solid var(--border-focus);
   outline-offset: calc(-1 * var(--border-width-thick));
 }
 
-.ion-menu__item:disabled,
 .ion-menu__item[data-disabled='true'] {
   background-color: transparent;
   color: var(--text-disabled);
   cursor: not-allowed;
 }
 
-.ion-menu__item:disabled .ion-menu__icon,
-.ion-menu__item:disabled .ion-menu__check,
 .ion-menu__item[data-disabled='true'] .ion-menu__icon,
 .ion-menu__item[data-disabled='true'] .ion-menu__check {
   color: var(--icon-disabled);
 }
+
+/* ------------------------------------------------------------- submenus
+ *
+ * Figma draws no submenu row. The chevron takes the check's place at the end
+ * of the row — a submenu parent is never itself checkable — and the row keeps
+ * its highlight while its submenu is open, so the eye can find its way back.
+ */
+.ion-menu__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  color: var(--icon-default);
+}
+
+.ion-menu__chevron svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.ion-menu__chevron:dir(rtl) svg {
+  transform: scaleX(-1);
+}
+
+.ion-menu__item--submenu[data-open='true'] {
+  background-color: var(--surface-hover);
+}
+
+/* ------------------------------------------------------------- floating
+ *
+ * The wrapper positions and paints nothing: Menu is already the surface. Its
+ * width is Figma's 240 as a floor, so a menu of short labels does not shrink
+ * to a sliver under a wide trigger, and a long one can still grow.
+ *
+ * z-index is Popover's, for Popover's reason: a menu opened from inside a
+ * dialog has to sit above it, and a toast confirming its action above both.
+ */
+.ion-menu-popover {
+  --ion-menu-min-width: 240px;
+
+  display: flex;
+  flex-direction: column;
+  z-index: 1150;
+  outline: none;
+}
+
+.ion-menu-popover > .ion-menu {
+  min-width: var(--ion-menu-min-width);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.ion-menu-popover__underlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1140;
+}
+
+/* ------------------------------------------------------------- sections
+ *
+ * A section is an <li role="presentation"> holding a heading and a nested
+ * <ul role="group">, so both carry the list's own flex column and gap —
+ * otherwise rows inside a section would sit 2px closer together than rows
+ * outside one.
+ */
+.ion-menu__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.ion-menu__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Figma `Menu Section Title` (1468:271): caption in text/tertiary, then a
+ * 1px border/strong rule filling the rest of the row, with 8/12/4 insets so
+ * the caption lines up with the row labels beneath it.
+ *
+ * It was drawn from this stylesheet on 25 Sep 2026. Before that, 0.82.0 had
+ * mapped MenuSection to a same-named heading on the Side Menu page — a
+ * pre-Sidebar side-nav drawing with a 7px gap and no insets, not a menu part.
+ */
+.ion-menu__section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8) var(--spacing-12) var(--spacing-4);
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.ion-menu__section-title::after {
+  content: '';
+  flex: 1 1 auto;
+  min-width: var(--spacing-8);
+  height: var(--border-width-default);
+  background-color: var(--border-strong);
+}
+
+/* An untitled section after the first is set off by a rule alone. Same line as
+ * the title's, so a menu mixing the two draws one kind of divider. */
+.ion-menu__separator {
+  height: var(--border-width-default);
+  margin: var(--spacing-4) var(--spacing-12);
+  background-color: var(--border-strong);
+}
+
+@media (forced-colors: active) {
+  .ion-menu__item[data-focused='true'] {
+    outline: var(--border-width-thick) solid Highlight;
+    outline-offset: calc(-1 * var(--border-width-thick));
+  }
+
+  .ion-menu__section-title::after,
+  .ion-menu__separator {
+    background-color: CanvasText;
+  }
+}

package/dist/styles/page-header.css

@@ -0,0 +1,94 @@
+/*
+ * PageHeader
+ *
+ * Promoted from the demo, where `.demo-page__header` and `.demo-run-header`
+ * drew it twice with a 16 gap between title and actions, 4 between title and
+ * description. Kept.
+ *
+ * THE TITLE IS h4-SIZED, ON PURPOSE
+ *
+ * It is the page's h1 in the outline and an h4 on the type scale. An app page
+ * sits under a Header and beside a Sidebar; an h1-sized title there reads as a
+ * marketing page. Every demo screen made this call independently, and so do
+ * Carbon and Lightning. The level is semantic; the size is the product's.
+ *
+ * ACTIONS ALIGN TO THE TITLE, NOT THE DESCRIPTION
+ *
+ * `flex-start`, so the buttons sit on the title's line however long the
+ * description runs. The demo's overview used `flex-end`, and its buttons
+ * drifted down to the description's last line as the copy grew. When the
+ * row is too narrow for both, the actions wrap beneath and align to the start.
+ */
+.ion-page-header {
+  --ion-page-header-heading-basis: 280px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  min-width: 0;
+  font-family: var(--font-family-sans);
+}
+
+.ion-page-header__main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-16);
+}
+
+/*
+ * The heading grows from a fixed basis, not from its content. With `auto` a
+ * long description asks for the whole row, so the actions wrapped beneath at
+ * 720px with room to spare — the test `ActionsAlignToTheTitle` caught it. From
+ * a basis, the row only wraps when it is narrower than the basis plus the
+ * actions: a phone, not a long sentence. The basis is declared on the root.
+ */
+.ion-page-header__heading {
+  display: flex;
+  flex: 1 1 var(--ion-page-header-heading-basis);
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.ion-page-header__title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.ion-page-header__title {
+  margin: 0;
+  min-width: 0;
+  color: var(--text-default);
+  font-size: var(--type-h4);
+  line-height: var(--type-h4-line-height);
+  font-weight: var(--font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.ion-page-header__status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.ion-page-header__description {
+  margin: 0;
+  max-width: 72ch;
+  color: var(--text-secondary);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+}
+
+.ion-page-header__actions {
+  display: flex;
+  flex: 0 1 auto;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-8);
+}

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.81.1. 81 components.
+Version 0.84.0. 84 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`, `Modal`, `NavItem`, `NumberInput`, `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`, `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`
 
 ## Patterns
 

package/package.json

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