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

package/components/picker.json

@@ -9,6 +9,13 @@
     "category": "inputs",
     "documentationUrl": "https://spectrum.adobe.com/page/picker/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Picker",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,86 +23,159 @@
     },
     {
       "type": "guideline",
-      "content": "Minimum width.\n\nThe minimum width for a picker is picker-minimum-width-multiplier (2× the height of the field button). This guarantees that small pickers are readable and easy to target on touch devices. Quiet pickers do not have a minimum width; their width depends on the length of the text."
+      "content": "Pickers present a list of options in a compact format for selection. They’re sometimes called “dropdowns” or “selects,” and the available options may change based on context."
+    },
+    {
+      "type": "guideline",
+      "content": "The error message communicates an error for when the selection requirements aren’t met, prompting a user to adjust what they had originally selected."
+    },
+    {
+      "type": "guideline",
+      "content": "A picker can have help text below the field to give extra context or instruction about what a user should input in the field. The help text communicates a hint or helpful information, such as specific requirements for correctly filling out the field."
+    },
+    {
+      "type": "guideline",
+      "content": "A picker can be marked as having an error to show that a value needs to be entered in order to move forward or that a value that was entered is invalid."
+    },
+    {
+      "type": "guideline",
+      "content": "A picker in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that it may become available later."
+    },
+    {
+      "type": "guideline",
+      "content": "The picker menu is a menu element that is used to display the options for the picker. A picker menu can include menu items, menu dividers, and menu groups. A picker menu should never contain submenus, as doing so would render it inaccessible."
+    },
+    {
+      "type": "guideline",
+      "content": "For required pickers, you have two options:"
+    },
+    {
+      "type": "guideline",
+      "content": "For optional pickers, you have two options:"
+    },
+    {
+      "type": "guideline",
+      "content": "By default, pickers have a visible background. This style works best in a dense array of controls where the background helps to separate the input from the surrounding container, or to give visibility to isolated buttons."
+    },
+    {
+      "type": "guideline",
+      "content": "Alternatively, quiet pickers can have no visible background. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read."
+    },
+    {
+      "type": "guideline",
+      "content": "Pickers 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": "The width of a picker can be customized appropriately for its context. This option is not applicable to quiet pickers."
+    },
+    {
+      "type": "guideline",
+      "content": "The value shows the option that a user has selected."
+    },
+    {
+      "type": "guideline",
+      "content": "Placeholder text provides hints about expected input values. It disappears once a user selects an option."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen the field label and menu text are too long for the available horizontal space, they wrap to form another line. The field text itself truncates at the end, but the text can be shown in full in the menu."
+      "content": "Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited."
     },
     {
       "type": "guideline",
-      "content": "Help and error text overflow.\n\nWhen the help or error text is too long for the available horizontal space, it wraps to form another line."
+      "content": "Pickers should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These pickers without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”)."
     },
     {
       "type": "guideline",
-      "content": "Menu height.\n\nThe picker menu can be as tall as necessary to show as many options as possible in the available space. There is no maximum height."
+      "content": "When the field label and menu text are too long for the available horizontal space, they wrap to form another line. The field text itself truncates at the end, but the text can be shown in full in the menu."
     },
     {
       "type": "guideline",
-      "content": "Include a label.\n\nEvery picker should have a label. A picker without a label is ambiguous and not accessible."
+      "content": "When the help or error text is too long for the available horizontal space, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Review label-less designs.\n\nIn rare cases where context is sufficient and a label could be absent, make sure to have the design reviewed and approved by an accessibility expert. These should still include an aria-label in HTML (depending on the context, \"aria-label\" or \"aria-labelledby\")."
+      "content": "The picker menu can be as tall as necessary to show as many options as possible in the available space. There is no maximum height."
     },
     {
       "type": "guideline",
-      "content": "Keep menu items concise.\n\nKeep menu items short and concise. Long menu items that cause text to wrap to multiple lines are discouraged. If text wrapping becomes a frequent concern, consider revising the text or use alternative UI patterns that will give your content more space."
+      "content": "Every picker should have a label. A picker without a label is ambiguous and not accessible."
     },
     {
       "type": "guideline",
-      "content": "Choose an appropriate width.\n\nWhen possible, the field button width should be wide enough so that any chosen menu items can be displayed in full."
+      "content": "In rare cases where context is sufficient and a label could be absent, make sure to have the design reviewed and approved by an accessibility expert. These should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”)."
     },
     {
       "type": "guideline",
-      "content": "Follow capitalization rules.\n\nField labels, placeholder text, and menu items should be in sentence case."
+      "content": "Keep menu items short and concise. Long menu items that cause text to wrap to multiple lines are discouraged. If text wrapping becomes a frequent concern, consider revising the text or use alternative UI patterns that will give your content more space."
     },
     {
       "type": "guideline",
-      "content": "Marking required vs. optional pickers in forms.\n\nWhen labeling pickers in a form, only mark the minority type — either required or optional — to reduce visual clutter: If most pickers are optional, mark only the required ones (e.g., add an asterisk or \"(required)\"). If most pickers are required, mark only the optional ones (e.g., append \"(optional)\" to their labels). Never use an asterisk to indicate an optional picker."
+      "content": "When possible, the field button width should be wide enough so that any chosen menu items can be displayed in full."
     },
     {
       "type": "guideline",
-      "content": "Use help text to show context.\n\nA picker's description in the help text is can communicate what to select or how to select an option. This includes information such as: An overall description of the picker options Hints for what kind of information to choose More context for why a user needs to make a selection The help text's message should not simply restate the same information in the label in order to prompt someone to interact with a picker. Don't add help text if it isn't actually relevant or meaningful to a user in order to try to maintain layout continuity with other inputs that require help text."
+      "content": "Field labels, placeholder text, and menu items should be in sentence case."
     },
     {
       "type": "guideline",
-      "content": "Switch help text with error text.\n\nThe help text area also displays an error message. When a picker already includes help text and an error is triggered, the help text is replaced with error text. Once the error is resolved, the help text description reappears below the picker. Since one gets replaced by the other, the language of the help text and error text need to work together to convey the same messaging. Help text explains the requirement or adds supplementary context for how to complete the interaction. Error text tells a user how to fix the error by re-stating the selection requirements or describing the necessary interaction. Make sure that the help text and the error text include the same essential information so that it isn't lost if one replaces the other like minimum requirements."
+      "content": "When labeling pickers in a form, only mark the minority type — either required or optional — to reduce visual clutter:"
     },
     {
       "type": "guideline",
-      "content": "Write error text that shows a solution.\n\nWrite error messaging in a human-centered way by guiding a user and showing them a solution — don't simply state what's wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user. Error text should be written in 1-2 short, complete sentences and in a clear and straightforward way. End sentences with a period, and never with an exclamation point. For pickers, the nature of the error is often related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss selecting an option to note as their preferred contact method, write the error text like you're offering a hint or a tip to help guide them to understand what needs to be selected: \"Select a contact method."
+      "content": "Never use an asterisk to indicate an optional picker."
     },
     {
       "type": "guideline",
-      "content": "Use placeholder text for hints.\n\nPlaceholder text provides hints about expected input values. When implemented properly, it enhances usability without compromising accessibility. Placeholder text: always supplements, never replaces labels; uses disappearing text only for non-critical guidance. It never replaces the help text. is always paired with a visible label; is brief and instructional; is compatible with the screen reader. Ensure that placeholders are properly announced by screen readers by using appropriate ARIA attributes when needed."
+      "content": "A picker’s description in the help text is can communicate what to select or how to select an option. This includes information such as:"
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the picker is mirrored. Text and the checkmark are right-aligned while the chevron is left-aligned."
+      "content": "The help text’s message should not simply restate the same information in the label in order to prompt someone to interact with a picker. Don’t add help text if it isn’t actually relevant or meaningful to a user in order to try to maintain layout continuity with other inputs that require help text."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus onto or off of the button.Space or EnterExecutes the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller."
+      "content": "The help text area also displays an error message. When a picker already includes help text and an error is triggered, the help text is replaced with error text. Once the error is resolved, the help text description reappears below the picker."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components."
+      "content": "Since one gets replaced by the other, the language of the help text and error text need to work together to convey the same messaging. Help text explains the requirement or adds supplementary context for how to complete the interaction. Error text tells a user how to fix the error by re-stating the selection requirements or describing the necessary interaction. Make sure that the help text and the error text include the same essential information so that it isn’t lost if one replaces the other like minimum requirements."
     },
     {
       "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—such as icons used in buttons—must provide a text alternative that communicates the button’s purpose. All buttons, especially icon‑only buttons, 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, AAAButtons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized.Use of color 1.4.1 AColor is never used as the sole way to convey meaning in buttons. While negative buttons do use red to reinforce their purpose, every button also includes a clear text label that communicates the action it performs.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.Resize text 1.4.4 AAButtons should be built in such a way that they can be resized without assistive technology up to 200%.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 icons and various states have 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. 2. Operable Requirement Criterion Level 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": "Write error messaging in a human-centered way by guiding a user and showing them a solution — don’t simply state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user."
+    },
+    {
+      "type": "guideline",
+      "content": "Error text should be written in 1-2 short, complete sentences and in a clear and straightforward way. End sentences with a period, and never with an exclamation point. For pickers, the nature of the error is often related to something that needs to be fixed for in-line validation, so a helpful tone is most appropriate. For example, if someone were to miss selecting an option to note as their preferred contact method, write the error text like you’re offering a hint or a tip to help guide them to understand what needs to be selected: “Select a contact method.”"
+    },
+    {
+      "type": "guideline",
+      "content": "Placeholder text provides hints about expected input values. When implemented properly, it enhances usability without compromising accessibility."
     }
   ],
   "options": {
-    "label": { "type": "string" },
+    "label": {
+      "type": "string"
+    },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [{ "value": "top" }, { "value": "side" }]
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
+    },
+    "placeholder": {
+      "type": "string"
+    },
+    "value": {
+      "type": "string"
     },
-    "placeholder": { "type": "string" },
-    "value": { "type": "string" },
     "width": {
       "type": "number",
       "description": "Not applicable to quiet picker."
@@ -104,45 +184,111 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isQuiet": { "type": "boolean", "default": false },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    },
     "necessityIndicator": {
       "type": "string",
       "default": "icon",
-      "values": [{ "value": "text" }, { "value": "icon" }]
+      "values": [
+        {
+          "value": "text"
+        },
+        {
+          "value": "icon"
+        }
+      ]
+    },
+    "isRequired": {
+      "type": "boolean",
+      "default": false
     },
-    "isRequired": { "type": "boolean", "default": false },
     "menuContainer": {
       "type": "string",
       "default": "popover",
-      "values": [{ "value": "popover" }, { "value": "tray" }]
+      "values": [
+        {
+          "value": "popover"
+        },
+        {
+          "value": "tray"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "isError": {
+      "type": "boolean",
+      "default": false
     },
-    "isDisabled": { "type": "boolean", "default": false },
-    "isError": { "type": "boolean", "default": false },
-    "description": { "type": "string", "default": null },
-    "errorMessage": { "type": "string", "default": null }
+    "description": {
+      "type": "string",
+      "default": null
+    },
+    "errorMessage": {
+      "type": "string",
+      "default": null
+    }
   },
   "states": [
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "focus-+-hover", "trigger": "prop" },
-    { "name": "focus-+-not-hover", "trigger": "prop" },
-    { "name": "keyboard-focus", "trigger": "interaction" }
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "focus-+-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "focus-+-not-hover",
+      "trigger": "prop"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "combobox",
     "intents": ["select", "expand"],
     "focusable": true,
     "keyboardIntents": ["expand", "collapse", "navigate-options"],
     "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/popover.json

@@ -9,6 +9,19 @@
     "category": "containers",
     "documentationUrl": "https://spectrum.adobe.com/page/popover/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "Popover",
+      "package": "@react-spectrum/s2"
+    },
+    {
+      "platform": "web",
+      "componentName": "Popover",
+      "importPath": "@adobe/spectrum-wc/components/popover",
+      "notes": "Spectrum 2 web component custom element: swc-popover."
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,71 +29,138 @@
     },
     {
       "type": "guideline",
-      "content": "Source.\n\nPopovers stem off of action buttons that act as a source to open up transient content."
+      "content": "Popovers are containers for transient content like menus, options, or additional actions. They float above the interface and stand out visually using stroke and drop shadow."
+    },
+    {
+      "type": "guideline",
+      "content": "To keep a popover within certain boundaries, such as a browser window, define a container and a container padding value."
+    },
+    {
+      "type": "guideline",
+      "content": "The cross offset is the placement offset on the cross axis: the x-axis for top and bottom positions, and the y-axis for left and right positions."
     },
     {
       "type": "guideline",
-      "content": "Animation.\n\nWhen displaying a popover, it should animate from its source to reinforce the connection between popover and source. It should fade in and slide with subtle motion from the source."
+      "content": "The offset is the space between the source and the popover (or tip, if present). Adjust it as needed to align visually with the source’s perceived bounds and maintain a balanced relationship between the two elements."
     },
     {
       "type": "guideline",
-      "content": "Dismissing a popover.\n\nA popover can be dismissed by clicking or tapping anywhere outside it, including the source, or by selecting an option or taking an action inside the popover."
+      "content": "A popover is positioned in relation to its source."
     },
     {
       "type": "guideline",
-      "content": "Popovers vs. trays.\n\nTrays can be used as alternatives to popovers on small screens. Use a tray when the amount of content is too large or overwhelming for a popover."
+      "content": "Popovers usually appear without a tip and rely on a distinct down state in the source to show their origin. When the source lacks that visual cue, add a tip to reinforce the connection between the popover and its source."
     },
     {
       "type": "guideline",
-      "content": "Show tip when source is ambiguous.\n\nWhen the source that triggers the popover does not have a visually distinct down state, use a popover with a tip to clearly indicate the connection to its source."
+      "content": "A popover’s height can be customized appropriately for its context."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the popover is mirrored. Text is right-aligned and buttons are left-aligned."
+      "content": "A popover’s width can be customized appropriately for its context."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus onto or off of the button.Space or EnterExecutes the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller."
+      "content": "Popovers stem off of action buttons that act as a source to open up transient content."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Usage PointerUse the pointer cursor for all interactive components."
+      "content": "When displaying a popover, it should animate from its source to reinforce the connection between popover and source. It should fade in and slide with subtle motion from the source."
     },
     {
       "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—such as icons used in buttons—must provide a text alternative that communicates the button’s purpose. All buttons, especially icon‑only buttons, 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, AAAButtons should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role of buttons should be utilized.Use of color 1.4.1 AColor is never used as the sole way to convey meaning in buttons. While negative buttons do use red to reinforce their purpose, every button also includes a clear text label that communicates the action it performs.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.Resize text 1.4.4 AAButtons should be built in such a way that they can be resized without assistive technology up to 200%.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 icons and various states have 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. 2. Operable Requirement Criterion Level 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 popover can be dismissed by clicking or tapping anywhere outside it, including the source, or by selecting an option or taking an action inside the popover."
+    },
+    {
+      "type": "guideline",
+      "content": "Trays can be used as alternatives to popovers on small screens. Use a tray when the amount of content is too large or overwhelming for a popover."
+    },
+    {
+      "type": "guideline",
+      "content": "When the source that triggers the popover does not have a visually distinct down state, use a popover with a tip to clearly indicate the connection to its source."
     }
   ],
   "options": {
-    "width": { "type": "number" },
-    "height": { "type": "number" },
-    "hideTip": { "type": "boolean", "default": false },
+    "width": {
+      "type": "number"
+    },
+    "height": {
+      "type": "number"
+    },
+    "hideTip": {
+      "type": "boolean",
+      "default": false
+    },
     "placement": {
       "type": "string",
       "default": "top",
       "values": [
-        { "value": "top" },
-        { "value": "top left" },
-        { "value": "top right" },
-        { "value": "top start" },
-        { "value": "top end" },
-        { "value": "bottom" },
-        { "value": "bottom left" },
-        { "value": "bottom right" },
-        { "value": "bottom start" },
-        { "value": "bottom end" },
-        { "value": "left" },
-        { "value": "left top" },
-        { "value": "left bottom" },
-        { "value": "start" },
-        { "value": "start top" },
-        { "value": "start bottom" },
-        { "value": "right" },
-        { "value": "right top" },
-        { "value": "right bottom" },
-        { "value": "end" },
-        { "value": "end top" },
-        { "value": "end bottom" }
+        {
+          "value": "top"
+        },
+        {
+          "value": "top left"
+        },
+        {
+          "value": "top right"
+        },
+        {
+          "value": "top start"
+        },
+        {
+          "value": "top end"
+        },
+        {
+          "value": "bottom"
+        },
+        {
+          "value": "bottom left"
+        },
+        {
+          "value": "bottom right"
+        },
+        {
+          "value": "bottom start"
+        },
+        {
+          "value": "bottom end"
+        },
+        {
+          "value": "left"
+        },
+        {
+          "value": "left top"
+        },
+        {
+          "value": "left bottom"
+        },
+        {
+          "value": "start"
+        },
+        {
+          "value": "start top"
+        },
+        {
+          "value": "start bottom"
+        },
+        {
+          "value": "right"
+        },
+        {
+          "value": "right top"
+        },
+        {
+          "value": "right bottom"
+        },
+        {
+          "value": "end"
+        },
+        {
+          "value": "end top"
+        },
+        {
+          "value": "end bottom"
+        }
       ]
     },
     "offset": {
@@ -88,19 +168,28 @@
       "default": 8,
       "description": "pixel measurement"
     },
-    "crossOffset": { "type": "number", "default": 0 },
+    "crossOffset": {
+      "type": "number",
+      "default": 0
+    },
     "containerPadding": {
       "type": "number",
       "default": 8,
       "description": "pixel measurement"
     }
   },
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "intents": ["dismiss"],
     "focusable": false,
     "wcag": [
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }