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

package/docs/transfer.json

@@ -0,0 +1,746 @@
+{
+  "family": "transfer",
+  "ui": "transfer",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Moves items between two lists."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "layout": [
+      "auto",
+      "columns",
+      "steps"
+    ],
+    "searchable": [
+      true,
+      false
+    ],
+    "selectAll": [
+      true,
+      false
+    ],
+    "reorderable": [
+      true,
+      false
+    ],
+    "virtual": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "transfer": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "layout": "auto",
+        "searchable": true,
+        "selectAll": true,
+        "reorderable": false,
+        "virtual": false,
+        "disabled": false,
+        "readOnly": false,
+        "required": false,
+        "invalid": false,
+        "loading": false,
+        "hasMore": false,
+        "rows": 8,
+        "pane": "source"
+      },
+      "capabilities": [
+        "value",
+        "selection",
+        "filter",
+        "current",
+        "size",
+        "arrangement",
+        "virtualization",
+        "disabled",
+        "readOnly",
+        "required",
+        "invalid",
+        "loading",
+        "live",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "current",
+        "disabled",
+        "readonly",
+        "invalid",
+        "required",
+        "loading",
+        "dragging",
+        "drop-target"
+      ],
+      "parts": [
+        "root",
+        "switch",
+        "body",
+        "pane",
+        "pane-header",
+        "select-all",
+        "title",
+        "count",
+        "search",
+        "search-icon",
+        "list",
+        "empty",
+        "drop-indicator",
+        "pane-footer",
+        "actions",
+        "move-to-target",
+        "move-all-to-target",
+        "move-to-source",
+        "move-all-to-source",
+        "reorder",
+        "move-up",
+        "move-down"
+      ]
+    }
+  },
+  "docs": {
+    "transfer": {
+      "imports": {
+        "source": "import { SlTransfer, SlTransferFooter, SlTransferItem, provideTransferDefaults } from '@slotted/angular/transfer';",
+        "selector": "[slTransfer], ng-template[slTransferItem], ng-template[slTransferFooter]",
+        "exportAs": "slTransfer"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element slTransfer is on",
+          "required": true,
+          "purpose": "role=\"group\" unless the consumer wrote one, data-ui=\"transfer\", data-layout, data-size and data-pane. The container named transfer that decides columns or steps."
+        },
+        {
+          "part": "switch",
+          "element": "div around an slSegmentedControl",
+          "required": true,
+          "purpose": "Available (12) and Chosen (3): the pane shown in steps. Laid out only in steps."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "The grid of the two panes and the actions."
+        },
+        {
+          "part": "pane",
+          "element": "div",
+          "required": true,
+          "purpose": "data-side=\"source\" or \"target\", role=\"group\" named by its title, data-current on the pane the switch names, data-drop-target while a drop would land in it."
+        },
+        {
+          "part": "pane-header",
+          "element": "div",
+          "required": true,
+          "purpose": "Select-all, title and count, the box over the lists’ check column."
+        },
+        {
+          "part": "select-all",
+          "element": "span around an slCheckbox",
+          "required": false,
+          "purpose": "Tri-state over the pane’s visible enabled items; its input is named “Select all in Available”."
+        },
+        {
+          "part": "title",
+          "element": "span",
+          "required": true,
+          "purpose": "messages.source or messages.target."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": true,
+          "purpose": "“12 items”, “3 of 12 selected”, or “4 of 12 shown” under a query."
+        },
+        {
+          "part": "search",
+          "element": "div around an slTextField",
+          "required": false,
+          "purpose": "type=\"search\", clearable, one size step below the family."
+        },
+        {
+          "part": "search-icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The search glyph in the field’s start slot."
+        },
+        {
+          "part": "list",
+          "element": "div around an slListbox",
+          "required": true,
+          "purpose": "rows options tall whatever it holds; the listbox inside is plain and multiple."
+        },
+        {
+          "part": "empty",
+          "element": "div inside the listbox’s slListboxEmpty",
+          "required": false,
+          "purpose": "messages.empty, or messages.noResults with data-query while a query is typed."
+        },
+        {
+          "part": "drop-indicator",
+          "element": "div",
+          "required": false,
+          "purpose": "Where a pointer drop would land in a reorderable target; present only during a drag."
+        },
+        {
+          "part": "pane-footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The slTransferFooter template, per side."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\" named messages.actions: the four moves, then reorder."
+        },
+        {
+          "part": "move-to-target",
+          "element": "button slButton",
+          "required": true,
+          "purpose": "Add ›. aria-keyshortcuts=\"Enter\"; aria-disabled with nothing to move."
+        },
+        {
+          "part": "move-all-to-target",
+          "element": "button slButton",
+          "required": true,
+          "purpose": "Add all »: every visible enabled source item."
+        },
+        {
+          "part": "move-to-source",
+          "element": "button slButton",
+          "required": true,
+          "purpose": "‹ Remove. aria-keyshortcuts=\"Delete\"."
+        },
+        {
+          "part": "move-all-to-source",
+          "element": "button slButton",
+          "required": true,
+          "purpose": "« Remove all: every visible enabled target item."
+        },
+        {
+          "part": "reorder",
+          "element": "div",
+          "required": false,
+          "purpose": "role=\"group\" named messages.reorder, under reorderable."
+        },
+        {
+          "part": "move-up",
+          "element": "button slButton",
+          "required": false,
+          "purpose": "aria-keyshortcuts=\"Alt+ArrowUp\"."
+        },
+        {
+          "part": "move-down",
+          "element": "button slButton",
+          "required": false,
+          "purpose": "aria-keyshortcuts=\"Alt+ArrowDown\"."
+        }
+      ],
+      "api": [
+        {
+          "name": "items",
+          "type": "readonly T[]",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "The whole collection, both sides"
+        },
+        {
+          "name": "getKey",
+          "type": "(item: T) => string",
+          "defaultValue": "item.key",
+          "appliesTo": "[slTransfer]",
+          "description": "The key an item is moved and selected by"
+        },
+        {
+          "name": "getLabel",
+          "type": "(item: T) => string",
+          "defaultValue": "item.label",
+          "appliesTo": "[slTransfer]",
+          "description": "What typeahead and the search match"
+        },
+        {
+          "name": "getDescription",
+          "type": "(item: T) => string | undefined",
+          "defaultValue": "item.description",
+          "appliesTo": "[slTransfer]",
+          "description": "A second line under the label, also searched"
+        },
+        {
+          "name": "isItemDisabled",
+          "type": "(item: T) => boolean",
+          "defaultValue": "item.disabled",
+          "appliesTo": "[slTransfer]",
+          "description": "A disabled item cannot be selected or moved"
+        },
+        {
+          "name": "targetKeys",
+          "type": "model<readonly string[] | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Two-way. Unbound, the transfer holds the keys itself from defaultTargetKeys"
+        },
+        {
+          "name": "defaultTargetKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "[slTransfer]",
+          "description": "The start while targetKeys is unbound"
+        },
+        {
+          "name": "selectedKeys",
+          "type": "model<readonly string[] | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Two-way selection across both panes"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "[slTransfer]",
+          "description": "The start while selectedKeys is unbound"
+        },
+        {
+          "name": "sourceQuery",
+          "type": "model<string | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Two-way source search"
+        },
+        {
+          "name": "defaultSourceQuery",
+          "type": "string",
+          "defaultValue": "''",
+          "appliesTo": "[slTransfer]",
+          "description": "The start while sourceQuery is unbound"
+        },
+        {
+          "name": "targetQuery",
+          "type": "model<string | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Two-way target search"
+        },
+        {
+          "name": "defaultTargetQuery",
+          "type": "string",
+          "defaultValue": "''",
+          "appliesTo": "[slTransfer]",
+          "description": "The start while targetQuery is unbound"
+        },
+        {
+          "name": "pane",
+          "type": "model<'source' | 'target' | undefined>",
+          "defaultValue": "source",
+          "appliesTo": "[slTransfer]",
+          "description": "Two-way pane shown in steps"
+        },
+        {
+          "name": "defaultPane",
+          "type": "'source' | 'target'",
+          "defaultValue": "source",
+          "appliesTo": "[slTransfer]",
+          "description": "The start while pane is unbound"
+        },
+        {
+          "name": "filter",
+          "type": "(item: T, query: string, side) => boolean",
+          "defaultValue": "locale contains",
+          "appliesTo": "[slTransfer]",
+          "description": "Whether an item answers a query"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "The lists’ step; the search and the buttons stand one below"
+        },
+        {
+          "name": "layout",
+          "type": "'auto' | 'columns' | 'steps'",
+          "defaultValue": "auto",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "auto answers the root’s own width: columns from 36rem, steps below"
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "Whether each pane has a search field"
+        },
+        {
+          "name": "selectAll",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "Whether each pane has a select-all box"
+        },
+        {
+          "name": "reorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "Whether the target keeps an order of its own"
+        },
+        {
+          "name": "rows",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "[slTransfer], provideTransferDefaults",
+          "description": "How many options tall each list is"
+        },
+        {
+          "name": "virtual",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "Windows both lists; needs itemSize"
+        },
+        {
+          "name": "itemSize",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "The block size of one option, in pixels"
+        },
+        {
+          "name": "overscan",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "[slTransfer]",
+          "description": "Options rendered either side of a windowed viewport"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "Stops every control; a disabled form control sets it too"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "Keeps the lists reachable and refuses every move"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "aria-required on both lists, and { required: true } to a form while the target is empty"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "The danger edge on both panes"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "The source is still arriving"
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "[slTransfer]",
+          "description": "The source has another page; draws the loading row"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Submits one hidden input per target key"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TransferMessages>",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Words laid over the language in force, key by key; {slot}s are filled"
+        },
+        {
+          "name": "slTransferItem",
+          "type": "ng-template, let-item, side",
+          "defaultValue": "label and description",
+          "appliesTo": "a child template",
+          "description": "The content of one option inside the check the family draws"
+        },
+        {
+          "name": "slTransferFooter",
+          "type": "ng-template, let-side",
+          "defaultValue": "—",
+          "appliesTo": "a child template",
+          "description": "Content under a pane’s list"
+        },
+        {
+          "name": "focus(side?) / scrollToKey(key)",
+          "type": "methods, through #ref=\"slTransfer\"",
+          "defaultValue": "—",
+          "appliesTo": "[slTransfer]",
+          "description": "Move focus into a list; reveal an item in whichever pane holds it"
+        },
+        {
+          "name": "native attributes",
+          "type": "HTML attributes",
+          "defaultValue": "—",
+          "appliesTo": "the host",
+          "description": "aria-*, id, class and listeners stay on the element the directive is on; a role written there wins"
+        },
+        {
+          "name": "provideTransferDefaults",
+          "type": "{ size, layout, searchable, selectAll, reorderable, rows }",
+          "defaultValue": "—",
+          "appliesTo": "providers",
+          "description": "The decisions an application takes once"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "targetKeysChangeRequest",
+          "payload": "ChangeRequest<readonly string[]> & { direction: 'target' | 'source' | 'reorder'; keys: readonly string[] }",
+          "when": "Before the target moves: a move button or Up/Down (pointer, keyboard), Enter, Delete, Control+Arrow or Alt+Arrow in a list (keyboard), a drop (pointer). cancel() refuses it and nothing else follows."
+        },
+        {
+          "name": "targetKeysChange",
+          "payload": "readonly string[]",
+          "when": "The model half of [(targetKeys)], after a request nobody cancelled. A form control is told at the same moment."
+        },
+        {
+          "name": "selectedKeysChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "Before the selection moves: a press or a key in a list, select-all or Control+A (select), and after a move."
+        },
+        {
+          "name": "selectedKeysChange",
+          "payload": "readonly string[]",
+          "when": "The model half of [(selectedKeys)]."
+        },
+        {
+          "name": "sourceQueryChangeRequest / targetQueryChangeRequest",
+          "payload": "ChangeRequest<string>",
+          "when": "Before a pane’s search moves: typing (keyboard) or the clear control (clear)."
+        },
+        {
+          "name": "sourceQueryChange / targetQueryChange",
+          "payload": "string",
+          "when": "The model halves of [(sourceQuery)] and [(targetQuery)]."
+        },
+        {
+          "name": "paneChangeRequest",
+          "payload": "ChangeRequest<'source' | 'target'>",
+          "when": "Before the switch names the other pane (pointer, keyboard)."
+        },
+        {
+          "name": "paneChange",
+          "payload": "'source' | 'target'",
+          "when": "The model half of [(pane)]."
+        },
+        {
+          "name": "loadMore",
+          "payload": "void",
+          "when": "When the source list reaches the end of what has been loaded while hasMore is true."
+        }
+      ],
+      "accessibility": [
+        "No WAI-ARIA pattern names a dual list; the APG’s Listboxes with Rearrangeable Options example is the closest, and the family follows its second example: each side is a multi-select listbox named by its title, Enter adds from the available list, Delete removes from the chosen one, and Alt+ArrowUp/Down moves an option with focus kept on it.",
+        "Each list is the slListbox family, so its own keyboard stands inside the pane: arrows, Home, End, PageUp, PageDown, Space, Shift ranges, Control+A and typeahead. Enter is the one key taken from it — the listbox selects with it, and here it moves — and Space still selects.",
+        "The move buttons say their shortcut through aria-keyshortcuts and keep their focus stop with aria-disabled when there is nothing to move, so the button that just emptied its own selection does not drop focus on the page.",
+        "Every move is announced through the shared polite live region — “Ana Souza moved to Chosen”, “3 moved to Available” — and a list that a move emptied hands focus to the other list rather than to nothing.",
+        "The select-all box is named on its input, “Select all in Available”: the slCheckbox family takes its name from its label and offers no input for one, so the family writes aria-label on the control after each render and leaves the label empty."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-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-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-shadow",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-font-family-mono",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-listbox-padding-block",
+    "--slotted-radius-full",
+    "--slotted-radius-md",
+    "--slotted-selection-size-lg",
+    "--slotted-selection-size-md",
+    "--slotted-selection-size-sm",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-danger-border",
+    "--slotted-transfer-pane-min-inline-size",
+    "--slotted-transfer-rows"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Twelve people and a project team of three. Change size, layout, search, select-all and order in the controls below; every request is written under the transfer.",
+      "language": "html",
+      "source": "<div slTransfer aria-label=\"Project team\" [items]=\"people\" [(targetKeys)]=\"team\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "selection",
+      "title": "Selecting, then moving",
+      "note": "Click, Shift+click and Control+A select inside a pane; the box in the header selects every visible enabled item and goes half-filled when some are. Add moves the selection and clears it.",
+      "language": "html",
+      "source": "<div slTransfer [items]=\"people\" [(selectedKeys)]=\"selected\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "Searching a pane",
+      "note": "Type fabio or design: the label and the description are searched in the locale, accents apart. The count says 1 of 12 shown, Add all moves only what is shown, and nothing matching says so over a search mark.",
+      "language": "html",
+      "source": "<div slTransfer [items]=\"people\" [filter]=\"byEmail\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "order",
+      "title": "An order the reader decides",
+      "note": "Under reorderable the target keeps the order of targetKeys: a move joins the end, Up and Down move the selection one place, and Alt+ArrowUp/Down does the same from the list.",
+      "language": "html",
+      "source": "<div slTransfer reorderable [items]=\"widgets\" [messages]=\"{ target: 'On the dashboard' }\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "drag",
+      "title": "Dragging between the panes",
+      "note": "Drag a person across: a selected person carries the pane’s selection with them. In a reorderable target a line shows where the drop lands; a drop inside the source is refused, and Escape cancels.",
+      "language": "html",
+      "source": "<div slTransfer reorderable [items]=\"people\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "steps",
+      "title": "One pane at a time",
+      "note": "Below 36rem of its own width the transfer becomes two steps: the switch names the pane, Add and Add all stand under the source and Remove over the target. layout=\"steps\" fixes it at any width.",
+      "language": "html",
+      "source": "<div slTransfer layout=\"steps\" [items]=\"people\" [(pane)]=\"pane\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "Disabled, read-only, invalid and required",
+      "note": "Disabled greys both panes and stops every control. Read-only keeps the lists reachable and selectable and refuses every move. Invalid draws the danger edge; required reports { required: true } to a form while the target is empty.",
+      "language": "html",
+      "source": "<div slTransfer disabled [items]=\"people\"></div>\n<div slTransfer readOnly [items]=\"people\"></div>\n<div slTransfer invalid required [items]=\"people\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "virtualization",
+      "title": "Two thousand items",
+      "note": "virtual with an itemSize windows both lists, so a directory of two thousand people scrolls without drawing them all.",
+      "language": "html",
+      "source": "<div slTransfer virtual [itemSize]=\"34\" [items]=\"directory\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "A source that arrives in pages",
+      "note": "loading marks the source busy; hasMore draws the loading row at its end and (loadMore) asks for the next page when the reader reaches it.",
+      "language": "html",
+      "source": "<div\n  slTransfer\n  [items]=\"page().items\"\n  [loading]=\"page().loading\"\n  [hasMore]=\"page().hasMore\"\n  (loadMore)=\"fetchNext()\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A description under the name, an unbroken permission key, a translated title that wraps, and a chosen key the collection does not hold — drawn with the key itself, in the muted mono ink, never dropped.",
+      "language": "html",
+      "source": "<div slTransfer [items]=\"permissions\">\n  <ng-template slTransferItem let-permission>\n    <span slListboxLabel>{{ permission.label }}</span>\n    <span slListboxMeta>{{ permission.scope }}</span>\n  </ng-template>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "The transfer is a ControlValueAccessor over targetKeys and a Validator for required; a disabled control disables it. name submits one hidden input per chosen key.",
+      "language": "html",
+      "source": "<div slTransfer required formControlName=\"reviewers\" [items]=\"people\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "labels",
+      "title": "Words for another product",
+      "note": "Every word is a message: the titles, the four moves, the counts and the announcements. provideSlotted sets the language once; an instance lays its own words over it.",
+      "language": "ts",
+      "source": "providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "In either list Enter moves the selection — or the option you are on — to the other side; Delete sends it back from the target; Control+ArrowRight and Control+ArrowLeft move toward that side, mirrored in right-to-left; Alt+ArrowUp/Down reorders. Space selects.",
+      "language": "html",
+      "source": "<div slTransfer reorderable [items]=\"people\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "Names, shortcuts and announcements",
+      "note": "Each pane is a group named by its title and each list a listbox named the same. The moves carry aria-keyshortcuts, and every move is announced politely: “2 moved to Chosen”.",
+      "language": "html",
+      "source": "<div slTransfer [items]=\"people\" [messages]=\"{ moved: '{count} added to {pane}' }\"></div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}