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

package/components/segmented-control.json

@@ -9,6 +9,13 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/segmented-control/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "SegmentedControl",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,63 +23,81 @@
     },
     {
       "type": "guideline",
-      "content": "Mutually exclusive items.\n\nSegmented controls have one item selected by default at all times, and are mutually exclusive. This means selecting one item automatically deselects the others."
+      "content": "Segmented controls display a group of buttons where only one can be selected at a time. They're ideal for toggling between layouts like a list, grid, or map. Avoid using them for navigation or triggering actions."
+    },
+    {
+      "type": "guideline",
+      "content": "Segmented controls should have between two and five items."
+    },
+    {
+      "type": "guideline",
+      "content": "The identifier of the currently selected item."
     },
     {
       "type": "guideline",
-      "content": "Selection.\n\nClicking on a segmented control item immediately performs the view change."
+      "content": "By default, segmented controls should include a track. The track style is justified within the parent container. Segmented controls without a track are left-aligned in left-to-right (LTR) languages."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the segmented control item text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover."
+      "content": "Segmented controls without a track are left aligned in left-to-right languages."
     },
     {
       "type": "guideline",
-      "content": "Tooltips for hidden labels.\n\nIcon-only or truncated label segmented controls can be hard to identify. They should display a tooltip after a brief hover, showing the name and a keyboard shortcut, if applicable."
+      "content": "If true, the control takes up the full width of its container. Only horizontal segmented controls support fluid behavior."
     },
     {
       "type": "guideline",
-      "content": "Segmented controls are for view switching.\n\nSegmented controls are only meant to be used to change the way you view information on a page. They should not be used for navigating, filtering content, or taking actions."
+      "content": "Segmented controls can be either horizontal or vertical. By default, segmented controls are horizontal."
     },
     {
       "type": "guideline",
-      "content": "Segmented controls vs. similar components.\n\nUse a segmented control when the primary goal is to switch views of content. Tabs are reserved for navigation. Action groups are for triggering actions. Tag groups are for filtering content."
+      "content": "Segmented controls have one item selected by default at all times, and are mutually exclusive. This means selecting one item automatically deselects the others."
     },
     {
       "type": "guideline",
-      "content": "Use icons only when they have a clear meaning.\n\nIt may not make sense in every case to include icons. If the items are too complicated to convey in an icon, don't force it. Keep in mind that if one segmented control has an icon, then they all should have an icon."
+      "content": "Clicking on a segmented control item immediately performs the view change."
     },
     {
       "type": "guideline",
-      "content": "Keep segmented control groups to 5 items or less.\n\nSegmented control groups work best with 2 to 5 items. If your component needs more than 5 items, consider using a dropdown or radio button group instead."
+      "content": "When the segmented control item text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover."
     },
     {
-      "type": "do-dont",
-      "content": "Don't use segmented control as actions, to make selections, or to navigate",
-      "dont": "Segmented control groups are meant for switching views on a page. To navigate to a different page or progressively disclose different content, use tabs instead. To perform actions or make a selection, use action groups."
+      "type": "guideline",
+      "content": "Icon-only or truncated label segmented controls can be hard to identify. They should display a tooltip after a brief hover, showing the name and a keyboard shortcut, if applicable."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nThe order of the buttons in the segmented control are reversed in RTL languages. If it has icons with text, the icons are placed to the right of the text, and directional icons like arrows or chevrons are flipped horizontally."
+      "content": "Segmented controls are only meant to be used to change the way you view information on a page. They should not be used for navigating, filtering content, or taking actions."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus onto or off of the button.Space or EnterExecutes the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller."
+      "content": "Use a segmented control when the primary goal is to switch views of content. Tabs are reserved for navigation. Action groups are for triggering actions. Tag groups are for filtering content."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components."
+      "content": "It may not make sense in every case to include icons. If the items are too complicated to convey in an icon, don’t force it. Keep in mind that if one segmented control 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 buttons—must provide a text alternative that communicates the button’s purpose. All buttons, especially icon‑only buttons, 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, AAAButtons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized.Use of color 1.4.1 AColor is never used as the sole way to convey meaning in buttons. While negative buttons do use red to reinforce their purpose, every button also includes a clear text label that communicates the action it performs.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 AAButtons 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 Requirement Criterion Level 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": "Segmented control groups work best with 2 to 5 items. If your component needs more than 5 items, consider using a dropdown or radio button group instead."
+    },
+    {
+      "type": "guideline",
+      "content": "Segmented control groups are meant for switching views on a page. To navigate to a different page or progressively disclose different content, use tabs instead. To perform actions or make a selection, use action groups."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
     "isFluid": {
       "type": "boolean",
@@ -82,7 +107,14 @@
     "alignment": {
       "type": "string",
       "default": "start",
-      "values": [{ "value": "start" }, { "value": "center" }]
+      "values": [
+        {
+          "value": "start"
+        },
+        {
+          "value": "center"
+        }
+      ]
     },
     "hideTracker": {
       "type": "boolean",
@@ -96,7 +128,14 @@
     "keyboardActivation": {
       "type": "string",
       "default": "manual",
-      "values": [{ "value": "manual" }, { "value": "automatic" }]
+      "values": [
+        {
+          "value": "manual"
+        },
+        {
+          "value": "automatic"
+        }
+      ]
     },
     "items": {
       "type": "array",
@@ -129,14 +168,24 @@
       }
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "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/select-box.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/select-box/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "SelectBox",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,63 +23,108 @@
     },
     {
       "type": "guideline",
-      "content": "Minimum and maximum size.\n\nMinimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."
+      "content": "Select boxes allow users to choose options in a workflow. Both single-select and multi-select versions use checkboxes to show selection. Multi-select boxes display unchecked checkboxes by default to signal that multiple choices are allowed. Single-select boxes only show an unchecked checkbox on hover. If showCheckbox is false, selection is only shown using the dark border."
+    },
+    {
+      "type": "guideline",
+      "content": "A select box in a disabled state shows that the items within the group exist, but are not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an option may become available later. Individual boxes may be disabled or the entire group may be disabled."
+    },
+    {
+      "type": "guideline",
+      "content": "Illustrations are optional but recommended and included by default."
+    },
+    {
+      "type": "guideline",
+      "content": "A label is required in select boxes. It acts as the title of the select box and explains its action or purpose.. Ideally, the label should be kept concise, even in the horizontal orientation."
+    },
+    {
+      "type": "guideline",
+      "content": "Body is optional in select boxes. If no value is entered for the body, then it will not appear in the component. Body is usually reserved for the horizontal version of select boxes."
+    },
+    {
+      "type": "guideline",
+      "content": "A select box is vertical by default, which works best when metadata is limited to a short title, with or without an illustration. The horizontal orientation is recommended when the select box includes longer-form metadata."
+    },
+    {
+      "type": "guideline",
+      "content": "Minimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."
     },
     {
       "type": "guideline",
-      "content": "Consistent sizing.\n\nAll select boxes should be the same size as one another. Keep metadata concise, and make the size of the box large enough to accommodate longer text when translated to other languages."
+      "content": "All select boxes should be the same size as one another. Keep metadata concise, and make the size of the box large enough to accommodate longer text when translated to other languages."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the title of the select box is too long for the available horizontal space, it wraps to another line. Wrapped text should not affect the size of an individual select box. Each box in a group should have enough space to allow for longer, localized text to fit as necessary."
+      "content": "When the title of the select box is too long for the available horizontal space, it wraps to another line. Wrapped text should not affect the size of an individual select box. Each box in a group should have enough space to allow for longer, localized text to fit as necessary."
     },
     {
       "type": "guideline",
-      "content": "Selection.\n\nClicking a select box does not immediately move to the next step in the sequence. After making a selection, the user must initiate the next step by choosing a button or similar component outside the select box group."
+      "content": "Clicking a select box does not immediately move to the next step in the sequence. After making a selection, the user must initiate the next step by choosing a button or similar component outside the select box group."
     },
     {
       "type": "guideline",
-      "content": "Keyboard focus.\n\nA select box group can be navigated using a keyboard. The keyboard focus state takes the button's visual hover state and adds a blue ring to the button in focus."
+      "content": "A select box group can be navigated using a keyboard. The keyboard focus state takes the button’s visual hover state and adds a blue ring to the button in focus."
     },
     {
       "type": "guideline",
-      "content": "Use illustrations only when they have a clear meaning.\n\nIllustrations should be used when they help clarify the content. If the items are too complex to represent visually, it may be better to omit them. For consistency, if one select box includes an illustration, all select boxes in the group should include one."
+      "content": "Illustrations should be used when they help clarify the content. If the items are too complex to represent visually, it may be better to omit them. For consistency, if one select box includes an illustration, all select boxes in the group should include one."
     },
     {
       "type": "guideline",
-      "content": "Keep select box groups to 9 items or less.\n\nSelect box groups work best with 3 to 9 items. If your experience needs more than 9 items, consider using a dropdown, checkboxes, or radio button group instead."
+      "content": "Select box groups work best with 3 to 9 items. If your experience needs more than 9 items, consider using a dropdown, checkboxes, or radio button group instead."
     },
     {
-      "type": "do-dont",
-      "content": "Don't use select boxes as actions",
-      "dont": "Select boxes are used to choose an item from a group. If clicking an item is meant to immediately trigger an action, use an action group instead."
+      "type": "guideline",
+      "content": "Select boxes are used to choose an item from a group. If clicking an item is meant to immediately trigger an action, use an action group instead."
     },
     {
       "type": "guideline",
-      "content": "Use consistent sizing.\n\nAll select boxes in a group should be the same size to maintain visual consistency and usability."
+      "content": "All select boxes in a group should be the same size to maintain visual consistency and usability."
     },
     {
-      "type": "do-dont",
-      "content": "Don't use radio buttons in select boxes",
-      "dont": "Select boxes use a checkbox to indicate both single- and multi-selection. Don't use radio buttons for single-selection."
+      "type": "guideline",
+      "content": "Select boxes use a checkbox to indicate both single- and multi-selection. Don’t use radio buttons for single-selection."
     },
     {
       "type": "guideline",
-      "content": "Checkbox vs. highlight selection.\n\nSome cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn't make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present."
+      "content": "Some cases may make more sense for the user to select one or a few options in a group of select boxes, but if the use case doesn’t make sense to be checking a selection, showCheckbox can be false and the highlight style can be used instead. There is no visual differentiation between single- and multi-select behaviors when checkboxes are not present."
     }
   ],
   "options": {
-    "label": { "type": "string" },
+    "label": {
+      "type": "string"
+    },
     "orientation": {
       "type": "string",
       "default": "vertical",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
+    },
+    "body": {
+      "type": "string"
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideIllustration": {
+      "type": "boolean",
+      "default": false
+    },
+    "showCheckbox": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
     },
-    "body": { "type": "string" },
-    "isSelected": { "type": "boolean", "default": false },
-    "hideIllustration": { "type": "boolean", "default": false },
-    "showCheckbox": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false },
     "multiple": {
       "type": "boolean",
       "default": false,
@@ -80,19 +132,41 @@
     }
   },
   "states": [
-    { "name": "down", "trigger": "interaction" },
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" },
-    { "name": "selected", "trigger": "interaction" }
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "selected",
+      "trigger": "interaction"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["select"],
     "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/side-navigation.json

@@ -16,61 +16,75 @@
     },
     {
       "type": "guideline",
-      "content": "App frame side navigation.\n\nAt a glance, the app frame side navigation may look similar to the standard side navigation. However, its interaction model introduces key differences. The app frame side navigation includes a collapsible menu that lets users hide or reveal labels. The standard side navigation, on the other hand, is best suited for fixed layouts that support multiple visual styles, such as icon-only, text-only, or mixed. Note that the standard side navigation cannot collapse."
+      "content": "Side navigation provides access to the main content areas of a product or section. It can support single-level or multi-level navigation."
     },
     {
       "type": "guideline",
-      "content": "Flexible width.\n\nThe width of the side navigation is flexible, so choose a width that works with the navigation items in your experience. Make the width generous enough so that it doesn't feel too condensed. Doing this will ensure that users won't confuse the side navigation with buttons or other controls."
+      "content": "The type of selection allowed in side navigation can be none, single or multiple."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the navigation item text is too long for the horizontal space available, it wraps to form another line."
+      "content": "The list of navigation items displayed in a side navigation. Each item includes a label by default and can optionally include an icon. Items that contain nested navigation levels can also include a trailing accessory area, which supports a chevron and an optional counter."
     },
     {
-      "type": "do-dont",
-      "content": "Don't make the width too condensed",
-      "dont": "Make sure the width is generous enough so that it doesn't feel too condensed. This ensures it doesn't get confused with buttons or other controls."
+      "type": "guideline",
+      "content": "At a glance, the app frame side navigation may look similar to the standard side navigation. However, its interaction model introduces key differences."
+    },
+    {
+      "type": "guideline",
+      "content": "The app frame side navigation includes a collapsible menu that lets users hide or reveal labels."
+    },
+    {
+      "type": "guideline",
+      "content": "The standard side navigation, on the other hand, is best suited for fixed layouts that support multiple visual styles, such as icon-only, text-only, or mixed. Note that the standard side navigation cannot collapse."
+    },
+    {
+      "type": "guideline",
+      "content": "The width of the side navigation is flexible, so choose a width that works with the navigation items in your experience. Make the width generous enough so that it doesn’t feel too condensed. Doing this will ensure that users won't confuse the side navigation with buttons or other controls."
+    },
+    {
+      "type": "guideline",
+      "content": "When the navigation item text is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Use descriptive titles.\n\nNavigation should be helpful. Choose titles for navigation items that clearly communicate the places where they'll go. Arbitrary or non-useful titles cause usability issues."
+      "content": "Make sure the width is generous enough so that it doesn’t feel too condensed. This ensures it doesn’t get confused with buttons or other controls."
     },
     {
       "type": "guideline",
-      "content": "Be concise.\n\nAlong with being descriptive, the labels of navigation items should be succinct. Keep navigation strings to 1 or 2 and no more than 3 concise words (in U.S. English, which is the source locale). Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated, such as folder and filenames."
+      "content": "Navigation should be helpful. Choose titles for navigation items that clearly communicate the places where they'll go. Arbitrary or non-useful titles cause usability issues."
     },
     {
       "type": "guideline",
-      "content": "Be cautious with line breaks.\n\nWhen possible, the default width should automatically adjust to the longest string in the navigation to accommodate all translations. As a last resort for long strings, specific line breaks can be built into the implementation. These breaks depend on the content and require manual handling by globalization engineers."
+      "content": "Along with being descriptive, the labels of navigation items should be succinct. Keep navigation strings to 1 or 2 and no more than 3 concise words (in U.S. English, which is the source locale). Reduce any unnecessary words in order to ensure simplicity."
     },
     {
       "type": "guideline",
-      "content": "Mixed icon usage.\n\nIn multi-level side navigation, icon and text-only styles can be used together. Users may include supporting icons on the first level and omit them on the second and third levels, or choose to use no icons at all. Do not mix icon and no-icon options within the same navigation level."
+      "content": "Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated, such as folder and filenames."
     },
     {
-      "type": "do-dont",
-      "content": "Avoid deeply nested menus",
-      "dont": "The multi-level side navigation goes to three levels deep. Adding more than three levels will make the indentation indiscernible, which becomes a major usability issue."
+      "type": "guideline",
+      "content": "When possible, the default width should automatically adjust to the longest string in the navigation to accommodate all translations. As a last resort for long strings, specific line breaks can be built into the implementation. These breaks depend on the content and require manual handling by globalization engineers."
     },
     {
       "type": "guideline",
-      "content": "Use consistent multi-level behavior.\n\nIf top-level navigation items have a location associated with them, send the user to that location and open the sub-level navigation items. If a top-level navigation item does not have any associated location, only open the sub-level navigation items. Side navigation can use either of these behaviors, but should never mix behaviors in the same experience."
+      "content": "In multi-level side navigation, icon and text-only styles can be used together. Users may include supporting icons on the first level and omit them on the second and third levels, or choose to use no icons at all."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the side navigation is mirrored. Navigation items are left-aligned and their icons are placed on the right side of the text."
+      "content": "Do not mix icon and no-icon options within the same navigation level."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus to next item.Shift + TabMoves focus to previous item.Enter or SpaceSelects item, expands and collapses item with children."
+      "content": "The multi-level side navigation goes to three levels deep. Adding more than three levels will make the indentation indiscernible, which becomes a major usability issue."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components in every state.Grab handUse the grab hand cursor when hovering over a side navigation item that can be moved.Grab fistUse the grabbing hand cursor while dragging a side nav item."
+      "content": "If top-level navigation items have a location associated with them, send the user to that location and open the sub-level navigation items. If a top-level navigation item does not have any associated location, only open the sub-level navigation items."
     },
     {
       "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 side navigations—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, AAASide navigation must be understandable to assistive technologies, such as screen readers. Use proper semantic HTML or the appropriate ARIA roles to ensure accessibility.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.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 Requirement Criterion Level 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": "Side navigation can use either of these behaviors, but should never mix behaviors in the same experience."
     }
   ],
   "options": {
@@ -113,9 +127,15 @@
       "default": "single",
       "description": "How selection is handled for items.",
       "values": [
-        { "value": "none" },
-        { "value": "single" },
-        { "value": "multiple" }
+        {
+          "value": "none"
+        },
+        {
+          "value": "single"
+        },
+        {
+          "value": "multiple"
+        }
       ]
     }
   },
@@ -124,21 +144,42 @@
       "name": "trailing-accessory-area",
       "description": "Trailing area for accessory content such as counts or actions."
     },
-    { "name": "indicator" }
+    {
+      "name": "indicator"
+    }
   ],
   "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": {
     "intents": ["navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "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"
+      }
     ]
   }
 }