@cube-dev/ui-kit 0.209.0 → 0.210.0

package/docs/components/content/Layout.md

@@ -110,6 +110,7 @@ A semantic page header with title, breadcrumbs, subtitle, and action areas.
 
 - **`title`** `ReactNode` — Page/section title. A string title that runs out of room is truncated and shown in full in a tooltip; when the title and `extra` both overflow, they share the shortfall
 - **`level`** `1-6` (default: `3`) — Heading level for accessibility
+- **`titlePreset`** `h1-h6` (default: the preset of `level`) — The title's typography preset, apart from its level: `level={1} titlePreset="h3"` gives an `h1` in the document outline that looks like an `h3`
 - **`breadcrumbs`** `[label, href][]` — Navigation breadcrumbs
 - **`subtitle`** `ReactNode` — Text below the title
 - **`suffix`** `ReactNode` — Content next to the title
@@ -451,6 +452,14 @@ A variant of Layout that enables CSS Grid for the content area.
 </Layout>
 ```
 
+### Page Title Sized Apart From Its Level
+
+A page keeps one `h1`, but in an app's chrome it often looks like an `h3`. `titlePreset` sets the title's look; `level` still sets its heading element.
+
+```jsx
+<Layout.Header title="Page title" level={1} titlePreset="h3" />
+```
+
 ### With Back Button
 
 ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.209.0",
+  "version": "0.210.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/tasty.config.ts

@@ -67,6 +67,49 @@ export const componentTokens = [
   '$overlay-inset-top',
 ];
 
+/**
+ * The style props a container keeps: those that place or size it, and those
+ * that lay out the content the consumer puts in it, including `textAlign` and
+ * the `container` that its container queries read. `Layout` and `GridLayout`
+ * cover their sub-components, such as `Layout.Content`, whose `scrollbar` is
+ * their own prop; `ResizablePanel`'s `direction` is the side it resizes from.
+ * `display` picks the layout: a block `Card` needs `flex` or `grid` before
+ * `flow`, `grid*` or `place*` do anything.
+ */
+const containerStyleProps = [
+  'position',
+  'dimension',
+  'display',
+  'flow',
+  'gap',
+  'columnGap',
+  'rowGap',
+  'place',
+  'placeItems',
+  'placeContent',
+  'align',
+  'alignItems',
+  'alignContent',
+  'justify',
+  'justifyItems',
+  'justifyContent',
+  'gridColumns',
+  'gridRows',
+  'gridTemplate',
+  'gridAreas',
+  'gridAutoFlow',
+  'gridAutoColumns',
+  'gridAutoRows',
+  'padding',
+  'blockPadding',
+  'inlinePadding',
+  'overflow',
+  'scrollbar',
+  'textAlign',
+  'container',
+  'direction',
+];
+
 export default {
   extends: '@tenphi/tasty',
 
@@ -152,17 +195,47 @@ export default {
       include: ['GridProvider'],
       allowedStyleProps: ['position', 'dimension', 'gap'],
     },
-    // Containers. `Layout` and `GridLayout` cover their sub-components, such
-    // as `Layout.Content`, whose `scrollbar` is their own prop;
-    // `ResizablePanel`'s `direction` is the side it resizes from. `Alert`,
-    // `Result` and `Skeleton` hold content the consumer supplies, so how that
-    // content is spaced is the consumer's call. `display` picks the layout:
-    // a block `Card` needs `flex` or `grid` before `flow`, `grid*` or `place*`
-    // do anything.
+    // Containers that draw a surface of their own: a fill, a border, a
+    // radius or a theme. `Alert`, `Result` and `Skeleton` hold content the
+    // consumer supplies, so how that content is spaced is the consumer's
+    // call. A member path decides before the export it hangs off, so
+    // `Layout.Panel` and `Layout.PanelHeader` are listed before `Layout`.
     {
       source: '@cube-dev/ui-kit',
       include: [
         'Card',
+        'Layout.Panel',
+        'Layout.PanelHeader',
+        'Alert',
+        'Result',
+        'Skeleton',
+      ],
+      allowedStyleProps: containerStyleProps,
+    },
+    // Layout's sections draw no fill, so the backdrop is the consumer's; their
+    // border is UI Kit's, which separates stacked sections or underlines a
+    // header, so it stays protected.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'Layout.Content',
+        'Layout.Header',
+        'Layout.Footer',
+        'Layout.Toolbar',
+        'Layout.Block',
+        'Layout.Flex',
+        'Layout.Grid',
+        'Layout.Center',
+        'Layout.Container',
+      ],
+      allowedStyleProps: [...containerStyleProps, 'fill'],
+    },
+    // Frames that draw neither a fill nor a border, such as a page `Layout`
+    // or a plain `Panel`: there is no surface to protect, so a fill or a
+    // border on one is the consumer's, as on a `Block`.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
         'Panel',
         'ResizablePanel',
         'Content',
@@ -170,41 +243,8 @@ export default {
         'Footer',
         'Layout',
         'GridLayout',
-        'Alert',
-        'Result',
-        'Skeleton',
-      ],
-      allowedStyleProps: [
-        'position',
-        'dimension',
-        'display',
-        'flow',
-        'gap',
-        'columnGap',
-        'rowGap',
-        'place',
-        'placeItems',
-        'placeContent',
-        'align',
-        'alignItems',
-        'alignContent',
-        'justify',
-        'justifyItems',
-        'justifyContent',
-        'gridColumns',
-        'gridRows',
-        'gridTemplate',
-        'gridAreas',
-        'gridAutoFlow',
-        'gridAutoColumns',
-        'gridAutoRows',
-        'padding',
-        'blockPadding',
-        'inlinePadding',
-        'overflow',
-        'scrollbar',
-        'direction',
       ],
+      allowedStyleProps: [...containerStyleProps, 'fill', 'border'],
     },
     // A placeholder stands in for content of any shape, so `radius` is its
     // shape, like `dimension`.