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

package/docs/message.json

@@ -0,0 +1,862 @@
+{
+  "family": "message",
+  "ui": "message",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Chat message with author, bubble and actions."
+  },
+  "axes": {
+    "align": [
+      "start",
+      "end"
+    ],
+    "layout": [
+      "bubble",
+      "thread"
+    ],
+    "actionsVisibility": [
+      "always",
+      "hover"
+    ],
+    "status": [
+      "sending",
+      "sent",
+      "delivered",
+      "read",
+      "failed",
+      "streaming"
+    ],
+    "variant": [
+      "solid",
+      "soft",
+      "outline",
+      "plain"
+    ],
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ]
+  },
+  "members": {
+    "message": {
+      "nativeElement": "article",
+      "defaults": {
+        "align": "start",
+        "layout": "bubble",
+        "actionsVisibility": "hover",
+        "defaultVersion": 0
+      },
+      "capabilities": [
+        "appearance",
+        "arrangement",
+        "content",
+        "status",
+        "current"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "focus-visible",
+        "loading",
+        "invalid",
+        "read",
+        "complete",
+        "current"
+      ],
+      "parts": [
+        "root",
+        "group",
+        "avatar",
+        "body",
+        "header",
+        "author",
+        "time",
+        "footer",
+        "receipt",
+        "actions",
+        "activity",
+        "activity-step",
+        "versions",
+        "version-previous",
+        "version-label",
+        "version-next"
+      ]
+    },
+    "bubble": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "soft",
+        "tone": "secondary",
+        "defaultRevealed": false
+      },
+      "capabilities": [
+        "appearance",
+        "content",
+        "focusable",
+        "pressed",
+        "revealed",
+        "disabled"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "pressed",
+        "revealed",
+        "loading",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "content",
+        "meta",
+        "quote",
+        "quote-author",
+        "more",
+        "stream",
+        "stream-chunk",
+        "caret",
+        "typing",
+        "retry",
+        "reactions",
+        "reaction",
+        "reaction-count"
+      ]
+    }
+  },
+  "docs": {
+    "message": {
+      "imports": {
+        "source": "import { provideMessageDefaults, SlBubble, SlBubbleCaret, SlBubbleContent, SlBubbleMeta, SlBubbleQuote, SlBubbleReaction, SlBubbleReactions, SlBubbleRetry, SlBubbleStream, SlBubbleTyping, SlMessage, SlMessageActions, SlMessageActivity, SlMessageActivityStep, SlMessageAuthor, SlMessageAvatar, SlMessageBody, SlMessageFooter, SlMessageGroup, SlMessageHeader, SlMessageReceipt, SlMessageTime, SlMessageVersions } from '@slotted/angular/message';",
+        "selector": "[slMessage], [slMessageGroup], [slMessageAvatar], [slMessageBody], [slMessageHeader], [slMessageAuthor], time[slMessageTime], [slMessageFooter], [slMessageReceipt], [slMessageActions], [slMessageActivity], [slMessageActivityStep], [slMessageVersions], [slBubble], [slBubbleContent], [slBubbleMeta], [slBubbleQuote], [slBubbleCaret], [slBubbleTyping], button[slBubbleRetry], [slBubbleReactions], button[slBubbleReaction]",
+        "exportAs": "slMessage, slMessageGroup, slBubble"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "article",
+          "required": true,
+          "purpose": "One message, named by its author. Carries data-ui=\"message\", data-align, data-layout, data-actions, data-status, and the states data-loading, data-invalid and data-read with aria-busy while it sends or streams."
+        },
+        {
+          "part": "group",
+          "element": "div",
+          "required": false,
+          "purpose": "A run from one sender. The rows stand two pixels apart, the facing corners on the sender’s side draw in, and the avatar column is kept on every row."
+        },
+        {
+          "part": "avatar",
+          "element": "div",
+          "required": false,
+          "purpose": "The box an Avatar stands in: at the foot of a run, or at the top in a thread."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "The column of the words: header, bubbles, attachments and footer, on the sender’s side."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "The name and, in a thread, the hour, set on the words’ inset; the dot between them is drawn, not written."
+        },
+        {
+          "part": "author",
+          "element": "span",
+          "required": false,
+          "purpose": "The sender’s name; while it is on the page the article is labelled by it."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "An hour, with dateTime for machines: in the header, in the footer or inside a bubble’s meta."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "What is said under the words: a receipt as a word, the versions, the actions."
+        },
+        {
+          "part": "receipt",
+          "element": "span",
+          "required": false,
+          "purpose": "Where the message is in its delivery. Inside a bubble’s meta a mark with its word hidden; elsewhere the word alone."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "A toolbar of the message’s own controls, revealed by the pointer, by focus and on touch."
+        },
+        {
+          "part": "activity",
+          "element": "div",
+          "required": false,
+          "purpose": "A raised card logging what a reply is doing before it has words; a status region."
+        },
+        {
+          "part": "activity-step",
+          "element": "div",
+          "required": false,
+          "purpose": "One step of the activity: complete with a tick, current with the shared ring and a travelling band."
+        },
+        {
+          "part": "versions",
+          "element": "div",
+          "required": false,
+          "purpose": "The pager between a reply’s versions, drawn with two or more; a group named Versions."
+        },
+        {
+          "part": "version-previous",
+          "element": "button",
+          "required": false,
+          "purpose": "The previous version; disabled at the first, and turned in a right-to-left page."
+        },
+        {
+          "part": "version-label",
+          "element": "span",
+          "required": false,
+          "purpose": "“2 of 3”, a polite live region so a reader hears where the pager landed."
+        },
+        {
+          "part": "version-next",
+          "element": "button",
+          "required": false,
+          "purpose": "The next version; disabled at the last, never wrapping."
+        }
+      ],
+      "api": [
+        {
+          "name": "align",
+          "type": "'start' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "slMessage",
+          "description": "The sender’s side; end is the reader’s own message"
+        },
+        {
+          "name": "layout",
+          "type": "'bubble' | 'thread'",
+          "defaultValue": "bubble",
+          "appliesTo": "slMessage, slMessageGroup",
+          "description": "Bubbles, or rows of a comment thread. Falls back to the group, then the token"
+        },
+        {
+          "name": "actionsVisibility",
+          "type": "'always' | 'hover'",
+          "defaultValue": "hover",
+          "appliesTo": "slMessage",
+          "description": "Actions at rest, or revealed by pointer, focus and on touch"
+        },
+        {
+          "name": "status",
+          "type": "'sending' | 'sent' | 'delivered' | 'read' | 'failed' | 'streaming'",
+          "defaultValue": "—",
+          "appliesTo": "slMessage",
+          "description": "Delivery: aria-busy and data-loading while sending or streaming, data-invalid when failed, data-read when read"
+        },
+        {
+          "name": "version",
+          "type": "number (model)",
+          "defaultValue": "0",
+          "appliesTo": "slMessage",
+          "description": "The version on screen, from 0; two-way with [(version)]"
+        },
+        {
+          "name": "defaultVersion",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slMessage",
+          "description": "An unbound [version] is the starting version; the component then holds it"
+        },
+        {
+          "name": "versionCount",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "slMessage",
+          "description": "How many versions exist; the pager draws with two or more"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<MessageMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slMessage",
+          "description": "Words laid over the language in force, key by key, for the row and every part and bubble inside it; a bubble outside a row speaks the language in force"
+        },
+        {
+          "name": "status",
+          "type": "'sending' | 'sent' | 'delivered' | 'read' | 'failed'",
+          "defaultValue": "the row’s",
+          "appliesTo": "slMessageReceipt",
+          "description": "The receipt’s own status"
+        },
+        {
+          "name": "status",
+          "type": "'complete' | 'current' | 'pending'",
+          "defaultValue": "current",
+          "appliesTo": "slMessageActivityStep",
+          "description": "Done with a tick, in progress with the ring, or waiting"
+        },
+        {
+          "name": "datetime",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "time[slMessageTime]",
+          "description": "The time element’s own machine-readable value"
+        },
+        {
+          "name": "exportAs",
+          "type": "slMessage, slMessageGroup",
+          "defaultValue": "—",
+          "appliesTo": "slMessage, slMessageGroup",
+          "description": "The instance: version(), requestVersion() and the resolved layout"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideMessageDefaults",
+          "type": "{ layout, actionsVisibility, variant, tone }",
+          "defaultValue": "—",
+          "appliesTo": "providers",
+          "description": "Sets them once; a group, a row or a bubble still wins"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slMessage",
+          "description": "Written on the article, it replaces the author as the article’s name"
+        },
+        {
+          "name": "the page’s element",
+          "type": "any",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "The page writes the element; the directive adds data-part and the wiring"
+        },
+        {
+          "name": "(keydown)",
+          "type": "handler",
+          "defaultValue": "—",
+          "appliesTo": "slMessageVersions",
+          "description": "Runs beside the pager’s own; preventDefault keeps the arrow"
+        }
+      ],
+      "events": [
+        {
+          "name": "versionChangeRequest",
+          "payload": "ChangeRequest<number>",
+          "when": "Before the version moves, bounded to the range. reason is pointer for a press and keyboard for Enter, Space or an arrow. cancel() keeps the version; [(version)] then stays."
+        },
+        {
+          "name": "(retry)",
+          "payload": "{ reason, source }",
+          "when": "When slBubbleRetry is pressed, after the page’s own (click); nothing is committed, the message is the page’s to send again."
+        }
+      ],
+      "accessibility": [
+        "Each message is an article labelled by its author, so a screen reader that moves between articles hears who spoke; an aria-label written on the article replaces the author.",
+        "Delivery is said three ways: a state attribute for styling, a mark for the eye, and a word for assistive technology — the word inside slBubbleMeta is visually hidden, and outside a bubble it is the only thing drawn.",
+        "A message that is sending or streaming is aria-busy, so its words are not announced as they land; the scroller’s log announces the finished row once.",
+        "The actions are a toolbar named Message actions; revealed by hover, they also appear on focus inside the row and are always painted where the pointer cannot hover.",
+        "The activity is a status region; the current step carries aria-current=\"step\", and its travelling band stops under reduced motion.",
+        "The version pager is a group with two named buttons and a polite live label; the buttons disable at the ends rather than wrapping."
+      ]
+    },
+    "bubble": {
+      "imports": {
+        "source": "import { provideMessageDefaults, SlBubble, SlBubbleCaret, SlBubbleContent, SlBubbleMeta, SlBubbleQuote, SlBubbleReaction, SlBubbleReactions, SlBubbleRetry, SlBubbleStream, SlBubbleTyping, SlMessage, SlMessageActions, SlMessageActivity, SlMessageActivityStep, SlMessageAuthor, SlMessageAvatar, SlMessageBody, SlMessageFooter, SlMessageGroup, SlMessageHeader, SlMessageReceipt, SlMessageTime, SlMessageVersions } from '@slotted/angular/message';",
+        "selector": "[slMessage], [slMessageGroup], [slMessageAvatar], [slMessageBody], [slMessageHeader], [slMessageAuthor], time[slMessageTime], [slMessageFooter], [slMessageReceipt], [slMessageActions], [slMessageActivity], [slMessageActivityStep], [slMessageVersions], [slBubble], [slBubbleContent], [slBubbleMeta], [slBubbleQuote], [slBubbleCaret], [slBubbleTyping], button[slBubbleRetry], [slBubbleReactions], button[slBubbleReaction]",
+        "exportAs": "slMessage, slMessageGroup, slBubble"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The bubble, written data-part=\"bubble\" because it nests inside a row. Carries data-variant, data-tone, data-clamped and data-revealed."
+        },
+        {
+          "part": "content",
+          "element": "div, button or a",
+          "required": true,
+          "purpose": "The painted surface. As a button it is a quick reply; as an a, a way out of the thread."
+        },
+        {
+          "part": "meta",
+          "element": "span",
+          "required": false,
+          "purpose": "The hour and the delivery mark riding at the end of the last line, inside the surface."
+        },
+        {
+          "part": "quote",
+          "element": "div or button",
+          "required": false,
+          "purpose": "The message a reply answers, at the head of the surface; a button when it jumps to it."
+        },
+        {
+          "part": "quote-author",
+          "element": "span",
+          "required": false,
+          "purpose": "The quoted message’s author, over its words."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "“Show more” under a clamped text, drawn only while it overflows; aria-expanded and aria-controls."
+        },
+        {
+          "part": "stream",
+          "element": "span",
+          "required": false,
+          "purpose": "The words of a streamed reply. Each arrival is split into words that enter as a wave of at most 320 ms; the text is whole in the DOM at once."
+        },
+        {
+          "part": "stream-chunk",
+          "element": "span",
+          "required": false,
+          "purpose": "One word still entering, out of a blur, after its delay; folded back into the text once it has entered."
+        },
+        {
+          "part": "caret",
+          "element": "span",
+          "required": false,
+          "purpose": "A dot after the last word of a streaming reply, breathing; hidden from assistive technology."
+        },
+        {
+          "part": "typing",
+          "element": "span",
+          "required": false,
+          "purpose": "Three dots in a wave, role img, named “Typing”; the bubble trails two circles."
+        },
+        {
+          "part": "retry",
+          "element": "button",
+          "required": false,
+          "purpose": "The round danger control beside a message that did not go, which sends it again."
+        },
+        {
+          "part": "reactions",
+          "element": "div",
+          "required": false,
+          "purpose": "A raised pill straddling the surface’s lower edge; a row under the words in a thread."
+        },
+        {
+          "part": "reaction",
+          "element": "button",
+          "required": false,
+          "purpose": "One reaction, aria-pressed; the reader’s own takes the accent’s tint and edge."
+        },
+        {
+          "part": "reaction-count",
+          "element": "span",
+          "required": false,
+          "purpose": "The count the consumer’s store holds, in tabular figures."
+        }
+      ],
+      "api": [
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline' | 'plain'",
+          "defaultValue": "soft",
+          "appliesTo": "slBubble",
+          "description": "The painting. Falls back to the row (end is solid, thread is plain), then the token"
+        },
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "slBubble",
+          "description": "The tone. Falls back to the row (end is accent), then the token"
+        },
+        {
+          "name": "maxLines",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slBubble",
+          "description": "Lines shown before the text is clamped behind “Show more”"
+        },
+        {
+          "name": "revealed",
+          "type": "boolean (model)",
+          "defaultValue": "false",
+          "appliesTo": "slBubble",
+          "description": "The clamped text shown whole; two-way with [(revealed)]"
+        },
+        {
+          "name": "defaultRevealed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slBubble",
+          "description": "An unbound [revealed] is the starting state; the component then holds it"
+        },
+        {
+          "name": "pressed",
+          "type": "boolean (model)",
+          "defaultValue": "false",
+          "appliesTo": "slBubbleReaction",
+          "description": "The reader’s own reaction; two-way with [(pressed)]"
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slBubbleReaction",
+          "description": "An unbound [pressed] is the starting state; the component then holds it"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "slBubbleReaction",
+          "description": "The count the page’s store holds"
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slBubbleStream",
+          "description": "The whole reply received so far; text that extends it enters word by word"
+        },
+        {
+          "name": "animate",
+          "type": "boolean",
+          "defaultValue": "the row is streaming",
+          "appliesTo": "slBubbleStream",
+          "description": "Let arrivals enter; the arrival that ends the stream enters too"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slBubbleReaction",
+          "description": "The native disabled; the reaction stays legible"
+        },
+        {
+          "name": "author",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slBubbleQuote",
+          "description": "The quoted message’s author"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "typing message",
+          "appliesTo": "slBubbleTyping",
+          "description": "The dots’ accessible name; the typing message when absent"
+        },
+        {
+          "name": "element",
+          "type": "div | button | a",
+          "defaultValue": "div",
+          "appliesTo": "slBubbleContent, slBubbleQuote",
+          "description": "The element the page writes the directive on: a button is a quick reply, an a a way out"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideMessageDefaults",
+          "type": "{ variant, tone }",
+          "defaultValue": "—",
+          "appliesTo": "providers",
+          "description": "The painting of a bubble nothing infers"
+        },
+        {
+          "name": "element",
+          "type": "button | a",
+          "defaultValue": "—",
+          "appliesTo": "slBubbleContent",
+          "description": "A button or an a keeps the painting, the states and the ring"
+        },
+        {
+          "name": "(click)",
+          "type": "handler",
+          "defaultValue": "—",
+          "appliesTo": "button[slBubbleRetry], button[slBubbleReaction]",
+          "description": "Runs first; preventDefault refuses the family’s request"
+        }
+      ],
+      "events": [
+        {
+          "name": "revealedChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before a clamped text opens or closes, from the more control. reason is pointer or keyboard; cancel() keeps it."
+        },
+        {
+          "name": "pressedChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "On slBubbleReaction, before the reader’s own reaction toggles. The count stays the page’s."
+        },
+        {
+          "name": "(click)",
+          "payload": "MouseEvent",
+          "when": "On a button[slBubbleQuote], the page scrolls to the quoted message with the scroller’s scrollToMessage."
+        }
+      ],
+      "accessibility": [
+        "A bubble paints; it adds no role. slBubbleContent written on a button or an a is that element, so its name is its words and it keeps the platform’s keys.",
+        "Painting is never the only signal: a danger bubble says its failure in words, the reader’s own side is the row’s alignment, and a reaction’s pressed state is aria-pressed.",
+        "“Show more” is a button with aria-expanded and aria-controls on the surface; the clamped text is never removed from the DOM.",
+        "The typing dots are one image with a name, and the caret is aria-hidden: neither is read as characters.",
+        "The retry control is named Try sending again and sits beside the surface it resends, after it in the reading order."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-avatar-size-md",
+    "--slotted-avatar-size-sm",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-radius",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-long",
+    "--slotted-duration-loop",
+    "--slotted-duration-loop-slow",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-emphasized",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-message-avatar-size",
+    "--slotted-message-bubble-padding-block",
+    "--slotted-message-bubble-padding-inline",
+    "--slotted-message-bubble-radius",
+    "--slotted-message-bubble-radius-joined",
+    "--slotted-message-bubble-share",
+    "--slotted-message-column-gap",
+    "--slotted-message-retry-state-layer",
+    "--slotted-message-run-gap",
+    "--slotted-message-stack-gap",
+    "--slotted-message-state-layer-active",
+    "--slotted-message-state-layer-hover",
+    "--slotted-message-thread-avatar-size",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-shadow-sm",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-surface",
+    "--slotted-surface-raised",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-solid-active",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-on-solid",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-success-border",
+    "--slotted-tone-success-on-solid",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-border",
+    "--slotted-tone-warning-on-solid",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One row with its side, layout, action visibility and status on the controls. Switch status to failed, read or streaming and watch the article’s own states and the receipt follow.",
+      "language": "html",
+      "source": "<article slMessage status=\"read\">\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>O payout de terça voltou com o erro R03.</div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "align",
+      "title": "Two sides, asked once",
+      "note": "align lives on the row. A bubble in an end row paints the accent’s fill by itself; a bubble in a start row the secondary tint. Nothing is repeated on the bubble.",
+      "language": "html",
+      "source": "<article slMessage align=\"end\">\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>Ótimo. Reenvio assim que chegar.</div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "avatar",
+      "title": "The avatar at the foot of the words",
+      "note": "The avatar sits on the line of the last bubble, not of the footer under it, and moves to the end side with the row. It is the avatar family’s small step, so it follows the density.",
+      "language": "html",
+      "source": "<article slMessage>\n  <div slMessageAvatar>\n    <span slAvatar name=\"Marta Silva\" size=\"sm\"></span>\n  </div>\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>Chega hoje à tarde.</div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "group",
+      "title": "A run from one sender",
+      "note": "Three rows, one avatar on the last. The rows stand two pixels apart and the corners facing each other on the sender’s side draw in to four; the earlier rows keep the avatar column without an empty slot.",
+      "language": "html",
+      "source": "<div slMessageGroup>\n  <article slMessage>\n    <div slMessageBody>\n      <div slBubble>\n        <div slBubbleContent>O payout de terça voltou com o erro R03.</div>\n      </div>\n    </div>\n  </article>\n  <article slMessage>\n    <div slMessageAvatar>\n      <span slAvatar name=\"Marta Silva\" size=\"sm\"></span>\n    </div>\n    <div slMessageBody>\n      <div slBubble>\n        <div slBubbleContent>Chega hoje à tarde.</div>\n      </div>\n    </div>\n  </article>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "header",
+      "title": "Who spoke, and when",
+      "note": "The header sets the name on the inset of the words, so the name stands over the first letter it names. The dot between name and hour is drawn by the stylesheet and never read aloud.",
+      "language": "html",
+      "source": "<div slMessageHeader>\n  <span slMessageAuthor>Marta Silva</span>\n  <time slMessageTime datetime=\"2026-09-30T09:38\">09:38</time>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "receipt",
+      "title": "Where a message is in its delivery",
+      "note": "Inside the bubble the hour and the mark ride at the end of the last line: a breathing clock while sending, one tick, two ticks, and two ticks in full ink once read. A message that did not go says so in a word under it, with the retry control beside it.",
+      "language": "html",
+      "source": "<article slMessage align=\"end\" status=\"read\">\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>\n        E marco a fatura como paga só depois do crédito.\n        <span slBubbleMeta>\n          <time slMessageTime datetime=\"2026-09-30T09:41\">09:41</time>\n          <span slMessageReceipt></span>\n        </span>\n      </div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "Actions the row reveals",
+      "note": "With actionsVisibility=\"hover\" the toolbar keeps its room and appears under the pointer and on focus anywhere in the row; on a screen that cannot hover it is always painted. Tab into the row to see it arrive.",
+      "language": "html",
+      "source": "<div slMessageFooter>\n  <div slMessageActions>\n    <button slIconButton aria-label=\"Copiar\" variant=\"ghost\" size=\"sm\">\n      <span slIcon><svg slGlyph name=\"copy\"></svg></span>\n    </button>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activity",
+      "title": "What a reply is doing before it has words",
+      "note": "Steps done carry a tick and step back into the muted ink; the current one carries the shared ring and a band of light across its words. Under reduced motion the band stops and the words stand in the plain ink.",
+      "language": "html",
+      "source": "<article slMessage status=\"streaming\">\n  <div slMessageBody>\n    <div slMessageActivity>\n      <div slMessageActivityStep status=\"complete\">Li o registo das 14:00 às 14:10</div>\n      <div slMessageActivityStep>A procurar a causa do p95…</div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "versions",
+      "title": "Versions of one reply",
+      "note": "The pager draws with two or more versions and stops at both ends. ArrowLeft and ArrowRight page from either control, mirrored in a right-to-left page; the label is a polite live region.",
+      "language": "html",
+      "source": "<article slMessage [versionCount]=\"3\" [(version)]=\"version\">\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>{{ drafts[version] }}</div>\n    </div>\n    <div slMessageFooter>\n      <div slMessageVersions></div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "layout",
+      "title": "A comment thread",
+      "note": "layout=\"thread\" sets every row at the start with the avatar at the top, the name inline, the words unframed and a band under the pointer; the actions float at the row’s top end on a raised plate.",
+      "language": "html",
+      "source": "<article slMessage layout=\"thread\">\n  <div slMessageAvatar>\n    <span slAvatar name=\"Emília Parker\"></span>\n  </div>\n  <div slMessageBody>\n    <div slMessageHeader>\n      <span slMessageAuthor>Emília Parker</span>\n      <time slMessageTime datetime=\"2026-09-30T09:12\">há 4 minutos</time>\n    </div>\n    <div slBubble>\n      <div slBubbleContent>Podemos nomear o dono do SSO antes da revisão?</div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One bubble with its variant, tone and clamp on the controls. A bubble outside a row takes the provider’s painting; inside one it takes the row’s side.",
+      "language": "html",
+      "source": "<div slBubble variant=\"soft\" tone=\"secondary\">\n  <div slBubbleContent>A conta de destino não existe no banco.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variants",
+      "title": "Four paintings",
+      "note": "solid is the tone’s fill, soft its tint with a rim that shows only in high contrast, outline its edge on the page, plain no box at all — the unframed answer that takes the whole row.",
+      "language": "html",
+      "source": "<div slBubble variant=\"solid\" tone=\"accent\">…</div>\n<div slBubble variant=\"soft\">…</div>\n<div slBubble variant=\"outline\">…</div>\n<div slBubble variant=\"plain\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tones",
+      "title": "Five tones",
+      "note": "accent and secondary write in the page’s ink; success, warning and danger in their own, because there the colour of the words is the point — and the words say it too.",
+      "language": "html",
+      "source": "<div slBubble tone=\"danger\">\n  <div slBubbleContent>O passo 5 falhou e o worker não voltou.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "interactive",
+      "title": "Quick replies and links",
+      "note": "Writing slBubbleContent on a button or an a makes the surface itself that element; it keeps the painting, the hover, a distinct press and the focus ring. A link keeps middle-click and its destination.",
+      "language": "html",
+      "source": "<div slBubble tone=\"accent\">\n  <button slBubbleContent type=\"button\" (click)=\"retryAll()\">Reenviar as duas agora</button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "quote",
+      "title": "Replying to a message",
+      "note": "The quote heads the surface in a block tinted with the surface’s own ink, author over up to three lines. Written on a button it asks, through (click), the scroller to take the reader to the quoted message.",
+      "language": "html",
+      "source": "<div slBubbleContent>\n  <button\n    slBubbleQuote\n    type=\"button\"\n    author=\"Marta Silva\"\n    (click)=\"chat.scrollToMessage('m2', { highlight: true })\"\n  >\n    A conta de destino não existe no banco.\n  </button>\n  Manda-me o IBAN quando chegar.\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "clamp",
+      "title": "A long reply, clamped",
+      "note": "maxLines shows the first lines and draws “Show more” only while the text overflows. The whole text stays in the DOM for copying and finding in the page; the chevron turns as it opens.",
+      "language": "html",
+      "source": "<div slBubble [maxLines]=\"3\">\n  <div slBubbleContent>{{ longAnswer }}</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "streaming",
+      "title": "A reply while it streams",
+      "note": "Words arrive in bursts. slBubbleStream splits each arrival into words, and a burst enters as a wave of at most 320 ms, each word out of a blur; nothing is held back from the DOM. The dot breathes after the last word. The row is aria-busy, so the words are not read as they land. Under reduced motion every word lands settled and the dot stands lit.",
+      "language": "html",
+      "source": "<article slMessage status=\"streaming\">\n  <div slMessageBody>\n    <div slBubble>\n      <div slBubbleContent>\n        <span slBubbleStream [text]=\"received\"></span><span slBubbleCaret></span>\n      </div>\n    </div>\n  </div>\n</article>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "typing",
+      "title": "Someone is writing",
+      "note": "Three dots rise and brighten in a wave in the writer’s bubble, which trails two circles of its own fill and edge and arrives rising from them. It is one image named for assistive technology.",
+      "language": "html",
+      "source": "<div slBubble>\n  <div slBubbleContent>\n    <span slBubbleTyping aria-label=\"Marta is typing\"></span>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reactions",
+      "title": "Reactions",
+      "note": "The pill straddles the lower edge on the side away from the sender and rises into the surface by half its inset, clear of the words. The reader’s own reaction takes the accent’s tint and edge; a disabled one stays legible.",
+      "language": "html",
+      "source": "<div slBubbleReactions>\n  <button slBubbleReaction [count]=\"4\" [(pressed)]=\"liked\">👍</button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content nobody chose",
+      "note": "A URL of a hundred characters breaks where it must instead of pushing the bubble past its share; an Arabic line in a Portuguese thread reads from its own side; a two-letter reply is still a bubble, not a pill.",
+      "language": "html",
+      "source": "<div slBubble>\n  <div slBubbleContent>{{ text }}</div>\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}