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

package/docs/tabs.json

@@ -0,0 +1,661 @@
+{
+  "family": "tabs",
+  "ui": "tabs",
+  "binding": "angular",
+  "catalog": {
+    "group": "Navigation",
+    "summary": "Switches between panels of related content."
+  },
+  "axes": {
+    "activation": [
+      "automatic",
+      "manual"
+    ],
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "line",
+      "contained"
+    ],
+    "track": [
+      "line",
+      "none"
+    ],
+    "fit": [
+      "auto",
+      "equal"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ]
+  },
+  "members": {
+    "tabs": {
+      "nativeElement": "div",
+      "defaults": {
+        "activation": "automatic",
+        "orientation": "horizontal",
+        "size": "md",
+        "variant": "line",
+        "track": "line",
+        "fit": "auto",
+        "mount": "active",
+        "loop": true,
+        "disabled": false
+      },
+      "capabilities": [
+        "selection",
+        "orientation",
+        "size",
+        "appearance",
+        "disabled",
+        "removable",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "list",
+        "item",
+        "tab",
+        "start",
+        "label",
+        "end",
+        "dismiss",
+        "panel",
+        "scroll",
+        "actions"
+      ]
+    }
+  },
+  "docs": {
+    "tabs": {
+      "imports": {
+        "source": "import {\n  provideTabsDefaults,\n  SlTab,\n  SlTabActions,\n  SlTabEnd,\n  SlTabList,\n  SlTabPanel,\n  SlTabPanelContent,\n  SlTabs,\n  SlTabStart,\n} from '@slotted/angular/tabs';",
+        "selector": "[slTabs], [slTabList], [slTab], [slTabStart], [slTabEnd], [slTabPanel], ng-template[slTabPanelContent], [slTabActions]",
+        "exportAs": "slTabs, slTabList, slTab, slTabStart, slTabEnd, slTabPanel, slTabActions"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element carrying slTabs",
+          "required": true,
+          "purpose": "The Tabs root: a grid of four columns and two rows that carries data-ui=\"tabs\", the axes (data-size, data-variant, data-track, data-orientation, data-fit), data-disabled, data-overflowing and data-activation-direction. It renders the two paging controls itself, because it observes whether the list overflows."
+        },
+        {
+          "part": "list",
+          "element": "the element carrying slTabList, with role=\"tablist\"",
+          "required": true,
+          "purpose": "The scroll container, and the single Tab stop of the list. Name it with aria-label or aria-labelledby: Tabs writes neither, because only the page knows what the set of views is for."
+        },
+        {
+          "part": "item",
+          "element": "the slTab host, with role=\"presentation\"",
+          "required": true,
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. A class or an attribute written on slTab lands on it."
+        },
+        {
+          "part": "tab",
+          "element": "button[role=\"tab\"], or a[role=\"tab\"] with href",
+          "required": true,
+          "purpose": "The control. It holds aria-selected, aria-controls, the generated id and data-value, which the keyboard reads. A template reaches the SlTab instance through exportAs=\"slTab\"."
+        },
+        {
+          "part": "start",
+          "element": "the element carrying slTabStart",
+          "required": false,
+          "purpose": "The element marked slTabStart, before the label: an icon, as a flex item of the tab that never shrinks and that sizes an icon to the tab’s icon step."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The words, in a box of their own: text-overflow cuts it when fit=\"equal\" leaves too little room, and unicode-bidi: plaintext lets a label in another script read in its own direction."
+        },
+        {
+          "part": "end",
+          "element": "the element carrying slTabEnd",
+          "required": false,
+          "purpose": "The element marked slTabEnd, after the label: a count or a status, as a flex item of the tab that never shrinks."
+        },
+        {
+          "part": "dismiss",
+          "element": "button",
+          "required": false,
+          "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
+        },
+        {
+          "part": "panel",
+          "element": "the element carrying slTabPanel, with role=\"tabpanel\"",
+          "required": true,
+          "purpose": "The content of one tab, with aria-labelledby pointing at its tab and tabindex=\"0\". It carries the hidden attribute while another tab is selected. The panel element always exists, so every tab’s aria-controls names an element; mount decides whether its content exists. Content written in <ng-template slTabPanelContent> is created only when mount says so."
+        },
+        {
+          "part": "scroll",
+          "element": "button",
+          "required": false,
+          "purpose": "One paging control at each end, drawn only while the list overflows. It is aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view."
+        },
+        {
+          "part": "actions",
+          "element": "the element carrying slTabActions",
+          "required": false,
+          "purpose": "A slot at the end of the tab row, for controls that act on what the tabs show. Put a Toolbar in it: one Tab stop however many buttons it holds."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTabs",
+          "description": "The value of the selected tab. Passing it makes the selection controlled for the life of the component; without it, slTabs keeps the selection and starts from defaultValue."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTabs",
+          "description": "The value an uncontrolled slTabs starts from, read once. When it is unset, no tab is selected and no panel is shown."
+        },
+        {
+          "name": "activation",
+          "type": "'automatic' | 'manual'",
+          "defaultValue": "automatic",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "Whether moving focus to a tab also selects it. The APG recommends automatic when panels show without a noticeable delay, and manual when a panel has to be fetched."
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "Which way the list runs, and so which arrow keys move between tabs. A horizontal list ignores Up and Down, so those keys keep scrolling the page."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "The control step of the list: height, type, padding and inner gap, all from the control scales the theme restates per density."
+        },
+        {
+          "name": "variant",
+          "type": "'line' | 'contained'",
+          "defaultValue": "line",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "How the list is drawn. Both variants paint the accent marker, which keeps the selected tab visible in the high-contrast scheme, where every surface is flattened."
+        },
+        {
+          "name": "track",
+          "type": "'line' | 'none'",
+          "defaultValue": "line",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "Whether the list draws the line its tabs stand on. none is for a list placed on a line the page already draws, such as a card header’s edge or a table’s rule, where two hairlines a pixel apart read as one smudge. The marker then sits on the item’s own edge, on the line that is there."
+        },
+        {
+          "name": "fit",
+          "type": "'auto' | 'equal'",
+          "defaultValue": "auto",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "Whether each tab is as wide as its label or takes an equal share of the line. equal cuts a label longer than its share with an ellipsis; auto never cuts a label and scrolls the list instead."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "When a panel’s content exists: only while its tab is selected (active), from its first selection on (lazy), or from the start (eager). A panel that is not selected carries the hidden attribute. Angular creates projected content with the page; write a panel’s content in <ng-template slTabPanelContent> for mount to decide when it is created."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTabs, provideTabsDefaults",
+          "description": "Whether the arrow keys wrap past the ends of the list."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTabs",
+          "description": "Disables every tab with the native attribute, which also makes the arrow keys skip them, and dims the track."
+        },
+        {
+          "name": "value, on slTab",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTab",
+          "description": "What this tab selects, and what the value of slTabs holds. It reaches the DOM as data-value, which the keyboard reads."
+        },
+        {
+          "name": "disabled, on slTab",
+          "type": "boolean",
+          "defaultValue": "from slTabs, or false",
+          "appliesTo": "slTab",
+          "description": "Disables this tab only, so one tab can be unavailable in a working list. Unset rather than false, so the tab follows slTabs."
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTab",
+          "description": "Draws the close button and binds Delete on the tab, announced through aria-keyshortcuts."
+        },
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTab",
+          "description": "The accessible name of the close button, required whenever it is drawn. Name what closes: “Close customers.sql” rather than “Close”."
+        },
+        {
+          "name": "slTabStart",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "an element inside slTab",
+          "description": "Marks the content before the label, such as an icon, and places it in the start part beside the words."
+        },
+        {
+          "name": "slTabEnd",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "an element inside slTab",
+          "description": "Marks the content after the label, such as a badge with a count, and places it in the end part beside the words."
+        },
+        {
+          "name": "controls",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTab",
+          "description": "The id of the region this tab controls when it is not a slTabPanel, such as a table the selected value filters. aria-controls names that region."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTab",
+          "description": "Renders the tab as a link. A plain click selects the tab without navigating; a click with a modifier key is left to the browser, which opens the address in a new browser tab or window."
+        },
+        {
+          "name": "value, on slTabPanel",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTabPanel",
+          "description": "The tab this panel belongs to. slTabs wires the pair with ids generated from the value."
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "slTabs | slTabList | slTab | slTabPanel | slTabActions | slTabStart | slTabEnd",
+          "defaultValue": "—",
+          "appliesTo": "every directive",
+          "description": "A template reaches an instance by name: #tabs=\"slTabs\" gives a page select(value, reason), the resolved axes and the ids, for a view a router changes."
+        },
+        {
+          "name": "the element you write it on",
+          "type": "any element",
+          "defaultValue": "—",
+          "appliesTo": "every directive",
+          "description": "The five roots are directives on your own elements, so a list can be a nav and slTabs a section. The tab control itself cannot be replaced: it holds the role, the value and the keyboard, and href covers the substitution that matters."
+        },
+        {
+          "name": "ng-content",
+          "type": "projected content",
+          "defaultValue": "—",
+          "appliesTo": "slTab, slTabPanel, slTabActions",
+          "description": "The label, the panel content and the actions are your own markup. Under mount=\"active\", a closed panel keeps its projected content out of the DOM, but Angular creates projected components with the page."
+        },
+        {
+          "name": "slTabPanelContent",
+          "type": "ng-template directive",
+          "defaultValue": "—",
+          "appliesTo": "a direct child of slTabPanel",
+          "description": "Holds a panel’s content as a template that mount instantiates: on selection and destroyed after under active, on first selection and kept under lazy, up front under eager."
+        },
+        {
+          "name": "provideTabsDefaults()",
+          "type": "{ activation, orientation, size, variant, track, fit, mount, loop }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The eight settings an application decides once, in the bootstrap providers, on a route or on a component. A value set on one slTabs still wins."
+        },
+        {
+          "name": "aria-label, on slTabList",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "slTabList",
+          "description": "The name of the set of views. slTabs writes no name of its own; aria-labelledby works the same way."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "ChangeRequest<string | undefined>",
+          "when": "Before the selection moves. The request carries the new value, the previous value (undefined while no tab is selected), the reason (pointer, keyboard, remove or programmatic), the originating event, and cancel(), which keeps the current tab."
+        },
+        {
+          "name": "tabDismiss",
+          "payload": "TabsDismissRequest, which also carries the value being closed",
+          "when": "Before a tab is closed, by Delete or by its close button. The request carries the reason (pointer or keyboard) and cancel(), which stops both the dismissal and the selection move that would follow it. Tabs removes nothing itself: remove the tab from your own data."
+        },
+        {
+          "name": "click, keydown, focus, on each slTab",
+          "payload": "the element’s own events",
+          "when": "When the tab’s control fires them. A listener bound on the slTab host runs after the tab’s own handler."
+        }
+      ],
+      "accessibility": [
+        "Tabs implements the WAI-ARIA APG Tabs pattern (w3.org/WAI/ARIA/apg/patterns/tabs/) and its whole keyboard table: Tab enters the list on the selected tab and leaves to the panel, the arrow keys of the list’s direction move focus and wrap at both ends, Home and End reach the first and last enabled tab, Enter and Space select under manual activation, and Delete closes a dismissible tab. A horizontal list does not listen for Up and Down, so those keys keep scrolling the page while focus is in the list.",
+        "After a dismissal, focus follows the pattern: the next tab, the previous one when the closed tab was last, or the list itself when no tab is left, which is why the list carries tabindex=\"-1\". The selection follows the same rule, with the reason remove.",
+        "The close button is outside the arrow-key sequence and inside the accessibility tree. A screen reader reaches and presses it; from the keyboard, Delete closes the focused tab, and the tab announces the key with aria-keyshortcuts. In the arrow-key sequence, close buttons would double the presses it takes to cross the list.",
+        "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
+        "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
+        "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
+        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-strong",
+    "--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-font-weight",
+    "--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-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-letter-spacing",
+    "--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-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-shadow-xs",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-6",
+    "--slotted-surface",
+    "--slotted-surface-sunken",
+    "--slotted-tabs-actions-gap",
+    "--slotted-tabs-active-background",
+    "--slotted-tabs-active-marker-color",
+    "--slotted-tabs-color",
+    "--slotted-tabs-contained-background",
+    "--slotted-tabs-contained-selected-background",
+    "--slotted-tabs-dismiss-active-background",
+    "--slotted-tabs-dismiss-active-color",
+    "--slotted-tabs-dismiss-color",
+    "--slotted-tabs-dismiss-hover-background",
+    "--slotted-tabs-dismiss-hover-color",
+    "--slotted-tabs-fade-size",
+    "--slotted-tabs-gap",
+    "--slotted-tabs-hover-background",
+    "--slotted-tabs-hover-color",
+    "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-list-gap",
+    "--slotted-tabs-marker-color",
+    "--slotted-tabs-scroll-color",
+    "--slotted-tabs-selected-color",
+    "--slotted-tabs-track-color",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-inverse",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One family with every axis on it, driven by the controls below the canvas. Tab into it once: the list is a single stop, and the arrows move the selection from there.",
+      "language": "html",
+      "source": "<div slTabs defaultValue=\"summary\">\n  <div slTabList aria-label=\"Order\">\n    <div slTab value=\"summary\">Summary</div>\n    <div slTab value=\"items\">Items</div>\n  </div>\n  <div slTabPanel value=\"summary\">Delivery expected on September 12.</div>\n  <div slTabPanel value=\"items\">Three items.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activation",
+      "title": "Whether focus selects",
+      "note": "Automatic is the APG’s recommendation for panels that are already loaded; manual moves focus and waits for Enter or Space, which is what a panel that fetches needs.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs, type TabsActivation } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst MODES: { activation: TabsActivation; caption: string }[] = [\n  { activation: 'automatic', caption: 'Automatic: the arrow keys select as they move.' },\n  { activation: 'manual', caption: 'Manual: the arrow keys move focus; Enter or Space selects.' },\n];\n\nconst REPORTS = [\n  { value: 'revenue', label: 'Revenue', panel: 'Revenue this quarter: $412,800.00.' },\n  { value: 'margin', label: 'Margin', panel: 'Gross margin this quarter: 38.4%.' },\n  { value: 'returns', label: 'Returns', panel: 'Return rate this quarter: 2.1%.' },\n];\n\n@Component({\n  selector: 'app-tabs-activation',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"8\">\n      @for (mode of modes; track mode.activation) {\n        <div slStack [gap]=\"3\">\n          <span slText size=\"sm\" tone=\"muted\">{{ mode.caption }}</span>\n          <div slTabs defaultValue=\"revenue\" [activation]=\"mode.activation\">\n            <div slTabList aria-label=\"Quarterly reports\">\n              @for (report of reports; track report.value) {\n                <div slTab [value]=\"report.value\">{{ report.label }}</div>\n              }\n            </div>\n            @for (report of reports; track report.value) {\n              <div slTabPanel [value]=\"report.value\">\n                <span slText size=\"sm\">{{ report.panel }}</span>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsActivationExample {\n  protected readonly modes = MODES;\n  protected readonly reports = REPORTS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "orientation",
+      "title": "Which way the list runs",
+      "note": "A horizontal list scrolls and refuses the up and down arrows, so the page keeps scrolling with focus inside it; a vertical one stacks, turns the track and the marker, and announces aria-orientation.",
+      "language": "html",
+      "source": "<div slTabs defaultValue=\"a\" orientation=\"vertical\">\n  <div slTabList aria-label=\"Settings\">\n    <div slTab value=\"a\">Profile</div>\n    <div slTab value=\"b\">Notifications</div>\n  </div>\n  <div slTabPanel value=\"a\">Name and photo.</div>\n  <div slTabPanel value=\"b\">Email notices.</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "The two ways a list is drawn",
+      "note": "Line is a row of labels over a hairline; contained is a sunken track holding a surface per tab; and track=\"none\" keeps the labels and drops the hairline, for a list standing on a line the page already drew. All three keep the accent marker, which is what survives the high-contrast scheme after every surface flattens.",
+      "language": "html",
+      "source": "<div slTabs defaultValue=\"a\" variant=\"line\"></div>\n<div slTabs defaultValue=\"a\" variant=\"contained\"></div>\n\n<!-- Standing on a line the page already drew — a card header, a table's rule. -->\n<div slTabs defaultValue=\"a\" track=\"none\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the list sits at",
+      "note": "Height, type, padding and the inner gap all come from the control scales, so switching the toolbar to dense shrinks each step whole rather than in parts.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs, type TabsSize } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SIZES: TabsSize[] = ['sm', 'md', 'lg'];\n\nconst VIEWS = [\n  { value: 'stock', label: 'Stock', panel: '1,284 units on hand across 3 warehouses.' },\n  { value: 'movements', label: 'Movements', panel: '46 movements in the last 7 days.' },\n  {\n    value: 'suppliers',\n    label: 'Suppliers',\n    panel: 'Ordered from Brightline Studio and Quill & Co.',\n  },\n];\n\n@Component({\n  selector: 'app-tabs-sizes',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"8\">\n      @for (size of sizes; track size) {\n        <div slTabs defaultValue=\"stock\" [size]=\"size\">\n          <div slTabList aria-label=\"Product OAK-90\">\n            @for (view of views; track view.value) {\n              <div slTab [value]=\"view.value\">{{ view.label }}</div>\n            }\n          </div>\n          @for (view of views; track view.value) {\n            <div slTabPanel [value]=\"view.value\">\n              <span slText size=\"sm\">{{ view.panel }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsSizes {\n  protected readonly sizes = SIZES;\n  protected readonly views = VIEWS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "fit",
+      "title": "How the line is divided",
+      "note": "auto makes each tab as wide as its label and scrolls what does not fit; equal divides the line between them and is the one place a horizontal label is ever truncated.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst QUEUES = [\n  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },\n  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },\n  {\n    value: 'inspection',\n    label: 'Awaiting inspection',\n    panel: '3 returns wait for a quality check before restocking.',\n  },\n];\n\n@Component({\n  selector: 'app-tabs-fit',\n  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slTabs defaultValue=\"incoming\" fit=\"equal\" variant=\"contained\">\n      <div slTabList aria-label=\"Warehouse queues\">\n        @for (queue of queues; track queue.value) {\n          <div slTab [value]=\"queue.value\">{{ queue.label }}</div>\n        }\n      </div>\n      @for (queue of queues; track queue.value) {\n        <div slTabPanel [value]=\"queue.value\">\n          <span slText size=\"sm\">{{ queue.panel }}</span>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsFit {\n  protected readonly queues = QUEUES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "Every state the family paints",
+      "note": "A tab that is not selected raises its ink on hover. In the line variant a neutral bar appears where the mark would go and darkens on press; in the contained variant the cell fills instead. A selected one does neither, because it is already at full strength. Disabled is the native attribute, which is also what makes the browser skip it.",
+      "language": "html",
+      "source": "<div slTabs defaultValue=\"a\">\n  <div slTabList aria-label=\"Document\">\n    <div slTab value=\"a\">Available</div>\n    <div slTab value=\"b\" disabled>Unavailable</div>\n  </div>\n  <div slTabPanel value=\"a\">…</div>\n</div>\n\n<div slTabs defaultValue=\"a\" disabled></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "mount",
+      "title": "When a panel exists",
+      "note": "active builds the panel on selection and drops it after, lazy keeps it once built, eager builds every one up front. A panel holding a table or a chart is the reason the default is active.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTab,\n  SlTabList,\n  SlTabPanel,\n  SlTabPanelContent,\n  SlTabs,\n  type TabsMount,\n} from '@slotted/angular/tabs';\nimport { SlTextarea } from '@slotted/angular/textarea';\nimport { SlText } from '@slotted/angular/typography';\n\nconst MODES: { mount: TabsMount; caption: string }[] = [\n  { mount: 'active', caption: 'mount=\"active\": the note is built again, empty, on return.' },\n  { mount: 'lazy', caption: 'mount=\"lazy\": the note keeps what was typed.' },\n];\n\n@Component({\n  selector: 'app-tabs-mount',\n  imports: [\n    SlField,\n    SlFieldLabel,\n    SlStack,\n    SlTab,\n    SlTabList,\n    SlTabPanel,\n    SlTabPanelContent,\n    SlTabs,\n    SlText,\n    SlTextarea,\n  ],\n  template: `\n    <div slStack [gap]=\"8\">\n      @for (mode of modes; track mode.mount) {\n        <div slStack [gap]=\"3\">\n          <span slText size=\"sm\" tone=\"muted\">{{ mode.caption }}</span>\n          <div slTabs defaultValue=\"note\" [mount]=\"mode.mount\">\n            <div slTabList aria-label=\"Order SO-1187\">\n              <div slTab value=\"note\">Picking note</div>\n              <div slTab value=\"summary\">Summary</div>\n            </div>\n            <div slTabPanel value=\"note\">\n              <ng-template slTabPanelContent>\n                <div slField>\n                  <label slFieldLabel>Note for the picker</label>\n                  <textarea\n                    slTextarea\n                    placeholder=\"Pack the brackets separately\"\n                    rows=\"2\"\n                  ></textarea>\n                </div>\n              </ng-template>\n            </div>\n            <div slTabPanel value=\"summary\">\n              <span slText size=\"sm\">3 lines, picked from zone C at Reno, NV.</span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsMountExample {\n  protected readonly modes = MODES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dismissible",
+      "title": "Tabs a reader can close",
+      "note": "Delete closes the focused tab and the pointer closes it from the control; the family then asks for the neighbour — the following tab, or the preceding one when the closed tab was last — and removes nothing itself.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst OPEN = [\n  { id: 'SO-1187', customer: 'Harbor & Pine', total: '$1,240.00' },\n  { id: 'SO-1188', customer: 'Brightline Studio', total: '$318.50' },\n  { id: 'SO-1190', customer: 'Northgate Labs', total: '$2,906.10' },\n  { id: 'SO-1191', customer: 'Verde Kitchen', total: '$86.00' },\n];\n\n@Component({\n  selector: 'app-tabs-dismissible',\n  imports: [SlButton, SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    @if (orders().length === 0) {\n      <div slStack [gap]=\"3\" align=\"start\">\n        <span slText size=\"sm\" tone=\"muted\">No orders open.</span>\n        <button slButton size=\"sm\" variant=\"outline\" (click)=\"reopen()\">Reopen orders</button>\n      </div>\n    } @else {\n      <div\n        slTabs\n        [value]=\"active()\"\n        (valueChange)=\"active.set($event.value ?? active())\"\n        (tabDismiss)=\"close($event.value)\"\n      >\n        <div slTabList aria-label=\"Open orders\">\n          @for (order of orders(); track order.id) {\n            <div slTab dismissible [dismissLabel]=\"'Close ' + order.id\" [value]=\"order.id\">\n              {{ order.id }}\n            </div>\n          }\n        </div>\n        @for (order of orders(); track order.id) {\n          <div slTabPanel [value]=\"order.id\">\n            <span slText size=\"sm\">{{ order.customer }}, {{ order.total }}.</span>\n          </div>\n        }\n      </div>\n    }\n  `,\n})\nexport class TabsDismissible {\n  protected readonly orders = signal(OPEN);\n  protected readonly active = signal('SO-1188');\n\n  protected close(id: string) {\n    this.orders.update((open) => open.filter((order) => order.id !== id));\n  }\n\n  protected reopen() {\n    this.orders.set(OPEN);\n    this.active.set('SO-1187');\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "overflow",
+      "title": "A list that does not fit",
+      "note": "The list scrolls rather than wrapping or truncating, two paging controls appear only while there is somewhere to scroll, and the arrow keys bring each tab into view as focus reaches it.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst WAREHOUSES = [\n  { code: 'RNO', city: 'Reno, NV', open: 42 },\n  { code: 'CMH', city: 'Columbus, OH', open: 37 },\n  { code: 'SAV', city: 'Savannah, GA', open: 18 },\n  { code: 'DFW', city: 'Dallas, TX', open: 51 },\n  { code: 'EWR', city: 'Newark, NJ', open: 29 },\n  { code: 'ONT', city: 'Ontario, CA', open: 64 },\n  { code: 'JOT', city: 'Joliet, IL', open: 23 },\n  { code: 'MEM', city: 'Memphis, TN', open: 46 },\n  { code: 'ABE', city: 'Allentown, PA', open: 12 },\n  { code: 'TIW', city: 'Tacoma, WA', open: 31 },\n  { code: 'SCK', city: 'Stockton, CA', open: 9 },\n  { code: 'IND', city: 'Indianapolis, IN', open: 27 },\n];\n\n@Component({\n  selector: 'app-tabs-overflow',\n  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slTabs defaultValue=\"MEM\">\n      <div slTabList aria-label=\"Warehouses\">\n        @for (warehouse of warehouses; track warehouse.code) {\n          <div slTab [value]=\"warehouse.code\">{{ warehouse.city }}</div>\n        }\n      </div>\n      @for (warehouse of warehouses; track warehouse.code) {\n        <div slTabPanel [value]=\"warehouse.code\">\n          <span slText size=\"sm\"\n            >{{ warehouse.code }}: {{ warehouse.open }} open orders to ship today.</span\n          >\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsOverflow {\n  protected readonly warehouses = WAREHOUSES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "links",
+      "title": "A view a router can deep-link to",
+      "note": "href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst VIEWS = [\n  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },\n  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },\n  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },\n];\n\n@Component({\n  selector: 'app-tabs-links',\n  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slTabs defaultValue=\"summary\">\n      <div slTabList aria-label=\"Order SO-1187\">\n        @for (view of views; track view.value) {\n          <div slTab [value]=\"view.value\" [href]=\"'#order-' + view.value\">{{ view.label }}</div>\n        }\n      </div>\n      @for (view of views; track view.value) {\n        <div slTabPanel [value]=\"view.value\">\n          <span slText size=\"sm\">{{ view.panel }}</span>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsLinks {\n  protected readonly views = VIEWS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "An unbroken digest breaks inside its own tab instead of setting the list’s width, a right-to-left label reads its own way inside a page that reads the other, and a long label scrolls rather than wrapping.",
+      "language": "html",
+      "source": "<div slTabs defaultValue=\"a\">\n  <div slTabList aria-label=\"Extreme content\">\n    <div slTab value=\"a\">sha256:9f86d081884c7d659a2feaa0c55ad015</div>\n    <div slTab value=\"b\">بيانات التسليم</div>\n  </div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, and reaching past it",
+      "note": "The provider carries the seven decisions an application takes once, render substitutes every root so a list can be a real nav, and the actions slot is where a Toolbar goes.",
+      "language": "ts",
+      "source": "// One decision for every family in the application, in the bootstrap file.\nbootstrapApplication(App, {\n  providers: [provideTabsDefaults({ size: 'sm', variant: 'contained' })],\n});\n\n// And in a template, the slot beside the list is where a toolbar goes:\n// <div slTabActions><div slToolbar aria-label=\"Actions\">…</div></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The APG table, and where focus lands",
+      "note": "Tab enters on the selected tab and leaves to the panel, the arrows of the flow axis move and wrap, Home and End reach the ends, and Delete closes a dismissible tab and moves focus to its neighbour.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst STEPS = [\n  { value: 'picking', label: 'Picking', panel: '18 lines to pick in zone C.' },\n  { value: 'packing', label: 'Packing', panel: '6 orders waiting at station 2.' },\n  { value: 'loading', label: 'Loading', panel: 'Atlas Freight trailer at dock 4 until 15:30.' },\n];\n\n@Component({\n  selector: 'app-tabs-keyboard',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slTabs defaultValue=\"picking\" (valueChange)=\"report($event)\">\n        <div slTabList aria-label=\"Outbound shift\">\n          @for (step of steps; track step.value) {\n            <div slTab [value]=\"step.value\">{{ step.label }}</div>\n          }\n        </div>\n        @for (step of steps; track step.value) {\n          <div slTabPanel [value]=\"step.value\">\n            <span slText size=\"sm\">{{ step.panel }}</span>\n          </div>\n        }\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ last() }}</span>\n    </div>\n  `,\n})\nexport class TabsKeyboard {\n  protected readonly steps = STEPS;\n  protected readonly last = signal('Nothing selected yet.');\n\n  protected report(request: ChangeRequest<string | undefined>) {\n    const step = STEPS.find((item) => item.value === request.value);\n    this.last.set(`${step?.label} selected by ${request.reason}.`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "actions",
+      "title": "actions.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonStart } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlTab, SlTabActions, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlToolbar } from '@slotted/angular/toolbar';\nimport { SlText } from '@slotted/angular/typography';\n\nconst VIEWS = [\n  { value: 'lines', label: 'Lines', panel: '6 lines from Quill & Co., $4,812.00.' },\n  { value: 'receipts', label: 'Receipts', panel: '4 of 6 lines received at Columbus, OH.' },\n  { value: 'history', label: 'History', panel: 'Approved by Marco Ilić on September 22.' },\n];\n\n@Component({\n  selector: 'app-tabs-actions',\n  imports: [\n    SlButton,\n    SlButtonStart,\n    SlGlyph,\n    SlTab,\n    SlTabActions,\n    SlTabList,\n    SlTabPanel,\n    SlTabs,\n    SlText,\n    SlToolbar,\n  ],\n  template: `\n    <div slTabs defaultValue=\"lines\">\n      <div slTabList aria-label=\"Purchase order PO-4521\">\n        @for (view of views; track view.value) {\n          <div slTab [value]=\"view.value\">{{ view.label }}</div>\n        }\n      </div>\n      <div slTabActions>\n        <div slToolbar aria-label=\"Purchase order actions\" size=\"sm\">\n          <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n            <span slButtonStart><svg slGlyph name=\"upload\"></svg></span>\n            Export\n          </button>\n          <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n            <span slButtonStart><svg slGlyph name=\"copy\"></svg></span>\n            Duplicate\n          </button>\n        </div>\n      </div>\n      @for (view of views; track view.value) {\n        <div slTabPanel [value]=\"view.value\">\n          <span slText size=\"sm\">{{ view.panel }}</span>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsActionsExample {\n  protected readonly views = VIEWS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SECTIONS = [\n  {\n    value: 'summary',\n    label: 'Summary',\n    pairs: [\n      ['Customer', 'Harbor & Pine'],\n      ['Placed', 'September 8, 2026'],\n      ['Payment terms', 'Net 30'],\n      ['Total', '$1,240.00'],\n    ],\n  },\n  {\n    value: 'items',\n    label: 'Items',\n    pairs: [\n      ['Oak shelf, 90 cm', '4 × $180.00'],\n      ['Wall bracket, steel', '8 × $24.00'],\n      ['Assembly kit', '1 × $328.00'],\n    ],\n  },\n  {\n    value: 'shipments',\n    label: 'Shipments',\n    pairs: [\n      ['Carrier', 'Atlas Freight'],\n      ['Tracking', 'AF-2210-4471'],\n      ['Expected', 'September 12, 2026'],\n    ],\n  },\n];\n\nconst ACTIVITY = [\n  'Sep 9, 14:02 — Picked at Reno, NV',\n  'Sep 8, 16:45 — Payment approved',\n  'Sep 8, 16:41 — Order placed by Dana Whitfield',\n];\n\n@Component({\n  selector: 'app-tabs-basic',\n  imports: [\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlStack,\n    SlTab,\n    SlTabList,\n    SlTabPanel,\n    SlTabs,\n    SlText,\n  ],\n  template: `\n    <div slTabs defaultValue=\"summary\">\n      <div slTabList aria-label=\"Order SO-1187\">\n        @for (section of sections; track section.value) {\n          <div slTab [value]=\"section.value\">{{ section.label }}</div>\n        }\n        <div slTab value=\"activity\">Activity</div>\n      </div>\n      @for (section of sections; track section.value) {\n        <div slTabPanel [value]=\"section.value\">\n          <div slDescriptionList>\n            @for (pair of section.pairs; track pair[0]) {\n              <div slDescriptionListItem>\n                <dt slDescriptionListTerm>{{ pair[0] }}</dt>\n                <dd slDescriptionListDescription>{{ pair[1] }}</dd>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <div slTabPanel value=\"activity\">\n        <div slStack [gap]=\"2\">\n          @for (entry of activity; track entry) {\n            <span slText size=\"sm\">{{ entry }}</span>\n          }\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsBasic {\n  protected readonly sections = SECTIONS;\n  protected readonly activity = ACTIVITY;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst VIEWS = [\n  { value: 'orders', label: 'Orders', panel: '12 open orders, $14,380.00 in total.' },\n  {\n    value: 'invoices',\n    label: 'Invoices',\n    panel: 'INV-20877 and INV-20902 are past due: $2,146.50.',\n  },\n  { value: 'payments', label: 'Payments', panel: 'Last payment: $3,200.00 on September 30.' },\n];\n\n@Component({\n  selector: 'app-tabs-controlled',\n  imports: [SlButton, SlInline, SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slInline [gap]=\"3\" align=\"center\" justify=\"between\">\n        <span slText size=\"sm\" tone=\"muted\">2 invoices are past due.</span>\n        <button slButton size=\"sm\" variant=\"outline\" (click)=\"view.set('invoices')\">\n          Review invoices\n        </button>\n      </div>\n      <div slTabs [value]=\"view()\" (valueChange)=\"view.set($event.value ?? view())\">\n        <div slTabList aria-label=\"Account Harbor & Pine\">\n          @for (item of views; track item.value) {\n            <div slTab [value]=\"item.value\">{{ item.label }}</div>\n          }\n        </div>\n        @for (item of views; track item.value) {\n          <div slTabPanel [value]=\"item.value\">\n            <span slText size=\"sm\">{{ item.panel }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class TabsControlled {\n  protected readonly views = VIEWS;\n  protected readonly view = signal('orders');\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport { provideTabsDefaults, SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-tabs-defaults',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  providers: [provideTabsDefaults({ size: 'sm', variant: 'contained' })],\n  template: `\n    <div slStack [gap]=\"8\">\n      <div slTabs defaultValue=\"stock\">\n        <div slTabList aria-label=\"Product OAK-90\">\n          <div slTab value=\"stock\">Stock</div>\n          <div slTab value=\"pricing\">Pricing</div>\n        </div>\n        <div slTabPanel value=\"stock\">\n          <span slText size=\"sm\">1,284 units on hand.</span>\n        </div>\n        <div slTabPanel value=\"pricing\">\n          <span slText size=\"sm\">List price $180.00, cost $96.40.</span>\n        </div>\n      </div>\n      <div slTabs defaultValue=\"open\" variant=\"line\">\n        <div slTabList aria-label=\"Purchase orders\">\n          <div slTab value=\"open\">Open</div>\n          <div slTab value=\"received\">Received</div>\n        </div>\n        <div slTabPanel value=\"open\">\n          <span slText size=\"sm\">3 purchase orders for OAK-90 are open.</span>\n        </div>\n        <div slTabPanel value=\"received\">\n          <span slText size=\"sm\">Last received on September 22: 400 units.</span>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsDefaults {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled",
+      "title": "disabled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-tabs-disabled',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"8\">\n      <div slTabs defaultValue=\"summary\">\n        <div slTabList aria-label=\"Order SO-1192\">\n          <div slTab value=\"summary\">Summary</div>\n          <div slTab value=\"items\">Items</div>\n          <div slTab value=\"invoice\" disabled>Invoice</div>\n        </div>\n        <div slTabPanel value=\"summary\">\n          <span slText size=\"sm\">Awaiting pickup. The invoice is issued once the order ships.</span>\n        </div>\n        <div slTabPanel value=\"items\">\n          <span slText size=\"sm\">5 items from the Reno, NV warehouse.</span>\n        </div>\n        <div slTabPanel value=\"invoice\">\n          <span slText size=\"sm\">Invoice INV-20931.</span>\n        </div>\n      </div>\n      <div slTabs defaultValue=\"summary\" disabled>\n        <div slTabList aria-label=\"Order SO-1188\">\n          <div slTab value=\"summary\">Summary</div>\n          <div slTab value=\"items\">Items</div>\n          <div slTab value=\"invoice\">Invoice</div>\n        </div>\n        <div slTabPanel value=\"summary\">\n          <span slText size=\"sm\">Locked while the warehouse recounts this order.</span>\n        </div>\n        <div slTabPanel value=\"items\">\n          <span slText size=\"sm\">2 items from the Columbus, OH warehouse.</span>\n        </div>\n        <div slTabPanel value=\"invoice\">\n          <span slText size=\"sm\">Invoice INV-20917.</span>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsDisabled {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter",
+      "title": "filter.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlTab, SlTabEnd, SlTabList, SlTabs } from '@slotted/angular/tabs';\n\nconst ORDERS = [\n  { id: 'SO-1187', customer: 'Harbor & Pine', status: 'open', total: '$1,240.00' },\n  { id: 'SO-1188', customer: 'Brightline Studio', status: 'shipped', total: '$318.50' },\n  { id: 'SO-1190', customer: 'Northgate Labs', status: 'open', total: '$2,906.10' },\n  { id: 'SO-1191', customer: 'Verde Kitchen', status: 'delayed', total: '$86.00' },\n  { id: 'SO-1193', customer: 'Quill & Co.', status: 'shipped', total: '$540.25' },\n];\n\nconst FILTERS = [\n  { value: 'all', label: 'All' },\n  { value: 'open', label: 'Open' },\n  { value: 'delayed', label: 'Delayed' },\n  { value: 'shipped', label: 'Shipped' },\n];\n\nconst STATUS: Record<string, string> = { open: 'Open', delayed: 'Delayed', shipped: 'Shipped' };\n\nconst matching = (filter: string) =>\n  filter === 'all' ? ORDERS : ORDERS.filter((order) => order.status === filter);\n\n@Component({\n  selector: 'app-tabs-filter',\n  imports: [\n    SlBadge,\n    SlStack,\n    SlTab,\n    SlTabEnd,\n    SlTabList,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTabs,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slTabs size=\"sm\" [value]=\"filter()\" (valueChange)=\"filter.set($event.value ?? filter())\">\n        <div slTabList aria-label=\"Orders by status\">\n          @for (item of filters; track item.value) {\n            <div slTab controls=\"orders-by-status\" [value]=\"item.value\">\n              {{ item.label }}\n              <span slTabEnd\n                ><span slBadge showZero size=\"sm\" [count]=\"matching(item.value).length\"></span\n              ></span>\n            </div>\n          }\n        </div>\n      </div>\n      <div slTable id=\"orders-by-status\" [columns]=\"4\">\n        <div slTableContent aria-label=\"Orders\">\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableColumnHeader>Order</th>\n              <th slTableColumnHeader>Customer</th>\n              <th slTableColumnHeader>Status</th>\n              <th slTableColumnHeader numeric>Total</th>\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of rows(); track order.id) {\n              <tr slTableRow [value]=\"order.id\">\n                <th slTableRowHeader>{{ order.id }}</th>\n                <td slTableCell>{{ order.customer }}</td>\n                <td slTableCell>{{ status[order.status] }}</td>\n                <td slTableCell numeric>{{ order.total }}</td>\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsFilter {\n  protected readonly filters = FILTERS;\n  protected readonly status = STATUS;\n  protected readonly matching = matching;\n  protected readonly filter = signal('all');\n  protected readonly rows = computed(() => matching(this.filter()));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "icons",
+      "title": "icons.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlGlyph, SlIcon, type GlyphName } from '@slotted/angular/icon';\nimport { SlTab, SlTabEnd, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst VIEWS: { value: string; label: string; icon: GlyphName; count?: number; panel: string }[] = [\n  {\n    value: 'overview',\n    label: 'Overview',\n    icon: 'file-text',\n    panel: 'Harbor & Pine, customer since 2021. Net 30 terms.',\n  },\n  {\n    value: 'orders',\n    label: 'Orders',\n    icon: 'inbox',\n    count: 12,\n    panel: '12 open orders, $14,380.00 in total.',\n  },\n  {\n    value: 'contacts',\n    label: 'Contacts',\n    icon: 'person',\n    count: 3,\n    panel: 'Dana Whitfield, Marco Ilić and Priya Raman.',\n  },\n  {\n    value: 'files',\n    label: 'Files',\n    icon: 'paperclip',\n    panel: 'Signed credit application and a W-9 form.',\n  },\n];\n\n@Component({\n  selector: 'app-tabs-icons',\n  imports: [\n    SlBadge,\n    SlGlyph,\n    SlIcon,\n    SlTab,\n    SlTabEnd,\n    SlTabList,\n    SlTabPanel,\n    SlTabs,\n    SlTabStart,\n    SlText,\n  ],\n  template: `\n    <div slTabs defaultValue=\"orders\">\n      <div slTabList aria-label=\"Customer Harbor & Pine\">\n        @for (view of views; track view.value) {\n          <div slTab [value]=\"view.value\">\n            <span slTabStart\n              ><span slIcon><svg slGlyph [name]=\"view.icon\"></svg></span\n            ></span>\n            {{ view.label }}\n            @if (view.count !== undefined) {\n              <span slTabEnd><span slBadge size=\"sm\" [count]=\"view.count\"></span></span>\n            }\n          </div>\n        }\n      </div>\n      @for (view of views; track view.value) {\n        <div slTabPanel [value]=\"view.value\">\n          <span slText size=\"sm\">{{ view.panel }}</span>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsIcons {\n  protected readonly views = VIEWS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "record-header",
+      "title": "record-header.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlBadge } from '@slotted/angular/badge';\nimport { SlButton, SlButtonStart } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlTab, SlTabEnd, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';\nimport { SlHeading, SlText } from '@slotted/angular/typography';\n\nconst FACTS = [\n  ['Customer', 'Harbor & Pine'],\n  ['Placed', 'September 8, 2026'],\n  ['Payment terms', 'Net 30'],\n  ['Ship to', '88 Dock Street, Portland, OR'],\n  ['Carrier', 'Atlas Freight'],\n  ['Total', '$1,240.00'],\n];\n\nconst LINES = [\n  { sku: 'OAK-90', item: 'Oak shelf, 90 cm', quantity: 4, amount: '$720.00' },\n  { sku: 'BRK-ST', item: 'Wall bracket, steel', quantity: 8, amount: '$192.00' },\n  { sku: 'KIT-AS', item: 'Assembly kit', quantity: 1, amount: '$328.00' },\n];\n\nconst ACTIVITY = [\n  'Sep 9, 14:02 — Picked at Reno, NV by Luis Ortega',\n  'Sep 8, 16:45 — Payment approved',\n  'Sep 8, 16:41 — Order placed by Dana Whitfield',\n];\n\n@Component({\n  selector: 'app-tabs-record-header',\n  imports: [\n    SlBadge,\n    SlButton,\n    SlButtonStart,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlGlyph,\n    SlHeading,\n    SlIcon,\n    SlInline,\n    SlStack,\n    SlTab,\n    SlTabEnd,\n    SlTabList,\n    SlTabPanel,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTabs,\n    SlTabStart,\n    SlText,\n  ],\n  template: `\n    <div slStack [gap]=\"6\">\n      <div slInline [gap]=\"4\" align=\"start\" justify=\"between\" wrap=\"wrap\">\n        <div slStack [gap]=\"1\">\n          <div slInline [gap]=\"3\" align=\"center\">\n            <h2 slHeading size=\"xl\">Order SO-1187</h2>\n            <span slBadge tone=\"warning\">Awaiting pickup</span>\n          </div>\n          <span slText size=\"sm\" tone=\"muted\">Harbor & Pine · Placed September 8, 2026</span>\n        </div>\n        <div slInline [gap]=\"2\">\n          <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\">\n            <span slButtonStart><svg slGlyph name=\"file-text\"></svg></span>\n            Packing slip\n          </button>\n          <button slButton size=\"sm\">Mark shipped</button>\n        </div>\n      </div>\n      <div slTabs defaultValue=\"overview\">\n        <div slTabList aria-label=\"Order SO-1187\">\n          <div slTab value=\"overview\">\n            <span slTabStart\n              ><span slIcon><svg slGlyph name=\"file-text\"></svg></span\n            ></span>\n            Overview\n          </div>\n          <div slTab value=\"items\">\n            <span slTabStart\n              ><span slIcon><svg slGlyph name=\"inbox\"></svg></span\n            ></span>\n            Items\n            <span slTabEnd><span slBadge size=\"sm\" [count]=\"lines.length\"></span></span>\n          </div>\n          <div slTab value=\"activity\">\n            <span slTabStart\n              ><span slIcon><svg slGlyph name=\"clock\"></svg></span\n            ></span>\n            Activity\n            <span slTabEnd><span slBadge size=\"sm\" [count]=\"activity.length\"></span></span>\n          </div>\n        </div>\n        <div slTabPanel value=\"overview\">\n          <div slDescriptionList [columns]=\"2\">\n            @for (fact of facts; track fact[0]) {\n              <div slDescriptionListItem>\n                <dt slDescriptionListTerm>{{ fact[0] }}</dt>\n                <dd slDescriptionListDescription>{{ fact[1] }}</dd>\n              </div>\n            }\n          </div>\n        </div>\n        <div slTabPanel value=\"items\">\n          <div slTable [columns]=\"4\">\n            <div slTableContent aria-label=\"Order lines\">\n              <thead slTableHead>\n                <tr slTableRow>\n                  <th slTableColumnHeader>SKU</th>\n                  <th slTableColumnHeader>Item</th>\n                  <th slTableColumnHeader numeric>Quantity</th>\n                  <th slTableColumnHeader numeric>Amount</th>\n                </tr>\n              </thead>\n              <tbody slTableBody>\n                @for (line of lines; track line.sku) {\n                  <tr slTableRow [value]=\"line.sku\">\n                    <th slTableRowHeader>{{ line.sku }}</th>\n                    <td slTableCell>{{ line.item }}</td>\n                    <td slTableCell numeric>{{ line.quantity }}</td>\n                    <td slTableCell numeric>{{ line.amount }}</td>\n                  </tr>\n                }\n              </tbody>\n            </div>\n          </div>\n        </div>\n        <div slTabPanel value=\"activity\">\n          <div slStack [gap]=\"2\">\n            @for (entry of activity; track entry) {\n              <span slText size=\"sm\">{{ entry }}</span>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsRecordHeader {\n  protected readonly facts = FACTS;\n  protected readonly lines = LINES;\n  protected readonly activity = ACTIVITY;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "settings",
+      "title": "settings.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlGlyph, SlIcon } from '@slotted/angular/icon';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlSwitch } from '@slotted/angular/switch';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlHeading, SlText } from '@slotted/angular/typography';\n\nconst PLAN = [\n  ['Plan', 'Operations, annual'],\n  ['Seats', '24 of 30 in use'],\n  ['Next invoice', 'November 1, 2026: $4,320.00'],\n];\n\n@Component({\n  selector: 'app-tabs-settings',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlGlyph,\n    SlHeading,\n    SlIcon,\n    SlStack,\n    SlSwitch,\n    SlTab,\n    SlTabList,\n    SlTabPanel,\n    SlTabs,\n    SlTabStart,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slTabs defaultValue=\"workspace\" orientation=\"vertical\">\n      <div slTabList aria-label=\"Settings\">\n        <div slTab value=\"workspace\">\n          <span slTabStart\n            ><span slIcon><svg slGlyph name=\"file-text\"></svg></span\n          ></span>\n          Workspace\n        </div>\n        <div slTab value=\"notifications\">\n          <span slTabStart\n            ><span slIcon><svg slGlyph name=\"bell\"></svg></span\n          ></span>\n          Notifications\n        </div>\n        <div slTab value=\"security\">\n          <span slTabStart\n            ><span slIcon><svg slGlyph name=\"lock\"></svg></span\n          ></span>\n          Security\n        </div>\n        <div slTab value=\"billing\">\n          <span slTabStart\n            ><span slIcon><svg slGlyph name=\"calendar\"></svg></span\n          ></span>\n          Billing\n        </div>\n      </div>\n      <div slTabPanel value=\"workspace\">\n        <div slStack [gap]=\"5\" align=\"start\">\n          <h3 slHeading size=\"md\">Workspace</h3>\n          <div slField>\n            <label slFieldLabel>Company name</label>\n            <div slTextField>\n              <input slTextFieldInput defaultValue=\"Northwind Traders\" />\n            </div>\n            <span slFieldDescription>Printed on every invoice and packing slip.</span>\n          </div>\n          <div slField>\n            <label slFieldLabel>Support email</label>\n            <div slTextField>\n              <input slTextFieldInput defaultValue=\"support@northwind.example\" type=\"email\" />\n            </div>\n          </div>\n          <button slButton size=\"sm\">Save changes</button>\n        </div>\n      </div>\n      <div slTabPanel value=\"notifications\">\n        <div slStack [gap]=\"4\">\n          <h3 slHeading size=\"md\">Notifications</h3>\n          <span slSwitch defaultChecked>Low stock</span>\n          <span slSwitch defaultChecked>Late pickups</span>\n          <span slSwitch>Cycle count variances</span>\n        </div>\n      </div>\n      <div slTabPanel value=\"security\">\n        <div slStack [gap]=\"4\">\n          <h3 slHeading size=\"md\">Security</h3>\n          <span slSwitch defaultChecked>Require two-factor sign-in</span>\n          <span slText size=\"sm\" tone=\"muted\">Changed by Dana Whitfield on August 14.</span>\n        </div>\n      </div>\n      <div slTabPanel value=\"billing\">\n        <div slStack [gap]=\"4\">\n          <h3 slHeading size=\"md\">Billing</h3>\n          <div slDescriptionList>\n            @for (row of plan; track row[0]) {\n              <div slDescriptionListItem>\n                <dt slDescriptionListTerm>{{ row[0] }}</dt>\n                <dd slDescriptionListDescription>{{ row[1] }}</dd>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class TabsSettings {\n  protected readonly plan = PLAN;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "variants.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTab,\n  SlTabList,\n  SlTabPanel,\n  SlTabs,\n  type TabsTrack,\n  type TabsVariant,\n} from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst LOOKS: { variant: TabsVariant; track: TabsTrack }[] = [\n  { variant: 'line', track: 'line' },\n  { variant: 'contained', track: 'line' },\n  { variant: 'line', track: 'none' },\n];\n\nconst QUEUES = [\n  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },\n  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },\n  { value: 'returns', label: 'Returns', panel: '3 returns awaiting inspection.' },\n];\n\n@Component({\n  selector: 'app-tabs-variants',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slStack [gap]=\"8\">\n      @for (look of looks; track $index) {\n        <div slTabs defaultValue=\"incoming\" [track]=\"look.track\" [variant]=\"look.variant\">\n          <div slTabList aria-label=\"Warehouse queues\">\n            @for (queue of queues; track queue.value) {\n              <div slTab [value]=\"queue.value\">{{ queue.label }}</div>\n            }\n          </div>\n          @for (queue of queues; track queue.value) {\n            <div slTabPanel [value]=\"queue.value\">\n              <span slText size=\"sm\">{{ queue.panel }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsVariants {\n  protected readonly looks = LOOKS;\n  protected readonly queues = QUEUES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "vertical",
+      "title": "vertical.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';\nimport { SlText } from '@slotted/angular/typography';\n\nconst SECTIONS = [\n  {\n    value: 'general',\n    label: 'General',\n    lines: ['Code: RNO', 'Address: 1450 Terminal Way, Reno, NV 89502', 'Time zone: Pacific Time'],\n  },\n  {\n    value: 'receiving',\n    label: 'Receiving',\n    lines: ['Dock hours: 06:00–14:00, Monday to Friday', 'Appointment required for full trucks'],\n  },\n  {\n    value: 'shipping',\n    label: 'Shipping',\n    lines: ['Carriers: Atlas Freight, Ridgeway Parcel', 'Daily cut-off: 15:30'],\n  },\n  {\n    value: 'storage',\n    label: 'Storage',\n    lines: ['Zones: A–F, 1,920 bin locations', 'Cycle count: every 30 days'],\n  },\n];\n\n@Component({\n  selector: 'app-tabs-vertical',\n  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],\n  template: `\n    <div slTabs defaultValue=\"general\" orientation=\"vertical\">\n      <div slTabList aria-label=\"Warehouse settings\">\n        @for (section of sections; track section.value) {\n          <div slTab [value]=\"section.value\">{{ section.label }}</div>\n        }\n      </div>\n      @for (section of sections; track section.value) {\n        <div slTabPanel [value]=\"section.value\">\n          <div slStack [gap]=\"2\">\n            @for (line of section.lines; track line) {\n              <span slText size=\"sm\">{{ line }}</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class TabsVertical {\n  protected readonly sections = SECTIONS;\n}\n",
+      "verdict": "example"
+    }
+  ]
+}