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

package/dist/docs/tag.json

@@ -0,0 +1,803 @@
+{
+  "family": "tag",
+  "ui": "tag",
+  "binding": "react",
+  "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": "Tag",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "Tag",
+          "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": "Tag",
+          "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": "Tag",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Tag",
+          "description": "A glyph or an avatar before the words, wrapped in the start part, which sizes and centres it"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Tag",
+          "description": "A glyph after the words, wrapped in the end part"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Tag",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "onRemove",
+          "type": "(request: TagRemoveRequest) => void",
+          "defaultValue": "—",
+          "appliesTo": "Tag",
+          "description": "Asks to be removed. The remove control is rendered only when this is present. request.reason is remove for the control and keyboard for Backspace or Delete; request.cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Tag",
+          "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": "Tag",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "orientation",
+          "type": "'horizontal' | 'vertical'",
+          "defaultValue": "horizontal",
+          "appliesTo": "TagGroup",
+          "description": "Which way the run reads. vertical also writes aria-orientation"
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "TagGroup",
+          "description": "Whether the arrow keys wrap past the ends of the run"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "defaultValue": "toolbar",
+          "appliesTo": "TagGroup",
+          "description": "toolbar makes the run one tab stop with arrow navigation inside it. Writing list turns that off and gives every chip role=\"listitem\""
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every member",
+          "description": "Renders the member’s own element into another one — an li for a tag in a list, a router’s link component for a destination"
+        },
+        {
+          "name": "rootProps",
+          "type": "ComponentProps<'span'>",
+          "defaultValue": "—",
+          "appliesTo": "TagButton, TagLink, TagToggle",
+          "description": "Reaches the chip box, which an interactive member’s own props do not land on"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "every member",
+          "description": "Reaches the element the member is: the chip box for Tag, the control for the other three"
+        },
+        {
+          "name": "TagDefaultsProvider",
+          "type": "{ tone, variant, size, shape }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets the defaults once for every tag under it; an explicit prop 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: the body is the primary target and the remove control is its sibling.",
+        "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. MUI, Primer, React Aria and Angular Material all ship the shortcut; Primer announces it in a visually hidden sentence beside the value.",
+        "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. It is inset, because a ring outside the body would cover the remove control beside it and a ring outside the remove would touch the next tag in a wrapped run.",
+        "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: text-overflow shortens nothing, so the whole value stays in the DOM, stays in the accessibility tree, and a page search still finds it.",
+        "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 — its whole signal is a ground the system has replaced.",
+        "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 group of static tags is written role=\"list\", which announces its length and turns the arrow keys off — a list is a structure rather than a widget."
+      ]
+    },
+    "tagButton": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "TagButton",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "TagButton",
+          "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": "TagButton",
+          "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": "TagButton",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagButton",
+          "description": "A glyph or an avatar before the words, wrapped in the start part, which sizes and centres it"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagButton",
+          "description": "A glyph after the words, wrapped in the end part"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TagButton",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "onRemove",
+          "type": "(request: TagRemoveRequest) => void",
+          "defaultValue": "—",
+          "appliesTo": "TagButton",
+          "description": "Asks to be removed. The remove control is rendered only when this is present. request.reason is remove for the control and keyboard for Backspace or Delete; request.cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "TagButton",
+          "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": "TagButton",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "onClick",
+          "type": "(event) => void",
+          "defaultValue": "—",
+          "appliesTo": "TagButton",
+          "description": "The command. It lands on the button the chip’s body is, so type, form and every native button prop 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: the body is the primary target and the remove control is its sibling.",
+        "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. MUI, Primer, React Aria and Angular Material all ship the shortcut; Primer announces it in a visually hidden sentence beside the value.",
+        "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. It is inset, because a ring outside the body would cover the remove control beside it and a ring outside the remove would touch the next tag in a wrapped run.",
+        "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: text-overflow shortens nothing, so the whole value stays in the DOM, stays in the accessibility tree, and a page search still finds it.",
+        "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 — its whole signal is a ground the system has replaced.",
+        "The command is a real button, so Enter and Space both activate it and the platform supplies the rest.",
+        "A disabled TagButton is natively disabled. Reach for aria-disabled through rootProps only when the chip has to stay in the tab sequence to explain itself."
+      ]
+    },
+    "tagLink": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "TagLink",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "TagLink",
+          "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": "TagLink",
+          "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": "TagLink",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagLink",
+          "description": "A glyph or an avatar before the words, wrapped in the start part, which sizes and centres it"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagLink",
+          "description": "A glyph after the words, wrapped in the end part"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TagLink",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "onRemove",
+          "type": "(request: TagRemoveRequest) => void",
+          "defaultValue": "—",
+          "appliesTo": "TagLink",
+          "description": "Asks to be removed. The remove control is rendered only when this is present. request.reason is remove for the control and keyboard for Backspace or Delete; request.cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "TagLink",
+          "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": "TagLink",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "TagLink",
+          "description": "The destination. A disabled TagLink loses it and announces aria-disabled, because an anchor without a destination is not a link"
+        }
+      ],
+      "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: the body is the primary target and the remove control is its sibling.",
+        "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. MUI, Primer, React Aria and Angular Material all ship the shortcut; Primer announces it in a visually hidden sentence beside the value.",
+        "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. It is inset, because a ring outside the body would cover the remove control beside it and a ring outside the remove would touch the next tag in a wrapped run.",
+        "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: text-overflow shortens nothing, so the whole value stays in the DOM, stays in the accessibility tree, and a page search still finds it.",
+        "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 — its whole signal is a ground the system has replaced.",
+        "The destination is a real anchor, so middle click, the context menu, download and “open in new tab” all keep working.",
+        "A chip that navigates to another origin says so in its own words or in a visually hidden sentence. The external marker belongs to the link family, on a link."
+      ]
+    },
+    "tagToggle": {
+      "imports": null,
+      "anatomy": [],
+      "api": [
+        {
+          "name": "tone",
+          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "TagToggle",
+          "description": "Which of the five semantic colours the tag speaks in"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'soft' | 'outline'",
+          "defaultValue": "soft",
+          "appliesTo": "TagToggle",
+          "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": "TagToggle",
+          "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": "TagToggle",
+          "description": "A rounded chip, or a rectangle with the small corner radius"
+        },
+        {
+          "name": "start",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "description": "A glyph or an avatar before the words, wrapped in the start part, which sizes and centres it"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "description": "A glyph after the words, wrapped in the end part"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TagToggle",
+          "description": "Refuses every interaction the tag offers, including its removal"
+        },
+        {
+          "name": "onRemove",
+          "type": "(request: TagRemoveRequest) => void",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "description": "Asks to be removed. The remove control is rendered only when this is present. request.reason is remove for the control and keyboard for Backspace or Delete; request.cancel() refuses it, and the group then leaves focus where it is"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<TagMessages>",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "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": "TagToggle",
+          "description": "Refuses the removal while the rest of the tag stays operable"
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TagToggle",
+          "description": "The selection the consumer owns. Passing it puts the tag in controlled mode for good"
+        },
+        {
+          "name": "defaultSelected",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "description": "The selection an uncontrolled tag starts from, read once. A later change to it is not silently adopted"
+        },
+        {
+          "name": "onSelectedChange",
+          "type": "(selected, request) => void",
+          "defaultValue": "—",
+          "appliesTo": "TagToggle",
+          "description": "Asks for the opposite selection. request.reason is pointer or keyboard, and request.cancel() refuses it"
+        }
+      ],
+      "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: the body is the primary target and the remove control is its sibling.",
+        "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. MUI, Primer, React Aria and Angular Material all ship the shortcut; Primer announces it in a visually hidden sentence beside the value.",
+        "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. It is inset, because a ring outside the body would cover the remove control beside it and a ring outside the remove would touch the next tag in a wrapped run.",
+        "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: text-overflow shortens nothing, so the whole value stays in the DOM, stays in the accessibility tree, and a page search still finds it.",
+        "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 — its whole signal is a ground the system has replaced.",
+        "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. Carbon’s SelectableTag reaches the same conclusion; Angular Material reaches the other one and gives up the remove button.",
+        "The label never changes with the state, which is the APG’s rule for a toggle: “Aberto” stays “Aberto” and the state is announced beside it.",
+        "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-react-static",
+      "title": "A value beside the thing it belongs to",
+      "note": null,
+      "language": "tsx",
+      "source": "<Tag tone=\"success\">Entregue</Tag>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-react-removable",
+      "title": "A run of values a person can take away",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagGroup aria-label=\"Rótulos\">\n  {labels.map((label) => (\n    <Tag key={label} onRemove={() => setLabels(labels.filter((it) => it !== label))}>\n      {label}\n    </Tag>\n  ))}\n</TagGroup>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-react-confirm",
+      "title": "A removal the application refuses until it is confirmed",
+      "note": null,
+      "language": "tsx",
+      "source": "<Tag\n  onRemove={(request) => {\n    if (!confirmed) {\n      request.cancel();\n      askForConfirmation(request.reason);\n      return;\n    }\n    remove();\n  }}\n>\n  Produção\n</Tag>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-react-list",
+      "title": "A run of values that are not controls",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagGroup aria-label=\"Tecnologias\" role=\"list\">\n  <Tag>TypeScript</Tag>\n  <Tag>Angular</Tag>\n  <Tag>React</Tag>\n</TagGroup>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-react-defaults",
+      "title": "One decision for every tag in the application",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagDefaultsProvider size=\"sm\">\n  <App />\n</TagDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-button-react-command",
+      "title": "A chip that runs a command",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagButton onClick={() => openAssignee()}>Atribuir responsável</TagButton>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-button-react-overflow",
+      "title": "The remaining values, behind one more chip",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagGroup aria-label=\"Participantes\">\n  {people.slice(0, 5).map((person) => (\n    <Tag key={person.id}>{person.name}</Tag>\n  ))}\n  {people.length > 5 ? (\n    <TagButton onClick={showAll} variant=\"outline\">\n      +{people.length - 5}\n    </TagButton>\n  ) : null}\n</TagGroup>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-link-react-destination",
+      "title": "A chip that navigates",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagLink href=\"/equipes/plataforma\">#plataforma</TagLink>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-link-react-router",
+      "title": "A destination the router owns",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagLink render={(props) => <Link {...props} to=\"/equipes/plataforma\" />}>#plataforma</TagLink>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-toggle-react-uncontrolled",
+      "title": "A filter that remembers its own state",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagToggle defaultSelected>Somente abertos</TagToggle>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "tag-toggle-react-set",
+      "title": "A set of filters the application owns",
+      "note": null,
+      "language": "tsx",
+      "source": "<TagGroup aria-label=\"Filtros\">\n  {facets.map((facet) => (\n    <TagToggle\n      key={facet}\n      onSelectedChange={(next) => setChosen(toggle(chosen, facet, next))}\n      selected={chosen.has(facet)}\n      tone=\"accent\"\n    >\n      {facet}\n    </TagToggle>\n  ))}\n</TagGroup>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}