@adobe/spectrum-design-data 3.3.0 → 3.5.0

package/components/close-button.json

@@ -9,19 +9,6 @@
     "category": "actions",
     "documentationUrl": "https://spectrum.adobe.com/page/close-button/"
   },
-  "implementations": [
-    {
-      "platform": "web",
-      "componentName": "CloseButton",
-      "package": "@react-spectrum/s2"
-    },
-    {
-      "platform": "web",
-      "componentName": "CloseButton",
-      "importPath": "@adobe/spectrum-wc/components/close-button",
-      "notes": "Spectrum 2 web component custom element: swc-close-button."
-    }
-  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -29,27 +16,37 @@
     },
     {
       "type": "guideline",
-      "content": "A close button in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later."
+      "content": "Keyboard focus.\n\nA close button can be navigated using a keyboard. The keyboard focus state takes the close button's visual hover state and adds a ring to the button in focus."
     },
     {
-      "type": "guideline",
-      "content": "Use this option when a close button needs to be placed on top of a color background or visual. Static color close buttons are available in black or white, regardless of color theme."
+      "type": "do-dont",
+      "content": "Don't use close buttons for delete actions",
+      "dont": "A close button is only for dismissing or closing its parent component, not for taking a destructive action (like deleting a file). Use an action button instead."
     },
     {
       "type": "guideline",
-      "content": "Use static black on light color or image backgrounds, and static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the close button color meet the minimum color contrast ratio."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus onto or off of the close button. Space or Enter Executes the button (closes or dismisses the parent component). Focus moves to the target or back to the caller."
     },
     {
       "type": "guideline",
-      "content": "The icon inside of the close button comes in two options: regular and large. These scale up and down for each close button size. This is a cross UI icon, not a workflow icon or the letter “x.”"
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use the pointer cursor for all interactive components in every state."
     },
     {
       "type": "guideline",
-      "content": "Close buttons come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
+      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 A Non‑text elements—including the close icon—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function. Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Close buttons should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role of buttons should be utilized. Non-text contrast 1.4.11 AA The visual presentation of icons and various states have a contrast ratio of at least 3:1. 2. Operable Requirement Criterion Level Compliance Keyboard 2.1.1, 2.1.3 A, AAA All functionality of the component is operable through a keyboard without specific timing for keystrokes. Keyboard traps 2.1.2 A Focus can be moved away from the component using only a keyboard. Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAA There is no flashing content or unnecessary motion or animation in this component. Focus order 2.4.3 A Navigation sequences receive focus in an order that preserves meaning and operability. Focus visible 2.4.7 AA Keyboard states use an indicator that is visible with at least 3:1 contrast."
+    }
+  ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "CloseButton",
+      "package": "@react-spectrum/s2"
     },
     {
-      "type": "guideline",
-      "content": "A close button can be navigated using a keyboard. The keyboard focus state takes the close button’s visual hover state and adds a ring to the button in focus."
+      "platform": "web",
+      "componentName": "CloseButton",
+      "importPath": "@adobe/spectrum-wc/components/close-button",
+      "notes": "Spectrum 2 web component custom element: swc-close-button."
     }
   ],
   "options": {
@@ -57,73 +54,34 @@
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
       ]
     },
-    "iconSize": {
-      "type": "string"
-    },
+    "iconSize": { "type": "string" },
     "staticColor": {
       "type": "string",
       "description": "Static color must not be set for the default version of this component.",
-      "values": [
-        {
-          "value": "white"
-        },
-        {
-          "value": "black"
-        }
-      ]
+      "values": [{ "value": "white" }, { "value": "black" }]
     },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
+    "isDisabled": { "type": "boolean", "default": false }
   },
   "states": [
-    {
-      "name": "hover",
-      "trigger": "interaction"
-    },
-    {
-      "name": "down",
-      "trigger": "interaction"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    }
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "button",
     "intents": ["dismiss"],
     "focusable": true,
     "keyboardIntents": ["activate"],
     "wcag": [
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/coach-indicator.json

@@ -55,55 +55,25 @@
     "cornerRounding": {
       "type": "string",
       "values": [
-        {
-          "value": "none"
-        },
-        {
-          "value": "corner-radius-75"
-        },
-        {
-          "value": "corner-radius-100"
-        },
-        {
-          "value": "corner-radius-200"
-        },
-        {
-          "value": "corner-radius-300"
-        },
-        {
-          "value": "corner-radius-400"
-        },
-        {
-          "value": "corner-radius-500"
-        },
-        {
-          "value": "corner-radius-600"
-        },
-        {
-          "value": "corner-radius-700"
-        },
-        {
-          "value": "corner-radius-800"
-        },
-        {
-          "value": "full"
-        }
+        { "value": "none" },
+        { "value": "corner-radius-75" },
+        { "value": "corner-radius-100" },
+        { "value": "corner-radius-200" },
+        { "value": "corner-radius-300" },
+        { "value": "corner-radius-400" },
+        { "value": "corner-radius-500" },
+        { "value": "corner-radius-600" },
+        { "value": "corner-radius-700" },
+        { "value": "corner-radius-800" },
+        { "value": "full" }
       ]
     },
     "staticColor": {
       "type": "string",
       "description": "If not set to white, the coach indicator uses the default color.",
-      "values": [
-        {
-          "value": "white"
-        }
-      ]
+      "values": [{ "value": "white" }]
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "accessibility": {
-    "focusable": false
-  }
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "accessibility": { "focusable": false }
 }

package/components/coach-mark.json

@@ -76,12 +76,8 @@
     }
   ],
   "options": {
-    "title": {
-      "type": "string"
-    },
-    "description": {
-      "type": "string"
-    },
+    "title": { "type": "string" },
+    "description": { "type": "string" },
     "hideImage": {
       "type": "boolean",
       "default": false,
@@ -120,32 +116,18 @@
       "name": "pagination-text",
       "description": "Text indicating step position (e.g. '2 of 5')."
     },
-    {
-      "name": "body"
-    },
-    {
-      "name": "media"
-    },
-    {
-      "name": "pagination"
-    },
-    {
-      "name": "title"
-    }
+    { "name": "body" },
+    { "name": "media" },
+    { "name": "pagination" },
+    { "name": "title" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["dismiss"],
     "focusable": true,
     "keyboardIntents": ["dismiss"],
     "wcag": [
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/color-area.json

@@ -23,47 +23,23 @@
     },
     {
       "type": "guideline",
-      "content": "A color area enables visual selection of two color properties at once. It's often paired with a color slider or color wheel."
+      "content": "Keyboard focus.\n\nA color area can be navigated using a keyboard. The keyboard focus state enlarges the handle to become twice as large."
     },
     {
       "type": "guideline",
-      "content": "A color area in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that the area may become available later."
+      "content": "Handle behavior.\n\nThe color area's handle can slide all the way over the edge of the area. It always displays the selected color inside the handle and never gets cut off by the border or any container."
     },
     {
       "type": "guideline",
-      "content": "A color area’s height and width can be customized appropriately for its context."
+      "content": "Minimum width and height.\n\nMinimum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."
     },
     {
       "type": "guideline",
-      "content": "The step refers to the increment by which these values increase or decrease. A step value of 1 (default) allows a user to only select whole numbers within the min and max range."
+      "content": "Display color selection.\n\nWhen using color areas, it's important to clearly display the color selection in real time. This can be in a color swatch, directly on the canvas, or both."
     },
     {
       "type": "guideline",
-      "content": "The x and y values are the numbers selected within the color area’s horizontal and vertical axes, respectively."
-    },
-    {
-      "type": "guideline",
-      "content": "The x/y min and max values also can be customized appropriately for what the color area is being used for. By default, the min value starts at 0 and max value is set to 100."
-    },
-    {
-      "type": "guideline",
-      "content": "A color area can be navigated using a keyboard. The keyboard focus state enlarges the handle to become twice as large."
-    },
-    {
-      "type": "guideline",
-      "content": "The color area’s handle can slide all the way over the edge of the area. It always displays the selected color inside the handle and never gets cut off by the border or any container."
-    },
-    {
-      "type": "guideline",
-      "content": "Minimum sizing ensures that the component remains clear, usable, and visually consistent, even in flexible or responsive layouts."
-    },
-    {
-      "type": "guideline",
-      "content": "When using color areas, it’s important to clearly display the color selection in real time. This can be in a color swatch, directly on the canvas, or both."
-    },
-    {
-      "type": "guideline",
-      "content": "The color loupe component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
+      "content": "Color loupe on down/touch states.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
     }
   ],
   "options": {
@@ -75,83 +51,34 @@
       "type": "number",
       "description": "Number (from x-minValue to x-maxValue)"
     },
-    "x-minValue": {
-      "type": "number",
-      "default": 0
-    },
-    "x-maxValue": {
-      "type": "number",
-      "default": 100
-    },
+    "x-minValue": { "type": "number", "default": 0 },
+    "x-maxValue": { "type": "number", "default": 100 },
     "y-value": {
       "type": "number",
       "description": "Number (from y-minValue to y-maxValue)"
     },
-    "y-minValue": {
-      "type": "number",
-      "default": 0
-    },
-    "y-maxValue": {
-      "type": "number",
-      "default": 100
-    },
-    "step": {
-      "type": "number",
-      "default": 1
-    },
-    "width": {
-      "type": "number",
-      "default": 192,
-      "description": "units: px"
-    },
-    "height": {
-      "type": "number",
-      "default": 192,
-      "description": "units: px"
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
+    "y-minValue": { "type": "number", "default": 0 },
+    "y-maxValue": { "type": "number", "default": 100 },
+    "step": { "type": "number", "default": 1 },
+    "width": { "type": "number", "default": 192, "description": "units: px" },
+    "height": { "type": "number", "default": 192, "description": "units: px" },
+    "isDisabled": { "type": "boolean", "default": false }
   },
   "states": [
-    {
-      "name": "hover",
-      "trigger": "interaction"
-    },
-    {
-      "name": "down",
-      "trigger": "interaction"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    }
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "slider",
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["increment", "decrement"],
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/color-handle.json

@@ -20,7 +20,7 @@
   "documentBlocks": [
     {
       "type": "purpose",
-      "content": "Color handles select or adjust a color value along a track or wheel. The outer border is not included in the handle's size."
+      "content": "Color handles allow users to select and adjust colors in a color picker."
     },
     {
       "type": "guideline",
@@ -28,11 +28,23 @@
     },
     {
       "type": "guideline",
-      "content": "Transparent colors.\n\nWhen using transparent colors, the handle displays an opacity checkerboard background to clearly show the level of transparency."
+      "content": "Transparent colors.\n\nWhen using transparent colors, the handle and loupe display an opacity checkerboard background to clearly show the level of transparency."
     },
     {
       "type": "guideline",
-      "content": "Keyboard focus.\n\nThe keyboard focus state enlarges the handle to become twice as large."
+      "content": "Color loupe.\n\nThe loupe is a floating element positioned above the handle. It provides a preview that reflects the color currently sampled by its parent color component and disappears when the interaction ends."
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard focus.\n\nThe keyboard focus state enlarges the handle to become twice as large. The loupe is a visual-only element and should not receive focus since it does not provide interactive functionality."
+    },
+    {
+      "type": "guideline",
+      "content": "Display combined values.\n\nColor selection usually happens using a variety of input methods (color area, color slider, color wheel). The color loupe should display the final output color: the combined values from multiple color inputs. The number of input methods is determined by the color space (or \"mode\"), for example: 2 controls: HSL using color wheel (hue) and color area (saturation and lightness) 3 controls: RGB using unique color sliders for Red, Green, and Blue 4 controls: RGBa using unique color sliders for Red, Green, Blue, and Alpha"
+    },
+    {
+      "type": "guideline",
+      "content": "Color loupe on down/touch state.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
     }
   ],
   "options": {
@@ -41,47 +53,22 @@
       "default": "hue",
       "description": "Which channel of the color this handle controls. Use 'alpha' for opacity.",
       "values": [
-        {
-          "value": "hue"
-        },
-        {
-          "value": "saturation"
-        },
-        {
-          "value": "lightness"
-        },
-        {
-          "value": "red"
-        },
-        {
-          "value": "green"
-        },
-        {
-          "value": "blue"
-        },
-        {
-          "value": "alpha"
-        }
+        { "value": "hue" },
+        { "value": "saturation" },
+        { "value": "lightness" },
+        { "value": "red" },
+        { "value": "green" },
+        { "value": "blue" },
+        { "value": "alpha" }
       ]
     },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
+    "isDisabled": { "type": "boolean", "default": false }
   },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["choose"],
     "focusable": true,
     "keyboardIntents": ["increment", "decrement"],
-    "wcag": [
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      }
-    ]
+    "wcag": [{ "criterion": "2.1.1", "level": "A", "title": "Keyboard" }]
   }
 }

package/components/color-loupe.json

@@ -9,14 +9,6 @@
     "category": "feedback",
     "documentationUrl": "https://spectrum.adobe.com/page/color-loupe/"
   },
-  "implementations": [
-    {
-      "platform": "web",
-      "componentName": "ColorLoupe",
-      "importPath": "@adobe/spectrum-wc/components/color-loupe",
-      "notes": "Spectrum 2 web component custom element: swc-color-loupe."
-    }
-  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -24,34 +16,42 @@
     },
     {
       "type": "guideline",
-      "content": "Color loupe.\n\nThe loupe is a floating element positioned above the handle. It provides a preview that reflects the color currently sampled by its parent color component and disappears when the interaction ends."
+      "content": "Handle behavior.\n\nIn the color area and color slider, the handle can slide all the way to the edge of the component. It always displays the selected color inside the handle and never gets cut off by the border or any container."
+    },
+    {
+      "type": "guideline",
+      "content": "Transparent colors.\n\nWhen using transparent colors, the handle and loupe display an opacity checkerboard background to clearly show the level of transparency."
     },
     {
       "type": "guideline",
-      "content": "Transparent colors.\n\nWhen using transparent colors, the loupe displays an opacity checkerboard background to clearly show the level of transparency."
+      "content": "Color loupe.\n\nThe loupe is a floating element positioned above the handle. It provides a preview that reflects the color currently sampled by its parent color component and disappears when the interaction ends."
     },
     {
       "type": "guideline",
-      "content": "Keyboard focus.\n\nThe loupe is a visual-only element and should not receive focus since it does not provide interactive functionality."
+      "content": "Keyboard focus.\n\nThe keyboard focus state enlarges the handle to become twice as large. The loupe is a visual-only element and should not receive focus since it does not provide interactive functionality."
     },
     {
       "type": "guideline",
-      "content": "Display combined values.\n\nColor selection usually happens using a variety of input methods (color area, color slider, color wheel). The color loupe should display the final output color: the combined values from multiple color inputs.\n\nThe number of input methods is determined by the color space (or \"mode\"), for example:\n\n* 2 controls: HSL using color wheel (hue) and color area (saturation and lightness)\n* 3 controls: RGB using unique color sliders for Red, Green, and Blue\n* 4 controls: RGBa using unique color sliders for Red, Green, Blue, and Alpha"
+      "content": "Display combined values.\n\nColor selection usually happens using a variety of input methods (color area, color slider, color wheel). The color loupe should display the final output color: the combined values from multiple color inputs. The number of input methods is determined by the color space (or \"mode\"), for example: 2 controls: HSL using color wheel (hue) and color area (saturation and lightness) 3 controls: RGB using unique color sliders for Red, Green, and Blue 4 controls: RGBa using unique color sliders for Red, Green, Blue, and Alpha"
     },
     {
       "type": "guideline",
       "content": "Color loupe on down/touch state.\n\nThe color loupe component can be used above the handle to show the selected color that would otherwise be covered by a cursor, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type."
     }
   ],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "ColorLoupe",
+      "importPath": "@adobe/spectrum-wc/components/color-loupe",
+      "notes": "Spectrum 2 web component custom element: swc-color-loupe."
+    }
+  ],
   "options": {
     "value": {
       "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/hex-color.json"
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "accessibility": {
-    "focusable": false
-  }
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "accessibility": { "focusable": false }
 }