@adobe/design-data-spec 0.3.0 → 0.4.0

package/components/color-wheel.json

@@ -0,0 +1,60 @@
+{
+  "$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-wheel.json",
+  "specVersion": "1.0.0-draft",
+  "name": "color-wheel",
+  "displayName": "Color wheel",
+  "description": "A color wheel lets users visually change an individual channel of a color on a circular track.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/color-wheel/"
+  },
+  "options": {
+    "background": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "value": {
+      "type": "number",
+      "description": "Number (from minValue to maxValue)"
+    },
+    "minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "maxValue": {
+      "type": "number",
+      "default": 360
+    },
+    "step": {
+      "type": "number",
+      "default": 1
+    },
+    "size": {
+      "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/combo-box.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/combo-box.json",
+  "specVersion": "1.0.0-draft",
+  "name": "combo-box",
+  "displayName": "Combo box",
+  "description": "Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/combo-box/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side", "in line"],
+      "default": "top"
+    },
+    "value": {
+      "type": "string"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "hasAutocomplete": {
+      "type": "boolean",
+      "default": false
+    },
+    "menuTrigger": {
+      "type": "string",
+      "enum": ["input", "focus", "manual"],
+      "default": "input"
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isReadOnly": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string"
+    },
+    "errorMessage": {
+      "type": "string"
+    }
+  },
+  "states": [
+    {
+      "name": "hover-(text-area)",
+      "trigger": "prop"
+    },
+    {
+      "name": "hover-(button-area)",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/contextual-help.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/contextual-help.json",
+  "specVersion": "1.0.0-draft",
+  "name": "contextual-help",
+  "displayName": "Contextual help",
+  "description": "Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experience and can point users to more information elsewhere.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/contextual-help/"
+  },
+  "options": {
+    "icon": {
+      "type": "string",
+      "enum": ["info", "help"],
+      "default": "info"
+    },
+    "popoverPlacement": {
+      "type": "string",
+      "enum": [
+        "top",
+        "top left",
+        "top right",
+        "top start",
+        "top end",
+        "bottom",
+        "bottom left",
+        "bottom right",
+        "bottom start",
+        "bottom end",
+        "left",
+        "left top",
+        "left bottom",
+        "start",
+        "start top",
+        "start bottom",
+        "right",
+        "right top",
+        "right bottom",
+        "end",
+        "end top",
+        "end bottom"
+      ],
+      "default": "bottom start"
+    },
+    "popoverOffset": {
+      "type": "number",
+      "default": 8
+    },
+    "href": {
+      "type": "string",
+      "description": "Optional URL within contextual help content like a 'Learn more' link."
+    },
+    "popoverCrossOffset": {
+      "type": "number",
+      "default": 0
+    },
+    "containerPadding": {
+      "type": "number",
+      "default": 8
+    }
+  },
+  "states": [
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "open",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/date-picker.json

@@ -0,0 +1,161 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/date-picker.json",
+  "specVersion": "1.0.0-draft",
+  "name": "date-picker",
+  "displayName": "Date picker",
+  "description": "A date picker lets users enter a single date or a date range. It includes a calendar popover and a field.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/date-picker/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": ["single", "double", "triple"],
+      "default": "single",
+      "description": "Controls the number of months displayed in the calendar popover."
+    },
+    "selectedDate": {
+      "type": "string",
+      "description": "The currently selected date. Used when selectionMode is single."
+    },
+    "selectedRange": {
+      "type": "object",
+      "description": "The currently selected date range, used when selectionMode is range.",
+      "properties": {
+        "start": {
+          "type": "string",
+          "description": "Range start date."
+        },
+        "end": {
+          "type": "string",
+          "description": "Range end date."
+        }
+      }
+    },
+    "dateField": {
+      "type": "object",
+      "description": "Configuration for the date input field.",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Optional text label displayed with the date field."
+        },
+        "labelPosition": {
+          "type": "string",
+          "enum": ["top", "side"],
+          "default": "top"
+        },
+        "hideLabel": {
+          "type": "boolean",
+          "default": false
+        },
+        "isDisabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "isReadOnly": {
+          "type": "boolean",
+          "default": false
+        },
+        "isRequired": {
+          "type": "boolean",
+          "default": false
+        },
+        "isError": {
+          "type": "boolean",
+          "default": false,
+          "description": "If there is an error, this property overrides show valid icon."
+        },
+        "state": {
+          "type": "string",
+          "enum": [
+            "default",
+            "hover",
+            "hover (in-field button)",
+            "focus + hover",
+            "focus + open",
+            "focus + not hover",
+            "keyboard focus"
+          ],
+          "default": "default"
+        }
+      }
+    },
+    "calendarPopover": {
+      "type": "object",
+      "description": "Configuration for the calendar popover.",
+      "properties": {
+        "isDisabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "minValue": {
+          "type": "string",
+          "description": "The minimum allowed date that a user may select."
+        },
+        "maxValue": {
+          "type": "string",
+          "description": "The maximum allowed date that a user may select (ISO format string)."
+        },
+        "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."
+        },
+        "showTimeZone": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether to show a time zone indicator in the popover."
+        },
+        "isError": {
+          "type": "boolean",
+          "default": false,
+          "description": "If the calendar popover is in an error state."
+        },
+        "timeFields": {
+          "type": "object",
+          "description": "Optional start and end time fields displayed within the calendar popover.",
+          "properties": {
+            "showStartTime": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays a start time field."
+            },
+            "showEndTime": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays an end time field."
+            },
+            "granularity": {
+              "type": "string",
+              "enum": ["hour", "minute", "second"],
+              "default": "minute",
+              "description": "The level of time granularity for the time fields."
+            },
+            "is24Hour": {
+              "type": "boolean",
+              "default": false,
+              "description": "If true, displays time in 24-hour format instead of AM/PM."
+            }
+          }
+        }
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/detail.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/detail.json",
+  "specVersion": "1.0.0-draft",
+  "name": "detail",
+  "displayName": "Detail",
+  "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/detail/"
+  },
+  "options": {
+    "script": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/typography-script.json"
+    },
+    "weight": {
+      "type": "string",
+      "enum": ["light", "default"],
+      "default": "default"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/divider.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/divider.json",
+  "specVersion": "1.0.0-draft",
+  "name": "divider",
+  "displayName": "Divider",
+  "description": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/divider/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "s"
+    },
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/drop-zone.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/drop-zone.json",
+  "specVersion": "1.0.0-draft",
+  "name": "drop-zone",
+  "displayName": "Drop zone",
+  "description": "A drop zone allows users to drag and drop files or other content into a designated area.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/drop-zone/"
+  },
+  "options": {
+    "accept": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "description": "File types that are accepted by the drop zone."
+      }
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m"
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "onDrop": {
+      "type": "string",
+      "description": "Callback function called when files are dropped onto the drop zone."
+    },
+    "onDragOver": {
+      "type": "string",
+      "description": "Callback function called when a file is dragged over the drop zone."
+    },
+    "onDragLeave": {
+      "type": "string",
+      "description": "Callback function called when a file is dragged out of the drop zone."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/field-label.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/field-label.json",
+  "specVersion": "1.0.0-draft",
+  "name": "field-label",
+  "displayName": "Field label",
+  "description": "Field labels give context to the information that a user needs to input. They're commonly used in forms.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/field-label/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["top", "side"],
+      "default": "top"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/heading.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/heading.json",
+  "specVersion": "1.0.0-draft",
+  "name": "heading",
+  "displayName": "Heading",
+  "description": "Heading is a typography component used to create various levels of hierarchies between text.",
+  "meta": {
+    "category": "typography",
+    "documentationUrl": "https://spectrum.adobe.com/page/heading/"
+  },
+  "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"
+    },
+    "weight": {
+      "type": "string",
+      "enum": ["light", "default", "heavy"],
+      "default": "default"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l", "xl", "xxl", "xxxl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/help-text.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/help-text.json",
+  "specVersion": "1.0.0-draft",
+  "name": "help-text",
+  "displayName": "Help text",
+  "description": "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/help-text/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": ["neutral", "negative"],
+      "default": "neutral"
+    },
+    "hideIcon": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if variant is negative."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Help text cannot be both disabled and negative variant."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/illustrated-message.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/illustrated-message.json",
+  "specVersion": "1.0.0-draft",
+  "name": "illustrated-message",
+  "displayName": "Illustrated message",
+  "description": "An illustrated message displays an illustration with a short title and description, often used for empty states or error states.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/illustrated-message/"
+  },
+  "options": {
+    "illustration": {
+      "type": "string",
+      "description": "Optional illustration or icon displayed above the message."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m",
+      "description": "Size of the illustration."
+    },
+    "orientation": {
+      "type": "string",
+      "enum": ["vertical", "horizontal"],
+      "default": "vertical",
+      "description": "Orientation of the illustrated message."
+    },
+    "title": {
+      "type": "string",
+      "description": "Primary heading text of the message."
+    },
+    "description": {
+      "type": "string",
+      "description": "Secondary descriptive text providing context or instructions."
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "description": "Label for the primary action button. If undefined, no primary action is shown."
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "Label for the secondary action button. If undefined, no secondary action is shown."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}