@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/inline-message.json

@@ -0,0 +1,312 @@
+{
+  "family": "inline-message",
+  "ui": "inline-message",
+  "binding": "angular",
+  "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  provideInlineMessageDefaults,\n  SlInlineMessage,\n  SlInlineMessageIcon,\n} from '@slotted/angular/inline-message';",
+        "selector": "[slInlineMessage]",
+        "exportAs": "slInlineMessage"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element the consumer wrote — a p",
+          "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 an element carrying slInlineMessageIcon when one is projected, and is absent when hideIcon."
+        },
+        {
+          "part": "text",
+          "element": "span",
+          "required": true,
+          "purpose": "The sentence. Written by the family around the projected content, 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": "slInlineMessage",
+          "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": "slInlineMessage",
+          "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": "slInlineMessage",
+          "description": "Whether the message announces itself. polite writes role=\"status\" and assertive writes role=\"alert\", both on the host — there are no controls inside it to keep out of the region. A role the template wrote is read first and kept"
+        },
+        {
+          "name": "mark",
+          "type": "'glyph' | 'dot' | 'none'",
+          "defaultValue": "glyph",
+          "appliesTo": "slInlineMessage",
+          "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. slField and slFieldGroup ask for none, because a silhouette under every control of a form is texture rather than a warning"
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slInlineMessage",
+          "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": "slInlineMessage",
+          "description": "Draws no mark at all. The severity word stays, because it is what a reader hears rather than what a reader sees"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slInlineMessage",
+          "description": "The message is waiting for something: the mark becomes a ring turning at the same duration slButton’s does, and stopping under reduced motion"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slInlineMessage",
+          "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": "slInlineMessage",
+          "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": "slInlineMessage",
+          "description": "What aria-describedby or aria-errormessage points at. Read from the host attribute before the family writes its own, so a static id the template wrote survives the host binding"
+        }
+      ],
+      "composition": [
+        {
+          "name": "slInlineMessageIcon",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "a projected element",
+          "description": "The page’s own mark, projected into the box the family draws so it keeps the size, the colour and the place on the first line the tone’s mark would have had"
+        },
+        {
+          "name": "messageId",
+          "type": "string",
+          "defaultValue": "generated",
+          "appliesTo": "slInlineMessage",
+          "description": "The identifier, reachable from the template through exportAs — the reach an Angular template has and a React consumer answers with useId in their own component"
+        },
+        {
+          "name": "provideInlineMessageDefaults",
+          "type": "{ tone, size, live, prefixes }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "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": "ng-content",
+          "type": "projected content",
+          "defaultValue": "—",
+          "appliesTo": "slInlineMessage",
+          "description": "The sentence, wrapped by the family in the text part. Projecting nothing 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 provideInlineMessageDefaults.",
+        "The live role goes on the host. slAlert 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. exportAs hands the template the instance so it can write [attr.aria-errormessage]=\"message.messageId\" without inventing an id of its own.",
+        "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": "html",
+      "source": "<p slInlineMessage tone=\"danger\">Informe um CNPJ válido para continuar.</p>\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": "html",
+      "source": "<p slInlineMessage>Entre 8 e 64 caracteres.</p>\n<p slInlineMessage tone=\"success\">Nome de usuário disponível.</p>\n<p slInlineMessage tone=\"danger\">Este e-mail já está cadastrado.</p>\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": "html",
+      "source": "<p slInlineMessage size=\"sm\" tone=\"danger\">A mensagem de um campo.</p>\n<p slInlineMessage size=\"md\" tone=\"danger\">A mensagem de uma seção.</p>\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": "html",
+      "source": "<p\n  slInlineMessage\n  live=\"polite\"\n  [loading]=\"state() === 'checking'\"\n  [tone]=\"state() === 'free' ? 'success' : 'secondary'\"\n>\n  {{ state() === 'checking' ? 'Verificando disponibilidade…' : 'Nome disponível.' }}\n</p>\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": "html",
+      "source": "<label for=\"cnpj\">CNPJ</label>\n<input id=\"cnpj\" aria-invalid=\"true\" [attr.aria-errormessage]=\"message.messageId\" />\n<p slInlineMessage #message=\"slInlineMessage\" tone=\"danger\">Faltam dois dígitos.</p>\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": "html",
+      "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<p slInlineMessage live=\"polite\" tone=\"success\">Alterações salvas.</p>\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": "html",
+      "source": "<!-- Rendered whether or not there is an error, so nothing below it moves. -->\n<p slInlineMessage reserve tone=\"danger\">{{ errors().cnpj }}</p>\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": "html",
+      "source": "<p slInlineMessage>Aceitamos cartão, boleto e Pix. <a slLink href=\"/tarifas\">Ver tarifas</a></p>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition and escape hatches",
+      "note": "The token translates the severity words once, the directive sits on whatever element the page wrote, and a projected mark replaces the tone’s while keeping its box and its place.",
+      "language": "ts",
+      "source": "providers: [\n  provideInlineMessageDefaults({\n    prefixes: { danger: 'Erro:', warning: 'Atenção:' },\n  }),\n];\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": "html",
+      "source": "<!-- Heard as “Error: Informe um CNPJ válido.” -->\n<p slInlineMessage tone=\"danger\">Informe um CNPJ válido.</p>\n\n<!-- One message says its own word; the empty string removes it entirely. -->\n<p slInlineMessage tone=\"danger\" prefix=\"Erro:\">Informe um CNPJ válido.</p>\n<p slInlineMessage tone=\"danger\" prefix=\"\">Erro: informe um CNPJ válido.</p>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/inline-message.md

@@ -0,0 +1,191 @@
+<!-- index: ./index.md -->
+# inline-message
+
+`data-ui="inline-message"` · Short status message next to content.
+
+## Import
+
+```ts
+import {
+  provideInlineMessageDefaults,
+  SlInlineMessage,
+  SlInlineMessageIcon,
+} from '@slotted/angular/inline-message';
+```
+
+Selector: `[slInlineMessage]` · exportAs: `slInlineMessage`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<p slInlineMessage tone="danger">Informe um CNPJ válido para continuar.</p>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the element the consumer wrote — a p | yes |
+| `prefix` | span | no |
+| `icon` | span | no |
+| `text` | span | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slInlineMessage | 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 | slInlineMessage | 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 | slInlineMessage | Whether the message announces itself. polite writes role="status" and assertive writes role="alert", both on the host — there are no controls inside it to keep out of the region. A role the template wrote is read first and kept |
+| `mark` | `'glyph' \| 'dot' \| 'none'` | glyph | slInlineMessage | 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. slField and slFieldGroup ask for none, because a silhouette under every control of a form is texture rather than a warning |
+| `prefix` | `string` | — | slInlineMessage | 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 | slInlineMessage | Draws no mark at all. The severity word stays, because it is what a reader hears rather than what a reader sees |
+| `loading` | `boolean` | false | slInlineMessage | The message is waiting for something: the mark becomes a ring turning at the same duration slButton’s does, and stopping under reduced motion |
+| `disabled` | `boolean` | — | slInlineMessage | 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 | slInlineMessage | 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 | slInlineMessage | What aria-describedby or aria-errormessage points at. Read from the host attribute before the family writes its own, so a static id the template wrote survives the host binding |
+| `slInlineMessageIcon` | `directive` | — | a projected element | The page’s own mark, projected into the box the family draws so it keeps the size, the colour and the place on the first line the tone’s mark would have had |
+| `messageId` | `string` | generated | slInlineMessage | The identifier, reachable from the template through exportAs — the reach an Angular template has and a React consumer answers with useId in their own component |
+| `provideInlineMessageDefaults` | `{ tone, size, live, prefixes }` | — | an injector | 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 |
+| `ng-content` | `projected content` | — | slInlineMessage | The sentence, wrapped by the family in the text part. Projecting nothing 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 provideInlineMessageDefaults.
+- The live role goes on the host. slAlert 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. exportAs hands the template the instance so it can write [attr.aria-errormessage]="message.messageId" without inventing an id of its own.
+- 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
+
+```html
+<p slInlineMessage>Entre 8 e 64 caracteres.</p>
+<p slInlineMessage tone="success">Nome de usuário disponível.</p>
+<p slInlineMessage tone="danger">Este e-mail já está cadastrado.</p>
+```
+
+### 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
+
+```html
+<p slInlineMessage size="sm" tone="danger">A mensagem de um campo.</p>
+<p slInlineMessage size="md" tone="danger">A mensagem de uma seção.</p>
+```
+
+### 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
+
+```html
+<p
+  slInlineMessage
+  live="polite"
+  [loading]="state() === 'checking'"
+  [tone]="state() === 'free' ? 'success' : 'secondary'"
+>
+  {{ state() === 'checking' ? 'Verificando disponibilidade…' : 'Nome disponível.' }}
+</p>
+```
+
+### 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
+
+```html
+<label for="cnpj">CNPJ</label>
+<input id="cnpj" aria-invalid="true" [attr.aria-errormessage]="message.messageId" />
+<p slInlineMessage #message="slInlineMessage" tone="danger">Faltam dois dígitos.</p>
+```
+
+### 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
+
+```html
+<!-- 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. -->
+<p slInlineMessage live="polite" tone="success">Alterações salvas.</p>
+```
+
+### 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
+
+```html
+<!-- Rendered whether or not there is an error, so nothing below it moves. -->
+<p slInlineMessage reserve tone="danger">{{ errors().cnpj }}</p>
+```
+
+### 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
+
+```html
+<p slInlineMessage>Aceitamos cartão, boleto e Pix. <a slLink href="/tarifas">Ver tarifas</a></p>
+```
+
+### Composition and escape hatches
+
+The token translates the severity words once, the directive sits on whatever element the page wrote, and a projected mark replaces the tone’s while keeping its box and its place.
+
+Excerpt — not a complete module
+
+```ts
+providers: [
+  provideInlineMessageDefaults({
+    prefixes: { danger: 'Erro:', warning: 'Atenção:' },
+  }),
+];
+```
+
+### 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
+
+```html
+<!-- Heard as “Error: Informe um CNPJ válido.” -->
+<p slInlineMessage tone="danger">Informe um CNPJ válido.</p>
+
+<!-- One message says its own word; the empty string removes it entirely. -->
+<p slInlineMessage tone="danger" prefix="Erro:">Informe um CNPJ válido.</p>
+<p slInlineMessage tone="danger" prefix="">Erro: informe um CNPJ válido.</p>
+```

package/docs/inline.json

@@ -0,0 +1,149 @@
+{
+  "family": "inline",
+  "ui": "inline",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Row of items with gaps that wraps."
+  },
+  "axes": {
+    "gap": [
+      "0",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end",
+      "stretch",
+      "baseline"
+    ],
+    "justify": [
+      "start",
+      "center",
+      "end",
+      "between",
+      "around",
+      "evenly"
+    ],
+    "wrap": [
+      "wrap",
+      "nowrap"
+    ]
+  },
+  "members": {
+    "inline": {
+      "nativeElement": "div",
+      "defaults": {
+        "gap": "4",
+        "align": "center",
+        "wrap": "wrap"
+      },
+      "capabilities": [
+        "arrangement"
+      ],
+      "states": [
+        "default"
+      ],
+      "parts": [
+        "root"
+      ]
+    }
+  },
+  "docs": {
+    "inline": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "gap",
+          "type": "0 | 1 | … | 12",
+          "defaultValue": "4",
+          "appliesTo": "slInline",
+          "description": "Separation between items, as a step on the space scale"
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+          "defaultValue": "center",
+          "appliesTo": "slInline",
+          "description": "Positions items across the flow; baseline puts their type on one line"
+        },
+        {
+          "name": "justify",
+          "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+          "defaultValue": "—",
+          "appliesTo": "slInline",
+          "description": "Positions items along the flow, and distributes the space between them"
+        },
+        {
+          "name": "wrap",
+          "type": "'wrap' | 'nowrap'",
+          "defaultValue": "wrap",
+          "appliesTo": "slInline",
+          "description": "nowrap keeps one line, and overflows a container narrower than it"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "slInline has no role and no ARIA. It arranges what the consumer wrote, and the items keep whatever semantics they already had.",
+        "The directive selector is an attribute, so the element is always the consumer’s. Write ul when the items are list items.",
+        "There is no input that reverses the items. Visual order stays DOM order, which is what WCAG 2.2 SC 1.3.2 asks for (technique C27, failure F1) and what keeps the Tab order matching the page.",
+        "Wrapping is the default because a row that cannot wrap has one answer to a narrow container: overflow it. Asking for nowrap is asking for that, and WCAG 1.4.10 Reflow is what it costs.",
+        "baseline is the alignment for items that carry text of different sizes. It puts the type on one line where centring only puts the boxes there."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-space-1",
+    "--slotted-space-10",
+    "--slotted-space-11",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-space-8",
+    "--slotted-space-9"
+  ],
+  "examples": [
+    {
+      "id": "inline-angular-actions",
+      "title": "Cancel and confirm, pushed apart",
+      "note": null,
+      "language": "html",
+      "source": "<div slInline [gap]=\"4\" justify=\"between\">\n  <button slButton variant=\"secondary\">Cancel</button>\n  <button slButton>Save changes</button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "inline-angular-tags",
+      "title": "A list of tags that wraps",
+      "note": null,
+      "language": "html",
+      "source": "<ul slInline [gap]=\"2\">\n  @for (tag of tags; track tag) {\n    <li>\n      <span slTag>{{ tag }}</span>\n    </li>\n  }\n</ul>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "inline-angular-baseline",
+      "title": "A label and a value on one line",
+      "note": null,
+      "language": "html",
+      "source": "<div slInline [gap]=\"5\" align=\"baseline\">\n  <span slText tone=\"muted\">Status</span>\n  <span slText size=\"lg\" weight=\"semibold\">Awaiting review</span>\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}