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

package/CHANGELOG.md

@@ -1,5 +1,192 @@
 # @adobe/spectrum-component-api-schemas
 
+## 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
+
+- [#610](https://github.com/adobe/spectrum-tokens/pull/610) [`13d9202`](https://github.com/adobe/spectrum-tokens/commit/13d920273c02c78d3748522de6a7c7ee39b39814) Thanks [@GarthDB](https://github.com/GarthDB)! - Component schema improvements for Batch 1 components
+
+  Quality control pass on the Design API table for v0, ensuring schema consistency and completeness across S2 components.
+
+  ## Component Schemas Changed (0 added, 0 deleted, 11 updated)
+
+  **Original Branch:** `main`
+  **New Branch:** `component-schema-batch1-fixes`
+
+  ### 🚨 Breaking Changes Detected (5)
+
+  This release introduces **5 breaking change(s)** to component schemas. Please review carefully and ensure proper versioning.
+
+  <details open><summary><strong>💥 Breaking Updates</strong></summary>
+
+  **popover**
+  - Added: `hideTip` (boolean, default: false) - replaces removed `showTip`
+
+  **rating**
+  - Added: `value.minimum` (0), `value.maximum` (5), `value.multipleOf` (0.5)
+  - Updated: `value.description` - "From 0 to 5, can be a decimal to represent half stars"
+
+  **select-box**
+  - Added: `hideIllustration` (boolean, default: false) - replaces removed `showIllustration`
+  - Added: `isDisabled` (boolean, default: false)
+  - Added: `multiple` (boolean, default: false) - "Set to true to allow multiple selections"
+  - Updated: `orientation.default` changed to "vertical"
+
+  **status-light**
+  - Added: Colors to `variant.enum`: "gray", "red", "orange", "green", "cyan"
+  - Added: `required` - ["label"] - label is now required
+  - Removed: `isDisabled` property
+
+  **tooltip**
+  - Removed: "positive" from `variant.enum`
+  - Updated: `hasIcon.description` - "If the neutral variant, there is never an icon"
+
+  </details>
+
+  ### ✅ Non-Breaking Updates (6)
+
+  <details><summary><strong>🔄 Compatible Changes</strong></summary>
+
+  **help-text**
+  - Added: "negative" to `variant.enum`
+  - Added: `isDisabled.description` - "Help text cannot be both disabled and negative variant"
+
+  **meter**
+  - Added: `hideLabel` (boolean, default: false)
+
+  **progress-bar**
+  - Added: `staticColor` (string, enum: ["white"]) - "Static color can only be white, otherwise it is default"
+  - Added: `labelPosition` (string, enum: ["top", "side"], default: "top")
+  - Added: `hideLabel` (boolean, default: false)
+
+  **search-field**
+  - Added: `hideLabel` (boolean, default: false)
+  - Added: `icon` ($ref: workflow-icon.json) - "Icon must be present if the label is not defined"
+
+  **text-area**
+  - Added: `hideLabel` (boolean, default: false)
+
+  **text-field**
+  - Added: `hideLabel` (boolean, default: false)
+
+  </details>
+
 ## 2.0.0
 
 ### Major Changes

package/package.json

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

package/schemas/components/accordion.json

@@ -0,0 +1,90 @@
+{
+  "$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/avatar-group.json

@@ -0,0 +1,30 @@
+{
+    "$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/checkbox-group.json

@@ -39,11 +39,7 @@
       "type": "boolean",
       "default": false
     },
-    "isReadOnly": {
-      "type": "boolean",
-      "default": false
-    },
-    "description": {
+      "description": {
       "type": "string"
     },
     "errorMessage": {

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,15 @@
       "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",