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

package/docs/data-list.json

@@ -0,0 +1,685 @@
+{
+  "family": "data-list",
+  "ui": "data-list",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Records as stacked label and value items."
+  },
+  "axes": {
+    "variant": [
+      "plain",
+      "ruled",
+      "framed"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "selectionMode": [
+      "none",
+      "single",
+      "multiple"
+    ],
+    "mode": [
+      "client",
+      "server"
+    ],
+    "activatable": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "dataList": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "ruled",
+        "size": "md",
+        "selectionMode": "none",
+        "fields": 4,
+        "activatable": false,
+        "loading": false,
+        "skeletonRows": 5,
+        "loadingDelay": 200,
+        "loadingMinDuration": 400
+      },
+      "capabilities": [
+        "sort",
+        "filter",
+        "selection",
+        "open",
+        "appearance",
+        "size",
+        "content",
+        "loading",
+        "live",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "current",
+        "expanded",
+        "disabled",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "select-all",
+        "count",
+        "sort",
+        "selection",
+        "media",
+        "title",
+        "fields",
+        "field",
+        "field-label",
+        "field-value",
+        "field-empty",
+        "more",
+        "trailing",
+        "empty",
+        "loader",
+        "footer",
+        "load-more"
+      ]
+    }
+  },
+  "docs": {
+    "dataList": {
+      "imports": {
+        "source": "import {\n  SlDataList,\n  SlDataListCellTemplate,\n  SlDataListFooter,\n  SlDataListMediaTemplate,\n  provideDataListDefaults,\n} from '@slotted/angular/data-list';\nimport type { GridColumn, GridQuery } from '@slotted/core/grid';",
+        "selector": "sl-data-list",
+        "exportAs": "slDataList"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "sl-data-list",
+          "required": true,
+          "purpose": "The host: data-ui=\"data-list\", data-variant, data-size; the query container the fields answer. aria-busy and data-loading while rows already shown are refreshed."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": true,
+          "purpose": "The bar above the set: select-all, the count and the sort control, on the row’s own inset."
+        },
+        {
+          "part": "select-all",
+          "element": "span holding [slCheckbox]",
+          "required": false,
+          "purpose": "In selectionMode multiple. Covers every record the query left, indeterminate while some are chosen, with the count in its name."
+        },
+        {
+          "part": "count",
+          "element": "output aria-live=\"polite\"",
+          "required": true,
+          "purpose": "messages.count, or messages.selectedCount while a selection exists; empty during the first load."
+        },
+        {
+          "part": "sort",
+          "element": "span holding button[slButton][slMenuTriggerFor]",
+          "required": false,
+          "purpose": "Present when a visible column is sortable. data-direction names the first key’s direction; the chevron turns for ascending."
+        },
+        {
+          "part": "selection",
+          "element": "span in [slListItemStart] holding [slCheckbox]",
+          "required": false,
+          "purpose": "The record’s checkbox, named “Select {title}”. It announces the selection the row paints."
+        },
+        {
+          "part": "media",
+          "element": "span in [slListItemStart]",
+          "required": false,
+          "purpose": "ng-template[slDataListMedia] for the row: an avatar or a thumbnail, after the checkbox."
+        },
+        {
+          "part": "title",
+          "element": "a | button | span in [slListItemLabel]",
+          "required": true,
+          "purpose": "The title column. A link with href, a button with activatable; its ::after covers the record, so the whole row is the target."
+        },
+        {
+          "part": "fields",
+          "element": "dl",
+          "required": false,
+          "purpose": "The fields by priority, placed in the row’s grid from the text column to its end. Two columns of pairs from 18rem; the label beside the value between 12 and 19rem; over it below 12rem."
+        },
+        {
+          "part": "field",
+          "element": "div",
+          "required": false,
+          "purpose": "One pair: the grouping HTML allows inside a dl."
+        },
+        {
+          "part": "field-label",
+          "element": "dt",
+          "required": false,
+          "purpose": "The column’s label."
+        },
+        {
+          "part": "field-value",
+          "element": "dd",
+          "required": false,
+          "purpose": "ng-template[slDataListCell] or the formatted text. Wraps, never truncates; data-numeric sets tabular figures."
+        },
+        {
+          "part": "field-empty",
+          "element": "span",
+          "required": false,
+          "purpose": "An absent value: an em dash for the eye and messages.empty for a screen reader."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "When fields past fields exist: “Show 3 more” or “Show less”, aria-expanded, aria-controls naming the dl."
+        },
+        {
+          "part": "trailing",
+          "element": "span in [slListItemEnd]",
+          "required": false,
+          "purpose": "The trailing column: the figure read at a glance, in the row’s ink and tabular figures."
+        },
+        {
+          "part": "empty",
+          "element": "div holding section[slResultState]",
+          "required": false,
+          "purpose": "empty, no-results with Clear filters, or error with Try again; ng-template[slDataListEmpty] replaces it."
+        },
+        {
+          "part": "loader",
+          "element": "div holding div[slSkeletonRegion]",
+          "required": false,
+          "purpose": "The first load: skeletonRows records with the item’s anatomy, real field labels and bars of varied length."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "Under the list, when hasMore or [slDataListFooter] content is given: load-more and that content."
+        },
+        {
+          "part": "load-more",
+          "element": "span holding button[slButton]",
+          "required": false,
+          "purpose": "With hasMore: emits loadMore, and waits with the button’s own loading."
+        }
+      ],
+      "api": [
+        {
+          "name": "rows",
+          "type": "readonly Row[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The consumer’s array"
+        },
+        {
+          "name": "rowKey",
+          "type": "keyof Row | (row) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "Names every record in every state model"
+        },
+        {
+          "name": "columns",
+          "type": "readonly GridColumn<Row>[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The model sl-data-grid, sl-column-manager and sl-saved-views read"
+        },
+        {
+          "name": "columnState",
+          "type": "Partial<GridColumnState>",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "Order and hidden columns; widths and pins are ignored"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "defaultValue": "rowHeader column",
+          "appliesTo": "sl-data-list",
+          "description": "The title’s column"
+        },
+        {
+          "name": "subtitle",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The column under the title"
+        },
+        {
+          "name": "trailing",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The column at the end of the row"
+        },
+        {
+          "name": "fields",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "How many fields a closed record shows"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The list’s accessible name; an aria-label written on the host is read when label is absent"
+        },
+        {
+          "name": "labelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The id of the element that names the list"
+        },
+        {
+          "name": "query",
+          "type": "model<GridQuery>",
+          "defaultValue": "emptyQuery()",
+          "appliesTo": "sl-data-list",
+          "description": "Sort, filter, search, page and group; [(query)] binds it both ways"
+        },
+        {
+          "name": "mode",
+          "type": "\"client\" | \"server\"",
+          "defaultValue": "client",
+          "appliesTo": "sl-data-list",
+          "description": "client applies the query; server draws the rows given. server when totalCount is given"
+        },
+        {
+          "name": "totalCount",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The server’s total, for the count and server mode"
+        },
+        {
+          "name": "selectionMode",
+          "type": "\"none\" | \"single\" | \"multiple\"",
+          "defaultValue": "none",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "A checkbox per record in single and multiple"
+        },
+        {
+          "name": "value",
+          "type": "model<string | null | readonly string[]>",
+          "defaultValue": "null",
+          "appliesTo": "sl-data-list",
+          "description": "The selection; [(value)] binds it both ways"
+        },
+        {
+          "name": "expanded",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "sl-data-list",
+          "description": "Records that show every field; [(expanded)] binds it both ways"
+        },
+        {
+          "name": "disabledKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "sl-data-list",
+          "description": "Records that refuse selection and activation"
+        },
+        {
+          "name": "loadingKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "sl-data-list",
+          "description": "Records busy with an action: aria-busy, activation refused"
+        },
+        {
+          "name": "current",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The record open beside the list; aria-current on its row"
+        },
+        {
+          "name": "href",
+          "type": "(row) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "Makes the title a link"
+        },
+        {
+          "name": "activatable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-list",
+          "description": "Makes the title a button that emits activate"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-list",
+          "description": "The skeleton with no rows, a dimmed refresh over rows, the load-more wait"
+        },
+        {
+          "name": "error",
+          "type": "boolean | string | null",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "The error state; a string replaces messages.errorTitle"
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-data-list",
+          "description": "Shows load-more in the footer"
+        },
+        {
+          "name": "variant",
+          "type": "\"plain\" | \"ruled\" | \"framed\"",
+          "defaultValue": "ruled",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "The list’s variant, handed to every record"
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "defaultValue": "md",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "The record’s control step"
+        },
+        {
+          "name": "skeletonRows",
+          "type": "number",
+          "defaultValue": "5",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "Records the first-load skeleton draws"
+        },
+        {
+          "name": "loadingDelay",
+          "type": "number",
+          "defaultValue": "200",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "Milliseconds before the skeleton appears"
+        },
+        {
+          "name": "loadingMinDuration",
+          "type": "number",
+          "defaultValue": "400",
+          "appliesTo": "sl-data-list, provideDataListDefaults",
+          "description": "Milliseconds the skeleton stays once drawn"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<DataListMessages>",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "Words laid over the language in force, key by key; count and selectAll are plural messages"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "the provider’s",
+          "appliesTo": "sl-data-list",
+          "description": "Formats values, group counts and the sort"
+        },
+        {
+          "name": "slDataListCell",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Draws a column’s value; context { $implicit: row, row, column, key, value, text, place }"
+        },
+        {
+          "name": "slDataListMedia",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "The picture at the start of a record; $implicit is the row"
+        },
+        {
+          "name": "slDataListEmpty",
+          "type": "ng-template",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Replaces empty, no-results or error; $implicit is the status"
+        },
+        {
+          "name": "slDataListFooter",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "content",
+          "description": "Content projected into the footer, beside load-more"
+        },
+        {
+          "name": "exportAs",
+          "type": "slDataList",
+          "defaultValue": "—",
+          "appliesTo": "sl-data-list",
+          "description": "focus(), focusKey(key), scrollToKey(key)"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "queryChangeRequest",
+          "payload": "DataListQueryRequest: { value, previous, reason, change, source, cancelled, cancel() }",
+          "when": "Before [(query)] moves: sort from the menu (pointer, keyboard), filter from Clear filters (clear). change names the part: sort | filter | search | page | group. cancel() keeps the query."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<string | null | readonly string[]>",
+          "when": "Before [(value)] moves: a checkbox (pointer, keyboard), Shift from the anchor or select-all (select), select-all clearing (clear)."
+        },
+        {
+          "name": "expandedChangeRequest",
+          "payload": "DataListExpandedRequest: { value, key, reason, … }",
+          "when": "Before [(expanded)] moves, from a record’s more button."
+        },
+        {
+          "name": "activate",
+          "payload": "{ key, row, reason: \"pointer\" | \"keyboard\", event }",
+          "when": "After the title is pressed: a button with activatable, or a link with href before it navigates. Not for a disabled or loading record."
+        },
+        {
+          "name": "loadMore",
+          "payload": "void",
+          "when": "The load-more button in the footer was pressed."
+        },
+        {
+          "name": "retry",
+          "payload": "void",
+          "when": "Try again in the error state was pressed."
+        }
+      ],
+      "accessibility": [
+        "No Authoring Practices pattern covers a list of records, so the family is list’s role=\"list\" of list items, named by label or labelledBy, and every control in it is native: a checkbox, a link or a button, the disclosure pattern for more and the menu button pattern for sort.",
+        "The title is the record’s link or button and its name is the title alone; the fields sit outside it as a dl, because a dl may not sit inside a button and a link named by every field is a sentence. The checkbox is named “Select {title}” and announces the selection the row paints — aria-selected is not valid on listitem.",
+        "No arrow key is bound: role=\"list\" admits none and the scope refuses grid navigation. Tab reaches each control in reading order; sl-data-grid is the family for a cell cursor. When the focused record is removed, focus moves to the next record, the previous one, or the empty state.",
+        "The count is an output announced politely; a sort announces the whole order through the shared live announcer. The first load is a skeleton region with one polite announcement and aria-busy, and an absent value reads messages.empty beside the dash a sighted reader sees."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-md",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-line-height-xs",
+    "--slotted-radius-sm",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-8",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "An account list at a phone’s width: select two records, sort by balance from the menu, open the fields of a record. The line under the list shows the query and the selection bound in both directions.",
+      "language": "html",
+      "source": "<sl-data-list\n  label=\"Accounts\"\n  rowKey=\"id\"\n  selectionMode=\"multiple\"\n  subtitle=\"email\"\n  trailing=\"balance\"\n  [columns]=\"columns\"\n  [rows]=\"accounts\"\n  [(query)]=\"query\"\n  [(value)]=\"chosen\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Anatomy",
+      "note": "Every part on one record: the checkbox and the avatar at the start, the title as a link, the subtitle, the balance at the end, four fields, the disclosure for more, and the row’s actions.",
+      "language": "html",
+      "source": "<sl-data-list label=\"Accounts\" rowKey=\"id\" [columns]=\"columns\" [rows]=\"accounts\">\n  <ng-template slDataListMedia let-account>\n    <span slAvatar size=\"sm\" [name]=\"account.name\"></span>\n  </ng-template>\n  <ng-template slDataListCell=\"status\" let-row>\n    <span slBadge size=\"sm\">{{ row.status }}</span>\n  </ng-template>\n</sl-data-list>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fields",
+      "title": "Fields by priority, at two widths",
+      "note": "The same record at 375 and 640 pixels. Priority orders the pairs; a phone gives one pair a line with the label beside the value, a tablet two and three columns of label over value.",
+      "language": "html",
+      "source": "<sl-data-list label=\"Accounts\" rowKey=\"id\" [columns]=\"columns\" [fields]=\"6\" [rows]=\"accounts\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "activation",
+      "title": "A link, a command, or text",
+      "note": "With href the title is a link and the whole record is its target; with activatable it is a button that emits activate; with neither the record is only read. The current record carries the neutral ground.",
+      "language": "html",
+      "source": "<sl-data-list activatable [current]=\"openId()\" (activate)=\"openId.set($event.key)\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "selection",
+      "title": "Selection",
+      "note": "Multiple: the checkbox in each record, Shift to extend from the anchor, select-all over every record the query left and the count saying how many are chosen. Single holds one key, as table does.",
+      "language": "html",
+      "source": "<sl-data-list selectionMode=\"multiple\" [(value)]=\"chosen\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sorting",
+      "title": "Sorting without a header",
+      "note": "The sort control is a menu of the sortable columns and a direction. The trigger names the first key; a query sorted by several keys in sl-data-grid shows +1 and the announcement reads the whole order.",
+      "language": "html",
+      "source": "<sl-data-list [(query)]=\"query\" (queryChangeRequest)=\"refetch($event.change)\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filtering",
+      "title": "Filtering with a search field",
+      "note": "The list applies query.search and query.filter; the control that writes them is the application’s own, bound to the same query. Type “lis” to keep the Lisbon accounts.",
+      "language": "html",
+      "source": "<input slTextFieldInput [value]=\"query().search\" (input)=\"search($event)\" />\n<sl-data-list [(query)]=\"query\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "grouping",
+      "title": "Groups",
+      "note": "query.group becomes list sections, each named by the column, the value and the count. The groups stay open: a list has no collapsible group row.",
+      "language": "html",
+      "source": "<sl-data-list [query]=\"{ sort: [], filter: null, search: '', page: null, group: ['status'] }\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "expansion",
+      "title": "The fields past the first few",
+      "note": "fields sets how many a closed record shows. Show 3 more opens the rest in the same grid, and the expansion is a set of keys bound in both directions, like the grid’s detail.",
+      "language": "html",
+      "source": "<sl-data-list [fields]=\"2\" [(expanded)]=\"open\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "Record states",
+      "note": "Selected, current, disabled and loading on four records: selected is the accent ground with its edge, current the neutral one, disabled and loading recede and refuse the activation while keeping their width.",
+      "language": "html",
+      "source": "<sl-data-list\n  activatable\n  current=\"cobalt\"\n  selectionMode=\"multiple\"\n  [disabledKeys]=\"['dunmore']\"\n  [loadingKeys]=\"['borealis']\"\n  [value]=\"['acme']\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "The first load, and a refresh",
+      "note": "With no rows the loader draws the record’s anatomy: title, subtitle, balance and four fields with their real labels. Over rows already shown a refresh keeps them and dims them; nothing moves.",
+      "language": "html",
+      "source": "<sl-data-list [loading]=\"fetching()\" [rows]=\"accounts() ?? []\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty-and-error",
+      "title": "Empty, no results, error",
+      "note": "Three states, each with its own next step: nothing yet, a query that left nothing and offers Clear filters, and a failure that offers Try again.",
+      "language": "html",
+      "source": "<sl-data-list [error]=\"failed()\" [rows]=\"rows()\" (retry)=\"refetch()\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "load-more",
+      "title": "Load more",
+      "note": "With hasMore the footer asks for the next page through loadMore; the button carries the wait and the list stays readable. The count says how many exist when the server gives totalCount.",
+      "language": "html",
+      "source": "<sl-data-list\n  [hasMore]=\"page().hasMore\"\n  [loading]=\"fetching()\"\n  [rows]=\"page().rows\"\n  [totalCount]=\"page().total\"\n  (loadMore)=\"fetchNext()\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "with-table",
+      "title": "Beside table, on one state",
+      "note": "createWidthGate at COMPACT_BELOW swaps the table and the list over the same sort and selection. Choose Phone: under 600 pixels the list takes over and the chosen accounts stay chosen.",
+      "language": "html",
+      "source": "@if (compact()) {\n  <sl-data-list\n    [query]=\"asQuery(sort())\"\n    [(value)]=\"chosen\"\n    (queryChangeRequest)=\"fromQuery($event)\"\n  />\n} @else {\n  <div slTable selectionMode=\"multiple\" [(sort)]=\"sort\" [(value)]=\"chosen\"></div>\n}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the columns did not plan for",
+      "note": "A title in two lines, an address with no break in it, labels a translation made long and a value in another script: the pairs wrap, nothing is cut, and the Arabic value takes its own direction.",
+      "language": "ts",
+      "source": "providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab moves through select-all, the sort trigger, then each record’s checkbox, title, disclosure and actions. Space toggles a checkbox, Shift+Space extends from the anchor, Enter follows the title. No arrow key is bound.",
+      "language": "html",
+      "source": "<sl-data-list #accounts=\"slDataList\" />\n<button slButton (click)=\"accounts.focusKey('cobalt')\">Focus Cobalt Studio</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "The list is named by the heading above it; each record is a list item whose title is its link; the checkbox is named Select and the title; the count and the sort order are announced politely.",
+      "language": "html",
+      "source": "<h2 id=\"accounts-heading\">Accounts</h2>\n<sl-data-list labelledBy=\"accounts-heading\" />\n",
+      "verdict": "excerpt"
+    }
+  ]
+}