@adobe/spectrum-design-data 3.3.0 → 3.5.0

package/components/switch.json

@@ -9,13 +9,6 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/switch/"
   },
-  "implementations": [
-    {
-      "platform": "web",
-      "componentName": "Switch",
-      "package": "@react-spectrum/s2"
-    }
-  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -23,141 +16,111 @@
     },
     {
       "type": "guideline",
-      "content": "Switches toggle an individual option on or off. They're typically used to activate or deactivate a specific setting."
+      "content": "Keyboard focus.\n\nA switch can be navigated using a keyboard. The keyboard focus state takes the switch's visual hover state and adds a blue ring to the switch in focus."
     },
     {
       "type": "guideline",
-      "content": "Switch should always have a label for accessibility and clear comprehension. When the label is not defined, a switch becomes standalone. Standalone switches should only be used when their connection to other components is clear and they give sufficient context — for example, in application panels."
+      "content": "Text overflow.\n\nWhen the label is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Switches can either be selected or not selected. They cannot be in an indeterminate state (unlike checkboxes). When a switch represents multiple values that are not identical, the switch should appear as not selected."
+      "content": "When to use an emphasized switch?\n\nEmphasized switches are optimal for forms, settings, and other scenarios where the switches need to be noticed. Not emphasized switches are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
     },
     {
       "type": "guideline",
-      "content": "Switch come in four different sizes: small, medium, large, and extra-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": "When to use a standalone switch?\n\nStandalone switches should be used in situations where the context is clear without an associated text label. For example, a switch located at the top of a panel next to the panel's title makes it clear that the switch will enable/disable the panel options."
     },
     {
       "type": "guideline",
-      "content": "By default, switches are not emphasized (gray). This version is optimal for when the switch is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content."
+      "content": "Switch, checkbox or radio button?\n\nSwitches are best for communicating activation (e.g., turning a setting on or off). Checkboxes are best for communicating selection (e.g., selecting multiple items from a list). Radio buttons are best when only one option can be selected at a time from a set (e.g., choosing one preference or mode)."
     },
     {
       "type": "guideline",
-      "content": "The emphasized (blue) version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a switch needs to be noticed."
+      "content": "Representing mixed values.\n\nWhen a switch represents multiple values that are not identical, the switch should appear as not selected. Any subsequent click or tap should select the switch, and update all values to be selected. Another click or tap after that should deselect the switch, and update all values to be not selected."
     },
     {
       "type": "guideline",
-      "content": "A switch in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later."
+      "content": "No partial state.\n\nSwitches can only be on or off. Indeterminate switches don't exist in accessibility APIs, so it's not possible to make an indeterminate switch accessible. If you need to show a partial state, use a checkbox instead of a switch. When a parent switch represents a group of switches, it should be turned off unless all of the switches are on (turning the parent switch on turns all of the switches on)."
     },
     {
       "type": "guideline",
-      "content": "Switches have a read-only option for when they’re in the disabled state but still need their labels to be shown. This allows for content to be copied, but not interacted with or changed."
+      "content": "A label for a switch describes a setting that is either on or off — two mutually exclusive states. Use a short description (1-3 words) of the setting. Try to include all necessary information in the label, but it's OK to add clarifying text after to supplement if needed. Keep in mind that when a user takes an action on a switch, that action will often affect other content in an experience. Think systematically to ensure that all labels are paralleling each other in their writing."
     },
     {
       "type": "guideline",
-      "content": "A switch can be navigated using a keyboard. The keyboard focus state takes the switch’s visual hover state and adds a blue ring to the switch in focus."
+      "content": "Consider if the label should use a verb or a noun.\n\nA switch shows a state of persistence for something — a noun or a proper noun — as either being \"on\" or \"off.\" A verb isn't usually needed to communicate the thing being turned on or off, but there can be instances where phrasing the label as a verb can aid in clarity. Just try to keep switches consistently using either verbs or nouns if you have more than one of them in a single view."
     },
     {
       "type": "guideline",
-      "content": "When the label is too long for the horizontal space available, it wraps to form another line."
+      "content": "Avoid using verb phrases related to a state of activity.\n\nAvoid using verb phrases related to activity states in a switch label, such as \"turn on\" or \"turn off.\" A switch is naturally either in a state of being on or off — active or inactive — so repeating in the label that something is \"on\" or \"off\" is redundant and clutters an interface."
     },
     {
       "type": "guideline",
-      "content": "Emphasized switches are optimal for forms, settings, and other scenarios where the switches need to be noticed. Not emphasized switches are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas."
+      "content": "Use a neutral tone.\n\nBecause switches are used for controls and utility, their labels are written in a neutral, utilitarian way. There's no need for overly celebratory language."
     },
     {
       "type": "guideline",
-      "content": "Standalone switches should be used in situations where the context is clear without an associated text label. For example, a switch located at the top of a panel next to the panel's title makes it clear that the switch will enable/disable the panel options."
+      "content": "Use \"you\" or \"your\" if needed to refer to the user directly.\n\nDescribe switches objectively by using only the names of features or settings, or what those features and settings will do. In the case where it's necessary to refer to a user directly, do so sparingly and use the second person \"you/your.\" We aim to be conversational and talk to the user — not as them."
     },
     {
       "type": "guideline",
-      "content": "Switches are best for communicating activation (e.g., turning a setting on or off). Checkboxes are best for communicating selection (e.g., selecting multiple items from a list). Radio buttons are best when only one option can be selected at a time from a set (e.g., choosing one preference or mode)."
+      "content": "Use sentence case.\n\nFollowing Adobe's UX writing style, labels for switches are written in sentence case unless they contain words that are branded terms."
     },
     {
       "type": "guideline",
-      "content": "When a switch represents multiple values that are not identical, the switch should appear as not selected. Any subsequent click or tap should select the switch, and update all values to be selected. Another click or tap after that should deselect the switch, and update all values to be not selected."
+      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the switch is mirrored. The track is placed on the right side of the text and the handle is positioned to the left when the switch is turned on."
     },
     {
       "type": "guideline",
-      "content": "Switches can only be on or off. Indeterminate switches don’t exist in accessibility APIs, so it’s not possible to make an indeterminate switch accessible. If you need to show a partial state, use a checkbox instead of a switch."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus to the next item or group of items. Shift + Tab Moves focus to the previous item or group of items. Space or Enter Toggles the switch between on and off."
     },
     {
       "type": "guideline",
-      "content": "When a parent switch represents a group of switches, it should be turned off unless all of the switches are on (turning the parent switch on turns all of the switches on)."
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use the pointer cursor for interactive elements in all states."
+    },
+    {
+      "type": "guideline",
+      "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 Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Switches should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized. Use of color 1.4.1 A Switches never rely on color alone to convey meaning. The active state uses blue to reinforce “on,” and the handle shifts position to clearly show whether the switch is on or off. Text contrast minimums 1.4.3 AA Large 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 AA Switches should be built in such a way that they can be resized without assistive technology up to 200%. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when the label is wrapped. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus 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, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Switch",
+      "package": "@react-spectrum/s2"
     }
   ],
   "options": {
-    "label": {
-      "type": "string"
-    },
-    "isSelected": {
-      "type": "boolean",
-      "default": false
-    },
+    "label": { "type": "string" },
+    "isSelected": { "type": "boolean", "default": false },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
       ]
     },
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "isReadOnly": {
-      "type": "boolean",
-      "default": false
-    }
+    "isEmphasized": { "type": "boolean", "default": false },
+    "isDisabled": { "type": "boolean", "default": false },
+    "isReadOnly": { "type": "boolean", "default": false }
   },
   "states": [
-    {
-      "name": "hover",
-      "trigger": "interaction"
-    },
-    {
-      "name": "down",
-      "trigger": "interaction"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    }
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "switch",
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["activate"],
     "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/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 Tab Tabbing into an item that has a tooltip associated with it (e.g., an icon) shows the tooltip. Esc Hides 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 Pointer If 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. Pointer If 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 content 1.1.1 A Non‑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 purpose 1.3.1, 1.3.6 A, AAA Tooltips should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized. Use of color 1.4.1 A Color 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 minimums 1.4.3 AA Large 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 AA Tooltips should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA The 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 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size in wrapped tooltips. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus 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, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard 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

@@ -9,19 +9,6 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/tabs/"
   },
-  "implementations": [
-    {
-      "platform": "web",
-      "componentName": "Tabs",
-      "package": "@react-spectrum/s2"
-    },
-    {
-      "platform": "web",
-      "componentName": "Tabs",
-      "importPath": "@adobe/spectrum-wc/components/tabs",
-      "notes": "Spectrum 2 web component custom element: swc-tabs."
-    }
-  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -29,61 +16,72 @@
     },
     {
       "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 Tab Moves 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 Arrow Moves focus to the previous tab item. If focus is on the first tab item, moves focus to the last tab item. Right Arrow Moves focus to the next tab item. If focus is on the last tab item, moves focus to the first tab item. Space or Enter Activates 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 Tab Moves 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 Arrow Moves 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 Arrow Moves 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 Pointer Use 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 A Non-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, AAA Tabs 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 AA Tabs are available in both vertical and horizontal orientations. Use of color 1.4.1 A Color is not used as a means to convey information or distinguish elements. Contrast 1.4.3 AA The visual presentation of text has a contrast ratio of at least 4.5:1. Resize text 1.4.4 AA Tabs should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA The 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 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus 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, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Tabs",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Tabs",
+      "importPath": "@adobe/spectrum-wc/components/tabs",
+      "notes": "Spectrum 2 web component custom element: swc-tabs."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "items": {
       "type": "array",
@@ -122,18 +120,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"],
@@ -143,9 +136,7 @@
       }
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [
     {
       "token": "tab-item-to-tab-item-compact-horizontal-medium",
@@ -161,16 +152,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" }
     ]
   }
 }