shelving 1.236.2 → 1.238.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 (323) hide show
  1. package/extract/IndexExtractor.js +9 -2
  2. package/extract/MergingExtractor.d.ts +3 -1
  3. package/extract/MergingExtractor.js +41 -3
  4. package/extract/TypescriptExtractor.d.ts +1 -0
  5. package/extract/TypescriptExtractor.js +12 -2
  6. package/package.json +1 -1
  7. package/ui/README.md +35 -267
  8. package/ui/app/App.d.ts +14 -2
  9. package/ui/app/App.js +16 -2
  10. package/ui/app/App.md +58 -0
  11. package/ui/app/App.tsx +16 -2
  12. package/ui/block/Address.module.css +2 -1
  13. package/ui/block/Block.module.css +1 -1
  14. package/ui/block/Blockquote.module.css +5 -1
  15. package/ui/block/Caption.module.css +4 -1
  16. package/ui/block/Card.d.ts +1 -0
  17. package/ui/block/Card.js +1 -0
  18. package/ui/block/Card.md +85 -0
  19. package/ui/block/Card.module.css +7 -1
  20. package/ui/block/Card.tsx +1 -0
  21. package/ui/block/Definitions.module.css +6 -1
  22. package/ui/block/Divider.module.css +4 -1
  23. package/ui/block/Heading.d.ts +1 -0
  24. package/ui/block/Heading.js +1 -0
  25. package/ui/block/Heading.md +70 -0
  26. package/ui/block/Heading.module.css +5 -1
  27. package/ui/block/Heading.tsx +1 -0
  28. package/ui/block/Image.module.css +2 -1
  29. package/ui/block/Label.module.css +6 -1
  30. package/ui/block/List.d.ts +1 -0
  31. package/ui/block/List.js +1 -0
  32. package/ui/block/List.md +51 -0
  33. package/ui/block/List.module.css +2 -1
  34. package/ui/block/List.tsx +1 -0
  35. package/ui/block/Panel.d.ts +1 -0
  36. package/ui/block/Panel.js +1 -0
  37. package/ui/block/Panel.md +50 -0
  38. package/ui/block/Panel.module.css +3 -1
  39. package/ui/block/Panel.tsx +1 -0
  40. package/ui/block/Paragraph.d.ts +1 -0
  41. package/ui/block/Paragraph.js +1 -0
  42. package/ui/block/Paragraph.md +48 -0
  43. package/ui/block/Paragraph.module.css +2 -1
  44. package/ui/block/Paragraph.tsx +1 -0
  45. package/ui/block/Preformatted.module.css +10 -1
  46. package/ui/block/Prose.d.ts +1 -0
  47. package/ui/block/Prose.js +1 -0
  48. package/ui/block/Prose.md +49 -0
  49. package/ui/block/Prose.module.css +2 -1
  50. package/ui/block/Prose.tsx +1 -0
  51. package/ui/block/Section.d.ts +6 -0
  52. package/ui/block/Section.js +6 -0
  53. package/ui/block/Section.md +56 -0
  54. package/ui/block/Section.module.css +2 -1
  55. package/ui/block/Section.tsx +6 -0
  56. package/ui/block/Subheading.d.ts +1 -0
  57. package/ui/block/Subheading.js +1 -0
  58. package/ui/block/Subheading.md +58 -0
  59. package/ui/block/Subheading.module.css +5 -1
  60. package/ui/block/Subheading.tsx +1 -0
  61. package/ui/block/Table.d.ts +1 -0
  62. package/ui/block/Table.js +1 -0
  63. package/ui/block/Table.md +54 -0
  64. package/ui/block/Table.module.css +7 -1
  65. package/ui/block/Table.tsx +1 -0
  66. package/ui/block/Title.d.ts +1 -0
  67. package/ui/block/Title.js +1 -0
  68. package/ui/block/Title.md +57 -0
  69. package/ui/block/Title.module.css +5 -1
  70. package/ui/block/Title.tsx +1 -0
  71. package/ui/block/Video.module.css +7 -1
  72. package/ui/dialog/Dialog.d.ts +1 -0
  73. package/ui/dialog/Dialog.js +1 -0
  74. package/ui/dialog/Dialog.md +73 -0
  75. package/ui/dialog/Dialog.module.css +4 -1
  76. package/ui/dialog/Dialog.tsx +1 -0
  77. package/ui/dialog/Modal.d.ts +1 -0
  78. package/ui/dialog/Modal.js +1 -0
  79. package/ui/dialog/Modal.md +40 -0
  80. package/ui/dialog/Modal.module.css +8 -1
  81. package/ui/dialog/Modal.tsx +1 -0
  82. package/ui/docs/DocumentationButtons.d.ts +2 -0
  83. package/ui/docs/DocumentationButtons.js +2 -0
  84. package/ui/docs/DocumentationButtons.md +38 -0
  85. package/ui/docs/DocumentationButtons.tsx +2 -0
  86. package/ui/docs/DocumentationCard.d.ts +1 -0
  87. package/ui/docs/DocumentationCard.js +1 -0
  88. package/ui/docs/DocumentationCard.md +35 -0
  89. package/ui/docs/DocumentationCard.tsx +1 -0
  90. package/ui/docs/DocumentationKind.d.ts +1 -1
  91. package/ui/docs/DocumentationKind.js +9 -4
  92. package/ui/docs/DocumentationKind.tsx +10 -5
  93. package/ui/docs/DocumentationPage.d.ts +1 -0
  94. package/ui/docs/DocumentationPage.js +2 -0
  95. package/ui/docs/DocumentationPage.md +46 -0
  96. package/ui/docs/DocumentationPage.tsx +2 -0
  97. package/ui/form/Button.d.ts +1 -0
  98. package/ui/form/Button.js +1 -0
  99. package/ui/form/Button.md +88 -0
  100. package/ui/form/Button.module.css +10 -1
  101. package/ui/form/Button.tsx +1 -0
  102. package/ui/form/Field.d.ts +6 -1
  103. package/ui/form/Field.js +6 -1
  104. package/ui/form/Field.md +59 -0
  105. package/ui/form/Field.module.css +6 -1
  106. package/ui/form/Field.tsx +6 -1
  107. package/ui/form/Form.d.ts +1 -0
  108. package/ui/form/Form.md +118 -0
  109. package/ui/form/Form.module.css +2 -1
  110. package/ui/form/Form.tsx +1 -0
  111. package/ui/form/FormStore.md +47 -0
  112. package/ui/form/Input.module.css +10 -2
  113. package/ui/form/Popover.module.css +6 -1
  114. package/ui/form/Progress.module.css +4 -1
  115. package/ui/form/SchemaInput.d.ts +1 -0
  116. package/ui/form/SchemaInput.md +64 -0
  117. package/ui/form/SchemaInput.tsx +1 -0
  118. package/ui/inline/Code.d.ts +1 -0
  119. package/ui/inline/Code.js +1 -0
  120. package/ui/inline/Code.md +58 -0
  121. package/ui/inline/Code.module.css +7 -1
  122. package/ui/inline/Code.tsx +1 -0
  123. package/ui/inline/Deleted.module.css +4 -1
  124. package/ui/inline/Emphasis.module.css +1 -1
  125. package/ui/inline/Inserted.module.css +4 -1
  126. package/ui/inline/Link.d.ts +1 -0
  127. package/ui/inline/Link.js +1 -0
  128. package/ui/inline/Link.md +47 -0
  129. package/ui/inline/Link.module.css +4 -2
  130. package/ui/inline/Link.tsx +1 -0
  131. package/ui/inline/Mark.d.ts +1 -0
  132. package/ui/inline/Mark.js +1 -0
  133. package/ui/inline/Mark.md +40 -0
  134. package/ui/inline/Mark.module.css +3 -1
  135. package/ui/inline/Mark.tsx +1 -0
  136. package/ui/inline/Small.module.css +2 -1
  137. package/ui/inline/Strong.d.ts +1 -0
  138. package/ui/inline/Strong.js +1 -0
  139. package/ui/inline/Strong.md +34 -0
  140. package/ui/inline/Strong.module.css +2 -1
  141. package/ui/inline/Strong.tsx +1 -0
  142. package/ui/inline/Subscript.module.css +1 -1
  143. package/ui/inline/Superscript.module.css +1 -1
  144. package/ui/layout/CenteredLayout.d.ts +1 -0
  145. package/ui/layout/CenteredLayout.js +1 -0
  146. package/ui/layout/CenteredLayout.md +38 -0
  147. package/ui/layout/CenteredLayout.module.css +2 -1
  148. package/ui/layout/CenteredLayout.tsx +1 -0
  149. package/ui/layout/Layout.module.css +4 -2
  150. package/ui/layout/SidebarLayout.d.ts +1 -0
  151. package/ui/layout/SidebarLayout.js +1 -0
  152. package/ui/layout/SidebarLayout.md +65 -0
  153. package/ui/layout/SidebarLayout.module.css +5 -1
  154. package/ui/layout/SidebarLayout.tsx +1 -0
  155. package/ui/menu/Menu.d.ts +2 -0
  156. package/ui/menu/Menu.js +2 -0
  157. package/ui/menu/Menu.md +51 -0
  158. package/ui/menu/Menu.module.css +9 -1
  159. package/ui/menu/Menu.tsx +2 -0
  160. package/ui/menu/MenuItem.md +54 -0
  161. package/ui/misc/Catcher.d.ts +1 -0
  162. package/ui/misc/Catcher.js +1 -0
  163. package/ui/misc/Catcher.md +41 -0
  164. package/ui/misc/Catcher.tsx +1 -0
  165. package/ui/misc/Loading.d.ts +1 -0
  166. package/ui/misc/Loading.js +1 -0
  167. package/ui/misc/Loading.md +28 -0
  168. package/ui/misc/Loading.module.css +3 -1
  169. package/ui/misc/Loading.tsx +1 -0
  170. package/ui/misc/Mapper.md +40 -0
  171. package/ui/misc/Markup.d.ts +1 -0
  172. package/ui/misc/Markup.js +1 -0
  173. package/ui/misc/Markup.md +34 -0
  174. package/ui/misc/Markup.tsx +1 -0
  175. package/ui/misc/StatusIcon.d.ts +1 -0
  176. package/ui/misc/StatusIcon.js +1 -0
  177. package/ui/misc/StatusIcon.md +25 -0
  178. package/ui/misc/StatusIcon.module.css +2 -1
  179. package/ui/misc/StatusIcon.tsx +1 -0
  180. package/ui/misc/Tag.d.ts +1 -0
  181. package/ui/misc/Tag.js +1 -0
  182. package/ui/misc/Tag.md +47 -0
  183. package/ui/misc/Tag.module.css +9 -1
  184. package/ui/misc/Tag.tsx +1 -0
  185. package/ui/notice/Message.module.css +3 -1
  186. package/ui/notice/Notice.d.ts +1 -0
  187. package/ui/notice/Notice.js +1 -0
  188. package/ui/notice/Notice.md +53 -0
  189. package/ui/notice/Notice.module.css +7 -1
  190. package/ui/notice/Notice.tsx +1 -0
  191. package/ui/notice/Notices.d.ts +1 -0
  192. package/ui/notice/Notices.js +1 -0
  193. package/ui/notice/Notices.md +59 -0
  194. package/ui/notice/Notices.module.css +3 -1
  195. package/ui/notice/Notices.tsx +1 -0
  196. package/ui/page/HTML.d.ts +1 -0
  197. package/ui/page/HTML.js +1 -0
  198. package/ui/page/HTML.md +36 -0
  199. package/ui/page/HTML.tsx +1 -0
  200. package/ui/page/Head.d.ts +1 -0
  201. package/ui/page/Head.js +1 -0
  202. package/ui/page/Head.md +26 -0
  203. package/ui/page/Head.tsx +1 -0
  204. package/ui/page/Page.d.ts +1 -0
  205. package/ui/page/Page.js +1 -0
  206. package/ui/page/Page.md +42 -0
  207. package/ui/page/Page.tsx +1 -0
  208. package/ui/router/Navigation.d.ts +1 -0
  209. package/ui/router/Navigation.js +1 -0
  210. package/ui/router/Navigation.md +41 -0
  211. package/ui/router/Navigation.tsx +1 -0
  212. package/ui/router/NavigationStore.md +34 -0
  213. package/ui/router/Router.d.ts +1 -0
  214. package/ui/router/Router.js +1 -0
  215. package/ui/router/Router.md +143 -0
  216. package/ui/router/Router.tsx +1 -0
  217. package/ui/style/Color.module.css +28 -1
  218. package/ui/style/Duration.d.ts +24 -0
  219. package/ui/style/Duration.js +13 -0
  220. package/ui/style/Duration.module.css +23 -0
  221. package/ui/style/Duration.tsx +31 -0
  222. package/ui/style/Flex.module.css +3 -1
  223. package/ui/style/Font.d.ts +24 -0
  224. package/ui/style/Font.js +13 -0
  225. package/ui/style/Font.module.css +50 -0
  226. package/ui/style/Font.tsx +31 -0
  227. package/ui/style/Gap.module.css +2 -1
  228. package/ui/style/Padding.module.css +2 -1
  229. package/ui/style/Radius.d.ts +24 -0
  230. package/ui/style/Radius.js +13 -0
  231. package/ui/style/Radius.module.css +43 -0
  232. package/ui/style/Radius.tsx +31 -0
  233. package/ui/style/Scroll.module.css +4 -0
  234. package/ui/style/Shadow.d.ts +24 -0
  235. package/ui/style/Shadow.js +13 -0
  236. package/ui/style/Shadow.module.css +42 -0
  237. package/ui/style/Shadow.tsx +31 -0
  238. package/ui/style/Size.d.ts +24 -0
  239. package/ui/style/Size.js +13 -0
  240. package/ui/style/Size.module.css +69 -0
  241. package/ui/style/Size.tsx +31 -0
  242. package/ui/style/Space.module.css +19 -1
  243. package/ui/style/Status.module.css +2 -1
  244. package/ui/style/Stroke.d.ts +24 -0
  245. package/ui/style/Stroke.js +13 -0
  246. package/ui/style/Stroke.module.css +26 -0
  247. package/ui/style/Stroke.tsx +31 -0
  248. package/ui/style/TINT_CLASS.md +55 -0
  249. package/ui/style/Tint.module.css +4 -1
  250. package/ui/style/Typography.d.ts +10 -26
  251. package/ui/style/Typography.js +8 -3
  252. package/ui/style/Typography.module.css +2 -66
  253. package/ui/style/Typography.tsx +17 -31
  254. package/ui/style/Weight.d.ts +24 -0
  255. package/ui/style/Weight.js +13 -0
  256. package/ui/style/Weight.module.css +42 -0
  257. package/ui/style/Weight.tsx +31 -0
  258. package/ui/style/Width.module.css +7 -1
  259. package/ui/style/getColorClass.md +47 -0
  260. package/ui/style/getDurationClass.md +18 -0
  261. package/ui/style/getFontClass.md +39 -0
  262. package/ui/style/getRadiusClass.md +24 -0
  263. package/ui/style/getShadowClass.md +23 -0
  264. package/ui/style/getSizeClass.md +42 -0
  265. package/ui/style/getSpaceClass.md +35 -0
  266. package/ui/style/getStrokeClass.md +20 -0
  267. package/ui/style/getWeightClass.md +25 -0
  268. package/ui/style/getWidthClass.md +18 -0
  269. package/ui/style/index.d.ts +7 -0
  270. package/ui/style/index.js +7 -0
  271. package/ui/style/index.tsx +7 -0
  272. package/ui/style/layers.css +26 -0
  273. package/ui/transition/CollapseTransition.d.ts +1 -0
  274. package/ui/transition/CollapseTransition.js +1 -0
  275. package/ui/transition/CollapseTransition.md +34 -0
  276. package/ui/transition/CollapseTransition.tsx +1 -0
  277. package/ui/transition/FadeTransition.d.ts +1 -0
  278. package/ui/transition/FadeTransition.js +1 -0
  279. package/ui/transition/FadeTransition.md +36 -0
  280. package/ui/transition/FadeTransition.tsx +1 -0
  281. package/ui/transition/HorizontalTransition.d.ts +1 -0
  282. package/ui/transition/HorizontalTransition.js +1 -0
  283. package/ui/transition/HorizontalTransition.md +44 -0
  284. package/ui/transition/HorizontalTransition.tsx +1 -0
  285. package/ui/transition/Transition.d.ts +1 -0
  286. package/ui/transition/Transition.js +1 -0
  287. package/ui/transition/Transition.md +70 -0
  288. package/ui/transition/Transition.tsx +1 -0
  289. package/ui/transition/VerticalTransition.d.ts +1 -0
  290. package/ui/transition/VerticalTransition.js +1 -0
  291. package/ui/transition/VerticalTransition.md +34 -0
  292. package/ui/transition/VerticalTransition.tsx +1 -0
  293. package/ui/tree/TreeApp.d.ts +1 -0
  294. package/ui/tree/TreeApp.js +1 -0
  295. package/ui/tree/TreeApp.md +59 -0
  296. package/ui/tree/TreeApp.tsx +1 -0
  297. package/ui/tree/TreeMenu.d.ts +1 -0
  298. package/ui/tree/TreeMenu.js +1 -0
  299. package/ui/tree/TreeMenu.md +35 -0
  300. package/ui/tree/TreeMenu.tsx +1 -0
  301. package/ui/tree/TreeSidebar.d.ts +1 -0
  302. package/ui/tree/TreeSidebar.js +1 -0
  303. package/ui/tree/TreeSidebar.md +24 -0
  304. package/ui/tree/TreeSidebar.tsx +1 -0
  305. package/ui/util/getClass.md +55 -0
  306. package/ui/util/notify.md +50 -0
  307. package/ui/util/requireContext.md +24 -0
  308. package/ui/app/README.md +0 -32
  309. package/ui/block/README.md +0 -144
  310. package/ui/dialog/README.md +0 -80
  311. package/ui/docs/README.md +0 -71
  312. package/ui/form/README.md +0 -165
  313. package/ui/inline/README.md +0 -86
  314. package/ui/layout/README.md +0 -71
  315. package/ui/menu/README.md +0 -33
  316. package/ui/misc/README.md +0 -121
  317. package/ui/notice/README.md +0 -94
  318. package/ui/page/README.md +0 -56
  319. package/ui/router/README.md +0 -186
  320. package/ui/style/base.css +0 -161
  321. package/ui/transition/README.md +0 -80
  322. package/ui/tree/README.md +0 -78
  323. package/ui/util/README.md +0 -153
package/ui/app/App.md ADDED
@@ -0,0 +1,58 @@
1
+ # App
2
+
3
+ Root component for a client-side Shelving app. `<App>` applies the theme CSS class to `document.body` and provides a `Meta` context so every descendant can read or update page metadata.
4
+
5
+ Use `<App>` when mounting into an existing HTML page on the client. For server-side rendering where you need the full `<html>` document shell, use [`HTML`](/ui/HTML) instead.
6
+
7
+ ## A minimal app
8
+
9
+ The smallest single-screen app — `<App>` wraps a layout and some content:
10
+
11
+ ```tsx
12
+ import { App, CenteredLayout, Section, Title, Paragraph } from "shelving/ui";
13
+
14
+ function HelloApp() {
15
+ return (
16
+ <App app="My app">
17
+ <CenteredLayout>
18
+ <Section narrow>
19
+ <Title>Hello</Title>
20
+ <Paragraph>Welcome to the app.</Paragraph>
21
+ </Section>
22
+ </CenteredLayout>
23
+ </App>
24
+ );
25
+ }
26
+ ```
27
+
28
+ ## A routed app
29
+
30
+ For a multi-page app, wrap the routes in [`Navigation`](/ui/Navigation) and [`Router`](/ui/Router):
31
+
32
+ ```tsx
33
+ import { App, Navigation, Router } from "shelving/ui";
34
+
35
+ export function MyApp() {
36
+ return (
37
+ <App app="My app" root="https://example.com/" url="/">
38
+ <Navigation>
39
+ <Router routes={{
40
+ "/": HomePage,
41
+ "/about": AboutPage,
42
+ }} />
43
+ </Navigation>
44
+ </App>
45
+ );
46
+ }
47
+ ```
48
+
49
+ `<App>` accepts all `PossibleMeta` props (`app`, `root`, `url`, `title`, `language`, `tags`, etc.) and merges them into the context it provides to children. On mount it adds the theme class to `document.body`, which activates the CSS custom property tokens defined in `App.module.css`; on unmount it removes it.
50
+
51
+ For a documentation site, hand an extracted tree to [`TreeApp`](/ui/TreeApp) instead — see the [extract](/extract) guide.
52
+
53
+ ## See also
54
+
55
+ - [`HTML`](/ui/HTML) — the full `<html>` document shell for server-side rendering (vs. `<App>` for client mounts).
56
+ - [`Navigation`](/ui/Navigation) and [`Router`](/ui/Router) — client-side routing wrapped inside the app.
57
+ - [`CenteredLayout`](/ui/CenteredLayout) and [`SidebarLayout`](/ui/SidebarLayout) — the page layouts that go inside an app.
58
+ - [`TreeApp`](/ui/TreeApp) — a ready-made documentation-site root built on the same pieces.
package/ui/app/App.tsx CHANGED
@@ -1,6 +1,19 @@
1
1
  import type { ReactElement } from "react";
2
2
  import { MetaContext, requireMeta } from "../misc/MetaContext.js";
3
- import "../style/base.css";
3
+ // Load the global design tokens, cascade-layer order, and body baseline. Each module owns its own
4
+ // `:root` tokens (and body rules where relevant); see `modules/ui/README.md` for the styling system.
5
+ import "../style/layers.css";
6
+ import "../style/Color.module.css";
7
+ import "../style/Duration.module.css";
8
+ import "../style/Font.module.css";
9
+ import "../style/Radius.module.css";
10
+ import "../style/Shadow.module.css";
11
+ import "../style/Size.module.css";
12
+ import "../style/Space.module.css";
13
+ import "../style/Stroke.module.css";
14
+ import "../style/Tint.module.css";
15
+ import "../style/Weight.module.css";
16
+ import "../style/Width.module.css";
4
17
  import type { PossibleMeta } from "../util/index.js";
5
18
  import type { ChildProps } from "../util/props.js";
6
19
 
@@ -14,11 +27,12 @@ export interface AppProps extends PossibleMeta, ChildProps {}
14
27
  /**
15
28
  * Root component for an application, providing the top-level `Meta` context and global styles.
16
29
  * - Descendants can read or update metadata via the provided `<Meta>` context.
17
- * - Design tokens and body baseline typography are set globally via `style/base.css`.
30
+ * - Design tokens and body baseline typography are set globally via the `style/` token modules (`Color`, `Size`, `Font`, …).
18
31
  *
19
32
  * @param children The application content.
20
33
  * @param meta The root meta (app name, root URL, language, etc.).
21
34
  * @returns The app root element wrapping `children`.
35
+ * @kind component
22
36
  * @example <App app="My App" root="https://example.com/"><Navigation>…</Navigation></App>
23
37
  * @see https://dhoulb.github.io/shelving/ui/app/App/App
24
38
  */
package/ui/block/Address.module.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Space.module.css";
2
3
 
3
4
  @layer components {
4
5
  .address,
package/ui/block/Block.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
2
 
3
3
  @layer components {
4
4
  .block {
package/ui/block/Blockquote.module.css CHANGED
@@ -1,4 +1,8 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Space.module.css";
3
+ @import "../style/Stroke.module.css";
4
+ @import "../style/Tint.module.css";
5
+ @import "../style/Weight.module.css";
2
6
 
3
7
  @layer components {
4
8
  .blockquote,
package/ui/block/Caption.module.css CHANGED
@@ -1,4 +1,7 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Size.module.css";
3
+ @import "../style/Space.module.css";
4
+ @import "../style/Weight.module.css";
2
5
 
3
6
  @layer components {
4
7
  .caption,
package/ui/block/Card.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface CardProps extends ClickableProps, ColorVariants, StatusVariants
19
19
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
20
20
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
21
21
  *
22
+ * @kind component
22
23
  * @example <Card><Subheading>Static</Subheading></Card>
23
24
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
24
25
  * @example <Card status="error"><Subheading>Not found</Subheading></Card>
package/ui/block/Card.js CHANGED
@@ -14,6 +14,7 @@ import CARD_CSS from "./Card.module.css";
14
14
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
15
15
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
16
16
  *
17
+ * @kind component
17
18
  * @example <Card><Subheading>Static</Subheading></Card>
18
19
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
19
20
  * @example <Card status="error"><Subheading>Not found</Subheading></Card>
package/ui/block/Card.md ADDED
@@ -0,0 +1,85 @@
1
+ # Card
2
+
3
+ A boxed surface that groups a self-contained piece of content. Rendered as an `<article>`, painted from the tint ladder (surface, border, text) and styled with rounded corners and padding by default.
4
+
5
+ **Things to know:**
6
+
7
+ - Set `href` or `onClick` to make the whole card navigable — a stretched, visually-hidden overlay `<a>` / `<button>` covers the card while the children render normally inside. Real interactive elements inside the card (inline links, buttons) stay clickable and keyboard-focusable.
8
+ - `color=` and `status=` move the tint anchor for the card's scope, so the surface, border, text, and hover shade all re-derive together — and nested components (`Tag`, `Preformatted`, `Button`) inherit the same tint.
9
+ - A card styles only the box. Lay out its contents with the usual block components (`Subheading`, `Paragraph`, `Row`, …).
10
+ - Composes the standard styling variants: `color`, `status`, `padding`, `space`, `width`, plus typography.
11
+
12
+ ## Usage
13
+
14
+ ### Static card
15
+
16
+ ```tsx
17
+ import { Card, Subheading, Paragraph } from "shelving/ui";
18
+
19
+ <Card>
20
+ <Subheading>Storage</Subheading>
21
+ <Paragraph>1.2 GB of 5 GB used.</Paragraph>
22
+ </Card>
23
+ ```
24
+
25
+ ### Navigable card
26
+
27
+ ```tsx
28
+ import { Card, Subheading, Paragraph } from "shelving/ui";
29
+
30
+ // The entire card is a link; `title` labels the overlay for screen readers.
31
+ <Card href="/projects/shelving" title="Open Shelving">
32
+ <Subheading>Shelving</Subheading>
33
+ <Paragraph>TypeScript data toolkit.</Paragraph>
34
+ </Card>
35
+ ```
36
+
37
+ ### Status and colour
38
+
39
+ ```tsx
40
+ import { Card, Subheading } from "shelving/ui";
41
+
42
+ <Card status="error"><Subheading>Couldn't load</Subheading></Card>
43
+ <Card color="purple" padding="large" space="none"><Subheading>Featured</Subheading></Card>
44
+ ```
45
+
46
+ ## Styling
47
+
48
+ `Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Move `--card-tint` to recolour everything at once; reach for a per-property hook for a single surgical change.
49
+
50
+ | Variable | Styles | Default |
51
+ |---|---|---|
52
+ | `--card-tint` | Tint anchor for the card scope — recolours surface, border, text and hover together | `inherit` (flows from `color=` / `status=` / parent) |
53
+ | `--card-background` | Surface fill | `var(--tint-90)` |
54
+ | `--card-hover-background` | Surface fill when a navigable card is hovered | `var(--tint-95)` |
55
+ | `--card-color` | Text colour | `var(--tint-00)` |
56
+ | `--card-border` | Border shorthand | `var(--card-stroke) solid var(--tint-80)` |
57
+ | `--card-stroke` | Border / outline thickness | `var(--stroke-normal)` (2px) |
58
+ | `--card-radius` | Corner radius | `var(--radius-normal)` (16px) |
59
+ | `--card-padding` | Inner padding | `var(--space-normal)` (16px) |
60
+ | `--card-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
61
+ | `--card-shadow` | Drop shadow | `none` |
62
+ | `--card-transition` | Transition | `all var(--duration-fast)` (150ms) |
63
+ | `--card-focus-border` | Focus outline | `var(--stroke-focus) solid var(--color-focus)` |
64
+
65
+ **Global tokens it reads** — move these to retheme broadly rather than overriding ladder steps directly: the tint ladder [`--tint-00`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS) / [`--tint-95`](/ui/TINT_CLASS), plus [`--space-normal`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--radius-normal`](/ui/getRadiusClass), [`--stroke-normal`](/ui/getStrokeClass), [`--stroke-focus`](/ui/getStrokeClass), [`--color-focus`](/ui/getColorClass), and [`--duration-fast`](/ui/getDurationClass).
66
+
67
+ ```css
68
+ /* Theme: borderless cards with a soft shadow and tighter corners. */
69
+ :root {
70
+ --card-border: none;
71
+ --card-shadow: var(--shadow-small);
72
+ --card-radius: var(--radius-small);
73
+ }
74
+
75
+ /* Retint every card purple — surface, border, text and hover all follow. */
76
+ :root {
77
+ --card-tint: var(--color-purple);
78
+ }
79
+ ```
80
+
81
+ ## See also
82
+
83
+ - [`Panel`](/ui/Panel) — a card-like grouping for stacked sections rather than standalone content.
84
+ - [`Section`](/ui/Section) — a titled block; cards often hold one or more sections.
85
+ - [`ui`](/ui) — the styling system: tint ladder, cascade layers, and theming.
package/ui/block/Card.module.css CHANGED
@@ -1,4 +1,10 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Color.module.css";
3
+ @import "../style/Duration.module.css";
4
+ @import "../style/Radius.module.css";
5
+ @import "../style/Space.module.css";
6
+ @import "../style/Stroke.module.css";
7
+ @import "../style/Tint.module.css";
2
8
 
3
9
  @layer defaults {
4
10
  .card {
package/ui/block/Card.tsx CHANGED
@@ -29,6 +29,7 @@ export interface CardProps
29
29
  * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
30
30
  * - Accepts a `status` colour and raw `ColorProps` — the card styles the box; lay out its contents however the use case needs.
31
31
  *
32
+ * @kind component
32
33
  * @example <Card><Subheading>Static</Subheading></Card>
33
34
  * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
34
35
  * @example <Card status="error"><Subheading>Not found</Subheading></Card>
package/ui/block/Definitions.module.css CHANGED
@@ -1,4 +1,9 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Font.module.css";
3
+ @import "../style/Size.module.css";
4
+ @import "../style/Space.module.css";
5
+ @import "../style/Tint.module.css";
6
+ @import "../style/Weight.module.css";
2
7
 
3
8
  @layer components {
4
9
  .definitions,
package/ui/block/Divider.module.css CHANGED
@@ -1,4 +1,7 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Space.module.css";
3
+ @import "../style/Stroke.module.css";
4
+ @import "../style/Tint.module.css";
2
5
 
3
6
  @layer components {
4
7
  .divider,
package/ui/block/Heading.d.ts CHANGED
@@ -31,6 +31,7 @@ export interface HeadingProps extends ColorVariants, SpaceVariants, TypographyVa
31
31
  * Section heading — renders an `<h2>`.
32
32
  * - Sits between `Title` (`<h1>`) and `Subheading` (`<h3>`) in the heading hierarchy.
33
33
  *
34
+ * @kind component
34
35
  * @param props Colour, space, and typography variants plus an optional `level` override and `children`.
35
36
  * @returns Rendered `<h2>` heading element.
36
37
  * @example <Heading>Section title</Heading>
package/ui/block/Heading.js CHANGED
@@ -20,6 +20,7 @@ export const HEADING_PROSE_CLASS = getModuleClass(HEADING_CSS, "prose");
20
20
  * Section heading — renders an `<h2>`.
21
21
  * - Sits between `Title` (`<h1>`) and `Subheading` (`<h3>`) in the heading hierarchy.
22
22
  *
23
+ * @kind component
23
24
  * @param props Colour, space, and typography variants plus an optional `level` override and `children`.
24
25
  * @returns Rendered `<h2>` heading element.
25
26
  * @example <Heading>Section title</Heading>
package/ui/block/Heading.md ADDED
@@ -0,0 +1,70 @@
1
+ # Heading
2
+
3
+ A section heading — renders an `<h2>`. It sits in the middle of the three-level heading family: `Title` (`<h1>`), `Heading` (`<h2>`), `Subheading` (`<h3>`).
4
+
5
+ **Things to know:**
6
+
7
+ - Pick the component that matches the level rather than overriding `level`. Choosing `Title` / `Heading` / `Subheading` keeps the visual size and the document outline in step, which matters for accessibility and the docs-site table of contents.
8
+ - The `level` prop (`1`–`6`) is an escape hatch for the rare case where the outline level must differ from the visual size — avoid it in normal use.
9
+ - Inside `Prose`, an `<h2>` is styled by the same rules (`HEADING_PROSE_CLASS`), so Markdown-rendered headings match component ones.
10
+ - Accepts `color=` and the typography variants; like all block components it collapses its outer margin when it's the first/last child of its container.
11
+
12
+ ## Usage
13
+
14
+ ### Section heading
15
+
16
+ ```tsx
17
+ import { Heading, Paragraph } from "shelving/ui";
18
+
19
+ <Heading>Billing</Heading>
20
+ <Paragraph>Manage your plan and payment method.</Paragraph>
21
+ ```
22
+
23
+ ### The heading family together
24
+
25
+ ```tsx
26
+ import { Title, Heading, Subheading } from "shelving/ui";
27
+
28
+ <Title>Account</Title> {/* <h1> */}
29
+ <Heading>Security</Heading> {/* <h2> */}
30
+ <Subheading>Sessions</Subheading> {/* <h3> */}
31
+ ```
32
+
33
+ ### Coloured heading
34
+
35
+ ```tsx
36
+ import { Heading } from "shelving/ui";
37
+
38
+ <Heading color="red">Danger zone</Heading>
39
+ ```
40
+
41
+ ## Styling
42
+
43
+ `Heading` exposes hooks for its rhythm and type. It inherits text colour by default (so it picks up the surrounding tint); set `--heading-color` only to override that.
44
+
45
+ | Variable | Styles | Default |
46
+ |---|---|---|
47
+ | `--heading-tint` | Tint anchor for the heading scope | `inherit` (flows from `color=` / parent) |
48
+ | `--heading-color` | Text colour | `inherit` |
49
+ | `--heading-space-before` | Top margin | `var(--space-section)` (2rem) |
50
+ | `--heading-space` | Bottom margin | `var(--space-paragraph)` (16px) |
51
+ | `--heading-font` | Font family | `var(--font-title)` |
52
+ | `--heading-weight` | Font weight | `var(--weight-strong)` (700) |
53
+ | `--heading-size` | Font size | `var(--size-xxlarge)` |
54
+ | `--heading-leading` | Line height | `var(--leading)` |
55
+
56
+ **Global tokens it reads:** [`--space-section`](/ui/getSpaceClass), [`--space-paragraph`](/ui/getSpaceClass), [`--font-title`](/ui/getFontClass), [`--weight-strong`](/ui/getWeightClass), [`--size-xxlarge`](/ui/getSizeClass), and [`--leading`](/ui/getSizeClass). (`Title` and `Subheading` share this component and expose the parallel `--title-*` / `--subheading-*` hooks.)
57
+
58
+ ```css
59
+ /* Theme: serif headings, a touch larger. */
60
+ :root {
61
+ --heading-font: var(--font-serif);
62
+ --heading-size: var(--size-xxxlarge);
63
+ }
64
+ ```
65
+
66
+ ## See also
67
+
68
+ - [`Title`](/ui/Title) — the top-level page heading that pairs with `Heading`.
69
+ - [`Section`](/ui/Section) — wraps a heading and its content as a titled section.
70
+ - [`ui`](/ui) — the styling system: tint ladder, typography variants, and theming.
package/ui/block/Heading.module.css CHANGED
@@ -1,4 +1,8 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Font.module.css";
3
+ @import "../style/Size.module.css";
4
+ @import "../style/Space.module.css";
5
+ @import "../style/Weight.module.css";
2
6
 
3
7
  @layer components {
4
8
  .heading,
package/ui/block/Heading.tsx CHANGED
@@ -37,6 +37,7 @@ export interface HeadingProps extends ColorVariants, SpaceVariants, TypographyVa
37
37
  * Section heading — renders an `<h2>`.
38
38
  * - Sits between `Title` (`<h1>`) and `Subheading` (`<h3>`) in the heading hierarchy.
39
39
  *
40
+ * @kind component
40
41
  * @param props Colour, space, and typography variants plus an optional `level` override and `children`.
41
42
  * @returns Rendered `<h2>` heading element.
42
43
  * @example <Heading>Section title</Heading>
package/ui/block/Image.module.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Space.module.css";
2
3
 
3
4
  @layer components {
4
5
  .image,
package/ui/block/Label.module.css CHANGED
@@ -1,4 +1,9 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Font.module.css";
3
+ @import "../style/Size.module.css";
4
+ @import "../style/Space.module.css";
5
+ @import "../style/Tint.module.css";
6
+ @import "../style/Weight.module.css";
2
7
 
3
8
  @layer components {
4
9
  .label {
package/ui/block/List.d.ts CHANGED
@@ -34,6 +34,7 @@ export interface ListProps extends ColorVariants, GapVariants, SpaceVariants, Ty
34
34
  * List block — wraps each child in an `<li>` and renders an `<ul>` or `<ol>`.
35
35
  * - Pass `ordered` to render an ordered `<ol>` instead of the default unordered `<ul>`.
36
36
  *
37
+ * @kind component
37
38
  * @param props Colour, gap, space, and typography variants plus the `children` items and `ordered` toggle.
38
39
  * @returns Rendered `<ul>` or `<ol>` list element.
39
40
  * @example <List>{["One", "Two", "Three"]}</List>
package/ui/block/List.js CHANGED
@@ -27,6 +27,7 @@ export const LIST_PROSE_CLASS = getModuleClass(LIST_CSS, "prose");
27
27
  * List block — wraps each child in an `<li>` and renders an `<ul>` or `<ol>`.
28
28
  * - Pass `ordered` to render an ordered `<ol>` instead of the default unordered `<ul>`.
29
29
  *
30
+ * @kind component
30
31
  * @param props Colour, gap, space, and typography variants plus the `children` items and `ordered` toggle.
31
32
  * @returns Rendered `<ul>` or `<ol>` list element.
32
33
  * @example <List>{["One", "Two", "Three"]}</List>
package/ui/block/List.md ADDED
@@ -0,0 +1,51 @@
1
+ # List
2
+
3
+ A bulleted or numbered list. Renders a `<ul>` by default (or an `<ol>` when `ordered` is set) and wraps each child in its own `<li>`, so you pass the items as children rather than writing the `<li>` markup yourself.
4
+
5
+ **Things to know:**
6
+
7
+ - Pass `ordered` to render an `<ol>` with numbered markers; the default is an unordered `<ul>`.
8
+ - Each child becomes one list item — give it plain content, not an `<li>`.
9
+ - Items are laid out as a flex column; tune the spacing between them with the `gap` variant (`<List gap="small">`).
10
+ - Like the other block components it carries its own outer block margin and collapses it when it is the first or last child of its container.
11
+ - Inside [`Prose`](/ui/Prose) a raw `<ul>` / `<ol>` picks up the same styling, so Markdown-rendered lists match component ones.
12
+
13
+ ## Usage
14
+
15
+ ### Unordered and ordered lists
16
+
17
+ ```tsx
18
+ import { List } from "shelving/ui";
19
+
20
+ <List>{["Apples", "Oranges", "Pears"]}</List>
21
+ <List ordered>{["First", "Second", "Third"]}</List>
22
+ ```
23
+
24
+ ### Tighter spacing
25
+
26
+ ```tsx
27
+ import { List } from "shelving/ui";
28
+
29
+ <List gap="small">{items.map(item => item.label)}</List>
30
+ ```
31
+
32
+ ## Styling
33
+
34
+ `List` paints from the [tint ladder](/ui/TINT_CLASS) for its markers only; rebind `--list-tint` to recolour the scope, or reach for a per-property hook for a single change.
35
+
36
+ | Variable | Styles | Default |
37
+ |---|---|---|
38
+ | `--list-tint` | Tint anchor for the list scope | `inherit` (flows from `color=` / parent) |
39
+ | `--list-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
40
+ | `--list-gap` | Space between items | `var(--space-xsmall)` |
41
+ | `--list-indent` | Inline start padding (marker gutter) | `1.125em` unordered / `1.8em` ordered |
42
+ | `--list-marker-color` | Bullet / number colour | `var(--tint-80)` |
43
+
44
+ **Global tokens it reads:** [`--space-paragraph`](/ui/getSpaceClass), [`--space-xsmall`](/ui/getSpaceClass), and the tint-ladder step [`--tint-80`](/ui/TINT_CLASS). The `gap` variant comes from the shared [`ui`](/ui) styling system.
45
+
46
+ ## See also
47
+
48
+ - [`Definitions`](/ui/Definitions) — term/value pairs in a styled `<dl>` when a key/value list is needed.
49
+ - [`Paragraph`](/ui/Paragraph) — body text that sits alongside lists.
50
+ - [`Prose`](/ui/Prose) — styles raw `<ul>` / `<ol>` inside longform content.
51
+ - [`ui`](/ui) — the styling system: gap and tint variants, and theming.
package/ui/block/List.module.css CHANGED
@@ -1,4 +1,5 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Space.module.css";
2
3
  @import "../style/Tint.module.css";
3
4
 
4
5
  @layer components {
package/ui/block/List.tsx CHANGED
@@ -41,6 +41,7 @@ export interface ListProps extends ColorVariants, GapVariants, SpaceVariants, Ty
41
41
  * List block — wraps each child in an `<li>` and renders an `<ul>` or `<ol>`.
42
42
  * - Pass `ordered` to render an ordered `<ol>` instead of the default unordered `<ul>`.
43
43
  *
44
+ * @kind component
44
45
  * @param props Colour, gap, space, and typography variants plus the `children` items and `ordered` toggle.
45
46
  * @returns Rendered `<ul>` or `<ol>` list element.
46
47
  * @example <List>{["One", "Two", "Three"]}</List>
package/ui/block/Panel.d.ts CHANGED
@@ -23,6 +23,7 @@ export interface PanelProps extends ColorVariants, StatusVariants, TypographyVar
23
23
  *
24
24
  * Renders as a `<section>` by default; pass `as="header"` etc. for other semantic elements.
25
25
  *
26
+ * @kind component
26
27
  * @param props Colour, status, and typography variants plus `children`.
27
28
  * @returns Rendered full-width panel region.
28
29
  * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
package/ui/block/Panel.js CHANGED
@@ -12,6 +12,7 @@ const PANEL_CLASS = getModuleClass(PANEL_CSS, "panel");
12
12
  *
13
13
  * Renders as a `<section>` by default; pass `as="header"` etc. for other semantic elements.
14
14
  *
15
+ * @kind component
15
16
  * @param props Colour, status, and typography variants plus `children`.
16
17
  * @returns Rendered full-width panel region.
17
18
  * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
package/ui/block/Panel.md ADDED
@@ -0,0 +1,50 @@
1
+ # Panel
2
+
3
+ A full-width vertical region that paints the current surface colour. Use panels to break a page into stacked bands: each one butts against its neighbours (zero block margin) but carries generous vertical padding, so a page becomes a sequence of coloured sections.
4
+
5
+ **Things to know:**
6
+
7
+ - A panel always spans the full width of its container. To constrain the content inside, compose a [`Block`](/ui/Block) `narrow` (or `wide`) within it.
8
+ - Block margin is always zero so panels stack flush; control the vertical breathing room with the `padding` variant (`<Panel padding="large">`, `<Panel padding="none">`). Inline padding is fixed.
9
+ - `color=` / `status=` move the tint anchor for the whole panel scope, so the surface, border, and text re-derive together and cascade into nested content.
10
+ - The top and bottom borders are dropped on the first and last panel so the page doesn't gain stray edge lines.
11
+
12
+ ## Usage
13
+
14
+ ### Page banded into panels
15
+
16
+ ```tsx
17
+ import { Panel, Block, Title, Paragraph } from "shelving/ui";
18
+
19
+ <Panel as="header" color="primary">
20
+ <Block narrow>
21
+ <Title>Welcome</Title>
22
+ </Block>
23
+ </Panel>
24
+ <Panel padding="large">
25
+ <Block narrow>
26
+ <Paragraph>Each panel is a full-width band; the inner block constrains the content.</Paragraph>
27
+ </Block>
28
+ </Panel>
29
+ ```
30
+
31
+ ## Styling
32
+
33
+ `Panel` paints from the [tint ladder](/ui/TINT_CLASS); rebind `--panel-tint` to recolour the whole scope at once, or reach for a per-property hook for a single change.
34
+
35
+ | Variable | Styles | Default |
36
+ |---|---|---|
37
+ | `--panel-tint` | Tint anchor for the panel scope — recolours surface, border, and text together | `inherit` (flows from `color=` / `status=` / parent) |
38
+ | `--panel-background` | Surface fill | `var(--tint-90)` |
39
+ | `--panel-color` | Text colour | `var(--tint-00)` |
40
+ | `--panel-border` | Top/bottom border shorthand | `var(--panel-stroke) solid var(--tint-80)` |
41
+ | `--panel-stroke` | Border thickness | `var(--stroke-normal)` (2px) |
42
+
43
+ **Global tokens it reads:** the tint-ladder steps [`--tint-00`](/ui/TINT_CLASS) / [`--tint-80`](/ui/TINT_CLASS) / [`--tint-90`](/ui/TINT_CLASS), plus [`--stroke-normal`](/ui/getStrokeClass). Vertical padding comes from the shared `padding` variant.
44
+
45
+ ## See also
46
+
47
+ - [`Card`](/ui/Card) — a boxed surface for standalone content rather than a full-width band.
48
+ - [`Block`](/ui/Block) — the inner width-constraining wrapper for panel content.
49
+ - [`Section`](/ui/Section) — a landmark region that sits inside a panel's inner block.
50
+ - [`ui`](/ui) — the styling system: tint ladder, padding variants, and theming.
package/ui/block/Panel.module.css CHANGED
@@ -1,4 +1,6 @@
1
- @import "../style/base.css";
1
+ @import "../style/layers.css";
2
+ @import "../style/Stroke.module.css";
3
+ @import "../style/Tint.module.css";
2
4
 
3
5
  /*
4
6
  * Full-width vertical region that paints the current surface. Panels always have zero block-space
package/ui/block/Panel.tsx CHANGED
@@ -29,6 +29,7 @@ export interface PanelProps extends ColorVariants, StatusVariants, TypographyVar
29
29
  *
30
30
  * Renders as a `<section>` by default; pass `as="header"` etc. for other semantic elements.
31
31
  *
32
+ * @kind component
32
33
  * @param props Colour, status, and typography variants plus `children`.
33
34
  * @returns Rendered full-width panel region.
34
35
  * @example <Panel><Block narrow><Title>Welcome</Title></Block></Panel>
package/ui/block/Paragraph.d.ts CHANGED
@@ -25,6 +25,7 @@ export interface ParagraphProps extends ColorVariants, SpaceVariants, Typography
25
25
  /**
26
26
  * Paragraph block of body text — rendered as `<p>`.
27
27
  *
28
+ * @kind component
28
29
  * @param props Colour, space, and typography variants plus `children`.
29
30
  * @returns Rendered `<p>` paragraph element.
30
31
  * @example <Paragraph>Hello world.</Paragraph>
package/ui/block/Paragraph.js CHANGED
@@ -19,6 +19,7 @@ export const PARAGRAPH_PROSE_CLASS = getModuleClass(PARAGRAPH_CSS, "prose");
19
19
  /**
20
20
  * Paragraph block of body text — rendered as `<p>`.
21
21
  *
22
+ * @kind component
22
23
  * @param props Colour, space, and typography variants plus `children`.
23
24
  * @returns Rendered `<p>` paragraph element.
24
25
  * @example <Paragraph>Hello world.</Paragraph>