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

package/components/tag.json

@@ -16,108 +16,58 @@
     },
     {
       "type": "guideline",
-      "content": "Tags categorize content such as keywords or names. They’re often grouped to represent a search query or describe an item."
+      "content": "Text overflow.\n\nWhen the tag text is too long for the available horizontal space or when a tag reaches its maximum width, it truncates. Hovering over the tag shows a tooltip with the full text."
     },
     {
-      "type": "guideline",
-      "content": "Tags should always include a label. These can represent search terms, filters, or keywords."
-    },
-    {
-      "type": "guideline",
-      "content": "Tags have the option to include an avatar in addition to the label. These should be used to represent entities."
-    },
-    {
-      "type": "guideline",
-      "content": "Tags have the option to be removable or not. Removable tags have a small close (“x”) button."
+      "type": "do-dont",
+      "content": "Avoid conflicting tag actions",
+      "dont": "A tag can either trigger navigation or filtering, or act as a dismissible chip. Combining both interactions disrupts focus order and accessibility states. Choose one behavior — navigation or dismissal — and apply it consistently."
     },
     {
       "type": "guideline",
-      "content": "A tag can be marked as having an error to show that it has become invalid."
+      "content": "RTL.\n\nFor RTL (right-to-left) languages, the layout of the tag is mirrored. The avatar is right-aligned and the close button is left-aligned."
     },
     {
       "type": "guideline",
-      "content": "A tag in a disabled state shows that a tag exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a tag may become available later."
+      "content": "Keyboard interactions.\n\nKey Interaction TabTabbing into a group of tags places the focus on the first tag (only one tag receives the keyboard focus at a time).Arrow keysMoves focus through the group of tags.Page Up or Page DownMoves focus to the previous or next tag in the group (last becomes first, and first becomes last).Home or EndMoves focus to the first or last tag in the group.Backspace or DeleteRemoves the tag in focus from the group.SpaceIf the tag is selectable, the space bar will toggle selection."
     },
     {
       "type": "guideline",
-      "content": "Tags have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed."
+      "content": "Cursor guidelines.\n\nCursor Description Default (Arrow)Use the default cursor for non-interactive tags.PointerUse the pointer cursor for interactive tags, such as tags that are removable or can be used to filter content.Grab handUse the grab hand cursor when the order of tags can be rearranged.Grab fistUse the grab fist cursor when holding a tag."
     },
     {
       "type": "guideline",
-      "content": "When the tag text is too long for the available horizontal space or when a tag reaches its maximum width, it truncates. Hovering over the tag shows a tooltip with the full text."
-    },
-    {
-      "type": "guideline",
-      "content": "A tag can either trigger navigation or filtering, or act as a dismissible chip. Combining both interactions disrupts focus order and accessibility states. Choose one behavior — navigation or dismissal — and apply it consistently."
+      "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 tags—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 AATags should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.Text contrast 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 AATags should be built in such a way that they can be resized without assistive technology up to 200%.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 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."
     }
   ],
   "options": {
-    "label": {
-      "type": "string"
-    },
-    "hasAvatar": {
-      "type": "boolean",
-      "default": false
-    },
-    "isRemovable": {
-      "type": "boolean",
-      "default": false
-    },
-    "isError": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "isReadOnly": {
-      "type": "boolean",
-      "default": false
-    }
+    "label": { "type": "string" },
+    "hasAvatar": { "type": "boolean", "default": false },
+    "isRemovable": { "type": "boolean", "default": false },
+    "isError": { "type": "boolean", "default": false },
+    "isDisabled": { "type": "boolean", "default": false },
+    "isReadOnly": { "type": "boolean", "default": false }
   },
   "anatomy": [
     {
       "name": "clear-icon",
       "description": "Icon affordance that removes the tag."
     },
-    {
-      "name": "cross-icon",
-      "description": "Cross/X icon shown on the tag."
-    }
+    { "name": "cross-icon", "description": "Cross/X icon shown on the tag." }
   ],
   "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": {
     "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/takeover-dialog.json

@@ -16,67 +16,26 @@
     },
     {
       "type": "guideline",
-      "content": "Takeover dialogs are full-screen modals used for complex or immersive workflows. They block access to the rest of the interface and are typically used when multiple steps or tools need focused attention. Use when the task requires the entire screen and shouldn’t be interrupted."
+      "content": "Title text overflow.\n\nWhen the title is too long for the available horizontal space, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "The takeover dialog supports two slots—one in the header and one in the body—where other components can be inserted."
+      "content": "Header content overflow.\n\nTakeover dialogs can optionally include additional elements in the header custom content area. When horizontal space is limited, the header custom content will be displayed underneath the title."
     },
     {
       "type": "guideline",
-      "content": "Takeover dialogs support two layout variants: dialog and full-screen."
-    },
-    {
-      "type": "guideline",
-      "content": "All takeover dialogs must include a title. The title appears at the top of the dialog and should briefly describe the expected outcome if the user proceeds with the primary action."
-    },
-    {
-      "type": "guideline",
-      "content": "A takeover dialog must include at least one button. The primary action label refers to the rightmost button in the dialog footer for languages that read left to right. It should use a short, actionable phrase that clearly communicates the result of selecting the action—whether that means taking action, progressing through a workflow, or dismissing the dialog."
-    },
-    {
-      "type": "guideline",
-      "content": "Takeover dialogs can include up to three buttons if a secondary outline button label is defined. If no label is defined, the button won’t appear. The secondary outline button should use a short, actionable phrase that clearly communicates the result of selecting the action—typically describing the previous step or an alternative choice."
-    },
-    {
-      "type": "guideline",
-      "content": "By default, a takeover dialog that includes a button to cancel or go back will be labeled “Cancel.”"
-    },
-    {
-      "type": "guideline",
-      "content": "When the title is too long for the available horizontal space, it wraps to form another line."
-    },
-    {
-      "type": "guideline",
-      "content": "Takeover dialogs can optionally include additional elements in the header custom content area. When horizontal space is limited, the header custom content will be displayed underneath the title."
-    },
-    {
-      "type": "guideline",
-      "content": "Most dialog titles should communicate the primary action of the dialog. When possible, the button label should use the same language as the action mentioned in the title. For example, if the title is “Delete conversation,” the primary action button label should be “Delete.”"
+      "content": "Use similar language for dialog titles and actions.\n\nMost dialog titles should communicate the primary action of the dialog. When possible, the button label should use the same language as the action mentioned in the title. For example, if the title is \"Delete conversation,\" the primary action button label should be \"Delete."
     }
   ],
   "options": {
-    "title": {
-      "type": "string"
-    },
-    "description": {
-      "type": "string"
-    },
+    "title": { "type": "string" },
+    "description": { "type": "string" },
     "variant": {
       "type": "string",
       "default": "dialog",
-      "values": [
-        {
-          "value": "dialog"
-        },
-        {
-          "value": "full screen"
-        }
-      ]
-    },
-    "primaryActionLabel": {
-      "type": "string"
+      "values": [{ "value": "dialog" }, { "value": "full screen" }]
     },
+    "primaryActionLabel": { "type": "string" },
     "secondaryActionLabel": {
       "type": "string",
       "description": "If undefined, this button does not appear."
@@ -105,25 +64,15 @@
       }
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "accessibility": {
     "role": "dialog",
     "intents": ["dismiss"],
     "focusable": false,
     "keyboardIntents": ["dismiss"],
     "wcag": [
-      {
-        "criterion": "2.4.3",
-        "level": "A",
-        "title": "Focus Order"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "2.4.3", "level": "A", "title": "Focus Order" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }

package/components/text-area.json

@@ -16,284 +16,135 @@
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Minimum width.\n\nText areas are ideal for long sentences or paragraphs, and should comfortably accommodate larger amounts of text. They should have a minimum height of text-area-minimum-height (when the height of the text area is a defined number). The minimum width is field-default-width-[small/medium/large/extra-large]."
     },
     {
       "type": "guideline",
-      "content": "The value shows a user’s entered text."
+      "content": "Text overflow.\n\nWhen typing into a text area and reaching the end of the field on a number-height text area, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text."
     },
     {
       "type": "guideline",
-      "content": "The text area’s default width is field-default-width-\\[small/medium/large/extra-large]."
+      "content": "Mixed value.\n\nWhen a text area presents multiple values that are not identical, the field should show an en dash (–)."
     },
     {
       "type": "guideline",
-      "content": "Text areas 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": "Help text overflow.\n\nWhen the help text is too long for the available horizontal space, it wraps to form another line."
     },
     {
       "type": "guideline",
-      "content": "Text areas can be marked as optional or required, depending on the situation. For required text areas, there are two styling options: a “(required)” label or an asterisk. If you use an asterisk, be sure to include hint text to explain what the asterisk means. Optional text areas are either denoted with text added to the end of the label — “(optional)” — or have no indication at all."
+      "content": "Include a label.\n\nEvery text area should have a label. A text area without a label is ambiguous and not accessible."
     },
     {
       "type": "guideline",
-      "content": "The asterisk used in this component is an icon that has specific spacing from the label text — not part of the label text itself."
+      "content": "Follow capitalization rules.\n\nText area labels and placeholder text should be written in sentence case."
     },
     {
       "type": "guideline",
-      "content": "Text areas can show a character count when input must stay under a set limit. This indicator can appear alongside others, such as validation icons or “optional” and “required” labels."
+      "content": "Mark the minority of text areas in a form as required or optional.\n\nIn a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. If most of the text fields are optional, only the required fields should be give an asterisk or have labels appended with \"(required)\". If most of the text fields are required, only the optional fields should be appended with \"(optional)\". An asterisk should never be used to note that a text area is optional."
     },
     {
       "type": "guideline",
-      "content": "Text areas can show a validation icon when input must follow a specific format, such as an email or credit card number. The icon appears as soon as the entry is valid."
+      "content": "Use help text to show hints, formatting, and requirements.\n\nThe description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it's about how to input. This includes information such as: An overall description of the input field Hints for what kind of information needs to be input Specific formatting examples or requirements The help text's message should not simply restate the same information in the label in order to prompt someone to interact with it. 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": "A text area 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. If an error exists, the error icon always overrides the validation icon."
-    },
-    {
-      "type": "guideline",
-      "content": "A text area in a disabled state shows that the input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a text area may become available later."
-    },
-    {
-      "type": "guideline",
-      "content": "If the height is defined, text areas can either be a static size or can be resizable with a drag icon in the bottom right corner. The drag icon should be hidden if the fixed variant is turned off, or if the text area should not be resizable."
-    },
-    {
-      "type": "guideline",
-      "content": "When defined as fixed (either by the development team or by the end user via the dragIcon), users can scroll inside the field."
-    },
-    {
-      "type": "guideline",
-      "content": "A text area 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 text area 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. The error message communicates an error for when the field requirements aren’t met, prompting a user to adjust what they had originally input. If an error exists, the error icon always overrides the validation icon."
-    },
-    {
-      "type": "guideline",
-      "content": "A text area can have multiple input types, depending on the need and use case. Text areas have a text input type by default."
-    },
-    {
-      "type": "guideline",
-      "content": "Use these input types for the following use cases:"
-    },
-    {
-      "type": "guideline",
-      "content": "When typing into a text area and reaching the end of the field on a number-height text area, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text."
-    },
-    {
-      "type": "guideline",
-      "content": "When a text area presents multiple values that are not identical, the field should show an en dash (–)."
-    },
-    {
-      "type": "guideline",
-      "content": "When the help text is too long for the available horizontal space, it wraps to form another line."
-    },
-    {
-      "type": "guideline",
-      "content": "Every text area should have a label. A text area without a label is ambiguous and not accessible."
-    },
-    {
-      "type": "guideline",
-      "content": "Text area labels and placeholder text should be written in sentence case."
-    },
-    {
-      "type": "guideline",
-      "content": "In a single form, mark only the required fields or only the optional fields, depending on whichever is less frequent in the entire form. If most of the text fields are optional, only the required fields should be give an asterisk or have labels appended with “(required)”. If most of the text fields are required, only the optional fields should be appended with “(optional)”. An asterisk should never be used to note that a text area is optional."
-    },
-    {
-      "type": "guideline",
-      "content": "The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input. This includes information such as:"
-    },
-    {
-      "type": "guideline",
-      "content": "The help text’s message should not simply restate the same information in the label in order to prompt someone to interact with it. 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": "do-dont",
+      "content": "Don't use placeholder text",
+      "dont": "Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible. Once a value is entered, placeholder text is no longer viewable; if someone is using an automatic form filler, they will never get the information in the placeholder text. Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. If there's placeholder text and help text at the same time, it becomes redundant and distracting, especially if they're communicating the same thing."
     },
     {
       "type": "guideline",
-      "content": "Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible. Once a value is entered, placeholder text is no longer viewable; if someone is using an automatic form filler, they will never get the information in the placeholder text."
+      "content": "Switch help text with error text.\n\nThe help text area also displays an error message. When a text area 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 field. 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 successfully complete the input. Error text tells a user how to fix the error by re-stating the input 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": "Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. If there's placeholder text and help text at the same time, it becomes redundant and distracting, especially if they're communicating the same thing."
+      "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 text areas, 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 filling out a required field that asks for their interests, write the error text like you're offering a hint or a tip to help guide them to understand what needs to go in the missing field: \"Enter at least one interest."
     },
     {
       "type": "guideline",
-      "content": "The help text area also displays an error message. When a text area 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 field."
+      "content": "RTL.\n\nIn right‑to‑left languages, the text‑area layout is mirrored. The label appears right‑aligned, and elements such as the character count, validation icon and error icon appear left‑aligned. Keep in mind that some content, including email addresses, does not change direction or translate."
     },
     {
       "type": "guideline",
-      "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 successfully complete the input. Error text tells a user how to fix the error by re-stating the input 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": "Keyboard interactions.\n\nKey Interaction TabTabbing into a text area selects the existing text.Shift + TabMoves focus to the previous focusable element.EnterInserts a new line at the caret position.Arrow keysMove caret through text; with Shift, extend text selection.Home / EndMove caret to start/end of line (platform behavior may vary).Ctrl/Cmd + ASelect all text in the text area. Note: Standard native text-editing shortcuts (copy, paste, undo, redo, delete, word navigation) should be preserved and not overridden."
     },
     {
       "type": "guideline",
-      "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."
+      "content": "Cursor guidelines.\n\nCursor Description TextUse text cursor over editable text area content in all states.PointerAny clickable control that is part of the text area (e.g., clear/reveal/help icon) uses the pointer cursor.Move (up/down and left/right)Use while dragging the resize handle (if resizing is enabled)."
     },
     {
       "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 text areas, 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 filling out a required field that asks for their interests, write the error text like you’re offering a hint or a tip to help guide them to understand what needs to go in the missing field: “Enter at least one interest.”"
+      "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 paired with a text area (validation icons, clear-input icons), must provide a text alternative. All text areas need an accessible name (via a visible label, title, aria-label, or associated text) so screen readers can announce their purpose.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAAText areas should be understandable by assistive technologies. The label, help text, error message, and required state must be programmatically associated with the field using semantic HTML or ARIA.Contrast 1.4.3 AAThe visual presentation of text has a contrast ratio of at least 4.5:1.Resize text 1.4.4 AAText areas can be resized up to 200% without loss of content or functionality and without assistive technology.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 illustrations, icons, and component states have a contrast ratio of at least 3:1. Not applicable for empty fields.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size. 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."
     }
   ],
   "options": {
-    "label": {
-      "type": "string"
-    },
+    "label": { "type": "string" },
     "labelPosition": {
       "type": "string",
       "default": "top",
-      "values": [
-        {
-          "value": "top"
-        },
-        {
-          "value": "side"
-        }
-      ]
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "default": false
-    },
-    "value": {
-      "type": "string",
-      "description": "from minValue to maxValue"
-    },
-    "width": {
-      "type": "number"
+      "values": [{ "value": "top" }, { "value": "side" }]
     },
+    "hideLabel": { "type": "boolean", "default": false },
+    "value": { "type": "string", "description": "from minValue to maxValue" },
+    "width": { "type": "number" },
     "size": {
       "type": "string",
       "default": "m",
       "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
       ]
     },
     "necessityIndicator": {
       "type": "string",
       "default": "icon",
-      "values": [
-        {
-          "value": "text"
-        },
-        {
-          "value": "icon"
-        }
-      ]
-    },
-    "isRequired": {
-      "type": "boolean",
-      "default": false
-    },
-    "hasCharacterCount": {
-      "type": "boolean",
-      "default": false
-    },
-    "showValidIcon": {
-      "type": "boolean",
-      "default": false
-    },
-    "isError": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "hideDragIcon": {
-      "type": "boolean",
-      "default": false
-    },
+      "values": [{ "value": "text" }, { "value": "icon" }]
+    },
+    "isRequired": { "type": "boolean", "default": false },
+    "hasCharacterCount": { "type": "boolean", "default": false },
+    "showValidIcon": { "type": "boolean", "default": false },
+    "isError": { "type": "boolean", "default": false },
+    "isDisabled": { "type": "boolean", "default": false },
+    "hideDragIcon": { "type": "boolean", "default": false },
     "height": {
       "type": "number",
       "description": "If undefined, height is dynamic and grows with input text."
     },
-    "helpText": {
-      "type": "string"
-    },
-    "errorMessage": {
-      "type": "string"
-    },
+    "helpText": { "type": "string" },
+    "errorMessage": { "type": "string" },
     "inputType": {
       "type": "string",
       "default": "text",
       "values": [
-        {
-          "value": "text"
-        },
-        {
-          "value": "url"
-        },
-        {
-          "value": "phone"
-        },
-        {
-          "value": "email"
-        },
-        {
-          "value": "password"
-        }
+        { "value": "text" },
+        { "value": "url" },
+        { "value": "phone" },
+        { "value": "email" },
+        { "value": "password" }
       ]
     }
   },
   "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": "textbox",
     "intents": ["input"],
     "focusable": true,
     "wcag": [
-      {
-        "criterion": "1.3.1",
-        "level": "A",
-        "title": "Info and Relationships"
-      },
+      { "criterion": "1.3.1", "level": "A", "title": "Info and Relationships" },
       {
         "criterion": "1.3.5",
         "level": "AA",
         "title": "Identify Input Purpose"
       },
-      {
-        "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" }
     ]
   }
 }