@adobe/spectrum-design-data 3.3.0-beta.1 → 3.3.0

package/components/status-light.json

@@ -9,6 +9,19 @@
     "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",
@@ -16,78 +29,160 @@
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the text is too long for the horizontal space available, it wraps to form another line."
+      "content": "Status lights indicate the state or condition of an item. They convey semantic meaning such as statuses and categories."
+    },
+    {
+      "type": "guideline",
+      "content": "Status lights should always include a label. Color alone is not enough to communicate the status."
+    },
+    {
+      "type": "guideline",
+      "content": "When status lights have a semantic meaning, they use semantic colors. Use these variants for the following statuses:"
     },
     {
       "type": "guideline",
-      "content": "Use the appropriate variation.\n\nSemantic status lights should never be used for color coding categories or labels, and vice versa."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "When the text is too long for the horizontal space available, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Cursor Description Default (Arrow)Use the default cursor for non-interactive components like status light."
+      "content": "Semantic status lights should never be used for color coding categories or labels, and vice versa."
     },
     {
       "type": "guideline",
-      "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, AAAStatus 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 AColor 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 AALarge 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 AAAThe 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 AAThe visual presentation of the status light dot has a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size when wrapped. 2. Operable RequirementCriterionLevel Compliance Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component."
+      "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."
     }
   ],
   "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,7 +51,14 @@
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
+      "values": [
+        {
+          "value": "horizontal"
+        },
+        {
+          "value": "vertical"
+        }
+      ]
     },
     "items": {
       "type": "array",
@@ -93,16 +100,28 @@
       "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": "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus onto the swatch or swatch group.Arrow keysMoves focus through the swatches in the group."
+      "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."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for all interactive elements in every state."
+      "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."
     },
     {
       "type": "guideline",
-      "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 ANon‑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, AAASwatch 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 AThis 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 RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus 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, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "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."
     }
   ],
   "options": {
@@ -40,27 +40,51 @@
       "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",
@@ -72,19 +96,31 @@
       "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,27 +16,31 @@
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "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."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "By default, swatches have partial rounding. There are 3 options for a swatch’s rounding: none, partial rounding, and full rounding."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKeyInteractionTabMoves focus onto or off of the swatch group. Focus moves to the first swatch in the group.Space or EnterTriggers 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."
+      "content": "A swatch can have a selected state to allow for selection. This is often used in a swatch group."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description PointerUse the pointer cursor for all interactive elements in every state."
+      "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."
     },
     {
       "type": "guideline",
-      "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 ANon‑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, AAASwatch 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 AThis 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 RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus 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, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "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."
     }
   ],
   "options": {
@@ -48,51 +52,102 @@
       "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"
+      }
     ]
   }
 }