@adobe/design-data-spec 0.2.0 → 0.4.0

package/components/button-group.json

@@ -0,0 +1,37 @@
+{
+  "$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/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "enum": ["horizontal", "vertical"]
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "overflowMode": {
+      "type": "string",
+      "enum": ["wrap", "collapse"],
+      "default": "wrap"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/button.json

@@ -0,0 +1,70 @@
+{
+  "$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/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": ["accent", "negative", "primary", "secondary"],
+      "default": "accent",
+      "description": "Visual emphasis level."
+    },
+    "style": {
+      "type": "string",
+      "enum": ["fill", "outline"],
+      "default": "fill"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "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",
+      "enum": ["white", "black"],
+      "description": "Static color for use on colored backgrounds."
+    }
+  },
+  "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"
+  }
+}

package/components/calendar.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/calendar.json",
+  "specVersion": "1.0.0-draft",
+  "name": "calendar",
+  "displayName": "Calendar",
+  "description": "Calendars display days, weeks, and months, allowing users to select dates or ranges.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/calendar/"
+  },
+  "options": {
+    "currentMonth": {
+      "type": "number",
+      "minimum": 1,
+      "maximum": 12,
+      "description": "The month currently displayed in the calendar (1 = January, 12 = December)."
+    },
+    "currentYear": {
+      "type": "number",
+      "description": "The year currently displayed in the calendar (Gregorian year number)."
+    },
+    "selectionMode": {
+      "type": "string",
+      "enum": ["single", "range"],
+      "default": "single",
+      "description": "Controls whether the calendar allows selecting a single date or a date range."
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "minValue": {
+      "type": "string",
+      "description": "The minimum allowed date that a user may select (ISO format string)."
+    },
+    "maxValue": {
+      "type": "string",
+      "description": "The maximum allowed date that a user may select (ISO format string)."
+    },
+    "showTimeZone": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether to show a time zone indicator in the calendar."
+    },
+    "days": {
+      "type": "array",
+      "description": "An array of days displayed in the current calendar view.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "date": {
+            "type": "string",
+            "description": "The date represented by this day (ISO format string)."
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day is disabled."
+          },
+          "isSelected": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day is currently selected."
+          },
+          "isRangeStart": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day is the start of a selected range."
+          },
+          "isRangeEnd": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day is the end of a selected range."
+          },
+          "isUnavailable": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day is unavailable for selection. If true, the day appears with a strikethrough."
+          },
+          "isToday": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this day represents the current date."
+          },
+          "state": {
+            "type": "string",
+            "enum": ["default", "hover", "keyboard focus"],
+            "default": "default",
+            "description": "The interaction state of the day cell."
+          }
+        },
+        "required": ["date"]
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/cards.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/cards.json",
+  "specVersion": "1.0.0-draft",
+  "name": "cards",
+  "displayName": "Cards",
+  "description": "Cards group related content into distinct layouts depending on context.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/cards/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": [
+        "asset",
+        "collection",
+        "flex",
+        "gallery",
+        "horizontal",
+        "product"
+      ],
+      "default": "asset",
+      "description": "Determines which card layout variant is used."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/checkbox-group.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/checkbox-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "checkbox-group",
+  "displayName": "Checkbox group",
+  "description": "A checkbox group is a grouping of checkboxes that are related to each other.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/checkbox-group/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side"],
+      "default": "top"
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "vertical"
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/checkbox.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/checkbox.json",
+  "specVersion": "1.0.0-draft",
+  "name": "checkbox",
+  "displayName": "Checkbox",
+  "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/checkbox/"
+  },
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "When the label is not defined, the checkbox appears as a standalone checkbox."
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "isIndeterminate": {
+      "type": "boolean",
+      "default": false,
+      "description": "When a checkbox is indeterminate, it overrides the selection state."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/close-button.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/close-button.json",
+  "specVersion": "1.0.0-draft",
+  "name": "close-button",
+  "displayName": "Close button",
+  "description": "The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/close-button/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "iconSize": {
+      "type": "string"
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"],
+      "description": "Static color must not be set for the default version of this component."
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/coach-indicator.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/coach-indicator.json",
+  "specVersion": "1.0.0-draft",
+  "name": "coach-indicator",
+  "displayName": "Coach indicator",
+  "description": "Coach indicators help guide users through interfaces by highlighting important areas or features during onboarding and feature discovery.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/coach-indicator/"
+  },
+  "options": {
+    "cornerRounding": {
+      "type": "string",
+      "enum": [
+        "none",
+        "corner-radius-75",
+        "corner-radius-100",
+        "corner-radius-200",
+        "corner-radius-300",
+        "corner-radius-400",
+        "corner-radius-500",
+        "corner-radius-600",
+        "corner-radius-700",
+        "corner-radius-800",
+        "full"
+      ]
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white"],
+      "description": "If not set to white, the coach indicator uses the default color."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/coach-mark.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/coach-mark.json",
+  "specVersion": "1.0.0-draft",
+  "name": "coach-mark",
+  "displayName": "Coach mark",
+  "description": "Coach marks provide contextual guidance to users by highlighting specific interface elements.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/coach-mark/"
+  },
+  "options": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "hideImage": {
+      "type": "boolean",
+      "default": false,
+      "description": "Optional image to display in dialog."
+    },
+    "actions": {
+      "type": "object",
+      "description": "Configuration for coach mark actions.",
+      "properties": {
+        "topActionLabel": {
+          "type": "string",
+          "description": "Optional action button displayed at the top, often for a menu."
+        },
+        "footerContent": {
+          "type": "string",
+          "description": "Optional footer content to display in the dialog footer like a checkbox."
+        },
+        "primaryActionLabel": {
+          "type": "string",
+          "description": "Label for the primary footer action."
+        },
+        "secondaryActionLabel": {
+          "type": "string",
+          "description": "Label for the secondary footer action (optional)."
+        },
+        "cancelActionLabel": {
+          "type": "string",
+          "default": "cancel",
+          "description": "Label for the cancel action (optional)."
+        }
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/code.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/code.json",
+  "specVersion": "1.0.0-draft",
+  "name": "code",
+  "displayName": "Code",
+  "description": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/code/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l", "xl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/color-area.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-area.json",
+  "specVersion": "1.0.0-draft",
+  "name": "color-area",
+  "displayName": "Color area",
+  "description": "A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/color-area/"
+  },
+  "options": {
+    "background": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "x-value": {
+      "type": "number",
+      "description": "Number (from x-minValue to x-maxValue)"
+    },
+    "x-minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "x-maxValue": {
+      "type": "number",
+      "default": 100
+    },
+    "y-value": {
+      "type": "number",
+      "description": "Number (from y-minValue to y-maxValue)"
+    },
+    "y-minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "y-maxValue": {
+      "type": "number",
+      "default": 100
+    },
+    "step": {
+      "type": "number",
+      "default": 1
+    },
+    "width": {
+      "type": "number",
+      "default": 192,
+      "description": "units: px"
+    },
+    "height": {
+      "type": "number",
+      "default": 192,
+      "description": "units: px"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/color-handle.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-handle.json",
+  "specVersion": "1.0.0-draft",
+  "name": "color-handle",
+  "displayName": "Color handle",
+  "description": "Color handles allow users to select and adjust colors in a color picker.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/color-handle/"
+  },
+  "options": {
+    "channel": {
+      "type": "string",
+      "enum": [
+        "hue",
+        "saturation",
+        "lightness",
+        "red",
+        "green",
+        "blue",
+        "alpha"
+      ],
+      "default": "hue",
+      "description": "Which channel of the color this handle controls. Use 'alpha' for opacity."
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/color-loupe.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/color-loupe.json",
+  "specVersion": "1.0.0-draft",
+  "name": "color-loupe",
+  "displayName": "Color loupe",
+  "description": "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/color-loupe/"
+  },
+  "options": {
+    "value": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/hex-color.json"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}