ionbase-ui 0.81.0 → 0.84.0

package/dist/meta/contrast.json

@@ -9467,6 +9467,20 @@
       "ratio": 7.56,
       "min": 4.5
     },
+    {
+      "component": "menu",
+      "context": "ion-menu ion-menu__section-title",
+      "state": "default",
+      "fg": "--text-tertiary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Light",
+      "fgHex": "#4b5563",
+      "bgHex": "#ffffff",
+      "ratio": 7.56,
+      "min": 4.5
+    },
     {
       "component": "nav-item",
       "context": "ion-nav-item ion-nav-item__icon",
@@ -10887,6 +10901,20 @@
       "ratio": 8.28,
       "min": 4.5
     },
+    {
+      "component": "menu",
+      "context": "ion-menu ion-menu__section-title",
+      "state": "default",
+      "fg": "--text-tertiary",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "text",
+      "mode": "Dark",
+      "fgHex": "#9ca3b0",
+      "bgHex": "#000000",
+      "ratio": 8.28,
+      "min": 4.5
+    },
     {
       "component": "nav-item",
       "context": "ion-nav-item ion-nav-item__icon",
@@ -12056,6 +12084,21 @@
       "ratio": 9.04,
       "min": 4.5
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#f0f2f4",
+      "ratio": 9.04,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -12343,7 +12386,7 @@
     {
       "component": "menu",
       "context": "ion-menu ion-menu__item",
-      "state": "hover",
+      "state": "focus",
       "fg": "--text-secondary",
       "bg": "--surface-hover",
       "backdrop": "--surface-default",
@@ -13264,6 +13307,21 @@
       "ratio": 9.53,
       "min": 4.5
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#f6f8f9",
+      "ratio": 9.53,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -14554,20 +14612,6 @@
       "ratio": 10.15,
       "min": 4.5
     },
-    {
-      "component": "menu",
-      "context": "ion-menu ion-menu__item",
-      "state": "focus",
-      "fg": "--text-secondary",
-      "bg": "--surface-default",
-      "backdrop": "--surface-default",
-      "kind": "text",
-      "mode": "Light",
-      "fgHex": "#384252",
-      "bgHex": "#ffffff",
-      "ratio": 10.15,
-      "min": 4.5
-    },
     {
       "component": "modal",
       "context": "ion-modal ion-modal__description",
@@ -14682,6 +14726,21 @@
       "ratio": 10.15,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#384252",
+      "bgHex": "#ffffff",
+      "ratio": 10.15,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -16642,6 +16701,21 @@
       "ratio": 11.38,
       "min": 4.5
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#1d2735",
+      "ratio": 11.38,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -17948,6 +18022,21 @@
       "ratio": 13.31,
       "min": 4.5
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#131923",
+      "ratio": 13.31,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -18396,7 +18485,7 @@
     {
       "component": "menu",
       "context": "ion-menu__item--selected ion-menu__item--selected",
-      "state": "hover",
+      "state": "focus",
       "fg": "--icon-default",
       "bg": "--surface-hover",
       "backdrop": "--surface-default",
@@ -19165,6 +19254,21 @@
       "ratio": 14.14,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#1d2735",
+      "ratio": 14.14,
+      "min": 4.5
+    },
     {
       "component": "popover",
       "context": "ion-popover ion-popover__title",
@@ -19554,7 +19658,7 @@
     {
       "component": "menu",
       "context": "ion-menu ion-menu__item",
-      "state": "hover",
+      "state": "focus",
       "fg": "--text-secondary",
       "bg": "--surface-hover",
       "backdrop": "--surface-default",
@@ -19794,6 +19898,20 @@
       "ratio": 15.07,
       "min": 3
     },
+    {
+      "component": "menu",
+      "context": "ion-menu ion-menu__chevron",
+      "state": "default",
+      "fg": "--icon-default",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "non-text",
+      "mode": "Light",
+      "fgHex": "#1d2735",
+      "bgHex": "#ffffff",
+      "ratio": 15.07,
+      "min": 3
+    },
     {
       "component": "table",
       "context": "ion-table__sort--active ion-table__sort--active",
@@ -20060,6 +20178,21 @@
       "ratio": 15.71,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-muted",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#f0f2f4",
+      "ratio": 15.71,
+      "min": 4.5
+    },
     {
       "component": "progress-bar",
       "context": "ion-progress-bar ion-progress-bar__label",
@@ -20901,20 +21034,6 @@
       "ratio": 15.86,
       "min": 4.5
     },
-    {
-      "component": "menu",
-      "context": "ion-menu ion-menu__item",
-      "state": "focus",
-      "fg": "--text-secondary",
-      "bg": "--surface-default",
-      "backdrop": "--surface-default",
-      "kind": "text",
-      "mode": "Dark",
-      "fgHex": "#dde0e4",
-      "bgHex": "#000000",
-      "ratio": 15.86,
-      "min": 4.5
-    },
     {
       "component": "modal",
       "context": "ion-modal ion-modal__description",
@@ -21029,6 +21148,21 @@
       "ratio": 15.86,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__description",
+      "state": "default",
+      "fg": "--text-secondary",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#dde0e4",
+      "bgHex": "#000000",
+      "ratio": 15.86,
+      "min": 4.5
+    },
     {
       "component": "pagination",
       "context": "ion-pagination ion-pagination__summary",
@@ -22161,6 +22295,36 @@
       "ratio": 16.55,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#f6f8f9",
+      "ratio": 16.55,
+      "min": 4.5
+    },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-page",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#131923",
+      "ratio": 16.55,
+      "min": 4.5
+    },
     {
       "component": "progress-bar",
       "context": "ion-progress-bar ion-progress-bar__label",
@@ -22402,7 +22566,7 @@
     {
       "component": "menu",
       "context": "ion-menu__item--selected ion-menu__item--selected",
-      "state": "hover",
+      "state": "focus",
       "fg": "--icon-default",
       "bg": "--surface-hover",
       "backdrop": "--surface-default",
@@ -23266,6 +23430,21 @@
       "ratio": 17.63,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Light",
+      "fgHex": "#131923",
+      "bgHex": "#ffffff",
+      "ratio": 17.63,
+      "min": 4.5
+    },
     {
       "component": "popover",
       "context": "ion-popover ion-popover__title",
@@ -23826,6 +24005,20 @@
       "ratio": 18.71,
       "min": 3
     },
+    {
+      "component": "menu",
+      "context": "ion-menu ion-menu__chevron",
+      "state": "default",
+      "fg": "--icon-default",
+      "bg": "--surface-default",
+      "backdrop": "--surface-default",
+      "kind": "non-text",
+      "mode": "Dark",
+      "fgHex": "#f0f2f4",
+      "bgHex": "#000000",
+      "ratio": 18.71,
+      "min": 3
+    },
     {
       "component": "table",
       "context": "ion-table__sort--active ion-table__sort--active",
@@ -24285,6 +24478,21 @@
       "ratio": 19.71,
       "min": 3
     },
+    {
+      "component": "page-header",
+      "context": "ion-page-header ion-page-header__title",
+      "state": "default",
+      "fg": "--text-default",
+      "bg": "--surface-default",
+      "backdrop": null,
+      "kind": "text",
+      "ground": "assumed",
+      "mode": "Dark",
+      "fgHex": "#f6f8f9",
+      "bgHex": "#000000",
+      "ratio": 19.71,
+      "min": 4.5
+    },
     {
       "component": "progress-bar",
       "context": "ion-progress-bar ion-progress-bar__label",

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.81.0",
+  "version": "0.84.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useAgentRun",
@@ -550,19 +550,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 +622,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",

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.0",
+  "version": "0.84.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": {
@@ -137,6 +137,7 @@
         "Logo",
         "LogoMark",
         "Avatar",
+        "PageHeader",
         "Button",
         "Divider",
         "ToastProvider",

package/dist/styles/index.css

@@ -95,6 +95,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');