@maltjoy/mcp-server 0.4.0 → 0.6.0-beta.0

package/dist/doc/VJoyTextarea/guideline.md

@@ -0,0 +1,378 @@
+---
+component: VJoyTextarea
+status: draft
+language: en
+dsds: JoyTextarea.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Textarea
+
+Use **`VJoyTextarea`** when the user needs to enter multi-line text — descriptions, comments, bios, feedback, or any free-form content that does not fit on a single line.
+
+It supports labels, optional autogrow height, min/max length helpers with a live character counter, validation styling, and binds to `v-model`. Native attributes such as `placeholder`, `rows`, `readonly`, and `aria-*` pass through to the underlying `<textarea>`.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyTextarea` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Textarea](https://zeroheight.com/6bf479565/p/80b38d) · [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyTextarea docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-forms-vjoytextarea--docs) |
+| **DSDS (machine)** | [`JoyTextarea.dsds.json`](./JoyTextarea.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyTextarea")` |
+
+---
+
+## When to use this component
+
+Use a textarea when someone must type or paste content that spans multiple lines — for example a project description, support message, rejection reason, or profile bio.
+
+Pair it with a visible label, validation feedback when needed, and (inside forms) `VJoyWrapper` for consistent spacing. Use `autogrow` when the field should expand with content instead of showing a fixed scrollable box.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Single-line text (name, email, search, short code) | `VJoyInput` |
+| Password with show/hide toggle | `VJoyInputPassword` |
+| Numeric value with a unit suffix (€, %, days…) | `VJoyInputNumber` |
+| One-time / verification code (OTP) | `VJoyInputDigit` |
+| Choosing from a known set of options | `VJoySelect`, `VJoyRadio`, or `VJoySelectableItemGroup` |
+| Rich text with formatting (bold, lists, links) | A dedicated rich-text editor — not a plain textarea |
+| Read-only display of existing long text | `VJoyText` or formatted content — not a disabled textarea masquerading as content |
+| Custom-styled `<textarea>` / ad-hoc field chrome | Still use `VJoyTextarea` + Joy tokens |
+
+> **Deprecated:** do not use the default slot for labels on new work — prefer the `label` prop or a separate `VJoyLabel`.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root container | Yes | Wrapper (`joy-textarea`) with state classes |
+| Label | No | `VJoyLabel` from the `label` prop (or deprecated default slot) |
+| Field wrapper | Yes | Positions the native `<textarea>` |
+| Native `<textarea>` | Yes | The actual form control; receives `$attrs` (placeholder, rows, readonly, etc.) |
+| Min-length helper | No | Shown when `minlength` is set — text + check icon when the minimum is met |
+| Max-length counter | No | Shown when `maxlength` is set — `current/max` format (e.g. `42/300`) |
+| Focus ring | Yes | Applied on focus via Joy form-field tokens — do not remove in product CSS |
+
+### Helper row visibility
+
+The helper row appears only when **`minlength` and/or `maxlength`** is set. With neither limit, no counter or minimum text is shown below the field.
+
+### Default values
+
+- `modelValue` defaults to **`''`**
+- `labelSize` defaults to **`medium`**
+- `modelModifiers` defaults to **`{ lazy: false }`** (updates on `input`)
+- `autogrow` defaults to **`false`**
+- `disabled`, `invalid`, `required`, `requiredMark`, and `autofocus` default to **`false`**
+- `minlengthLabel` falls back to **`Minimum {minlength} characters`** when `minlength` is set and no custom label is provided
+
+Props, events, and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+---
+
+## Variants
+
+`VJoyTextarea` has no visual “variant” prop (no primary/secondary). Visual meaning comes from **state** (`invalid`, `disabled`) and **behavior** (`autogrow`).
+
+### Default (valid)
+
+Use for standard editable multi-line fields. Border uses neutral tokens; focus uses `--joy-color-state-focus`.
+
+### Invalid
+
+Set `invalid` when server-side or client-side validation failed. The component also applies invalid styling on **blur** when the value violates `minlength` or `maxlength` (internal `isInvalid`). Pair with `VJoyFormError` (or equivalent) so the error is announced — the red border and counter alone are not enough.
+
+Avoid toggling `invalid` while the user is still typing unless the value is clearly wrong.
+
+### Disabled
+
+Use when the field cannot be edited and the reason is external (permissions, workflow step). **Always explain why** nearby.
+
+### Autogrow
+
+Set `autogrow` when the field should grow vertically with content (no manual resize handle). The component uses `useTextareaAutosize` and disables native resize. Prefer autogrow for open-ended feedback; use native `rows` (via attrs) for a predictable initial height when autogrow is off.
+
+### Not in the API: floating label
+
+ZeroHeight and legacy patterns sometimes describe a floating label. `VJoyTextarea` uses a **top label** (`label` / `VJoyLabel`) — do not simulate floating labels with custom CSS.
+
+### Not in the API: `size`
+
+`VJoyInput` exposes a `size` prop; **`VJoyTextarea` does not**. Field typography and padding come from Joy textarea tokens — do not hardcode heights to mimic input sizes.
+
+---
+
+## States
+
+| State | What the user sees / can do |
+| --- | --- |
+| Default | Empty or filled; editable; neutral border |
+| Hover | Border shifts on pointer devices (`formElementColorHover`) |
+| Focus | Focus border `--joy-color-state-focus`; root gets `joy-textarea_focusing` |
+| Invalid | Error border; min helper and/or max counter turn red when limits are violated; respects `invalid` prop |
+| Disabled | Not interactive; muted background and border; helpers muted; explain why nearby |
+| Min length (helper) | Helper text below; check icon appears when `modelValue.length >= minlength` |
+| Max length (counter) | `length/maxlength` counter; turns red when over `maxlength` |
+| Autogrow | Height expands with content; vertical resize disabled |
+
+On blur, internal `isInvalid` becomes true when the value is under `minlength` or over `maxlength` (even without the `invalid` prop).
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Labels and forms
+
+- **MUST** provide a visible label for every textarea (via `label`, `VJoyLabel`, or an associated `<label for="…">`).
+- **MUST** set `name` (and `id` when multiple fields share a form) so labels, autofill, and tests bind correctly.
+- **SHOULD** use `requiredMark` together with `required` when the asterisk pattern is used in the product.
+- **SHOULD** use `optionalLabel` on non-required fields when the form mixes required and optional inputs.
+- **SHOULD** wrap related fields in `VJoyWrapper` for spacing; margin adjusts automatically when inside a wrapper.
+
+### Length limits
+
+- **SHOULD** set `maxlength` when the backend or UX has a hard character cap — the built-in counter replaces ad-hoc counters.
+- **SHOULD** set `minlength` only when a minimum is a real product rule (e.g. review text); localize `minlengthLabel` for non-English UIs.
+- **MUST** show `VJoyFormError` (or equivalent) when blocking submit — not only red helper text.
+- **MUST NOT** show a character counter when neither `minlength` nor `maxlength` is set — the component hides helpers by design.
+
+### Implementation
+
+- **MUST** use only documented prop values from MCP or `VJoyTextarea.vue`.
+- **MUST** bind value with `v-model` (`modelValue` / `update:modelValue`).
+- **MUST** style with Joy tokens — no custom `.joy-textarea` chrome (border, padding, radius).
+- **MUST NOT** invent props (`size`, `variant`, `errorMessage`, `clearable`, …).
+- **MUST NOT** use the default slot for new labels — use `label` or `VJoyLabel`.
+- **SHOULD** use `v-model.lazy` (via `modelModifiers: { lazy: true }`) when updates on every keystroke are expensive.
+- **SHOULD** use `autogrow` for variable-length content; set `rows` via native attrs when a fixed initial height is enough.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `label` + `name` on every field | Placeholder as the only label |
+| `maxlength` + built-in counter | Custom duplicate counter below the field |
+| `minlengthLabel` localized | Hard-coded English minimum text in FR UI |
+| `VJoyFormError` with `invalid` | Red border with no message |
+| `autogrow` for open-ended text | Tiny fixed box with hidden overflow |
+| Joy textarea tokens | Hardcoded min-heights in px |
+| `VJoyInput` for one-line values | Tall textarea for a single email |
+
+---
+
+## Content
+
+Textareas expose label, placeholder, and optional helper copy below the field (min text / counter). All must help users enter the **right** content the **first** time.
+
+### Label formula
+
+**Noun or short noun phrase** describing the data (not the action):
+
+- ✅ Project description  
+- ✅ Message to the client  
+- ✅ Rejection reason  
+
+Use sentence case. For free-text fields, the label names **what** is being collected, not **how** to write it.
+
+### Placeholder formula
+
+**Short hint or example** — not a repeat of the label. ZeroHeight allows slightly longer placeholders for free text than single-line inputs, but keep them concise (roughly 3–5 words when possible, more only when the format truly needs it).
+
+- ✅ `Briefly describe your experience on this mission` (under label “Feedback”)  
+- ✅ `Ex: We need a senior React developer for a 3-month mission` (under label “Project description”)  
+
+- ❌ `Description` as placeholder when the label already says “Description”
+
+Do not put required instructions only in the placeholder — they disappear when typing. Use helper text (`VJoyFormError`, legend on `VJoyLabel`, or `minlengthLabel`) for rules that must stay visible.
+
+### Optional / required markers
+
+| Pattern | When |
+| --- | --- |
+| `required` + `requiredMark` | Required field in a form that uses asterisks |
+| `optionalLabel` (e.g. “optional”) | Field is not required among mostly required fields |
+
+### Writing rules
+
+| Strength | Rule |
+| --- | --- |
+| **MUST** | Every field has a visible label — never placeholder-only |
+| **MUST** | Error messages state what went wrong and how to fix it — ✅ `Enter at least 50 characters` · ❌ `Invalid` |
+| **MUST NOT** | Repeat the label verbatim in the placeholder |
+| **MUST NOT** | Use placeholders that look like prefilled data without `Ex:` or similar |
+| **SHOULD** | Localize `minlengthLabel` and error copy for non-English products |
+| **SHOULD** | Use placeholders for format examples or tone hints, not requirements |
+| **SHOULD** | Match terminology with page headings and adjacent fields |
+| **SHOULD** (FR) | Follow French grammar for labels and optional markers when the UI is localized |
+
+### Patterns
+
+**Feedback / reviews** — Set `minlength` when quality matters; customize `minlengthLabel`. Show errors on blur or submit, not on every keystroke.
+
+**Character limits** — Set `maxlength` to match API limits. Let the built-in counter communicate progress; add `VJoyFormError` when submit is blocked.
+
+**Long forms** — Prefer `autogrow` so users are not scrolling inside a small box. Split unrelated long content into separate fields when they serve different purposes.
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Native `<textarea>` |
+| Name | From associated `VJoyLabel` / `<label for>`; `label` prop wires `for` to `id` |
+| Value | Controlled via `v-model` |
+| Keyboard | Standard multi-line editing; Tab moves focus; Enter inserts newline |
+| Focus | Visible focus ring on the textarea — do not remove `outline` / focus tokens |
+| Invalid | `invalid` prop and/or internal length validation styles the field; pair with `VJoyFormError` (`role="alert"`) for the message |
+| Disabled | Native `disabled` on textarea; root sets `aria-disabled`; explain why in visible text |
+| Min / max helpers | Visible text below the field; do not rely on color alone for errors |
+| Icons | Check icon on min-length helper is supplementary — the text carries the meaning |
+| Native attrs | Pass `aria-describedby`, `aria-invalid`, `readonly`, etc. via attrs when needed |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VJoyTextarea, VJoyLabel, VJoyFormError, VJoyWrapper } from '@maltjoy/core-vue'
+
+const description = ref('')
+const feedback = ref('')
+const showError = ref(false)
+</script>
+
+<template>
+  <!-- Standard field with max length -->
+  <VJoyWrapper direction="column" row-gap="4">
+    <VJoyTextarea
+      v-model="description"
+      name="project-description"
+      label="Project description"
+      placeholder="Ex: Mission goals, stack, and duration"
+      :maxlength="500"
+      required
+      required-mark
+      :invalid="showError"
+    />
+    <VJoyFormError v-if="showError" message="Enter a project description" />
+  </VJoyWrapper>
+
+  <!-- Autogrow + minimum length -->
+  <VJoyTextarea
+    v-model="feedback"
+    name="mission-feedback"
+    label="Feedback"
+    autogrow
+    :minlength="50"
+    minlength-label="At least 50 characters"
+    placeholder="Share what went well and what could improve"
+  />
+
+  <!-- Custom label composition -->
+  <VJoyLabel for="rejection-reason" required>
+  Rejection reason
+    <template #label-legend>Visible to the freelancer</template>
+  </VJoyLabel>
+  <VJoyTextarea
+    id="rejection-reason"
+    v-model="description"
+    name="rejection-reason"
+    :maxlength="300"
+    rows="4"
+    placeholder="Explain your decision clearly and respectfully"
+  />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyTextarea` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyInput` | Single-line text |
+| `VJoyLabel` | Rich labels (legend, tooltip) separate from the field |
+| `VJoyFormError` | Inline validation message below the field |
+| `VJoyWrapper` | Form layout and spacing between fields |
+| `VJoyFormGroup` | Label + field + error grouped with reset margins |
+| `VJoyText` | Read-only display of long text |
+
+---
+
+## For agents
+
+Optional for readers; **required** for vibe-coding quality. Maps to `agentDocumentBlocks` in [`JoyTextarea.dsds.json`](./JoyTextarea.dsds.json).
+
+### Pick the right component
+
+| If the intent is… | Emit… | Do not emit… |
+| --- | --- | --- |
+| Multi-line free text | `VJoyTextarea` | Tall `VJoyInput` or raw `<textarea>` |
+| Single-line text | `VJoyInput` | `VJoyTextarea` with `rows="1"` |
+| Rich formatted text | Dedicated editor component | `VJoyTextarea` + custom WYSIWYG CSS |
+| Display-only long text | `VJoyText` | `disabled` textarea without reason |
+| Character limit UI | `VJoyTextarea` + `maxlength` | Separate counter div |
+| Expanding height | `VJoyTextarea` + `autogrow` | Fixed height + `overflow: hidden` hack |
+
+### Hard rules
+
+1. **MUST** call `joy_get_component_info("VJoyTextarea")` before generating props.  
+2. **MUST** bind `v-model` for editable values.  
+3. **MUST** set `name` (and `id` when needed for label association).  
+4. **MUST** pass native attrs (`placeholder`, `rows`, `readonly`, `aria-*`) on the component — they flow to `<textarea>`.  
+5. **MUST** set `invalid` when showing validation errors and render `VJoyFormError` with a message.  
+6. **MUST** set `maxlength` and/or `minlength` when using length rules — helpers render automatically.  
+7. **MUST NOT** emit `size` — textarea has no size prop.  
+8. **MUST NOT** use the default slot for new labels — use `label` or `VJoyLabel`.  
+9. **MUST NOT** override `.joy-textarea` border, padding, radius, or typography.  
+10. **SHOULD** set `autogrow` for open-ended user content.  
+11. **SHOULD** localize `minlengthLabel` when `minlength` is set.
+
+### Checklist
+
+- [ ] Correct component (or named alternative from table above)
+- [ ] Props from MCP only
+- [ ] `v-model` + `name` present
+- [ ] Visible label (not placeholder-only)
+- [ ] `invalid` + `VJoyFormError` when validation fails
+- [ ] `maxlength` / `minlength` set when product rules require them
+- [ ] No invented props / no custom textarea chrome CSS
+- [ ] Single-line text → `VJoyInput`, not textarea
+- [ ] Disabled explained if user-visible
+
+---
+
+## DSDS mapping
+
+This Markdown mirrors [`JoyTextarea.dsds.json`](./JoyTextarea.dsds.json) (DSDS **0.15.2**).
+
+| Section here | DSDS block |
+| --- | --- |
+| When to use / not | `use-cases` |
+| Anatomy | `anatomy` |
+| Variants (state / autogrow) | `variants` |
+| States | `states` |
+| Best practices / content rules | `guidelines` (+ `content`) |
+| Accessibility | `accessibility` |
+| Examples | `sections` |
+| For agents | `agentDocumentBlocks` |
+| Props detail | `api` in JSON + Joy MCP |
+| Imports | `imports` in JSON |
+| Token sizing | `design-specifications` in JSON (`--joy-core-radius-*`, form border tokens) |

package/dist/doc/VJoyTitleBrand/guideline.md

@@ -0,0 +1,155 @@
+---
+component: VJoyTitleBrand
+status: draft
+language: en
+dsds: JoyTitleBrand.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Title brand
+
+Use **`VJoyTitleBrand`** when a page, dialog, or marketing block needs a striking title with one or more **brand-highlighted** word segments — a rotated primary background behind selected text.
+
+The root element is configurable (`tag`, default `p`). Wrap highlighted words in a **`<span>`** in the default slot; the component applies highlight styling automatically. Typical placements include `VJoyTemplate` headers and `VJoyDialog` titles.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyTitleBrand` from `@maltjoy/core-vue` |
+| **Design** | [Figma — Joy Core Design System](https://www.figma.com/design/jfndp2QBJGS9yeuWbeGuvD/) |
+| **Storybook** | [VJoyTitleBrand docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoytitlebrand--docs) |
+| **DSDS (machine)** | [`JoyTitleBrand.dsds.json`](./JoyTitleBrand.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyTitleBrand")` |
+
+---
+
+## When to use this component
+
+Use a title brand when the heading should feel **on-brand and energetic** — onboarding heroes, funnel steps, dialog headers, or landing sections where one or two words deserve extra emphasis.
+
+The highlight is purely presentational: surrounding copy stays in the default title color; `<span>` children get inverted text on a tilted primary swatch. Multiple `<span>` segments are supported in one title.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Standard body or UI typography | `VJoyText` |
+| A plain semantic heading without brand highlight | Native `h1`–`h6` with Joy font utility classes |
+| Panel or card title chrome (actions, subtitle row) | `VJoyPanel` header slots |
+| Inline emphasis inside a paragraph | `VJoyText` or semantic `<strong>` — not a full title component |
+| Custom highlight markup / ad-hoc CSS for the same job | Still use `VJoyTitleBrand` + `<span>` — don’t reinvent the highlight |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root element | Yes | Dynamic tag (`tag` prop) with `.joy-title-brand` and `.joy-font-secondary-200` |
+| Default slot | Yes | Title text; mix plain text and `<span>` for highlights |
+| Highlight (`span`) | No | One or more segments with rotated `--joy-color-primary-50` background and `--joy-color-neutral-0` text |
+
+### Default values
+
+- `tag` defaults to **`p`**
+- Typography: **`joy-font-secondary-200`** on the root (secondary font family, weight 200)
+- Title color: **`--joy-color-text-title`**
+- Highlight padding/gap: **`--joy-core-spacing-1`** / **`--joy-core-spacing-2`**; highlight radius **`--joy-core-radius-5`**
+
+Props and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+### Highlight behavior
+
+Only **direct `<span>` children** in the default slot receive the brand highlight (`:deep(span)`). Plain text nodes render without a background. Each span gets a slight **−1°** rotation on its background pseudo-element.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Semantics and hierarchy
+
+- **MUST** set `tag` to the correct heading level (`h1`–`h6`) when the title is a real page or section heading — don’t leave the default `p` for primary document titles.
+- **SHOULD** respect heading order (one `h1` per view; don’t skip levels).
+- **SHOULD** keep highlighted segments **short** (roughly one to three words) so the tilted swatch stays readable on narrow viewports.
+
+### Content and layout
+
+- **MUST** use **`<span>`** for highlighted words — no extra wrappers, classes, or inline styles on highlights.
+- **SHOULD** limit highlights to **one or two** segments per title; more reads as noisy (see Storybook “Corner case”).
+- **SHOULD** place the component in template or dialog **header** slots where brand tone is intentional — not for dense data tables or settings labels.
+
+### Implementation
+
+- **MUST** use only documented props from MCP (`tag` is the sole prop).
+- **MUST** use Joy tokens — **MUST NOT** override `.joy-title-brand` colors, padding, or pseudo-element rotation in product CSS.
+- **MUST NOT** invent props (`variant`, `size`, `highlight`, …).
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `tag="h1"` / `h2` for real headings | Default `p` for the main page title |
+| `<span>brand</span>` for emphasis | Custom `<mark>` or colored `<strong>` for the same effect |
+| Short highlighted phrases | Entire title wrapped in one `<span>` |
+| `VJoyTitleBrand` in template/dialog headers | Brand title styling on every `h2` in the app |
+
+---
+
+## Accessibility
+
+`VJoyTitleBrand` is **presentational and non-interactive**. Accessible structure depends on the chosen `tag` and slot content.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Comes from `tag` — `h1`–`h6` for headings, `p` for non-heading brand copy |
+| Name | Full title text (plain + span content) forms the accessible name |
+| Heading outline | Use semantic heading tags when the title denotes page/section hierarchy |
+| Highlight | Decorative background only; meaning must not rely on color or rotation alone |
+| Focus | Not focusable — no keyboard interaction |
+| Contrast | Highlight uses `--joy-color-neutral-0` on `--joy-color-primary-50`; ensure surrounding title color meets product contrast requirements |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyTitleBrand } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Page hero — semantic heading + one highlight -->
+  <VJoyTitleBrand tag="h1">
+    Welcome to Malt <span>freelancers</span>
+  </VJoyTitleBrand>
+
+  <!-- Dialog or template header -->
+  <VJoyTitleBrand tag="h2">
+  Title of the page <span>with brand</span>
+  </VJoyTitleBrand>
+
+  <!-- Multiple highlights (use sparingly) -->
+  <VJoyTitleBrand tag="h2">
+    Title of the page <span>with brand</span> but not <span>only</span>
+  </VJoyTitleBrand>
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyTitleBrand` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyTemplate` | Full-page layout with header area for branded titles |
+| `VJoyDialog` | Modal headers that can host a brand title |
+| `VJoyText` | Standard typography without brand highlight |
+| `VJoyPanel` | Card/section titles with actions and structured header |
+| `VJoyFunnel` | Multi-step flows where a brand moment may appear in the header |