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

package/CHANGELOG.md

@@ -1,5 +1,161 @@
 # @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
+
+- [#613](https://github.com/adobe/spectrum-tokens/pull/613) [`433efdd`](https://github.com/adobe/spectrum-tokens/commit/433efdd18f9b0842ae55acac3cd0fbc1e5e5db58) Thanks [@AmunMRa](https://github.com/AmunMRa)! - feat(component-schemas): add 10 new components with breaking changes to existing schemas
+
+  ## Component Schemas Changed (10 added, 0 deleted, 17 updated)
+
+  **Original Branch:** `main`
+
+  **New Branch:** `draft-schema-updates`
+
+  ### 🚨 Breaking Changes Detected
+
+  This PR introduces **7 breaking change(s)** to component schemas. Please review carefully and ensure proper versioning.
+
+  <details open><summary><strong>📦 Added Components (10)</strong></summary>
+  - `accordion` - New component schema
+  - `avatar-group` - New component schema
+  - `color-handle` - New component schema
+  - `date-picker` - New component schema
+  - `drop-zone` - New component schema
+  - `number-field` - New component schema
+  - `segmented-control` - New component schema
+  - `step-list` - New component schema
+  - `tag-field` - New component schema
+  - `tag-group` - New component schema
+
+  </details>
+
+  <details open><summary><strong>💥 Breaking Updates ⚠️ BREAKING</strong></summary>
+
+  **checkbox-group**
+  - Removed: `isReadOnly` property
+
+  **combo-box**
+  - Added: `labelPosition`
+  - Removed: `isQuiet` property
+
+  **contextual-help**
+  - Added: `href` (string) - "Optional URL within contextual help content like a 'Learn more' link."
+  - Removed: `popoverOffset` property
+  - Updated: `popoverOffset` - default changed to "8"
+
+  **radio-button**
+  - Added: `label` - "The text displayed next to a radio button."
+  - Removed: `label` property
+  - Updated: `label`
+
+  **radio-group**
+  - Removed: `isReadOnly` property
+
+  **tabs**
+  - Added: `items` (array) - "An array of tab items."
+  - Removed: `size` property
+  - Removed: `density` property
+  - Removed: `isFluid` property
+  - Removed: `isQuiet` property
+  - Removed: `isEmphasized` property
+  - Removed: `alignment` property
+  - Removed: `selectedItem` property
+  - Removed: `keyboardActivation` property
+  - Updated: `orientation` - default changed to "horizontal"
+
+  **tree-view**
+  - Added: `isEmphasized` (boolean)
+  - Removed: `emphasized` property
+
+  </details>
+
+  <details><summary><strong>🔄 Non-Breaking Updates</strong></summary>
+
+  **breadcrumbs**
+  - Added: `isMultiline` (boolean) - "If true, the breadcrumb items will wrap to multiple lines."
+  - Added: `size` (string, default: m) - "Controls the overall size of the breadcrumb component."
+  - Added: `items` (array) - "An array of breadcrumb items."
+  - Added: `separator` (string, default: chevron) - "The separator icon used between breadcrumb items."
+  - Added: `isTruncated` (boolean) - "If true, the breadcrumb item is truncated and displayed as icon only."
+  - Added: `sizeOverride` (string) - "Overrides the size of the breadcrumb items when isMultiline is true."
+
+  **menu**
+  - Updated: `container` - removed `default: null`
+  - Updated: `selectionMode` - removed `default: null` and added `"no selection"` to enum
+
+  **button-group**
+  - Added: `overflowMode` (string, default: wrap)
+
+  **color-slider**
+  - Added: `channel` (string, default: hue) - "Which channel of the color this slider controls. Use 'alpha' for opacity."
+  - Updated: `value` - "Number (from minValue to maxValue)."
+
+  **divider**
+  - Updated: `size` - default changed to "s"
+
+  **in-line-alert**
+  - Added: `style` (string, default: outline) - "The visual style of the alert."
+  - Added: `href` (string) - "Optional URL within in-line alert content like a 'Learn more' link."
+  - Added: `heading` (string) - "Optional heading text displayed at the top of the alert."
+  - Added: `actionLabel` (string) - "If undefined, this button does not appear."
+  - Updated: `variant`
+
+  **slider**
+  - Added: `isRange` (boolean) - "If true, the slider will allow selection of a range of values by displaying two handles."
+
+  **swatch-group**
+  - Added: `cornerRadius` (string, default: none) - "Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75."
+
+  **swatch**
+  - Added: `cornerRounding` - "Determines the corner radius of the swatch. Partial refers to corner-radius-75."
+  - Updated: `cornerRounding` - default changed to "none"
+
+  **text-field**
+  - Updated: `isError` - "If there is an error, this property overrides show valid icon."
+
+  </details>
+
 ## 3.0.0
 
 ### Major Changes

package/package.json

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

package/schemas/components/accordion.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/component.json",
+  "$id": "https://opensource.adobe.com/spectrum-tokens/schemas/components/accordion.json",
+  "title": "Accordion",
+  "description": "An accordion is a vertically stacked set of interactive headings that each contain a title and a content area.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/accordion/"
+  },
+  "type": "object",
+  "properties": {
+    "state": {
+      "type": "string",
+      "enum": ["default", "hover", "down", "keyboard focus"],
+      "default": "default"
+    },
+    "size": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "density": {
+      "type": "string",
+      "enum": ["compact", "regular", "spacious"],
+      "default": "regular"
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of accordion items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text label displayed for the accordion item."
+          },
+          "content": {
+            "type": "string",
+            "description": "The content shown when the accordion item is expanded."
+          },
+          "isExpanded": {
+            "type": "boolean",
+            "default": false,
+            "description": "Whether the accordion item is expanded by default."
+          },
+          "hasSwitch": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the accordion item includes a switch."
+          },
+          "hasActionButton": {
+            "type": "boolean",
+            "default": false,
+            "description": "If true, the accordion item includes an action button."
+          }
+        },
+        "required": ["label"]
+      }
+    },
+    "isMultiple": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, multiple accordion items can be expanded at the same time."
+    }
+  }
+}

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

@@ -0,0 +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/"
+  },
+  "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
+    }
+  }
+}

package/schemas/components/breadcrumbs.json

@@ -13,6 +13,60 @@
       "type": "string",
       "enum": ["default", "hover", "down", "keyboard focus", "drag and drop"],
       "default": "default"
+    },
+    "isMultiline": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb items will wrap to multiple lines."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["m", "l"],
+      "default": "m",
+      "description": "Controls the overall size of the breadcrumb component."
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of breadcrumb items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the breadcrumb item."
+          },
+          "href": {
+            "type": "string",
+            "description": "Optional URL the breadcrumb item links to."
+          },
+          "isCurrent": {
+            "type": "boolean",
+            "description": "Indicates if the breadcrumb item represents the current page.",
+            "default": false
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "required": ["label"]
+      }
+    },
+    "separator": {
+      "type": "string",
+      "enum": ["chevron", "none"],
+      "default": "chevron",
+      "description": "The separator icon used between breadcrumb items."
+    },
+    "isTruncated": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb item is truncated and displayed as icon only."
+    },
+    "sizeOverride": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "description": "Overrides the size of the breadcrumb items when isMultiline is true."
     }
   }
 }

package/schemas/components/button-group.json

@@ -20,6 +20,11 @@
       "enum": ["s", "m", "l", "xl"],
       "default": "m"
     },
+    "overflowMode": {
+      "type": "string",
+      "enum": ["wrap", "collapse"],
+      "default": "wrap"
+    },
     "isDisabled": {
       "type": "boolean",
       "default": false

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"
+                ]
+            }
+        }
+    }
+}