@adobe/spectrum-component-api-schemas 3.0.0 → 5.0.0

package/schemas/components/cards.json

@@ -0,0 +1,238 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/cards.json",
+  "title": "Cards",
+  "description": "Cards group related content into distinct layouts depending on context.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/cards/"
+  },
+  "type": "object",
+  "definitions": {
+    "baseCard": {
+      "type": "object",
+      "properties": {
+        "size": {
+          "type": "string",
+          "enum": ["xs", "s", "m", "l", "xl"],
+          "default": "m",
+          "description": "Overall size of the card."
+        },
+        "state": {
+          "type": "string",
+          "enum": ["default", "hover", "pending"],
+          "default": "default",
+          "description": "Interaction state of the card."
+        },
+        "isSelected": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the card is selected."
+        },
+        "isQuiet": {
+          "type": "boolean",
+          "default": false,
+          "description": "Applies a quiet visual style."
+        },
+        "isDisabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Whether the card is disabled."
+        },
+        "hideCheckbox": {
+          "type": "boolean",
+          "default": false,
+          "description": "If true, the selection checkbox is hidden."
+        },
+        "actionLabel": {
+          "type": "string",
+          "description": "Optional action button label."
+        },
+        "metadata": {
+          "type": "string",
+          "description": "Optional metadata shown below the card."
+        }
+      }
+    }
+  },
+  "properties": {
+    "variant": {
+      "type": "string",
+      "enum": [
+        "asset",
+        "collection",
+        "flex",
+        "gallery",
+        "horizontal",
+        "product"
+      ],
+      "default": "asset",
+      "description": "Determines which card layout variant is used."
+    }
+  },
+  "oneOf": [
+    {
+      "allOf": [
+        {
+          "$ref": "#/definitions/baseCard"
+        },
+        {
+          "properties": {
+            "variant": {
+              "const": "asset"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "image": {
+              "type": "string",
+              "description": "Preview image."
+            },
+            "previewVariant": {
+              "type": "string",
+              "enum": [
+                "full-bleed",
+                "half-horizontal",
+                "two-thirds-horizontal",
+                "half-vertical",
+                "two-thirds-vertical"
+              ],
+              "default": "full-bleed",
+              "description": "Layout style for the preview image."
+            }
+          },
+          "required": ["image"]
+        }
+      ]
+    },
+    {
+      "allOf": [
+        {
+          "$ref": "#/definitions/baseCard"
+        },
+        {
+          "properties": {
+            "variant": {
+              "const": "collection"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "collectionName": {
+              "type": "string"
+            },
+            "itemCount": {
+              "type": "number"
+            }
+          },
+          "required": ["collectionName"]
+        }
+      ]
+    },
+    {
+      "allOf": [
+        {
+          "$ref": "#/definitions/baseCard"
+        },
+        {
+          "properties": {
+            "variant": {
+              "const": "flex"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "content": {
+              "type": "string",
+              "description": "Flexible card content."
+            }
+          }
+        }
+      ]
+    },
+    {
+      "properties": {
+        "variant": {
+          "const": "gallery"
+        },
+        "images": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "Image URLs for gallery display."
+        }
+      },
+      "required": ["images"],
+      "additionalProperties": false
+    },
+    {
+      "allOf": [
+        {
+          "$ref": "#/definitions/baseCard"
+        },
+        {
+          "properties": {
+            "variant": {
+              "const": "horizontal"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "thumbnail": {
+              "type": "string",
+              "description": "Thumbnail image on left or right."
+            },
+            "details": {
+              "type": "string",
+              "description": "Supporting text beside thumbnail."
+            }
+          }
+        }
+      ]
+    },
+    {
+      "allOf": [
+        {
+          "$ref": "#/definitions/baseCard"
+        },
+        {
+          "properties": {
+            "variant": {
+              "const": "product"
+            },
+            "title": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            },
+            "productName": {
+              "type": "string"
+            },
+            "price": {
+              "type": "string"
+            },
+            "thumbnail": {
+              "type": "string",
+              "description": "Thumbnail for the product."
+            }
+          },
+          "required": ["productName", "price", "thumbnail"]
+        }
+      ]
+    }
+  ]
+}

package/schemas/components/checkbox-group.json

@@ -39,10 +39,6 @@
       "type": "boolean",
       "default": false
     },
-    "isReadOnly": {
-      "type": "boolean",
-      "default": false
-    },
     "description": {
       "type": "string"
     },

package/schemas/components/coach-mark.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/coach-mark.json",
+  "title": "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/"
+  },
+  "type": "object",
+  "properties": {
+    "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)."
+        }
+      }
+    }
+  }
+}

package/schemas/components/color-handle.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/color-handle.json",
+  "title": "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/"
+  },
+  "type": "object",
+  "properties": {
+    "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
+    }
+  }
+}

package/schemas/components/color-slider.json

@@ -13,9 +13,23 @@
       "type": "string",
       "description": "This will vary depending on implementation."
     },
+    "channel": {
+      "type": "string",
+      "enum": [
+        "hue",
+        "saturation",
+        "lightness",
+        "red",
+        "green",
+        "blue",
+        "alpha"
+      ],
+      "default": "hue",
+      "description": "Which channel of the color this slider controls. Use 'alpha' for opacity."
+    },
     "value": {
       "type": "number",
-      "description": "Number (from minValue to maxValue)"
+      "description": "Number (from minValue to maxValue)."
     },
     "minValue": {
       "type": "number",

package/schemas/components/combo-box.json

@@ -14,7 +14,7 @@
     },
     "labelPosition": {
       "type": "string",
-      "enum": ["top", "side"],
+      "enum": ["top", "side", "in line"],
       "default": "top"
     },
     "value": {
@@ -28,10 +28,6 @@
       "enum": ["s", "m", "l", "xl"],
       "default": "m"
     },
-    "isQuiet": {
-      "type": "boolean",
-      "default": false
-    },
     "isRequired": {
       "type": "boolean",
       "default": false

package/schemas/components/contextual-help.json

@@ -44,8 +44,11 @@
     },
     "popoverOffset": {
       "type": "number",
-      "default": 6,
-      "description": "6 px (desktop) or 8 px (mobile)"
+      "default": 8
+    },
+    "href": {
+      "type": "string",
+      "description": "Optional URL within contextual help content like a 'Learn more' link."
     },
     "popoverCrossOffset": {
       "type": "number",

package/schemas/components/date-picker.json

@@ -0,0 +1,157 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/date-picker.json",
+  "title": "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/"
+  },
+  "type": "object",
+  "properties": {
+    "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."
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/schemas/components/divider.json

@@ -12,7 +12,7 @@
     "size": {
       "type": "string",
       "enum": ["s", "m", "l"],
-      "default": "small"
+      "default": "s"
     },
     "orientation": {
       "type": "string",

package/schemas/components/drop-zone.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/drop-zone.json",
+  "title": "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/"
+  },
+  "type": "object",
+  "properties": {
+    "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."
+    }
+  }
+}

package/schemas/components/illustrated-message.json

@@ -0,0 +1,52 @@
+{
+    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+    "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/illustrated-message.json",
+    "title": "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/"
+    },
+    "type": "object",
+    "properties": {
+        "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."
+            }
+        }
+    }

package/schemas/components/in-line-alert.json

@@ -17,9 +17,27 @@
         "positive",
         "notice",
         "negative",
-        "neutral"
+        "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."
     }
   }
 }