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

package/docs/tags-input.json

@@ -0,0 +1,771 @@
+{
+  "family": "tags-input",
+  "ui": "tags-input",
+  "binding": "angular",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Text input that collects values as tags."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "overflow": [
+      "wrap",
+      "collapse"
+    ],
+    "invalidValues": [
+      "keep",
+      "refuse"
+    ],
+    "pendingOnBlur": [
+      "commit",
+      "keep",
+      "discard"
+    ],
+    "editable": [
+      true,
+      false
+    ],
+    "reorderable": [
+      true,
+      false
+    ],
+    "allowDuplicates": [
+      true,
+      false
+    ],
+    "addOnPaste": [
+      true,
+      false
+    ],
+    "clearable": [
+      true,
+      false
+    ],
+    "fullWidth": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ],
+    "readOnly": [
+      true,
+      false
+    ],
+    "required": [
+      true,
+      false
+    ],
+    "invalid": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "tags-input": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "overflow": "wrap",
+        "invalidValues": "keep",
+        "pendingOnBlur": "commit",
+        "editable": false,
+        "reorderable": false,
+        "allowDuplicates": false,
+        "addOnPaste": true,
+        "clearable": true,
+        "fullWidth": true,
+        "disabled": false,
+        "readOnly": false,
+        "required": false,
+        "invalid": false,
+        "max": null,
+        "delimiters": [
+          ","
+        ]
+      },
+      "capabilities": [
+        "value",
+        "overflow",
+        "copyable",
+        "size",
+        "appearance",
+        "fullWidth",
+        "disabled",
+        "readOnly",
+        "required",
+        "invalid",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "readonly",
+        "invalid",
+        "required",
+        "current",
+        "complete",
+        "expanded"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "chips",
+        "field",
+        "input",
+        "message",
+        "counter",
+        "clear",
+        "hint"
+      ]
+    }
+  },
+  "docs": {
+    "tags-input": {
+      "imports": {
+        "source": "import { SlTagsInput, provideTagsInputDefaults } from '@slotted/angular/tags-input';",
+        "selector": "sl-tags-input",
+        "exportAs": "slTagsInput"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "sl-tags-input, the host element itself",
+          "required": true,
+          "purpose": "The frame, carrying data-ui=\"tags-input\". It draws the border, the shadow, the focus ring and every state, and it grows by whole rows of chips to three, then scrolls. Under overflow=\"collapse\" it carries data-expanded while focus is inside it."
+        },
+        {
+          "part": "control",
+          "element": "div with role=\"grid\"",
+          "required": true,
+          "purpose": "The layout grid the chips and the field live in. The APG names this exact control — \"a list of recipients for a message may be a grid where each cell contains a link that represents a recipient\" — and one element of a layout grid is in the page tab sequence."
+        },
+        {
+          "part": "chips",
+          "element": "div with role=\"row\"",
+          "required": true,
+          "purpose": "One DOM row, however many lines it draws. The wrap is CSS, so the reading order stays linear. Each value in it is a tag worn as a gridcell; an invalid one wears the danger tone and the alert mark. The row names the hint as its description."
+        },
+        {
+          "part": "field",
+          "element": "span with role=\"gridcell\"",
+          "required": true,
+          "purpose": "The last cell of the row, holding the caret. It wraps with the chips rather than being pushed to a line of its own, and it asks for a word of width while keeping a floor of two characters."
+        },
+        {
+          "part": "input",
+          "element": "input, with no role",
+          "required": true,
+          "purpose": "A real text box that opens nothing, so every text-editing key, the caret, IME, autofill, a datalist named by list, and constraint validation stay the browser's. It is the control's one tab stop, and it carries the list's verdict as its custom validity."
+        },
+        {
+          "part": "message",
+          "element": "span, visually hidden",
+          "required": false,
+          "purpose": "Why a value is wrong, inside its chip: the consumer's reason, the browser's own validationMessage, or the generic invalid message. The chip names it as its description and repeats it as its title."
+        },
+        {
+          "part": "counter",
+          "element": "span",
+          "required": false,
+          "purpose": "How many values are held against the limit that holds them. Drawn only where it answers something — while max is set, or while the frame is too narrow for a chip."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Takes every value the reader may remove out at once, under the reason clear. Present only while clearable is set and the control holds something removable."
+        },
+        {
+          "part": "hint",
+          "element": "span, visually hidden",
+          "required": true,
+          "purpose": "What the row answers to, for a reader who cannot see the remove buttons: Delete removes a value, and — while editable — Enter edits it. The row names it as its description."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The values, in the order the reader gave them. A model, so [(value)] binds both ways."
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The list an unbound control starts from, read once in ngOnInit."
+        },
+        {
+          "name": "inputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The characters in the field. A model; it is emptied whenever a value is committed."
+        },
+        {
+          "name": "type",
+          "type": "'text' | 'email' | 'url' | 'tel' | 'search'",
+          "defaultValue": "text",
+          "appliesTo": "sl-tags-input",
+          "description": "The input’s own type, and — with no validator — the grammar each value is judged against."
+        },
+        {
+          "name": "validateValue",
+          "type": "(text: string) => boolean | string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether a text may be a value: true, false with the generic label, or a string saying why not. Absent, type, pattern, minLength and maxLength judge. Named validateValue because validate is the Validator’s own method."
+        },
+        {
+          "name": "invalidValues",
+          "type": "'keep' | 'refuse'",
+          "defaultValue": "keep",
+          "appliesTo": "sl-tags-input",
+          "description": "What becomes of a value that fails: a chip in the danger tone with its reason, or a report through valueRefuse."
+        },
+        {
+          "name": "normalize",
+          "type": "(text: string) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "Runs before a value is judged. Trim by default."
+        },
+        {
+          "name": "split",
+          "type": "(text: string) => readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "How a paste is split. The default splits on the delimiters and on every line break."
+        },
+        {
+          "name": "formatLabel",
+          "type": "(value: string) => string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The chip’s text for a value."
+        },
+        {
+          "name": "lockedValues",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The values the reader may not remove."
+        },
+        {
+          "name": "pattern",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The input’s own pattern, applied to each value."
+        },
+        {
+          "name": "minLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The input’s own minlength, applied to each value."
+        },
+        {
+          "name": "maxLength",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The input’s own maxlength, applied to each value."
+        },
+        {
+          "name": "list",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The id of a datalist, for the browser’s own completion."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The input’s placeholder."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The name every hidden input carries, one per value."
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The form the hidden inputs belong to, when it is not an ancestor."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "BCP 47, for the comparison the duplicate rule makes. The language in force when absent."
+        },
+        {
+          "name": "max",
+          "type": "number | null",
+          "defaultValue": "null",
+          "appliesTo": "sl-tags-input",
+          "description": "The most values the list may hold."
+        },
+        {
+          "name": "delimiters",
+          "type": "readonly string[]",
+          "defaultValue": ",",
+          "appliesTo": "sl-tags-input",
+          "description": "The characters that commit the typed text and split a paste."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "sl-tags-input",
+          "description": "The type step, and the frame’s height when empty."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "sl-tags-input",
+          "description": "An edge, a ground, or neither."
+        },
+        {
+          "name": "overflow",
+          "type": "'wrap' | 'collapse'",
+          "defaultValue": "wrap",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the row wraps to three lines and scrolls, or stays one line and opens while focus is inside."
+        },
+        {
+          "name": "pendingOnBlur",
+          "type": "'commit' | 'keep' | 'discard'",
+          "defaultValue": "commit",
+          "appliesTo": "sl-tags-input",
+          "description": "What leaving the control does with the text in the field."
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether Enter or a double click on a chip opens it for editing."
+        },
+        {
+          "name": "reorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether Alt with an arrow moves the focused chip."
+        },
+        {
+          "name": "allowDuplicates",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the same value may stand twice."
+        },
+        {
+          "name": "addOnPaste",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether a paste with several values becomes several chips."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the clear button is drawn while the control holds something."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the frame fills its container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Unstated, the control asks the form and the field around it."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the values may be read and copied but not changed."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether an empty list is a validity error."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-tags-input",
+          "description": "Whether the control is drawn in error, in addition to any value that failed."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagsInputMessages>",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "Words laid over the language in force, key by key: added, addedInvalid, clear, copied, count, countNamed, counter, duplicate, editHint, hint, invalid, remove, removed, reorder"
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideTagsInputDefaults",
+          "type": "(defaults: Partial<TagsInputDefaults>) => Provider",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets every axis once, at bootstrap or on a route; the words come from the language in force (provideSlotted). A binding on a control wins over it."
+        },
+        {
+          "name": "exportAs",
+          "type": "slTagsInput",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "The instance, for a template that needs focus(), clear(), setValue(), admit(), remove() or move()."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "NG_VALUE_ACCESSOR",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "formControl, formControlName and ngModel all move the whole list, and the form’s disabled state reaches the control."
+        },
+        {
+          "name": "Validator",
+          "type": "NG_VALIDATORS",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "required, tooMany, invalidValues — the values that failed, by name — and duplicate reach a Reactive Form without the consumer writing a validator. React answers with the platform’s setCustomValidity instead, and the asymmetry is recorded rather than levelled away."
+        },
+        {
+          "name": "slField",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "A control inside a field takes its id, its description, its error and its states from the field without being wrapped."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "readonly string[]",
+          "when": "The list moved, as the two-way half of [(value)]."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "The same move, with the reason on it: submit from typed text, a paste, a blur or an edit; remove from one value leaving; clear from all of them; keyboard from a reorder; programmatic from a method."
+        },
+        {
+          "name": "inputValueChange",
+          "payload": "string",
+          "when": "The text in the field moved, as the two-way half of [(inputValue)]."
+        },
+        {
+          "name": "inputValueChangeRequest",
+          "payload": "ChangeRequest<string>",
+          "when": "The same move, with the reason on it: keyboard, submit, clear, blur or programmatic."
+        },
+        {
+          "name": "valueRefuse",
+          "payload": "{ values: readonly string[]; cause: \"duplicate\" | \"limit\" | \"invalid\" }",
+          "when": "One or more values did not get in. It holds no state and cancels nothing. invalid arrives only under invalidValues=\"refuse\"."
+        },
+        {
+          "name": "valueCopy",
+          "payload": "{ values: readonly string[]; outcome: 'api' | 'command' | 'refused' }",
+          "when": "The reader copied a chip or the whole list with the keyboard, and the text either reached the clipboard or was refused."
+        }
+      ],
+      "accessibility": [
+        "The control is a layout grid with one row: the chips are cells and the field is the last cell, so one Tab reaches the input and the arrows walk the row. The input carries no role, because it opens nothing.",
+        "Focus is set on a chip cell rather than on the remove button inside it, which is tabindex=\"-1\"; Delete and Backspace do what the button does, and the row’s hint says so. Angular Material’s own chip grid resolves the grid pattern’s text-plus-widget cell the same way.",
+        "An invalid value is said three ways — the danger tone, the alert mark, and a description carrying the reason — because colour alone is not a message. The same reason is the input’s custom validity and the Validator’s invalidValues error, so a native form and a Reactive Form both refuse it.",
+        "Every change is announced once, politely: a value added with the count now held and its reason if it failed, a value removed with the count that is left, a move with its new position, a duplicate with the chip that holds it, and a copy with the count copied.",
+        "After a removal focus goes to the chip that took the removed one’s index, then the previous one, then the input — it is never lost to the document body."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-line-height-sm",
+    "--slotted-radius-none",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-surface-sunken",
+    "--slotted-tags-input-action-active-background",
+    "--slotted-tags-input-action-color",
+    "--slotted-tags-input-action-hover-background",
+    "--slotted-tags-input-action-size",
+    "--slotted-tags-input-autofill-background",
+    "--slotted-tags-input-background",
+    "--slotted-tags-input-border-color",
+    "--slotted-tags-input-color",
+    "--slotted-tags-input-counter-color",
+    "--slotted-tags-input-counter-complete-color",
+    "--slotted-tags-input-current-border-color",
+    "--slotted-tags-input-disabled-background",
+    "--slotted-tags-input-disabled-border-color",
+    "--slotted-tags-input-disabled-color",
+    "--slotted-tags-input-field-basis",
+    "--slotted-tags-input-field-min",
+    "--slotted-tags-input-hover-border-color",
+    "--slotted-tags-input-icon-size-min",
+    "--slotted-tags-input-invalid-border-color",
+    "--slotted-tags-input-invalid-edge-width",
+    "--slotted-tags-input-invalid-focus-ring-color",
+    "--slotted-tags-input-placeholder-color",
+    "--slotted-tags-input-plain-hover-background",
+    "--slotted-tags-input-radius",
+    "--slotted-tags-input-readonly-background",
+    "--slotted-tags-input-shadow",
+    "--slotted-tags-input-subtle-background",
+    "--slotted-tags-input-subtle-border-color",
+    "--slotted-tags-input-subtle-hover-background",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One control with every axis on it, driven by the controls under the canvas. Type an address and press Enter or a comma; type one without an at-sign and watch it stay, marked, instead of vanishing.",
+      "language": "html",
+      "source": "<sl-tags-input\n  aria-label=\"To\"\n  type=\"email\"\n  placeholder=\"Add a recipient\"\n  [defaultValue]=\"['ana.pereira@example.com']\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "recipients",
+      "title": "The recipients of a message",
+      "note": "The value is a list of texts and the text is the label. formatLabel draws the chip from the address — a name where the value is an address — and the value a form receives stays the address.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" type=\"email\" [(value)]=\"to\" [formatLabel]=\"nameFor\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "validity",
+      "title": "A value that fails is held, not dropped",
+      "note": "jhon.company stays where the reader can see it: the chip takes the danger tone and the alert mark, its reason is its description and its title, the frame is invalid, and a native submit is refused with the browser’s bubble on the control. Under invalidValues=\"refuse\" the same value is reported instead.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" [validateValue]=\"hasAtSign\" />\n\n<sl-tags-input\n  aria-label=\"SKUs\"\n  invalidValues=\"refuse\"\n  [validateValue]=\"isSku\"\n  (valueRefuse)=\"report($event.cause, $event.values)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "platform-validation",
+      "title": "The browser validates, in the reader’s language",
+      "note": "With no validator given, type=\"email\" and pattern judge each value the way the platform judges a single one, and the chip’s reason is the browser’s own validationMessage — already translated, and already the sentence the reader has seen on every other form.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" type=\"email\" />\n\n<sl-tags-input aria-label=\"Order numbers\" pattern=\"ORD-\\d{6}\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "limit",
+      "title": "A limit that is counted, and refused past it",
+      "note": "The counter is drawn only because max is set, takes the accent once the list is full, and the root carries data-complete. What arrives past the limit is reported with the values rather than dropped — a paste of six into a list of three says which three did not fit.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"Reviewers\" [max]=\"3\" (valueRefuse)=\"onRefuse($event)\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "duplicates",
+      "title": "Duplicates",
+      "note": "The comparison is locale-sensitive, so typing the first address in capitals finds it already held; focus goes to that chip and its edge takes the accent for one long step, rather than nothing happening. allowDuplicates lets the same value stand twice.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" locale=\"pt-BR\" />\n\n<sl-tags-input aria-label=\"Line items\" allowDuplicates />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "paste",
+      "title": "Pasting many values at once",
+      "note": "A paste splits on the delimiters and on every line break — a column copied out of a spreadsheet arrives one value per line. split replaces the rule for a clipboard the family cannot guess, such as addresses with quoted names in them.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"Cc\" type=\"email\" [delimiters]=\"[',', ';']\" />\n\n<sl-tags-input aria-label=\"To\" type=\"email\" [split]=\"addressesIn\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "blur",
+      "title": "What leaving does with the pending text",
+      "note": "Three answers, one word each: commit turns the text into a value, keep leaves it in the box, discard empties it. A recipients field commits; a filter operand keeps; a chat box discards.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" pendingOnBlur=\"commit\" />\n<sl-tags-input aria-label=\"Filter\" pendingOnBlur=\"keep\" />\n<sl-tags-input aria-label=\"Tags\" pendingOnBlur=\"discard\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "editing",
+      "title": "Editing a chip in place",
+      "note": "Enter on a chip — or a double click — turns its cell into a text field holding the value. Enter commits, Escape reverts, and the edit is judged like any other value: an edit into an address already held is refused and the chip that holds it takes focus.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" type=\"email\" editable />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder",
+      "title": "Reorder, by keyboard first",
+      "note": "Alt with an arrow moves the focused chip one place along the row, following the writing direction; Alt+Home and Alt+End move it to either end. The request carries keyboard and nothing else, so a consumer persisting an order listens for exactly that.",
+      "language": "html",
+      "source": "<sl-tags-input\n  aria-label=\"Approvers, in order\"\n  reorderable\n  (valueChangeRequest)=\"$event.reason === 'keyboard' && saveOrder($event.value)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "locked",
+      "title": "A value the reader may not remove",
+      "note": "lockedValues keeps a mandatory recipient in the list: its chip carries data-disabled, draws no remove control, is skipped by Backspace and by the clear button, and is still reachable by arrow — because the reader still has to be able to read it.",
+      "language": "html",
+      "source": "<sl-tags-input\n  aria-label=\"Cc\"\n  [defaultValue]=\"['support@example.com', 'ana.pereira@example.com']\"\n  [lockedValues]=\"['support@example.com']\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "copy",
+      "title": "The list on the clipboard",
+      "note": "Ctrl+C on a chip copies its value; Ctrl+X copies it and removes it. Ctrl+C on the empty field copies the whole list, joined by the first delimiter and a space — the shape a paste into another instance of this family reads back.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"Cc\" (valueCopy)=\"onCopy($event.values, $event.outcome)\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "overflow",
+      "title": "Overflow, and access to the whole list",
+      "note": "wrap grows the frame by whole rows to three and scrolls past them, and nothing leaves the DOM. collapse keeps one line and a +N at rest — for a filter bar or a table cell — and shows every chip while focus is inside the control, because there is no popup to hold them and no need for one.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"Cc\" overflow=\"wrap\" />\n<sl-tags-input aria-label=\"Cc\" overflow=\"collapse\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Sizes",
+      "note": "The frame takes the control height of its step, so an empty control is exactly the height of a text field beside it; the chips keep the small step at every size, because a chip is a chip and not a control.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" size=\"sm\" />\n<sl-tags-input aria-label=\"To\" size=\"md\" />\n<sl-tags-input aria-label=\"To\" size=\"lg\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variants",
+      "title": "Variants",
+      "note": "outline for a form, subtle for a panel that already has a ground, and plain for a table cell — where an edge and a resting shadow would draw a cell that is not there.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" variant=\"outline\" />\n<sl-tags-input aria-label=\"To\" variant=\"subtle\" />\n<sl-tags-input aria-label=\"To\" variant=\"plain\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "disabled answers nothing and keeps its values legible; readOnly keeps the caret, the copy and the chips at full ink, and withholds every remove control; invalid retints the border and the focus ring together; required is the platform’s own, written on the input only while the list is empty.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" disabled />\n<sl-tags-input aria-label=\"To\" readOnly />\n<sl-tags-input aria-label=\"To\" invalid required />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-content",
+      "title": "Content the family did not choose",
+      "note": "A sixty-character address truncates inside its chip and stays whole in the accessibility tree; the row wraps rather than pushing the frame wider; and under 120 pixels there is no chip at all and the counter answers instead.",
+      "language": "html",
+      "source": "<sl-tags-input\n  aria-label=\"To\"\n  [defaultValue]=\"['quality-assurance-and-release-management@subsidiary.example.com']\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Tab reaches the field once. Backspace from an empty field moves to the last chip and removes nothing; a second press removes it. Delete takes the focused chip out, the arrows walk the row and mirror under rtl, Escape clears the text and never the list, and a printable character sends the reader back to the field.",
+      "language": "html",
+      "source": "<sl-tags-input aria-label=\"To\" editable reorderable [defaultValue]=\"['ana.pereira@example.com']\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "form",
+      "title": "In a form",
+      "note": "One hidden input per value under the name to, a ControlValueAccessor, and a Validator beside it — so a Reactive Form sees required, tooMany and the values that failed by name, and a plain form is refused by the input’s own custom validity.",
+      "language": "html",
+      "source": "<div slField [invalid]=\"to.invalid\">\n  <label slFieldLabel>To</label>\n  <sl-tags-input name=\"to\" type=\"email\" required [formControl]=\"to\" />\n  <span slFieldError>Name at least one recipient</span>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composition, and the defaults an application sets once",
+      "note": "An injection token carries the axes, provideSlotted the language, exportAs reaches the instance from the template, and list passes through to a datalist for the browser’s own completion.",
+      "language": "html",
+      "source": "<sl-tags-input #to=\"slTagsInput\" aria-label=\"To\" list=\"contacts\" type=\"email\" />\n<datalist id=\"contacts\">\n  <option value=\"ana.pereira@example.com\"></option>\n</datalist>\n\n<button type=\"button\" (click)=\"to.setValue(team, 'programmatic')\">Add the whole team</button>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}