@adobe/spectrum-design-data 0.0.0-size-token-taxonomy-20260929225107

package/components/breadcrumbs.json

@@ -0,0 +1,213 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/breadcrumbs.json",
+  "specVersion": "1.0.0-draft",
+  "name": "breadcrumbs",
+  "displayName": "Breadcrumbs",
+  "description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
+  },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app."
+    },
+    {
+      "type": "guideline",
+      "content": "When set to true, the breadcrumb item is displayed as an icon only."
+    },
+    {
+      "type": "guideline",
+      "content": "Separators visually divide breadcrumb items and convey hierarchy."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs can include multiple items, but too many levels can overwhelm users. Limit the hierarchy to four items (including the root, if shown) to provide clear context while keeping truncated options accessible."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs come in two sizes: medium, and large. The medium size is the default and most frequently used option."
+    },
+    {
+      "type": "guideline",
+      "content": "The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display."
+    },
+    {
+      "type": "guideline",
+      "content": "The truncation menu displays all options within a breadcrumb. Items are listed with the hierarchy ordered from top (root) to bottom and include the currently selected item."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs need a consistent hierarchical structure because they create a path for discovery and context for a user’s current location."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs should be a form of navigating a linear hierarchy. They should not be used for any other interactions, such as displaying filters."
+    },
+    {
+      "type": "guideline",
+      "content": "The truncation menu should display all available options within the hierarchy where a user is located — not as indented. Doing this provides context for the directionality of how the menu is being displayed. Adding indentation to the menu items does not add value to understanding the hierarchy, and it can actually decrease the readability of the menu options."
+    },
+    {
+      "type": "guideline",
+      "content": "When list items are truncated into a menu but the label text is still too large for the horizontal space, truncate the text with an ellipsis. By default, truncation should occur at the end of the title. If your users need to see the end of truncated titles, truncating the middle of the title is acceptable."
+    },
+    {
+      "type": "guideline",
+      "content": "When the breadcrumb title is truncated, a tooltip should display the full title when the user hovers, keyboard focuses, or single-taps on mobile."
+    },
+    {
+      "type": "guideline",
+      "content": "Prioritize using the truncation menu when breadcrumb labels are long. Never truncate more than one breadcrumb label. If the current location has a long label, all items can be truncated into the menu."
+    },
+    {
+      "type": "guideline",
+      "content": "Truncation should be avoided by way of the breadcrumbs overflow behavior, although in some cases the final breadcrumb title may truncate with an ellipsis."
+    },
+    {
+      "type": "guideline",
+      "content": "Be mindful of your user’s cognitive load and truncate breadcrumbs appropriately. Displaying too many levels can be overwhelming. By displaying only 4 items in the hierarchy (including the root item, if you are displaying it), users will quickly understand context while still having easy access to any truncated options. Truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display."
+    },
+    {
+      "type": "guideline",
+      "content": "Don't use icons within the labels for breadcrumbs. Since breadcrumb labels are horizontally distributed, icons disrupt the rhythm and readability of the list."
+    },
+    {
+      "type": "guideline",
+      "content": "Breadcrumbs are a way for traveling up a hierarchical navigation and should not be mixed with controls intended for lateral or non-hierarchical navigation."
+    }
+  ],
+  "options": {
+    "isMultiline": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb items will wrap to multiple lines."
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "description": "Controls the overall size of the breadcrumb component.",
+      "values": [
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of breadcrumb items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the breadcrumb item."
+          },
+          "href": {
+            "type": "string",
+            "description": "Optional URL the breadcrumb item links to."
+          },
+          "isCurrent": {
+            "type": "boolean",
+            "description": "Indicates if the breadcrumb item represents the current page.",
+            "default": false
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "required": ["label"]
+      }
+    },
+    "separator": {
+      "type": "string",
+      "default": "chevron",
+      "description": "The separator icon used between breadcrumb items.",
+      "values": [
+        {
+          "value": "chevron"
+        },
+        {
+          "value": "none"
+        }
+      ]
+    },
+    "isTruncated": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb item is truncated and displayed as icon only."
+    },
+    "sizeOverride": {
+      "type": "string",
+      "description": "Overrides the size of the breadcrumb items when isMultiline is true.",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    }
+  },
+  "anatomy": [
+    {
+      "name": "separator-icon",
+      "description": "Icon separating breadcrumb items."
+    }
+  ],
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "drag-and-drop",
+      "trigger": "prop"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "intents": ["navigate"],
+    "focusable": true,
+    "keyboardIntents": ["navigate-items", "activate"],
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/button-group.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "button-group",
+  "displayName": "Button group",
+  "description": "A button group is a grouping of buttons whose actions are related to each other.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/button-group/"
+  },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "A button group is a grouping of buttons whose actions are related to each other."
+    },
+    {
+      "type": "guideline",
+      "content": "Button groups organize related buttons into a single group for presenting multiple, related actions."
+    },
+    {
+      "type": "guideline",
+      "content": "A button group in a disabled state shows that the 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 a button group may become available later."
+    },
+    {
+      "type": "guideline",
+      "content": "This option stacks button groups vertically when horizontal space is limited, placing the most important action at the bottom."
+    },
+    {
+      "type": "guideline",
+      "content": "Button 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": "A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited."
+    },
+    {
+      "type": "guideline",
+      "content": "When horizontal space is limited, button groups stack vertically. Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom."
+    },
+    {
+      "type": "guideline",
+      "content": "Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be right-aligned inside container components such as dialogs, popovers, or cards."
+    },
+    {
+      "type": "guideline",
+      "content": "The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right."
+    },
+    {
+      "type": "guideline",
+      "content": "Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the most critical action in a group doesn’t have an icon, don’t use icons in the remaining lower-level actions."
+    },
+    {
+      "type": "guideline",
+      "content": "Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action."
+    }
+  ],
+  "options": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "overflowMode": {
+      "type": "string",
+      "default": "wrap",
+      "values": [
+        {
+          "value": "wrap"
+        },
+        {
+          "value": "collapse"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "role": "group",
+    "intents": ["trigger"],
+    "focusable": false,
+    "wcag": [
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/button.json

@@ -0,0 +1,239 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button.json",
+  "specVersion": "1.0.0-draft",
+  "name": "button",
+  "displayName": "Button",
+  "description": "Buttons allow users to perform an action or to navigate to another page.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/button/"
+  },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Button",
+      "package": "@spectrum-web-components/button",
+      "notes": "Spectrum Web Components custom element: sp-button."
+    },
+    {
+      "platform": "web",
+      "componentName": "Button",
+      "package": "@react-spectrum/button"
+    }
+  ],
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Buttons enable actions or navigation between views. They come in multiple styles to support different levels of emphasis, and are commonly used to guide progression through a flow."
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard focus.\n\nA 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",
+      "content": "Tooltip when the label is hidden.\n\nWhen the button label is hidden, a tooltip is shown on hover that displays the label text and, if appropriate, a keyboard shortcut."
+    },
+    {
+      "type": "guideline",
+      "content": "Flexible width.\n\nThe width of a button automatically adjusts to fit the label text. The padding on each side of the button is equal to half its height."
+    },
+    {
+      "type": "guideline",
+      "content": "Minimum width.\n\nButtons have a minimum width of 2.25× the height of the button. This ensures that small buttons retain an identifiable shape."
+    },
+    {
+      "type": "guideline",
+      "content": "Text overflow.\n\nWhen the button text is too long for the horizontal space available, it wraps to form another line."
+    },
+    {
+      "type": "guideline",
+      "content": "Cursor style.\n\nButtons use the default arrow cursor for all states, including hover and down. The only exception occurs on the web; if the button is using the href property it will display the pointer cursor instead."
+    },
+    {
+      "type": "guideline",
+      "content": "Delay before pending state.\n\nSome progress can be very quick. In order to avoid showing a progress circle for a fraction of a second, which results in an unpleasant flickering, there is a delay of 1 second before the pending state appears. During this delay, the button continues to visually respond to interactive events (e.g., hover), but additional clicks do not result in repeated submissions."
+    },
+    {
+      "type": "guideline",
+      "content": "Use icons only when necessary.\n\nIcons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration."
+    },
+    {
+      "type": "do-dont",
+      "content": "Don't override color",
+      "dont": "Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible."
+    },
+    {
+      "type": "guideline",
+      "content": "When to use static black and static white.\n\nTo ensure maximum contrast with the background, use static black for light backgrounds and images, and use static white for dark backgrounds and images. Avoid placing static components on top of busy images with a lot of variance in contrast."
+    },
+    {
+      "type": "do-dont",
+      "content": "Don't use the pending state for long progress",
+      "dont": "The pending state should be reserved for indeterminate actions that are expected to take 5 seconds or less. For determinate or longer actions, use a [progress bar](https://spectrum.adobe.com/page/progress-bar/) or [progress circle](https://spectrum.adobe.com/page/progress-circle/) outside of the button."
+    },
+    {
+      "type": "guideline",
+      "content": "Use a button group to show additional actions.\n\nInstead of a single split button (now a deprecated component), use a [button group](https://spectrum.adobe.com/page/button-group/) to show any additional actions related to the most critical action."
+    },
+    {
+      "type": "guideline",
+      "content": "Display a popover when featuring subsequent options.\n\nIn some instances, it's possible to have a call to action button display a popover (or tray) to feature subsequent options. These options should extend and parallel the action of the button. Do not include arbitrary or unrelated options."
+    }
+  ],
+  "options": {
+    "variant": {
+      "type": "string",
+      "default": "accent",
+      "description": "Visual emphasis level.",
+      "values": [
+        {
+          "value": "accent"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "primary"
+        },
+        {
+          "value": "secondary"
+        }
+      ]
+    },
+    "style": {
+      "type": "string",
+      "default": "fill",
+      "values": [
+        {
+          "value": "fill"
+        },
+        {
+          "value": "outline"
+        }
+      ]
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isPending": {
+      "type": "boolean",
+      "default": false
+    },
+    "isLabelHidden": {
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json",
+      "description": "Icon placed at the start of the button. Required when isLabelHidden is true."
+    },
+    "staticColor": {
+      "type": "string",
+      "description": "Static color for use on colored backgrounds.",
+      "values": [
+        {
+          "value": "white"
+        },
+        {
+          "value": "black"
+        }
+      ]
+    }
+  },
+  "slots": [
+    {
+      "name": "default",
+      "description": "Text label of the button.",
+      "required": false
+    },
+    {
+      "name": "icon",
+      "description": "Icon placed at the start of the button."
+    }
+  ],
+  "anatomy": [
+    {
+      "name": "icon",
+      "description": "Leading icon."
+    },
+    {
+      "name": "label",
+      "description": "Button text.",
+      "required": true
+    }
+  ],
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction",
+      "precedence": 50
+    },
+    {
+      "name": "focus",
+      "trigger": "interaction",
+      "precedence": 60,
+      "layered": true
+    },
+    {
+      "name": "disabled",
+      "trigger": "prop",
+      "precedence": 100
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "corner-radius-button-small",
+      "context": "Rounding (with wrapping)"
+    },
+    {
+      "token": "corner-radius-button-large",
+      "context": "Rounding (with wrapping)"
+    },
+    {
+      "token": "corner-radius-button-extra-large",
+      "context": "Rounding (with wrapping)"
+    }
+  ],
+  "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"
+      }
+    ]
+  }
+}