@swell/swell-ui 0.1.0 → 0.1.1

package/dist/editors/vscode.html-custom-data.json

@@ -0,0 +1,1156 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "swell-badge",
+      "description": "A badge: a short label or a count, such as a subscription's interval, a discount or a quantity.\nIt is text only: screen readers read it in place, so a count needs its context in the host's markup, such as hidden text next to it.\n---\n\n\n### **Slots:**\n - _default_ - The label.\n- **start** - An icon before the label, drawn 1px larger than the text.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Which palette of `color` the badge takes its colors from: `secondary`, quiet, or a variant of the host's own; without it, the badge's own.",
+          "values": []
+        },
+        {
+          "name": "appearance",
+          "description": "How the badge is drawn; the configured setting by default.",
+          "values": [{ "name": "filled" }, { "name": "outline" }]
+        },
+        {
+          "name": "size",
+          "description": "How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-button",
+      "description": "A button. It submits or resets the form it belongs to, like a native button.\nWith `href` it is a link that looks like the button: an anchor in its shadow root fills it inside the border, takes the focus and follows the link, named by the element's own `aria-label`, or else by its content; `type`, `disabled`, `loading` and `success` belong to the button without `href`.\n`role=\"button\"` and `tabindex=\"0\"` count as the kit's and leave when `href` comes; any other role or tabindex is the host's and stays.\n\nWhile `loading`, the button shows a spinner in place of its `start` content, hides its `end` content and ignores clicks; it keeps its focus.\nWith `success`, it is filled with the success color and shows a check in place of its icons and its spinner. It is inactive, as after a payment, but keeps its focus and doesn't fade.\n---\n\n\n### **Methods:**\n - **shake(): _void_** - Shakes the button, as after a failed attempt to submit; each call starts the shake again.\n- **focus(options: _FocusOptions_): _void_** - Focuses the anchor with `href`, and the button itself without it.\n\n### **Slots:**\n - _default_ - The label of the button.\n- **start** - An icon before the label, drawn 4px larger than the text.\n- **end** - An icon after the label, drawn 4px larger than the text; it moves toward the end on hover.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Removes the button from the tab order and ignores clicks.",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order.",
+          "values": []
+        },
+        {
+          "name": "success",
+          "description": "Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Which palette of `color` the button takes its colors from: `secondary`, or a variant of the host's own; without it, the button's own.",
+          "values": []
+        },
+        {
+          "name": "appearance",
+          "description": "How the button is drawn; the variant's setting by default.",
+          "values": [
+            { "name": "filled" },
+            { "name": "outline" },
+            { "name": "plain" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the button is; `medium` by default. `xsmall` fits an action inside a status message.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "shape",
+          "description": "Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons.",
+          "values": [{ "name": "pill" }]
+        },
+        {
+          "name": "href",
+          "description": "Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Where to open the link.",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "How the link's target relates to the page.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "What the button does in a form; `submit` by default.",
+          "values": [
+            { "name": "submit" },
+            { "name": "reset" },
+            { "name": "button" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-card",
+      "description": "A card: a box that groups content, such as the details of an order or a note under a choice.\n---\n\n\n### **Slots:**\n - _default_ - The content.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "How the card is drawn: with a border, or filled with the quiet background; the configured setting by default.",
+          "values": [{ "name": "outline" }, { "name": "filled" }]
+        },
+        {
+          "name": "size",
+          "description": "How large the padding is: it follows the text of the size; `medium` by default.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-checkbox",
+      "description": "A checkbox: a native checkbox with its label, hint and error, rendered into light DOM.\n---\n\n\n### **Events:**\n - **change** - The user checks or unchecks the box; it bubbles from the native input.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label beside the box.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the checkbox.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the checkbox is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the checkbox invalid and shows the error.",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "The default state.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value sent with the form; `on` by default.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the checkbox.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the checkbox required.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "How large the checkbox is: the label takes the text of the size and the box grows with it; `medium` by default. The target stays at least 24px.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-chip",
+      "description": "A chip: a short value the shopper can remove, such as an applied discount code or gift card.\nIts remove button fires `remove`; the host removes the chip and moves the focus, for example to the code field.\nA disabled chip, by its own attribute or a disabled fieldset around it, keeps its value legible and fades its remove button, which takes neither the focus nor presses, so a host can lock a form while it is sent.\n---\n\n\n### **Events:**\n - **remove** - The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focuses the remove button, the chip's only stop, so a host can hand the focus to a chip; a click on the text leaves the focus alone.\n\n### **Slots:**\n - _default_ - The value.\n- **start** - An icon before the value, drawn 2px larger than the text.\n\n### **CSS Parts:**\n - **remove** - The remove button.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the remove button.",
+          "values": []
+        },
+        {
+          "name": "remove-label",
+          "description": "The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-disclosure",
+      "description": "A disclosure: content that stays hidden until the shopper presses its trigger, such as \"Add apartment, suite, etc.\" and the field it reveals.\nThe trigger opens it and leaves; the focus moves to the first control of the content.\nWith `toggle`, such as a collapsible order summary, the trigger stays, closes the content too and tells whether it is open with `aria-expanded`; the focus stays on it.\nThe host can also set `open` itself, for example from a checkbox, and remove it to close the content and bring the trigger back; without a trigger, the host moves the focus out first.\nClosed content stays in the page and in the form: render it only while open, or disable its fields, so a required field doesn't block the submit.\n---\n\n\n### **Events:**\n - **toggle** - The content opened or closed: by the trigger or by script, also as it starts open. A `ToggleEvent` with `oldState` and `newState`, fired once the script that changed `open` has run; it doesn't bubble and can't be cancelled.\n\n### **Methods:**\n \n\n### **Slots:**\n - **trigger** - The host's button that opens the content, such as `<swell-link appearance=\"plain\">`; a button, not a link with `href`. Inside a form a `<button>` or a `<swell-button>` needs `type=\"button\"`. A listener that cancels the press, also a framework's handler on the page, keeps the content closed.\n- _default_ - The content.\n\n### **CSS Parts:**\n - **content** - The box that expands to show the content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Shows the content and hides the trigger. Set on connect, the content shows at once.",
+          "values": []
+        },
+        {
+          "name": "toggle",
+          "description": "Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-divider",
+      "description": "A divider: a line across its width, or two lines with a label between them, such as \"or pay another way\".\nWithout a label it is a separator for screen readers; with one, they read the label and skip the lines.\nThe host sets the space around it.\n---\n\n\n### **Slots:**\n - _default_ - An optional label, such as text or an icon, drawn in the caption font and the secondary text color; whitespace and hidden content aren't one.",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "swell-link",
+      "description": "A link. With `href`, its anchor lives in the shadow root and takes the focus for the element.\n\nWithout `href` the element itself is a button that looks like the link: it takes the button role and the tab stop, fires `click` on Enter and Space, and never submits a form.\nIts own `aria-label`, `aria-expanded` and `aria-controls` name and describe that button, so it can open a popover or a disclosure.\n`role=\"button\"` and `tabindex=\"0\"` count as the kit's and leave when `href` comes; any other role or tabindex is the host's and stays.\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focuses the anchor with `href`, and the element itself without it.\n\n### **Slots:**\n - _default_ - The text of the link.\n- **start** - An icon before the text, 2px larger than it.\n- **end** - An icon after the text, 2px larger than it.\n\n### **CSS Parts:**\n - **link** - The anchor, or the content of the button without `href`.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "Where the link goes; without it the element is a button. With it, the anchor is named by the element's own `aria-label`, as a link of an icon alone needs, or else by its content.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Where to open the link.",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "How the target relates to the page.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Which palette of `color` the link takes its color from: `secondary`, quiet text, or a variant of the host's own; without it, the link color.",
+          "values": []
+        },
+        {
+          "name": "appearance",
+          "description": "How the link is drawn: `underline`, the default, in the font of the text around it; `plain`, for a link on its own, without an underline, in the text of a field hint, at least 24px high. Only the attribute sets it.",
+          "values": [{ "name": "underline" }, { "name": "plain" }]
+        },
+        {
+          "name": "size",
+          "description": "How large a plain link is: its text is one step smaller than the text of the size, at least 12px; `medium` by default. A link in text takes the font around it.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-input",
+      "description": "A text field: a native input with its label, hint and error, rendered into light DOM.\n---\n\n\n### **Events:**\n - **input** - The value changes as the user types; it bubbles from the native input.\n- **change** - The user commits a new value; it bubbles from the native input.\n\n### **Methods:**\n \n\n- **attributesOf(passed: _string[]_, own: _string[]_): _string[]_** - Every attribute a text field observes, for the subclass's `observedAttributes`.\n\n### **Slots:**\n - **hint** - Help content under the field in place of the `hint` text, such as \"Did you mean <swell-link>gmail.com</swell-link>?\"; it describes the input, and hiding it with `hidden` brings the `hint` text back.\n- **start** - Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.\n- **end** - Content after the text, such as a card logo, a check or a button; hide it with `hidden`, and disable a button in it along with the field.\n\n### **CSS Parts:**\n - **frame** - The box that draws the field around the native input, its start and its end.\n- **start** - The box of the start content.\n- **end** - The box of the end content.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label of the field.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the field.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the field is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the field invalid and shows the error.",
+          "values": []
+        },
+        { "name": "value", "description": "The default value.", "values": [] },
+        {
+          "name": "type",
+          "description": "The kind of value; `text` by default.",
+          "values": [
+            { "name": "text" },
+            { "name": "email" },
+            { "name": "tel" },
+            { "name": "password" },
+            { "name": "number" },
+            { "name": "search" },
+            { "name": "url" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "How the field is drawn; the configured setting by default.",
+          "values": [
+            { "name": "outline" },
+            { "name": "filled" },
+            { "name": "underline" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the field is; `medium` by default. At `xsmall` the label sits above the field.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the field.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the field read-only.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the field required.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Text shown while the field is empty.",
+          "values": []
+        },
+        {
+          "name": "autocomplete",
+          "description": "The autofill hint of the native input.",
+          "values": []
+        },
+        {
+          "name": "inputmode",
+          "description": "The virtual keyboard to show.",
+          "values": []
+        },
+        {
+          "name": "minlength",
+          "description": "The shortest allowed value.",
+          "values": []
+        },
+        {
+          "name": "maxlength",
+          "description": "The longest allowed value.",
+          "values": []
+        },
+        {
+          "name": "pattern",
+          "description": "The pattern the value matches.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The smallest allowed value.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The largest allowed value.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The step between allowed values.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-lookup-list",
+      "description": "The list of a lookup's suggestions. It lives only as a child of `<swell-lookup>`, which shows it under the field while it opens.\n---\n\n\n### **Slots:**\n - _default_ - The suggestions, `<swell-lookup-option>` elements.",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "swell-lookup-option",
+      "description": "One suggestion of a lookup. It lives only as a child of `<swell-lookup-list>`.\nChoosing it clicks it: the host reads the option from the `click`. A click on a disabled suggestion reaches the host's handlers too, and the field ignores it.\n---\n\n\n### **Slots:**\n - _default_ - The label of the suggestion; the field writes its text into the input when it is chosen.\n- **start** - Content before the label, such as an icon.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the suggestion, such as the id of a place; the label by default.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "A second line under the label.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the suggestion.",
+          "values": []
+        },
+        { "name": "hidden", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-lookup",
+      "description": "A text field with suggestions: a combobox in ARIA terms. The host loads the suggestions, such as addresses,\nand puts them into a `<swell-lookup-list>` child as `<swell-lookup-option>` elements; the field shows them under itself.\nIt is a `<swell-input>` in everything else: its native input stays in light DOM, so autofill works as in any field.\n\nThe list opens while the user types and it has something to show, and closes on a choice, on Escape and when the focus leaves the field.\nChoosing a suggestion clicks it. After the click, unless a handler prevented its default, the field writes the suggestion's label\ninto the input and fires `input`, with `inputType` `insertReplacementText`, and `change`; the list stays closed until the user types again.\n---\n\n\n### **Events:**\n - **input** - The value changes as the user types; it bubbles from the native input.\n- **change** - The user commits a new value; it bubbles from the native input.\n\n### **Methods:**\n \n\n- **attributesOf(passed: _string[]_, own: _string[]_): _string[]_** - Every attribute a text field observes, for the subclass's `observedAttributes`.\n\n### **Slots:**\n - _default_ - The list of suggestions, a `<swell-lookup-list>`. While it is there, the input is a combobox and the list can open: keep it in the field, even empty, for as long as the field takes suggestions.\n- **hint** - Help content under the field in place of the `hint` text, as on an input.\n- **action** - A row at the end of the list, such as a `<button type=\"button\">` that opens a manual form; it shows with at least one suggestion, so it stays in the field, and a click on it closes the list.\n- **start** - Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.\n- **end** - Content after the text, such as a card logo, a check or a button; hide it with `hidden`, and disable a button in it along with the field.\n\n### **CSS Parts:**\n - **list** - The popup that holds the list and the action.\n- **frame** - The box that draws the field around the native input, its start and its end.\n- **start** - The box of the start content.\n- **end** - The box of the end content.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label of the field.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the field.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the field is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the field invalid and shows the error.",
+          "values": []
+        },
+        { "name": "value", "description": "The default value.", "values": [] },
+        {
+          "name": "type",
+          "description": "The kind of value; `text` by default.",
+          "values": [
+            { "name": "text" },
+            { "name": "email" },
+            { "name": "tel" },
+            { "name": "password" },
+            { "name": "number" },
+            { "name": "search" },
+            { "name": "url" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "How the field is drawn; the configured setting by default.",
+          "values": [
+            { "name": "outline" },
+            { "name": "filled" },
+            { "name": "underline" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the field is; `medium` by default. At `xsmall` the label sits above the field.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the field.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the field read-only.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the field required.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Text shown while the field is empty.",
+          "values": []
+        },
+        {
+          "name": "autocomplete",
+          "description": "The autofill hint of the native input.",
+          "values": []
+        },
+        {
+          "name": "inputmode",
+          "description": "The virtual keyboard to show.",
+          "values": []
+        },
+        {
+          "name": "minlength",
+          "description": "The shortest allowed value.",
+          "values": []
+        },
+        {
+          "name": "maxlength",
+          "description": "The longest allowed value.",
+          "values": []
+        },
+        {
+          "name": "pattern",
+          "description": "The pattern the value matches.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The smallest allowed value.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The largest allowed value.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The step between allowed values.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-popover",
+      "description": "A popover: a small dialog that floats at the host's trigger, such as the language and currency picker of a checkout.\nThe trigger opens and closes it; opened by the trigger, it moves the focus to its first control. Escape closes it and gives the focus back to the trigger;\na press outside it and the focus leaving it close it too. A choice inside keeps it open.\nThe panel sits under the trigger, or above it when there is more room there, at the trigger's start edge, or at its end edge when it would leave the window there.\nIts content sets its width, at least the trigger's and at most the window's less 16px.\nName it with `aria-label`, such as `Language and currency`.\n---\n\n\n### **Events:**\n - **toggle** - The panel opened or closed: by the trigger, Escape, a press outside, the focus leaving it or script, also as it starts open or leaves the page open. A `ToggleEvent` with `oldState` and `newState`, fired once the script that changed `open` has run; it doesn't bubble and can't be cancelled.\n\n### **Slots:**\n - **trigger** - The host's button that opens and closes the panel: a `<button>` or a `<swell-button>`, with `type=\"button\"` inside a form, or a `<swell-link>` without `href`. The popover sets its `aria-expanded`. A listener that cancels the press, also a framework's handler on the page, keeps the panel closed.\n- _default_ - The content of the panel.\n\n### **CSS Parts:**\n - **panel** - The floating panel.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "The panel is open. Set it to open the panel without moving the focus; remove it to close the panel, which gives the focus back to the trigger when the focus is inside.",
+          "values": []
+        },
+        { "name": "aria-label", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-quantity",
+      "description": "A quantity: a count the shopper changes with − and +, such as the quantity of a cart line or of a product before it goes into the cart.\nIt is a spinbutton with one tab stop: the up and down arrows change the count by `step`, and Home and End move it to `min` and `max`.\nName it with `aria-label`, such as `Quantity, House Blend`, or with `aria-labelledby`. It holds the count and takes part in its form.\nWhile the cart updates, set `busy` rather than `disabled`: a disabled quantity leaves the tab order, so disabling the focused one drops the focus to the page.\n---\n\n\n### **Events:**\n - **input** - The user changed the count.\n- **change** - The user changed the count, after `input`.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The starting count, a whole number; `min` by default. A count outside the limits is clamped, and a count the user or a script set stays at the limit that clamped it.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The least count, a whole number; 1 by default.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "How much each step changes the count, a whole number above 0; 1 by default.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Removes the quantity from the tab order and ignores steps.",
+          "values": []
+        },
+        {
+          "name": "busy",
+          "description": "The quantity waits, such as while the cart updates: it keeps the focus, its count and its tab stop, ignores steps, fades and tells screen readers it is busy; a script can still set its count.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "How large the quantity is: it shares a height with buttons and fields of its size; `medium` by default. A cart line takes `xsmall`.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-radio-option",
+      "description": "One option of a radio group. It lives only as a direct child of `<swell-radio>`, which holds the choice.\nIn a segmented group and as a button an option shows its `start` and its label; its hint, `end` and `details` are not drawn.\nAn option with the `hidden` attribute is left out of its group.\n---\n\n\n### **Methods:**\n \n\n### **Slots:**\n - _default_ - The label of the option.\n- **start** - Content before the label, such as an icon or a logo; decoration, left out of the option's name.\n- **end** - Content at the end of the row, such as a price or logos.\n- **details** - Content shown while the option is chosen, such as card fields. While hidden it stays in the page and in the form: render it only while the option is chosen, or disable its fields.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value the group takes when the option is chosen; `on` by default.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the label.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the option.",
+          "values": []
+        },
+        { "name": "hidden", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-radio",
+      "description": "A radio group: a question with one answer, chosen from its `<swell-radio-option>` children.\nIt holds the choice and takes part in its form.\n---\n\n\n### **Events:**\n - **input** - The user chose another option.\n- **change** - The user chose another option, after `input`. Events of fields in the options' details bubble through the group too: the group's own have it as their `target`.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focuses the group's Tab stop, as a Tab into the group does.\n\n### **Slots:**\n - _default_ - The options, `<swell-radio-option>` elements.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The question. Without it, the group takes its name from its own `aria-label`.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the options.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the group is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the group invalid and shows the error.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the option chosen by default.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The form can't be sent until an option is chosen.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables every option.",
+          "values": []
+        },
+        { "name": "aria-label", "values": [] },
+        {
+          "name": "indicator-position",
+          "description": "Where the circle sits in the row of each option; the `radio.indicator.position` setting gives the default. A segmented group draws no circle.",
+          "values": [{ "name": "start" }, { "name": "end" }]
+        },
+        {
+          "name": "size",
+          "description": "How large the options are: their text, circle and padding follow the text of the size, and a segmented track takes the height of a control; `medium` by default.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "How the options are drawn: the circle and the label, each option in a frame, the options sharing a track like a switch, or each option as a button in equal columns. `segmented` suits two or three short options, `button` short options such as languages or sizes; both are set with this attribute only. The `radio.appearance` setting gives the default.",
+          "values": [
+            { "name": "plain" },
+            { "name": "outline" },
+            { "name": "segmented" },
+            { "name": "button" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-select-option",
+      "description": "One option of a select. It lives only as a direct child of `<swell-select>`, which holds the choice.\n---\n\n\n### **Slots:**\n - _default_ - The label of the option.\n- **start** - Content before the label, such as an icon or an image; an svg is drawn 1px larger than the text, in the quiet color.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value the select takes when the option is chosen; the option's label by default.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "A second line under the label.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the option.",
+          "values": []
+        },
+        { "name": "hidden", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-select",
+      "description": "A select: a field that opens a list of its `<swell-select-option>` children and shows the chosen one, with its start content; an svg there is drawn 4px larger than the text, in the quiet color.\nIt holds the choice and takes part in its form.\nTyping goes to the option whose label starts with the typed text, as on a native select: keys typed within half a second, spaces included, form one search.\n---\n\n\n### **Events:**\n - **input** - The user chose another option.\n- **change** - The user chose another option, after `input`.\n\n### **Slots:**\n - _default_ - The options, `<swell-select-option>` elements; a hidden one stays out of the list and the choice.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label of the field. Without it, the select takes its name from its own `aria-label`.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "A marker after the label, such as `(optional)`, in the host's language; it joins the select's name.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the field.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the select is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the select invalid and shows the error.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The value of the option chosen by default.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Text shown while nothing is chosen.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The form can't be sent until an option is chosen.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the select.",
+          "values": []
+        },
+        {
+          "name": "autocomplete",
+          "description": "The browser's autofill hint, such as `country` or `address-level1`, as on a native select: autofill picks the enabled option whose value or label matches the saved one, which counts as the user's choice and fires `input` and `change`.",
+          "values": []
+        },
+        { "name": "aria-label", "values": [] },
+        {
+          "name": "appearance",
+          "description": "How the field is drawn; the configured setting by default.",
+          "values": [
+            { "name": "outline" },
+            { "name": "filled" },
+            { "name": "underline" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the field is; `medium` by default. At `xsmall` the label sits above the field.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-skeleton",
+      "description": "A skeleton: a shimmering bar that stands in for content while it loads, such as a delivery option's name and price.\nThe host sets its width through `style` and marks the region it fills with `aria-busy=\"true\"`; the skeleton itself is hidden from screen readers.\nScreen readers don't all announce `aria-busy`, so a host can also say what is loading in a polite message, such as a visually hidden `<swell-status>`.\n---\n\n\n### **Slots:**\n - _default_ - The bars of a card.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "How large the skeleton is: a bar is 4px lower than the text of the size, a card as high as a control; `medium` by default. The bars of a card keep their own size, so give them the card's.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "`card` draws the empty frame of an option card with its bars at its ends; only the attribute sets it. Without it, the skeleton is a bar.",
+          "values": [{ "name": "card" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-status",
+      "description": "A status message: an error, a success or a warning.\nScreen readers announce it when it is added after the page has loaded and when its text or type changes:\neach message goes into a fresh visually hidden region, an alert for danger and a status otherwise.\n---\n\n\n### **Slots:**\n - _default_ - The message.\n- **start** - An icon before the message, drawn 4px larger than the text, or 2px larger than the smaller text of a plain message; it replaces the type's icon and is hidden from screen readers.\n- **end** - An action after the message, such as a `<swell-button size=\"xsmall\">`; it is left out of the announcement.\n\n### **CSS Parts:**\n - **message** - The message box.",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "What the message means: its color, icon and how it is announced.",
+          "values": [
+            { "name": "danger" },
+            { "name": "success" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the message is: its text, padding and icon follow the text of the size; `medium` by default.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "appearance",
+          "description": "How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only.",
+          "values": [
+            { "name": "filled" },
+            { "name": "outline" },
+            { "name": "plain" },
+            { "name": "quiet" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-tab",
+      "description": "A tab of a `<swell-tabs>` group: its label and its content, shown while it is chosen.\nIn a tab list the group draws the tab and the element is its panel, named by the label; `role=\"tabpanel\"` and that name count as the kit's.\nA step of vertical steps draws its own heading at the group's level, holding a button that opens it, tells whether it is open and controls its content under the heading.\n---\n\n\n### **Methods:**\n \n\n### **Slots:**\n - _default_ - The content, shown while the tab is chosen.\n- **summary** - Vertical steps: content under the heading while the step is closed, such as what a done step holds or what a step that isn't open yet will ask.\n- **end** - Vertical steps: content beside the heading, such as a link that opens a done step or a note.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The group's value while the tab is chosen; the label by default.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The text of the tab or of the step's heading.",
+          "values": []
+        },
+        {
+          "name": "done",
+          "description": "Marks a step as done: its number becomes a check, and the line to the next step fills.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "The tab can't be chosen, such as a step that isn't open yet.",
+          "values": []
+        },
+        { "name": "hidden", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-tabs",
+      "description": "Tabs: a set of `<swell-tab>` children, one of them chosen, with its content shown.\nThe group draws a tab list: a tab per child, named by its label. The arrows move between the tabs and Home and End to the ends; underlined and segmented tabs are chosen as the focus moves, steps with Enter or Space.\nVertical steps draw no tab list: each step is a heading with a button that opens it, and Tab moves between the buttons.\n---\n\n\n### **Events:**\n - **change** - The user chose another tab. A listener that cancels the click on a tab, also a framework's handler on the page, keeps the choice.\n- **request** - The user asks for another tab, by a press or an arrow, with its value in `detail.value`, before the group chooses it; it bubbles. Cancelling it keeps the choice. It fires for a disabled tab too, which stays unchosen, so a host can answer a press on a locked step, such as by checking the open one.\n\n### **Methods:**\n \n\n\n\n### **Slots:**\n - _default_ - The tabs, `<swell-tab>` elements.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the chosen tab; the first tab that isn't disabled by default.",
+          "values": []
+        },
+        { "name": "aria-label", "values": [] },
+        {
+          "name": "orientation",
+          "description": "How steps line up: in a row above the chosen step's content, by default, or one under another, each a heading with its content under it. Other appearances stay in a row.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "level",
+          "description": "The heading level of vertical steps, 1 to 6; 2 by default.",
+          "values": []
+        },
+        {
+          "name": "done-label",
+          "description": "The word a screen reader hears after the label of a done step, in the host's language, such as `Completed`; the check shows it to the eye.",
+          "values": []
+        },
+        {
+          "name": "appearance",
+          "description": "How the tabs are drawn: a line under the chosen tab, a track with a marker under it, or numbered steps joined by lines, each a check once done. `steps` is set with this attribute only; the `tabs.appearance` setting gives the default.",
+          "values": [
+            { "name": "underline" },
+            { "name": "segmented" },
+            { "name": "steps" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the tabs are: they take the height and the text of a control of the size; `medium` by default.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-text",
+      "description": "Text: a title, a heading, a subheading, strong text, body text, a caption, a footnote or an eyebrow.\n---\n\n\n### **Slots:**\n - _default_ - The text.",
+      "attributes": [
+        {
+          "name": "level",
+          "description": "The heading level, 1 to 6: it makes text of any type a heading. A title, a heading and a subheading are headings of level 1, 2 and 3 by default.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Which palette of `color` the text takes its color from: `secondary`, quiet text, or a variant of the host's own; without it, the text color.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "What the text is; body text by default. An eyebrow is uppercase.",
+          "values": [
+            { "name": "title" },
+            { "name": "heading" },
+            { "name": "subheading" },
+            { "name": "strong" },
+            { "name": "body" },
+            { "name": "caption" },
+            { "name": "footnote" },
+            { "name": "eyebrow" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-textarea",
+      "description": "A text field for several lines: a native textarea with its label, hint and error, rendered into light DOM.\nEnter adds a line; the field grows only when the user drags its corner.\n---\n\n\n### **Events:**\n - **input** - The value changes as the user types; it bubbles from the native textarea.\n- **change** - The user commits a new value; it bubbles from the native textarea.\n\n### **Methods:**\n - **attributesOf(passed: _string[]_, own: _string[]_): _string[]_** - Every attribute a text field observes, for the subclass's `observedAttributes`.\n\n\n\n### **Slots:**\n - **hint** - Help content under the field in place of the `hint` text; it describes the textarea, and hiding it with `hidden` brings the `hint` text back.\n\n### **CSS Parts:**\n - **frame** - The box that draws the field around the native textarea.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label of the field.",
+          "values": []
+        },
+        {
+          "name": "optional",
+          "description": "A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "Help text under the field.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "The error shown while the field is invalid.",
+          "values": []
+        },
+        {
+          "name": "invalid",
+          "description": "Marks the field invalid and shows the error.",
+          "values": []
+        },
+        { "name": "value", "description": "The default value.", "values": [] },
+        {
+          "name": "appearance",
+          "description": "How the field is drawn; the configured setting by default.",
+          "values": [
+            { "name": "outline" },
+            { "name": "filled" },
+            { "name": "underline" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "How large the field is; `medium` by default. At `xsmall` the label sits above the field.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the field.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the field read-only.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the field required.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name sent with the form.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Text shown while the field is empty.",
+          "values": []
+        },
+        {
+          "name": "autocomplete",
+          "description": "The autofill hint of the native textarea.",
+          "values": []
+        },
+        {
+          "name": "minlength",
+          "description": "The shortest allowed value.",
+          "values": []
+        },
+        {
+          "name": "maxlength",
+          "description": "The longest allowed value.",
+          "values": []
+        },
+        {
+          "name": "rows",
+          "description": "The visible lines; 2 by default.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-thumbnail",
+      "description": "A thumbnail: a picture, an icon or initials in a small box, such as the photo of a cart line or a person's avatar.\nIt is decoration, hidden from screen readers, with its badge; with `aria-label` it is an image with that name, which then carries what the badge says, such as the quantity.\n`aria-hidden=\"true\"` and `role=\"img\"` count as the kit's; any other value is the host's and stays.\n---\n\n\n### **Slots:**\n - _default_ - An `<img>`, which covers the box, an svg icon, or initials.\n- **badge** - A `<swell-badge>` over the top end corner, such as the quantity of a cart line.",
+      "attributes": [
+        { "name": "aria-label", "values": [] },
+        {
+          "name": "variant",
+          "description": "Which palette of `color` the box takes its colors from: `secondary`, the quiet colors with a border, as for a product without a photo, or a variant of the host's own; without it, the accent, as for an avatar.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "How large the box is: the height of a control of the size; `medium` by default.",
+          "values": [
+            { "name": "xsmall" },
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" },
+            { "name": "xlarge" }
+          ]
+        },
+        {
+          "name": "shape",
+          "description": "Rounds the box fully, as for an avatar.",
+          "values": [{ "name": "circle" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "swell-ui",
+      "description": "An area of the page with token values of its own, such as an order summary in the colors of the brand.\nThe host registers the area's configuration with `configure(config, id)`; its tokens and theme apply to everything inside the element, the host's own markup included, and every value it leaves out comes from the page.\nThe element keeps the layout of its content: it renders nothing of its own.\n---\n",
+      "attributes": [
+        {
+          "name": "config",
+          "description": "The id of the area's configuration. An id without a configuration yet applies once the host registers one.",
+          "values": []
+        }
+      ],
+      "references": []
+    }
+  ]
+}