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

package/docs/message-scroller.json

@@ -0,0 +1,401 @@
+{
+  "family": "message-scroller",
+  "ui": "message-scroller",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Scrolling log of messages that follows new ones."
+  },
+  "axes": {
+    "defaultPosition": [
+      "start",
+      "end",
+      "last-anchor"
+    ],
+    "jumpDirection": [
+      "end",
+      "start"
+    ]
+  },
+  "members": {
+    "messageScroller": {
+      "nativeElement": "div",
+      "defaults": {
+        "follow": false,
+        "defaultPosition": "last-anchor",
+        "edgeThreshold": 8,
+        "scrollMargin": 0,
+        "peek": 64,
+        "preserveOnPrepend": true,
+        "busy": false
+      },
+      "capabilities": [
+        "live",
+        "overflow",
+        "content",
+        "focusable"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "current",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "viewport",
+        "content",
+        "item",
+        "separator",
+        "unread",
+        "loader",
+        "jump",
+        "jump-count"
+      ]
+    }
+  },
+  "docs": {
+    "messageScroller": {
+      "imports": {
+        "source": "import { provideMessageScrollerDefaults, SlMessageScroller, SlMessageScrollerContent, SlMessageScrollerItem, SlMessageScrollerJump, SlMessageScrollerLoader, SlMessageScrollerSeparator, SlMessageScrollerUnread, SlMessageScrollerViewport } from '@slotted/angular/message-scroller';",
+        "selector": "[slMessageScroller], [slMessageScrollerViewport], [slMessageScrollerContent], [slMessageScrollerItem], [slMessageScrollerSeparator], [slMessageScrollerUnread], [slMessageScrollerLoader], button[slMessageScrollerJump]",
+        "exportAs": "slMessageScroller"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The frame. Fills a bounded parent; the engine writes data-scrollable, data-following and data-pending on it while the reader scrolls."
+        },
+        {
+          "part": "viewport",
+          "element": "div",
+          "required": true,
+          "purpose": "The element that scrolls: role region, tabIndex 0, named Messages. Hidden, laid out, until the opening position applies."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The rows: role log with aria-relevant additions, aria-busy while a reply streams. Its bottom inset holds the room an anchored turn needs."
+        },
+        {
+          "part": "item",
+          "element": "div",
+          "required": true,
+          "purpose": "One row: data-message-id for jumps and prepends, data-anchor for a turn that starts an exchange."
+        },
+        {
+          "part": "separator",
+          "element": "div",
+          "required": false,
+          "purpose": "A day or a line the system writes; sticky keeps its pill at the top while its rows are in view."
+        },
+        {
+          "part": "unread",
+          "element": "div",
+          "required": false,
+          "purpose": "The accent line above the first message the reader has not seen."
+        },
+        {
+          "part": "loader",
+          "element": "div",
+          "required": false,
+          "purpose": "Older rows on their way: the shared ring and a status line at the head of the rows."
+        },
+        {
+          "part": "jump",
+          "element": "button",
+          "required": false,
+          "purpose": "Takes the reader to the latest row, or the first; inert and out of the tab order when there is nowhere to go."
+        },
+        {
+          "part": "jump-count",
+          "element": "span",
+          "required": false,
+          "purpose": "How many rows arrived out of view, in the control’s face and its name."
+        }
+      ],
+      "api": [
+        {
+          "name": "follow",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slMessageScroller",
+          "description": "Keep a growing reply in view while the reader is at the end"
+        },
+        {
+          "name": "defaultPosition",
+          "type": "'start' | 'end' | 'last-anchor'",
+          "defaultValue": "last-anchor",
+          "appliesTo": "slMessageScroller",
+          "description": "Where the conversation opens, applied once"
+        },
+        {
+          "name": "edgeThreshold",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "slMessageScroller",
+          "description": "Pixels from an edge that still count as at it"
+        },
+        {
+          "name": "scrollMargin",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slMessageScroller",
+          "description": "Pixels kept above a row the scroller scrolls to"
+        },
+        {
+          "name": "peek",
+          "type": "number",
+          "defaultValue": "64",
+          "appliesTo": "slMessageScroller",
+          "description": "Pixels of the previous row kept above an anchored turn"
+        },
+        {
+          "name": "preserveOnPrepend",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slMessageScroller",
+          "description": "Keep the reader’s row in place when older rows arrive above"
+        },
+        {
+          "name": "busy",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slMessageScroller",
+          "description": "A reply is streaming: the log is aria-busy and the change is announced once each way"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<MessageScrollerMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slMessageScroller",
+          "description": "Words laid over the language in force, key by key: the region’s name, the jump controls, the unread line, the loader and the two streaming announcements"
+        },
+        {
+          "name": "messageId",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slMessageScrollerItem",
+          "description": "The stable id jumps and prepends address the row by"
+        },
+        {
+          "name": "anchor",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slMessageScrollerItem",
+          "description": "The row starts a turn and is lifted to the top when it arrives"
+        },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slMessageScrollerSeparator",
+          "description": "Stays at the top while its rows are in view"
+        },
+        {
+          "name": "direction",
+          "type": "'end' | 'start'",
+          "defaultValue": "end",
+          "appliesTo": "button[slMessageScrollerJump]",
+          "description": "Which edge the control takes the reader to"
+        },
+        {
+          "name": "behavior",
+          "type": "ScrollBehavior",
+          "defaultValue": "smooth",
+          "appliesTo": "button[slMessageScrollerJump]",
+          "description": "Instant under reduced motion whatever it says"
+        },
+        {
+          "name": "exportAs",
+          "type": "slMessageScroller",
+          "defaultValue": "—",
+          "appliesTo": "slMessageScroller",
+          "description": "scrollToMessage(), scrollToEnd(), scrollToStart(), focus() and the state signal"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideMessageScrollerDefaults",
+          "type": "{ follow, defaultPosition, peek, scrollMargin }",
+          "defaultValue": "—",
+          "appliesTo": "providers",
+          "description": "Sets them once; a scroller still wins"
+        },
+        {
+          "name": "#chat=\"slMessageScroller\"",
+          "type": "SlMessageScroller",
+          "defaultValue": "—",
+          "appliesTo": "a template",
+          "description": "The commands and the state signal for a control anywhere in the template"
+        },
+        {
+          "name": "(click)",
+          "type": "handler",
+          "defaultValue": "—",
+          "appliesTo": "button[slMessageScrollerJump]",
+          "description": "Runs first; preventDefault refuses the jump"
+        }
+      ],
+      "events": [
+        {
+          "name": "(reachStart)",
+          "payload": "'scroll'",
+          "when": "Once each time the reader reaches the top by a gesture — the moment to ask for older messages."
+        },
+        {
+          "name": "(anchorChange)",
+          "payload": "{ id: string | null; reason: 'scroll' | 'programmatic' }",
+          "when": "When the anchored turn at the top of the view changes, by the reader’s scroll or by a jump."
+        },
+        {
+          "name": "(scrollableChange)",
+          "payload": "{ start, end }",
+          "when": "When the edges the viewport can still scroll toward change."
+        }
+      ],
+      "accessibility": [
+        "The viewport is a region named Messages with tabindex 0, so a keyboard reaches it and scrolls it with the arrows, Page Up, Page Down, Home and End the platform already binds.",
+        "The rows are a WAI-ARIA log with aria-relevant additions: a row that arrives is read, a row that grows is not; busy holds even the arrival back until a reply is whole.",
+        "A streaming reply is announced once when it starts and once when it ends through the shared live announcer, never word by word.",
+        "The jump control is a real button, inert and out of the tab order while there is nowhere to go, and its name carries the count of rows that arrived out of view.",
+        "Separators and the unread line are text in the flow, so they are read in order rather than skipped as decoration.",
+        "Under reduced motion every smooth scroll the family starts becomes instant, and a row arrives without rising."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-duration-long",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--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-line-height-xs",
+    "--slotted-message-scroller-fade",
+    "--slotted-message-scroller-gap",
+    "--slotted-message-scroller-jump-size",
+    "--slotted-message-scroller-padding",
+    "--slotted-message-scroller-state-layer-active",
+    "--slotted-message-scroller-state-layer-hover",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-shadow-md",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "A conversation in a frame 22 rem tall with follow, the opening position and the peek on the controls. Scroll up and the jump control arrives; press it and it leaves.",
+      "language": "html",
+      "source": "<div slMessageScroller follow>\n  <div slMessageScrollerViewport>\n    <div slMessageScrollerContent>\n      @for (message of messages; track message.id) {\n        <div slMessageScrollerItem [messageId]=\"message.id\" [anchor]=\"message.own\">\n          <article slMessage [align]=\"message.own ? 'end' : 'start'\">…</article>\n        </div>\n      }\n    </div>\n  </div>\n  <button slMessageScrollerJump></button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "opening",
+      "title": "Where a saved conversation opens",
+      "note": "last-anchor opens at the reader’s last question with the answer under it; end at the last line; start at the first. None of them shows the oldest rows first and then jumps.",
+      "language": "html",
+      "source": "<div slMessageScroller defaultPosition=\"last-anchor\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "follow",
+      "title": "Following a reply, and letting go",
+      "note": "With follow the view keeps the streaming reply in sight while the reader is at the end. Scroll up, select a word or press an arrow and it stops pulling; the jump control resumes it.",
+      "language": "html",
+      "source": "<div slMessageScroller follow [busy]=\"streaming\">…</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anchor",
+      "title": "A question lifted to the top",
+      "note": "An item with anchor that arrives is brought to the top with a peek of the row above it, and room is kept below so it can stand there while the answer is still short.",
+      "language": "html",
+      "source": "<div slMessageScroller [peek]=\"48\" [scrollMargin]=\"8\">\n  <div slMessageScrollerViewport>\n    <div slMessageScrollerContent>\n      <div slMessageScrollerItem anchor messageId=\"q7\">…</div>\n    </div>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "history",
+      "title": "Older messages without a jump",
+      "note": "Reach the top and (reachStart) asks for more; the rows arrive above and the one the reader was on stays exactly where it was. The loader holds the head while they travel.",
+      "language": "html",
+      "source": "<div slMessageScroller (reachStart)=\"loadOlder()\">\n  <div slMessageScrollerViewport>\n    <div slMessageScrollerContent>\n      @if (loading) {\n        <div slMessageScrollerLoader></div>\n      }\n      …\n    </div>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "jump",
+      "title": "Back to the latest, with a count",
+      "note": "Scroll up and send two messages from the other side: the control widens to say how many arrived out of view. It arrives on the enter curve and leaves faster than it came.",
+      "language": "html",
+      "source": "<div slMessageScroller>\n  …\n  <button slMessageScrollerJump></button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navigator",
+      "title": "Jumping to a turn from outside",
+      "note": "A footer outside the frame reads (anchorChange) and drives chat.scrollToMessage with highlight: the landed row glows in the accent’s tint and loses it slowly.",
+      "language": "html",
+      "source": "<div slMessageScroller #chat=\"slMessageScroller\" (anchorChange)=\"current = $event.id\">…</div>\n<button slButton (click)=\"chat.scrollToMessage(next, { highlight: true })\">\n  Pergunta seguinte\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "separators",
+      "title": "Days that stay at the top",
+      "note": "A sticky separator is a pill that stays at the top while its day is in view and gives way to the next day as it arrives; a separator that is not sticky keeps its rules.",
+      "language": "html",
+      "source": "<div slMessageScrollerItem>\n  <div slMessageScrollerSeparator sticky>Ontem</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "unread",
+      "title": "Where the reader stopped reading",
+      "note": "The unread line is a row like any other, in the accent, above the first message the reader has not seen; it is text in the flow, so it is read in order.",
+      "language": "html",
+      "source": "<div slMessageScrollerItem>\n  <div slMessageScrollerUnread></div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "busy",
+      "title": "Announcing a reply once",
+      "note": "While busy the log holds its announcements back; the change is said once each way — Responding, then Response complete — never word by word.",
+      "language": "html",
+      "source": "<div slMessageScroller [busy]=\"status === 'streaming'\">…</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/message-scroller.md

@@ -0,0 +1,212 @@
+<!-- index: ./index.md -->
+# message-scroller
+
+`data-ui="message-scroller"` · Scrolling log of messages that follows new ones.
+
+## Import
+
+```ts
+import { provideMessageScrollerDefaults, SlMessageScroller, SlMessageScrollerContent, SlMessageScrollerItem, SlMessageScrollerJump, SlMessageScrollerLoader, SlMessageScrollerSeparator, SlMessageScrollerUnread, SlMessageScrollerViewport } from '@slotted/angular/message-scroller';
+```
+
+Selector: `[slMessageScroller], [slMessageScrollerViewport], [slMessageScrollerContent], [slMessageScrollerItem], [slMessageScrollerSeparator], [slMessageScrollerUnread], [slMessageScrollerLoader], button[slMessageScrollerJump]` · exportAs: `slMessageScroller`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller follow>
+  <div slMessageScrollerViewport>
+    <div slMessageScrollerContent>
+      @for (message of messages; track message.id) {
+        <div slMessageScrollerItem [messageId]="message.id" [anchor]="message.own">
+          <article slMessage [align]="message.own ? 'end' : 'start'">…</article>
+        </div>
+      }
+    </div>
+  </div>
+  <button slMessageScrollerJump></button>
+</div>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | div | yes |
+| `viewport` | div | yes |
+| `content` | div | yes |
+| `item` | div | yes |
+| `separator` | div | no |
+| `unread` | div | no |
+| `loader` | div | no |
+| `jump` | button | no |
+| `jump-count` | span | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `follow` | `boolean` | false | slMessageScroller | Keep a growing reply in view while the reader is at the end |
+| `defaultPosition` | `'start' \| 'end' \| 'last-anchor'` | last-anchor | slMessageScroller | Where the conversation opens, applied once |
+| `edgeThreshold` | `number` | 8 | slMessageScroller | Pixels from an edge that still count as at it |
+| `scrollMargin` | `number` | 0 | slMessageScroller | Pixels kept above a row the scroller scrolls to |
+| `peek` | `number` | 64 | slMessageScroller | Pixels of the previous row kept above an anchored turn |
+| `preserveOnPrepend` | `boolean` | true | slMessageScroller | Keep the reader’s row in place when older rows arrive above |
+| `busy` | `boolean` | false | slMessageScroller | A reply is streaming: the log is aria-busy and the change is announced once each way |
+| `messages` | `PartialMessages<MessageScrollerMessages>` | — | slMessageScroller | Words laid over the language in force, key by key: the region’s name, the jump controls, the unread line, the loader and the two streaming announcements |
+| `messageId` | `string` | — | slMessageScrollerItem | The stable id jumps and prepends address the row by |
+| `anchor` | `boolean` | false | slMessageScrollerItem | The row starts a turn and is lifted to the top when it arrives |
+| `sticky` | `boolean` | false | slMessageScrollerSeparator | Stays at the top while its rows are in view |
+| `direction` | `'end' \| 'start'` | end | button[slMessageScrollerJump] | Which edge the control takes the reader to |
+| `behavior` | `ScrollBehavior` | smooth | button[slMessageScrollerJump] | Instant under reduced motion whatever it says |
+| `exportAs` | `slMessageScroller` | — | slMessageScroller | scrollToMessage(), scrollToEnd(), scrollToStart(), focus() and the state signal |
+| `provideMessageScrollerDefaults` | `{ follow, defaultPosition, peek, scrollMargin }` | — | providers | Sets them once; a scroller still wins |
+| `#chat="slMessageScroller"` | `SlMessageScroller` | — | a template | The commands and the state signal for a control anywhere in the template |
+| `(click)` | `handler` | — | button[slMessageScrollerJump] | Runs first; preventDefault refuses the jump |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `(reachStart)` | `'scroll'` | Once each time the reader reaches the top by a gesture — the moment to ask for older messages. |
+| `(anchorChange)` | `{ id: string \| null; reason: 'scroll' \| 'programmatic' }` | When the anchored turn at the top of the view changes, by the reader’s scroll or by a jump. |
+| `(scrollableChange)` | `{ start, end }` | When the edges the viewport can still scroll toward change. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `defaultPosition` | `start`, `end`, `last-anchor` | `last-anchor` |
+| `jumpDirection` | `end`, `start` | — |
+
+## Rules
+
+- The viewport is a region named Messages with tabindex 0, so a keyboard reaches it and scrolls it with the arrows, Page Up, Page Down, Home and End the platform already binds.
+- The rows are a WAI-ARIA log with aria-relevant additions: a row that arrives is read, a row that grows is not; busy holds even the arrival back until a reply is whole.
+- A streaming reply is announced once when it starts and once when it ends through the shared live announcer, never word by word.
+- The jump control is a real button, inert and out of the tab order while there is nowhere to go, and its name carries the count of rows that arrived out of view.
+- Separators and the unread line are text in the flow, so they are read in order rather than skipped as decoration.
+- Under reduced motion every smooth scroll the family starts becomes instant, and a row arrives without rising.
+
+## Tokens
+
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--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-line-height-xs`, `--slotted-message-scroller-fade`, `--slotted-message-scroller-gap`, `--slotted-message-scroller-jump-size`, `--slotted-message-scroller-padding`, `--slotted-message-scroller-state-layer-active`, `--slotted-message-scroller-state-layer-hover`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`
+
+## Examples
+
+### Where a saved conversation opens
+
+last-anchor opens at the reader’s last question with the answer under it; end at the last line; start at the first. None of them shows the oldest rows first and then jumps.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller defaultPosition="last-anchor">…</div>
+```
+
+### Following a reply, and letting go
+
+With follow the view keeps the streaming reply in sight while the reader is at the end. Scroll up, select a word or press an arrow and it stops pulling; the jump control resumes it.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller follow [busy]="streaming">…</div>
+```
+
+### A question lifted to the top
+
+An item with anchor that arrives is brought to the top with a peek of the row above it, and room is kept below so it can stand there while the answer is still short.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller [peek]="48" [scrollMargin]="8">
+  <div slMessageScrollerViewport>
+    <div slMessageScrollerContent>
+      <div slMessageScrollerItem anchor messageId="q7">…</div>
+    </div>
+  </div>
+</div>
+```
+
+### Older messages without a jump
+
+Reach the top and (reachStart) asks for more; the rows arrive above and the one the reader was on stays exactly where it was. The loader holds the head while they travel.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller (reachStart)="loadOlder()">
+  <div slMessageScrollerViewport>
+    <div slMessageScrollerContent>
+      @if (loading) {
+        <div slMessageScrollerLoader></div>
+      }
+      …
+    </div>
+  </div>
+</div>
+```
+
+### Back to the latest, with a count
+
+Scroll up and send two messages from the other side: the control widens to say how many arrived out of view. It arrives on the enter curve and leaves faster than it came.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller>
+  …
+  <button slMessageScrollerJump></button>
+</div>
+```
+
+### Jumping to a turn from outside
+
+A footer outside the frame reads (anchorChange) and drives chat.scrollToMessage with highlight: the landed row glows in the accent’s tint and loses it slowly.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller #chat="slMessageScroller" (anchorChange)="current = $event.id">…</div>
+<button slButton (click)="chat.scrollToMessage(next, { highlight: true })">
+  Pergunta seguinte
+</button>
+```
+
+### Days that stay at the top
+
+A sticky separator is a pill that stays at the top while its day is in view and gives way to the next day as it arrives; a separator that is not sticky keeps its rules.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScrollerItem>
+  <div slMessageScrollerSeparator sticky>Ontem</div>
+</div>
+```
+
+### Where the reader stopped reading
+
+The unread line is a row like any other, in the accent, above the first message the reader has not seen; it is text in the flow, so it is read in order.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScrollerItem>
+  <div slMessageScrollerUnread></div>
+</div>
+```
+
+### Announcing a reply once
+
+While busy the log holds its announcements back; the change is said once each way — Responding, then Response complete — never word by word.
+
+Excerpt — not a complete module
+
+```html
+<div slMessageScroller [busy]="status === 'streaming'">…</div>
+```