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

package/components/segmented-control.json

@@ -16,81 +16,63 @@
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Segmented controls should have between two and five items."
+      "content": "Selection.\n\nClicking on a segmented control item immediately performs the view change."
     },
     {
       "type": "guideline",
-      "content": "The identifier of the currently selected item."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Segmented controls without a track are left aligned in left-to-right languages."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "If true, the control takes up the full width of its container. Only horizontal segmented controls support fluid behavior."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Segmented controls can be either horizontal or vertical. By default, segmented controls are horizontal."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
-      "type": "guideline",
-      "content": "Clicking on a segmented control item immediately performs the view change."
-    },
-    {
-      "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components."
     },
     {
       "type": "guideline",
-      "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": "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."
+      "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."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "isFluid": {
       "type": "boolean",
@@ -100,14 +82,7 @@
     "alignment": {
       "type": "string",
       "default": "start",
-      "values": [
-        {
-          "value": "start"
-        },
-        {
-          "value": "center"
-        }
-      ]
+      "values": [{ "value": "start" }, { "value": "center" }]
     },
     "hideTracker": {
       "type": "boolean",
@@ -121,14 +96,7 @@
     "keyboardActivation": {
       "type": "string",
       "default": "manual",
-      "values": [
-        {
-          "value": "manual"
-        },
-        {
-          "value": "automatic"
-        }
-      ]
+      "values": [{ "value": "manual" }, { "value": "automatic" }]
     },
     "items": {
       "type": "array",
@@ -161,24 +129,14 @@
       }
     }
   },
-  "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

@@ -16,108 +16,63 @@
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Illustrations are optional but recommended and included by default."
+      "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."
     },
     {
       "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."
+      "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."
     },
     {
       "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."
+      "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."
     },
     {
       "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Minimum and maximum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."
+      "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."
     },
     {
-      "type": "guideline",
-      "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": "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": "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": "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": "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": "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."
+      "content": "Use consistent sizing.\n\nAll select boxes in a group should be the same size to maintain visual consistency and usability."
     },
     {
-      "type": "guideline",
-      "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": "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": "All select boxes in a group should be the same size to maintain visual consistency and usability."
-    },
-    {
-      "type": "guideline",
-      "content": "Select boxes use a checkbox to indicate both single- and multi-selection. Don’t use radio buttons for single-selection."
+      "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": "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."
+      "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."
     }
   ],
   "options": {
-    "label": {
-      "type": "string"
-    },
+    "label": { "type": "string" },
     "orientation": {
       "type": "string",
       "default": "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
+      "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 },
     "multiple": {
       "type": "boolean",
       "default": false,
@@ -125,41 +80,19 @@
     }
   },
   "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,75 +16,61 @@
     },
     {
       "type": "guideline",
-      "content": "Side navigation provides access to the main content areas of a product or section. It can support single-level or multi-level navigation."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "The type of selection allowed in side navigation can be none, single or multiple."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Text overflow.\n\nWhen the navigation item text is too long for the horizontal space available, it wraps to form another line."
     },
     {
-      "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": "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": "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
-      "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": "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": "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Do not mix icon and no-icon options within the same navigation level."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Side navigation can use either of these behaviors, but should never mix behaviors in the same experience."
+      "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."
     }
   ],
   "options": {
@@ -127,15 +113,9 @@
       "default": "single",
       "description": "How selection is handled for items.",
       "values": [
-        {
-          "value": "none"
-        },
-        {
-          "value": "single"
-        },
-        {
-          "value": "multiple"
-        }
+        { "value": "none" },
+        { "value": "single" },
+        { "value": "multiple" }
       ]
     }
   },
@@ -144,42 +124,21 @@
       "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" }
     ]
   }
 }