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

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @adobe/spectrum-component-api-schemas
 
+## 5.0.0
+
+### Major Changes
+
+- [#614](https://github.com/adobe/spectrum-tokens/pull/614) [`a772572`](https://github.com/adobe/spectrum-tokens/commit/a772572de88c54d279c20d7148f6ac91eb941d2a) Thanks [@AmunMRa](https://github.com/AmunMRa)! - # Component Schemas Changed (9 added, 0 deleted, 3 updated)
+
+  **Original Branch:** `main`
+
+  **New Branch:** `feat-batch4-schema-updates`
+
+  ## 🚨 Breaking Changes Detected
+
+  This PR introduces **2 breaking change(s)** to component schemas. Please review carefully and ensure proper versioning.
+
+  ### 📦 Added Components (9)
+  - `calendar` - New component schema
+  - `cards` - New component schema
+  - `coach-mark` - New component schema
+  - `illustrated-message` - New component schema
+  - `list-view` - New component schema
+  - `standard-dialog` - New component schema
+  - `standard-panel` - New component schema
+  - `table` - New component schema
+  - `takeover-dialog` - New component schema
+
+  ### 💥 Breaking Updates ⚠️ BREAKING
+
+  **picker**
+  - Removed: `isReadOnly` property
+
+  **side-navigation**
+  - Added: `items` (array) - "The list of navigation items."
+  - Added: `selectionMode` (string, default: single) - "How selection is handled for items."
+  - Added: `required` - ["items"]
+
+  ### 🔄 Non-Breaking Updates
+
+  **alert-banner**
+  - Added: `variant`
+
 ## 4.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/spectrum-component-api-schemas",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "",
   "type": "module",
   "main": "index.js",

package/schemas/components/accordion.json

@@ -11,22 +11,12 @@
   "properties": {
     "state": {
       "type": "string",
-      "enum": [
-        "default",
-        "hover",
-        "down",
-        "keyboard focus"
-      ],
+      "enum": ["default", "hover", "down", "keyboard focus"],
       "default": "default"
     },
     "size": {
       "type": "string",
-      "enum": [
-        "s",
-        "m",
-        "l",
-        "xl"
-      ],
+      "enum": ["s", "m", "l", "xl"],
       "default": "m"
     },
     "isQuiet": {
@@ -39,11 +29,7 @@
     },
     "density": {
       "type": "string",
-      "enum": [
-        "compact",
-        "regular",
-        "spacious"
-      ],
+      "enum": ["compact", "regular", "spacious"],
       "default": "regular"
     },
     "items": {
@@ -76,9 +62,7 @@
             "description": "If true, the accordion item includes an action button."
           }
         },
-        "required": [
-          "label"
-        ]
+        "required": ["label"]
       }
     },
     "isMultiple": {

package/schemas/components/alert-banner.json

@@ -14,7 +14,7 @@
     },
     "variant": {
       "type": "string",
-      "enum": ["neutral", "informative", "negative"],
+      "enum": ["neutral", "informative", "negative", "accent"],
       "default": "neutral"
     },
     "actionLabel": {

package/schemas/components/avatar-group.json

@@ -1,30 +1,22 @@
 {
-    "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
-    "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/avatar-group.json",
-    "title": "Avatar group",
-    "description": "Avatar groups display a collection of avatars representing people or entities.",
-    "meta": {
-        "category": "actions",
-        "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/avatar-group.json",
+  "title": "Avatar group",
+  "description": "Avatar groups display a collection of avatars representing people or entities.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
+  },
+  "type": "object",
+  "properties": {
+    "label": {
+      "type": "string",
+      "description": "Optional text label displayed with the avatar group (e.g., group name)."
     },
-    "type": "object",
-    "properties": {
-        "label": {
-            "type": "string",
-            "description": "Optional text label displayed with the avatar group (e.g., group name)."
-        },
-        "size": {
-            "type": "number",
-            "enum": [
-                50,
-                75,
-                100,
-                200,
-                300,
-                400,
-                500
-            ],
-            "default": 100
-        }
+    "size": {
+      "type": "number",
+      "enum": [50, 75, 100, 200, 300, 400, 500],
+      "default": 100
     }
+  }
 }

package/schemas/components/breadcrumbs.json

@@ -50,13 +50,13 @@
           }
         },
         "required": ["label"]
-        }
-      },
-      "separator": {
-        "type": "string",
-        "enum": ["chevron", "none"],
-        "default": "chevron",
-        "description": "The separator icon used between breadcrumb items."
+      }
+    },
+    "separator": {
+      "type": "string",
+      "enum": ["chevron", "none"],
+      "default": "chevron",
+      "description": "The separator icon used between breadcrumb items."
     },
     "isTruncated": {
       "type": "boolean",

package/schemas/components/calendar.json

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

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,7 +39,7 @@
       "type": "boolean",
       "default": false
     },
-      "description": {
+    "description": {
       "type": "string"
     },
     "errorMessage": {

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

@@ -1,31 +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/"
+  "$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."
     },
-    "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
-        }
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
     }
+  }
 }

package/schemas/components/color-slider.json

@@ -15,10 +15,18 @@
     },
     "channel": {
       "type": "string",
-      "enum": ["hue", "saturation", "lightness", "red", "green", "blue", "alpha"],
+      "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)."