@adobe/spectrum-design-data 0.3.0 → 0.6.0

package/LICENSE

@@ -186,7 +186,7 @@ file or class name and description of purpose be included on the
 same "printed page" as the copyright notice for easier
 identification within third-party archives.
 
-Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+Copyright 2026 Adobe
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/components/accordion.json

@@ -9,46 +9,84 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/accordion/"
   },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "An accordion is a vertically stacked set of interactive headings that each contain a title and a content area."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "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."
+    }
+  ],
   "options": {
     "size": {
       "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": {
@@ -91,51 +129,22 @@
     }
   },
   "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" },
   "tokenBindings": [
-    {
-      "token": "accordion-minimum-width",
-      "context": "Width (default)"
-    },
-    {
-      "token": "field-default-width-medium",
-      "context": "Width (default)"
-    },
-    {
-      "token": "field-default-width-large",
-      "context": "Width (default)"
-    },
+    { "token": "accordion-minimum-width", "context": "Width (default)" },
+    { "token": "field-default-width-medium", "context": "Width (default)" },
+    { "token": "field-default-width-large", "context": "Width (default)" },
     {
       "token": "field-default-width-extra-large",
       "context": "Width (default)"
     },
-    {
-      "token": "accordion-edge-to-content-area-small",
-      "context": "Paddings"
-    },
-    {
-      "token": "accordion-edge-to-content-area-medium",
-      "context": "Paddings"
-    },
-    {
-      "token": "accordion-edge-to-content-area-large",
-      "context": "Paddings"
-    },
+    { "token": "accordion-edge-to-content-area-small", "context": "Paddings" },
+    { "token": "accordion-edge-to-content-area-medium", "context": "Paddings" },
+    { "token": "accordion-edge-to-content-area-large", "context": "Paddings" },
     {
       "token": "accordion-edge-to-content-area-extra-large",
       "context": "Paddings"
@@ -260,30 +269,12 @@
       "token": "accordion-bottom-to-text-spacious-extra-large",
       "context": "Spacing (bottom edge to text)"
     },
-    {
-      "token": "accordion-focus-indicator-gap",
-      "context": "Focus indicator"
-    },
-    {
-      "token": "focus-indicator-thickness",
-      "context": "Focus indicator"
-    },
-    {
-      "token": "corner-radius-medium-size-small",
-      "context": "Rounding"
-    },
-    {
-      "token": "corner-radius-medium-size-medium",
-      "context": "Rounding"
-    },
-    {
-      "token": "corner-radius-medium-size-large",
-      "context": "Rounding"
-    },
-    {
-      "token": "corner-radius-medium-size-extra-large",
-      "context": "Rounding"
-    },
+    { "token": "accordion-focus-indicator-gap", "context": "Focus indicator" },
+    { "token": "focus-indicator-thickness", "context": "Focus indicator" },
+    { "token": "corner-radius-medium-size-small", "context": "Rounding" },
+    { "token": "corner-radius-medium-size-medium", "context": "Rounding" },
+    { "token": "corner-radius-medium-size-large", "context": "Rounding" },
+    { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
     {
       "token": "field-top-to-disclosure-icon-compact-small",
       "context": "Spacing (top/bottom to disclosure icon)"
@@ -392,22 +383,10 @@
       "token": "accordion-content-area-edge-to-content-extra-large",
       "context": "Expanded (content area start/end edges)"
     },
-    {
-      "token": "background-opacity-default",
-      "context": "Background"
-    },
-    {
-      "token": "background-opacity-hover",
-      "context": "Background"
-    },
-    {
-      "token": "background-opacity-down",
-      "context": "Background"
-    },
-    {
-      "token": "background-opacity-key-focus",
-      "context": "Background"
-    },
+    { "token": "background-opacity-default", "context": "Background" },
+    { "token": "background-opacity-hover", "context": "Background" },
+    { "token": "background-opacity-down", "context": "Background" },
+    { "token": "background-opacity-key-focus", "context": "Background" },
     {
       "token": "neutral-content-color-default",
       "context": "Section title and chevron"
@@ -420,82 +399,25 @@
       "token": "neutral-content-color-key-focus",
       "context": "Section title and chevron"
     },
-    {
-      "token": "disabled-content-color",
-      "context": "Disabled"
-    },
-    {
-      "token": "focus-indicator-color",
-      "context": "Focus ring"
-    },
-    {
-      "token": "default-font-family",
-      "context": "Value"
-    },
-    {
-      "token": "bold-font-weight",
-      "context": "Value"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Value"
-    },
-    {
-      "token": "font-size-100",
-      "context": "Value"
-    },
-    {
-      "token": "font-size-200",
-      "context": "Value"
-    },
-    {
-      "token": "font-size-300",
-      "context": "Value"
-    },
-    {
-      "token": "font-size-400",
-      "context": "Value"
-    },
-    {
-      "token": "line-height-100",
-      "context": "Value"
-    },
-    {
-      "token": "cjk-line-height-100",
-      "context": "Value"
-    },
-    {
-      "token": "accordion-top-to-text-regular-small",
-      "context": "S"
-    },
-    {
-      "token": "accordion-bottom-to-text-regular-small",
-      "context": "S"
-    },
-    {
-      "token": "accordion-top-to-text-regular-medium",
-      "context": "S"
-    },
-    {
-      "token": "accordion-bottom-to-text-regular-medium",
-      "context": "S"
-    },
-    {
-      "token": "accordion-top-to-text-regular-large",
-      "context": "S"
-    },
-    {
-      "token": "accordion-bottom-to-text-regular-large",
-      "context": "S"
-    },
-    {
-      "token": "accordion-top-to-text-regular-extra-large",
-      "context": "S"
-    },
-    {
-      "token": "accordion-bottom-to-text-regular-extra-large",
-      "context": "S"
-    },
+    { "token": "disabled-content-color", "context": "Disabled" },
+    { "token": "focus-indicator-color", "context": "Focus ring" },
+    { "token": "default-font-family", "context": "Value" },
+    { "token": "bold-font-weight", "context": "Value" },
+    { "token": "default-font-style", "context": "Value" },
+    { "token": "font-size-100", "context": "Value" },
+    { "token": "font-size-200", "context": "Value" },
+    { "token": "font-size-300", "context": "Value" },
+    { "token": "font-size-400", "context": "Value" },
+    { "token": "line-height-100", "context": "Value" },
+    { "token": "cjk-line-height-100", "context": "Value" },
+    { "token": "accordion-top-to-text-regular-small", "context": "S" },
+    { "token": "accordion-bottom-to-text-regular-small", "context": "S" },
+    { "token": "accordion-top-to-text-regular-medium", "context": "S" },
+    { "token": "accordion-bottom-to-text-regular-medium", "context": "S" },
+    { "token": "accordion-top-to-text-regular-large", "context": "S" },
+    { "token": "accordion-bottom-to-text-regular-large", "context": "S" },
+    { "token": "accordion-top-to-text-regular-extra-large", "context": "S" },
+    { "token": "accordion-bottom-to-text-regular-extra-large", "context": "S" },
     {
       "token": "field-top-to-disclosure-icon-75-compact",
       "context": "Spacing (top/bottom to disclosure icon)"
@@ -542,16 +464,8 @@
     "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,28 +9,56 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/action-bar/"
   },
-  "options": {
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "tokenBindings": [
+  "documentBlocks": [
     {
-      "token": "action-bar-height",
-      "context": "Height"
+      "type": "purpose",
+      "content": "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time."
     },
     {
-      "token": "action-bar-minimum-width",
-      "context": "Width (minimum)"
+      "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.\n\nIn dark theme, the action bar also includes a 1px inner border to help it stand out against the background colors."
     },
     {
-      "token": "corner-radius-medium-size-extra-large",
-      "context": "Rounding"
+      "type": "guideline",
+      "content": "Action group variants (Icon-only, Label-only, Icon + label).\n\nAt larger screen or section sizes, use an action group that shows a label and icon. For smaller screen or section sizes, use an icon-only action group. Place any overflow actions into a action menu at the end of the bar."
     },
+    {
+      "type": "guideline",
+      "content": "Action disabled behavior.\n\nIndividual actions can be disabled in an action bar which follow the isDisabled property of the action group. This 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": "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."
+    },
+    {
+      "type": "guideline",
+      "content": "Motion and stickiness.\n\nAction bars slide and fade in from the bottom of the page or section. They remain or \"stick\" there until a user either deselects the items or navigates away."
+    },
+    {
+      "type": "do-dont",
+      "content": "Don't add a drag bar",
+      "dont": "An action bar appears when items in a list or grid view are selected, and it remains in place until items are deselected or a user navigates away. Action bars can not be moved or dragged."
+    },
+    {
+      "type": "guideline",
+      "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": "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 } },
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "tokenBindings": [
+    { "token": "action-bar-height", "context": "Height" },
+    { "token": "action-bar-minimum-width", "context": "Width (minimum)" },
+    { "token": "corner-radius-medium-size-extra-large", "context": "Rounding" },
     {
       "token": "action-bar-top-to-content-area",
       "context": "Spacing (padding)"
@@ -55,66 +83,24 @@
       "token": "action-bar-close-button-to-counter",
       "context": "Spacing (counter)"
     },
-    {
-      "token": "background-elevated-color",
-      "context": "Background (default)"
-    },
+    { "token": "background-elevated-color", "context": "Background (default)" },
     {
       "token": "neutral-content-color-default",
       "context": "Background (emphasized)"
     },
-    {
-      "token": "action-bar-border",
-      "context": "Border"
-    },
-    {
-      "token": "drop-shadow-elevated-color",
-      "context": "Drop shadow"
-    },
-    {
-      "token": "drop-shadow-elevated-x",
-      "context": "Drop shadow"
-    },
-    {
-      "token": "drop-shadow-elevated-y",
-      "context": "Drop shadow"
-    },
-    {
-      "token": "drop-shadow-elevated-blur",
-      "context": "Drop shadow"
-    },
-    {
-      "token": "action-bar-counter-font-size",
-      "context": "Counter"
-    },
-    {
-      "token": "line-height-100",
-      "context": "Counter"
-    },
-    {
-      "token": "cjk-line-height-100",
-      "context": "Counter"
-    },
-    {
-      "token": "accent-background-color-default",
-      "context": "Background"
-    },
-    {
-      "token": "accent-background-color-hover",
-      "context": "Background"
-    },
-    {
-      "token": "accent-background-color-down",
-      "context": "Background"
-    },
-    {
-      "token": "accent-background-color-key-focus",
-      "context": "Background"
-    },
-    {
-      "token": "white",
-      "context": "Icon and Clear icon"
-    },
+    { "token": "action-bar-border", "context": "Border" },
+    { "token": "drop-shadow-elevated-color", "context": "Drop shadow" },
+    { "token": "drop-shadow-elevated-x", "context": "Drop shadow" },
+    { "token": "drop-shadow-elevated-y", "context": "Drop shadow" },
+    { "token": "drop-shadow-elevated-blur", "context": "Drop shadow" },
+    { "token": "action-bar-counter-font-size", "context": "Counter" },
+    { "token": "line-height-100", "context": "Counter" },
+    { "token": "cjk-line-height-100", "context": "Counter" },
+    { "token": "accent-background-color-default", "context": "Background" },
+    { "token": "accent-background-color-hover", "context": "Background" },
+    { "token": "accent-background-color-down", "context": "Background" },
+    { "token": "accent-background-color-key-focus", "context": "Background" },
+    { "token": "white", "context": "Icon and Clear icon" },
     {
       "token": "neutral-selected-background-color-default",
       "context": "Background"
@@ -131,10 +117,7 @@
       "token": "neutral-selected-background-color-key-focus",
       "context": "Background"
     },
-    {
-      "token": "gray-25",
-      "context": "Icon and Clear icon"
-    },
+    { "token": "gray-25", "context": "Icon and Clear icon" },
     {
       "token": "neutral-content-color-hover",
       "context": "Control (selected, non emphasized)"
@@ -167,10 +150,7 @@
       "token": "neutral-subdued-content-color-default",
       "context": "Step text"
     },
-    {
-      "token": "neutral-subdued-content-color-hover",
-      "context": "Step text"
-    },
+    { "token": "neutral-subdued-content-color-hover", "context": "Step text" },
     {
       "token": "neutral-subdued-content-color-key-focus",
       "context": "Step text"
@@ -187,28 +167,15 @@
       "token": "neutral-subdued-background-color-key-focus",
       "context": "Step visual"
     },
-    {
-      "token": "neutral-background-color-default",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-background-color-key-focus",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-visual-color",
-      "context": "Step visual"
-    }
+    { "token": "neutral-background-color-default", "context": "Step visual" },
+    { "token": "neutral-background-color-key-focus", "context": "Step visual" },
+    { "token": "neutral-visual-color", "context": "Step visual" }
   ],
   "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" }
     ]
   }
 }