@adobe/design-data-spec 0.3.0 → 0.4.0

package/components/in-field-progress-button.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/in-field-progress-button.json",
+  "specVersion": "1.0.0-draft",
+  "name": "in-field-progress-button",
+  "displayName": "In field progress button",
+  "description": "In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-button/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["disclosure", "clear", "dash", "add"]
+    },
+    "isQuiet": {
+      "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/in-field-progress-circle.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/in-field-progress-circle.json",
+  "specVersion": "1.0.0-draft",
+  "name": "in-field-progress-circle",
+  "displayName": "In field progress circle",
+  "description": "In field progress circles indicate progress for loading states within form fields and input areas.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-circle/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/in-line-alert.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/in-line-alert.json",
+  "specVersion": "1.0.0-draft",
+  "name": "in-line-alert",
+  "displayName": "In-line alert",
+  "description": "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-line-alert/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": [
+        "neutral",
+        "informative",
+        "positive",
+        "notice",
+        "negative",
+        "accent"
+      ],
+      "default": "neutral"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["bold", "subtle", "outline"],
+      "default": "outline",
+      "description": "The visual style of the alert."
+    },
+    "href": {
+      "type": "string",
+      "description": "Optional URL within in-line alert content like a 'Learn more' link."
+    },
+    "heading": {
+      "type": "string",
+      "description": "Optional heading text displayed at the top of the alert."
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/link.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/link.json",
+  "specVersion": "1.0.0-draft",
+  "name": "link",
+  "displayName": "Link",
+  "description": "Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/link/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": ["primary", "secondary"],
+      "default": "primary"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "staticColor": {
+      "type": "string",
+      "enum": ["white", "black"],
+      "description": "Static color must not be set for the default version of this component."
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/list-view.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/list-view.json",
+  "specVersion": "1.0.0-draft",
+  "name": "list-view",
+  "displayName": "List view",
+  "description": "List views display rows of data or options that users can browse, select, and interact with.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/list-view/"
+  },
+  "options": {
+    "selectionMode": {
+      "type": "string",
+      "enum": ["none", "single", "multiple"],
+      "default": "single",
+      "description": "Defines how many items can be selected at once."
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the list view uses a quiet visual style."
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of list view items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "Primary text displayed for the item."
+          },
+          "description": {
+            "type": "string",
+            "description": "Secondary text displayed under the label (optional)."
+          },
+          "hideCheckbox": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the checkbox is hidden."
+          },
+          "hideDragHandle": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the drag handle is hidden."
+          },
+          "hideNavigationIndicator": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the navigation indicator is hidden."
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the item is disabled."
+          },
+          "isSelected": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the item is selected."
+          },
+          "overflowMode": {
+            "type": "string",
+            "enum": ["wrap", "truncate"],
+            "default": "truncate",
+            "description": "Defines how text should behave when it overflows the available space."
+          },
+          "itemRounding": {
+            "type": "string",
+            "enum": ["none", "top", "bottom"],
+            "default": "none",
+            "description": "Defines the border radius of the list view item."
+          },
+          "isEmphasized": {
+            "type": "boolean",
+            "default": false
+          },
+          "state": {
+            "type": "string",
+            "enum": ["default", "hover", "dragged"],
+            "default": "default",
+            "description": "The interaction state of the list view item."
+          }
+        },
+        "required": ["label"]
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/menu.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/menu.json",
+  "specVersion": "1.0.0-draft",
+  "name": "menu",
+  "displayName": "Menu",
+  "description": "Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/menu/"
+  },
+  "options": {
+    "container": {
+      "type": "string",
+      "enum": ["popover", "tray"]
+    },
+    "label": {
+      "type": "string"
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json",
+      "description": "Icon must be present if the label is not defined."
+    },
+    "description": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "selectionMode": {
+      "type": "string",
+      "enum": ["single", "multiple", "no selection"]
+    },
+    "selectionStyle": {
+      "type": "string",
+      "enum": ["checkbox", "switch"]
+    },
+    "sectionHeader": {
+      "type": "string"
+    },
+    "isCollapsible": {
+      "type": "boolean",
+      "default": false
+    },
+    "isUnavailable": {
+      "type": "boolean",
+      "default": false
+    },
+    "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/meter.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/meter.json",
+  "specVersion": "1.0.0-draft",
+  "name": "meter",
+  "displayName": "Meter",
+  "description": "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/meter/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "enum": ["informative", "positive", "notice", "negative"],
+      "default": "informative"
+    },
+    "label": {
+      "type": "string"
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "valueLabel": {
+      "type": "string"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "value": {
+      "type": "number",
+      "minimum": 0,
+      "maximum": 1
+    },
+    "helpText": {
+      "type": "string"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/number-field.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/number-field.json",
+  "specVersion": "1.0.0-draft",
+  "name": "number-field",
+  "displayName": "Number field",
+  "description": "Number fields allow users to enter a numeric value, with optional increment and decrement buttons.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/number-field/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "enum": ["top", "side"]
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "hideStepper": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, hides in-field increment and decrement buttons (stepper)."
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/opacity-checkerboard.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/opacity-checkerboard.json",
+  "specVersion": "1.0.0-draft",
+  "name": "opacity-checkerboard",
+  "displayName": "Opacity Checkerboard",
+  "description": "Opacity checkerboards provide a visual pattern background used in color swatches and UI elements to indicate transparency or when no color is selected.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/opacity-checkerboard/"
+  },
+  "options": {
+    "verticalSize": {
+      "type": "number",
+      "enum": [16, 32, 64, 128, 256]
+    },
+    "horizontalSize": {
+      "type": "number",
+      "enum": [24, 40]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/picker.json

@@ -0,0 +1,92 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/picker.json",
+  "specVersion": "1.0.0-draft",
+  "name": "picker",
+  "displayName": "Picker",
+  "description": "Pickers (sometimes known as \"dropdowns\" or \"selects\") allow users to choose from a list of options in a limited space. The list of options can change based on the context.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/picker/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "enum": ["top", "side"]
+    },
+    "placeholder": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
+    },
+    "width": {
+      "type": "number",
+      "description": "Not applicable to quiet picker."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "necessityIndicator": {
+      "type": "string",
+      "enum": ["text", "icon"],
+      "default": "icon"
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
+    },
+    "menuContainer": {
+      "type": "string",
+      "enum": ["popover", "tray"],
+      "default": "popover"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
+    },
+    "description": {
+      "type": "string",
+      "default": null
+    },
+    "errorMessage": {
+      "type": "string",
+      "default": null
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/popover.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/popover.json",
+  "specVersion": "1.0.0-draft",
+  "name": "popover",
+  "displayName": "Popover",
+  "description": "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/popover/"
+  },
+  "options": {
+    "width": {
+      "type": "number"
+    },
+    "height": {
+      "type": "number"
+    },
+    "hideTip": {
+      "type": "boolean",
+      "default": false
+    },
+    "placement": {
+      "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": "top"
+    },
+    "offset": {
+      "type": "number",
+      "default": 8,
+      "description": "pixel measurement"
+    },
+    "crossOffset": {
+      "type": "number",
+      "default": 0
+    },
+    "containerPadding": {
+      "type": "number",
+      "default": 8,
+      "description": "pixel measurement"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}