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

package/components/accordion.json

@@ -9,6 +9,19 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/accordion/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Accordion",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Accordion",
+      "importPath": "@adobe/spectrum-wc/components/accordion",
+      "notes": "Spectrum 2 web component custom element: swc-accordion."
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -72,21 +85,41 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isQuiet": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
     "density": {
       "type": "string",
       "default": "regular",
       "values": [
-        { "value": "compact" },
-        { "value": "regular" },
-        { "value": "spacious" }
+        {
+          "value": "compact"
+        },
+        {
+          "value": "regular"
+        },
+        {
+          "value": "spacious"
+        }
       ]
     },
     "items": {
@@ -129,18 +162,37 @@
     }
   },
   "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": ["expand"],
     "focusable": true,
     "keyboardIntents": ["activate", "expand", "collapse"],
     "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/action-bar.json

@@ -9,6 +9,13 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/action-bar/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "ActionBar",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,7 +23,7 @@
     },
     {
       "type": "guideline",
-      "content": "Action bar in Dark theme.\n\nAction bar is split into a separate component for each color theme — light and dark. Since each is set to either light or dark mode in Figma, they do not switch automatically like the rest of the UI when placed in frames that are set to “auto” mode. In dark theme, the action bar also includes a 1px inner border to help it stand out against the background colors."
+      "content": "Action bar in Dark theme.\n\nAction bar is split into a separate component for each color theme — light and dark. Since each is set to either light or dark mode in Figma, they do not switch automatically like the rest of the UI when placed in frames that are set to \"auto\" mode.\n\nIn dark theme, the action bar also includes a 1px inner border to help it stand out against the background colors."
     },
     {
       "type": "guideline",
@@ -28,11 +35,11 @@
     },
     {
       "type": "guideline",
-      "content": "Placement.\n\nWhen a user selects items with relevant actions, an action bar appears at the bottom of the viewport. The bar should have margins of spacing-200 (12 pixels on desktop scale) on the sides and bottom."
+      "content": "Placement.\n\nWhen a user selects items with relevant actions, an action bar appears at the bottom of the viewport. The bar should have margins of `spacing-200` (12 pixels on desktop scale) on the sides and bottom."
     },
     {
       "type": "guideline",
-      "content": "Safe zone.\n\nInclude a safe zone of at least spacing-400 (24 pixels on desktop scale) between the item counter and the action group."
+      "content": "Safe zone.\n\nInclude a safe zone of at least `spacing-400` (24 pixels on desktop scale) between the item counter and the action group."
     },
     {
       "type": "guideline",
@@ -48,11 +55,17 @@
       "content": "Allow scrolling to view underlying content.\n\nAction bars appear on top of content. Allow space for a user to still be able to view the content underneath, especially if they're taking actions on a table or a list of items and need to be able to scroll."
     },
     {
-      "type": "guideline",
-      "content": "Don’t use quick actions.\n\nInstead of quick actions, use an action bar for both single and bulk selection patterns. An action bar is useful for when a user needs to perform actions on either a single or multiple items at the same time. It can be used on either a grid view or a table view. Don’t use quick actions — a deprecated component — because it presents conflicting nested actions (for example, a whole asset card could open a detailed view). This makes targeting specific actions very difficult, especially on smaller screens or with the keyboard."
+      "type": "do-dont",
+      "content": "Don't use quick actions",
+      "dont": "Instead of quick actions, use an action bar for both single and bulk selection patterns. An action bar is useful for when a user needs to perform actions on either a single or multiple items at the same time. It can be used on either a grid view or a table view.\n\nDon't use quick actions — a deprecated component — because it presents conflicting nested actions (for example, a whole asset card could open a detailed view). This makes targeting specific actions very difficult, especially on smaller screens or with the keyboard."
     }
   ],
-  "options": { "isEmphasized": { "type": "boolean", "default": false } },
+  "options": {
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    }
+  },
   "anatomy": [
     {
       "name": "action-group-area",
@@ -62,14 +75,22 @@
       "name": "item-counter",
       "description": "Badge showing a count of items or actions."
     },
-    { "name": "counter" }
+    {
+      "name": "counter"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["trigger"],
     "focusable": false,
     "wcag": [
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/action-button.json

@@ -9,10 +9,23 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/action-button/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "ActionButton",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "ActionButton",
+      "importPath": "@adobe/spectrum-wc/components/action-button",
+      "notes": "Spectrum 2 web component custom element: swc-action-button."
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention."
+      "content": "Action buttons perform tasks or mark selections. They're suited for task-based workflows where buttons don't need to draw attention."
     },
     {
       "type": "guideline",
@@ -20,7 +33,7 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard focus.\n\nAn action button 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": "Keyboard focus.\n\nAn action button 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",
@@ -28,7 +41,7 @@
     },
     {
       "type": "guideline",
-      "content": "Isolated action buttons.\n\nIf you have an icon-only or text-only isolated action button, use the standard style to make sure it’s more easily identifiable as a button."
+      "content": "Isolated action buttons.\n\nIf you have an icon-only or text-only isolated action button, use the standard style to make sure it's more easily identifiable as a button."
     },
     {
       "type": "guideline",
@@ -44,28 +57,17 @@
     },
     {
       "type": "guideline",
-      "content": "Selected state text color.\n\nThe text color on the selected state of the over-background variant can be customized to match the background it’s on. Use the background color for selected text when the action button is on a solid color, and is dark enough to meet a 4.5:1 contrast ratio with a white background (or black background, for the static black variant). Use black text when the button is on top of an image, or if the background is too low-contrast to meet the 4.5:1 contrast ratio."
-    },
-    {
-      "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the action button is mirrored. The icon is placed on the right side of the text and the hold icon is placed on the left side of the icon."
-    },
-    {
-      "type": "guideline",
-      "content": "Keyboard interactions.\n\nWhen an action button does not feature a hold icon: Key Interaction Space or EnterExecutes the 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.TabMoves focus into the action button component and places focus on the selected action item.Shift + TabReturns focus to the previous action within the action button component. When an action button features a hold icon: Key Interaction EnterExecutes the 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.SpaceOpens the popover menu.Alt + Down ArrowOpens the popover menu.TabMoves focus into the action button component and places focus on the selected action item.Shift + TabReturns focus to the previous action within the action button component."
-    },
-    {
-      "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components in every state."
-    },
-    {
-      "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 action buttons—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, AAAAction buttons should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.Text contrast 1.4.3 AALarge text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.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 if text is wrapped inside an action button. 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": "Selected state text color.\n\nThe text color on the selected state of the over-background variant can be customized to match the background it's on. Use the background color for selected text when the action button is on a solid color, and is dark enough to meet a 4.5:1 contrast ratio with a white background (or black background, for the static black variant).\n\nUse black text when the button is on top of an image, or if the background is too low-contrast to meet the 4.5:1 contrast ratio."
     }
   ],
   "options": {
-    "label": { "type": "string" },
-    "hideLabel": { "type": "boolean", "default": false },
+    "label": {
+      "type": "string"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
     "icon": {
       "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json",
       "description": "Icon must be present if the label is not defined."
@@ -74,41 +76,92 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "xs" },
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "xs"
+        },
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isQuiet": { "type": "boolean", "default": false },
-    "isSelected": { "type": "boolean", "default": false },
-    "isEmphasized": { "type": "boolean", "default": false },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
     "staticColor": {
       "type": "string",
       "description": "Static color must not be set for the default version of this component.",
-      "values": [{ "value": "white" }, { "value": "black" }]
+      "values": [
+        {
+          "value": "white"
+        },
+        {
+          "value": "black"
+        }
+      ]
     },
     "selectedTextColor": {
       "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/hex-color.json"
     },
-    "hasHoldIcon": { "type": "boolean", "default": false },
-    "isDisabled": { "type": "boolean", "default": false }
+    "hasHoldIcon": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "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": "button",
     "intents": ["trigger"],
     "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/action-group.json

@@ -9,6 +9,14 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/action-group/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "ActionGroup",
+      "importPath": "@adobe/spectrum-wc/components/action-group",
+      "notes": "Spectrum 2 web component custom element: swc-action-group."
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,47 +24,140 @@
     },
     {
       "type": "guideline",
-      "content": "Use an Action menu to show additional actions.\n\nWhen there are more actions than the action group has horizontal space for, overflowMode collapse will use an Action menu to contain additional actions. This is used in the components like action bar or panels to show an array of actions to select from when horizontal space is limited."
+      "content": "An action group in a disabled state shows that the action buttons 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 action group may become available later."
+    },
+    {
+      "type": "guideline",
+      "content": "When selection is enabled, an action group's selection behavior can be set to allow for an empty selection, or not."
+    },
+    {
+      "type": "guideline",
+      "content": "When selection is enabled, an action group can allow for single or multiple selection of action buttons."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, selection is not enabled in an action group. This is used for action groups that offer direct actions, rather than toggling."
     },
     {
       "type": "guideline",
-      "content": "When to use Action group vs. Segmented control.\n\nWhen multiple items can be selected at a time use an action group when taking actions or making choices from a list of options. Action group is the preferred competent to use when those actions are simple (1-2 words or icon only). If you are switching views or navigating to different content, a segmented control is the preferred component."
+      "content": "Selection can be enabled for an action group to allow for toggling. This can be used to disclose parts of an interface (for example, showing or hiding panels) or to switch between views (for example, grid or list views)."
     },
     {
       "type": "guideline",
-      "content": "Fully justified action groups.\n\nUse the fully justified variant when using the vertical compact action group (both the quiet and not quiet options). This will ensure the buttons have the same width."
+      "content": "Like action buttons, action groups are not emphasized by default. This is optimal for when the action group is not the core part of an interface, such as in application panels, where all components are monochrome in order to direct focus to the content."
+    },
+    {
+      "type": "guideline",
+      "content": "The emphasized action group has a blue background for its selected state in order to provide a visual prominence that meets the accessible color contrast ratio. This is optimal for when the selection should call attention, such as within a tool bar."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, an action group uses not-quiet action buttons. This style works best in a dense array of controls where the background helps to separate action buttons from the surrounding container, or to give visibility to isolated buttons."
+    },
+    {
+      "type": "guideline",
+      "content": "Alternatively, quiet action groups can have no visible background until they’re interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read."
+    },
+    {
+      "type": "guideline",
+      "content": "An action group can become justified. By default, it is not justified since the action button size depends on the label and/or icon inside each button. When an action group is justified, it takes up the entire available container width, divided equally for each action button that is inside the group."
+    },
+    {
+      "type": "guideline",
+      "content": "Action groups come in two densities: regular and compact. The compact density retains the same font and icon sizes, but has tighter spacing. The action buttons also become connected for non-quiet action groups."
+    },
+    {
+      "type": "guideline",
+      "content": "Action groups 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": "An action group can be either horizontal or vertical in its orientation. By default, an action group is horizontal. The vertical option should be reserved for when horizontal space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "When there are more actions than the action group has horizontal space for, overflowMode collapse will use an Action menu to contain additional actions. This is used in the components like action bar or panels to show an array of actions to select from when horizontal space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "When multiple items can be selected at a time use an action group when taking actions or making choices from a list of options. Action group is the preferred competent to use when those actions are simple (1-2 words or icon only). If you are switching views or navigating to different content, a segmented control is the preferred component."
+    },
+    {
+      "type": "guideline",
+      "content": "Use the fully justified variant when using the vertical compact action group (both the quiet and not quiet options). This will ensure the buttons have the same width."
     }
   ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
     "density": {
       "type": "string",
       "default": "regular",
-      "values": [{ "value": "regular" }, { "value": "compact" }]
+      "values": [
+        {
+          "value": "regular"
+        },
+        {
+          "value": "compact"
+        }
+      ]
+    },
+    "isJustified": {
+      "type": "boolean",
+      "default": false
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "enableSelection": {
+      "type": "boolean",
+      "default": false
     },
-    "isJustified": { "type": "boolean", "default": false },
-    "isQuiet": { "type": "boolean", "default": false },
-    "isEmphasized": { "type": "boolean", "default": false },
-    "enableSelection": { "type": "boolean", "default": false },
     "selectionMode": {
       "type": "string",
       "default": "single",
       "description": "Only applicable if selection is enabled",
-      "values": [{ "value": "single" }, { "value": "multiple" }]
+      "values": [
+        {
+          "value": "single"
+        },
+        {
+          "value": "multiple"
+        }
+      ]
     },
     "allowsEmptySelection": {
       "type": "boolean",
@@ -66,14 +167,32 @@
     "overflowMode": {
       "type": "string",
       "default": "wrap",
-      "values": [{ "value": "wrap" }, { "value": "collapse" }]
+      "values": [
+        {
+          "value": "wrap"
+        },
+        {
+          "value": "collapse"
+        }
+      ]
     },
-    "isDisabled": { "type": "boolean", "default": false }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["trigger"],
     "focusable": false,
-    "wcag": [{ "criterion": "2.1.1", "level": "A", "title": "Keyboard" }]
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      }
+    ]
   }
 }

package/components/alert-banner.json

@@ -96,22 +96,35 @@
     }
   ],
   "options": {
-    "text": { "type": "string" },
+    "text": {
+      "type": "string"
+    },
     "variant": {
       "type": "string",
       "default": "neutral",
       "values": [
-        { "value": "neutral" },
-        { "value": "informative" },
-        { "value": "negative" },
-        { "value": "accent" }
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "informative"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "accent"
+        }
       ]
     },
     "actionLabel": {
       "type": "string",
       "description": "If undefined, this button does not appear."
     },
-    "isDismissible": { "type": "boolean", "default": false }
+    "isDismissible": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "anatomy": [
     {
@@ -119,11 +132,17 @@
       "description": "Icon indicating the alert's severity."
     }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "focusable": false,
     "wcag": [
-      { "criterion": "4.1.3", "level": "AA", "title": "Status Messages" }
+      {
+        "criterion": "4.1.3",
+        "level": "AA",
+        "title": "Status Messages"
+      }
     ]
   }
 }