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

package/docs/top-navigation.json

@@ -0,0 +1,648 @@
+{
+  "family": "top-navigation",
+  "ui": "top-navigation",
+  "binding": "angular",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Application header with brand, search and account."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "landmark": [
+      true,
+      false
+    ],
+    "frame": [
+      true,
+      false
+    ],
+    "priority": [
+      "high",
+      "medium",
+      "low"
+    ]
+  },
+  "members": {
+    "topNavigation": {
+      "nativeElement": "header",
+      "defaults": {
+        "size": "md",
+        "landmark": true,
+        "frame": true
+      },
+      "capabilities": [
+        "open",
+        "current",
+        "overflow",
+        "size",
+        "appearance",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "current",
+        "open",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "skip",
+        "brand",
+        "home",
+        "mark",
+        "name",
+        "context",
+        "nav",
+        "list",
+        "item",
+        "link",
+        "trigger",
+        "indicator",
+        "more",
+        "panel",
+        "panel-list",
+        "search",
+        "search-toggle",
+        "search-close",
+        "actions",
+        "help",
+        "notifications",
+        "count",
+        "account",
+        "action"
+      ],
+      "defaultsReason": "Axis defaults only. The uncontrolled starting values are the state models' own uncontrolled names and exist in React alone: Angular ships one model() for each of moreOpen, searchOpen and value, which is both sides. priority is an item's axis and has no root default"
+    }
+  },
+  "docs": {
+    "topNavigation": {
+      "imports": {
+        "source": "import { SlTopNavigation, SlTopNavigationAccount, SlTopNavigationAction, SlTopNavigationActions, SlTopNavigationBrand, SlTopNavigationContext, SlTopNavigationCount, SlTopNavigationHelp, SlTopNavigationHome, SlTopNavigationItem, SlTopNavigationLink, SlTopNavigationList, SlTopNavigationMark, SlTopNavigationName, SlTopNavigationNav, SlTopNavigationNotifications, SlTopNavigationSearch, SlTopNavigationTrigger, provideTopNavigationDefaults } from '@slotted/angular/top-navigation';",
+        "selector": "[slTopNavigation], [slTopNavigationBrand], [slTopNavigationHome], [slTopNavigationMark], [slTopNavigationName], [slTopNavigationContext], nav[slTopNavigationNav], ul[slTopNavigationList], li[slTopNavigationItem], a[slTopNavigationLink], button[slTopNavigationTrigger], [slTopNavigationSearch], [slTopNavigationActions], a[slTopNavigationHelp], button[slTopNavigationHelp], button[slTopNavigationNotifications], [slTopNavigationCount], button[slTopNavigationAccount], a[slTopNavigationAction], button[slTopNavigationAction]",
+        "exportAs": "slTopNavigation, slTopNavigationNav, slTopNavigationList, slTopNavigationItem, slTopNavigationLink, slTopNavigationTrigger, slTopNavigationSearch, slTopNavigationActions, slTopNavigationHelp, slTopNavigationNotifications, slTopNavigationAccount, slTopNavigationAction, slTopNavigationMore"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the header carrying slTopNavigation, or a div inside app-shell",
+          "required": true,
+          "purpose": "The bar, and the query container it answers: data-ui=\"top-navigation\", data-size, data-frame while it paints its own ground, data-search-open while the search has taken the bar. A header on its own — the banner landmark; inside the shell’s banner, which already is one, a div."
+        },
+        {
+          "part": "skip",
+          "element": "a, rendered by the root",
+          "required": false,
+          "purpose": "The first focusable thing in the bar: a link to #skipTo, visible only while focused. Rendered when skipTo names a target; inside app-shell the shell already renders one per region."
+        },
+        {
+          "part": "brand",
+          "element": "div",
+          "required": true,
+          "purpose": "The start cluster: app-shell’s nav-toggle when the bar is in the shell, then home. It starts on the row inset the shell publishes, so the toggle and the mark stand over the marks in the column."
+        },
+        {
+          "part": "home",
+          "element": "a with an href, or a span without one",
+          "required": false,
+          "purpose": "The mark and the name, linked to the start of the application. Below 480 pixels the name leaves the eye and not the DOM, so the link keeps its accessible name. routerLink lives on the same element."
+        },
+        {
+          "part": "mark",
+          "element": "span",
+          "required": false,
+          "purpose": "The box the logo stands in: square, the height of the bar’s controls, aria-hidden."
+        },
+        {
+          "part": "name",
+          "element": "span",
+          "required": false,
+          "purpose": "The product’s name, one line, cut with an ellipsis at --slotted-top-navigation-name-max."
+        },
+        {
+          "part": "context",
+          "element": "div",
+          "required": false,
+          "purpose": "What the application is right now — the workspace, the store, the environment — as the consumer’s own content. It keeps its width in the bar; below 600 pixels the element is moved to the top of the panel."
+        },
+        {
+          "part": "nav",
+          "element": "nav",
+          "required": false,
+          "purpose": "The navigation landmark, named by messages.navigation unless the consumer writes aria-label, and a navigation-menu root on the same element through a host directive: data-ui=\"navigation-menu\", the shared surface after its list, and [(value)], valueChangeRequest and the menu’s delays bound on slTopNavigationNav. It builds the panel right after itself in DOM order."
+        },
+        {
+          "part": "list",
+          "element": "ul",
+          "required": false,
+          "purpose": "The destinations, in the consumer’s order, with more in its own li at the end."
+        },
+        {
+          "part": "item",
+          "element": "li",
+          "required": false,
+          "purpose": "One destination or one section. Carries data-value, data-priority, data-collapsed while the width has folded it, data-current and data-disabled."
+        },
+        {
+          "part": "link",
+          "element": "a",
+          "required": false,
+          "purpose": "The destination, with aria-current=\"page\" while current — read from the router’s own attribute when it writes one. aria-disabled and a refused press while disabled, the href kept."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": false,
+          "purpose": "A section that opens: the navigation-menu trigger of the slNavigationMenuContent after it in the same item — aria-expanded, aria-controls, data-open, the chevron, a press and a resting pointer."
+        },
+        {
+          "part": "indicator",
+          "element": "span, rendered by the trigger",
+          "required": false,
+          "purpose": "The trigger’s chevron, the chevron-down Glyph element, turned half a turn while open."
+        },
+        {
+          "part": "more",
+          "element": "button, rendered by the list",
+          "required": false,
+          "purpose": "The disclosure button of the panel: aria-expanded, aria-controls, data-overflow with the count of what folded, data-current while the current destination is folded. Shown by the stylesheet as soon as anything folds."
+        },
+        {
+          "part": "panel",
+          "element": "div, built by the nav",
+          "required": false,
+          "purpose": "What did not fit, inside the root and right after the nav: the context, the panel-list, the help. Under the bar, full width below 480 pixels. Present in the DOM closed, out of sight and out of the tab order."
+        },
+        {
+          "part": "panel-list",
+          "element": "ul, built by the nav",
+          "required": false,
+          "purpose": "The list the folded items are moved into while the panel is present — the same li, so a section keeps its panel, which opens in line under its trigger there, and a link keeps its badge — and moved back from when it has left."
+        },
+        {
+          "part": "search",
+          "element": "div",
+          "required": false,
+          "purpose": "The search region, with the consumer’s text-field inside, standing at the start of the middle of the bar and growing to 28rem, never under 12rem: the first thing to give way when the bar is short of room. Below 600 pixels it exists only while searchOpen, and then takes the whole bar."
+        },
+        {
+          "part": "search-toggle",
+          "element": "button, rendered by the actions",
+          "required": false,
+          "purpose": "The magnifier that asks searchOpen to be true, rendered whenever the bar has a search and shown below 600 pixels while the search is closed."
+        },
+        {
+          "part": "search-close",
+          "element": "button, rendered by the search",
+          "required": false,
+          "purpose": "The cross at the end of the open search below 600 pixels: the pointer’s way back."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The end cluster, in the consumer’s order. Recommended: search, help, notifications, account — Carbon’s order, which a reader has learnt."
+        },
+        {
+          "part": "help",
+          "element": "a with an href, or a button",
+          "required": false,
+          "purpose": "The question mark. Its projected content is its label, clipped in the bar and shown as a row in the panel below 480 pixels; the family’s message when there is none."
+        },
+        {
+          "part": "notifications",
+          "element": "button",
+          "required": false,
+          "purpose": "The bell, with count in its corner. It never folds."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": false,
+          "purpose": "The number of what is waiting, drawn by the family over the bell’s top-end corner as tabular figures on an accent disc that becomes a pill from two digits, out of the flow so the control keeps the bell’s width. Inside the button, so inside its name."
+        },
+        {
+          "part": "account",
+          "element": "button",
+          "required": false,
+          "purpose": "A pill around the consumer’s avatar — xs at md, one step under the control — and, above 600 pixels, a name beside it. slMenuTriggerFor on the same element. It never folds."
+        },
+        {
+          "part": "action",
+          "element": "a with an href, or a button",
+          "required": false,
+          "purpose": "A global control of the product’s own — approvals, tasks — in the same square, ink and states as the marked controls. The consumer projects its glyph, sized by the control, and names it: label when the words carry a count, aria-label when they do not. slTopNavigationCount inside it stands over its corner. It never folds."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "model<string | null>",
+          "defaultValue": "null",
+          "appliesTo": "slTopNavigation",
+          "description": "The current destination’s value, two-way. A link that states current itself, or carries the router’s aria-current, still wins"
+        },
+        {
+          "name": "moreOpen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slTopNavigation",
+          "description": "Whether the panel is shown, two-way"
+        },
+        {
+          "name": "searchOpen",
+          "type": "model<boolean>",
+          "defaultValue": "false",
+          "appliesTo": "slTopNavigation",
+          "description": "Whether the search has taken the bar, below 600 pixels, two-way. Above 600 it has no effect"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTopNavigation, provideTopNavigationDefaults",
+          "description": "The control height of everything in the bar, from the control scale"
+        },
+        {
+          "name": "frame",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTopNavigation, provideTopNavigationDefaults",
+          "description": "Whether the root paints its own ground, rule and inset. Unstated, it does on its own and not inside app-shell, whose banner already paints"
+        },
+        {
+          "name": "landmark",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTopNavigation, provideTopNavigationDefaults",
+          "description": "The intent the element carries: a header on its own, a div inside app-shell’s banner. The element is the consumer’s"
+        },
+        {
+          "name": "skipTo",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTopNavigation",
+          "description": "The id of the element the skip link jumps to. Absent, no skip link is rendered"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TopNavigationMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTopNavigation",
+          "description": "Words laid over the language in force, key by key — navigation, more, moreCount, search, closeSearch, help, notifications, account, skip: the words on the controls that have no visible text"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTopNavigationItem",
+          "description": "The item’s identity: what value names it by and what collapseChange reports"
+        },
+        {
+          "name": "priority",
+          "type": "'high' | 'medium' | 'low'",
+          "defaultValue": "medium",
+          "appliesTo": "slTopNavigationItem",
+          "description": "Which step of the width folds the item: low under 1024 pixels, medium under 600, high under 480"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTopNavigationItem",
+          "description": "The row and everything in it refuse interaction; the link keeps its href and its name"
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "slTopNavigationLink",
+          "description": "Whether this is the current destination, stated on the row. Unstated, an aria-current the router wrote is read instead; both win over the root’s value"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "the family’s message",
+          "appliesTo": "slTopNavigationNav, slTopNavigationHelp, slTopNavigationNotifications, slTopNavigationAccount",
+          "description": "The name the consumer writes on the element, read before the family writes its own"
+        }
+      ],
+      "composition": [
+        {
+          "name": "the element",
+          "type": "header, div, nav, ul, li, a, button, span",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every directive goes on the consumer’s own element, so routerLink, routerLinkActive, slMenuTriggerFor, slPopoverTrigger, native attributes and (click) live where they always do"
+        },
+        {
+          "name": "exportAs",
+          "type": "slTopNavigation, slTopNavigationItem, slTopNavigationLink, slTopNavigationTrigger, slTopNavigationSearch, slTopNavigationMore",
+          "defaultValue": "—",
+          "appliesTo": "a template reference",
+          "description": "The root instance carries focus(), focusSearch(), openMore(), closeMore(), the three models, collapsed() and folded(); an item its value, priority, collapsed and current signals"
+        },
+        {
+          "name": "provideTopNavigationDefaults()",
+          "type": "{ size, frame, landmark }",
+          "defaultValue": "—",
+          "appliesTo": "a component or route’s providers",
+          "description": "The decisions an application takes once, through the TOP_NAVIGATION_DEFAULTS token. A bar that states any of them itself still wins"
+        },
+        {
+          "name": "injectTopNavigationDefaults()",
+          "type": "() => TopNavigationDefaults",
+          "defaultValue": "—",
+          "appliesTo": "inside an injection context",
+          "description": "What a bar renders as here, before it states anything of its own"
+        },
+        {
+          "name": "@container slotted-top-navigation",
+          "type": "a container query in the consumer’s stylesheet",
+          "defaultValue": "—",
+          "appliesTo": "anything placed in context, search or actions",
+          "description": "The bar is a named query container, so a consumer’s own control answers the bar’s width — (inline-size < 600px) — without measuring anything"
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<string | null>: value, previous, reason (pointer | keyboard | programmatic), source and cancel()",
+          "when": "Before the current destination moves, on a press of a link. Cancelling refuses; the navigation itself is the anchor’s. value itself is a model, so [(value)] follows."
+        },
+        {
+          "name": "moreOpenChangeRequest",
+          "payload": "ChangeRequest<boolean> with reason (pointer | keyboard | select | escape | outsidePress | resize | programmatic)",
+          "when": "Before the panel opens or closes: a press on more, a link pressed inside the panel, Escape, a press outside, the width widening until nothing is folded, or openMore()/closeMore() on the instance. moreOpen is a model."
+        },
+        {
+          "name": "searchOpenChangeRequest",
+          "payload": "ChangeRequest<boolean> with reason (pointer | keyboard | escape | blur | resize | programmatic)",
+          "when": "Below 600 pixels: before the magnifier opens the field, and before Escape, the cross, focus leaving the field or the width widening past 600 closes it. Above, the value has no effect. searchOpen is a model."
+        },
+        {
+          "name": "collapseChange",
+          "payload": "readonly string[]: the values of the folded items in DOM order",
+          "when": "After the set of folded items changed: the bar crossed one of its three steps. A fact, not a request — the width decided it."
+        },
+        {
+          "name": "(click), (focus), (keydown) on every control",
+          "payload": "the element’s own events",
+          "when": "Whenever the a or button fires them, on the consumer’s own element. preventDefault() in (click) refuses the family’s part."
+        }
+      ],
+      "accessibility": [
+        "The bar is the banner landmark — a header in the context of the body, with no role written — and its destinations are the navigation landmark, a nav named Navigation unless the consumer names it. Inside app-shell the consumer writes a div, because the shell’s banner is already the banner and two banners in one document is what the resolution prevents.",
+        "The destinations follow the WAI-ARIA APG’s Disclosure Navigation Menu example (w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/): nav > ul > li > a, so a reader hears a list of so many links, one of them aria-current=\"page\". The Navigation Menubar example’s own caution — that menubar demands functionality a site’s navigation does not need — is why nothing here is a menubar, nothing writes tabindex and no arrow key moves focus: every control is a tab stop.",
+        "more is a button with aria-expanded and aria-controls pointing at the panel, and its name carries the count of what folded — More, 3, the moreCount message. The panel is built right after the nav, so Tab from more enters it, the way the disclosure pattern assumes; closed, it is visibility: hidden and its rows leave the tab sequence. Escape closes it and returns focus to more.",
+        "The folded destinations are the consumer’s own elements, moved into the panel and back, so a section keeps its panel and a link keeps its badge, its href and the router’s aria-current. Below 480 pixels the name is clipped rather than removed, so the home link keeps its name; help’s label is clipped in the bar and shown in the panel, so help has one name in both places.",
+        "Every icon-only control — the magnifier, the cross, help, the bell, the account, more — carries an accessible name from the family’s messages or the consumer’s aria-label, read with HostAttributeToken before the family writes its own, and repeats it in a tooltip on hover and on visible focus. The count stands inside the bell’s button, so a reader hears Notifications, 3 without the family composing a string.",
+        "Below 600 pixels the open search moves focus into the field and the closed search returns it to the magnifier, unless focus already went somewhere else — which is what closed it. A disabled destination is aria-disabled with its href kept: perceivable, focusable, refused on press. The item carries data-disabled and never aria-disabled, which ARIA 1.2 deprecates on listitem."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-app-shell-row-font-size",
+    "--slotted-app-shell-row-height",
+    "--slotted-app-shell-row-inset",
+    "--slotted-app-shell-row-line-height",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-current-edge",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-instant",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-lg",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-top-navigation-active-background",
+    "--slotted-top-navigation-block-size",
+    "--slotted-top-navigation-border-color",
+    "--slotted-top-navigation-color",
+    "--slotted-top-navigation-count-background",
+    "--slotted-top-navigation-count-color",
+    "--slotted-top-navigation-current-background",
+    "--slotted-top-navigation-current-color",
+    "--slotted-top-navigation-current-edge",
+    "--slotted-top-navigation-hover-background",
+    "--slotted-top-navigation-inset",
+    "--slotted-top-navigation-muted-color",
+    "--slotted-top-navigation-name-font-size",
+    "--slotted-top-navigation-name-max",
+    "--slotted-top-navigation-panel-radius",
+    "--slotted-top-navigation-panel-shadow",
+    "--slotted-top-navigation-panel-size",
+    "--slotted-top-navigation-panel-surface",
+    "--slotted-top-navigation-radius",
+    "--slotted-top-navigation-search-min",
+    "--slotted-top-navigation-search-size",
+    "--slotted-top-navigation-surface",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "The bar of a freight operator",
+      "note": "Aurora Logística’s bar with every region filled, in a desktop room. The room scrolls sideways where the page is narrower; the steps the bar folds at are the next demonstration.",
+      "language": "html",
+      "source": "<header slTopNavigation value=\"painel\" skipTo=\"conteudo\">\n  <div slTopNavigationBrand>\n    <a slTopNavigationHome routerLink=\"/\">\n      <span slTopNavigationMark><ng-icon name=\"auroraMark\" /></span>\n      <span slTopNavigationName>Aurora Logística</span>\n    </a>\n  </div>\n  <nav slTopNavigationNav>\n    <ul slTopNavigationList>\n      <li slTopNavigationItem value=\"painel\" priority=\"high\">\n        <a slTopNavigationLink routerLink=\"/painel\">Painel</a>\n      </li>\n      <li slTopNavigationItem value=\"relatorios\" priority=\"low\">\n        <a slTopNavigationLink routerLink=\"/relatorios\">Relatórios</a>\n      </li>\n    </ul>\n  </nav>\n  <div slTopNavigationSearch>\n    <div slTextField variant=\"subtle\">\n      <input slTextFieldInput type=\"search\" placeholder=\"Procurar cargas, clientes, rotas…\" />\n    </div>\n  </div>\n  <div slTopNavigationActions>\n    <a slTopNavigationHelp routerLink=\"/ajuda\"></a>\n    <button slTopNavigationNotifications><span slTopNavigationCount>3</span></button>\n    <button slTopNavigationAccount>\n      <span slAvatar size=\"xs\"><span slAvatarFallback>AB</span></span>\n    </button>\n  </div>\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, named",
+      "note": "The bar with each part labelled by its data-part: the brand, the context, the destinations with a section trigger, the search, and the four global controls. The panel and its list stand in the DOM after the nav, closed.",
+      "language": "html",
+      "source": "<header slTopNavigation>\n  <div slTopNavigationBrand>\n    <a slTopNavigationHome href=\"/\">\n      <span slTopNavigationMark>…</span>\n      <span slTopNavigationName>name</span>\n    </a>\n  </div>\n  <div slTopNavigationContext>…</div>\n  <nav slTopNavigationNav>\n    <ul slTopNavigationList>\n      <li slTopNavigationItem value=\"link\"><a slTopNavigationLink href=\"/link\">link</a></li>\n      <li slTopNavigationItem value=\"trigger\">\n        <button slTopNavigationTrigger>trigger</button>\n        <div slNavigationMenuContent>…</div>\n      </li>\n    </ul>\n  </nav>\n  <div slTopNavigationSearch>…</div>\n  <div slTopNavigationActions>\n    <a slTopNavigationHelp href=\"/help\"></a>\n    <button slTopNavigationNotifications><span slTopNavigationCount>3</span></button>\n    <button slTopNavigationAccount>…</button>\n  </div>\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "priority",
+      "title": "Three steps of the width",
+      "note": "The same bar in four rooms of a stated width. On a desktop everything shows; on a laptop (under 1024) the low items have folded into more; a tablet at 640 folds the same low items and keeps the rest; on a phone the medium ones fold under 600, where the search becomes a magnifier and the context moves to the panel, and the high ones and the help fold under 480, where the name leaves the eye.",
+      "language": "html",
+      "source": "<ul slTopNavigationList>\n  <li slTopNavigationItem value=\"painel\" priority=\"high\">\n    <a slTopNavigationLink href=\"/painel\">Painel</a>\n  </li>\n  <li slTopNavigationItem value=\"rotas\"><a slTopNavigationLink href=\"/rotas\">Rotas</a></li>\n  <li slTopNavigationItem value=\"faturacao\" priority=\"low\">\n    <a slTopNavigationLink href=\"/faturacao\">Faturação</a>\n  </li>\n</ul>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "panel",
+      "title": "What folded, under the bar",
+      "note": "Press more: on a phone the panel takes the bar’s whole width, on a tablet it stands under the bar’s end. The folded destinations are rows, the workspace at the top and help at the bottom. A press on a row closes it with the reason select; Escape returns focus to more; a press outside closes it too.",
+      "language": "html",
+      "source": "<header slTopNavigation [(moreOpen)]=\"moreOpen\" (moreOpenChangeRequest)=\"log($event.reason)\">\n  …\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "The search gives way to a magnifier",
+      "note": "On a laptop the field stands at the start of the middle of the bar, after the brand and the destinations. On a phone it is a magnifier in the actions; pressing it opens the field over the whole bar with focus inside, and Escape, the cross or focus leaving it hand the bar back.",
+      "language": "html",
+      "source": "<div slTopNavigationSearch>\n  <div slTextField variant=\"subtle\">\n    <span slTextFieldStart><ng-icon name=\"lucideSearch\" size=\"16\" /></span>\n    <input slTextFieldInput type=\"search\" aria-label=\"Procurar\" placeholder=\"Procurar cargas…\" />\n    <span slTextFieldEnd><kbd slShortcut keys=\"mod+k\" size=\"sm\" variant=\"soft\"></kbd></span>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sections",
+      "title": "A section that opens a panel of destinations",
+      "note": "Frota is a section of the navigation menu the nav part already is: its panel opens on the shared surface under the bar, a resting pointer opens it after a delay, and a second section switches without one. Folded into the panel, the section opens its links in line.",
+      "language": "html",
+      "source": "<li slTopNavigationItem value=\"frota\">\n  <button slTopNavigationTrigger>Frota</button>\n  <div slNavigationMenuContent>\n    <ul slNavigationMenuLinks>\n      <li><a slNavigationMenuLink routerLink=\"/fleet/vehicles\">Veículos</a></li>\n    </ul>\n  </div>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "current",
+      "title": "Where the reader is",
+      "note": "value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place.",
+      "language": "html",
+      "source": "<header slTopNavigation [(value)]=\"value\" (valueChangeRequest)=\"log($event.reason)\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "actions",
+      "title": "The global controls",
+      "note": "Help as a link to a help centre or as the trigger of a popover; the bell with a count over its corner that grows to a pill away from it; the account as a menu’s trigger; a control of the product’s own — approvals — in the same square, with its own glyph and the same count. Each carries its name for a reader and repeats it in a tooltip.",
+      "language": "html",
+      "source": "<div slTopNavigationActions>\n  <a slTopNavigationHelp href=\"/ajuda\"></a>\n  <ng-container slPopover>\n    <button\n      slTopNavigationAction\n      slPopoverTrigger\n      [label]=\"'Aprovações, ' + pending() + ' pendentes'\"\n    >\n      <ng-icon name=\"lucideClipboardCheck\" />\n      <span slTopNavigationCount>{{ pending() }}</span>\n    </button>\n    <ng-template slPopoverLayer><div slPopoverContent>…</div></ng-template>\n  </ng-container>\n  <ng-container slPopover>\n    <button slTopNavigationNotifications slPopoverTrigger>\n      <span slTopNavigationCount>12</span>\n    </button>\n    <ng-template slPopoverLayer><div slPopoverContent>…</div></ng-template>\n  </ng-container>\n  <button slTopNavigationAccount [slMenuTriggerFor]=\"account\">\n    <span slAvatar size=\"xs\"><span slAvatarFallback>AB</span></span>\n  </button>\n  <sl-menu #account>…</sl-menu>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "context",
+      "title": "What the application is right now",
+      "note": "A workspace switcher and an environment badge after the brand. On a phone the whole region is moved to the top of the panel — the same element, so the switcher still opens its menu there.",
+      "language": "html",
+      "source": "<div slTopNavigationContext>\n  <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" [slMenuTriggerFor]=\"workspaces\">\n    Porto · Operações\n    <span slButtonEnd><ng-icon name=\"lucideChevronsUpDown\" /></span>\n  </button>\n  <sl-menu #workspaces>…</sl-menu>\n  <span slBadge size=\"sm\" tone=\"warning\" variant=\"soft\">Homologação</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "size",
+      "title": "Three control heights",
+      "note": "sm, md and lg move every control in the bar together — the mark, the destinations, the four global controls — and the bar’s own height with them. All three move again with density.",
+      "language": "html",
+      "source": "<header slTopNavigation size=\"sm\">…</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "The states a destination can be in",
+      "note": "Current, a section open, disabled — a disabled destination keeps its href and its name and refuses the press — and the hover, press and focus every control answers. Help and the account with their layers open hold the pointer’s ground.",
+      "language": "html",
+      "source": "<li slTopNavigationItem value=\"faturacao\" disabled>\n  <a slTopNavigationLink href=\"/faturacao\">Faturação</a>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A product name of nine words, cut with an ellipsis and, when the room runs out, given up before any control; destinations of four words each; a count of three characters; the account with a name beside the avatar; and the same bar in a right-to-left document.",
+      "language": "html",
+      "source": "<button slTopNavigationAccount>\n  <span slAvatar size=\"xs\"><span slAvatarFallback>MB</span></span>\n  <span>Maria Bartolomeu</span>\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "shell",
+      "title": "Inside the shell",
+      "note": "The bar as the only child of app-shell’s banner: a div rather than a second banner, no ground of its own, the shell’s nav-toggle in the brand and the mark over the column’s marks. Press the toggle and the bar keeps its place.",
+      "language": "html",
+      "source": "<div slAppShell>\n  <header slAppShellBanner>\n    <div slTopNavigation value=\"painel\">\n      <div slTopNavigationBrand>\n        <button slAppShellNavToggle></button>\n        <a slTopNavigationHome href=\"/\">…</a>\n      </div>\n      …\n    </div>\n  </header>\n  <nav slAppShellNav>…</nav>\n  <main slAppShellMain>…</main>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "standalone",
+      "title": "On its own, above a page",
+      "note": "A header with its own ground, rule and inset, a skip link that appears on the first Tab, and a page under it. Nothing here is sticky: an application that wants the bar pinned writes position: sticky on it.",
+      "language": "html",
+      "source": "<header slTopNavigation skipTo=\"conteudo\">…</header>\n<main id=\"conteudo\" tabindex=\"-1\">…</main>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Decided once for an application",
+      "note": "The provider carries the size and the frame for every bar under it — an application at the large step — and a bar that states one itself still wins. The words on the icon-only controls come from the language in force.",
+      "language": "ts",
+      "source": "@Component({\n  providers: [provideTopNavigationDefaults({ size: 'lg' })],\n  template: '<header slTopNavigation>…</header>',\n})\nexport class Shell {}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composed with what sits beside it",
+      "note": "routerLink and routerLinkActive on the destination, which is where aria-current comes from; a badge in the context; a kbd in the search; a navigation-menu panel on a section, a menu on the account and on the workspace; a popover on the bell.",
+      "language": "html",
+      "source": "<li slTopNavigationItem value=\"cargas\">\n  <a slTopNavigationLink routerLink=\"/cargas\" routerLinkActive ariaCurrentWhenActive=\"page\">\n    Cargas\n  </a>\n</li>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Tab reaches every control, in the order they stand: the skip link, the mark, each destination, more, the panel when it is open, the search, help, the bell, the account. Escape closes the panel or the open search and lands on the control that opened it. The reason each request carries is shown.",
+      "language": "html",
+      "source": "<header\n  slTopNavigation\n  (moreOpenChangeRequest)=\"log($event.reason)\"\n  (searchOpenChangeRequest)=\"log($event.reason)\"\n  (valueChangeRequest)=\"log($event.reason)\"\n>\n  …\n</header>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "A banner landmark holding a navigation landmark with a list of links, one of them current; a button named More that expands a panel; a search; and three buttons named for what they open. Nothing is a menubar and nothing writes tabindex.",
+      "language": "html",
+      "source": "<header slTopNavigation aria-label=\"Aurora\">\n  <nav slTopNavigationNav aria-label=\"Principal\">…</nav>\n</header>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}