@adobe/spectrum-design-data 3.3.0-beta.0 → 3.3.0-beta.2

package/components/table.json

@@ -16,79 +16,64 @@
     },
     {
       "type": "guideline",
-      "content": "Tables organize and display structured information in rows and columns. They support scanning, sorting, comparing, and interacting with large amounts of data. Use when multiple data points need to be reviewed or acted on in one place."
+      "content": "Standard vs. quiet.\n\nUse a standard table when a table is the main focus of an experience. Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight."
     },
     {
       "type": "guideline",
-      "content": "Tables come in three sizes: small, medium, and large. Size affects the overall scale, including font size and spacing. Medium is the default. Use large for high-visibility tables or when readability is critical. Use small in constrained spaces or when the table is secondary to other content."
-    },
-    {
-      "type": "guideline",
-      "content": "If true, the table header is hidden."
-    },
-    {
-      "type": "guideline",
-      "content": "Configuration for the table header row."
-    },
-    {
-      "type": "guideline",
-      "content": "Tables come in three densities: compact, regular, and spacious. Density controls vertical spacing while keeping font sizes consistent—compact rows have tighter padding, spacious rows have more breathing room. Regular is the default for most use cases. Use compact when fitting more data in a limited viewport is critical (e.g., dashboards, data-heavy admin panels). Use spacious when scannability and visual comfort are priorities (e.g., transaction histories, settings tables with minimal data)."
+      "content": "Column dividers help organize table content and aid users in parsing related data. You can apply dividers selectively to group related columns—for example, separating user information from action columns, or grouping metadata fields together. Use dividers sparingly to avoid visual clutter."
     },
     {
       "type": "guideline",
-      "content": "Use a standard table when a table is the main focus of an experience. Quiet tables are for when a table is meant to be supplementary, subtle, or lightweight."
+      "content": "Selection.\n\nBy default, rows are not selectable. Enable selection with selectionMode=single or selectionMode=multiple. Checkbox selection (default): Checkboxes appear on the left. Clicking toggles selection. Use for bulk actions or when selection should be explicit. Highlight selection: No checkboxes—rows show a highlighted background when selected. Clicking a row selects it (use modifier keys for multi-select). Use when rows also need to support navigation or actions via onAction or href, or when a cleaner appearance is needed. Navigation: Use onAction for row actions or href for links. In highlight selection style, double-click performs actions while single-click selects, allowing both behaviors."
     },
     {
       "type": "guideline",
-      "content": "If true, table columns can be sorted."
+      "content": "Hover state.\n\nAll tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row."
     },
     {
       "type": "guideline",
-      "content": "An array of column definitions for the table."
+      "content": "Start-align textual data.\n\nSimilar to a paragraph of text, textual data should be start-aligned within a table (left-aligned in LTR languages, right-aligned in RTL languages). Never use center alignment."
     },
     {
       "type": "guideline",
-      "content": "An array of row data for the table."
+      "content": "Right align numerical data.\n\nNumerical data should generally be right-aligned for ease of scanning and comparing. This alignment typically does NOT reverse in RTL languages because: Numbers are written left-to-right even in RTL languages (e.g., Arabic numerals) Right-alignment ensures decimal places and digits line up vertically for comparison Exception: Use start-alignment (left in LTR, right in RTL) when numbers are arbitrary identifiers, known as \"nominal numbers,\" which can't be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). These behave like text. Column headers follow the alignment of their data."
     },
     {
       "type": "guideline",
-      "content": "Column dividers help organize table content and aid users in parsing related data. You can apply dividers selectively to group related columns—for example, separating user information from action columns, or grouping metadata fields together. Use dividers sparingly to avoid visual clutter."
+      "content": "Use tabular numbers for numerical data.\n\nWhen users need to compare numerical values, use tabular (monospaced) and lining (not old style) numbers to make it easier. These features are supported by Adobe Clean via the OpenType panel in Illustrator or via the CSS font feature settings."
     },
     {
       "type": "guideline",
-      "content": "All tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row."
+      "content": "Respect vertical alignment.\n\nAll content should be centered vertically within the row to offer the right visual balance."
     },
     {
-      "type": "guideline",
-      "content": "Similar to a paragraph of text, textual data should be start-aligned within a table (left-aligned in LTR languages, right-aligned in RTL languages). Never use center alignment."
+      "type": "do-dont",
+      "content": "Don't use zebra stripes",
+      "dont": "Tables use row dividers, hover states, and selection highlighting to help users track data. Zebra striping adds visual noise without improving usability."
     },
     {
       "type": "guideline",
-      "content": "Numerical data should generally be right-aligned for ease of scanning and comparing. This alignment typically does NOT reverse in RTL languages because:"
+      "content": "Use column dividers sparingly.\n\nColumn dividers are optional decorations that can help organize table content and create groups of data. Only use these when necessary, and don't add them to every column."
     },
     {
       "type": "guideline",
-      "content": "Exception: Use start-alignment (left in LTR, right in RTL) when numbers are arbitrary identifiers, known as \"nominal numbers,\" which can't be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). These behave like text."
+      "content": "Use an en dash (–) for missing values.\n\nWhen there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values."
     },
     {
       "type": "guideline",
-      "content": "Column headers follow the alignment of their data."
+      "content": "RTL.\n\nIn right‑to‑left languages, the table layout is mirrored. The columns run from right to left, and the text alignment within each column is reversed. Keep in mind that some content, such as file extensions and email addresses, does not change direction or translate."
     },
     {
       "type": "guideline",
-      "content": "All content should be centered vertically within the row to offer the right visual balance."
+      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into an item that has a tooltip associated with it (e.g., an icon) shows the tooltip.EscHides the tooltip."
     },
     {
       "type": "guideline",
-      "content": "Tables use row dividers, hover states, and selection highlighting to help users track data. Zebra striping adds visual noise without improving usability."
+      "content": "Cursor guidelines.\n\nCursor Description PointerIf the trigger is a button or link, or a focus-only element (like an info icon that shows a tooltip on hover), use the pointer cursor.Default (Arrow)If the trigger is an icon that is not clickable, use the default cursor.PointerIf the tooltip has a link, use the pointer cursor when interacting with the link."
     },
     {
       "type": "guideline",
-      "content": "Column dividers are optional decorations that can help organize table content and create groups of data. Only use these when necessary, and don't add them to every column."
-    },
-    {
-      "type": "guideline",
-      "content": "When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values."
+      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content1.1.1ANon‑text elements—such as icons used in tooltips and icons that trigger tooltips—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose1.3.1, 1.3.6A, AAATooltips should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Use of color1.4.1AColor is never used as the sole way to convey meaning in tooltips. Tooltips use color to reinforce their meaning, but every tooltip also includes a clear text label that communicates purpose.Text contrast minimums1.4.3AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.Resize text1.4.4AATooltips should be built in such a way that they can be resized without assistive technology up to 200%.Visual presentation1.4.8AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast1.4.11AAThe visual presentation of icons and various states have a contrast ratio of at least 3:1.Text spacing1.4.12AALine height of text is at least 1.5x the font size in wrapped tooltips. 2. Operable RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
     }
   ],
   "options": {
@@ -96,17 +81,7 @@
       "type": "string",
       "default": "m",
       "description": "Controls the density of table rows.",
-      "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
-      ]
+      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
     },
     "hideHeader": {
       "type": "boolean",
@@ -135,15 +110,9 @@
       "type": "string",
       "default": "regular",
       "values": [
-        {
-          "value": "compact"
-        },
-        {
-          "value": "regular"
-        },
-        {
-          "value": "spacious"
-        }
+        { "value": "compact" },
+        { "value": "regular" },
+        { "value": "spacious" }
       ]
     },
     "isQuiet": {
@@ -240,34 +209,18 @@
       "name": "header-row-checkbox",
       "description": "Select-all checkbox within the column header row."
     },
-    {
-      "name": "section-header"
-    }
+    { "name": "section-header" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "grid",
     "intents": ["select", "navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate", "select-all"],
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/tabs.json

@@ -16,61 +16,59 @@
     },
     {
       "type": "guideline",
-      "content": "Tabs organize related content into multiple sections. They allow navigation between views while keeping the content grouped under a single context. Use when content can be divided logically into categories within the same view."
+      "content": "Animation.\n\nWhen a user selects a tab item, the selection indicator slides along the base to the newly selected tab. The text and icon colors of both tabs fade during the transition. The tab view changes immediately upon selection."
     },
     {
       "type": "guideline",
-      "content": "Tabs can be horizontal or vertical. By default, tabs are horizontal and should be used when horizontal space is limited."
+      "content": "Tab overflow.\n\nWhen there are too many tabs to fit horizontally across the viewport, display the tabs component as a quiet picker. When appropriate, you can also use alternative overflow methods such as horizontal scrolling."
     },
     {
       "type": "guideline",
-      "content": "Use vertical tabs when horizontal space is more generous or when the list of sections is too long for a horizontal layout. Vertical tabs can also serve as anchor links, providing shortcuts to sections on a single page. In this case, tab items link to on-page anchors rather than opening a new tab view."
+      "content": "Too many tabs.\n\nWhen there are too many tabs to fit horizontally across the viewport, you can either allow horizontal scrolling or place all tab items in a quiet picker. Do not truncate multiple tab items just to make them fit horizontally."
+    },
+    {
+      "type": "do-dont",
+      "content": "Don't use tabs for varying levels of importance",
+      "dont": "Use tabs to organize sections of equal importance. Groups of content under each tab item should not be of different natures. Don't use tabs to replace a flow; use pagination components instead."
     },
     {
       "type": "guideline",
-      "content": "When a user selects a tab item, the selection indicator slides along the base to the newly selected tab. The text and icon colors of both tabs fade during the transition. The tab view changes immediately upon selection."
+      "content": "Nested tabs.\n\nAvoid using multiple levels of tabs. Instead, consider other organizational patterns such as side navigation, accordions or collapsible panels. Nesting tabs is acceptable only when there is a clear separation between the two tab experiences or when different orientations are used. Do not compromise hierarchy by using the same tab variations or orientations."
     },
     {
       "type": "guideline",
-      "content": "When there are too many tabs to fit horizontally across the viewport, display the tabs component as a quiet picker. When appropriate, you can also use alternative overflow methods such as horizontal scrolling."
+      "content": "Use icons consistently.\n\nDon't mix the use of icons in tabs. Navigation controls require a clear spacial relationship to one another, and mixing the use of icons can dramatically impact the visual balance and presence for each tab item. Keep in mind that if one tab item has an icon, then they all should have an icon."
     },
     {
       "type": "guideline",
-      "content": "When there are too many tabs to fit horizontally across the viewport, you can either allow horizontal scrolling or place all tab items in a quiet picker. Do not truncate multiple tab items just to make them fit horizontally."
+      "content": "Use tooltips for icon only tabs.\n\nIt can often be hard to identify the meaning of icon-only tabs. An icon-only tab should always show a tooltip displaying the label on hover."
     },
     {
       "type": "guideline",
-      "content": "Use tabs to organize sections of equal importance. Groups of content under each tab item should not be of different natures. Don't use tabs to replace a flow; use pagination components instead."
+      "content": "RTL horizontal tabs.\n\nFor RTL (right-to-left) languages, the layout of the horizontal tabs is mirrored. The tabs are right-aligned and their order is reverse."
     },
     {
       "type": "guideline",
-      "content": "Avoid using multiple levels of tabs. Instead, consider other organizational patterns such as side navigation, accordions or collapsible panels. Nesting tabs is acceptable only when there is a clear separation between the two tab experiences or when different orientations are used."
+      "content": "RTL vertical tabs.\n\nFor RTL (right-to-left) languages, the layout of the vertical tabs is mirrored. The divider and selection indicator should be placed on the right, as they are meant to visually anchor the text labels."
     },
     {
       "type": "guideline",
-      "content": "Do not compromise hierarchy by using the same tab variations or orientations."
+      "content": "Keyboard interactions.\n\nThere are two possible behaviors for manipulating tabs with the keyboard: manual or automatic activation. Typically, manual activation of tabs is only necessary when content cannot be displayed instantly (i.e., not all the panel content is present in the DOM.) For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. Option 1: Manual activation Key Interaction TabMoves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence.Left ArrowMoves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item.Right ArrowMoves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item.Space or EnterActivates the tab item in focus.Home (optional)Moves focus to the first tab item.End (optional)Moves focus to the last tab item.Delete (optional)When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to the tab item following one that was closed. Option 2: Automatic activation Key Interaction TabMoves focus into the tabs component and places focus on the selected tab item. If the tabs component is already in focus, moves focus to the next element in the page tab sequence.Left ArrowMoves focus to the previous tab item and automatically activates it. If focus is on the first tab item, moves focus to the last tab item.Right ArrowMoves focus to the next tab item and automatically activates it. If focus is on the last tab item, moves focus to the first tab item.Home (optional)Moves focus to the first tab item and automatically activates it.End (optional)Moves focus to the last tab item and automatically activates it.Delete (optional)When deletion is allowed, Delete closes the currently activated tab item. If any tab items remain, moves focus to and activates the tab item following one that was closed."
     },
     {
       "type": "guideline",
-      "content": "Don’t mix the use of icons in tabs. Navigation controls require a clear spacial relationship to one another, and mixing the use of icons can dramatically impact the visual balance and presence for each tab item. Keep in mind that if one tab item has an icon, then they all should have an icon."
+      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for interactive elements including tabs."
     },
     {
       "type": "guideline",
-      "content": "It can often be hard to identify the meaning of icon-only tabs. An icon-only tab should always show a tooltip displaying the label on hover."
+      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon-text elements, such as icons used in tabs, must provide a text alternative that communicates the tab's purpose. All tabs, especially icon-only tabs, need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAATabs should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AATabs are available in both vertical and horizontal orientations.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements.Contrast 1.4.3 AAThe visual presentation of text has a contrast ratio of at least 4.5:1.Resize text 1.4.4 AATabs should be built in such a way that they can be resized without assistive technology up to 200%.Visual presentation 1.4.8 AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast 1.4.11 AAThe visual presentation of icons and various states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size. 2. Operable RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "items": {
       "type": "array",
@@ -109,18 +107,13 @@
             "default": false,
             "description": "This overrides density and is only applicable to horizontal tabs."
           },
-          "isEmphasized": {
-            "type": "boolean",
-            "default": false
-          },
+          "isEmphasized": { "type": "boolean", "default": false },
           "alignment": {
             "type": "string",
             "enum": ["start", "center"],
             "default": "start"
           },
-          "selectedItem": {
-            "description": "(list of available items)"
-          },
+          "selectedItem": { "description": "(list of available items)" },
           "keyboardActivation": {
             "type": "string",
             "enum": ["manual", "automatic"],
@@ -130,9 +123,7 @@
       }
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [
     {
       "token": "tab-item-to-tab-item-compact-horizontal-medium",
@@ -148,16 +139,8 @@
     "focusable": true,
     "keyboardIntents": ["navigate-items"],
     "wcag": [
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/tag-field.json

@@ -67,81 +67,35 @@
     "size": {
       "type": "string",
       "default": "m",
-      "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
-      ]
+      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
     },
     "style": {
       "type": "string",
       "default": "keyword",
       "values": [
-        {
-          "value": "keyword"
-        },
-        {
-          "value": "icon"
-        },
-        {
-          "value": "thumbnail"
-        },
-        {
-          "value": "avatar"
-        }
+        { "value": "keyword" },
+        { "value": "icon" },
+        { "value": "thumbnail" },
+        { "value": "avatar" }
       ]
     },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "default": false
-    }
+    "isDisabled": { "type": "boolean", "default": false },
+    "hideLabel": { "type": "boolean", "default": false }
   },
   "states": [
-    {
-      "name": "hover",
-      "trigger": "interaction"
-    },
-    {
-      "name": "focus-+-hover",
-      "trigger": "prop"
-    },
-    {
-      "name": "focus-+-not-hover",
-      "trigger": "prop"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    }
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "focus-+-hover", "trigger": "prop" },
+    { "name": "focus-+-not-hover", "trigger": "prop" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["input", "select"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate"],
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/tag-group.json

@@ -16,96 +16,63 @@
     },
     {
       "type": "guideline",
-      "content": "Tag groups organize multiple tags into a single visual group. They’re used to categorize content like keywords or names that describe an item or search query. Tags within the group can be added, removed, or styled to reflect different types of content."
+      "content": "Tag group overflow.\n\nWhen horizontal space is limited in a tag group, the individual tags wrap to form another line."
     },
     {
       "type": "guideline",
-      "content": "Tag groups come in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
+      "content": "Focus between tags.\n\nIf the order of tags within the group matters, the user must be able to click or use keyboard focus between tags to add more."
     },
     {
       "type": "guideline",
-      "content": "Labels can be placed either on top or on the side of a group of tags. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited."
+      "content": "Allow bulk actions.\n\nIn some instances, it's possible to add an action next to a group of tags to provide a way to easily act on the entire group at once. Reveal the action only when more than one tag is displayed."
     },
     {
-      "type": "guideline",
-      "content": "The label of the tag group can be hidden if the context for the tags is sufficient without the title — for example, when the page title or section title applies to the group of tags."
-    },
-    {
-      "type": "guideline",
-      "content": "Define an action label to include a link-style button to perform an action on the entire group of tags. This button always appears at the end of the tag group."
+      "type": "do-dont",
+      "content": "Avoid disabling a large group of tags",
+      "dont": "In cases where users cannot interact with a large group of tags, consider hiding the group and its broader construct rather than disabling all the individual tags."
     },
     {
       "type": "guideline",
-      "content": "When horizontal space is limited in a tag group, the individual tags wrap to form another line."
+      "content": "RTL.\n\nFor RTL (right-to-left) languages, the group of tags is mirrored. The first tag will appear on the left instead of the right and flow from there."
     },
     {
       "type": "guideline",
-      "content": "If the order of tags within the group matters, the user must be able to click or use keyboard focus between tags to add more."
+      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of tags places the focus on the first tag (only one tag receives the keyboard focus at a time).Arrow keysMoves focus through the group of tags.Page Up or Page DownMoves focus to the previous or next tag in the group (last becomes first, and first becomes last).Home or EndMoves focus to the first or last tag in the group.Backspace or DeleteRemoves the tag in focus from the group.SpaceIf the tag is selectable, the space bar will toggle selection.Ctrl / Cmd + ASelects all tags."
     },
     {
       "type": "guideline",
-      "content": "In some instances, it's possible to add an action next to a group of tags to provide a way to easily act on the entire group at once. Reveal the action only when more than one tag is displayed."
+      "content": "Cursor guidelines.\n\nCursor Description Default (Arrow)Use the default cursor for non-interactive tags.PointerUse the pointer cursor for interactive tags, such as tags that are removable or can be used to filter content.Grab handUse the grab hand cursor when the order of tags can be rearranged.Grab fistUse the grab fist cursor when holding a tag."
     },
     {
       "type": "guideline",
-      "content": "In cases where users cannot interact with a large group of tags, consider hiding the group and its broader construct rather than disabling all the individual tags."
+      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon‑text elements—such as icons used in tags—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAATags should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.Text contrast 1.4.3 AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.Resize text 1.4.4 AATag groups should be built in such a way that they can be resized without assistive technology up to 200%.Non-text contrast 1.4.11 AAThe visual presentation of icons and various states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size when wrapped. 2. Operable RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
     }
   ],
   "options": {
     "size": {
       "type": "string",
       "default": "m",
-      "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
-      ]
+      "values": [{ "value": "s" }, { "value": "m" }, { "value": "l" }]
     },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [
-        {
-          "value": "top"
-        },
-        {
-          "value": "side"
-        }
-      ]
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "default": false
+      "values": [{ "value": "top" }, { "value": "side" }]
     },
+    "hideLabel": { "type": "boolean", "default": false },
     "actionLabel": {
       "type": "string",
       "description": "If undefined, this button does not appear."
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["select"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate"],
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }