@adobe/spectrum-design-data 3.3.0 → 3.5.0

package/components/status-light.json

@@ -9,19 +9,6 @@
     "category": "status",
     "documentationUrl": "https://spectrum.adobe.com/page/status-light/"
   },
-  "implementations": [
-    {
-      "platform": "web",
-      "componentName": "StatusLight",
-      "package": "@react-spectrum/s2"
-    },
-    {
-      "platform": "web",
-      "componentName": "StatusLight",
-      "importPath": "@adobe/spectrum-wc/components/status-light",
-      "notes": "Spectrum 2 web component custom element: swc-status-light."
-    }
-  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -29,160 +16,91 @@
     },
     {
       "type": "guideline",
-      "content": "Status lights indicate the state or condition of an item. They convey semantic meaning such as statuses and categories."
+      "content": "Text overflow.\n\nWhen the text is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Status lights should always include a label. Color alone is not enough to communicate the status."
+      "content": "Use the appropriate variation.\n\nSemantic status lights should never be used for color coding categories or labels, and vice versa."
     },
     {
       "type": "guideline",
-      "content": "When status lights have a semantic meaning, they use semantic colors. Use these variants for the following statuses:"
+      "content": "Status light text.\n\nA status light should always include a label with text that clearly communicates about the kind of status being shown. Do not change the text color to match the dot."
     },
     {
       "type": "guideline",
-      "content": "When status lights are used to color code categories and labels that are commonly found in data visualization, they use non-semantic label colors. The ideal usage for these is when there are 8 or fewer categories or labels being color coded."
+      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the status light is mirrored. The dot is placed on the right side of the text."
     },
     {
       "type": "guideline",
-      "content": "Status lights 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": "Cursor Description Default (Arrow) Use the default cursor for non-interactive components like status light."
     },
     {
       "type": "guideline",
-      "content": "When the text is too long for the horizontal space available, it wraps to form another line."
-    },
+      "content": "Any 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 Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAA Status lights should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized. Use of color 1.4.1 A Color is never used as the sole way to convey meaning in status lights. While color is used to reinforce their meaning, every status light also includes a clear text label that communicates the status. Text contrast minimums 1.4.3 AA Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement. Visual presentation 1.4.8 AAA The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified. Non-text contrast 1.4.11 AA The visual presentation of the status light dot has a contrast ratio of at least 3:1. Text spacing 1.4.12 AA Line height of text is at least 1.5x the font size when wrapped. 2. Operable Requirement Criterion Level Compliance 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."
+    }
+  ],
+  "implementations": [
     {
-      "type": "guideline",
-      "content": "Semantic status lights should never be used for color coding categories or labels, and vice versa."
+      "platform": "web",
+      "componentName": "StatusLight",
+      "package": "@react-spectrum/s2"
     },
     {
-      "type": "guideline",
-      "content": "A status light should always include a label with text that clearly communicates about the kind of status being shown. Do not change the text color to match the dot."
+      "platform": "web",
+      "componentName": "StatusLight",
+      "importPath": "@adobe/spectrum-wc/components/status-light",
+      "notes": "Spectrum 2 web component custom element: swc-status-light."
     }
   ],
   "options": {
-    "label": {
-      "type": "string"
-    },
+    "label": { "type": "string" },
     "variant": {
       "type": "string",
       "default": "informative",
       "values": [
-        {
-          "value": "informative"
-        },
-        {
-          "value": "neutral"
-        },
-        {
-          "value": "positive"
-        },
-        {
-          "value": "notice"
-        },
-        {
-          "value": "negative"
-        },
-        {
-          "value": "indigo"
-        },
-        {
-          "value": "celery"
-        },
-        {
-          "value": "chartreuse"
-        },
-        {
-          "value": "yellow"
-        },
-        {
-          "value": "magenta"
-        },
-        {
-          "value": "fuchsia"
-        },
-        {
-          "value": "purple"
-        },
-        {
-          "value": "seafoam"
-        },
-        {
-          "value": "pink"
-        },
-        {
-          "value": "turquoise"
-        },
-        {
-          "value": "cinnamon"
-        },
-        {
-          "value": "brown"
-        },
-        {
-          "value": "silver"
-        },
-        {
-          "value": "gray"
-        },
-        {
-          "value": "red"
-        },
-        {
-          "value": "orange"
-        },
-        {
-          "value": "green"
-        },
-        {
-          "value": "cyan"
-        }
+        { "value": "informative" },
+        { "value": "neutral" },
+        { "value": "positive" },
+        { "value": "notice" },
+        { "value": "negative" },
+        { "value": "indigo" },
+        { "value": "celery" },
+        { "value": "chartreuse" },
+        { "value": "yellow" },
+        { "value": "magenta" },
+        { "value": "fuchsia" },
+        { "value": "purple" },
+        { "value": "seafoam" },
+        { "value": "pink" },
+        { "value": "turquoise" },
+        { "value": "cinnamon" },
+        { "value": "brown" },
+        { "value": "silver" },
+        { "value": "gray" },
+        { "value": "red" },
+        { "value": "orange" },
+        { "value": "green" },
+        { "value": "cyan" }
       ]
     },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
       ]
     }
   },
   "anatomy": [
-    {
-      "name": "visual-75",
-      "description": "Severity dot, 75 size variant."
-    },
-    {
-      "name": "visual-100",
-      "description": "Severity dot, 100 size variant."
-    },
-    {
-      "name": "visual-200",
-      "description": "Severity dot, 200 size variant."
-    },
-    {
-      "name": "visual-300",
-      "description": "Severity dot, 300 size variant."
-    },
-    {
-      "name": "dot"
-    }
+    { "name": "visual-75", "description": "Severity dot, 75 size variant." },
+    { "name": "visual-100", "description": "Severity dot, 100 size variant." },
+    { "name": "visual-200", "description": "Severity dot, 200 size variant." },
+    { "name": "visual-300", "description": "Severity dot, 300 size variant." },
+    { "name": "dot" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "accessibility": {
-    "focusable": false
-  }
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "accessibility": { "focusable": false }
 }

package/components/steplist.json

@@ -51,14 +51,7 @@
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "items": {
       "type": "array",
@@ -100,28 +93,16 @@
       "name": "track-size",
       "description": "The connecting track between steps."
     },
-    {
-      "name": "track"
-    }
+    { "name": "track" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "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/swatch-group.json

@@ -16,23 +16,23 @@
     },
     {
       "type": "guideline",
-      "content": "Swatch groups organize related swatches into a single container. They’re used to display collections of colors, gradients, textures, or materials for comparison or selection."
+      "content": "Border only for low-contrast swatches.\n\nIt's important for users to compare colors when they're displayed in a swatch group. Because of this, swatches within a swatch group with low contrast (below 3:1 contrast with the background) have a less prominent border compared to the swatch component when used by itself. This reduces the likelihood of the UI interfering with color perception and comparisons."
     },
     {
       "type": "guideline",
-      "content": "Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density but have less or more padding between each swatch, respectively."
+      "content": "Corner rounding in swatch groups.\n\nA corner rounding of none should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group. The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options: none, partial rounding, or full rounding."
     },
     {
       "type": "guideline",
-      "content": "By default, selection is not enabled in a swatch group. Selection can be enabled for a swatch group to allow for toggling. This is often used inside of swatch panels."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus onto the swatch or swatch group. Arrow keys Moves focus through the swatches in the group."
     },
     {
       "type": "guideline",
-      "content": "When selection is enabled, a swatch group can allow for either single or multiple selection of swatches. This is often used inside of swatch panels to allow for bulk operations, such as deleting multiple swatches at once."
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use the pointer cursor for all interactive elements in every state."
     },
     {
       "type": "guideline",
-      "content": "It’s important for users to compare colors when they’re displayed in a swatch group. Because of this, swatches within a swatch group with low contrast (below 3:1 contrast with the background) have a less prominent border compared to the swatch component when used by itself. This reduces the likelihood of the UI interfering with color perception and comparisons."
+      "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 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 Swatch groups should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized, so the grouping relationship between swatches and the selected state are programmatically conveyed. Use of color 1.4.1 A This criterion requires that color not be the only method of communicating information. In swatches, the color itself is the content being presented, not a cue that conveys additional meaning. 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."
     }
   ],
   "options": {
@@ -40,51 +40,27 @@
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "xs"
-        },
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
+        { "value": "xs" },
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" }
       ]
     },
     "density": {
       "type": "string",
       "default": "regular",
       "values": [
-        {
-          "value": "compact"
-        },
-        {
-          "value": "regular"
-        },
-        {
-          "value": "spacious"
-        }
+        { "value": "compact" },
+        { "value": "regular" },
+        { "value": "spacious" }
       ]
     },
-    "enableSelection": {
-      "type": "boolean",
-      "default": false
-    },
+    "enableSelection": { "type": "boolean", "default": false },
     "selectionMode": {
       "type": "string",
       "description": "Only applicable if selection is enabled.",
       "default": "single",
-      "values": [
-        {
-          "value": "single"
-        },
-        {
-          "value": "multiple"
-        }
-      ]
+      "values": [{ "value": "single" }, { "value": "multiple" }]
     },
     "allowsEmptySelection": {
       "type": "boolean",
@@ -96,31 +72,19 @@
       "default": "none",
       "description": "Determines the corner radius of each swatch in the group. Partial refers to corner-radius-75.",
       "values": [
-        {
-          "value": "none"
-        },
-        {
-          "value": "full"
-        },
-        {
-          "value": "partial"
-        }
+        { "value": "none" },
+        { "value": "full" },
+        { "value": "partial" }
       ]
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "group",
     "intents": ["choose"],
     "focusable": false,
     "wcag": [
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/swatch.json

@@ -16,31 +16,27 @@
     },
     {
       "type": "guideline",
-      "content": "The preview shows the sample of the fill that the swatch represents. This property can be a color, gradient, texture, or material. The exact format this property takes will depend on implementation. Some examples of the format include color values, image, canvas, and gradient."
+      "content": "Keyboard focus.\n\nA swatch can be navigated using a keyboard. The keyboard focus state adds a blue ring to the swatch in focus."
     },
     {
       "type": "guideline",
-      "content": "Swatches come in four different sizes: extra-small, small, medium, and 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": "Mixed value.\n\nWhen a swatch represents multiple values that are not identical, the preview shows a gray fill and a dash UI icon."
     },
     {
       "type": "guideline",
-      "content": "By default, swatches have partial rounding. There are 3 options for a swatch’s rounding: none, partial rounding, and full rounding."
+      "content": "Hide unavailable swatches when possible.\n\nEven though swatches can have a disabled state, hiding unavailable swatches reduces visual clutter and eases cognitive load. Only show disabled swatches if hiding them would cause confusion to your users."
     },
     {
       "type": "guideline",
-      "content": "A swatch can have a selected state to allow for selection. This is often used in a swatch group."
+      "content": "Keyboard interactions.\n\nKey Interaction Tab Moves focus onto or off of the swatch group. Focus moves to the first swatch in the group. Space or Enter Triggers an action or selects the swatch when selection is enabled. The focus remains on the swatch, unless the swatch opens or closes the current container. In this case, the focus moves to the target or back to the caller."
     },
     {
       "type": "guideline",
-      "content": "A swatch in a disabled state shows that the swatch exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a swatch may become available later. Disabled swatches should be used with caution."
+      "content": "Cursor guidelines.\n\nCursor Description Pointer Use the pointer cursor for all interactive elements in every state."
     },
     {
       "type": "guideline",
-      "content": "A swatch can be navigated using a keyboard. The keyboard focus state adds a blue ring to the swatch in focus."
-    },
-    {
-      "type": "guideline",
-      "content": "Even though swatches can have a disabled state, hiding unavailable swatches reduces visual clutter and eases cognitive load. Only show disabled swatches if hiding them would cause confusion to your users."
+      "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 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 Swatch groups should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized, so the grouping relationship between swatches and the selected state are programmatically conveyed. Use of color 1.4.1 A This criterion requires that color not be the only method of communicating information. In swatches, the color itself is the content being presented, not a cue that conveys additional meaning. 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."
     }
   ],
   "options": {
@@ -52,102 +48,51 @@
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "xs"
-        },
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        }
+        { "value": "xs" },
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" }
       ]
     },
     "shape": {
       "type": "string",
       "default": "square",
-      "values": [
-        {
-          "value": "square"
-        },
-        {
-          "value": "rectangle"
-        }
-      ]
+      "values": [{ "value": "square" }, { "value": "rectangle" }]
     },
     "cornerRounding": {
       "type": "string",
       "default": "none",
       "description": "Determines the corner radius of the swatch. Partial refers to corner-radius-75.",
       "values": [
-        {
-          "value": "none"
-        },
-        {
-          "value": "partial"
-        },
-        {
-          "value": "full"
-        }
+        { "value": "none" },
+        { "value": "partial" },
+        { "value": "full" }
       ]
     },
-    "isSelected": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
+    "isSelected": { "type": "boolean", "default": false },
+    "isDisabled": { "type": "boolean", "default": false }
   },
   "anatomy": [
     {
       "name": "slash",
       "description": "Diagonal slash indicating an empty or \"none\" swatch."
     },
-    {
-      "name": "icon"
-    }
+    { "name": "icon" }
   ],
   "states": [
-    {
-      "name": "hover",
-      "trigger": "interaction"
-    },
-    {
-      "name": "down",
-      "trigger": "interaction"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    },
-    {
-      "name": "disabled",
-      "trigger": "prop"
-    }
+    { "name": "hover", "trigger": "interaction" },
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" },
+    { "name": "disabled", "trigger": "prop" }
   ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "intents": ["choose"],
     "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" }
     ]
   }
 }