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

package/docs/tag.json

@@ -0,0 +1,813 @@
+{
+  "family": "tag",
+  "ui": "tag",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Label for a category, removable or selectable."
+  },
+  "axes": {
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "variant": [
+      "solid",
+      "soft",
+      "outline"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "shape": [
+      "pill",
+      "square"
+    ],
+    "orientation": [
+      "horizontal",
+      "vertical"
+    ]
+  },
+  "members": {
+    "tag": {
+      "nativeElement": "span",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "soft",
+        "size": "md",
+        "shape": "pill",
+        "orientation": "horizontal",
+        "disabled": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "shape",
+        "content",
+        "disabled",
+        "removable",
+        "orientation"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "body",
+        "start",
+        "label",
+        "end",
+        "remove",
+        "group"
+      ]
+    },
+    "tagButton": {
+      "nativeElement": "span",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "soft",
+        "size": "md",
+        "shape": "pill",
+        "disabled": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "shape",
+        "content",
+        "disabled",
+        "removable"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "body",
+        "start",
+        "label",
+        "end",
+        "remove"
+      ]
+    },
+    "tagLink": {
+      "nativeElement": "span",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "soft",
+        "size": "md",
+        "shape": "pill",
+        "disabled": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "shape",
+        "content",
+        "disabled",
+        "removable"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "body",
+        "start",
+        "label",
+        "end",
+        "remove"
+      ]
+    },
+    "tagToggle": {
+      "nativeElement": "span",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "soft",
+        "size": "md",
+        "shape": "pill",
+        "disabled": false,
+        "selected": false
+      },
+      "capabilities": [
+        "appearance",
+        "size",
+        "shape",
+        "content",
+        "disabled",
+        "removable",
+        "selection"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "selected",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "body",
+        "indicator",
+        "start",
+        "label",
+        "end",
+        "remove"
+      ]
+    }
+  },
+  "docs": {
+    "tag": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "slTag",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "slTag",
+          "description": "How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTag",
+          "description": "Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with"
+        },
+        {
+          "name": "shape",
+          "type": "'pill' | 'square'",
+          "defaultValue": "pill",
+          "appliesTo": "slTag",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "slTagStart",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "A glyph or an avatar before the words: the directive on the consumer’s own element, projected into the content box"
+        },
+        {
+          "name": "end",
+          "type": "slTagEnd",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "A glyph after the words, projected the same way"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "removable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Whether the chip can be removed. Stated rather than inferred: Angular cannot see whether an output was subscribed"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Words laid over the language in force, key by key: remove is the word the remove control announces before the tag’s own label, so it reads “Remove Design”"
+        },
+        {
+          "name": "removeDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "(remove)",
+          "type": "TagRemoveRequest",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Asks to be removed. reason is remove for the control and keyboard for Backspace or Delete; cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "slTagGroup",
+          "description": "Which way the run reads. vertical also writes aria-orientation"
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTagGroup",
+          "description": "Whether the arrow keys wrap past the ends"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "defaultValue": "toolbar",
+          "appliesTo": "slTagGroup",
+          "description": "toolbar makes the run one tab stop with arrow navigation inside it. Writing role=\"list\" on the element turns that off and gives every chip role=\"listitem\""
+        },
+        {
+          "name": "exportAs",
+          "type": "slTag | slTagBody | slTagToggle | slTagRemove | slTagGroup",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "A template reference to the instance, for a page that has to reach one"
+        },
+        {
+          "name": "provideTagDefaults",
+          "type": "{ tone, variant, size, shape }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "Sets the defaults once for every tag under it; an explicit input still wins"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "There is no tag or chip pattern in the WAI-ARIA Authoring Practices — the pattern index at w3.org/WAI/ARIA/apg/patterns/ carries thirty-two entries and neither word occurs. The applicable official guidance is the Toolbar pattern for the group, the Button pattern for a chip that acts and for the remove control, the Link pattern for one that navigates, and aria-pressed in WAI-ARIA 1.2 for one that holds a selection.",
+        "The chip box is never the interactive element. A button cannot contain a button and an anchor cannot contain either, so a chip that both acts and removes puts its two controls side by side: slTagBody is the primary target and slTagRemove is its sibling.",
+        "What the chip is, is which element carries slTagBody: a span does nothing, a button runs a command, an anchor navigates. The element is the member, which keeps routerLink, type, download and every native listener on the element that owns them.",
+        "The remove control’s name is composed, not repeated: aria-labelledby joins a hidden word to the tag’s own label, so it announces “Remove Design” rather than “Remove”. Text referenced by aria-labelledby counts even when the element holding it is hidden.",
+        "Backspace and Delete on any control inside a removable tag ask for the same removal the X does, and the request says which of the two it was.",
+        "The focus ring is drawn on the control, never on the chip: a chip can hold two controls, and a ring around the whole box could not say which one has focus.",
+        "The remove control is as tall as the chip and as wide as its glyph plus a step of air on each side, floored at the WCAG 2.2 2.5.8 minimum of 24 CSS pixels, which carries it past that minimum in both axes at every size and every density. The chip’s own height is floored at that minimum for the same reason.",
+        "A tag is one line. A value too long for its container is clipped with an ellipsis rather than reflowed, and the clipping is visual only: the whole value stays in the DOM, in the accessibility tree, and findable by page search.",
+        "The label is a bidi isolate whose direction comes from its own first strong character, so an Arabic value inside an English page reads right to left and is clipped at its own end.",
+        "Under forced colours every tone ground becomes one system colour, so the family draws its edge in currentColor there, and a selected chip takes the system’s own Highlight pair.",
+        "A static tag carries no role of its own. What a value means comes from where it sits, and a role invented here would be wrong more often than right.",
+        "A run of static tags is written role=\"list\" on the group, which announces its length and turns the arrow keys off."
+      ]
+    },
+    "tagButton": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "slTag",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "slTag",
+          "description": "How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTag",
+          "description": "Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with"
+        },
+        {
+          "name": "shape",
+          "type": "'pill' | 'square'",
+          "defaultValue": "pill",
+          "appliesTo": "slTag",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "slTagStart",
+          "defaultValue": "—",
+          "appliesTo": "slTagBody",
+          "description": "A glyph or an avatar before the words: the directive on the consumer’s own element, projected into the content box"
+        },
+        {
+          "name": "end",
+          "type": "slTagEnd",
+          "defaultValue": "—",
+          "appliesTo": "slTagBody",
+          "description": "A glyph after the words, projected the same way"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "removable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Whether the chip can be removed. Stated rather than inferred: Angular cannot see whether an output was subscribed"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Words laid over the language in force, key by key: remove is the word the remove control announces before the tag’s own label, so it reads “Remove Design”"
+        },
+        {
+          "name": "removeDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "(remove)",
+          "type": "TagRemoveRequest",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Asks to be removed. reason is remove for the control and keyboard for Backspace or Delete; cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "(click)",
+          "type": "MouseEvent",
+          "defaultValue": "—",
+          "appliesTo": "button[slTagBody]",
+          "description": "The command. It stays on the consumer’s own button, so type, form and every native listener reach the element that owns them"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "There is no tag or chip pattern in the WAI-ARIA Authoring Practices — the pattern index at w3.org/WAI/ARIA/apg/patterns/ carries thirty-two entries and neither word occurs. The applicable official guidance is the Toolbar pattern for the group, the Button pattern for a chip that acts and for the remove control, the Link pattern for one that navigates, and aria-pressed in WAI-ARIA 1.2 for one that holds a selection.",
+        "The chip box is never the interactive element. A button cannot contain a button and an anchor cannot contain either, so a chip that both acts and removes puts its two controls side by side: slTagBody is the primary target and slTagRemove is its sibling.",
+        "What the chip is, is which element carries slTagBody: a span does nothing, a button runs a command, an anchor navigates. The element is the member, which keeps routerLink, type, download and every native listener on the element that owns them.",
+        "The remove control’s name is composed, not repeated: aria-labelledby joins a hidden word to the tag’s own label, so it announces “Remove Design” rather than “Remove”. Text referenced by aria-labelledby counts even when the element holding it is hidden.",
+        "Backspace and Delete on any control inside a removable tag ask for the same removal the X does, and the request says which of the two it was.",
+        "The focus ring is drawn on the control, never on the chip: a chip can hold two controls, and a ring around the whole box could not say which one has focus.",
+        "The remove control is as tall as the chip and as wide as its glyph plus a step of air on each side, floored at the WCAG 2.2 2.5.8 minimum of 24 CSS pixels, which carries it past that minimum in both axes at every size and every density. The chip’s own height is floored at that minimum for the same reason.",
+        "A tag is one line. A value too long for its container is clipped with an ellipsis rather than reflowed, and the clipping is visual only: the whole value stays in the DOM, in the accessibility tree, and findable by page search.",
+        "The label is a bidi isolate whose direction comes from its own first strong character, so an Arabic value inside an English page reads right to left and is clipped at its own end.",
+        "Under forced colours every tone ground becomes one system colour, so the family draws its edge in currentColor there, and a selected chip takes the system’s own Highlight pair.",
+        "The command is a real button, so Enter and Space both activate it and the platform supplies the rest.",
+        "A disabled chip writes the native disabled attribute on a button body, which is the form the platform offers for that element."
+      ]
+    },
+    "tagLink": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "slTag",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "slTag",
+          "description": "How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTag",
+          "description": "Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with"
+        },
+        {
+          "name": "shape",
+          "type": "'pill' | 'square'",
+          "defaultValue": "pill",
+          "appliesTo": "slTag",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "slTagStart",
+          "defaultValue": "—",
+          "appliesTo": "slTagBody",
+          "description": "A glyph or an avatar before the words: the directive on the consumer’s own element, projected into the content box"
+        },
+        {
+          "name": "end",
+          "type": "slTagEnd",
+          "defaultValue": "—",
+          "appliesTo": "slTagBody",
+          "description": "A glyph after the words, projected the same way"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "removable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Whether the chip can be removed. Stated rather than inferred: Angular cannot see whether an output was subscribed"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Words laid over the language in force, key by key: remove is the word the remove control announces before the tag’s own label, so it reads “Remove Design”"
+        },
+        {
+          "name": "removeDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "(remove)",
+          "type": "TagRemoveRequest",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Asks to be removed. reason is remove for the control and keyboard for Backspace or Delete; cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "a[slTagBody]",
+          "description": "The destination, and routerLink composes on the same element. A disabled chip withholds it and gives it back the moment the chip becomes available again"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "There is no tag or chip pattern in the WAI-ARIA Authoring Practices — the pattern index at w3.org/WAI/ARIA/apg/patterns/ carries thirty-two entries and neither word occurs. The applicable official guidance is the Toolbar pattern for the group, the Button pattern for a chip that acts and for the remove control, the Link pattern for one that navigates, and aria-pressed in WAI-ARIA 1.2 for one that holds a selection.",
+        "The chip box is never the interactive element. A button cannot contain a button and an anchor cannot contain either, so a chip that both acts and removes puts its two controls side by side: slTagBody is the primary target and slTagRemove is its sibling.",
+        "What the chip is, is which element carries slTagBody: a span does nothing, a button runs a command, an anchor navigates. The element is the member, which keeps routerLink, type, download and every native listener on the element that owns them.",
+        "The remove control’s name is composed, not repeated: aria-labelledby joins a hidden word to the tag’s own label, so it announces “Remove Design” rather than “Remove”. Text referenced by aria-labelledby counts even when the element holding it is hidden.",
+        "Backspace and Delete on any control inside a removable tag ask for the same removal the X does, and the request says which of the two it was.",
+        "The focus ring is drawn on the control, never on the chip: a chip can hold two controls, and a ring around the whole box could not say which one has focus.",
+        "The remove control is as tall as the chip and as wide as its glyph plus a step of air on each side, floored at the WCAG 2.2 2.5.8 minimum of 24 CSS pixels, which carries it past that minimum in both axes at every size and every density. The chip’s own height is floored at that minimum for the same reason.",
+        "A tag is one line. A value too long for its container is clipped with an ellipsis rather than reflowed, and the clipping is visual only: the whole value stays in the DOM, in the accessibility tree, and findable by page search.",
+        "The label is a bidi isolate whose direction comes from its own first strong character, so an Arabic value inside an English page reads right to left and is clipped at its own end.",
+        "Under forced colours every tone ground becomes one system colour, so the family draws its edge in currentColor there, and a selected chip takes the system’s own Highlight pair.",
+        "The destination is a real anchor, so middle click, the context menu, download and “open in new tab” all keep working.",
+        "A disabled chip link keeps its place in the tab sequence and loses its href, which is the line the link family draws: an anchor without a destination would drop out of the tab sequence and take its own explanation with it."
+      ]
+    },
+    "tagToggle": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "slTag",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "slTag",
+          "description": "How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slTag",
+          "description": "Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with"
+        },
+        {
+          "name": "shape",
+          "type": "'pill' | 'square'",
+          "defaultValue": "pill",
+          "appliesTo": "slTag",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "slTagStart",
+          "defaultValue": "—",
+          "appliesTo": "slTagToggle",
+          "description": "A glyph or an avatar before the words: the directive on the consumer’s own element, projected into the content box"
+        },
+        {
+          "name": "end",
+          "type": "slTagEnd",
+          "defaultValue": "—",
+          "appliesTo": "slTagToggle",
+          "description": "A glyph after the words, projected the same way"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "removable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Whether the chip can be removed. Stated rather than inferred: Angular cannot see whether an output was subscribed"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Words laid over the language in force, key by key: remove is the word the remove control announces before the tag’s own label, so it reads “Remove Design”"
+        },
+        {
+          "name": "removeDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTag",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "(remove)",
+          "type": "TagRemoveRequest",
+          "defaultValue": "—",
+          "appliesTo": "slTag",
+          "description": "Asks to be removed. reason is remove for the control and keyboard for Backspace or Delete; cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "button[slTagToggle]",
+          "description": "The selection the consumer owns. Passing it puts the chip in controlled mode for good"
+        },
+        {
+          "name": "defaultSelected",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "button[slTagToggle]",
+          "description": "The selection an uncontrolled chip starts from, read once"
+        },
+        {
+          "name": "(selectedChange)",
+          "type": "ChangeRequest<boolean>",
+          "defaultValue": "—",
+          "appliesTo": "button[slTagToggle]",
+          "description": "One output for one transition, carrying the value, the value it replaces, the reason, the event and cancel()"
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "There is no tag or chip pattern in the WAI-ARIA Authoring Practices — the pattern index at w3.org/WAI/ARIA/apg/patterns/ carries thirty-two entries and neither word occurs. The applicable official guidance is the Toolbar pattern for the group, the Button pattern for a chip that acts and for the remove control, the Link pattern for one that navigates, and aria-pressed in WAI-ARIA 1.2 for one that holds a selection.",
+        "The chip box is never the interactive element. A button cannot contain a button and an anchor cannot contain either, so a chip that both acts and removes puts its two controls side by side: slTagBody is the primary target and slTagRemove is its sibling.",
+        "What the chip is, is which element carries slTagBody: a span does nothing, a button runs a command, an anchor navigates. The element is the member, which keeps routerLink, type, download and every native listener on the element that owns them.",
+        "The remove control’s name is composed, not repeated: aria-labelledby joins a hidden word to the tag’s own label, so it announces “Remove Design” rather than “Remove”. Text referenced by aria-labelledby counts even when the element holding it is hidden.",
+        "Backspace and Delete on any control inside a removable tag ask for the same removal the X does, and the request says which of the two it was.",
+        "The focus ring is drawn on the control, never on the chip: a chip can hold two controls, and a ring around the whole box could not say which one has focus.",
+        "The remove control is as tall as the chip and as wide as its glyph plus a step of air on each side, floored at the WCAG 2.2 2.5.8 minimum of 24 CSS pixels, which carries it past that minimum in both axes at every size and every density. The chip’s own height is floored at that minimum for the same reason.",
+        "A tag is one line. A value too long for its container is clipped with an ellipsis rather than reflowed, and the clipping is visual only: the whole value stays in the DOM, in the accessibility tree, and findable by page search.",
+        "The label is a bidi isolate whose direction comes from its own first strong character, so an Arabic value inside an English page reads right to left and is clipped at its own end.",
+        "Under forced colours every tone ground becomes one system colour, so the family draws its edge in currentColor there, and a selected chip takes the system’s own Highlight pair.",
+        "A selected tag announces aria-pressed, not aria-selected. aria-selected is only valid inside a listbox, a grid or a tree, and an option may not contain the remove control this family puts beside the label.",
+        "The label never changes with the state, which is the APG’s rule for a toggle.",
+        "Selection is not colour alone. The chip fills, and a check grows into the label beside the words — WCAG 2.2 1.4.1."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-width-thin",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-radius-sm",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-tag-border-color",
+    "--slotted-tag-border-width",
+    "--slotted-tag-font-family",
+    "--slotted-tag-font-weight",
+    "--slotted-tag-group-gap",
+    "--slotted-tag-inset-block",
+    "--slotted-tag-state-layer-active",
+    "--slotted-tag-state-layer-hover",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-active",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-solid-active",
+    "--slotted-tone-danger-solid-hover",
+    "--slotted-tone-danger-subtle-active",
+    "--slotted-tone-danger-subtle-hover",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-border",
+    "--slotted-tone-secondary-on-solid",
+    "--slotted-tone-secondary-solid-active",
+    "--slotted-tone-secondary-solid-hover",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-border",
+    "--slotted-tone-success-on-solid",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-solid-active",
+    "--slotted-tone-success-solid-hover",
+    "--slotted-tone-success-subtle-active",
+    "--slotted-tone-success-subtle-hover",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-border",
+    "--slotted-tone-warning-on-solid",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-solid-active",
+    "--slotted-tone-warning-solid-hover",
+    "--slotted-tone-warning-subtle-active",
+    "--slotted-tone-warning-subtle-hover",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "tag-angular-static",
+      "title": "A value beside the thing it belongs to",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag tone=\"success\"><span slTagBody>Entregue</span></span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-angular-removable",
+      "title": "A run of values a person can take away",
+      "note": null,
+      "language": "html",
+      "source": "<div slTagGroup aria-label=\"Rótulos\">\n  @for (label of labels(); track label) {\n    <span slTag removable (remove)=\"drop(label)\">\n      <span slTagBody>{{ label }}</span>\n      <button slTagRemove></button>\n    </span>\n  }\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-angular-confirm",
+      "title": "A removal the application refuses until it is confirmed",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag removable (remove)=\"confirm($event)\">\n  <span slTagBody>Produção</span>\n  <button slTagRemove></button>\n</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-angular-defaults",
+      "title": "One decision for every tag in the application",
+      "note": null,
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [provideTagDefaults({ size: 'sm' })],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-button-angular-command",
+      "title": "A chip that runs a command",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag>\n  <button slTagBody (click)=\"assign()\">Atribuir responsável</button>\n</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-button-angular-overflow",
+      "title": "The remaining values, behind one more chip",
+      "note": null,
+      "language": "html",
+      "source": "<div slTagGroup aria-label=\"Participantes\">\n  @for (person of shown(); track person.id) {\n    <span slTag>\n      <span slTagBody>{{ person.name }}</span>\n    </span>\n  }\n  @if (hidden() > 0) {\n    <span slTag variant=\"outline\">\n      <button slTagBody (click)=\"showAll()\">+{{ hidden() }}</button>\n    </span>\n  }\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-link-angular-destination",
+      "title": "A chip that navigates",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag>\n  <a slTagBody href=\"/equipes/plataforma\">#plataforma</a>\n</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-link-angular-router",
+      "title": "A destination the router owns",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag>\n  <a slTagBody routerLink=\"/equipes/plataforma\">#plataforma</a>\n</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-toggle-angular-uncontrolled",
+      "title": "A filter that remembers its own state",
+      "note": null,
+      "language": "html",
+      "source": "<span slTag>\n  <button slTagToggle defaultSelected>Somente abertos</button>\n</span>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-toggle-angular-set",
+      "title": "A set of filters the application owns",
+      "note": null,
+      "language": "html",
+      "source": "<div slTagGroup aria-label=\"Filtros\">\n  @for (facet of facets; track facet) {\n    <span slTag tone=\"accent\">\n      <button\n        slTagToggle\n        [selected]=\"chosen().has(facet)\"\n        (selectedChange)=\"choose(facet, $event.value)\"\n      >\n        {{ facet }}\n      </button>\n    </span>\n  }\n</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}