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

package/docs/notification-center.json

@@ -0,0 +1,664 @@
+{
+  "family": "notification-center",
+  "ui": "notification-center",
+  "binding": "angular",
+  "catalog": {
+    "group": "Feedback",
+    "summary": "Read and unread notifications with actions."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md"
+    ],
+    "level": [
+      "2",
+      "3",
+      "4"
+    ],
+    "growing": [
+      "none",
+      "button",
+      "scroll"
+    ],
+    "arrivals": [
+      "hold",
+      "show"
+    ],
+    "timeFormat": [
+      "relative",
+      "absolute"
+    ],
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "controls": [
+      "both",
+      "read",
+      "dismiss",
+      "none"
+    ]
+  },
+  "members": {
+    "notificationCenter": {
+      "nativeElement": "section",
+      "defaults": {
+        "size": "md",
+        "level": "2",
+        "growing": "none",
+        "arrivals": "hold",
+        "timeFormat": "relative",
+        "view": "all",
+        "loading": false,
+        "controls": "both"
+      },
+      "capabilities": [
+        "current",
+        "read",
+        "removable",
+        "live",
+        "size",
+        "loading",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "focus-visible",
+        "read",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "count",
+        "mark-all",
+        "actions",
+        "views",
+        "fresh",
+        "feed",
+        "group",
+        "group-label",
+        "item",
+        "visual",
+        "content",
+        "description",
+        "time",
+        "controls",
+        "read-toggle",
+        "dismiss",
+        "more",
+        "empty",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "notificationCenter": {
+      "imports": {
+        "source": "import { SlNotificationCenter, SlNotificationItem, SlNotificationVisual, SlNotificationActions, SlNotificationCenterActions, SlNotificationCenterFooter, SlNotificationCenterEmpty, provideNotificationCenterDefaults } from '@slotted/angular/notification-center';",
+        "selector": "section[slNotificationCenter], ng-template[slNotificationItem], ng-template[slNotificationVisual], ng-template[slNotificationActions], [slNotificationCenterActions], [slNotificationCenterFooter], [slNotificationCenterEmpty]",
+        "exportAs": "slNotificationCenter"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "section[slNotificationCenter]",
+          "required": true,
+          "purpose": "The region, carrying data-ui=\"notification-center\", the seven axes as data attributes, data-loading, and aria-labelledby the title. It is the container query every breakpoint reads."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": true,
+          "purpose": "The row above the views: the title with the unread count, mark-all, and the consumer’s actions. A control that wraps lands at the end of its own line."
+        },
+        {
+          "part": "title",
+          "element": "h2, h3 or h4 per level; on an item, a or span",
+          "required": true,
+          "purpose": "On the header, the heading messages.title names the region and the feed by. On an item, the words that name it — a link when href, text otherwise — clamped at two lines with the whole text kept."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": false,
+          "purpose": "A chip beside words on the type scale’s smallest step, in tabular figures: the unread total after the header’s title in the accent pair, a view’s count in its tab. One measure for both dimensions, so a single digit is a circle. Absent at zero."
+        },
+        {
+          "part": "mark-all",
+          "element": "span around a Button",
+          "required": true,
+          "purpose": "The ghost Button that asks readRequest for every unread shown key; disabled while nothing is unread."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "On the header, the consumer’s [slNotificationCenterActions] element after mark-all — a preferences link, a menu. On an item, the consumer’s controls for that item under its time, from the slNotificationActions template."
+        },
+        {
+          "part": "views",
+          "element": "div around a Tabs list",
+          "required": false,
+          "purpose": "The strip over views — the tabs family with its list alone and no track, every tab naming the feed with aria-controls. Absent when views holds one entry."
+        },
+        {
+          "part": "fresh",
+          "element": "button",
+          "required": false,
+          "purpose": "The held arrivals: a pill in the accent pair naming their count, between the strip and the feed. Present while keys are held; PageUp from the first article reaches it."
+        },
+        {
+          "part": "feed",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"feed\", aria-labelledby the title, aria-busy while loading, the id every tab controls. The keys of the pattern are handled here."
+        },
+        {
+          "part": "group",
+          "element": "div",
+          "required": false,
+          "purpose": "Under groupBy: the items filed under one label, in the order the labels first appear."
+        },
+        {
+          "part": "group-label",
+          "element": "h3, h4 or h5 — one rank below the title",
+          "required": false,
+          "purpose": "The heading of a group, in small capitals on the muted ink."
+        },
+        {
+          "part": "item",
+          "element": "article",
+          "required": false,
+          "purpose": "One notification: tabindex=\"0\", aria-labelledby its title, aria-describedby its description, aria-posinset and aria-setsize, data-key, data-tone, data-read once read. Unread stands on a wash in the tone with a semibold title."
+        },
+        {
+          "part": "visual",
+          "element": "span",
+          "required": false,
+          "purpose": "The slNotificationVisual template at the small step. For an item with a tone and no visual, the family’s own: the tone’s glyph filled — the tone’s surface as a disc under the ringed glyph, at the avatar’s diameter. Absent when the item has neither."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": false,
+          "purpose": "Title, description, time, actions, in that order, or what the slNotificationItem template renders. Its first line is centred on the visual."
+        },
+        {
+          "part": "description",
+          "element": "p",
+          "required": false,
+          "purpose": "The body, clamped at three lines with the whole text kept in the DOM."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "datetime holds the ISO value; the words are relative — há 2 horas — with the absolute reading in title, or absolute under timeFormat=\"absolute\"."
+        },
+        {
+          "part": "controls",
+          "element": "div",
+          "required": false,
+          "purpose": "The family’s two controls at the inline end, muted at rest and in the text ink on the row under the pointer or holding focus. Each opens a tooltip with its name on hover, on keyboard focus and on a held touch. Which exist is the controls axis; below 320 pixels they drop under the content, and under a coarse pointer they grow to the comfortable target."
+        },
+        {
+          "part": "read-toggle",
+          "element": "button",
+          "required": false,
+          "purpose": "The check glyph while unread, named messages.markRead; the dot glyph while read, named messages.markUnread. Asks readRequest for this key."
+        },
+        {
+          "part": "dismiss",
+          "element": "button",
+          "required": false,
+          "purpose": "The x glyph, named messages.dismiss. Asks removeRequest for this key."
+        },
+        {
+          "part": "more",
+          "element": "button, or div",
+          "required": false,
+          "purpose": "Under growing=\"button\" the button asking for the next page; under \"scroll\" the sentinel an IntersectionObserver watches; while loading with items shown, the polite waiting row. Absent under \"none\"."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "After a feed that holds nothing: the consumer’s [slNotificationCenterEmpty] result-state, or messages.empty — messages.caughtUp under the unread view."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s [slNotificationCenterFooter] element, centred. Absent when not written."
+        }
+      ],
+      "api": [
+        {
+          "name": "items",
+          "type": "readonly NotificationItem[]",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "The consumer’s array: key, title, description, time (a PlainDateTime or an ISO instant), read, href, tone, data. Required. The family holds none of its facts"
+        },
+        {
+          "name": "view",
+          "type": "string | undefined",
+          "defaultValue": "all",
+          "appliesTo": "SlNotificationCenter",
+          "description": "The current view, as a model: [(view)] for two-way, [view] alone to read. all shows every shown item; unread the ones whose read is false; any other value what the consumer gave"
+        },
+        {
+          "name": "defaultView",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "The view an unbound centre starts on, read once. With neither, the first entry of views"
+        },
+        {
+          "name": "views",
+          "type": "readonly { value, label, count? }[]",
+          "defaultValue": "all, unread",
+          "appliesTo": "SlNotificationCenter",
+          "description": "The strip’s entries. Unstated, the built-in All and Unread with the unread count; one entry draws no strip"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "defaultValue": "md",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "sm for the popover: the small type steps, tighter insets, the small inner-control box, a floor width of 22rem. md for the page"
+        },
+        {
+          "name": "level",
+          "type": "'2' | '3' | '4'",
+          "defaultValue": "2",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "The rank of the header’s heading; group labels take the rank below"
+        },
+        {
+          "name": "growing",
+          "type": "'none' | 'button' | 'scroll'",
+          "defaultValue": "none",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "How more is loaded: never, on a button, or when the sentinel under the feed enters the scrollport"
+        },
+        {
+          "name": "arrivals",
+          "type": "'hold' | 'show'",
+          "defaultValue": "hold",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "Whether a key that arrives while focus is in the feed or the feed’s scroller is past its start waits behind fresh. show holds nothing"
+        },
+        {
+          "name": "timeFormat",
+          "type": "'relative' | 'absolute'",
+          "defaultValue": "relative",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "How time is written: há 2 horas with the absolute reading in title, or the absolute reading alone"
+        },
+        {
+          "name": "controls",
+          "type": "'both' | 'read' | 'dismiss' | 'none'",
+          "defaultValue": "both",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults",
+          "description": "Which of the family’s two item controls are drawn"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlNotificationCenter",
+          "description": "aria-busy on the feed and data-loading on the host; skeleton rows while nothing is loaded, the waiting row under the feed otherwise"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "How many items exist in all, for aria-setsize. Unstated, the loaded number under growing=\"none\" and -1 while more may come"
+        },
+        {
+          "name": "groupBy",
+          "type": "(item) => string",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "Files each item under a label, in the order the labels first appear; each group gets a heading one rank below the title"
+        },
+        {
+          "name": "locale, timeZone, now",
+          "type": "string, string, number",
+          "defaultValue": "the language in force, the runtime’s",
+          "appliesTo": "SlNotificationCenter, provideNotificationCenterDefaults (timeZone)",
+          "description": "What the time is formatted with. State now for a stable server render of a relative time"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<NotificationCenterMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "Words laid over the language in force, key by key: title, markAll, markRead, markUnread, dismiss, fresh {count}, unread {count}, loadMore, loading, empty, caughtUp, all, unreadView, views"
+        },
+        {
+          "name": "[slNotificationCenterActions], [slNotificationCenterFooter], [slNotificationCenterEmpty]",
+          "type": "projected elements",
+          "defaultValue": "—",
+          "appliesTo": "inside the host",
+          "description": "The consumer’s controls in the header after mark-all; the link from the popover to the page; the result-state in place of the family’s empty words"
+        },
+        {
+          "name": "ng-template[slNotificationItem], [slNotificationVisual], [slNotificationActions]",
+          "type": "templates with NotificationItemContext",
+          "defaultValue": "—",
+          "appliesTo": "inside the host",
+          "description": "The item’s content, its visual, its actions. The context carries the item as $implicit, the position, the resolved tone, the formatted time and the ids for the title and the description; the article, its wiring and its controls stay the family’s"
+        },
+        {
+          "name": "exportAs slNotificationCenter",
+          "type": "SlNotificationCenter",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "focus(), which lands on fresh when arrivals are held and on the first article otherwise; reveal(); markAllRead(); selectView(value, reason) — the last three with the reason programmatic when unstated"
+        },
+        {
+          "name": "provideNotificationCenterDefaults",
+          "type": "{ size, level, growing, arrivals, timeFormat, controls, timeZone }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The decisions an application takes once. A centre that states any of them itself still wins"
+        },
+        {
+          "name": "host attributes",
+          "type": "section[slNotificationCenter]",
+          "defaultValue": "—",
+          "appliesTo": "SlNotificationCenter",
+          "description": "aria-*, data-*, class, style and listeners reach the section; a consumer’s aria-label or aria-labelledby written on the element replaces the title wiring"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "viewRequest",
+          "payload": "ChangeRequest<string | undefined>",
+          "when": "Before the view moves. The request carries the new value, the value it replaces, the reason — pointer or keyboard from the strip, programmatic from selectView() — the originating event as source, and cancel(), which refuses the move before the model is written."
+        },
+        {
+          "name": "viewChange",
+          "payload": "string | undefined",
+          "when": "After the view moved: the model’s own output, for [(view)]."
+        },
+        {
+          "name": "readRequest",
+          "payload": "{ keys, read, reason, event?, cancelled, cancel() }",
+          "when": "When the reader presses a read-toggle (one key), mark-all (every unread shown key) or the instance’s markAllRead() — reasons pointer, keyboard, programmatic. The family marks nothing itself: the store answers by changing items."
+        },
+        {
+          "name": "removeRequest",
+          "payload": "{ key, reason, event?, cancelled, cancel() }",
+          "when": "When the reader presses dismiss, or Delete on an article — reasons pointer, keyboard. Cancelling a keyboard removal keeps focus where it is; otherwise focus moves to the next article, the previous, or the first control of the region."
+        },
+        {
+          "name": "openRequest",
+          "payload": "{ key, reason, event?, cancelled, cancel() }",
+          "when": "Before a title link navigates — reasons pointer, keyboard. cancel() prevents the navigation."
+        },
+        {
+          "name": "revealRequest",
+          "payload": "{ count, reason, event?, cancelled, cancel() }",
+          "when": "Before held arrivals are shown: a press of fresh (pointer, keyboard) or the instance’s reveal() (programmatic). A keyboard reveal moves focus to the first revealed article."
+        },
+        {
+          "name": "loadMoreRequest",
+          "payload": "{ reason, event?, cancelled, cancel() }",
+          "when": "When the reader presses more (pointer, keyboard) or the sentinel enters the scrollport (scroll). The consumer loads the page and appends to items."
+        },
+        {
+          "name": "unreadChange",
+          "payload": "number",
+          "when": "A fact, not a request: on the first render and whenever the unread count among items changes, for the bell in the top navigation."
+        },
+        {
+          "name": "(keydown), (click), (focus) on the host",
+          "payload": "the element’s own events",
+          "when": "Whenever the section fires them. The feed keys are handled on the feed, and a defaultPrevented keydown is left alone."
+        }
+      ],
+      "accessibility": [
+        "The governing pattern is the WAI-ARIA Authoring Practices Feed (w3.org/WAI/ARIA/apg/patterns/feed/): the feed is role=\"feed\" named by the title, every item is an article with tabindex=\"0\", aria-labelledby its title, aria-describedby its description, aria-posinset its position and aria-setsize the consumer’s count, the loaded number under growing=\"none\", or -1 while more may come. PageDown and PageUp move between articles, Control+End and Control+Home leave the feed on either side, and the feed is aria-busy while a page is on its way. The keys are @slotted/core/timeline’s, shared with the timeline family.",
+        "The root is a section — a region — named by aria-labelledby its own heading, Notifications in English, so a reader finds it in the landmark list under the words it shows; a consumer’s aria-label or aria-labelledby written on the element wins. The strip is the tabs family’s list with the feed as its one panel: every tab carries aria-controls naming the feed, and ArrowLeft, ArrowRight, Home and End are the tabs family’s.",
+        "Read is said three ways and none of them is colour alone: the wash under the row, the semibold title, and the read-toggle’s name — Mark as read while unread, Mark as unread once read — so a reader hears the state on the control that changes it. The family’s tone glyphs are all circles; a triangle is refused in this library.",
+        "Held arrivals are announced politely once per change of their count, and the unread count once per change after the first, through the shared live announcer. A keyboard reveal moves focus to the first revealed article; a keyboard removal moves it to the next article, the previous, or the first control of the region, so focus never lands on a row that left.",
+        "While loading with nothing loaded, the three skeleton rows are aria-hidden and the feed is busy; the tabs stay, because the views are known before the items are. The article’s focus ring is drawn inward because the rows touch, and every control’s ring outward; the controls are muted at rest and take the text ink on the row under the pointer or holding focus, so they are visible before they are needed and legible when they are."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-avatar-size-sm",
+    "--slotted-avatar-size-xs",
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-foreground",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-highlight-tint-opacity",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-notification-center-background",
+    "--slotted-notification-center-border",
+    "--slotted-notification-center-description-clamp",
+    "--slotted-notification-center-gap-md",
+    "--slotted-notification-center-gap-sm",
+    "--slotted-notification-center-inset-block-md",
+    "--slotted-notification-center-inset-block-sm",
+    "--slotted-notification-center-inset-inline-md",
+    "--slotted-notification-center-inset-inline-sm",
+    "--slotted-notification-center-min-inline-size-sm",
+    "--slotted-notification-center-scrollbar-thumb-color",
+    "--slotted-notification-center-scrollbar-track-color",
+    "--slotted-notification-center-title-clamp",
+    "--slotted-notification-center-title-size-md",
+    "--slotted-notification-center-title-size-sm",
+    "--slotted-radius-full",
+    "--slotted-space-1",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-8",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Five notifications of the Nexora sales desk over a store that answers every request. Mark one read, dismiss one, switch to Unread, and use the controls below to change the size, the rank, how more loads and which item controls exist.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  [items]=\"items()\"\n  [now]=\"now\"\n  (readRequest)=\"markRead($event.keys, $event.read)\"\n  (removeRequest)=\"remove($event.key)\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, written out",
+      "note": "The header with the title, its count and a preferences link; the strip with three views; the feed grouped under Hoje and Ontem with an avatar, a family visual and no visual; a button for more; a footer link. Every part the contract names, in one box.",
+      "language": "html",
+      "source": "<section slNotificationCenter growing=\"button\" [items]=\"items()\" [views]=\"views\" [groupBy]=\"dayOf\">\n  <div slNotificationCenterActions><a slLink href=\"/preferencias\">Preferências</a></div>\n  <ng-template slNotificationVisual let-item>\n    <span slAvatar decorative [name]=\"item.data.name\" shape=\"circle\" size=\"sm\"></span>\n  </ng-template>\n  <div slNotificationCenterFooter>\n    <a slLink href=\"/notificacoes\">Ver todas as notificações</a>\n  </div>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "read",
+      "title": "Read is the store’s fact",
+      "note": "Press the check on an unread row: the family asks readRequest with the key and true, and the row changes only when the store answers. The count in the title and the tab follow the items; mark-all asks for every unread shown key at once and is disabled at zero.",
+      "language": "ts",
+      "source": "class Inbox {\n  readonly items = signal<NotificationItem[]>([]);\n\n  markRead(keys: readonly string[], read: boolean) {\n    this.items.update((items) =>\n      items.map((item) => (keys.includes(item.key) ? { ...item, read } : item)),\n    );\n  }\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "views",
+      "title": "Views",
+      "note": "The built-in strip: All and Unread, the second with its count; the family filters the unread view itself. Below, the consumer’s own views — the family shows what it is given for each — and a view that refuses to leave All.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  [items]=\"view() === 'mentions' ? mentions() : items()\"\n  [views]=\"views()\"\n  [(view)]=\"view\"\n  (viewRequest)=\"$event.value === 'archived' ? $event.cancel() : null\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "arrivals",
+      "title": "Arrivals are held while the reader reads",
+      "note": "Focus an article, then press Chegam duas: the list stays where it is and a pill counts what arrived. Press the pill — or PageUp from the first article, then Enter — and the two show at the top with focus on the first. Press Chegam duas without focus in the feed and they show at once. Under arrivals=\"show\" nothing is ever held.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  arrivals=\"hold\"\n  [items]=\"items()\"\n  (revealRequest)=\"track('notifications.reveal', $event.count, $event.reason)\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "groups",
+      "title": "Groups",
+      "note": "groupBy files each item under a label — the day here — in the order the items give; the label is a heading one rank below the title and the positions run across the groups.",
+      "language": "html",
+      "source": "<section slNotificationCenter [items]=\"items()\" [groupBy]=\"dayOf\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "growing",
+      "title": "Growing",
+      "note": "growing=\"button\" draws Load more; press it, the waiting row says Loading notifications and two older items arrive. growing=\"scroll\" replaces the button with a sentinel that asks with the reason scroll when it enters the scrollport. aria-setsize is -1 while more may come and the consumer’s count when stated.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  growing=\"scroll\"\n  [count]=\"total()\"\n  [items]=\"items()\"\n  [loading]=\"loading()\"\n  (loadMoreRequest)=\"loadPage($event.reason)\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "Actions and controls",
+      "note": "Two slots for the consumer: the header’s actions after mark-all, and an item’s actions under its time. The family’s own two controls are the controls axis: both, read alone, dismiss alone, or none for a feed whose store has no per-item read or removal.",
+      "language": "html",
+      "source": "<section slNotificationCenter controls=\"dismiss\" [items]=\"items()\">\n  <div slNotificationCenterActions><a slLink href=\"/preferencias\">Preferências</a></div>\n  <ng-template slNotificationActions let-item>\n    @if (item.data.shipment) {\n      <button slButton size=\"sm\" type=\"button\">Ver expedição</button>\n    }\n  </ng-template>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hosts",
+      "title": "Hosts",
+      "note": "The bell is a popover trigger with the store’s unread count — the centre reports the same through unreadChange while it is mounted; inside, the centre at size=\"sm\" with a footer to the page. Open it, press PageDown through the articles, press Escape. The page host is the same family at size=\"md\" with groups.",
+      "language": "html",
+      "source": "<ng-container slPopover side=\"bottom\" align=\"end\" size=\"lg\">\n  <button\n    slButton\n    slPopoverTrigger\n    type=\"button\"\n    [attr.aria-label]=\"'Notificações, ' + unread() + ' não lidas'\"\n  >\n    <ng-icon name=\"lucideBell\"></ng-icon>\n  </button>\n  <ng-template slPopoverLayer>\n    <div slPopoverContent aria-label=\"Notificações\">\n      <section slNotificationCenter size=\"sm\" level=\"3\" [items]=\"items()\">\n        <div slNotificationCenterFooter>\n          <a slLink href=\"/notificacoes\">Ver todas as notificações</a>\n        </div>\n      </section>\n    </div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Loading",
+      "note": "With nothing loaded, three skeleton rows stand in the item’s inset — a circle for the visual, two lines for the words — hidden from assistive technology, and the feed is busy. With items loaded and more on the way, the waiting row under the feed says so politely.",
+      "language": "html",
+      "source": "<section slNotificationCenter loading [items]=\"[]\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Empty",
+      "note": "A feed with nothing shows messages.empty; the unread view with nothing unread shows messages.caughtUp — All caught up. A [slNotificationCenterEmpty] element replaces both with a result-state of the consumer’s own.",
+      "language": "html",
+      "source": "<section slNotificationCenter [items]=\"[]\">\n  <section slNotificationCenterEmpty slResultState status=\"success\" reach=\"inline\" live=\"off\">\n    <div slResultStateContent>\n      <div slResultStateTitle>Tudo lido</div>\n      <p slResultStateDescription>Nada aguarda a sua atenção.</p>\n    </div>\n  </section>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Sizes and ranks",
+      "note": "size=\"sm\" for a popover — the small type steps, tighter insets, the small inner-control box, a 24-pixel family visual and a floor width of 22rem — and \"md\" for a page. level sets the heading rank: 2 on a page, 3 in a popover under a page’s h2, 4 deeper; group labels take the rank below.",
+      "language": "html",
+      "source": "<section slNotificationCenter size=\"sm\" level=\"3\" [items]=\"items()\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Extreme content",
+      "note": "A title of thirty words clamps at two lines, a description at three, and the whole text stays in the DOM; a reference with no spaces breaks at any character. Below 320 pixels the controls drop under the content instead of squeezing it; the phone room shows the header wrapping.",
+      "language": "css",
+      "source": "[data-ui='notification-center'] {\n  --slotted-notification-center-title-clamp: 1;\n  --slotted-notification-center-description-clamp: 2;\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "The families a centre is made of: Avatar in the visual template, Button in the item’s actions and in mark-all, Tabs in the strip, Skeleton while loading, ResultState when empty, Link in the header and the footer. The slNotificationItem template substitutes the content of a row — a Badge with the tone here — while the article, its wiring and its controls stay the family’s.",
+      "language": "html",
+      "source": "<section slNotificationCenter [items]=\"items()\">\n  <ng-template slNotificationItem let-item let-time=\"time\" let-tone=\"tone\" let-ids=\"ids\">\n    <span data-part=\"title\" [id]=\"ids.title\">{{ item.title }}</span>\n    <span slBadge size=\"sm\" variant=\"soft\" [tone]=\"tone\">{{ item.data.category }}</span>\n    <time data-part=\"time\" [attr.datetime]=\"time.dateTime\">{{ time.text }}</time>\n  </ng-template>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Defaults and the instance",
+      "note": "Two centres under one provider: neither states a size or a growing mode, and both read small and paged by button; the second states its own controls and wins. The instance, reached through exportAs, focuses the first article, reveals held arrivals and marks every shown item read with the reason programmatic.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [\n    provideNotificationCenterDefaults({\n      growing: 'button',\n      size: 'sm',\n      timeZone: 'Europe/Lisbon',\n    }),\n  ],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab reaches mark-all, the selected tab, fresh, then each article and the two controls inside it, then more and the footer. On an article: PageDown and PageUp move between articles, PageUp on the first reaches fresh, Control+End and Control+Home leave the feed, Delete asks to remove with the reason keyboard and moves focus to the neighbour. Enter on the title asks openRequest before the link navigates.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  [items]=\"items()\"\n  (openRequest)=\"canOpen($event.key) || $event.cancel()\"\n  (removeRequest)=\"\n    $event.reason === 'keyboard' && !confirmed($event.key) ? $event.cancel() : remove($event.key)\n  \"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "Accessibility",
+      "note": "The region is named by its heading, the feed by the same, every article by its title and described by its body; the tabs name the feed. Held arrivals and the unread count are announced politely once per change. Read the ring on an article — inward, because the rows touch — and on a control — outward.",
+      "language": "html",
+      "source": "<section\n  slNotificationCenter\n  aria-label=\"Caixa de entrada da equipa de vendas\"\n  [items]=\"items()\"\n></section>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}