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

package/docs/page-header.json

@@ -0,0 +1,574 @@
+{
+  "family": "page-header",
+  "ui": "page-header",
+  "binding": "angular",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Page title, description and actions."
+  },
+  "axes": {
+    "variant": [
+      "band",
+      "plain",
+      "floating"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "level": [
+      "1",
+      "2",
+      "3"
+    ],
+    "collapse": [
+      "scroll",
+      "manual"
+    ]
+  },
+  "members": {
+    "pageHeader": {
+      "nativeElement": "header",
+      "defaults": {
+        "size": "md",
+        "level": "1",
+        "collapse": "scroll",
+        "variant": "band",
+        "expanded": true,
+        "pinned": false,
+        "loading": false
+      },
+      "capabilities": [
+        "open",
+        "pressed",
+        "appearance",
+        "size",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "expanded",
+        "revealed",
+        "pressed",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "title-area",
+        "nav",
+        "back",
+        "breadcrumbs",
+        "title-row",
+        "visual",
+        "title",
+        "heading",
+        "marks",
+        "subheading",
+        "actions",
+        "navigation",
+        "header-area",
+        "figure",
+        "content",
+        "description",
+        "controls",
+        "toggle",
+        "pin",
+        "tabs",
+        "progress"
+      ]
+    }
+  },
+  "docs": {
+    "pageHeader": {
+      "imports": {
+        "source": "import { SlPageHeader, SlPageHeaderTitleArea, SlPageHeaderNav, SlPageHeaderBack, SlPageHeaderBreadcrumbs, SlPageHeaderTitleRow, SlPageHeaderVisual, SlPageHeaderTitle, SlPageHeaderHeading, SlPageHeaderMarks, SlPageHeaderSubheading, SlPageHeaderActions, SlPageHeaderNavigation, SlPageHeaderArea, SlPageHeaderFigure, SlPageHeaderContent, SlPageHeaderDescription, SlPageHeaderControls, SlPageHeaderToggle, SlPageHeaderPin, SlPageHeaderProgress, SlPageHeaderTabs, providePageHeaderDefaults } from '@slotted/angular/page-header';",
+        "selector": "[slPageHeader], [slPageHeaderTitleArea], [slPageHeaderNav], [slPageHeaderBack], [slPageHeaderBreadcrumbs], [slPageHeaderTitleRow], [slPageHeaderVisual], [slPageHeaderTitle], [slPageHeaderHeading], [slPageHeaderMarks], [slPageHeaderSubheading], [slPageHeaderActions], [slPageHeaderNavigation], [slPageHeaderArea], [slPageHeaderFigure], [slPageHeaderContent], [slPageHeaderDescription], [slPageHeaderControls], button[slPageHeaderToggle], button[slPageHeaderPin], [slPageHeaderProgress], [slPageHeaderTabs]",
+        "exportAs": "slPageHeader, slPageHeaderHeading, slPageHeaderArea, slPageHeaderToggle, slPageHeaderPin, slPageHeaderProgress"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the header carrying slPageHeader",
+          "required": true,
+          "purpose": "The family: sticky with a negative offset the size of the header area, carrying data-ui=\"page-header\", the four axes, data-expanded, data-revealed, data-loading and the measured facts data-scrolled, data-stuck and data-compact. Below 600 pixels of its own width it carries data-compact, is not sticky and scrolls away with the page. It is its own container, so the rows reflow on its own inline size."
+        },
+        {
+          "part": "title-area",
+          "element": "the element carrying slPageHeaderTitleArea",
+          "required": true,
+          "purpose": "The strip that never leaves: the nav row, the title row. Sticky at 0 inside the root, opaque, above the header area in the stack. Below 600 pixels it is in the flow with the root."
+        },
+        {
+          "part": "nav",
+          "element": "the element carrying slPageHeaderNav",
+          "required": false,
+          "purpose": "The row above the title: the way back, then the breadcrumbs."
+        },
+        {
+          "part": "back",
+          "element": "the a or button carrying slPageHeaderBack",
+          "required": false,
+          "purpose": "The way back to where the reader came from — a routerLink, usually. The arrow before it is the family’s, drawn from the glyph scale and mirrored in a right-to-left document. Beside breadcrumbs it yields to them — their first crumb says the same — and below 600 pixels, where the breadcrumbs go, it is what remains of the nav row. Write both once; the width decides. On a coarse pointer it is a full touch target without growing the row."
+        },
+        {
+          "part": "breadcrumbs",
+          "element": "the element carrying slPageHeaderBreadcrumbs",
+          "required": false,
+          "purpose": "The slot a slBreadcrumb sits in. Hidden below 600 pixels, where the way back already says where the reader came from."
+        },
+        {
+          "part": "title-row",
+          "element": "the element carrying slPageHeaderTitleRow",
+          "required": true,
+          "purpose": "Visual, title, actions and navigation on one row. What does not fit wraps under the title, in the order it has in the DOM."
+        },
+        {
+          "part": "visual",
+          "element": "the element carrying slPageHeaderVisual",
+          "required": false,
+          "purpose": "The mark before the heading: an slAvatar, an slIcon, an image. On the title’s first line. No tone input, because identity is not status."
+        },
+        {
+          "part": "title",
+          "element": "the element carrying slPageHeaderTitle",
+          "required": true,
+          "purpose": "The column of heading, marks and subheading. A wrapping row, so the marks sit on the heading’s own line and the subheading takes the line under it."
+        },
+        {
+          "part": "heading",
+          "element": "the h1 to h3 carrying slPageHeaderHeading, or any element, which then gets role=\"heading\"",
+          "required": true,
+          "purpose": "The heading. Expanded it wraps to two lines and then clamps; snapped it is one line with an ellipsis, a step smaller. While loading it renders slSkeletonText in place of its words. A native heading gets nothing added; an input or a div gets the role and the level."
+        },
+        {
+          "part": "marks",
+          "element": "the element carrying slPageHeaderMarks",
+          "required": false,
+          "purpose": "The status beside the heading — an slTag, an slBadge, an slStatusIndicator — centred on the heading’s line. It wraps when there are many. Below 600 pixels it takes a line of its own under the heading, so the header is as tall waiting as loaded whatever the marks say."
+        },
+        {
+          "part": "subheading",
+          "element": "the p carrying slPageHeaderSubheading",
+          "required": false,
+          "purpose": "One line under the heading, in the muted text, part of what stays visible. Snapped, or below 600 pixels, it truncates to one line; otherwise it wraps to two lines and clamps."
+        },
+        {
+          "part": "actions",
+          "element": "the element carrying slPageHeaderActions",
+          "required": false,
+          "purpose": "The slot an slToolbar sits in, at the end of the title row. Overflow is the toolbar’s: with overflow=\"menu\" what does not fit folds into its menu. Such a toolbar keeps the actions on the title row at every width: it fills what the title leaves, never narrower than its menu’s trigger, and folds what does not fit there, so what folded comes back when the row widens; loose buttons take a row of their own under the title. A toolbar without a frame gives its block inset back to the row, so it stands a control tall, the height the title reserves."
+        },
+        {
+          "part": "navigation",
+          "element": "the element carrying slPageHeaderNavigation",
+          "required": false,
+          "purpose": "The previous and next record, after the actions at the far end of the row, set apart by a rule. Below 600 pixels the row wraps under the title."
+        },
+        {
+          "part": "header-area",
+          "element": "the element carrying slPageHeaderArea, role=\"region\"",
+          "required": false,
+          "purpose": "The region that collapses: figure and content. In the flow at rest, under the title area when scrolled past, stuck under it while pinned or revealed, a 0fr row when the control collapsed it — and then inert."
+        },
+        {
+          "part": "figure",
+          "element": "the element carrying slPageHeaderFigure",
+          "required": false,
+          "purpose": "The picture of the record, a column before the content. Below 600 pixels it takes a row above it."
+        },
+        {
+          "part": "content",
+          "element": "the element carrying slPageHeaderContent",
+          "required": false,
+          "purpose": "A column of whatever only makes sense at rest: the description, an slDescriptionList of facts, filters, indicators."
+        },
+        {
+          "part": "description",
+          "element": "the p carrying slPageHeaderDescription",
+          "required": false,
+          "purpose": "A paragraph with a measure, inside the content. While loading it renders two lines of slSkeletonText."
+        },
+        {
+          "part": "controls",
+          "element": "the element carrying slPageHeaderControls",
+          "required": false,
+          "purpose": "A zero-height row on the chrome’s edge, carrying the rule and the pill that straddles it. Written after the header area, so it sits on the edge in every state without moving in the DOM."
+        },
+        {
+          "part": "toggle",
+          "element": "the button carrying slPageHeaderToggle",
+          "required": false,
+          "purpose": "The disclosure control: aria-expanded, aria-controls naming the header area, and a name from the messages that says which way it moves. Enter and Space are the platform’s."
+        },
+        {
+          "part": "pin",
+          "element": "the button carrying slPageHeaderPin",
+          "required": false,
+          "purpose": "A toggle button with aria-pressed, which is the pressed state the vocabulary has. It exists when it is written; there is no input to hide it. The stylesheet hides it where the header is too much of the screen to hold — expanded it would take more than six tenths of the scrollport, or the header is narrower than 600 pixels — and a header held when that becomes true is let go, with the reason programmatic."
+        },
+        {
+          "part": "tabs",
+          "element": "the element carrying slPageHeaderTabs",
+          "required": false,
+          "purpose": "The slot an slTabs sits in, last in the root. It stays visible under the title once the header area has scrolled past, because the root is what sticks."
+        },
+        {
+          "part": "progress",
+          "element": "the consumer’s element carrying slPageHeaderProgress, holding one [slProgressBar] at placement=\"edge-end\"",
+          "required": false,
+          "purpose": "A refresh of what is already on screen. A row one hairline tall and the header’s whole width, written after the controls and before the tabs: there the bar covers the line the pill straddles, and with no tabs the root’s own hairline. It draws nothing while loading is true or inside a region that is aria-busy."
+        }
+      ],
+      "api": [
+        {
+          "name": "expanded",
+          "type": "model<boolean>",
+          "defaultValue": "true",
+          "appliesTo": "slPageHeader",
+          "description": "Whether the header area is open. Two-way, so [(expanded)] follows it; true at rest, pinned or revealed, false while scrolled past or collapsed by the control"
+        },
+        {
+          "name": "pinned",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slPageHeader",
+          "description": "Whether the pin holds the area open. Two-way. Pinned, the whole header stays while the page scrolls"
+        },
+        {
+          "name": "variant",
+          "type": "'band' | 'plain' | 'floating'",
+          "defaultValue": "band",
+          "appliesTo": "slPageHeader, providePageHeaderDefaults",
+          "description": "band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slPageHeader, providePageHeaderDefaults",
+          "description": "The step the title sits at, on the type scale. The snapped title takes the step below"
+        },
+        {
+          "name": "level",
+          "type": "'1' | '2' | '3'",
+          "defaultValue": "1",
+          "appliesTo": "slPageHeader, providePageHeaderDefaults",
+          "description": "The rank of the heading. A native heading element written by the consumer is left alone; any other element carrying slPageHeaderHeading gets role=\"heading\" and this level"
+        },
+        {
+          "name": "collapse",
+          "type": "'scroll' | 'manual'",
+          "defaultValue": "scroll",
+          "appliesTo": "slPageHeader, providePageHeaderDefaults",
+          "description": "scroll collapses the area when it leaves the scrollport and re-opens it when it returns; manual leaves it to the toggle, the pin and the application, and the whole header stays while the page scrolls"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slPageHeader",
+          "description": "The heading, the subheading and the description render slSkeletonText in place of their words; the actions stay operable; the root carries aria-busy"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<PageHeaderMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slPageHeader",
+          "description": "Words laid over the language in force, key by key — expand, collapse, pin, unpin, headerArea and progress: the names the two controls, the region and the refresh bar carry. An aria-label written on the control itself still wins"
+        },
+        {
+          "name": "slPageHeaderProgress",
+          "type": "loading, value, min, max, buffer, valueText, label, tone, size, delay, minDuration; (withdraw)",
+          "defaultValue": "loading true, delay 200, minDuration 400, size sm",
+          "appliesTo": "slPageHeaderProgress",
+          "description": "A refresh of the data already on screen. Each input reaches the bar, (withdraw) reports the moment it goes, and provideProgressIndicatorDefaults() wins over the header’s timing"
+        },
+        {
+          "name": "data-when",
+          "type": "'expanded' | 'snapped'",
+          "defaultValue": "—",
+          "appliesTo": "any part of the title area",
+          "description": "Shows the part in one state only. A snapped heading is the heading written twice, once with each value; the stylesheet shows one"
+        }
+      ],
+      "composition": [
+        {
+          "name": "slPageHeaderHeading on any element",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "the consumer’s own element",
+          "description": "A native heading gets nothing added; an input, a link or a div gets role=\"heading\" and the level, so an editable title keeps its rank"
+        },
+        {
+          "name": "exportAs slPageHeader",
+          "type": "SlPageHeader",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "expand(), collapseArea(), pin() and unpin(), each carrying programmatic; expanded, pinned, scrolled and revealed as signals"
+        },
+        {
+          "name": "providePageHeaderDefaults()",
+          "type": "{ size, level, collapse }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The three decisions an application takes once. A header that states any of them itself still wins"
+        },
+        {
+          "name": "slPage around it",
+          "type": "SlPage",
+          "defaultValue": "—",
+          "appliesTo": "the page",
+          "description": "The measure the header aligns its rows to, injected. Outside a page the rows take the content width"
+        },
+        {
+          "name": "native attributes",
+          "type": "on every part",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every directive sits on the consumer’s own element, so id, class, routerLink and every listener stay where they were written"
+        }
+      ],
+      "events": [
+        {
+          "name": "expandedRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the header area moves. The request carries the new value, the value it replaces, the reason — pointer, keyboard, scroll or programmatic — the originating event, and cancel(), which refuses the move before anything commits. A cancelled scroll leaves the area where the scroll left it."
+        },
+        {
+          "name": "expandedChange",
+          "payload": "boolean",
+          "when": "After the area moved, from the model. Bind [(expanded)] to follow it, or [expanded] and (expandedRequest) to own it."
+        },
+        {
+          "name": "pinnedRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the pin moves, with the reason pointer, keyboard or programmatic. Pinning a collapsed header also asks the area to open, with the reason programmatic; collapsing by the toggle while pinned asks the pin to let go first."
+        },
+        {
+          "name": "pinnedChange",
+          "payload": "boolean",
+          "when": "After the pin moved, from the model."
+        },
+        {
+          "name": "(click), (focus), (keydown) on the toggle and the pin",
+          "payload": "the element’s own events",
+          "when": "Whenever the button fires them. The consumer’s handler runs as well, and preventDefault() in (click) refuses the move."
+        }
+      ],
+      "accessibility": [
+        "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), the toggle answers the Disclosure pattern and the pin the Button pattern’s toggle form. The root is a header element inside the page’s main, which is a plain header and not a banner: the banner is the application shell’s.",
+        "The whole keyboard is the platform’s. The toggle and the pin are the consumer’s own buttons, so Enter and Space move them without the family binding a key; Tab walks the title area in document order and then the header area while it is visible. The title area is deliberately not a button, because it holds links and buttons of its own and a button may not contain a control.",
+        "The toggle carries aria-expanded and aria-controls naming the header area; the header area is a region named by the headerArea message; the pin carries aria-pressed. Their names say which way they move, and an aria-label written on the element wins over them — read with HostAttributeToken before anything is written.",
+        "Collapsed by the control, the area is inert and aria-hidden, because a 0fr row leaves its controls in the DOM and out of sight. Scrolled past, it is neither: a control inside it that receives focus is scrolled back into view by the browser, and the header re-opens with the reason scroll.",
+        "The heading is the consumer’s element: h1 to h3 written by hand keep their native semantics, and anything else carrying the directive gets role=\"heading\" and aria-level from the level input, so an editable title stays a heading. A snapped heading written with data-when is display: none in the other state, so the heading list never shows the title twice.",
+        "The reason on every request is what lets a product tell the reader’s own move from the scroll’s: pointer and keyboard are the reader, programmatic is the application, and scroll is the page. The React binding emits the same request on onExpandedChange and onPinnedChange."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-radius",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-2xl",
+    "--slotted-font-size-3xl",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-2xl",
+    "--slotted-line-height-3xl",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xl",
+    "--slotted-page-header-background",
+    "--slotted-page-header-border",
+    "--slotted-page-header-control-size",
+    "--slotted-page-header-description-measure",
+    "--slotted-page-header-gap",
+    "--slotted-page-header-heading-size-lg",
+    "--slotted-page-header-heading-size-md",
+    "--slotted-page-header-heading-size-sm",
+    "--slotted-page-header-inset",
+    "--slotted-page-header-padding-block",
+    "--slotted-page-header-radius",
+    "--slotted-page-header-shadow",
+    "--slotted-page-header-snapped-heading-size-lg",
+    "--slotted-page-header-snapped-heading-size-md",
+    "--slotted-page-header-snapped-heading-size-sm",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-shadow-sm",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-toolbar-inset",
+    "--slotted-z-index-sticky"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One purchase order screen with every input on it, driven by the controls below the canvas. Scroll the page: the header area slides under the title and the tabs stay; scroll back and it returns.",
+      "language": "html",
+      "source": "<main slPage>\n  <header slPageHeader [(expanded)]=\"expanded\" [(pinned)]=\"pinned\">\n    <div slPageHeaderTitleArea>…</div>\n    <div slPageHeaderArea>…</div>\n    <div slPageHeaderControls>\n      <button slPageHeaderToggle></button>\n      <button slPageHeaderPin></button>\n    </div>\n  </header>\n  <div slPageBody>…</div>\n  <footer slPageFooter>…</footer>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, written out",
+      "note": "The way back and the breadcrumbs above; the visual, the heading with its mark and subheading, the actions and the record navigation on the title row; the description and the facts in the area that collapses; the pill on the edge; the tabs under it.",
+      "language": "html",
+      "source": "<header slPageHeader>\n  <div slPageHeaderTitleArea>\n    <div slPageHeaderNav>\n      <a slPageHeaderBack routerLink=\"/pedidos\">Pedidos de compra</a>\n      <div slPageHeaderBreadcrumbs><nav slBreadcrumb>…</nav></div>\n    </div>\n    <div slPageHeaderTitleRow>\n      <span slPageHeaderVisual\n        ><span slAvatar name=\"Aurora Logística\" shape=\"square\" size=\"lg\" [src]=\"logo\"></span\n      ></span>\n      <div slPageHeaderTitle>\n        <h1 slPageHeaderHeading>Pedido de compra PC-2026-004521</h1>\n        <span slPageHeaderMarks\n          ><span slTag tone=\"warning\"><span slTagBody>Em análise</span></span></span\n        >\n        <p slPageHeaderSubheading>Aurora Logística Ltda</p>\n      </div>\n      <div slPageHeaderActions>\n        <div slToolbar aria-label=\"Ações do pedido\" overflow=\"menu\">…</div>\n      </div>\n      <div slPageHeaderNavigation>…</div>\n    </div>\n  </div>\n  <div slPageHeaderArea>\n    <div slPageHeaderFigure>…</div>\n    <div slPageHeaderContent><p slPageHeaderDescription>…</p></div>\n  </div>\n  <div slPageHeaderControls>\n    <button slPageHeaderToggle></button>\n    <button slPageHeaderPin></button>\n  </div>\n  <div slPageHeaderTabs><div slTabs>…</div></div>\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "collapse",
+      "title": "What a scroll does, and what the control does",
+      "note": "Scroll the first screen: the area leaves with the reason scroll and the toggle offers to bring it back in place. Press the toggle at rest: the area folds as a grid track. The last screen is collapse=\"manual\": the whole header stays while the page scrolls. In an slPage with fill nothing scrolls outside the body: a scroller inside it snaps the area shut once it is past 16 pixels down, and opens it again back at its top. A header with no header area stays expanded: collapsed, it would hide nothing and only step the title down.",
+      "language": "html",
+      "source": "<header slPageHeader (expandedRequest)=\"remember($event)\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "pin",
+      "title": "The pin",
+      "note": "Pressed, the whole header stays while the page scrolls and the area counts into the chrome. Let go while stuck and the area stays revealed until the next scroll; collapse by the toggle and the pin lets go first. Narrow the stage below 600 pixels, or shorten the window until the header would take most of it: the pin goes, and a held header is let go.",
+      "language": "html",
+      "source": "<header slPageHeader [(pinned)]=\"pinned\" (pinnedRequest)=\"onPin($event)\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "when",
+      "title": "A title for the bar, and a title for the header",
+      "note": "The long title is written for expanded and the short one for snapped; the stylesheet shows one, so the accessibility tree has one heading at a time. Scroll to watch them swap.",
+      "language": "html",
+      "source": "<div slPageHeaderTitle>\n  <h1 slPageHeaderHeading data-when=\"expanded\">\n    Relatório de conformidade fiscal do terceiro trimestre\n  </h1>\n  <h1 slPageHeaderHeading data-when=\"snapped\">Conformidade fiscal · T3</h1>\n  <p slPageHeaderSubheading data-when=\"expanded\">Consolidado das 14 filiais</p>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "The step the title sits at",
+      "note": "sm for a header inside a pane, md for a screen, lg for the landing screen of a module. The snapped title always takes the step below, and level is a separate decision: an h2 may be lg.",
+      "language": "html",
+      "source": "<header slPageHeader level=\"2\" size=\"lg\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "navigation",
+      "title": "Previous and next record",
+      "note": "The two arrows at the far end of the title row move between orders without leaving the screen; the heading, the mark and the subheading follow. Below 600 pixels the pair wraps under the title with the actions.",
+      "language": "html",
+      "source": "<div slPageHeaderNavigation>\n  <button slIconButton aria-label=\"Pedido anterior\" variant=\"ghost\" (click)=\"previous()\">…</button>\n  <button slIconButton aria-label=\"Pedido seguinte\" variant=\"ghost\" (click)=\"next()\">…</button>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "Actions that fold",
+      "note": "Six actions in an slToolbar with overflow=\"menu\". Drag the stage narrower: what does not fit folds into the toolbar’s menu, in priority order, and the header itself decides nothing about it.",
+      "language": "html",
+      "source": "<div slPageHeaderActions>\n  <div slToolbar aria-label=\"Ações do pedido\" overflow=\"menu\">\n    <div slToolbarItem [slToolbarItemCounterpart]=\"reprovar\">\n      <button slButton variant=\"outline\">Reprovar</button>\n    </div>\n    <div slToolbarItem><button slButton tone=\"accent\">Aprovar</button></div>\n    <sl-toolbar-overflow />\n  </div>\n</div>\n<ng-template #reprovar><button slMenuItem>Reprovar</button></ng-template>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tabs",
+      "title": "Tabs under the header",
+      "note": "The tabs are the last thing in the root, so once the area has scrolled past they sit under the title with nothing between; the body switches with them. Scroll, then switch tabs: the header does not move.",
+      "language": "html",
+      "source": "<div slPageHeaderTabs>\n  <div slTabs [(value)]=\"tab\">\n    <div slTabList aria-label=\"Secções do pedido\">\n      <div slTab value=\"itens\">Itens</div>\n      <div slTab value=\"historico\">Histórico</div>\n    </div>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "While the record arrives",
+      "note": "Press Carregar: the heading, the subheading and the description stand as slSkeletonText of their own width, the root says aria-busy, and the actions stay operable. Nothing moves when the words arrive.",
+      "language": "html",
+      "source": "<header slPageHeader [loading]=\"order() === undefined\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "A refresh of what is on screen",
+      "note": "slPageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms. With tabs that line is the one the pill straddles, never the tab strip’s edge; without them it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.",
+      "language": "html",
+      "source": "<header slPageHeader>\n  <div slPageHeaderTitleArea>…</div>\n  <div slPageHeaderControls>…</div>\n  <div slPageHeaderProgress [loading]=\"refreshing()\"></div>\n  <div slPageHeaderTabs>…</div>\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A nine-word title clamps at two lines; five marks wrap; a subheading of fifteen words wraps expanded and truncates snapped; a translated description keeps its measure. Scroll to see the bar hold one line.",
+      "language": "html",
+      "source": "<h1 slPageHeaderHeading>\n  Renovação do contrato de fornecimento continuado de pneus, câmaras e serviços de recapagem para a\n  frota pesada da regional Sudeste\n</h1>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "narrow",
+      "title": "Below 600 pixels",
+      "note": "The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as slToolbar overflow=\"menu\", each item with its counterpart, stay on the title row and fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.",
+      "language": "html",
+      "source": "<header slPageHeader>…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "A page, a table, and the chrome they share",
+      "note": "Inside an slPage the rows align to its measure, the sections’ sticky headers and the table’s sticky column header stop under the page chrome — pinned, they stop lower — and the footer stays at the bottom. Scroll the whole screen.",
+      "language": "html",
+      "source": "<main slPage>\n  <header slPageHeader>…</header>\n  <div slPageBody>\n    <section slSection sticky>\n      <div slSectionHeader>…</div>\n      <div slSectionBody><div slTable stickyHeader stickyTo=\"page\">…</div></div>\n    </section>\n  </div>\n  <footer slPageFooter>…</footer>\n</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Setting it once, and reaching past it",
+      "note": "providePageHeaderDefaults carries size, level and collapse for every header under it; the heading directive sits on the consumer’s own input while the family keeps the rank; the instance moves the area with the reason programmatic.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [providePageHeaderDefaults({ collapse: 'manual', size: 'sm' })],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "The keyboard, the reasons, and what a reader hears",
+      "note": "Tab walks the way back, the breadcrumbs, the actions, the navigation, the toggle and the pin, then the filters inside the area. Enter and Space on the toggle report keyboard; a click reports pointer; a scroll reports scroll. Tab into the collapsed area and watch it come back.",
+      "language": "html",
+      "source": "<header slPageHeader (expandedRequest)=\"reasons.unshift($event.reason)\">…</header>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}