@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/inline-message.json

@@ -0,0 +1,317 @@
+{
+  "family": "inline-message",
+  "ui": "inline-message",
+  "binding": "react",
+  "catalog": {
+    "group": "Feedback",
+    "summary": "Short status message next to content."
+  },
+  "axes": {
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "size": [
+      "sm",
+      "md"
+    ],
+    "mark": [
+      "glyph",
+      "dot",
+      "none"
+    ],
+    "live": [
+      "off",
+      "polite",
+      "assertive"
+    ]
+  },
+  "members": {
+    "inlineMessage": {
+      "nativeElement": "p",
+      "defaults": {
+        "tone": "secondary",
+        "size": "sm",
+        "live": "off",
+        "mark": "glyph",
+        "hideIcon": false,
+        "loading": false,
+        "reserve": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "live",
+        "loading",
+        "disabled"
+      ],
+      "states": [
+        "default",
+        "loading",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "prefix",
+        "icon",
+        "text"
+      ]
+    }
+  },
+  "docs": {
+    "inlineMessage": {
+      "imports": {
+        "source": "import {\n  InlineMessage,\n  InlineMessageDefaultsProvider,\n} from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "p, or the element render returns",
+          "required": true,
+          "purpose": "The message. Carries data-ui=\"inline-message\", the three axes, data-loading, data-disabled, data-reserve, the identifier a control points at, and the live role."
+        },
+        {
+          "part": "prefix",
+          "element": "span",
+          "required": false,
+          "purpose": "The severity in words — Error:, Warning:, Success: — clipped from sight and first in the DOM so a screen reader reads it before the message. Absent for the two tones that are not severities, and for a message with nothing to say."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The tone’s mark, drawn as a mask from the foundation’s status glyph set and hidden from assistive technology. Becomes a turning ring while loading, holds the page’s own artwork when icon is passed, and is absent when hideIcon."
+        },
+        {
+          "part": "text",
+          "element": "span",
+          "required": true,
+          "purpose": "The sentence. Written by the family around children, which is what makes “is there a message?” a question the stylesheet can ask and keeps a message holding a link one grid item rather than two."
+        }
+      ],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "InlineMessage",
+          "description": "What the message is about, and therefore which mark it draws and which word a reader hears first. secondary is help: no mark, no word, and the neutral muted ink"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "defaultValue": "sm",
+          "appliesTo": "InlineMessage",
+          "description": "The type step. sm is the message of a field, md the message of a section; both read the control scales, which the theme restates per density"
+        },
+        {
+          "name": "live",
+          "type": "'off' | 'polite' | 'assertive'",
+          "defaultValue": "off",
+          "appliesTo": "InlineMessage",
+          "description": "Whether the message announces itself. polite writes role=\"status\" and assertive writes role=\"alert\", both on this element — there are no controls inside it to keep out of the region"
+        },
+        {
+          "name": "mark",
+          "type": "'glyph' | 'dot' | 'none'",
+          "defaultValue": "glyph",
+          "appliesTo": "InlineMessage",
+          "description": "Which mark is drawn. glyph is the tone’s own silhouette; dot is one neutral bullet in the tone’s ink, the same shape for every tone including help; none draws nothing, and the tone is said by the ink and the weight of the sentence. Field and FieldGroup ask for none, because a silhouette under every control of a form is texture rather than a warning"
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "The word read before the message. Unstated is the tone’s own; the empty string removes it, for a sentence that already names the severity"
+        },
+        {
+          "name": "hideIcon",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "InlineMessage",
+          "description": "Draws no mark at all. The severity word stays, because it is what a reader hears rather than what a reader sees"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "Replaces the tone’s mark, keeping its box, its size and its place on the first line. Angular projects an element carrying slInlineMessageIcon instead"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "InlineMessage",
+          "description": "The message is waiting for something: the mark becomes a ring turning at the same duration Button’s does, and stopping under reduced motion"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "Unstated rather than false, so the field this family sits in can answer it once field ships in wave 3. Stated, it wins: the ink is muted and the ring stops"
+        },
+        {
+          "name": "reserve",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "InlineMessage",
+          "description": "Holds one line box of the family’s own leading open whether or not there is a message, so a form rendering the message unconditionally never moves when the error arrives"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "defaultValue": "generated",
+          "appliesTo": "InlineMessage",
+          "description": "What aria-describedby or aria-errormessage points at. The family generates one from useId when the page states none, so the element is always addressable"
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "Substitutes the rendered element and hands it every data attribute. A ul is how one message carries a list of failures instead of a sentence"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLParagraphElement>",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "Reaches the element. There is no imperative handle beyond it: the family holds no state and moves nothing, so there is nothing to call"
+        },
+        {
+          "name": "InlineMessageDefaultsProvider",
+          "type": "{ tone, size, live, prefixes }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets the three axes once, and — the one that matters — the table of severity words, merged over the shipped one so a single word can be replaced alone"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "InlineMessage",
+          "description": "The sentence, wrapped by the family in the text part. Undefined or an empty string leaves that part empty, which is what reserve draws nothing in"
+        }
+      ],
+      "events": [],
+      "accessibility": [
+        "There is no WAI-ARIA APG pattern for a message attached to a field. Three documents cover it between them: the APG Alert Pattern (w3.org/WAI/ARIA/apg/patterns/alert/) for the announcing behaviour, MDN’s aria-errormessage reference for the wiring, and WCAG 2.2 Understanding 3.3.1 Error Identification for the requirement that the error be identified in text.",
+        "The severity is a word, not only a colour and a mark. A reader who cannot see the message hears the sentence and nothing else, so the family writes “Error:”, “Warning:” or “Success:” in clipped text before it — GOV.UK’s Error message component publishes the idea for errors, and this generalises it to every severity and to a table an application replaces once through the provider.",
+        "The live role goes on the message itself. Alert puts its role on an inner part because it has a dismiss button beside its text and MDN’s alert role reference restricts the role to text content; this family owns no controls, so the element that is the text is the element that announces. live defaults to off, because a message already present when the page finishes loading is announced by nothing whatever role it carries.",
+        "Wiring is the control’s job and the identifier is the family’s. MDN: set aria-invalid=\"true\" on the control, then aria-errormessage to the id of the element holding the message. The family generates an id with useId when the page states none, and never replaces one the page wrote.",
+        "The mark is aria-hidden, because it repeats what the severity word already says. Under forced colours it keeps its silhouette in CanvasText — the circle, the triangle and the crossed circle are what tells an error from a note when every colour has been replaced, which is WCAG 2.2 1.4.1.",
+        "A disabled message is muted to a measured colour rather than faded by opacity, and its ring stops: STATE_PRECEDENCE puts disabled above loading, and a control nobody can use is not waiting for anything. Nothing is removed from the accessibility tree, because a message about a disabled field is still a message.",
+        "The family never becomes a tooltip. The message is visible text in the flow of the page, which is the requirement WCAG 2.2 3.3.1 states and the one a hover-only error fails for every reader who does not hover."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-loop-fast",
+    "--slotted-inline-message-column-gap",
+    "--slotted-inline-message-font-family",
+    "--slotted-inline-message-line-height",
+    "--slotted-line-height-md",
+    "--slotted-radius-full",
+    "--slotted-space-4",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One message with every axis on it, driven by the controls below the canvas. Change the tone and both the mark and the word a screen reader hears change with it.",
+      "language": "tsx",
+      "source": "<InlineMessage tone=\"danger\">Informe um CNPJ válido para continuar.</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tones",
+      "title": "What the message is about",
+      "note": "Four severities and one absence of one. secondary is help: no mark, no severity word, and the neutral muted ink rather than a tone’s louder label colour.",
+      "language": "tsx",
+      "source": "// secondary is help, accent information, and the other three are severities.\n<InlineMessage>Entre 8 e 64 caracteres.</InlineMessage>;\n<InlineMessage tone=\"success\">Nome de usuário disponível.</InlineMessage>;\n<InlineMessage tone=\"danger\">Este e-mail já está cadastrado.</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the message sits at",
+      "note": "sm is the message of a field and md the message of a section. Both read the control scales, so switching the toolbar to dense shrinks them with the rows around them.",
+      "language": "tsx",
+      "source": "<InlineMessage size=\"sm\" tone=\"danger\">\n  A mensagem de um campo.\n</InlineMessage>;\n<InlineMessage size=\"md\" tone=\"danger\">\n  A mensagem de uma seção.\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "pending",
+      "title": "A message that is still waiting",
+      "note": "The mark becomes a ring turning in the same box, so the wait becomes its answer with no geometry moving. Under reduced motion the ring stops rather than slows.",
+      "language": "tsx",
+      "source": "const [state, setState] = useState<'idle' | 'checking' | 'free'>('checking');\n\n<InlineMessage\n  live=\"polite\"\n  loading={state === 'checking'}\n  tone={state === 'free' ? 'success' : 'secondary'}\n>\n  {state === 'checking' ? 'Verificando disponibilidade…' : 'Nome disponível.'}\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "wiring",
+      "title": "Pointing a control at the message",
+      "note": "The three attributes that make an error reach a reader: aria-invalid on the control, aria-errormessage at the message’s id, and an id the family generates when the page states none.",
+      "language": "tsx",
+      "source": "const messageId = useId();\n\n<>\n  <label htmlFor=\"cnpj\">CNPJ</label>\n  <input aria-errormessage={messageId} aria-invalid id=\"cnpj\" />\n  <InlineMessage id={messageId} tone=\"danger\">\n    Faltam dois dígitos.\n  </InlineMessage>\n</>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "live",
+      "title": "What a reader hears, and when",
+      "note": "off by default, because a message already on the page when it loads is announced by nothing. Press the button and the message arrives while the reader is elsewhere, which is what polite is for.",
+      "language": "tsx",
+      "source": "// role=\"status\" on the message itself, which implies aria-live and\n// aria-atomic. There are no controls inside it to keep out of the region.\n<InlineMessage live=\"polite\" tone=\"success\">\n  Alterações salvas.\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reserve",
+      "title": "Holding the line open",
+      "note": "Both columns render the message unconditionally; only the right one has something to say. The two second fields sit at the same height, because the empty message keeps its line and draws nothing in it.",
+      "language": "tsx",
+      "source": "// Rendered whether or not there is an error, so nothing below it moves.\n<InlineMessage reserve tone=\"danger\">\n  {errors.cnpj}\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A German compound over three lines, a container digest with no break opportunity, a sentence carrying a link, and the page’s own artwork — the mark stays on the first line in all four.",
+      "language": "tsx",
+      "source": "<InlineMessage tone=\"secondary\">\n  Aceitamos cartão, boleto e Pix. <Link href=\"/tarifas\">Ver tarifas</Link>\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition and escape hatches",
+      "note": "The provider translates the severity words once, render substitutes the element for a list of failures, and icon replaces the mark while keeping its box and its place.",
+      "language": "tsx",
+      "source": "<InlineMessageDefaultsProvider prefixes={{ danger: 'Erro:', warning: 'Atenção:' }}>\n  <App />\n</InlineMessageDefaultsProvider>;\n\n<InlineMessage icon={<ShieldIcon />} render={(props) => <div {...props} />}>\n  A verificação em duas etapas protege esta conta.\n</InlineMessage>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears before the message",
+      "note": "Turn a screen reader on and read the three rows: the severity is a word, not only a colour and a silhouette, and it is the same word wherever the message is announced.",
+      "language": "tsx",
+      "source": "// Heard as “Error: Informe um CNPJ válido.”\n<InlineMessage tone=\"danger\">Informe um CNPJ válido.</InlineMessage>;\n\n// One message says its own word; the empty string removes it entirely.\n<InlineMessage prefix=\"Erro:\" tone=\"danger\" />;\n<InlineMessage prefix=\"\" tone=\"danger\" />;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/dist/docs/inline-message.md

@@ -0,0 +1,209 @@
+<!-- index: ./index.md -->
+# inline-message
+
+`data-ui="inline-message"` · Short status message next to content.
+
+## Import
+
+```tsx
+import {
+  InlineMessage,
+  InlineMessageDefaultsProvider,
+} from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<InlineMessage tone="danger">Informe um CNPJ válido para continuar.</InlineMessage>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | p, or the element render returns | yes |
+| `prefix` | span | no |
+| `icon` | span | no |
+| `text` | span | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | InlineMessage | What the message is about, and therefore which mark it draws and which word a reader hears first. secondary is help: no mark, no word, and the neutral muted ink |
+| `size` | `'sm' \| 'md'` | sm | InlineMessage | The type step. sm is the message of a field, md the message of a section; both read the control scales, which the theme restates per density |
+| `live` | `'off' \| 'polite' \| 'assertive'` | off | InlineMessage | Whether the message announces itself. polite writes role="status" and assertive writes role="alert", both on this element — there are no controls inside it to keep out of the region |
+| `mark` | `'glyph' \| 'dot' \| 'none'` | glyph | InlineMessage | Which mark is drawn. glyph is the tone’s own silhouette; dot is one neutral bullet in the tone’s ink, the same shape for every tone including help; none draws nothing, and the tone is said by the ink and the weight of the sentence. Field and FieldGroup ask for none, because a silhouette under every control of a form is texture rather than a warning |
+| `prefix` | `string` | — | InlineMessage | The word read before the message. Unstated is the tone’s own; the empty string removes it, for a sentence that already names the severity |
+| `hideIcon` | `boolean` | false | InlineMessage | Draws no mark at all. The severity word stays, because it is what a reader hears rather than what a reader sees |
+| `icon` | `ReactNode` | — | InlineMessage | Replaces the tone’s mark, keeping its box, its size and its place on the first line. Angular projects an element carrying slInlineMessageIcon instead |
+| `loading` | `boolean` | false | InlineMessage | The message is waiting for something: the mark becomes a ring turning at the same duration Button’s does, and stopping under reduced motion |
+| `disabled` | `boolean` | — | InlineMessage | Unstated rather than false, so the field this family sits in can answer it once field ships in wave 3. Stated, it wins: the ink is muted and the ring stops |
+| `reserve` | `boolean` | false | InlineMessage | Holds one line box of the family’s own leading open whether or not there is a message, so a form rendering the message unconditionally never moves when the error arrives |
+| `id` | `string` | generated | InlineMessage | What aria-describedby or aria-errormessage points at. The family generates one from useId when the page states none, so the element is always addressable |
+| `render` | `(props) => ReactNode` | — | InlineMessage | Substitutes the rendered element and hands it every data attribute. A ul is how one message carries a list of failures instead of a sentence |
+| `ref` | `Ref<HTMLParagraphElement>` | — | InlineMessage | Reaches the element. There is no imperative handle beyond it: the family holds no state and moves nothing, so there is nothing to call |
+| `InlineMessageDefaultsProvider` | `{ tone, size, live, prefixes }` | — | a subtree | Sets the three axes once, and — the one that matters — the table of severity words, merged over the shipped one so a single word can be replaced alone |
+| `children` | `ReactNode` | — | InlineMessage | The sentence, wrapped by the family in the text part. Undefined or an empty string leaves that part empty, which is what reserve draws nothing in |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `secondary` |
+| `size` | `sm`, `md` | `sm` |
+| `mark` | `glyph`, `dot`, `none` | `glyph` |
+| `live` | `off`, `polite`, `assertive` | `off` |
+
+## Rules
+
+- There is no WAI-ARIA APG pattern for a message attached to a field. Three documents cover it between them: the APG Alert Pattern (w3.org/WAI/ARIA/apg/patterns/alert/) for the announcing behaviour, MDN’s aria-errormessage reference for the wiring, and WCAG 2.2 Understanding 3.3.1 Error Identification for the requirement that the error be identified in text.
+- The severity is a word, not only a colour and a mark. A reader who cannot see the message hears the sentence and nothing else, so the family writes “Error:”, “Warning:” or “Success:” in clipped text before it — GOV.UK’s Error message component publishes the idea for errors, and this generalises it to every severity and to a table an application replaces once through the provider.
+- The live role goes on the message itself. Alert puts its role on an inner part because it has a dismiss button beside its text and MDN’s alert role reference restricts the role to text content; this family owns no controls, so the element that is the text is the element that announces. live defaults to off, because a message already present when the page finishes loading is announced by nothing whatever role it carries.
+- Wiring is the control’s job and the identifier is the family’s. MDN: set aria-invalid="true" on the control, then aria-errormessage to the id of the element holding the message. The family generates an id with useId when the page states none, and never replaces one the page wrote.
+- The mark is aria-hidden, because it repeats what the severity word already says. Under forced colours it keeps its silhouette in CanvasText — the circle, the triangle and the crossed circle are what tells an error from a note when every colour has been replaced, which is WCAG 2.2 1.4.1.
+- A disabled message is muted to a measured colour rather than faded by opacity, and its ring stops: STATE_PRECEDENCE puts disabled above loading, and a control nobody can use is not waiting for anything. Nothing is removed from the accessibility tree, because a message about a disabled field is still a message.
+- The family never becomes a tooltip. The message is visible text in the flow of the page, which is the requirement WCAG 2.2 3.3.1 states and the one a hover-only error fails for every reader who does not hover.
+
+## Tokens
+
+`--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-disabled-foreground`, `--slotted-duration-loop-fast`, `--slotted-inline-message-column-gap`, `--slotted-inline-message-font-family`, `--slotted-inline-message-line-height`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-space-4`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+
+## Examples
+
+### What the message is about
+
+Four severities and one absence of one. secondary is help: no mark, no severity word, and the neutral muted ink rather than a tone’s louder label colour.
+
+Excerpt — not a complete module
+
+```tsx
+// secondary is help, accent information, and the other three are severities.
+<InlineMessage>Entre 8 e 64 caracteres.</InlineMessage>;
+<InlineMessage tone="success">Nome de usuário disponível.</InlineMessage>;
+<InlineMessage tone="danger">Este e-mail já está cadastrado.</InlineMessage>;
+```
+
+### The step the message sits at
+
+sm is the message of a field and md the message of a section. Both read the control scales, so switching the toolbar to dense shrinks them with the rows around them.
+
+Excerpt — not a complete module
+
+```tsx
+<InlineMessage size="sm" tone="danger">
+  A mensagem de um campo.
+</InlineMessage>;
+<InlineMessage size="md" tone="danger">
+  A mensagem de uma seção.
+</InlineMessage>;
+```
+
+### A message that is still waiting
+
+The mark becomes a ring turning in the same box, so the wait becomes its answer with no geometry moving. Under reduced motion the ring stops rather than slows.
+
+Excerpt — not a complete module
+
+```tsx
+const [state, setState] = useState<'idle' | 'checking' | 'free'>('checking');
+
+<InlineMessage
+  live="polite"
+  loading={state === 'checking'}
+  tone={state === 'free' ? 'success' : 'secondary'}
+>
+  {state === 'checking' ? 'Verificando disponibilidade…' : 'Nome disponível.'}
+</InlineMessage>;
+```
+
+### Pointing a control at the message
+
+The three attributes that make an error reach a reader: aria-invalid on the control, aria-errormessage at the message’s id, and an id the family generates when the page states none.
+
+Excerpt — not a complete module
+
+```tsx
+const messageId = useId();
+
+<>
+  <label htmlFor="cnpj">CNPJ</label>
+  <input aria-errormessage={messageId} aria-invalid id="cnpj" />
+  <InlineMessage id={messageId} tone="danger">
+    Faltam dois dígitos.
+  </InlineMessage>
+</>;
+```
+
+### What a reader hears, and when
+
+off by default, because a message already on the page when it loads is announced by nothing. Press the button and the message arrives while the reader is elsewhere, which is what polite is for.
+
+Excerpt — not a complete module
+
+```tsx
+// role="status" on the message itself, which implies aria-live and
+// aria-atomic. There are no controls inside it to keep out of the region.
+<InlineMessage live="polite" tone="success">
+  Alterações salvas.
+</InlineMessage>;
+```
+
+### Holding the line open
+
+Both columns render the message unconditionally; only the right one has something to say. The two second fields sit at the same height, because the empty message keeps its line and draws nothing in it.
+
+Excerpt — not a complete module
+
+```tsx
+// Rendered whether or not there is an error, so nothing below it moves.
+<InlineMessage reserve tone="danger">
+  {errors.cnpj}
+</InlineMessage>;
+```
+
+### Content the family did not choose
+
+A German compound over three lines, a container digest with no break opportunity, a sentence carrying a link, and the page’s own artwork — the mark stays on the first line in all four.
+
+Excerpt — not a complete module
+
+```tsx
+<InlineMessage tone="secondary">
+  Aceitamos cartão, boleto e Pix. <Link href="/tarifas">Ver tarifas</Link>
+</InlineMessage>;
+```
+
+### Composition and escape hatches
+
+The provider translates the severity words once, render substitutes the element for a list of failures, and icon replaces the mark while keeping its box and its place.
+
+Excerpt — not a complete module
+
+```tsx
+<InlineMessageDefaultsProvider prefixes={{ danger: 'Erro:', warning: 'Atenção:' }}>
+  <App />
+</InlineMessageDefaultsProvider>;
+
+<InlineMessage icon={<ShieldIcon />} render={(props) => <div {...props} />}>
+  A verificação em duas etapas protege esta conta.
+</InlineMessage>;
+```
+
+### What a reader hears before the message
+
+Turn a screen reader on and read the three rows: the severity is a word, not only a colour and a silhouette, and it is the same word wherever the message is announced.
+
+Excerpt — not a complete module
+
+```tsx
+// Heard as “Error: Informe um CNPJ válido.”
+<InlineMessage tone="danger">Informe um CNPJ válido.</InlineMessage>;
+
+// One message says its own word; the empty string removes it entirely.
+<InlineMessage prefix="Erro:" tone="danger" />;
+<InlineMessage prefix="" tone="danger" />;
+```