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

package/dist/docs/transfer.json

@@ -0,0 +1,736 @@
+{
+  "family": "transfer",
+  "ui": "transfer",
+  "binding": "react",
+  "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 { Transfer, TransferDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\", data-ui=\"transfer\", data-layout, data-size and data-pane. The container named transfer that decides columns or steps."
+        },
+        {
+          "part": "switch",
+          "element": "div around a SegmentedControl",
+          "required": true,
+          "purpose": "Available (12) and Chosen (3): the pane shown in steps. Rendered always, laid out only in steps."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "The grid of the two panes and the actions column."
+        },
+        {
+          "part": "pane",
+          "element": "div",
+          "required": true,
+          "purpose": "One per side: 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 on one line, the box over the lists’ check column."
+        },
+        {
+          "part": "select-all",
+          "element": "span around a Checkbox",
+          "required": false,
+          "purpose": "Tri-state over the pane’s visible enabled items. Absent under selectAll={false}."
+        },
+        {
+          "part": "title",
+          "element": "span",
+          "required": true,
+          "purpose": "messages.source or messages.target; names the pane and its list."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": true,
+          "purpose": "“12 items”, “3 of 12 selected” or, under a query, “4 of 12 shown”, in tabular figures."
+        },
+        {
+          "part": "search",
+          "element": "div around a TextField",
+          "required": false,
+          "purpose": "type=\"search\", clearable, one size step below the family. Absent under searchable={false}."
+        },
+        {
+          "part": "search-icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The search glyph in the field’s start slot."
+        },
+        {
+          "part": "list",
+          "element": "div around a Listbox",
+          "required": true,
+          "purpose": "rows options tall whatever it holds, so the two panes stand level. The Listbox inside is plain, multiple and named by the title."
+        },
+        {
+          "part": "empty",
+          "element": "div inside the Listbox’s own empty part",
+          "required": false,
+          "purpose": "messages.empty, or messages.noResults with data-query while a query is typed, over an inbox or a search mark."
+        },
+        {
+          "part": "drop-indicator",
+          "element": "div",
+          "required": false,
+          "purpose": "A line of no height where a pointer drop would land in a reorderable target. Present only while a drag hovers."
+        },
+        {
+          "part": "pane-footer",
+          "element": "div",
+          "required": false,
+          "purpose": "renderFooter(side), under the list. Absent when it returns nothing."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": true,
+          "purpose": "role=\"group\" named messages.actions: the four moves, then reorder. In steps it stands under the source or over the target and shows that pane’s two moves."
+        },
+        {
+          "part": "move-to-target",
+          "element": "button, a Button",
+          "required": true,
+          "purpose": "Add ›: the source’s selected visible enabled items. aria-keyshortcuts=\"Enter\"; aria-disabled with nothing to move."
+        },
+        {
+          "part": "move-all-to-target",
+          "element": "button, a Button",
+          "required": true,
+          "purpose": "Add all »: every visible enabled source item."
+        },
+        {
+          "part": "move-to-source",
+          "element": "button, a Button",
+          "required": true,
+          "purpose": "‹ Remove: the target’s selected visible enabled items. aria-keyshortcuts=\"Delete\"."
+        },
+        {
+          "part": "move-all-to-source",
+          "element": "button, a Button",
+          "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, a Button",
+          "required": false,
+          "purpose": "Moves the target’s selection one place toward the start. aria-keyshortcuts=\"Alt+ArrowUp\"."
+        },
+        {
+          "part": "move-down",
+          "element": "button, a Button",
+          "required": false,
+          "purpose": "One place toward the end. aria-keyshortcuts=\"Alt+ArrowDown\"."
+        }
+      ],
+      "api": [
+        {
+          "name": "items",
+          "type": "readonly T[]",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "The whole collection, both sides"
+        },
+        {
+          "name": "getKey",
+          "type": "(item: T) => string",
+          "defaultValue": "item.key",
+          "appliesTo": "Transfer",
+          "description": "The key an item is moved and selected by"
+        },
+        {
+          "name": "getLabel",
+          "type": "(item: T) => string",
+          "defaultValue": "item.label",
+          "appliesTo": "Transfer",
+          "description": "What typeahead and the search match, and what a reader hears"
+        },
+        {
+          "name": "getDescription",
+          "type": "(item: T) => string | undefined",
+          "defaultValue": "item.description",
+          "appliesTo": "Transfer",
+          "description": "A second line under the label, also searched"
+        },
+        {
+          "name": "isItemDisabled",
+          "type": "(item: T) => boolean",
+          "defaultValue": "item.disabled",
+          "appliesTo": "Transfer",
+          "description": "A disabled item cannot be selected or moved and stays where it is"
+        },
+        {
+          "name": "renderItem",
+          "type": "(item: T, { side, resolved }) => ReactNode",
+          "defaultValue": "label and description",
+          "appliesTo": "Transfer",
+          "description": "The content of one option inside the check the family draws; write it with ListboxLabel, ListboxDescription and ListboxMeta"
+        },
+        {
+          "name": "targetKeys",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "Present means the consumer owns the target, for the life of the component"
+        },
+        {
+          "name": "defaultTargetKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "Transfer",
+          "description": "The uncontrolled start, read once"
+        },
+        {
+          "name": "selectedKeys",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "The selection across both panes. Present means controlled"
+        },
+        {
+          "name": "defaultSelectedKeys",
+          "type": "readonly string[]",
+          "defaultValue": "[]",
+          "appliesTo": "Transfer",
+          "description": "The uncontrolled selection, read once"
+        },
+        {
+          "name": "sourceQuery",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "The source’s search. Present means controlled"
+        },
+        {
+          "name": "defaultSourceQuery",
+          "type": "string",
+          "defaultValue": "''",
+          "appliesTo": "Transfer",
+          "description": "The uncontrolled source search, read once"
+        },
+        {
+          "name": "targetQuery",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "The target’s search. Present means controlled"
+        },
+        {
+          "name": "defaultTargetQuery",
+          "type": "string",
+          "defaultValue": "''",
+          "appliesTo": "Transfer",
+          "description": "The uncontrolled target search, read once"
+        },
+        {
+          "name": "pane",
+          "type": "'source' | 'target'",
+          "defaultValue": "source",
+          "appliesTo": "Transfer",
+          "description": "The pane shown in steps. Present means controlled"
+        },
+        {
+          "name": "defaultPane",
+          "type": "'source' | 'target'",
+          "defaultValue": "source",
+          "appliesTo": "Transfer",
+          "description": "The uncontrolled pane, read once"
+        },
+        {
+          "name": "filter",
+          "type": "(item: T, query: string, side) => boolean",
+          "defaultValue": "locale contains",
+          "appliesTo": "Transfer",
+          "description": "Whether an item answers a query"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "The lists’ step; the search and the buttons stand one below"
+        },
+        {
+          "name": "layout",
+          "type": "'auto' | 'columns' | 'steps'",
+          "defaultValue": "auto",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "auto answers the root’s own width: columns from 36rem, steps below"
+        },
+        {
+          "name": "searchable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "Whether each pane has a search field"
+        },
+        {
+          "name": "selectAll",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "Whether each pane has a select-all box"
+        },
+        {
+          "name": "reorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "Whether the target keeps an order of its own"
+        },
+        {
+          "name": "rows",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "Transfer, TransferDefaultsProvider",
+          "description": "How many options tall each list is"
+        },
+        {
+          "name": "virtual",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "Windows both lists; needs itemSize"
+        },
+        {
+          "name": "itemSize",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "The block size of one option, in pixels, for virtual"
+        },
+        {
+          "name": "overscan",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "Transfer",
+          "description": "Options rendered either side of a windowed viewport"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "Stops every control; defaults to the field’s"
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "Keeps the lists reachable and refuses every move"
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "Carried to both lists as aria-required; defaults to the field’s"
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "The danger edge on both panes; defaults to the field’s"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "The source is still arriving: aria-busy on its list"
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Transfer",
+          "description": "The source has another page; draws the loading row"
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "Submits one hidden input per target key"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TransferMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "Words laid over the language in force, key by key: source, target, search, selectAll, count, countSelected, countFiltered, paneCount, panes, empty, noResults, loading, actions, moveToTarget, moveAllToTarget, moveToSource, moveAllToSource, reorder, moveUp, moveDown, moved, movedOne, reordered; {slot}s are filled"
+        },
+        {
+          "name": "renderFooter",
+          "type": "(side) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "Content under a pane’s list"
+        },
+        {
+          "name": "handleRef",
+          "type": "Ref<TransferHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "focus(side?) and scrollToKey(key); element, the root"
+        },
+        {
+          "name": "render",
+          "type": "(props: TransferRootProps) => ReactNode",
+          "defaultValue": "a div",
+          "appliesTo": "Transfer",
+          "description": "Substitutes the root element; attach props.ref beside your own, the drag measures against it"
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<\"div\">",
+          "defaultValue": "—",
+          "appliesTo": "Transfer",
+          "description": "aria-*, data-*, className, style and handlers reach the root"
+        },
+        {
+          "name": "TransferDefaultsProvider",
+          "type": "{ size, layout, searchable, selectAll, reorderable, rows }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The decisions an application takes once; an instance that states any of them wins"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "onTargetKeysChange",
+          "payload": "(targetKeys: readonly string[], request: 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": "onSelectedKeysChange",
+          "payload": "(selectedKeys: readonly string[], request: ChangeRequest<readonly string[]>)",
+          "when": "Before the selection moves: a press or a key in a list (pointer, keyboard), select-all or Control+A (select), and after a move, which takes the moved keys out with the move’s reason."
+        },
+        {
+          "name": "onSourceQueryChange / onTargetQueryChange",
+          "payload": "(query: string, request: ChangeRequest<string>)",
+          "when": "Before a pane’s search moves: typing (keyboard) or the clear control (clear)."
+        },
+        {
+          "name": "onPaneChange",
+          "payload": "(pane: 'source' | 'target', request: ChangeRequest<'source' | 'target'>)",
+          "when": "Before the switch names the other pane (pointer, keyboard)."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "()",
+          "when": "When the source list reaches the end of what has been loaded while hasMore is true."
+        },
+        {
+          "name": "onKeyDown and the other native handlers",
+          "payload": "the element’s own event",
+          "when": "Reach the root. The family’s own keys are taken in the capture phase of each list, so a handler that calls preventDefault() there first keeps the key."
+        }
+      ],
+      "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 Listbox 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”, “Revenue moved to position 2” — and a list that a move emptied hands focus to the other list rather than to nothing.",
+        "A disabled item keeps its place and aria-disabled, and is skipped by the arrows, by select-all and by Add all; a key the collection does not hold is still announced by its key."
+      ]
+    }
+  },
+  "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": "tsx",
+      "source": "const [team, setTeam] = useState<readonly string[]>(['ana', 'kenji', 'marta']);\n\n<Transfer\n  aria-label=\"Project team\"\n  items={people}\n  onTargetKeysChange={(keys) => setTeam(keys)}\n  targetKeys={team}\n/>;\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": "tsx",
+      "source": "<Transfer\n  items={people}\n  onSelectedKeysChange={(keys, request) => setSelected(keys)}\n  selectedKeys={selected}\n/>;\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": "tsx",
+      "source": "<Transfer filter={(person, query) => person.email.startsWith(query)} items={people} />;\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. Without it the target follows the collection.",
+      "language": "tsx",
+      "source": "<Transfer items={widgets} messages={{ target: 'On the dashboard' }} reorderable />;\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": "tsx",
+      "source": "<Transfer items={people} reorderable />;\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": "tsx",
+      "source": "<Transfer items={people} layout=\"steps\" onPaneChange={(pane) => setPane(pane)} pane={pane} />;\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 on both panes; required is carried to both lists.",
+      "language": "tsx",
+      "source": "<Transfer disabled items={people} />;\n<Transfer items={people} readOnly />;\n<Transfer invalid items={people} required />;\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. Typeahead, Shift+click and the moves work across the whole set.",
+      "language": "tsx",
+      "source": "<Transfer itemSize={34} items={directory} virtual />;\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 onLoadMore asks for the next page when the reader reaches it.",
+      "language": "tsx",
+      "source": "<Transfer\n  hasMore={page.hasMore}\n  items={page.items}\n  loading={page.loading}\n  onLoadMore={() => fetchNext()}\n/>;\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": "tsx",
+      "source": "<Transfer\n  items={permissions}\n  renderItem={(permission) => (\n    <>\n      <ListboxLabel>{permission.name}</ListboxLabel>\n      <ListboxMeta>{permission.scope}</ListboxMeta>\n    </>\n  )}\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "forms",
+      "title": "In a form",
+      "note": "Inside a Field the transfer takes the label, the description and the disabled state; name submits one hidden input per chosen key, so a bare form posts the set.",
+      "language": "tsx",
+      "source": "<Field required>\n  <FieldLabel>Reviewers</FieldLabel>\n  <Transfer items={people} name=\"reviewers\" />\n  <FieldDescription>At least one reviewer signs the release.</FieldDescription>\n</Field>;\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. The language in force sets them once; an instance lays its own over them.",
+      "language": "tsx",
+      "source": "<SlottedProvider locale=\"pt-BR\" catalogs={{ 'pt-BR': PT_BR }}>\n  <Transfer\n    items={permissions}\n    messages={{ target: 'Concedidas', moveToTarget: 'Conceder', moveToSource: 'Revogar' }}\n  />\n</SlottedProvider>;\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": "tsx",
+      "source": "<Transfer items={people} reorderable />;\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": "tsx",
+      "source": "<Transfer items={people} messages={{ moved: '{count} added to {pane}' }} />;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}