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

package/components/avatar-group.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/avatar-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "avatar-group",
+  "displayName": "Avatar group",
+  "description": "Avatar groups display a collection of avatars representing people or entities.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
+  },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Avatar groups display a collection of avatars representing people or entities."
+    },
+    {
+      "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": "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."
+    },
+    {
+      "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": "guideline",
+      "content": "When using a colored background the avatar stroke color should remain set as default for both light and dark themes."
+    }
+  ],
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "Optional text label displayed with the avatar group (e.g., group name)."
+    },
+    "size": {
+      "type": "number",
+      "default": 100,
+      "values": [
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "role": "group",
+    "focusable": false
+  }
+}

package/components/avatar.json

@@ -0,0 +1,162 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/avatar.json",
+  "specVersion": "1.0.0-draft",
+  "name": "avatar",
+  "displayName": "Avatar",
+  "description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
+  },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "An avatar is a thumbnail representation of an entity, such as a user or an organization."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    },
+    {
+      "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."
+    }
+  ],
+  "options": {
+    "size": {
+      "type": "number",
+      "default": 500,
+      "values": [
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        },
+        {
+          "value": 600
+        },
+        {
+          "value": 700
+        },
+        {
+          "value": 800
+        },
+        {
+          "value": 900
+        },
+        {
+          "value": 1000
+        },
+        {
+          "value": 1100
+        },
+        {
+          "value": 1200
+        },
+        {
+          "value": 1300
+        },
+        {
+          "value": 1400
+        },
+        {
+          "value": 1500
+        }
+      ]
+    },
+    "image": {
+      "type": "string",
+      "default": "user image",
+      "values": [
+        {
+          "value": "user image"
+        },
+        {
+          "value": "gradient image"
+        },
+        {
+          "value": "gradient"
+        },
+        {
+          "value": "guest image"
+        },
+        {
+          "value": "initials"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "showStroke": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "disabled",
+      "trigger": "prop"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/badge.json

@@ -0,0 +1,227 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/badge.json",
+  "specVersion": "1.0.0-draft",
+  "name": "badge",
+  "displayName": "Badge",
+  "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/badge/"
+  },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention."
+    },
+    {
+      "type": "guideline",
+      "content": "Badges come in four different sizes: small, medium, large, and extra-large. The small size is the default and most frequently used option. Use the other sizes sparingly to create a hierarchy of importance on a page."
+    },
+    {
+      "type": "guideline",
+      "content": "Badges can be placed as floating in a container, or they can be fixed to any edge of a container. They lose their default corner rounding on the fixed edge."
+    },
+    {
+      "type": "guideline",
+      "content": "A Badge’s style determines its visual emphasis. Badges come in three different styles: bold, subtle, and outline."
+    },
+    {
+      "type": "guideline",
+      "content": "When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:"
+    },
+    {
+      "type": "guideline",
+      "content": "When badges are for color-coded categories, they use non-semantic colors. Non-semantic variants are ideally used for when there are 8 categories or less."
+    },
+    {
+      "type": "guideline",
+      "content": "A badge can have an optional icon. If no label is used, a badge becomes icon-only and it must include an icon. An icon-only badge is best for very small spaces, and it should always include a tooltip on hover to provide more context for the icon's meaning."
+    },
+    {
+      "type": "guideline",
+      "content": "Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only."
+    },
+    {
+      "type": "guideline",
+      "content": "Badges are display elements, not actions. They should not behave like buttons or links. If an action is required, use a more appropriate component (e.g., Button, Action button)."
+    },
+    {
+      "type": "guideline",
+      "content": "When a badge's label is too long for the available horizontal space, it wraps to form another line. If there is no room for a second line of text, the badge should truncate and include a tooltip to expose the full text upon hover."
+    },
+    {
+      "type": "guideline",
+      "content": "Blue badges are easily confused with Spectrum's blue accent buttons. Only use blue badges when absolutely necessary."
+    },
+    {
+      "type": "guideline",
+      "content": "The yellow badge is reserved to communicate \"best deal\" or \"discount\" situations only. Do not use the yellow badge for other situations."
+    },
+    {
+      "type": "guideline",
+      "content": "Badges are meant to offer quick context about what category, status, or meaning an item is associated with. If your design requires multiple badges, consider using regular text metadata and reserve a single badge for only the most important status, category, or meaning instead."
+    },
+    {
+      "type": "guideline",
+      "content": "It's best to use a text label on a badge whenever possible because communicating with an icon alone may be unclear or subjective. Reserve icon-only badges for responsive cases, such as for cards in a panel that don't have space for a full badge. In related contexts, pair the icon with a label to help teach a user what the icon means. Icon-only badges should always include a tooltip on hover to show their associated label."
+    },
+    {
+      "type": "guideline",
+      "content": "Badge placement varies widely depending on the use case. In cards, place the badge on the left side of the footer, if possible. If there is no footer or if that space is filled, affix the badge to the right edge of the preview. If there is no preview, affix the badge to the top right corner of the card."
+    }
+  ],
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "When the label is not defined, the badge appears as icon-only."
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json"
+    },
+    "variant": {
+      "type": "string",
+      "values": [
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "info"
+        },
+        {
+          "value": "positive"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "indigo"
+        },
+        {
+          "value": "yellow"
+        },
+        {
+          "value": "magenta"
+        },
+        {
+          "value": "fuchsia"
+        },
+        {
+          "value": "purple"
+        },
+        {
+          "value": "seafoam"
+        },
+        {
+          "value": "accent"
+        },
+        {
+          "value": "notice"
+        },
+        {
+          "value": "gray"
+        },
+        {
+          "value": "red"
+        },
+        {
+          "value": "orange"
+        },
+        {
+          "value": "chartreuse"
+        },
+        {
+          "value": "celery"
+        },
+        {
+          "value": "green"
+        },
+        {
+          "value": "cyan"
+        },
+        {
+          "value": "blue"
+        },
+        {
+          "value": "pink"
+        },
+        {
+          "value": "turquoise"
+        },
+        {
+          "value": "brown"
+        },
+        {
+          "value": "cinnamon"
+        },
+        {
+          "value": "silver"
+        }
+      ]
+    },
+    "style": {
+      "type": "string",
+      "values": [
+        {
+          "value": "bold"
+        },
+        {
+          "value": "subtle"
+        },
+        {
+          "value": "outline"
+        }
+      ]
+    },
+    "fixed": {
+      "type": "string",
+      "default": "none",
+      "values": [
+        {
+          "value": "none"
+        },
+        {
+          "value": "top"
+        },
+        {
+          "value": "right"
+        },
+        {
+          "value": "bottom"
+        },
+        {
+          "value": "left"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "default": "s",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/bar-panel.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/bar-panel.json",
+  "specVersion": "1.0.0-draft",
+  "name": "bar-panel",
+  "displayName": "Bar panel",
+  "description": "A panel anchored to an edge, exposing a draggable gripper for resizing.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/bar-panel/"
+  },
+  "anatomy": [{ "name": "gripper" }],
+  "lifecycle": { "introduced": "1.0.0-draft" }
+}

package/components/body.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/body.json",
+  "specVersion": "1.0.0-draft",
+  "name": "body",
+  "displayName": "Body",
+  "description": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/body/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "classification": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-classification.json"
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "default": "m",
+      "values": [
+        {
+          "value": "xs"
+        },
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        },
+        {
+          "value": "xxl"
+        },
+        {
+          "value": "xxxl"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/bottom-navigation-android.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/bottom-navigation-android.json",
+  "specVersion": "1.0.0-draft",
+  "name": "bottom-navigation-android",
+  "displayName": "Bottom navigation (Android)",
+  "description": "Bottom navigation is a top-level navigation control for Android apps.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/bottom-navigation-android/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "bottom",
+      "values": [
+        {
+          "value": "bottom"
+        },
+        {
+          "value": "side"
+        }
+      ]
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json"
+    },
+    "background": {
+      "type": "string",
+      "default": "primary",
+      "values": [
+        {
+          "value": "primary"
+        },
+        {
+          "value": "secondary"
+        }
+      ]
+    },
+    "hasBadge": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "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"
+      }
+    ]
+  }
+}