@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/layouts/form_field/README_CN.md

@@ -1,5 +1,7 @@
 # FormField 表单字段组件
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `layout` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 表单字段 wrapper：在单个子控件旁边（或上方）放一个标签，支持必填标记、后缀、对齐方式、自动高度等。是 [CriteriaField](../criteria_field/README_CN.md) 的增强版 —— 同时支持纵向 / 横向布局，从 context 继承布局，专为编辑表单设计（不只是筛选行）。
 
 ## 功能特性
@@ -49,15 +51,15 @@ import FormField from '@ticatec/uniface-element/FormField';
 | `label$alignment` | `'center' \| 'top'` | `'center'` | **仅横向布局下**的标签垂直对齐。`top` 让标签对齐字段第一行（textarea 适用）。纵向模式下被忽略 |
 | `label$style` | `string \| undefined` | `undefined` | 标签 `<div>` 的内联 CSS |
 | `autoHeight` | `boolean` | `false` | 外层 wrapper 和内容区变 `height: 100%`。纵向布局下字段 flex 撑满高度 |
-| `layout` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | 布局模式。默认从 context 读，fallback `'vertical'` |
+| `direction` | `'vertical' \| 'horizontal'` | `getLayoutMode()` | 布局模式。默认从 context 读，fallback `'vertical'` |
 | `style` | `string` | `''` | 外层 wrapper 的内联 CSS |
-| `class` | `string` | `''` | 追加到外层 wrapper 的额外 CSS 类（除 `uniface-form-field {layout}` 之外） |
+| `class` | `string` | `''` | 追加到外层 wrapper 的额外 CSS 类（除 `uniface-form-field {direction}` 之外） |
 | `theme` | `string \| undefined` | `undefined` | 设为外层 wrapper 的 `data-theme` |
 | `children` | `Snippet \| undefined` | `undefined` | 实际的表单控件 |
 
 ## 布局
 
-由 `layout`（或 context）控制。两种模式：
+由 `direction`（或 context）控制。两种模式：
 
 ### Vertical（默认）
 
@@ -106,7 +108,7 @@ import FormField from '@ticatec/uniface-element/FormField';
 ### 顶部对齐标签（适用于 textarea）
 
 ```svelte
-<FormField label="描述" label$alignment="top" layout="horizontal">
+<FormField label="描述" label$alignment="top" direction="horizontal">
   <MemoEditor placeholder="输入描述..." rows={6} />
 </FormField>
 ```
@@ -128,7 +130,7 @@ import FormField from '@ticatec/uniface-element/FormField';
 
 ```svelte
 <div style="height: 320px;">
-  <FormField label="备注" autoHeight layout="vertical">
+  <FormField label="备注" autoHeight direction="vertical">
     <MemoEditor placeholder="输入备注..." />
   </FormField>
 </div>
@@ -139,7 +141,7 @@ MemoEditor 会填满 320px 容器。
 ### 强制横向布局（忽略 context）
 
 ```svelte
-<FormField label="代码" layout="horizontal" labelSuffix="">
+<FormField label="代码" direction="horizontal" labelSuffix="">
   <TextEditor bind:value={code} />
 </FormField>
 ```
@@ -224,7 +226,7 @@ MemoEditor 会填满 320px 容器。
 - **标签没有通过 `<label for="...">` 与字段关联**。同 CriteriaField 的 a11y 警告 —— 见下
 - **`labelSuffix` 直接粘在标签后**，渲染在同一个 `<span>` 里 —— 没有分隔空格
 - **必填 `*` 渲染在标签之前**，不是之后。所以 `required` + `label="姓名"` + `labelSuffix="："` 渲染成 `*姓名：`
-- **layout 默认从 context 读。** 祖先可以调 `setLayoutMode('horizontal')` 翻转整个表单。`layout` prop 单字段覆盖
+- **layout 默认从 context 读。** 祖先可以调 `setLayoutMode('horizontal')` 翻转整个表单。`direction` prop 单字段覆盖
 - **标签不可选中**（`user-select: none`）—— 跟 CriteriaField 不同（那里的标签是可选中的）
 - **长标签**：纵向模式用 `…` 截断；横向模式正常换行（`white-space: normal`），开了 `autoHeight` 后变成 `white-space: wrap`
 

package/dist/layouts/form_panel/flex_row_form/Cell.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+    import type {EditorVariant} from "../../../form/types";
     import type {Snippet} from 'svelte';
 
     interface Props {
         style?: string;
         span?: number;
-        variant?: string;
+        /** 传给内部编辑器的外观变体 */
+        variant?: EditorVariant;
         theme?: string;
         children?: Snippet<[string | undefined, string | undefined]>;
     }

package/dist/layouts/form_panel/flex_row_form/Cell.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { EditorVariant } from "../../../form/types";
 import type { Snippet } from 'svelte';
 interface Props {
     style?: string;
     span?: number;
-    variant?: string;
+    /** 传给内部编辑器的外观变体 */
+    variant?: EditorVariant;
     theme?: string;
     children?: Snippet<[string | undefined, string | undefined]>;
 }

package/dist/layouts/form_panel/flex_row_form/Row.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+    import type {EditorVariant} from "../../../form/types";
     import type {Snippet} from 'svelte';
 
     interface Props {
         theme?: string;
-        variant?: string;
+        /** 传给内部编辑器的外观变体 */
+        variant?: EditorVariant;
         style?: string;
         children?: Snippet<[string | undefined, string | undefined]>;
     }

package/dist/layouts/form_panel/flex_row_form/Row.svelte.d.ts

@@ -1,7 +1,9 @@
+import type { EditorVariant } from "../../../form/types";
 import type { Snippet } from 'svelte';
 interface Props {
     theme?: string;
-    variant?: string;
+    /** 传给内部编辑器的外观变体 */
+    variant?: EditorVariant;
     style?: string;
     children?: Snippet<[string | undefined, string | undefined]>;
 }

package/dist/layouts/form_panel/grid_form/GridField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type {EditorVariant} from "../../../form/types";
+    import type {Direction} from "../../../types";
     import type {Snippet} from 'svelte';
     import FormField from "../../form_field";
 
@@ -6,13 +8,15 @@
         label?: string;
         label$style?: string;
         required?: boolean;
-        arrangement?: 'vertical' | 'horizontal';
+        /** 标签与控件的排布方向 */
+        direction?: Direction;
         rowSpan?: number;
         colSpan?: number;
         row?: number | null;
         col?: number | null;
         labelSuffix?: string;
-        variant?: string;
+        /** 传给内部编辑器的外观变体 */
+        variant?: EditorVariant;
         theme?: string;
         children?: Snippet<[string | undefined, string | undefined]>;
     }
@@ -21,7 +25,7 @@
         label = "Label:",
         label$style = '',
         required = false,
-        arrangement = 'vertical',
+        direction = 'vertical',
         rowSpan = 1,
         colSpan = 1,
         row = null,
@@ -37,7 +41,7 @@
     );
 </script>
 
-<FormField class="form-cell {arrangement} {theme}" {label$style} {labelSuffix} {style} {label} {required}>
+<FormField class="form-cell {direction} {theme}" {label$style} {labelSuffix} {style} {label} {required}>
     {#if children}
         {@render children(theme, variant)}
     {/if}

package/dist/layouts/form_panel/grid_form/GridField.svelte.d.ts

@@ -1,15 +1,19 @@
+import type { EditorVariant } from "../../../form/types";
+import type { Direction } from "../../../types";
 import type { Snippet } from 'svelte';
 interface Props {
     label?: string;
     label$style?: string;
     required?: boolean;
-    arrangement?: 'vertical' | 'horizontal';
+    /** 标签与控件的排布方向 */
+    direction?: Direction;
     rowSpan?: number;
     colSpan?: number;
     row?: number | null;
     col?: number | null;
     labelSuffix?: string;
-    variant?: string;
+    /** 传给内部编辑器的外观变体 */
+    variant?: EditorVariant;
     theme?: string;
     children?: Snippet<[string | undefined, string | undefined]>;
 }

package/dist/layouts/form_panel/grid_form/GridForm.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+    import type {EditorVariant} from "../../../form/types";
     import type {Snippet} from 'svelte';
 
     interface Props {
         style?: string;
         columns?: number;
-        variant?: string;
+        /** 传给内部编辑器的外观变体 */
+        variant?: EditorVariant;
         theme?: string;
         children?: Snippet<[string | undefined, string | undefined]>;
     }

package/dist/layouts/form_panel/grid_form/GridForm.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { EditorVariant } from "../../../form/types";
 import type { Snippet } from 'svelte';
 interface Props {
     style?: string;
     columns?: number;
-    variant?: string;
+    /** 传给内部编辑器的外观变体 */
+    variant?: EditorVariant;
     theme?: string;
     children?: Snippet<[string | undefined, string | undefined]>;
 }

package/dist/layouts/form_panel/grid_form/README.md

@@ -1,5 +1,7 @@
 # GridForm
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../../docs/NAMING.md); the old names `arrangement` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A CSS-Grid-based form layout. Configure the column count on the form, then place each `GridField` with `colSpan` / `rowSpan` (or absolute `col` / `row` coordinates). The most expressive of the three form layouts — supports fields spanning multiple rows/columns, with placement that doesn't shift when content size changes.
 
 ## Components
@@ -71,7 +73,7 @@ const gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`;
 
 So `columns={6}` → `grid-template-columns: repeat(6, 1fr)`. Each `GridField` with `colSpan={2}` takes 2 of those 6 tracks.
 
-> **For per-field horizontal layout**, set `arrangement="horizontal"` on each `GridField`. There's no form-level toggle.
+> **For per-field horizontal layout**, set `direction="horizontal"` on each `GridField`. There's no form-level toggle.
 
 ### `GridField`
 
@@ -83,7 +85,7 @@ A grid cell wrapping [FormField](../../form_field/README.md), with full CSS-Grid
 | `labelSuffix` | `string` | `':'` | Suffix appended to label |
 | `label$style` | `string` | `''` | Inline CSS on the label |
 | `required` | `boolean` | `false` | Show red `*` before the label |
-| `arrangement` | `'vertical' \| 'horizontal'` | `'vertical'` | Sets the FormField's `class` to include this value. **Note: this is a class name, not the FormField's `layout` prop.** FormField's actual `layout` still defaults to `getLayoutMode()` from context. |
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Sets the FormField's `class` to include this value. **Note: this is a class name, not the FormField's `layout` prop.** FormField's actual `layout` still defaults to `getLayoutMode()` from context. |
 | `colSpan` | `number` | `1` | Number of columns to span (`grid-column-end: span N`) |
 | `rowSpan` | `number` | `1` | Number of rows to span (`grid-row-end: span N`) |
 | `col` | `number \| null` | `null` | Explicit column start (1-based). `grid-column-start: N` |
@@ -194,7 +196,7 @@ A field that spans multiple rows — useful for textareas next to shorter fields
 - **`colSpan` / `rowSpan` only emit CSS when > 1.** `colSpan={1}` produces no inline style (uses the default 1-track placement).
 - **`col` / `row` are 1-based** (CSS Grid convention).
 - **`theme` and `variant` on GridForm are CSS classes + snippet args** — `theme` is **not** `data-theme` here, unlike most components.
-- **`arrangement` prop is a class name**, not the FormField's `layout` prop. Confusing but that's how it's wired. If you need actual horizontal layout inside a field, the FormField inside still inherits from context.
+- **`direction` prop is a class name**, not the FormField's `layout` prop. Confusing but that's how it's wired. If you need actual horizontal layout inside a field, the FormField inside still inherits from context.
 
 ## Accessibility
 
@@ -206,7 +208,7 @@ Inherits FormField a11y limitations (label not associated via `<label for>`). Se
 2. **Use auto-placement (colSpan only) for most fields.** Reserve explicit `col` / `row` for fields that need to lock position regardless of order.
 3. **Pair `rowSpan` with tall controls** (MemoEditor, code editor) to use vertical space efficiently.
 4. **Use `EmptyCell` for intentional gaps**, not for alignment tricks — explicit `col` is more robust.
-5. **For per-field horizontal layout**, set `arrangement="horizontal"` on each `GridField`.
+5. **For per-field horizontal layout**, set `direction="horizontal"` on each `GridField`.
 
 ## Related Components
 

package/dist/layouts/form_panel/grid_form/README_CN.md

@@ -1,5 +1,7 @@
 # GridForm
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../../docs/NAMING_CN.md) 中的名字；旧名 `arrangement` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 基于 CSS Grid 的表单布局。在表单上配置列数，然后用 `colSpan` / `rowSpan`（或绝对 `col` / `row` 坐标）放置每个 `GridField`。三个表单布局里表达力最强的一个 —— 支持跨多行多列的字段，放置位置不会随内容尺寸漂移。
 
 ## 组件
@@ -71,7 +73,7 @@ const gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`;
 
 所以 `columns={6}` → `grid-template-columns: repeat(6, 1fr)`。每个 `colSpan={2}` 的 `GridField` 占 6 条轨道中的 2 条。
 
-> **要字段内部横向布局**，在每个 `GridField` 上设 `arrangement="horizontal"`。没有表单级的开关。
+> **要字段内部横向布局**，在每个 `GridField` 上设 `direction="horizontal"`。没有表单级的开关。
 
 ### `GridField`
 
@@ -83,7 +85,7 @@ const gridStyle = `grid-template-columns: repeat(${columns}, 1fr)`;
 | `labelSuffix` | `string` | `':'` | 标签后缀 |
 | `label$style` | `string` | `''` | 标签的内联 CSS |
 | `required` | `boolean` | `false` | 标签前显示红色 `*` |
-| `arrangement` | `'vertical' \| 'horizontal'` | `'vertical'` | 把这个值加进 FormField 的 `class`。**注意：是类名，不是 FormField 的 `layout` prop。** FormField 的实际 `layout` 仍然从 context 的 `getLayoutMode()` 默认 |
+| `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | 把这个值加进 FormField 的 `class`。**注意：是类名，不是 FormField 的 `layout` prop。** FormField 的实际 `layout` 仍然从 context 的 `getLayoutMode()` 默认 |
 | `colSpan` | `number` | `1` | 跨多少列（`grid-column-end: span N`） |
 | `rowSpan` | `number` | `1` | 跨多少行（`grid-row-end: span N`） |
 | `col` | `number \| null` | `null` | 显式列起点（1 起算）。`grid-column-start: N` |
@@ -194,7 +196,7 @@ if (col != null) s += `grid-column-start: ${col};`;
 - **`colSpan` / `rowSpan` 只有 > 1 才输出 CSS。** `colSpan={1}` 不产生内联样式（用默认的 1 轨道放置）
 - **`col` / `row` 是 1 起算**（CSS Grid 约定）
 - **GridForm 的 `theme` 和 `variant` 是 CSS 类 + snippet 参数** —— 这里 `theme` **不是** `data-theme`，跟大多数组件不同
-- **`arrangement` prop 是类名**，不是 FormField 的 `layout` prop。绕，但代码就是这么接的。需要字段内部真横向布局的话，里面的 FormField 仍然从 context 继承
+- **`direction` prop 是类名**，不是 FormField 的 `layout` prop。绕，但代码就是这么接的。需要字段内部真横向布局的话，里面的 FormField 仍然从 context 继承
 
 ## 无障碍访问
 
@@ -206,7 +208,7 @@ if (col != null) s += `grid-column-start: ${col};`;
 2. **大多数字段用自动放置（仅 colSpan）。** 把显式 `col` / `row` 留给位置不能依赖顺序的字段
 3. **`rowSpan` 配合高控件**（MemoEditor、代码编辑器），高效利用纵向空间
 4. **`EmptyCell` 用于有意的空隙**，不要用于对齐戏法 —— 显式 `col` 更可靠
-5. **要字段内部横向布局**，在每个 `GridField` 上设 `arrangement="horizontal"`
+5. **要字段内部横向布局**，在每个 `GridField` 上设 `direction="horizontal"`
 
 ## 相关组件
 

package/dist/layouts/page/Page.svelte

@@ -13,8 +13,8 @@
         reload?: PageAction;
         style?: string;
         theme?: string;
-        pageHeader?: Snippet<[string, string?, PageAction?, PageAction?]>;
-        headerExt?: Snippet;
+        header?: Snippet<[string, string?, PageAction?, PageAction?]>;
+        headerExtra?: Snippet;
         children?: Snippet;
     }
 
@@ -28,8 +28,8 @@
         reload,
         style = '',
         theme,
-        pageHeader,
-        headerExt,
+        header,
+        headerExtra,
         children
     }: Props = $props();
 </script>
@@ -37,10 +37,10 @@
 <div class="uniface-page-wrapper" {style} data-theme={theme}>
     <div class="uniface-page" class:round class:shadow>
         <div class="uniface-page-header">
-            {#if pageHeader}
-                {@render pageHeader(title, comment, goBack, reload)}
+            {#if header}
+                {@render header(title, comment, goBack, reload)}
             {:else}
-                <PageHeader {title} {comment} {goBack} {reload} {headerExt} />
+                <PageHeader {title} {comment} {goBack} {reload} {headerExtra} />
             {/if}
         </div>
         <div class="page-container" style={content$style}>

package/dist/layouts/page/Page.svelte.d.ts

@@ -10,8 +10,8 @@ interface Props {
     reload?: PageAction;
     style?: string;
     theme?: string;
-    pageHeader?: Snippet<[string, string?, PageAction?, PageAction?]>;
-    headerExt?: Snippet;
+    header?: Snippet<[string, string?, PageAction?, PageAction?]>;
+    headerExtra?: Snippet;
     children?: Snippet;
 }
 declare const Page: import("svelte").Component<Props, {}, "">;

package/dist/layouts/page/PageHeader.svelte

@@ -8,7 +8,7 @@
         comment?: string;
         goBack?: PageAction;
         reload?: PageAction;
-        headerExt?: Snippet;
+        headerExtra?: Snippet;
     }
 
     let {
@@ -16,7 +16,7 @@
         comment,
         goBack,
         reload,
-        headerExt
+        headerExtra
     }: Props = $props();
 </script>
 
@@ -37,8 +37,8 @@
         <span>{comment}</span>
     {/if}
 </div>
-{#if headerExt}
-    {@render headerExt()}
+{#if headerExtra}
+    {@render headerExtra()}
 {/if}
 
 <style>

package/dist/layouts/page/PageHeader.svelte.d.ts

@@ -5,7 +5,7 @@ interface Props {
     comment?: string;
     goBack?: PageAction;
     reload?: PageAction;
-    headerExt?: Snippet;
+    headerExtra?: Snippet;
 }
 declare const PageHeader: import("svelte").Component<Props, {}, "">;
 type PageHeader = ReturnType<typeof PageHeader>;

package/dist/layouts/page/README.md

@@ -7,7 +7,7 @@ A full-page container with a fixed-height header (title + comment + optional bac
 - **Fixed 48px header**: title, optional comment (subtitle, truncated), optional back OR reload icon
 - **Flexible content area**: takes remaining height, clips overflow
 - **Optional rounded corners and shadow** (`round` / `shadow`, both on by default)
-- **Three header customization hooks**: text props (`title` / `comment`), `headerExt` snippet for extra header content, full `pageHeader` snippet for complete replacement
+- **Three header customization hooks**: text props (`title` / `comment`), `headerExtra` snippet for extra header content, full `header` snippet for complete replacement
 - **Async-aware navigation actions**: `goBack` / `reload` are `() => any` (may be async) — forwarded to the Icon's debounced click handler
 - **Theme hook**: `data-theme="{theme}"` on the outer wrapper
 
@@ -23,7 +23,7 @@ npm install @ticatec/uniface-element
 import Page, { PageHeader, type PageAction } from '@ticatec/uniface-element/Page';
 ```
 
-`PageHeader` is exported as a named export in case you want to use it standalone (the `pageHeader` snippet opt-out is usually enough).
+`PageHeader` is exported as a named export in case you want to use it standalone (the `header` snippet opt-out is usually enough).
 
 ## Basic Usage
 
@@ -52,8 +52,8 @@ Renders a rounded, shadowed card with a 48px header ("My Page" + "Page descripti
 | `content$style` | `string` | `''` | Inline CSS on the content area (e.g. `padding: 16px;`) |
 | `style` | `string` | `''` | Inline CSS on the outer wrapper |
 | `theme` | `string \| undefined` | `undefined` | Set as `data-theme` on the outer wrapper |
-| `pageHeader` | `Snippet<[string, string?, PageAction?, PageAction?]> \| undefined` | `undefined` | **Replaces** the default PageHeader. Snippet args: `(title, comment, goBack, reload)`. |
-| `headerExt` | `Snippet \| undefined` | `undefined` | Extra content rendered at the right of the default PageHeader. Ignored if `pageHeader` snippet is set (you handle layout yourself then). |
+| `header` | `Snippet<[string, string?, PageAction?, PageAction?]> \| undefined` | `undefined` | **Replaces** the default PageHeader. Snippet args: `(title, comment, goBack, reload)`. |
+| `headerExtra` | `Snippet \| undefined` | `undefined` | Extra content rendered at the right of the default PageHeader. Ignored if `header` snippet is set (you handle layout yourself then). |
 | `children` | `Snippet \| undefined` | `undefined` | Body content |
 
 > **`goBack` and `reload` are mutually exclusive.** If both are provided, only `goBack` renders (the back icon). The `reload` icon only appears when `goBack` is absent. This is by design — the slot holds a single leading icon.
@@ -75,7 +75,7 @@ A zero-arg function that may return anything (including a `Promise`). The value
 │  │ .uniface-page (round + shadow)                 │  │
 │  │  ┌──────────────────────────────────────────┐  │  │
 │  │  │ .uniface-page-header (height: 48px)      │  │  │
-│  │  │ [← back] Title  Comment…   [headerExt]   │  │  │
+│  │  │ [← back] Title  Comment…   [headerExtra]   │  │  │
 │  │  ├──────────────────────────────────────────┤  │  │
 │  │  │ .page-container (flex 1, overflow hidden)│  │  │
 │  │  │   {children}                             │  │  │
@@ -135,13 +135,13 @@ The outer wrapper fills its parent (`width: 100%`) with a margin-sized padding a
 </Page>
 ```
 
-### Header Extensions (headerExt snippet)
+### Header Extensions (headerExtra snippet)
 
 Add action buttons to the right of the default header:
 
 ```svelte
 <Page title="Settings">
-  {#snippet headerExt()}
+  {#snippet headerExtra()}
     <button onclick={save}>Save</button>
     <button onclick={reset}>Reset</button>
   {/snippet}
@@ -150,13 +150,13 @@ Add action buttons to the right of the default header:
 </Page>
 ```
 
-### Full Header Replacement (pageHeader snippet)
+### Full Header Replacement (header snippet)
 
 Replace the entire header. The snippet receives `(title, comment, goBack, reload)`:
 
 ```svelte
 <Page title="Search Results" goBack={() => history.back()}>
-  {#snippet pageHeader(title, comment, goBack, reload)}
+  {#snippet header(title, comment, goBack, reload)}
     <div style="display: flex; align-items: center; gap: 12px; padding: 0 16px;">
       {#if goBack}
         <Icon name="icon_google_keyboard_backspace" onclick={goBack} />
@@ -172,7 +172,7 @@ Replace the entire header. The snippet receives `(title, comment, goBack, reload
 </Page>
 ```
 
-> When you override with `pageHeader`, the `headerExt` snippet is **ignored** — you must render the extension content yourself inside the snippet.
+> When you override with `header`, the `headerExtra` snippet is **ignored** — you must render the extension content yourself inside the snippet.
 
 ### Stripped-Down (no rounding, no shadow)
 
@@ -200,7 +200,7 @@ Replace the entire header. The snippet receives `(title, comment, goBack, reload
 <div class="uniface-page-wrapper" style="..." data-theme="...">
   <div class="uniface-page" class:round class:shadow>
     <div class="uniface-page-header">
-      <!-- pageHeader snippet OR default PageHeader -->
+      <!-- header snippet OR default PageHeader -->
     </div>
     <div class="page-container" style="{content$style}">
       <!-- children -->
@@ -209,7 +209,7 @@ Replace the entire header. The snippet receives `(title, comment, goBack, reload
 </div>
 ```
 
-### Default PageHeader (when no `pageHeader` snippet)
+### Default PageHeader (when no `header` snippet)
 
 ```html
 <!-- goBack OR reload icon, only one renders -->
@@ -220,7 +220,7 @@ Replace the entire header. The snippet receives `(title, comment, goBack, reload
 <div class="page-topic"><span>{title}</span></div>
 <div class="page-comment"><span>{comment}</span></div>   <!-- only if comment non-empty -->
 
-<!-- headerExt snippet if provided -->
+<!-- headerExtra snippet if provided -->
 ```
 
 Built-in header element styles:
@@ -262,20 +262,20 @@ Built-in header element styles:
 - **Content area clips overflow** (`overflow: hidden`) — it does not scroll. Wrap your content in its own `overflow: auto` container if needed.
 - **Page fills its parent**. The outer wrapper is `width: 100%`, the inner page is `width: 100%; height: 100%`. Put it in a sized parent.
 - **Click debouncing**: `goBack` / `reload` go through the [Icon](../../general/icon/README.md) wrapper, which awaits the handler and adds a 200ms cooldown. Rapid clicks won't fire repeatedly.
-- **`pageHeader` snippet args**: `(title, comment, goBack, reload)` — the same values you passed as props. Use them or ignore them.
+- **`header` snippet args**: `(title, comment, goBack, reload)` — the same values you passed as props. Use them or ignore them.
 
 ## Accessibility
 
-- The back/reload icons are `aria-hidden="true"` (decorative). The action is mouse-only — there's no keyboard activation. If keyboard support matters, render your own `<button>` in `headerExt`.
-- Title and comment are plain `<span>` text — no heading semantics. For document outline, wrap the title in `<h1>` inside the `pageHeader` snippet.
+- The back/reload icons are `aria-hidden="true"` (decorative). The action is mouse-only — there's no keyboard activation. If keyboard support matters, render your own `<button>` in `headerExtra`.
+- Title and comment are plain `<span>` text — no heading semantics. For document outline, wrap the title in `<h1>` inside the `header` snippet.
 - No `role="main"` or landmark — add `role="main"` on the wrapping element yourself if you want the page to be detected as the primary content area.
 
 ## Best Practices
 
 1. **Pass `goBack` for nested routes**, `reload` for live-data pages — they share one slot, so don't set both.
 2. **Use `comment` for context** — page purpose, record count, last-updated time. Keep it short; it truncates.
-3. **Use `headerExt` for actions** (Save, Edit, Filter) rather than cramming them into the content area.
-4. **Override `pageHeader` only when you need a fundamentally different header** (e.g. tabs in the header). For simple additions, `headerExt` is enough.
+3. **Use `headerExtra` for actions** (Save, Edit, Filter) rather than cramming them into the content area.
+4. **Override `header` only when you need a fundamentally different header** (e.g. tabs in the header). For simple additions, `headerExtra` is enough.
 5. **Wrap scrollable content yourself** — Page's content area is `overflow: hidden`, not `auto`.
 6. **Pair with `Box` for sections** inside the page body — Page gives you the shell, Box gives you internal cards.