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

package/components/accordion.json

@@ -16,55 +16,37 @@
     },
     {
       "type": "guideline",
-      "content": "An accordion displays a list of items that can be expanded or collapsed to show additional content. It can support zero, one, or multiple expanded items at a time."
+      "content": "Single vs. multiple expansion.\n\nBy default, only one accordion item may be expanded at a time. However, the component can be configured to allow multiple items to remain open simultaneously."
     },
     {
       "type": "guideline",
-      "content": "By default, only one accordion item can be expanded at a time. Use the isMultiple option to allow multiple items to be expanded simultaneously."
+      "content": "Title wrapping.\n\nAccordion titles wrap automatically if they exceed the available width."
     },
     {
       "type": "guideline",
-      "content": "Accordions can contain any number of items. Each item can be expanded or collapsed by interacting with any part of the item."
+      "content": "Optional actions.\n\nAn optional action button or switch can be placed on the trailing edge of an accordion item to support contextual interactions."
     },
     {
       "type": "guideline",
-      "content": "Accordions come in three densities: compact, regular, and spacious. Each of the different densities have the same font size, but have tighter or looser vertical spacing between the rows."
+      "content": "Progressive disclosure.\n\nAccordions are effective for organizing large amounts of related content within a limited space. They help users stay focused by revealing information only when it's needed, making them ideal for scenarios where not all content needs to be visible at once."
     },
     {
-      "type": "guideline",
-      "content": "Individual accordion items can be disabled using the isDisabled option. Disabled items cannot be expanded or collapsed."
-    },
-    {
-      "type": "guideline",
-      "content": "By default, accordions have dividers between sections. This style works best when lots of content is inside each section."
-    },
-    {
-      "type": "guideline",
-      "content": "Alternatively, you can have no dividers between sections. This style works best when a clear layout (vertical stack, table, grid) makes it easy see and understand. Too many quiet components in a small space can be hard to differentiate."
-    },
-    {
-      "type": "guideline",
-      "content": "Accordions come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. Each of the different sizes have varying font sizes, and tighter or looser vertical spacing between the rows."
-    },
-    {
-      "type": "guideline",
-      "content": "By default, only one accordion item may be expanded at a time. However, the component can be configured to allow multiple items to remain open simultaneously."
-    },
-    {
-      "type": "guideline",
-      "content": "Accordion titles wrap automatically if they exceed the available width."
-    },
-    {
-      "type": "guideline",
-      "content": "An optional action button or switch can be placed on the trailing edge of an accordion item to support contextual interactions."
-    },
+      "type": "do-dont",
+      "content": "Avoid accordion overuse",
+      "dont": "Avoid using accordions when users are likely to read all the content in one go, as they can introduce unnecessary clicks and hinder the user experience. For complex or deeply nested information structures, consider alternative components such as tree views or tabs to maintain clarity and ease of navigation"
+    }
+  ],
+  "implementations": [
     {
-      "type": "guideline",
-      "content": "Accordions are effective for organizing large amounts of related content within a limited space. They help users stay focused by revealing information only when it's needed, making them ideal for scenarios where not all content needs to be visible at once."
+      "platform": "web",
+      "componentName": "Accordion",
+      "package": "@react-spectrum/s2"
     },
     {
-      "type": "guideline",
-      "content": "Avoid using accordions when users are likely to read all the content in one go, as they can introduce unnecessary clicks and hinder the user experience. For complex or deeply nested information structures, consider alternative components such as tree views or tabs to maintain clarity and ease of navigation."
+      "platform": "web",
+      "componentName": "Accordion",
+      "importPath": "@adobe/spectrum-wc/components/accordion",
+      "notes": "Spectrum 2 web component custom element: swc-accordion."
     }
   ],
   "options": {

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",

package/components/action-button.json

@@ -52,15 +52,28 @@
     },
     {
       "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."
+      "content": "Keyboard interactions.\n\nWhen an action button does not feature a hold icon: Key Interaction Space or Enter Executes 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. Tab Moves focus into the action button component and places focus on the selected action item. Shift + Tab Returns focus to the previous action within the action button component. When an action button features a hold icon: Key Interaction Enter Executes 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. Space Opens the popover menu. Alt + Down Arrow Opens the popover menu. Tab Moves focus into the action button component and places focus on the selected action item. Shift + Tab Returns 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."
+      "content": "Cursor guidelines.\n\nCursor Usage Pointer Use 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons used in 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, AAA Action 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 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size if text is wrapped inside an action button. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "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."
     }
   ],
   "options": {

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",

package/components/alert-dialog.json

@@ -30,6 +30,10 @@
       "type": "guideline",
       "content": "Don’t nest alert dialogs.\n\nAlert dialogs are designed to pause the experience until a decision is made, so only one should appear at a time. Avoid opening an alert dialog from within another. If a situation seems to require a sequence of decisions, consider using a different design pattern."
     },
+    {
+      "type": "guideline",
+      "content": "Writing for alert dialogs starts by determining the nature of the message. Each Spectrum alert dialog variant has its own communication goal and tone that work in partnership with its visual design. Alert dialog variant Goal Tone Confirmation Asking a user to confirm an action they want to take. Instructive Information Sharing important information that a user needs to acknowledge. Helpful Warning Sharing time-sensitive information that a user needs to consider, but won’t block them from proceeding. Instructive to helpful Destructive Telling a user that if they are to proceed with an action they want to take, it may impact their data in a negative way. Instructive Error Communicating critical information about an issue that a user needs to resolve before they can move forward with a task. Supportive"
+    },
     {
       "type": "guideline",
       "content": "Writing the title.\n\nAll alert dialogs must have a title. The title communicates the upshot of the message, such as the eventual outcome or conclusion of an action. It should be as close as possible to a complete sentence (subject + verb). Don’t use punctuation at the end of the title. Most alert dialog titles communicate the main effect of whatever a person is about to do. Titles ideally use the same or similar phrasing as the call-to-action that had led someone to the alert dialog in the first place. The title of an error alert dialog communicates the result of the error. Don’t just state that an error has occurred."
@@ -60,15 +64,22 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus to the next button inside the alert dialog (last becomes first). If none of the buttons are selected, the focus is set on the first button.Shift + TabMoves focus to the previous button inside the alert dialog (first becomes last). If none of the buttons are selected, the focus is set on the last button.EscDismisses the alert dialog. This is equivalent to choosing “Cancel” or an “OK” confirmation.EscDismisses the alert banner if possible. This is equivalent to selecting the close button."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus to the next button inside the alert dialog (last becomes first). If none of the buttons are selected, the focus is set on the first button. Shift + Tab Moves focus to the previous button inside the alert dialog (first becomes last). If none of the buttons are selected, the focus is set on the last button. Esc Dismisses the alert dialog. This is equivalent to choosing “Cancel” or an “OK” confirmation. Esc Dismisses the alert banner if possible. This is equivalent to selecting the close button."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage Default (Arrow)Use the default cursor for non-interactive elements and text within the alert dialog.PointerUse the pointer cursor for any interactive elements, such as buttons, inside the alert dialog."
+      "content": "Cursor guidelines.\n\nCursor Usage Default (Arrow) Use the default cursor for non-interactive elements and text within the alert dialog. Pointer Use the pointer cursor for any interactive elements, such as buttons, inside the alert dialog."
     },
     {
       "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 alert dialogs, must provide a text alternative that communicates the dialog's purpose. All alert dialogs 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, AAAAlert dialogs should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of alertdialog should be utilized.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.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 illustrations and component 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non-text elements, such as icons used in alert dialogs, must provide a text alternative that communicates the dialog's purpose. All alert dialogs need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Alert dialogs should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of alertdialog should be utilized. Use of color 1.4.1 A Color is not used as a means to convey information or distinguish elements. Contrast 1.4.3 AA The visual presentation of text has a contrast ratio of at least 4.5:1. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The visual presentation of illustrations and component states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "AlertDialog",
+      "package": "@react-spectrum/s2"
     }
   ],
   "options": {

package/components/avatar-group.json

@@ -16,27 +16,23 @@
     },
     {
       "type": "guideline",
-      "content": "An avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities."
+      "content": "Keyboard focus.\n\nIndividual avatars inside Avatar group can be navigated using a keyboard. The keyboard focus state adds a focus ring around the avatar."
     },
     {
       "type": "guideline",
-      "content": "Avatar sizes scale exponentially, based on the Spectrum type scale. Avatar has preset sizes to flex across all surfaces and can also be customized to fit appropriately for your context."
+      "content": "Adjusting stroke color to match neutral backgrounds.\n\nEach individual avatar has a stroke applied to better show distinction between individual users in the group. By default, the outline color is a neutral gray, but the stroke color should be adjusted manually to match the background where the avatar group is placed."
     },
     {
-      "type": "guideline",
-      "content": "An Avatar group can have an optional text label that clearly describes the group or number of users that it represents."
-    },
-    {
-      "type": "guideline",
-      "content": "Individual avatars inside Avatar group can be navigated using a keyboard. The keyboard focus state adds a focus ring around the avatar."
-    },
-    {
-      "type": "guideline",
-      "content": "Each individual avatar has a stroke applied to better show distinction between individual users in the group. By default, the outline color is a neutral gray, but the stroke color should be adjusted manually to match the background where the avatar group is placed."
-    },
+      "type": "do-dont",
+      "content": "Do not adjust stroke color on a colored background",
+      "dont": "When using a colored background the avatar stroke color should remain set as default for both light and dark themes."
+    }
+  ],
+  "implementations": [
     {
-      "type": "guideline",
-      "content": "When using a colored background the avatar stroke color should remain set as default for both light and dark themes."
+      "platform": "web",
+      "componentName": "AvatarGroup",
+      "package": "@react-spectrum/s2"
     }
   ],
   "options": {

package/components/avatar.json

@@ -16,39 +16,36 @@
     },
     {
       "type": "guideline",
-      "content": "An avatar in a disabled state shows that an avatar exists, but is not available or a user is not active in that circumstance. This can be used to maintain layout continuity and communicate that an avatar may become available or active later."
+      "content": "Keyboard focus.\n\nAn avatar can be navigated using a keyboard. The keyboard focus state adds a blue ring to the avatar in focus."
     },
     {
       "type": "guideline",
-      "content": "When used as an individual Avatar, showStroke is false by default. When used in Avatar group, showStroke is true by default to create separation between the stacked group of Avatar components."
+      "content": "Multiple avatars in a group.\n\nAn avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities."
     },
     {
       "type": "guideline",
-      "content": "Avatar sizes scale exponentially, based on the Spectrum type scale. Avatar has preset sizes to flex across all surfaces and can also be customized to fit appropriately for your context."
+      "content": "Use gradient image avatars when a user image is undefined.\n\nUse branded generic avatars when a user has not set their avatar image. These images are designed to be abstracted from all genders, locales, and cultures."
     },
     {
       "type": "guideline",
-      "content": "An avatar has multiple visual styles, depending on the user preference. These show up as branded gradient images, initials of the user’s name, as well as any image that a user uploads. For users who do not have Adobe accounts, they will default to the guest avatar."
+      "content": "Use the initials avatar style for users with latin characters only.\n\nThe initials avatar is designed to work with latin characters only and supports 1 or 2 characters that are programmatically identified by the first name and last name in a user's account settings. For users with non-latin characters, their default avatar should be the gradient image style."
     },
     {
       "type": "guideline",
-      "content": "An avatar can be navigated using a keyboard. The keyboard focus state adds a blue ring to the avatar in focus."
-    },
-    {
-      "type": "guideline",
-      "content": "An avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities."
-    },
-    {
-      "type": "guideline",
-      "content": "Use branded generic avatars when a user has not set their avatar image. These images are designed to be abstracted from all genders, locales, and cultures."
-    },
+      "content": "Use the guest avatar style for users without an Adobe account.\n\nThe guest avatar style is designed for users who may be interacting with Adobe products, but are not logged in or do not have an Adobe account."
+    }
+  ],
+  "implementations": [
     {
-      "type": "guideline",
-      "content": "The initials avatar is designed to work with latin characters only and supports 1 or 2 characters that are programmatically identified by the first name and last name in a user’s account settings. For users with non-latin characters, their default avatar should be the gradient image style."
+      "platform": "web",
+      "componentName": "Avatar",
+      "package": "@react-spectrum/s2"
     },
     {
-      "type": "guideline",
-      "content": "The guest avatar style is designed for users who may be interacting with Adobe products, but are not logged in or do not have an Adobe account."
+      "platform": "web",
+      "componentName": "Avatar",
+      "importPath": "@adobe/spectrum-wc/components/avatar",
+      "notes": "Spectrum 2 web component custom element: swc-avatar."
     }
   ],
   "options": {

package/components/badge.json

@@ -51,11 +51,24 @@
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage Default (Arrow)Use the default cursor for non-interactive components like the badge."
+      "content": "Cursor guidelines.\n\nCursor Usage Default (Arrow) Use the default cursor for non-interactive components like the badge."
     },
     {
       "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 badges—must provide a text alternative that communicates the badge’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, AAABadges should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Use of color 1.4.1 AColor is never used as the sole way to convey meaning in buttons. Badges use color to reinforce their meaning, but every badge also includes a clear text label that communicates purpose.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.Non-text contrast 1.4.11 AAThe visual presentation of icons 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 wrapped. 2. Operable Requirement Criterion Level Compliance Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component."
+      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons used in badges—must provide a text alternative that communicates the badge’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Badges should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized. Use of color 1.4.1 A Color is never used as the sole way to convey meaning in buttons. Badges use color to reinforce their meaning, but every badge also includes a clear text label that communicates purpose. Text contrast minimums 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Non-text contrast 1.4.11 AA The visual presentation of icons have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when wrapped. 2. Operable Requirement Criterion Level Compliance Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Badge",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Badge",
+      "importPath": "@adobe/spectrum-wc/components/badge",
+      "notes": "Spectrum 2 web component custom element: swc-badge."
     }
   ],
   "options": {

package/components/breadcrumbs.json

@@ -9,6 +9,13 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Breadcrumbs",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",

package/components/button-group.json

@@ -44,15 +44,28 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus onto or off of the button group. Focus is placed on the primary button of the group.Shift + TabMoves focus to the previous component.Space or EnterExecutes the selected action within the button group. Focus remains on the active button to preserve context across the group. If the action opens or closes a related container, focus moves into the resulting context or returns to the triggering buttonArrow keysMoves focus through the group of buttons."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus onto or off of the button group. Focus is placed on the primary button of the group. Shift + Tab Moves focus to the previous component. Space or Enter Executes the selected action within the button group. Focus remains on the active button to preserve context across the group. If the action opens or closes a related container, focus moves into the resulting context or returns to the triggering button Arrow keys Moves focus through the group of buttons."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components in every state."
+      "content": "Cursor guidelines.\n\nCursor Usage Pointer Use 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 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.Orientation 1.3.4 AAButton groups are available in both vertical and horizontal orientations.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 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 when text is wrapped in buttons. 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons used in 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, AAA Buttons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized. Orientation 1.3.4 AA Button groups are available in both vertical and horizontal orientations. Use of color 1.4.1 A Color 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 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when text is wrapped in buttons. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "ButtonGroup",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "ButtonGroup",
+      "importPath": "@adobe/spectrum-wc/components/button-group",
+      "notes": "Spectrum 2 web component custom element: swc-button-group."
     }
   ],
   "options": {

package/components/button.json

@@ -94,15 +94,28 @@
     },
     {
       "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": "Keyboard interactions.\n\nKey Interaction Tab Moves focus onto or off of the button. Space or Enter Executes 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": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components."
+      "content": "Cursor guidelines.\n\nCursor Usage Pointer Use the pointer cursor for all interactive components."
     },
     {
       "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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons used in 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, AAA Buttons 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 A Color 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 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Resize text 1.4.4 AA Buttons should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Button",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Button",
+      "importPath": "@adobe/spectrum-wc/components/button",
+      "notes": "Spectrum 2 web component custom element: swc-button."
     }
   ],
   "options": {

package/components/calendar.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/calendar/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Calendar",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",

package/components/card.json

@@ -17,6 +17,19 @@
       "description": "Preview area or thumbnail within the card."
     }
   ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Card",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Card",
+      "importPath": "@adobe/spectrum-wc/components/card",
+      "notes": "Spectrum 2 web component custom element: swc-card."
+    }
+  ],
   "states": [{ "name": "default" }],
   "lifecycle": { "introduced": "1.0.0-draft" }
 }

package/components/cards.json

@@ -16,7 +16,7 @@
     },
     {
       "type": "guideline",
-      "content": "Card component Purpose / use case Interaction type Common visual elements FlexGeneral-purpose, flexible content containerVaries (Static or Clickable)Title, preview, checkboxAssetDisplay assets like images, text documents, files, videos, materials, etc.Clickable (navigates to 1-up view), selectablePreview, filename, metadata, checkboxGalleryShow multiple images or videos in a river grid.Clickable (navigates to 1-up view), selectablePreview, badge, checkboxCollectionGroup related items such as assets or products in a library of items.Clickable (drill-in), selectablemulti or hero multi previews, collection title, checkboxProductDisplay product details for interactionClickable (drill-in), selectableCover image, thumbnail (logo), product title, checkboxHorizontalDisplaying mostly text, possibly with a cropped cover image or icon.Clickable (drill-in)Optional cropped preview, icon, or thumbnail, title, metadata"
+      "content": "Card component Purpose / use case Interaction type Common visual elements Flex General-purpose, flexible content container Varies (Static or Clickable) Title, preview, checkbox Asset Display assets like images, text documents, files, videos, materials, etc. Clickable (navigates to 1-up view), selectable Preview, filename, metadata, checkbox Gallery Show multiple images or videos in a river grid. Clickable (navigates to 1-up view), selectable Preview, badge, checkbox Collection Group related items such as assets or products in a library of items. Clickable (drill-in), selectable multi or hero multi previews, collection title, checkbox Product Display product details for interaction Clickable (drill-in), selectable Cover image, thumbnail (logo), product title, checkbox Horizontal Displaying mostly text, possibly with a cropped cover image or icon. Clickable (drill-in) Optional cropped preview, icon, or thumbnail, title, metadata"
     },
     {
       "type": "guideline",
@@ -63,15 +63,15 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus forward to the next card.Arrow keysMoves focus within the card to focusable items within the card. If a button is included on the cards, the button should receive focus first. If there are multiple buttons, the primary or CTA button should receive focus first.Shift + TabMoves focus backward to the previous card.Return or EnterIf the card itself is clickable, Return or Enter will open the card. If the card is not clickable but has buttons, and the buttons or another item within the card is focused, that action is performed.SpaceIf the card is selectable, the space bar will toggle selection.Ctrl / Command + Arrow keysNon-contiguous selection of cards."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus forward to the next card. Arrow keys Moves focus within the card to focusable items within the card. If a button is included on the cards, the button should receive focus first. If there are multiple buttons, the primary or CTA button should receive focus first. Shift + Tab Moves focus backward to the previous card. Return or Enter If the card itself is clickable, Return or Enter will open the card. If the card is not clickable but has buttons, and the buttons or another item within the card is focused, that action is performed. Space If the card is selectable, the space bar will toggle selection. Ctrl / Command + Arrow keys Non-contiguous selection of cards."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nNon-interactive cards Cursor Description Default (Arrow)Use the default cursor for non-interactive cards. Cards with interactive elements Cursor Description Default (Arrow)Use the default cursor for the non-interactive portions of the card.PointerUse the pointer cursor for the interactive elements.Grab handUse the grab hand cursor when hovering over cards that are draggable. Cards that have other interactive elements that are also draggable should first enter a drag mode before showing the grab cursors and allowing a drag action.Grab fistUse the grab fist cursor when actively dragging a card. Fully interactive cards Cursor Description PointerUse the pointer cursor for the entire card surface when the card is interactive, for example, if clicking the card will navigate to a one-up view.Grab handUse the grab hand cursor when hovering over cards that are draggable.Grab fistUse the grab fist cursor when actively dragging a card."
+      "content": "Cursor guidelines.\n\nNon-interactive cards Cursor Description Default (Arrow) Use the default cursor for non-interactive cards. Cards with interactive elements Cursor Description Default (Arrow) Use the default cursor for the non-interactive portions of the card. Pointer Use the pointer cursor for the interactive elements. Grab hand Use the grab hand cursor when hovering over cards that are draggable. Cards that have other interactive elements that are also draggable should first enter a drag mode before showing the grab cursors and allowing a drag action. Grab fist Use the grab fist cursor when actively dragging a card. Fully interactive cards Cursor Description Pointer Use the pointer cursor for the entire card surface when the card is interactive, for example, if clicking the card will navigate to a one-up view. Grab hand Use the grab hand cursor when hovering over cards that are draggable. Grab fist Use the grab fist cursor when actively dragging a card."
     },
     {
       "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 or illustrations used in cards—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 AACards 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 AACards 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, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.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.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 illustrations, icons, and component 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as icons or illustrations used in cards—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 AA Cards should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized. Orientation 1.3.4 AA Cards are available in both vertical and horizontal orientations. Use of color 1.4.1 A Color is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text. Text contrast 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The visual presentation of illustrations, icons, and component states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
     }
   ],
   "options": {

package/components/checkbox-group.json

@@ -20,15 +20,22 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time).Shift + TabMoves focus to the previous item or group of items.Arrow keysMoves focus through the group of checkboxes.Page Up or Page DownMoves focus to the previous or next checkbox in the group (last becomes first, and first becomes last).Home or EndMoves focus to the first or last checkbox in the group.Space or EnterToggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Tabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time). Shift + Tab Moves focus to the previous item or group of items. Arrow keys Moves focus through the group of checkboxes. Page Up or Page Down Moves focus to the previous or next checkbox in the group (last becomes first, and first becomes last). Home or End Moves focus to the first or last checkbox in the group. Space or Enter Toggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for interactive elements like checkboxes."
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use the pointer cursor for interactive elements like checkboxes."
     },
     {
       "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 the checkbox control—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, AAACheckboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AACheckbox groups 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, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.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 AACheckboxes 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 checkbox control and its 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 feactions 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as the checkbox control—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Checkboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized. Orientation 1.3.4 AA Checkbox groups are available in both vertical and horizontal orientations. Use of color 1.4.1 A Color is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text. Text contrast minimums 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Resize text 1.4.4 AA Checkboxes should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The checkbox control and its various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when the label is wrapped. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "CheckboxGroup",
+      "package": "@react-spectrum/s2"
     }
   ],
   "options": {

package/components/checkbox.json

@@ -52,15 +52,22 @@
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time).Shift + TabMoves focus to the previous item or group of items.Space or EnterToggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Tabbing into a group of checkboxes places the focus on the first checkbox (only one checkbox receives the keyboard focus at a time). Shift + Tab Moves focus to the previous item or group of items. Space or Enter Toggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected)."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for all interactive components in every state."
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use 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 the checkbox control—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, AAACheckboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.Orientation 1.3.4 AACheckbox groups 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, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text.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 AACheckboxes should be built in such a way that they can be resized without assistive technology up to 200%.Visual presentation 1.4.8 AAACheckbox labels can wrap to multiple lines, so the 80-character (40 CJK) and no-justified-text guidance applies the same way it does for the group.Non-text contrast 1.4.11 AAThe checkbox control and its 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 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 feactions 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": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—such as the checkbox control—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Checkboxes should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized. Orientation 1.3.4 AA Checkbox groups are available in both vertical and horizontal orientations. Use of color 1.4.1 A Color is not used as a means to convey information or distinguish elements, indicate an action, or prompt a response. Color is always paired with text or icons, and is only used to enhance the meaning of the text. Text contrast minimums 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Resize text 1.4.4 AA Checkboxes should be built in such a way that they can be resized without assistive technology up to 200%. Visual presentation 1.4.8 AAA Checkbox labels can wrap to multiple lines, so the 80-character (40 CJK) and no-justified-text guidance applies the same way it does for the group. Non-text contrast 1.4.11 AA The checkbox control and its various states have a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when the label is wrapped. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical feactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Checkbox",
+      "package": "@react-spectrum/s2"
     }
   ],
   "options": {