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

package/components/switch.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/switch/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Switch",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,100 +23,141 @@
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Switches toggle an individual option on or off. They're typically used to activate or deactivate a specific setting."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the label is too long for the horizontal space available, it wraps to form another line."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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)."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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)."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "When the label is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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)."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus to the next item or group of items.Shift + TabMoves focus to the previous item or group of items.Space or EnterToggles the switch between on and off."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for interactive elements in all states."
+      "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."
     },
     {
       "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, AAASwitches 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 ASwitches 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 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 AASwitches 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 the label is 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."
+      "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)."
     }
   ],
   "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,64 +16,79 @@
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "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": "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": "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."
+      "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)."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "If true, table columns can be sorted."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "An array of column definitions for the table."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "An array of row data for the table."
     },
     {
       "type": "guideline",
-      "content": "Respect vertical alignment.\n\nAll content should be centered vertically within the row to offer the right visual balance."
+      "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": "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": "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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": "guideline",
-      "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."
+      "content": "Numerical data should generally be right-aligned for ease of scanning and comparing. This alignment typically does NOT reverse in RTL languages because:"
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Column headers follow the alignment of their data."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "All content should be centered vertically within the row to offer the right visual balance."
     },
     {
       "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 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."
+      "content": "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": "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."
     }
   ],
   "options": {
@@ -81,7 +96,17 @@
       "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",
@@ -110,9 +135,15 @@
       "type": "string",
       "default": "regular",
       "values": [
-        { "value": "compact" },
-        { "value": "regular" },
-        { "value": "spacious" }
+        {
+          "value": "compact"
+        },
+        {
+          "value": "regular"
+        },
+        {
+          "value": "spacious"
+        }
       ]
     },
     "isQuiet": {
@@ -209,18 +240,34 @@
       "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,6 +9,19 @@
     "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",
@@ -16,59 +29,61 @@
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Tabs can be horizontal or vertical. By default, tabs are horizontal and should be used when horizontal space is limited."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Do not compromise hierarchy by using the same tab variations or orientations."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for interactive elements including tabs."
+      "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."
     },
     {
       "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 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."
+      "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."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
     "items": {
       "type": "array",
@@ -107,13 +122,18 @@
             "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"],
@@ -123,7 +143,9 @@
       }
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "tokenBindings": [
     {
       "token": "tab-item-to-tab-item-compact-horizontal-medium",
@@ -139,8 +161,16 @@
     "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"
+      }
     ]
   }
 }