@adobe/design-data-spec 0.3.0 → 0.4.0

package/components/slider.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/slider.json",
+  "specVersion": "1.0.0-draft",
+  "name": "slider",
+  "displayName": "Slider",
+  "description": "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/slider/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "enum": ["top", "side"]
+    },
+    "value": {
+      "type": "number",
+      "description": "from minValue to maxValue"
+    },
+    "minValue": {
+      "type": "number",
+      "default": 0
+    },
+    "maxValue": {
+      "type": "number",
+      "default": 100
+    },
+    "isRange": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the slider will allow selection of a range of values by displaying two handles."
+    },
+    "step": {
+      "type": "number",
+      "default": 1
+    },
+    "valueFormat": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "progressionScale": {
+      "type": "string",
+      "enum": ["linear", "log"],
+      "default": "linear"
+    },
+    "width": {
+      "type": "number"
+    },
+    "hasFill": {
+      "type": "boolean",
+      "default": false
+    },
+    "fillStart": {
+      "type": "number",
+      "default": 0
+    },
+    "hasGradient": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEditable": {
+      "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/standard-dialog.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/standard-dialog.json",
+  "specVersion": "1.0.0-draft",
+  "name": "standard-dialog",
+  "displayName": "Standard dialog",
+  "description": "Standard dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/standard-dialog/"
+  },
+  "options": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "hideImage": {
+      "type": "boolean",
+      "default": false,
+      "description": "Optional image to display in dialog."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m"
+    },
+    "hideCloseButton": {
+      "type": "boolean",
+      "default": false
+    },
+    "footerContent": {
+      "type": "string",
+      "description": "Optional footer content to display in the dialog footer like a checkbox."
+    },
+    "primaryActionLabel": {
+      "type": "string"
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "cancelActionLabel": {
+      "type": "string",
+      "default": "cancel",
+      "description": "If undefined, this button does not appear."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/standard-panel.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/standard-panel.json",
+  "specVersion": "1.0.0-draft",
+  "name": "standard-panel",
+  "displayName": "Standard Panel",
+  "description": "Standard Panels provide a flexible container for grouping related content and actions.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/standard-panel/"
+  },
+  "options": {
+    "container": {
+      "type": "string",
+      "enum": ["anchored", "floating", "dragged"],
+      "default": "anchored"
+    },
+    "label": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular", "spacious"],
+      "default": "regular"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["primary", "secondary"],
+      "default": "primary"
+    },
+    "hideGripper": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideCloseButton": {
+      "type": "boolean",
+      "default": false
+    },
+    "hideDivider": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/status-light.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/status-light.json",
+  "specVersion": "1.0.0-draft",
+  "name": "status-light",
+  "displayName": "Status light",
+  "description": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/status-light/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "enum": [
+        "informative",
+        "neutral",
+        "positive",
+        "notice",
+        "negative",
+        "indigo",
+        "celery",
+        "chartreuse",
+        "yellow",
+        "magenta",
+        "fuchsia",
+        "purple",
+        "seafoam",
+        "pink",
+        "turquoise",
+        "cinnamon",
+        "brown",
+        "silver",
+        "gray",
+        "red",
+        "orange",
+        "green",
+        "cyan"
+      ],
+      "default": "informative"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/steplist.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/steplist.json",
+  "specVersion": "1.0.0-draft",
+  "name": "steplist",
+  "displayName": "Steplist",
+  "description": "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/steplist/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "enum": ["horizontal", "vertical"],
+      "default": "horizontal"
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of step items in the step list.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the step item."
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether the step item is disabled."
+          },
+          "stepState": {
+            "type": "string",
+            "enum": [
+              "completed default",
+              "completed hover",
+              "current default",
+              "incomplete default"
+            ],
+            "default": "current default",
+            "description": "The current state of the step item."
+          }
+        },
+        "required": ["label", "stepState"]
+      }
+    },
+    "currentStep": {
+      "type": "string",
+      "description": "The identifier or label of the currently active step."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/swatch-group.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/swatch-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "swatch-group",
+  "displayName": "Swatch group",
+  "description": "A swatch group is a grouping of swatches that are related to each other.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/swatch-group/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l"],
+      "default": "m"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular", "spacious"],
+      "default": "regular"
+    },
+    "enableSelection": {
+      "type": "boolean",
+      "default": false
+    },
+    "selectionMode": {
+      "type": "string",
+      "description": "Only applicable if selection is enabled.",
+      "enum": ["single", "multiple"],
+      "default": "single"
+    },
+    "allowsEmptySelection": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if selection is enabled."
+    },
+    "cornerRadius": {
+      "type": "string",
+      "enum": ["none", "full", "partial"],
+      "default": "none",
+      "description": "Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/swatch.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/swatch.json",
+  "specVersion": "1.0.0-draft",
+  "name": "swatch",
+  "displayName": "Swatch",
+  "description": "A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/swatch/"
+  },
+  "options": {
+    "preview": {
+      "type": "string",
+      "description": "This will vary depending on implementation."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["xs", "s", "m", "l"],
+      "default": "m"
+    },
+    "shape": {
+      "type": "string",
+      "enum": ["square", "rectangle"],
+      "default": "square"
+    },
+    "cornerRounding": {
+      "type": "string",
+      "enum": ["none", "partial", "full"],
+      "default": "none",
+      "description": "Determines the corner radius of the swatch. Partial refers to corner-radius-75."
+    },
+    "isSelected": {
+      "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/switch.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/switch.json",
+  "specVersion": "1.0.0-draft",
+  "name": "switch",
+  "displayName": "Switch",
+  "description": "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/switch/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "isSelected": {
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isReadOnly": {
+      "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/tab-bar-ios.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/tab-bar-ios.json",
+  "specVersion": "1.0.0-draft",
+  "name": "tab-bar-ios",
+  "displayName": "Tab bar (iOS)",
+  "description": "Tab bar is a top-level navigation control for iOS apps.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/tab-bar-ios/"
+  },
+  "options": {
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "enum": ["bottom", "side"],
+      "default": "bottom"
+    },
+    "icon": {
+      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json"
+    },
+    "background": {
+      "type": "string",
+      "enum": ["primary", "secondary"],
+      "default": "primary"
+    },
+    "hasBadge": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}

package/components/table.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/table.json",
+  "specVersion": "1.0.0-draft",
+  "name": "table",
+  "displayName": "Table",
+  "description": "Tables display information in rows and columns, allowing users to compare and scan structured data.",
+  "meta": {
+    "category": "data visualization",
+    "documentationUrl": "https://spectrum.adobe.com/page/table/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l"],
+      "default": "m",
+      "description": "Controls the density of table rows."
+    },
+    "hideHeader": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the table header is hidden."
+    },
+    "header": {
+      "type": "object",
+      "description": "Configuration for the table header row.",
+      "properties": {
+        "alignment": {
+          "type": "string",
+          "enum": ["left", "right"],
+          "default": "left",
+          "description": "Alignment of the table header text."
+        },
+        "state": {
+          "type": "string",
+          "enum": ["default", "hover", "down", "keyboard focus"],
+          "default": "default",
+          "description": "Interaction state of the header row."
+        }
+      }
+    },
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular", "spacious"],
+      "default": "regular"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the table uses a quiet visual style."
+    },
+    "isSortable": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, table columns can be sorted."
+    },
+    "columns": {
+      "type": "array",
+      "description": "An array of column definitions for the table.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "key": {
+            "type": "string",
+            "description": "Unique identifier for the column."
+          },
+          "label": {
+            "type": "string",
+            "description": "The header text displayed for the column."
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "text",
+              "number",
+              "avatar",
+              "date",
+              "sparkline",
+              "select",
+              "layout"
+            ],
+            "default": "text",
+            "description": "Defines the data type for the column."
+          },
+          "resizing": {
+            "type": "string",
+            "enum": ["fluid", "fixed"],
+            "default": "fluid",
+            "description": "Defines whether the column width is fluid or fixed."
+          },
+          "summary placement": {
+            "type": "string",
+            "enum": ["top", "bottom"],
+            "default": "bottom",
+            "description": "Placement of the summary row for this column, if applicable."
+          },
+          "summary text": {
+            "type": "string",
+            "description": "Text to display in the summary row for this column, if applicable."
+          },
+          "isSortable": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether this column is sortable."
+          }
+        },
+        "required": ["key", "label", "type"]
+      }
+    },
+    "rows": {
+      "type": "array",
+      "description": "An array of row data for the table.",
+      "items": {
+        "type": "object",
+        "description": "Each object represents a single row, keyed by column IDs."
+      }
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  }
+}