ionbase-ui 0.81.1 → 0.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/Menu.d.ts +87 -24
  2. package/dist/components/Menu.d.ts.map +1 -1
  3. package/dist/components/Menu.js +245 -28
  4. package/dist/components/Menu.js.map +1 -1
  5. package/dist/components/PageHeader.d.ts +59 -0
  6. package/dist/components/PageHeader.d.ts.map +1 -0
  7. package/dist/components/PageHeader.js +29 -0
  8. package/dist/components/PageHeader.js.map +1 -0
  9. package/dist/components/index.d.ts +4 -2
  10. package/dist/components/index.d.ts.map +1 -1
  11. package/dist/components/index.js +2 -1
  12. package/dist/components/index.js.map +1 -1
  13. package/dist/figma-descriptions.json +86 -76
  14. package/dist/figma-map.json +142 -38
  15. package/dist/meta/Menu.json +201 -27
  16. package/dist/meta/MenuItem.json +137 -17
  17. package/dist/meta/MenuSection.json +90 -0
  18. package/dist/meta/MenuTrigger.json +177 -0
  19. package/dist/meta/PageHeader.json +169 -0
  20. package/dist/meta/components.json +817 -87
  21. package/dist/meta/contrast.json +240 -32
  22. package/dist/meta/index.json +31 -3
  23. package/dist/meta/patterns/PageShell.json +18 -5
  24. package/dist/meta/patterns/index.json +2 -1
  25. package/dist/styles/index.css +1 -0
  26. package/dist/styles/menu.css +153 -32
  27. package/dist/styles/page-header.css +94 -0
  28. package/llms.txt +2 -2
  29. package/package.json +1 -1
package/dist/meta/PageHeader.json ADDED
@@ -0,0 +1,169 @@
1
+ {
2
+ "name": "PageHeader",
3
+ "source": "src/components/PageHeader.tsx",
4
+ "propsType": "PageHeaderProps",
5
+ "description": "PageHeader — the top of a page: where you are, what it is, and what you can\ndo to it.\n\nPromoted from the demo app, where five screens hand-wrote it in three\ndifferent shapes (`.demo-page__header`, `.demo-run-header`, and a bare\n`<div>`), each with its own gap and its own idea of where the actions\naligned. Every enterprise system ships one — Carbon's PageHeader,\nLightning's page headers — because every page has one.\n\nNOT A LANDMARK\n\nIt renders a `<div>`, not a `<header>`. A `<header>` that is a child of\n`<body>` is the page's banner, and the app shell's Header already is that.\nThe page's landmark is `<main>`, named by this title: pass `titleId` and\npoint `<main aria-labelledby>` at it.\n\nNo `'use client'`: `useId` resolves on the server, and nothing here is\ninteractive. Interactive parts arrive through the slots.",
6
+ "import": "import { PageHeader } from 'ionbase-ui';",
7
+ "status": "stable",
8
+ "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.",
9
+ "useWhen": [
10
+ "the top of every page inside the app shell — list pages, record pages, settings, wizards",
11
+ "the page has a title and actions that act on the whole page, such as New agent or Pause"
12
+ ],
13
+ "useInstead": [
14
+ {
15
+ "when": "it is the bar across the top of the whole app, with the logo and the account menu",
16
+ "use": "Header",
17
+ "why": "Header is the banner landmark, rendered once by the shell. PageHeader is inside main and changes with each page"
18
+ },
19
+ {
20
+ "when": "it titles one section of a page rather than the page",
21
+ "use": "Card",
22
+ "why": "a Card's title is an h2 for a named region; a page has one PageHeader and one h1"
23
+ },
24
+ {
25
+ "when": "the page is empty or failed to load",
26
+ "use": "EmptyState",
27
+ "why": "keep the PageHeader so the user still knows where they are, and put the EmptyState beneath it with headingLevel 2"
28
+ }
29
+ ],
30
+ "composition": {
31
+ "order": [
32
+ "PageHeader",
33
+ "Breadcrumb",
34
+ "Badge",
35
+ "Button",
36
+ "MenuTrigger",
37
+ "Tabs"
38
+ ],
39
+ "note": "Slots, not children: `breadcrumb` above, `status` beside the title, `actions` at the end of the title row, and `children` as a row beneath for the page's Tabs or filters. Pass `titleId` and point `<main aria-labelledby>` at it.",
40
+ "example": "<main aria-labelledby=\"page-title\"><PageHeader titleId=\"page-title\" title=\"Payroll reconciler\" description=\"Matches payroll exports against the ledger every night.\" breadcrumb={<Breadcrumb><BreadcrumbItem href=\"/agents\">Agents</BreadcrumbItem><BreadcrumbItem isCurrent>Payroll reconciler</BreadcrumbItem></Breadcrumb>} status={<Badge intent=\"warning\">Paused</Badge>} actions={<><MenuTrigger><Button variant=\"tertiary\" aria-label=\"More actions\" startIcon={<Icon as={Ellipsis} />} /><Menu onAction={run}><MenuItem key=\"delete\">Delete…</MenuItem></Menu></MenuTrigger><Button variant=\"primary-brand\">Resume</Button></>} /></main>"
41
+ },
42
+ "slots": {
43
+ "breadcrumb": {
44
+ "accepts": "Breadcrumb"
45
+ },
46
+ "status": {
47
+ "accepts": [
48
+ "Badge",
49
+ "Tag"
50
+ ],
51
+ "note": "the record's state. Never an action, and never colour alone — a Badge carries its label"
52
+ },
53
+ "actions": {
54
+ "accepts": [
55
+ "Button",
56
+ "MenuTrigger",
57
+ "Link"
58
+ ],
59
+ "note": "most important last, so the primary action sits at the end of the row. One primary Button at most; beyond two or three actions, put the rest in a MenuTrigger"
60
+ },
61
+ "children": {
62
+ "accepts": [
63
+ "Tabs",
64
+ "SegmentedControl"
65
+ ],
66
+ "note": "a row that belongs to the header: the page's own tabs, or the filters its table answers to"
67
+ }
68
+ },
69
+ "a11y": {
70
+ "role": "none — a <div>. The page's landmark is <main>, named by this title",
71
+ "guarantees": [
72
+ "the title is a real heading, h1 by default, with a stable id for aria-labelledby",
73
+ "actions keep their DOM order when they wrap beneath the title on a narrow screen, so reading order matches visual order"
74
+ ],
75
+ "notes": [
76
+ "`headingLevel` is 1 by default. Use 2 only for a header on a pane that is not the page — the detail half of a list-detail layout, under the list's h1.",
77
+ "It is deliberately not a <header>: a <header> directly inside <body> is the banner, and the app shell's Header already is that."
78
+ ]
79
+ },
80
+ "antiPatterns": [
81
+ {
82
+ "dont": "two PageHeaders on one page",
83
+ "why": "two h1s, and two answers to where am I. Sections below the header are Cards with h2 titles"
84
+ },
85
+ {
86
+ "dont": "dropping the PageHeader while the page loads or fails",
87
+ "why": "the user loses where they are exactly when something went wrong. Keep the title; put Skeleton or EmptyState beneath it"
88
+ },
89
+ {
90
+ "dont": "putting filters or a search field in `actions`",
91
+ "why": "actions act on the page; filters narrow what it shows. Filters go in `children`, the row beneath"
92
+ },
93
+ {
94
+ "dont": "several primary Buttons in `actions`",
95
+ "why": "a page has one next step. The one-primary-action lint rule counts them"
96
+ }
97
+ ],
98
+ "stylesheet": "src/styles/page-header.css",
99
+ "tokens": [
100
+ "--font-family-sans",
101
+ "--font-weight-semibold",
102
+ "--ion-page-header-heading-basis",
103
+ "--spacing-16",
104
+ "--spacing-4",
105
+ "--spacing-8",
106
+ "--text-default",
107
+ "--text-secondary",
108
+ "--type-body",
109
+ "--type-body-line-height",
110
+ "--type-h4",
111
+ "--type-h4-line-height"
112
+ ],
113
+ "props": {
114
+ "title": {
115
+ "type": "React.ReactNode",
116
+ "required": true,
117
+ "origin": "own",
118
+ "description": "The page's title. Rendered as the `h1`."
119
+ },
120
+ "titleId": {
121
+ "type": "string | undefined",
122
+ "required": false,
123
+ "origin": "own",
124
+ "description": "The title's id. Pass it when something else points at the heading —\n`<main aria-labelledby>` is the usual one. Generated when omitted."
125
+ },
126
+ "headingLevel": {
127
+ "type": "PageHeaderHeadingLevel | undefined",
128
+ "required": false,
129
+ "origin": "own",
130
+ "description": "Heading element for the title. Defaults to `1`."
131
+ },
132
+ "description": {
133
+ "type": "React.ReactNode",
134
+ "required": false,
135
+ "origin": "own",
136
+ "description": "One or two sentences under the title: what this page is for."
137
+ },
138
+ "breadcrumb": {
139
+ "type": "React.ReactNode",
140
+ "required": false,
141
+ "origin": "own",
142
+ "description": "A Breadcrumb, above the title."
143
+ },
144
+ "status": {
145
+ "type": "React.ReactNode",
146
+ "required": false,
147
+ "origin": "own",
148
+ "description": "Beside the title: a Badge or two for the record's state — \"Paused\",\n\"Draft\". State, not actions."
149
+ },
150
+ "actions": {
151
+ "type": "React.ReactNode",
152
+ "required": false,
153
+ "origin": "own",
154
+ "description": "At the end of the title row: the page's actions, most important last.\nOne primary Button at most; several more go in a MenuTrigger."
155
+ },
156
+ "children": {
157
+ "type": "React.ReactNode",
158
+ "required": false,
159
+ "origin": "own",
160
+ "description": "A row beneath, that belongs to the header rather than the page's\ncontent: the page's Tabs, or the filters its table answers to."
161
+ }
162
+ },
163
+ "propCounts": {
164
+ "own": 8,
165
+ "aria": 0,
166
+ "dom": 276,
167
+ "other": 0
168
+ }
169
+ }