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

package/dist/docs/notification-center.json

@@ -0,0 +1,664 @@
+{
+  "family": "notification-center",
+  "ui": "notification-center",
+  "binding": "react",
+  "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 { NotificationCenter, NotificationCenterDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "section, or the element render returns",
+          "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 onReadChange for every unread shown key; disabled while nothing is unread."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "On the header, the consumer’s own controls after mark-all — a preferences link, a menu. On an item, the consumer’s controls for that item under its time, from the item’s actions field."
+        },
+        {
+          "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 consumer’s avatar or icon 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 renderItem returns. 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 onReadChange for this key."
+        },
+        {
+          "part": "dismiss",
+          "element": "button",
+          "required": false,
+          "purpose": "The x glyph, named messages.dismiss. Asks onRemove 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 ResultState from the empty prop, or messages.empty — messages.caughtUp under the unread view."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s link from the popover to the page, centred. Absent when not written."
+        }
+      ],
+      "api": [
+        {
+          "name": "items",
+          "type": "readonly NotificationItem[]",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "The consumer’s array: key, title, description, time (a PlainDateTime or an ISO instant), read, href, tone, visual, actions. The family holds none of its facts"
+        },
+        {
+          "name": "view",
+          "type": "string",
+          "defaultValue": "all",
+          "appliesTo": "NotificationCenter",
+          "description": "Present means the consumer owns the view, for the life of the component. 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": "NotificationCenter",
+          "description": "The view an uncontrolled centre starts on, read once. With neither, the first entry of views"
+        },
+        {
+          "name": "views",
+          "type": "readonly { value, label, count? }[]",
+          "defaultValue": "all, unread",
+          "appliesTo": "NotificationCenter",
+          "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": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "description": "sm for the popover: the small type steps, tighter insets, the small inner-control box. md for the page"
+        },
+        {
+          "name": "level",
+          "type": "'2' | '3' | '4'",
+          "defaultValue": "2",
+          "appliesTo": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "description": "The rank of the header’s heading; group labels take the rank below"
+        },
+        {
+          "name": "growing",
+          "type": "'none' | 'button' | 'scroll'",
+          "defaultValue": "none",
+          "appliesTo": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "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": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "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": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "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": "NotificationCenter, NotificationCenterDefaultsProvider",
+          "description": "Which of the family’s two item controls are drawn"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "NotificationCenter",
+          "description": "aria-busy on the feed and data-loading on the root; skeleton rows while nothing is loaded, the waiting row under the feed otherwise"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "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) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "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": "NotificationCenter, NotificationCenterDefaultsProvider (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": "NotificationCenter",
+          "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": "actions, footer, empty",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "The consumer’s controls in the header after mark-all; the link from the popover to the page; the ResultState in place of the family’s empty words"
+        },
+        {
+          "name": "renderItem",
+          "type": "(item, state) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "Substitutes an item’s content. state carries 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": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "Substitutes the root element and hands it every attribute, the ref callback included"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<NotificationCenterHandle>",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "The element; focus(), which lands on fresh when arrivals are held and on the first article otherwise; reveal(); markAllRead() — the last two with the reason programmatic"
+        },
+        {
+          "name": "NotificationCenterDefaultsProvider",
+          "type": "{ size, level, growing, arrivals, timeFormat, controls, timeZone }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The decisions an application takes once. A centre that states any of them itself still wins"
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<\"section\">",
+          "defaultValue": "—",
+          "appliesTo": "NotificationCenter",
+          "description": "aria-*, data-*, className, style and handlers reach the section; a consumer’s aria-label or aria-labelledby replaces the title wiring"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "onViewChange",
+          "payload": "(view: string, request: ChangeRequest<string>)",
+          "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 the consumer — the originating event, and cancel(), which refuses the move before anything commits."
+        },
+        {
+          "name": "onReadChange",
+          "payload": "({ keys, read }, request: { reason, source, cancelled, cancel() })",
+          "when": "When the reader presses a read-toggle (one key), mark-all (every unread shown key) or the handle’s markAllRead() — reasons pointer, keyboard, programmatic. The family marks nothing itself: the store answers by changing items."
+        },
+        {
+          "name": "onRemove",
+          "payload": "(key: string, request: { reason, source, 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": "onOpen",
+          "payload": "(key: string, request: { reason, source, cancelled, cancel() })",
+          "when": "Before a title link navigates — reasons pointer, keyboard. cancel() prevents the navigation."
+        },
+        {
+          "name": "onReveal",
+          "payload": "(count: number, request: { reason, source, cancelled, cancel() })",
+          "when": "Before held arrivals are shown: a press of fresh (pointer, keyboard) or the handle’s reveal() (programmatic). A keyboard reveal moves focus to the first revealed article."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "(request: { reason, source, 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": "onUnreadChange",
+          "payload": "(count: number)",
+          "when": "A fact, not a request: on mount and whenever the unread count among items changes, for the bell in the top navigation."
+        },
+        {
+          "name": "onKeyDown, onClick, onFocus on the root",
+          "payload": "the element’s own events",
+          "when": "Whenever the section fires them. The consumer’s onKeyDown runs before the feed keys, and a defaultPrevented event stops them."
+        }
+      ],
+      "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 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": "tsx",
+      "source": "<NotificationCenter\n  items={items}\n  now={now}\n  onReadChange={({ keys, read }) => markRead(keys, read)}\n  onRemove={(key) => remove(key)}\n/>;\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": "tsx",
+      "source": "<NotificationCenter\n  actions={<Link href=\"/preferencias\">Preferências</Link>}\n  footer={<Link href=\"/notificacoes\">Ver todas as notificações</Link>}\n  groupBy={dayOf}\n  growing=\"button\"\n  items={items}\n  views={views}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "read",
+      "title": "Read is the store’s fact",
+      "note": "Press the check on an unread row: the family asks onReadChange 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": "tsx",
+      "source": "const onReadChange = ({ keys, read }: NotificationCenterReadChange) =>\n  setItems((items) => items.map((item) => (keys.includes(item.key) ? { ...item, read } : item)));\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 controlled view that refuses to leave All.",
+      "language": "tsx",
+      "source": "<NotificationCenter\n  items={view === 'mentions' ? mentions : items}\n  onViewChange={(next, request) => {\n    if (next === 'archived') request.cancel();\n    else setView(next);\n  }}\n  view={view}\n  views={[\n    { value: 'all', label: 'Todas' },\n    { value: 'mentions', label: 'Menções', count: mentions.length },\n    { value: 'archived', label: 'Arquivadas' },\n  ]}\n/>;\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": "tsx",
+      "source": "<NotificationCenter\n  arrivals=\"hold\"\n  items={items}\n  onReveal={(count, request) =>\n    analytics.track('notifications.reveal', { count, reason: request.reason })\n  }\n/>;\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": "tsx",
+      "source": "<NotificationCenter groupBy={(item) => (isToday(item.time) ? 'Hoje' : 'Ontem')} items={items} />;\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": "tsx",
+      "source": "<NotificationCenter\n  count={total}\n  growing=\"scroll\"\n  items={items}\n  loading={loading}\n  onLoadMore={(request) => loadPage(request.reason)}\n/>;\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": "tsx",
+      "source": "<NotificationCenter\n  actions={<Link href=\"/preferencias\">Preferências</Link>}\n  controls=\"dismiss\"\n  items={items.map((item) => ({\n    ...item,\n    actions: item.shipment ? <Button size=\"sm\">Ver expedição</Button> : undefined,\n  }))}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hosts",
+      "title": "Hosts",
+      "note": "The bell is a Popover trigger with the unread count the family reports through onUnreadChange; 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": "tsx",
+      "source": "<Popover>\n  <PopoverTrigger\n    render={(props) => (\n      <Button {...props} aria-label={`Notificações, ${unread} não lidas`}>\n        <BellIcon />\n      </Button>\n    )}\n  />\n  <PopoverLayer>\n    <PopoverContent aria-label=\"Notificações\">\n      <NotificationCenter\n        footer={<Link href=\"/notificacoes\">Ver todas as notificações</Link>}\n        items={items}\n        onUnreadChange={setUnread}\n        size=\"sm\"\n      />\n    </PopoverContent>\n  </PopoverLayer>\n</Popover>;\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": "tsx",
+      "source": "<NotificationCenter items={[]} loading />;\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. The empty prop replaces both with a ResultState of the consumer’s own.",
+      "language": "tsx",
+      "source": "<NotificationCenter\n  empty={\n    <ResultState reach=\"inline\" status=\"success\">\n      <ResultStateContent>\n        <ResultStateTitle>Tudo lido</ResultStateTitle>\n        <ResultStateDescription>Nada aguarda a sua atenção.</ResultStateDescription>\n      </ResultStateContent>\n    </ResultState>\n  }\n  items={[]}\n/>;\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 \"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": "tsx",
+      "source": "<NotificationCenter items={items} level=\"3\" size=\"sm\" />;\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, 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. renderItem substitutes the content of a row — a Text and a Badge here — while the article, its wiring and its controls stay the family’s.",
+      "language": "tsx",
+      "source": "<NotificationCenter\n  items={items}\n  renderItem={(item, state) => (\n    <>\n      <span data-part=\"title\" id={state.ids.title}>\n        {item.title}\n      </span>\n      <Badge size=\"sm\" tone={state.tone} variant=\"soft\">\n        {item.category}\n      </Badge>\n      <time data-part=\"time\" dateTime={state.time.dateTime}>\n        {state.time.text}\n      </time>\n    </>\n  )}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Defaults and the handle",
+      "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 handle focuses the first article, reveals held arrivals and marks every shown item read with the reason programmatic.",
+      "language": "tsx",
+      "source": "<NotificationCenterDefaultsProvider growing=\"button\" size=\"sm\" timeZone=\"Europe/Lisbon\">\n  <App />\n</NotificationCenterDefaultsProvider>;\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 onOpen before the link navigates.",
+      "language": "tsx",
+      "source": "<NotificationCenter\n  items={items}\n  onOpen={(key, request) => {\n    if (!canOpen(key)) request.cancel();\n  }}\n  onRemove={(key, request) => {\n    if (request.reason === 'keyboard' && !confirmed(key)) request.cancel();\n    else remove(key);\n  }}\n/>;\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": "tsx",
+      "source": "<NotificationCenter aria-label=\"Caixa de entrada da equipa de vendas\" items={items} />;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}