@swell/swell-ui 0.0.0-stage → 0.1.1

package/dist/frameworks/jsx.d.ts

@@ -0,0 +1,3589 @@
+import type { SwellBadge } from "../types/components/core/badge/badge.js";
+import type { SwellButton } from "../types/components/core/button/button.js";
+import type { SwellCard } from "../types/components/core/card/card.js";
+import type { SwellCheckbox } from "../types/components/core/checkbox/checkbox.js";
+import type { SwellChip } from "../types/components/core/chip/chip.js";
+import type { SwellDisclosure } from "../types/components/core/disclosure/disclosure.js";
+import type { SwellDivider } from "../types/components/core/divider/divider.js";
+import type { SwellLink } from "../types/components/core/link/link.js";
+import type { SwellInput } from "../types/components/core/input/input.js";
+import type { ownId, SwellLookupList } from "../types/components/core/lookup/lookup-list.js";
+import type { activate, SwellLookupOption } from "../types/components/core/lookup/lookup-option.js";
+import type { SwellLookup } from "../types/components/core/lookup/lookup.js";
+import type { SwellPopover } from "../types/components/core/popover/popover.js";
+import type { SwellQuantity } from "../types/components/core/quantity/quantity.js";
+import type { radioGroup, SwellRadioOption } from "../types/components/core/radio/radio-option.js";
+import type { SwellRadio } from "../types/components/core/radio/radio.js";
+import type { optionList, SwellOptionElement, SwellSelectOption } from "../types/components/core/select/select-option.js";
+import type { SwellSelect } from "../types/components/core/select/select.js";
+import type { SwellSkeleton } from "../types/components/core/skeleton/skeleton.js";
+import type { SwellStatus } from "../types/components/core/status/status.js";
+import type { tabGroup, CHECK, SwellTab } from "../types/components/core/tabs/tab.js";
+import type { SwellTabs } from "../types/components/core/tabs/tabs.js";
+import type { SwellText } from "../types/components/core/text/text.js";
+import type { SwellTextarea } from "../types/components/core/textarea/textarea.js";
+import type { SwellThumbnail } from "../types/components/core/thumbnail/thumbnail.js";
+import type { SwellUi } from "../types/components/core/ui/ui.js";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = "",
+> = {
+  [
+    Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`
+  ]: CustomElements[Key];
+};
+
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+
+type BaseProps<T extends HTMLElement> = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any | undefined;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string | undefined;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string | undefined;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined> | undefined;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl" | undefined;
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string | undefined;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string | undefined;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string | undefined;
+  /** A unique identifier for the element. */
+  id?: string | undefined;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number | undefined;
+  /** Specifies the language of the element. */
+  lang?: string | undefined;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string | undefined;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string | undefined;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: (T | ((e: T) => void)) | undefined;
+  /** Adds a reference for a custom element slot */
+  slot?: string | undefined;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number> | undefined;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number | undefined;
+  /** Specifies the tooltip text for the element. */
+  title?: string | undefined;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no" | undefined;
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual" | undefined;
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto" | undefined;
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle" | undefined;
+};
+
+type BaseEvents = {};
+
+export type SwellBadgeProps = {
+  /** 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. */
+  variant?: string | undefined;
+  /** How the badge is drawn; the configured setting by default. */
+  appearance?: "filled" | "outline" | undefined;
+  /** How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+};
+
+export type SwellBadgeSolidJsProps = {
+  /** 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. */
+  "attr:variant"?: string | undefined;
+  /** 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. */
+  "prop:undefined"?: string | undefined;
+  /** How the badge is drawn; the configured setting by default. */
+  "attr:appearance"?: "filled" | "outline" | undefined;
+  /** How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellButtonProps = {
+  /** Removes the button from the tab order and ignores clicks. */
+  disabled?: boolean | undefined;
+  /** Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order. */
+  loading?: boolean | undefined;
+  /** Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy. */
+  success?: boolean | undefined;
+  /** 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. */
+  variant?: string | undefined;
+  /** How the button is drawn; the variant's setting by default. */
+  appearance?: "filled" | "outline" | "plain" | undefined;
+  /** How large the button is; `medium` by default. `xsmall` fits an action inside a status message. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons. */
+  shape?: "pill" | undefined;
+  /** Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content. */
+  href?: string | undefined;
+  /** Where to open the link. */
+  target?: string | undefined;
+  /** How the link's target relates to the page. */
+  rel?: string | undefined;
+  /** What the button does in a form; `submit` by default. */
+  type?: "submit" | "reset" | "button" | undefined;
+};
+
+export type SwellButtonSolidJsProps = {
+  /** Removes the button from the tab order and ignores clicks. */
+  "bool:disabled"?: boolean | undefined;
+  /** Removes the button from the tab order and ignores clicks. */
+  "prop:undefined"?: boolean | undefined;
+  /** Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order. */
+  "bool:loading"?: boolean | undefined;
+  /** Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy. */
+  "bool:success"?: boolean | undefined;
+  /** 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. */
+  "attr:variant"?: string | undefined;
+  /** How the button is drawn; the variant's setting by default. */
+  "attr:appearance"?: "filled" | "outline" | "plain" | undefined;
+  /** How large the button is; `medium` by default. `xsmall` fits an action inside a status message. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons. */
+  "attr:shape"?: "pill" | undefined;
+  /** Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content. */
+  "attr:href"?: string | undefined;
+  /** Where to open the link. */
+  "attr:target"?: string | undefined;
+  /** How the link's target relates to the page. */
+  "attr:rel"?: string | undefined;
+  /** What the button does in a form; `submit` by default. */
+  "attr:type"?: "submit" | "reset" | "button" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellCardProps = {
+  /** How the card is drawn: with a border, or filled with the quiet background; the configured setting by default. */
+  appearance?: "outline" | "filled" | undefined;
+  /** How large the padding is: it follows the text of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+};
+
+export type SwellCardSolidJsProps = {
+  /** How the card is drawn: with a border, or filled with the quiet background; the configured setting by default. */
+  "attr:appearance"?: "outline" | "filled" | undefined;
+  /** How the card is drawn: with a border, or filled with the quiet background; the configured setting by default. */
+  "prop:undefined"?: "outline" | "filled" | undefined;
+  /** How large the padding is: it follows the text of the size; `medium` by default. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellCheckbox` component event */
+export type SwellCheckboxElementEvent<E = Event> = TypedEvent<SwellCheckbox, E>;
+
+export type SwellCheckboxProps = {
+  /** The label beside the box. */
+  label?: string | undefined;
+  /** Help text under the checkbox. */
+  hint?: string | undefined;
+  /** The error shown while the checkbox is invalid. */
+  error?: string | undefined;
+  /** Marks the checkbox invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The default state. */
+  checked?: boolean | undefined;
+  /** The value sent with the form; `on` by default. */
+  value?: string | undefined;
+  /** Disables the checkbox. */
+  disabled?: boolean | undefined;
+  /** Makes the checkbox required. */
+  required?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** 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. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** The user checks or unchecks the box; it bubbles from the native input. */
+  onchange?: ((e: SwellCheckboxElementEvent) => void) | undefined;
+};
+
+export type SwellCheckboxSolidJsProps = {
+  /** The label beside the box. */
+  "attr:label"?: string | undefined;
+  /** The label beside the box. */
+  "prop:undefined"?: string | undefined;
+  /** Help text under the checkbox. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the checkbox is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the checkbox invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The default state. */
+  "bool:checked"?: boolean | undefined;
+  /** The value sent with the form; `on` by default. */
+  "attr:value"?: string | undefined;
+  /** Disables the checkbox. */
+  "bool:disabled"?: boolean | undefined;
+  /** Makes the checkbox required. */
+  "bool:required"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** 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. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** The user checks or unchecks the box; it bubbles from the native input. */
+  "on:change"?: ((e: SwellCheckboxElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellChip` component event */
+export type SwellChipElementEvent<E = Event> = TypedEvent<SwellChip, E>;
+
+export type SwellChipProps = {
+  /** Disables the remove button. */
+  disabled?: boolean | undefined;
+  /** The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one. */
+  "remove-label"?: string | undefined;
+  /** How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none. */
+  onremove?: ((e: SwellChipElementEvent) => void) | undefined;
+};
+
+export type SwellChipSolidJsProps = {
+  /** Disables the remove button. */
+  "bool:disabled"?: boolean | undefined;
+  /** Disables the remove button. */
+  "prop:undefined"?: boolean | undefined;
+  /** The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one. */
+  "attr:remove-label"?: string | undefined;
+  /** How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none. */
+  "on:remove"?: ((e: SwellChipElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellDisclosure` component event */
+export type SwellDisclosureElementEvent<E = Event> = TypedEvent<
+  SwellDisclosure,
+  E
+>;
+/** `toggle` event type */
+export type SwellDisclosureToggleElementEvent =
+  SwellDisclosureElementEvent<ToggleEvent>;
+
+export type SwellDisclosureProps = {
+  /** Shows the content and hides the trigger. Set on connect, the content shows at once. */
+  open?: boolean | undefined;
+  /** Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`. */
+  toggle?: boolean | undefined;
+
+  /** 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. */
+  ontoggle?: ((e: SwellDisclosureToggleElementEvent) => void) | undefined;
+};
+
+export type SwellDisclosureSolidJsProps = {
+  /** Shows the content and hides the trigger. Set on connect, the content shows at once. */
+  "bool:open"?: boolean | undefined;
+  /** Shows the content and hides the trigger. Set on connect, the content shows at once. */
+  "prop:undefined"?: boolean | undefined;
+  /** Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`. */
+  "bool:toggle"?: boolean | undefined;
+  /** 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. */
+  "on:toggle"?: ((e: SwellDisclosureToggleElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellDividerProps = {};
+
+export type SwellDividerSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellLinkProps = {
+  /** 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. */
+  href?: string | undefined;
+  /** Where to open the link. */
+  target?: string | undefined;
+  /** How the target relates to the page. */
+  rel?: string | undefined;
+  /** 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. */
+  variant?: string | undefined;
+  /** 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. */
+  appearance?: "underline" | "plain" | undefined;
+  /** 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. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+};
+
+export type SwellLinkSolidJsProps = {
+  /** 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. */
+  "attr:href"?: string | undefined;
+  /** 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. */
+  "prop:undefined"?: string | undefined;
+  /** Where to open the link. */
+  "attr:target"?: string | undefined;
+  /** How the target relates to the page. */
+  "attr:rel"?: string | undefined;
+  /** 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. */
+  "attr:variant"?: string | undefined;
+  /** 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. */
+  "attr:appearance"?: "underline" | "plain" | undefined;
+  /** 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. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellInput` component event */
+export type SwellInputElementEvent<E = Event> = TypedEvent<SwellInput, E>;
+
+export type SwellInputProps = {
+  /** The label of the field. */
+  label?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string | undefined;
+  /** Help text under the field. */
+  hint?: string | undefined;
+  /** The error shown while the field is invalid. */
+  error?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The default value. */
+  value?: string | undefined;
+  /** The kind of value; `text` by default. */
+  type?:
+    | "text"
+    | "email"
+    | "tel"
+    | "password"
+    | "number"
+    | "search"
+    | "url"
+    | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  disabled?: boolean | undefined;
+  /** Makes the field read-only. */
+  readonly?: boolean | undefined;
+  /** Makes the field required. */
+  required?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** Text shown while the field is empty. */
+  placeholder?: string | undefined;
+  /** The autofill hint of the native input. */
+  autocomplete?: string | undefined;
+  /** The virtual keyboard to show. */
+  inputmode?: string | undefined;
+  /** The shortest allowed value. */
+  minlength?: number | undefined;
+  /** The longest allowed value. */
+  maxlength?: number | undefined;
+  /** The pattern the value matches. */
+  pattern?: string | undefined;
+  /** The smallest allowed value. */
+  min?: string | undefined;
+  /** The largest allowed value. */
+  max?: string | undefined;
+  /** The step between allowed values. */
+  step?: string | undefined;
+  /**  */
+  readOnly?: boolean | undefined;
+
+  /** The value changes as the user types; it bubbles from the native input. */
+  oninput?: ((e: SwellInputElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native input. */
+  onchange?: ((e: SwellInputElementEvent) => void) | undefined;
+};
+
+export type SwellInputSolidJsProps = {
+  /** The label of the field. */
+  "attr:label"?: string | undefined;
+  /** The label of the field. */
+  "prop:undefined"?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  "attr:optional"?: string | undefined;
+  /** Help text under the field. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the field is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The default value. */
+  "attr:value"?: string | undefined;
+  /** The kind of value; `text` by default. */
+  "attr:type"?:
+    | "text"
+    | "email"
+    | "tel"
+    | "password"
+    | "number"
+    | "search"
+    | "url"
+    | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  "attr:appearance"?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  "bool:disabled"?: boolean | undefined;
+  /** Makes the field read-only. */
+  "bool:readonly"?: boolean | undefined;
+  /** Makes the field required. */
+  "bool:required"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** Text shown while the field is empty. */
+  "attr:placeholder"?: string | undefined;
+  /** The autofill hint of the native input. */
+  "attr:autocomplete"?: string | undefined;
+  /** The virtual keyboard to show. */
+  "attr:inputmode"?: string | undefined;
+  /** The shortest allowed value. */
+  "attr:minlength"?: number | undefined;
+  /** The longest allowed value. */
+  "attr:maxlength"?: number | undefined;
+  /** The pattern the value matches. */
+  "attr:pattern"?: string | undefined;
+  /** The smallest allowed value. */
+  "attr:min"?: string | undefined;
+  /** The largest allowed value. */
+  "attr:max"?: string | undefined;
+  /** The step between allowed values. */
+  "attr:step"?: string | undefined;
+  /**  */
+  "prop:readOnly"?: boolean | undefined;
+  /** The value changes as the user types; it bubbles from the native input. */
+  "on:input"?: ((e: SwellInputElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native input. */
+  "on:change"?: ((e: SwellInputElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellLookupListProps = {};
+
+export type SwellLookupListSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellLookupOptionProps = {
+  /** The value of the suggestion, such as the id of a place; the label by default. */
+  value?: string | undefined;
+  /** A second line under the label. */
+  hint?: string | undefined;
+  /** Disables the suggestion. */
+  disabled?: boolean | undefined;
+  /**  */
+  hidden?: unknown | undefined;
+};
+
+export type SwellLookupOptionSolidJsProps = {
+  /** The value of the suggestion, such as the id of a place; the label by default. */
+  "attr:value"?: string | undefined;
+  /** The value of the suggestion, such as the id of a place; the label by default. */
+  "prop:undefined"?: string | undefined;
+  /** A second line under the label. */
+  "attr:hint"?: string | undefined;
+  /** Disables the suggestion. */
+  "bool:disabled"?: boolean | undefined;
+  /**  */
+  "attr:hidden"?: unknown | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellLookup` component event */
+export type SwellLookupElementEvent<E = Event> = TypedEvent<SwellLookup, E>;
+
+export type SwellLookupProps = {
+  /** The label of the field. */
+  label?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string | undefined;
+  /** Help text under the field. */
+  hint?: string | undefined;
+  /** The error shown while the field is invalid. */
+  error?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The default value. */
+  value?: string | undefined;
+  /** The kind of value; `text` by default. */
+  type?:
+    | "text"
+    | "email"
+    | "tel"
+    | "password"
+    | "number"
+    | "search"
+    | "url"
+    | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  disabled?: boolean | undefined;
+  /** Makes the field read-only. */
+  readonly?: boolean | undefined;
+  /** Makes the field required. */
+  required?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** Text shown while the field is empty. */
+  placeholder?: string | undefined;
+  /** The autofill hint of the native input. */
+  autocomplete?: string | undefined;
+  /** The virtual keyboard to show. */
+  inputmode?: string | undefined;
+  /** The shortest allowed value. */
+  minlength?: number | undefined;
+  /** The longest allowed value. */
+  maxlength?: number | undefined;
+  /** The pattern the value matches. */
+  pattern?: string | undefined;
+  /** The smallest allowed value. */
+  min?: string | undefined;
+  /** The largest allowed value. */
+  max?: string | undefined;
+  /** The step between allowed values. */
+  step?: string | undefined;
+  /**  */
+  readOnly?: boolean | undefined;
+
+  /** The value changes as the user types; it bubbles from the native input. */
+  oninput?: ((e: SwellLookupElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native input. */
+  onchange?: ((e: SwellLookupElementEvent) => void) | undefined;
+};
+
+export type SwellLookupSolidJsProps = {
+  /** The label of the field. */
+  "attr:label"?: string | undefined;
+  /** The label of the field. */
+  "prop:undefined"?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  "attr:optional"?: string | undefined;
+  /** Help text under the field. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the field is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The default value. */
+  "attr:value"?: string | undefined;
+  /** The kind of value; `text` by default. */
+  "attr:type"?:
+    | "text"
+    | "email"
+    | "tel"
+    | "password"
+    | "number"
+    | "search"
+    | "url"
+    | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  "attr:appearance"?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  "bool:disabled"?: boolean | undefined;
+  /** Makes the field read-only. */
+  "bool:readonly"?: boolean | undefined;
+  /** Makes the field required. */
+  "bool:required"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** Text shown while the field is empty. */
+  "attr:placeholder"?: string | undefined;
+  /** The autofill hint of the native input. */
+  "attr:autocomplete"?: string | undefined;
+  /** The virtual keyboard to show. */
+  "attr:inputmode"?: string | undefined;
+  /** The shortest allowed value. */
+  "attr:minlength"?: number | undefined;
+  /** The longest allowed value. */
+  "attr:maxlength"?: number | undefined;
+  /** The pattern the value matches. */
+  "attr:pattern"?: string | undefined;
+  /** The smallest allowed value. */
+  "attr:min"?: string | undefined;
+  /** The largest allowed value. */
+  "attr:max"?: string | undefined;
+  /** The step between allowed values. */
+  "attr:step"?: string | undefined;
+  /**  */
+  "prop:readOnly"?: boolean | undefined;
+  /** The value changes as the user types; it bubbles from the native input. */
+  "on:input"?: ((e: SwellLookupElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native input. */
+  "on:change"?: ((e: SwellLookupElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellPopover` component event */
+export type SwellPopoverElementEvent<E = Event> = TypedEvent<SwellPopover, E>;
+/** `toggle` event type */
+export type SwellPopoverToggleElementEvent =
+  SwellPopoverElementEvent<ToggleEvent>;
+
+export type SwellPopoverProps = {
+  /** 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. */
+  open?: boolean | undefined;
+  /**  */
+  "aria-label"?: unknown | undefined;
+
+  /** 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. */
+  ontoggle?: ((e: SwellPopoverToggleElementEvent) => void) | undefined;
+};
+
+export type SwellPopoverSolidJsProps = {
+  /** 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. */
+  "bool:open"?: boolean | undefined;
+  /** 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. */
+  "prop:undefined"?: boolean | undefined;
+  /**  */
+  "attr:aria-label"?: unknown | undefined;
+  /** 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. */
+  "on:toggle"?: ((e: SwellPopoverToggleElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellQuantity` component event */
+export type SwellQuantityElementEvent<E = Event> = TypedEvent<SwellQuantity, E>;
+
+export type SwellQuantityProps = {
+  /** 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. */
+  value?: number | undefined;
+  /** The least count, a whole number; 1 by default. */
+  min?: number | undefined;
+  /** The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`. */
+  max?: number | undefined;
+  /** How much each step changes the count, a whole number above 0; 1 by default. */
+  step?: number | undefined;
+  /** Removes the quantity from the tab order and ignores steps. */
+  disabled?: boolean | undefined;
+  /** 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. */
+  busy?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** How large the quantity is: it shares a height with buttons and fields of its size; `medium` by default. A cart line takes `xsmall`. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** The user changed the count. */
+  oninput?: ((e: SwellQuantityElementEvent) => void) | undefined;
+  /** The user changed the count, after `input`. */
+  onchange?: ((e: SwellQuantityElementEvent) => void) | undefined;
+};
+
+export type SwellQuantitySolidJsProps = {
+  /** 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. */
+  "attr:value"?: number | undefined;
+  /** 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. */
+  "prop:undefined"?: number | undefined;
+  /** The least count, a whole number; 1 by default. */
+  "attr:min"?: number | undefined;
+  /** The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`. */
+  "attr:max"?: number | undefined;
+  /** How much each step changes the count, a whole number above 0; 1 by default. */
+  "attr:step"?: number | undefined;
+  /** Removes the quantity from the tab order and ignores steps. */
+  "bool:disabled"?: boolean | undefined;
+  /** 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. */
+  "bool:busy"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** How large the quantity is: it shares a height with buttons and fields of its size; `medium` by default. A cart line takes `xsmall`. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** The user changed the count. */
+  "on:input"?: ((e: SwellQuantityElementEvent) => void) | undefined;
+  /** The user changed the count, after `input`. */
+  "on:change"?: ((e: SwellQuantityElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellRadioOptionProps = {
+  /** The value the group takes when the option is chosen; `on` by default. */
+  value?: string | undefined;
+  /** Help text under the label. */
+  hint?: string | undefined;
+  /** Disables the option. */
+  disabled?: boolean | undefined;
+  /**  */
+  hidden?: unknown | undefined;
+};
+
+export type SwellRadioOptionSolidJsProps = {
+  /** The value the group takes when the option is chosen; `on` by default. */
+  "attr:value"?: string | undefined;
+  /** The value the group takes when the option is chosen; `on` by default. */
+  "prop:undefined"?: string | undefined;
+  /** Help text under the label. */
+  "attr:hint"?: string | undefined;
+  /** Disables the option. */
+  "bool:disabled"?: boolean | undefined;
+  /**  */
+  "attr:hidden"?: unknown | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellRadio` component event */
+export type SwellRadioElementEvent<E = Event> = TypedEvent<SwellRadio, E>;
+
+export type SwellRadioProps = {
+  /** The question. Without it, the group takes its name from its own `aria-label`. */
+  label?: string | undefined;
+  /** Help text under the options. */
+  hint?: string | undefined;
+  /** The error shown while the group is invalid. */
+  error?: string | undefined;
+  /** Marks the group invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** The value of the option chosen by default. */
+  value?: string | undefined;
+  /** The form can't be sent until an option is chosen. */
+  required?: boolean | undefined;
+  /** Disables every option. */
+  disabled?: boolean | undefined;
+  /**  */
+  "aria-label"?: unknown | undefined;
+  /** Where the circle sits in the row of each option; the `radio.indicator.position` setting gives the default. A segmented group draws no circle. */
+  "indicator-position"?: "start" | "end" | undefined;
+  /** 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. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** 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. */
+  appearance?: "plain" | "outline" | "segmented" | "button" | undefined;
+
+  /** The user chose another option. */
+  oninput?: ((e: SwellRadioElementEvent) => void) | undefined;
+  /** 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`. */
+  onchange?: ((e: SwellRadioElementEvent) => void) | undefined;
+};
+
+export type SwellRadioSolidJsProps = {
+  /** The question. Without it, the group takes its name from its own `aria-label`. */
+  "attr:label"?: string | undefined;
+  /** The question. Without it, the group takes its name from its own `aria-label`. */
+  "prop:undefined"?: string | undefined;
+  /** Help text under the options. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the group is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the group invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** The value of the option chosen by default. */
+  "attr:value"?: string | undefined;
+  /** The form can't be sent until an option is chosen. */
+  "bool:required"?: boolean | undefined;
+  /** Disables every option. */
+  "bool:disabled"?: boolean | undefined;
+  /**  */
+  "attr:aria-label"?: unknown | undefined;
+  /** Where the circle sits in the row of each option; the `radio.indicator.position` setting gives the default. A segmented group draws no circle. */
+  "attr:indicator-position"?: "start" | "end" | undefined;
+  /** 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. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** 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. */
+  "attr:appearance"?: "plain" | "outline" | "segmented" | "button" | undefined;
+  /** The user chose another option. */
+  "on:input"?: ((e: SwellRadioElementEvent) => void) | undefined;
+  /** 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`. */
+  "on:change"?: ((e: SwellRadioElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellSelectOptionProps = {
+  /** The value the select takes when the option is chosen; the option's label by default. */
+  value?: string | undefined;
+  /** A second line under the label. */
+  hint?: string | undefined;
+  /** Disables the option. */
+  disabled?: boolean | undefined;
+  /**  */
+  hidden?: unknown | undefined;
+};
+
+export type SwellSelectOptionSolidJsProps = {
+  /** The value the select takes when the option is chosen; the option's label by default. */
+  "attr:value"?: string | undefined;
+  /** The value the select takes when the option is chosen; the option's label by default. */
+  "prop:undefined"?: string | undefined;
+  /** A second line under the label. */
+  "attr:hint"?: string | undefined;
+  /** Disables the option. */
+  "bool:disabled"?: boolean | undefined;
+  /**  */
+  "attr:hidden"?: unknown | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellSelect` component event */
+export type SwellSelectElementEvent<E = Event> = TypedEvent<SwellSelect, E>;
+
+export type SwellSelectProps = {
+  /** The label of the field. Without it, the select takes its name from its own `aria-label`. */
+  label?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the select's name. */
+  optional?: string | undefined;
+  /** Help text under the field. */
+  hint?: string | undefined;
+  /** The error shown while the select is invalid. */
+  error?: string | undefined;
+  /** Marks the select invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** The value of the option chosen by default. */
+  value?: string | undefined;
+  /** Text shown while nothing is chosen. */
+  placeholder?: string | undefined;
+  /** The form can't be sent until an option is chosen. */
+  required?: boolean | undefined;
+  /** Disables the select. */
+  disabled?: boolean | undefined;
+  /** 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`. */
+  autocomplete?: string | undefined;
+  /**  */
+  "aria-label"?: unknown | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** The user chose another option. */
+  oninput?: ((e: SwellSelectElementEvent) => void) | undefined;
+  /** The user chose another option, after `input`. */
+  onchange?: ((e: SwellSelectElementEvent) => void) | undefined;
+};
+
+export type SwellSelectSolidJsProps = {
+  /** The label of the field. Without it, the select takes its name from its own `aria-label`. */
+  "attr:label"?: string | undefined;
+  /** The label of the field. Without it, the select takes its name from its own `aria-label`. */
+  "prop:undefined"?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the select's name. */
+  "attr:optional"?: string | undefined;
+  /** Help text under the field. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the select is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the select invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** The value of the option chosen by default. */
+  "attr:value"?: string | undefined;
+  /** Text shown while nothing is chosen. */
+  "attr:placeholder"?: string | undefined;
+  /** The form can't be sent until an option is chosen. */
+  "bool:required"?: boolean | undefined;
+  /** Disables the select. */
+  "bool:disabled"?: boolean | undefined;
+  /** 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`. */
+  "attr:autocomplete"?: string | undefined;
+  /**  */
+  "attr:aria-label"?: unknown | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  "attr:appearance"?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** The user chose another option. */
+  "on:input"?: ((e: SwellSelectElementEvent) => void) | undefined;
+  /** The user chose another option, after `input`. */
+  "on:change"?: ((e: SwellSelectElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellSkeletonProps = {
+  /** 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. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** `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. */
+  appearance?: "card" | undefined;
+};
+
+export type SwellSkeletonSolidJsProps = {
+  /** 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. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** 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. */
+  "prop:undefined"?:
+    "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** `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. */
+  "attr:appearance"?: "card" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellStatusProps = {
+  /** What the message means: its color, icon and how it is announced. */
+  type?: "danger" | "success" | "warning" | undefined;
+  /** How large the message is: its text, padding and icon follow the text of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only. */
+  appearance?: "filled" | "outline" | "plain" | "quiet" | undefined;
+};
+
+export type SwellStatusSolidJsProps = {
+  /** What the message means: its color, icon and how it is announced. */
+  "attr:type"?: "danger" | "success" | "warning" | undefined;
+  /** What the message means: its color, icon and how it is announced. */
+  "prop:undefined"?: "danger" | "success" | "warning" | undefined;
+  /** How large the message is: its text, padding and icon follow the text of the size; `medium` by default. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only. */
+  "attr:appearance"?: "filled" | "outline" | "plain" | "quiet" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellTabProps = {
+  /** The group's value while the tab is chosen; the label by default. */
+  value?: string | undefined;
+  /** The text of the tab or of the step's heading. */
+  label?: string | undefined;
+  /** Marks a step as done: its number becomes a check, and the line to the next step fills. */
+  done?: boolean | undefined;
+  /** The tab can't be chosen, such as a step that isn't open yet. */
+  disabled?: boolean | undefined;
+  /**  */
+  hidden?: unknown | undefined;
+};
+
+export type SwellTabSolidJsProps = {
+  /** The group's value while the tab is chosen; the label by default. */
+  "attr:value"?: string | undefined;
+  /** The group's value while the tab is chosen; the label by default. */
+  "prop:undefined"?: string | undefined;
+  /** The text of the tab or of the step's heading. */
+  "attr:label"?: string | undefined;
+  /** Marks a step as done: its number becomes a check, and the line to the next step fills. */
+  "bool:done"?: boolean | undefined;
+  /** The tab can't be chosen, such as a step that isn't open yet. */
+  "bool:disabled"?: boolean | undefined;
+  /**  */
+  "attr:hidden"?: unknown | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellTabs` component event */
+export type SwellTabsElementEvent<E = Event> = TypedEvent<SwellTabs, E>;
+/** `request` event type */
+export type SwellTabsRequestElementEvent = SwellTabsElementEvent<
+  CustomEvent<{ value: string }>
+>;
+
+export type SwellTabsProps = {
+  /** The value of the chosen tab; the first tab that isn't disabled by default. */
+  value?: string | undefined;
+  /**  */
+  "aria-label"?: unknown | undefined;
+  /** 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. */
+  orientation?: "horizontal" | "vertical" | undefined;
+  /** The heading level of vertical steps, 1 to 6; 2 by default. */
+  level?: number | undefined;
+  /** 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. */
+  "done-label"?: string | undefined;
+  /** 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. */
+  appearance?: "underline" | "segmented" | "steps" | undefined;
+  /** How large the tabs are: they take the height and the text of a control of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+
+  /** 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. */
+  onchange?: ((e: SwellTabsElementEvent) => void) | undefined;
+  /** 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. */
+  onrequest?: ((e: SwellTabsRequestElementEvent) => void) | undefined;
+};
+
+export type SwellTabsSolidJsProps = {
+  /** The value of the chosen tab; the first tab that isn't disabled by default. */
+  "attr:value"?: string | undefined;
+  /** The value of the chosen tab; the first tab that isn't disabled by default. */
+  "prop:undefined"?: string | undefined;
+  /**  */
+  "attr:aria-label"?: unknown | undefined;
+  /** 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. */
+  "attr:orientation"?: "horizontal" | "vertical" | undefined;
+  /** The heading level of vertical steps, 1 to 6; 2 by default. */
+  "attr:level"?: number | undefined;
+  /** 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. */
+  "attr:done-label"?: string | undefined;
+  /** 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. */
+  "attr:appearance"?: "underline" | "segmented" | "steps" | undefined;
+  /** How large the tabs are: they take the height and the text of a control of the size; `medium` by default. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** 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. */
+  "on:change"?: ((e: SwellTabsElementEvent) => void) | undefined;
+  /** 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. */
+  "on:request"?: ((e: SwellTabsRequestElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellTextProps = {
+  /** 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. */
+  level?: number | undefined;
+  /** 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. */
+  variant?: string | undefined;
+  /** What the text is; body text by default. An eyebrow is uppercase. */
+  type?:
+    | "title"
+    | "heading"
+    | "subheading"
+    | "strong"
+    | "body"
+    | "caption"
+    | "footnote"
+    | "eyebrow"
+    | undefined;
+};
+
+export type SwellTextSolidJsProps = {
+  /** 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. */
+  "attr:level"?: number | undefined;
+  /** 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. */
+  "prop:undefined"?: number | undefined;
+  /** 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. */
+  "attr:variant"?: string | undefined;
+  /** What the text is; body text by default. An eyebrow is uppercase. */
+  "attr:type"?:
+    | "title"
+    | "heading"
+    | "subheading"
+    | "strong"
+    | "body"
+    | "caption"
+    | "footnote"
+    | "eyebrow"
+    | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+/** `SwellTextarea` component event */
+export type SwellTextareaElementEvent<E = Event> = TypedEvent<SwellTextarea, E>;
+
+export type SwellTextareaProps = {
+  /** The label of the field. */
+  label?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string | undefined;
+  /** Help text under the field. */
+  hint?: string | undefined;
+  /** The error shown while the field is invalid. */
+  error?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean | undefined;
+  /** The default value. */
+  value?: string | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  disabled?: boolean | undefined;
+  /** Makes the field read-only. */
+  readonly?: boolean | undefined;
+  /** Makes the field required. */
+  required?: boolean | undefined;
+  /** The name sent with the form. */
+  name?: string | undefined;
+  /** Text shown while the field is empty. */
+  placeholder?: string | undefined;
+  /** The autofill hint of the native textarea. */
+  autocomplete?: string | undefined;
+  /** The shortest allowed value. */
+  minlength?: number | undefined;
+  /** The longest allowed value. */
+  maxlength?: number | undefined;
+  /** The visible lines; 2 by default. */
+  rows?: number | undefined;
+  /**  */
+  readOnly?: boolean | undefined;
+
+  /** The value changes as the user types; it bubbles from the native textarea. */
+  oninput?: ((e: SwellTextareaElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native textarea. */
+  onchange?: ((e: SwellTextareaElementEvent) => void) | undefined;
+};
+
+export type SwellTextareaSolidJsProps = {
+  /** The label of the field. */
+  "attr:label"?: string | undefined;
+  /** The label of the field. */
+  "prop:undefined"?: string | undefined;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  "attr:optional"?: string | undefined;
+  /** Help text under the field. */
+  "attr:hint"?: string | undefined;
+  /** The error shown while the field is invalid. */
+  "attr:error"?: string | undefined;
+  /** Marks the field invalid and shows the error. */
+  "bool:invalid"?: boolean | undefined;
+  /** The default value. */
+  "attr:value"?: string | undefined;
+  /** How the field is drawn; the configured setting by default. */
+  "attr:appearance"?: "outline" | "filled" | "underline" | undefined;
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Disables the field. */
+  "bool:disabled"?: boolean | undefined;
+  /** Makes the field read-only. */
+  "bool:readonly"?: boolean | undefined;
+  /** Makes the field required. */
+  "bool:required"?: boolean | undefined;
+  /** The name sent with the form. */
+  "attr:name"?: string | undefined;
+  /** Text shown while the field is empty. */
+  "attr:placeholder"?: string | undefined;
+  /** The autofill hint of the native textarea. */
+  "attr:autocomplete"?: string | undefined;
+  /** The shortest allowed value. */
+  "attr:minlength"?: number | undefined;
+  /** The longest allowed value. */
+  "attr:maxlength"?: number | undefined;
+  /** The visible lines; 2 by default. */
+  "attr:rows"?: number | undefined;
+  /**  */
+  "prop:readOnly"?: boolean | undefined;
+  /** The value changes as the user types; it bubbles from the native textarea. */
+  "on:input"?: ((e: SwellTextareaElementEvent) => void) | undefined;
+  /** The user commits a new value; it bubbles from the native textarea. */
+  "on:change"?: ((e: SwellTextareaElementEvent) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellThumbnailProps = {
+  /**  */
+  "aria-label"?: unknown | undefined;
+  /** 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. */
+  variant?: string | undefined;
+  /** How large the box is: the height of a control of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Rounds the box fully, as for an avatar. */
+  shape?: "circle" | undefined;
+};
+
+export type SwellThumbnailSolidJsProps = {
+  /**  */
+  "attr:aria-label"?: unknown | undefined;
+  /**  */
+  "prop:undefined"?: unknown | undefined;
+  /** 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. */
+  "attr:variant"?: string | undefined;
+  /** How large the box is: the height of a control of the size; `medium` by default. */
+  "attr:size"?: "xsmall" | "small" | "medium" | "large" | "xlarge" | undefined;
+  /** Rounds the box fully, as for an avatar. */
+  "attr:shape"?: "circle" | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type SwellUiProps = {
+  /** The id of the area's configuration. An id without a configuration yet applies once the host registers one. */
+  config?: string | undefined;
+};
+
+export type SwellUiSolidJsProps = {
+  /** The id of the area's configuration. An id without a configuration yet applies once the host registers one. */
+  "attr:config"?: string | undefined;
+  /** The id of the area's configuration. An id without a configuration yet applies once the host registers one. */
+  "prop:undefined"?: string | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string | undefined;
+  /** Set the textContent of the element */
+  textContent?: string | number | undefined;
+};
+
+export type CustomElements = {
+  /**
+   * A badge: a short label or a count, such as a subscription's interval, a discount or a quantity.
+   * It 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: How the badge is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label.
+   * - `start`: An icon before the label, drawn 1px larger than the text.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The badge is filled.
+   * - `outline`: The badge has an outline.
+   */
+  "swell-badge": Partial<SwellBadgeProps & BaseProps<SwellBadge> & BaseEvents>;
+
+  /**
+   * A button. It submits or resets the form it belongs to, like a native button.
+   * With `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`.
+   * `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.
+   *
+   * While `loading`, the button shows a spinner in place of its `start` content, hides its `end` content and ignores clicks; it keeps its focus.
+   * With `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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`/`undefined`: Removes the button from the tab order and ignores clicks.
+   * - `loading`/`undefined`: Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order.
+   * - `success`/`undefined`: Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy.
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: How the button is drawn; the variant's setting by default.
+   * - `size`/`undefined`: How large the button is; `medium` by default. `xsmall` fits an action inside a status message.
+   * - `shape`/`undefined`: Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons.
+   * - `href`/`undefined`: Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content.
+   * - `target`/`undefined`: Where to open the link.
+   * - `rel`/`undefined`: How the link's target relates to the page.
+   * - `type`/`undefined`: What the button does in a form; `submit` by default.
+   * - `disabled`: undefined (property only)
+   * - `loading`: undefined (property only)
+   * - `success`: undefined (property only)
+   * - `type`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the button.
+   * - `start`: An icon before the label, drawn 4px larger than the text.
+   * - `end`: An icon after the label, drawn 4px larger than the text; it moves toward the end on hover.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `shake() => void`: Shakes the button, as after a failed attempt to submit; each call starts the shake again.
+   * - `formDisabledCallback(disabled: boolean) => void`: undefined
+   * - `focus(options?: FocusOptions) => void`: Focuses the anchor with `href`, and the button itself without it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The button is filled.
+   * - `outline`: The button has an outline.
+   * - `plain`: The button has neither a fill nor a border at rest; under the pointer it takes the quiet fill.
+   */
+  "swell-button": Partial<
+    SwellButtonProps & BaseProps<SwellButton> & BaseEvents
+  >;
+
+  /**
+   * A card: a box that groups content, such as the details of an order or a note under a choice.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `appearance`/`undefined`: How the card is drawn: with a border, or filled with the quiet background; the configured setting by default.
+   * - `size`/`undefined`: How large the padding is: it follows the text of the size; `medium` by default.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The card has a border.
+   * - `filled`: The card is filled.
+   */
+  "swell-card": Partial<SwellCardProps & BaseProps<SwellCard> & BaseEvents>;
+
+  /**
+   * A checkbox: a native checkbox with its label, hint and error, rendered into light DOM.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label beside the box.
+   * - `hint`/`undefined`: Help text under the checkbox.
+   * - `error`/`undefined`: The error shown while the checkbox is invalid.
+   * - `invalid`/`undefined`: Marks the checkbox invalid and shows the error.
+   * - `checked`/`undefined`: The default state.
+   * - `value`/`undefined`: The value sent with the form; `on` by default.
+   * - `disabled`/`undefined`: Disables the checkbox.
+   * - `required`/`undefined`: Makes the checkbox required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `size`/`undefined`: 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.
+   * - `checked`: Whether the box is checked now. (property only)
+   * - `value`: The value sent with the form. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: The user checks or unchecks the box; it bubbles from the native input.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: undefined
+   */
+  "swell-checkbox": Partial<
+    SwellCheckboxProps & BaseProps<SwellCheckbox> & BaseEvents
+  >;
+
+  /**
+   * A chip: a short value the shopper can remove, such as an applied discount code or gift card.
+   * Its remove button fires `remove`; the host removes the chip and moves the focus, for example to the code field.
+   * A 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`/`undefined`: Disables the remove button.
+   * - `remove-label`/`undefined`: The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one.
+   * - `size`/`undefined`: How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px.
+   * - `disabled`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `remove`: The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The value.
+   * - `start`: An icon before the value, drawn 2px larger than the text.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formDisabledCallback() => void`: undefined
+   * - `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.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `remove`: The remove button.
+   */
+  "swell-chip": Partial<SwellChipProps & BaseProps<SwellChip> & BaseEvents>;
+
+  /**
+   * A disclosure: content that stays hidden until the shopper presses its trigger, such as "Add apartment, suite, etc." and the field it reveals.
+   * The trigger opens it and leaves; the focus moves to the first control of the content.
+   * With `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.
+   * The 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.
+   * Closed 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `open`/`undefined`: Shows the content and hides the trigger. Set on connect, the content shows at once.
+   * - `toggle`/`undefined`: Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`.
+   * - `open`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `(default)`: The content.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `content`: The box that expands to show the content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `closing`: The content collapses; the trigger is back, out of the flow and invisible until it ends.
+   */
+  "swell-disclosure": Partial<
+    SwellDisclosureProps & BaseProps<SwellDisclosure> & BaseEvents
+  >;
+
+  /**
+   * A divider: a line across its width, or two lines with a label between them, such as "or pay another way".
+   * Without a label it is a separator for screen readers; with one, they read the label and skip the lines.
+   * The host sets the space around it.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(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.
+   */
+  "swell-divider": Partial<
+    SwellDividerProps & BaseProps<SwellDivider> & BaseEvents
+  >;
+
+  /**
+   * A link. With `href`, its anchor lives in the shadow root and takes the focus for the element.
+   *
+   * Without `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.
+   * Its own `aria-label`, `aria-expanded` and `aria-controls` name and describe that button, so it can open a popover or a disclosure.
+   * `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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `href`/`undefined`: 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.
+   * - `target`/`undefined`: Where to open the link.
+   * - `rel`/`undefined`: How the target relates to the page.
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `size`/`undefined`: 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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The text of the link.
+   * - `start`: An icon before the text, 2px larger than it.
+   * - `end`: An icon after the text, 2px larger than it.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: Focuses the anchor with `href`, and the element itself without it.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `link`: The anchor, or the content of the button without `href`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The link is plain.
+   * - `start-content`: The link has content in its `start` slot.
+   * - `end-content`: The link has content in its `end` slot.
+   */
+  "swell-link": Partial<SwellLinkProps & BaseProps<SwellLink> & BaseEvents>;
+
+  /**
+   * A text field: a native input with its label, hint and error, rendered into light DOM.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `type`/`undefined`: The kind of value; `text` by default.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native input.
+   * - `inputmode`/`undefined`: The virtual keyboard to show.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `pattern`/`undefined`: The pattern the value matches.
+   * - `min`/`undefined`: The smallest allowed value.
+   * - `max`/`undefined`: The largest allowed value.
+   * - `step`/`undefined`: The step between allowed values.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native input.
+   * - `change`: The user commits a new value; it bubbles from the native input.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `start`: Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `frame`: The box that draws the field around the native input, its start and its end.
+   * - `start`: The box of the start content.
+   * - `end`: The box of the end content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-input": Partial<SwellInputProps & BaseProps<SwellInput> & BaseEvents>;
+
+  /**
+   * 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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The suggestions, `<swell-lookup-option>` elements.
+   */
+  "swell-lookup-list": Partial<
+    SwellLookupListProps & BaseProps<SwellLookupList> & BaseEvents
+  >;
+
+  /**
+   * One suggestion of a lookup. It lives only as a child of `<swell-lookup-list>`.
+   * Choosing 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value of the suggestion, such as the id of a place; the label by default.
+   * - `hint`/`undefined`: A second line under the label.
+   * - `disabled`/`undefined`: Disables the suggestion.
+   * - `hidden`/`undefined`: undefined
+   * - `selected`: Whether the option is chosen; the select sets it. (property only) (readonly)
+   * - `label`: The text of the option's label: its text and its elements outside a named slot, without the comments a framework leaves. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the suggestion; the field writes its text into the input when it is chosen.
+   * - `start`: Content before the label, such as an icon.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `focused`: The field's keyboard points at the suggestion.
+   * - `disabled`: The suggestion is disabled.
+   * - `first`: The option is the first one on show; it draws no divider above it.
+   */
+  "swell-lookup-option": Partial<
+    SwellLookupOptionProps & BaseProps<SwellLookupOption> & BaseEvents
+  >;
+
+  /**
+   * A text field with suggestions: a combobox in ARIA terms. The host loads the suggestions, such as addresses,
+   * and puts them into a `<swell-lookup-list>` child as `<swell-lookup-option>` elements; the field shows them under itself.
+   * It is a `<swell-input>` in everything else: its native input stays in light DOM, so autofill works as in any field.
+   *
+   * The 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.
+   * Choosing a suggestion clicks it. After the click, unless a handler prevented its default, the field writes the suggestion's label
+   * into the input and fires `input`, with `inputType` `insertReplacementText`, and `change`; the list stays closed until the user types again.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `type`/`undefined`: The kind of value; `text` by default.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native input.
+   * - `inputmode`/`undefined`: The virtual keyboard to show.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `pattern`/`undefined`: The pattern the value matches.
+   * - `min`/`undefined`: The smallest allowed value.
+   * - `max`/`undefined`: The largest allowed value.
+   * - `step`/`undefined`: The step between allowed values.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native input.
+   * - `change`: The user commits a new value; it bubbles from the native input.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(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.
+   * - `hint`: Help content under the field in place of the `hint` text, as on an input.
+   * - `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.
+   * - `start`: Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `list`: The popup that holds the list and the action.
+   * - `frame`: The box that draws the field around the native input, its start and its end.
+   * - `start`: The box of the start content.
+   * - `end`: The box of the end content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-lookup": Partial<
+    SwellLookupProps & BaseProps<SwellLookup> & BaseEvents
+  >;
+
+  /**
+   * A popover: a small dialog that floats at the host's trigger, such as the language and currency picker of a checkout.
+   * The 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;
+   * a press outside it and the focus leaving it close it too. A choice inside keeps it open.
+   * The 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.
+   * Its content sets its width, at least the trigger's and at most the window's less 16px.
+   * Name it with `aria-label`, such as `Language and currency`.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `open`/`undefined`: 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.
+   * - `aria-label`/`undefined`: undefined
+   * - `open`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `(default)`: The content of the panel.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `panel`: The floating panel.
+   */
+  "swell-popover": Partial<
+    SwellPopoverProps & BaseProps<SwellPopover> & BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It 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`.
+   * Name it with `aria-label`, such as `Quantity, House Blend`, or with `aria-labelledby`. It holds the count and takes part in its form.
+   * While 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: 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.
+   * - `min`/`undefined`: The least count, a whole number; 1 by default.
+   * - `max`/`undefined`: The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`.
+   * - `step`/`undefined`: How much each step changes the count, a whole number above 0; 1 by default.
+   * - `disabled`/`undefined`: Removes the quantity from the tab order and ignores steps.
+   * - `busy`/`undefined`: 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.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `size`/`undefined`: How large the quantity is: it shares a height with buttons and fields of its size; `medium` by default. A cart line takes `xsmall`.
+   * - `value`: The count now. (property only)
+   * - `name`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `busy`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user changed the count.
+   * - `change`: The user changed the count, after `input`.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback(disabled: boolean) => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   */
+  "swell-quantity": Partial<
+    SwellQuantityProps & BaseProps<SwellQuantity> & BaseEvents
+  >;
+
+  /**
+   * One option of a radio group. It lives only as a direct child of `<swell-radio>`, which holds the choice.
+   * In a segmented group and as a button an option shows its `start` and its label; its hint, `end` and `details` are not drawn.
+   * An option with the `hidden` attribute is left out of its group.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value the group takes when the option is chosen; `on` by default.
+   * - `hint`/`undefined`: Help text under the label.
+   * - `disabled`/`undefined`: Disables the option.
+   * - `hidden`/`undefined`: undefined
+   * - `checked`: Whether the option is chosen; the group sets it. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the option.
+   * - `start`: Content before the label, such as an icon or a logo; decoration, left out of the option's name.
+   * - `end`: Content at the end of the row, such as a price or logos.
+   * - `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.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The group draws its options plain: the circle and the label.
+   * - `outline`: The group draws each option in a frame.
+   * - `segmented`: The group draws its options as segments of one track.
+   * - `button`: The group draws each option as a button.
+   * - `start`: The circle sits at the start of the row.
+   * - `end`: The circle sits at the end of the row.
+   * - `checked`: The option is chosen.
+   * - `disabled`: The option or its group is disabled.
+   * - `invalid`: The group is invalid.
+   * - `start-content`: The option has content in its `start` slot.
+   * - `details`: The option has content in its `details` slot.
+   * - `focused`: The option's radio has the keyboard focus.
+   */
+  "swell-radio-option": Partial<
+    SwellRadioOptionProps & BaseProps<SwellRadioOption> & BaseEvents
+  >;
+
+  /**
+   * A radio group: a question with one answer, chosen from its `<swell-radio-option>` children.
+   * It holds the choice and takes part in its form.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The question. Without it, the group takes its name from its own `aria-label`.
+   * - `hint`/`undefined`: Help text under the options.
+   * - `error`/`undefined`: The error shown while the group is invalid.
+   * - `invalid`/`undefined`: Marks the group invalid and shows the error.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `value`/`undefined`: The value of the option chosen by default.
+   * - `required`/`undefined`: The form can't be sent until an option is chosen.
+   * - `disabled`/`undefined`: Disables every option.
+   * - `aria-label`/`undefined`: undefined
+   * - `indicator-position`/`undefined`: Where the circle sits in the row of each option; the `radio.indicator.position` setting gives the default. A segmented group draws no circle.
+   * - `size`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `value`: The value of the chosen option. (property only)
+   * - `name`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   * - `validity`: undefined (property only) (readonly)
+   * - `validationMessage`: undefined (property only) (readonly)
+   * - `willValidate`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user chose another option.
+   * - `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`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The options, `<swell-radio-option>` elements.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => boolean`: undefined
+   * - `reportValidity() => boolean`: undefined
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback() => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   * - `focus(options?: FocusOptions) => void`: Focuses the group's Tab stop, as a Tab into the group does.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The options are drawn plain.
+   * - `outline`: Each option is drawn in a frame.
+   * - `segmented`: The options share a track.
+   * - `button`: Each option is drawn as a button.
+   */
+  "swell-radio": Partial<SwellRadioProps & BaseProps<SwellRadio> & BaseEvents>;
+
+  /**
+   * One option of a select. It lives only as a direct child of `<swell-select>`, which holds the choice.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value the select takes when the option is chosen; the option's label by default.
+   * - `hint`/`undefined`: A second line under the label.
+   * - `disabled`/`undefined`: Disables the option.
+   * - `hidden`/`undefined`: undefined
+   * - `selected`: Whether the option is chosen; the select sets it. (property only) (readonly)
+   * - `label`: The text of the option's label: its text and its elements outside a named slot, without the comments a framework leaves. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the option.
+   * - `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.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: The option is chosen.
+   * - `disabled`: The option is disabled.
+   * - `first`: The option is the first one on show; it draws no divider above it.
+   */
+  "swell-select-option": Partial<
+    SwellSelectOptionProps & BaseProps<SwellSelectOption> & BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It holds the choice and takes part in its form.
+   * Typing 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field. Without it, the select takes its name from its own `aria-label`.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the select's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the select is invalid.
+   * - `invalid`/`undefined`: Marks the select invalid and shows the error.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `value`/`undefined`: The value of the option chosen by default.
+   * - `placeholder`/`undefined`: Text shown while nothing is chosen.
+   * - `required`/`undefined`: The form can't be sent until an option is chosen.
+   * - `disabled`/`undefined`: Disables the select.
+   * - `autocomplete`/`undefined`: 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`.
+   * - `aria-label`/`undefined`: undefined
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `value`: The value of the chosen option. (property only)
+   * - `name`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   * - `validity`: undefined (property only) (readonly)
+   * - `validationMessage`: undefined (property only) (readonly)
+   * - `willValidate`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user chose another option.
+   * - `change`: The user chose another option, after `input`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The options, `<swell-select-option>` elements; a hidden one stays out of the list and the choice.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => boolean`: undefined
+   * - `reportValidity() => boolean`: undefined
+   * - `focus(options?: FocusOptions) => void`: undefined
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback() => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   * - `empty`: Nothing is chosen.
+   * - `open`: The list is open.
+   */
+  "swell-select": Partial<
+    SwellSelectProps & BaseProps<SwellSelect> & BaseEvents
+  >;
+
+  /**
+   * A skeleton: a shimmering bar that stands in for content while it loads, such as a delivery option's name and price.
+   * The host sets its width through `style` and marks the region it fills with `aria-busy="true"`; the skeleton itself is hidden from screen readers.
+   * Screen 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>`.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `size`/`undefined`: 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.
+   * - `appearance`/`undefined`: `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The bars of a card.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `card`: The skeleton is the frame of an option card.
+   */
+  "swell-skeleton": Partial<
+    SwellSkeletonProps & BaseProps<SwellSkeleton> & BaseEvents
+  >;
+
+  /**
+   * A status message: an error, a success or a warning.
+   * Screen readers announce it when it is added after the page has loaded and when its text or type changes:
+   * each message goes into a fresh visually hidden region, an alert for danger and a status otherwise.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `type`/`undefined`: What the message means: its color, icon and how it is announced.
+   * - `size`/`undefined`: How large the message is: its text, padding and icon follow the text of the size; `medium` by default.
+   * - `appearance`/`undefined`: How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The message.
+   * - `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.
+   * - `end`: An action after the message, such as a `<swell-button size="xsmall">`; it is left out of the announcement.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `message`: The message box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The message has its background, border and icon.
+   * - `outline`: The message has its border and icon.
+   * - `plain`: The message has its icon only and the font of a field error.
+   * - `quiet`: The message is a note in the quiet palette, without a border or the type's icon.
+   * - `end-content`: The message has content in its `end` slot: its items are centered.
+   * - `typed`: The message has a known type and isn't quiet: it takes the colors of its type.
+   */
+  "swell-status": Partial<
+    SwellStatusProps & BaseProps<SwellStatus> & BaseEvents
+  >;
+
+  /**
+   * A tab of a `<swell-tabs>` group: its label and its content, shown while it is chosen.
+   * In 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.
+   * A 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The group's value while the tab is chosen; the label by default.
+   * - `label`/`undefined`: The text of the tab or of the step's heading.
+   * - `done`/`undefined`: Marks a step as done: its number becomes a check, and the line to the next step fills.
+   * - `disabled`/`undefined`: The tab can't be chosen, such as a step that isn't open yet.
+   * - `hidden`/`undefined`: undefined
+   * - `value`: undefined (property only)
+   * - `label`: undefined (property only)
+   * - `done`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content, shown while the tab is chosen.
+   * - `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.
+   * - `end`: Vertical steps: content beside the heading, such as a link that opens a done step or a note.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: The tab is chosen.
+   * - `vertical`: The tab is a step of vertical steps.
+   * - `last`: The tab is the last of its group, so a vertical step draws no line to a next one.
+   */
+  "swell-tab": Partial<SwellTabProps & BaseProps<SwellTab> & BaseEvents>;
+
+  /**
+   * Tabs: a set of `<swell-tab>` children, one of them chosen, with its content shown.
+   * The 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.
+   * Vertical steps draw no tab list: each step is a heading with a button that opens it, and Tab moves between the buttons.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value of the chosen tab; the first tab that isn't disabled by default.
+   * - `aria-label`/`undefined`: undefined
+   * - `orientation`/`undefined`: 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.
+   * - `level`/`undefined`: The heading level of vertical steps, 1 to 6; 2 by default.
+   * - `done-label`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `size`/`undefined`: How large the tabs are: they take the height and the text of a control of the size; `medium` by default.
+   * - `value`: The value of the chosen tab. (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The tabs, `<swell-tab>` elements.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `underline`: A line marks the chosen tab.
+   * - `segmented`: The tabs share a track.
+   * - `steps`: The tabs are numbered steps.
+   * - `vertical`: The steps stand one under another.
+   */
+  "swell-tabs": Partial<SwellTabsProps & BaseProps<SwellTabs> & BaseEvents>;
+
+  /**
+   * Text: a title, a heading, a subheading, strong text, body text, a caption, a footnote or an eyebrow.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `level`/`undefined`: 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.
+   * - `variant`/`undefined`: 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.
+   * - `type`/`undefined`: What the text is; body text by default. An eyebrow is uppercase.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The text.
+   */
+  "swell-text": Partial<SwellTextProps & BaseProps<SwellText> & BaseEvents>;
+
+  /**
+   * A text field for several lines: a native textarea with its label, hint and error, rendered into light DOM.
+   * Enter adds a line; the field grows only when the user drags its corner.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native textarea.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `rows`/`undefined`: The visible lines; 2 by default.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native textarea.
+   * - `change`: The user commits a new value; it bubbles from the native textarea.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `frame`: The box that draws the field around the native textarea.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-textarea": Partial<
+    SwellTextareaProps & BaseProps<SwellTextarea> & BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It 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.
+   * `aria-hidden="true"` and `role="img"` count as the kit's; any other value is the host's and stays.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `aria-label`/`undefined`: undefined
+   * - `variant`/`undefined`: 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.
+   * - `size`/`undefined`: How large the box is: the height of a control of the size; `medium` by default.
+   * - `shape`/`undefined`: Rounds the box fully, as for an avatar.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: An `<img>`, which covers the box, an svg icon, or initials.
+   * - `badge`: A `<swell-badge>` over the top end corner, such as the quantity of a cart line.
+   */
+  "swell-thumbnail": Partial<
+    SwellThumbnailProps & BaseProps<SwellThumbnail> & BaseEvents
+  >;
+
+  /**
+   * An area of the page with token values of its own, such as an order summary in the colors of the brand.
+   * The 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.
+   * The element keeps the layout of its content: it renders nothing of its own.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `config`/`undefined`: The id of the area's configuration. An id without a configuration yet applies once the host registers one.
+   */
+  "swell-ui": Partial<SwellUiProps & BaseProps<SwellUi> & BaseEvents>;
+};
+
+export type CustomElementsSolidJs = {
+  /**
+   * A badge: a short label or a count, such as a subscription's interval, a discount or a quantity.
+   * It 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: How the badge is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label.
+   * - `start`: An icon before the label, drawn 1px larger than the text.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The badge is filled.
+   * - `outline`: The badge has an outline.
+   */
+  "swell-badge": Partial<
+    SwellBadgeProps &
+      SwellBadgeSolidJsProps &
+      BaseProps<SwellBadge> &
+      BaseEvents
+  >;
+
+  /**
+   * A button. It submits or resets the form it belongs to, like a native button.
+   * With `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`.
+   * `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.
+   *
+   * While `loading`, the button shows a spinner in place of its `start` content, hides its `end` content and ignores clicks; it keeps its focus.
+   * With `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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`/`undefined`: Removes the button from the tab order and ignores clicks.
+   * - `loading`/`undefined`: Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order.
+   * - `success`/`undefined`: Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy.
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: How the button is drawn; the variant's setting by default.
+   * - `size`/`undefined`: How large the button is; `medium` by default. `xsmall` fits an action inside a status message.
+   * - `shape`/`undefined`: Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons.
+   * - `href`/`undefined`: Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content.
+   * - `target`/`undefined`: Where to open the link.
+   * - `rel`/`undefined`: How the link's target relates to the page.
+   * - `type`/`undefined`: What the button does in a form; `submit` by default.
+   * - `disabled`: undefined (property only)
+   * - `loading`: undefined (property only)
+   * - `success`: undefined (property only)
+   * - `type`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the button.
+   * - `start`: An icon before the label, drawn 4px larger than the text.
+   * - `end`: An icon after the label, drawn 4px larger than the text; it moves toward the end on hover.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `shake() => void`: Shakes the button, as after a failed attempt to submit; each call starts the shake again.
+   * - `formDisabledCallback(disabled: boolean) => void`: undefined
+   * - `focus(options?: FocusOptions) => void`: Focuses the anchor with `href`, and the button itself without it.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The button is filled.
+   * - `outline`: The button has an outline.
+   * - `plain`: The button has neither a fill nor a border at rest; under the pointer it takes the quiet fill.
+   */
+  "swell-button": Partial<
+    SwellButtonProps &
+      SwellButtonSolidJsProps &
+      BaseProps<SwellButton> &
+      BaseEvents
+  >;
+
+  /**
+   * A card: a box that groups content, such as the details of an order or a note under a choice.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `appearance`/`undefined`: How the card is drawn: with a border, or filled with the quiet background; the configured setting by default.
+   * - `size`/`undefined`: How large the padding is: it follows the text of the size; `medium` by default.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The card has a border.
+   * - `filled`: The card is filled.
+   */
+  "swell-card": Partial<
+    SwellCardProps & SwellCardSolidJsProps & BaseProps<SwellCard> & BaseEvents
+  >;
+
+  /**
+   * A checkbox: a native checkbox with its label, hint and error, rendered into light DOM.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label beside the box.
+   * - `hint`/`undefined`: Help text under the checkbox.
+   * - `error`/`undefined`: The error shown while the checkbox is invalid.
+   * - `invalid`/`undefined`: Marks the checkbox invalid and shows the error.
+   * - `checked`/`undefined`: The default state.
+   * - `value`/`undefined`: The value sent with the form; `on` by default.
+   * - `disabled`/`undefined`: Disables the checkbox.
+   * - `required`/`undefined`: Makes the checkbox required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `size`/`undefined`: 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.
+   * - `checked`: Whether the box is checked now. (property only)
+   * - `value`: The value sent with the form. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `change`: The user checks or unchecks the box; it bubbles from the native input.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: undefined
+   */
+  "swell-checkbox": Partial<
+    SwellCheckboxProps &
+      SwellCheckboxSolidJsProps &
+      BaseProps<SwellCheckbox> &
+      BaseEvents
+  >;
+
+  /**
+   * A chip: a short value the shopper can remove, such as an applied discount code or gift card.
+   * Its remove button fires `remove`; the host removes the chip and moves the focus, for example to the code field.
+   * A 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `disabled`/`undefined`: Disables the remove button.
+   * - `remove-label`/`undefined`: The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one.
+   * - `size`/`undefined`: How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px.
+   * - `disabled`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `remove`: The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The value.
+   * - `start`: An icon before the value, drawn 2px larger than the text.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formDisabledCallback() => void`: undefined
+   * - `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.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `remove`: The remove button.
+   */
+  "swell-chip": Partial<
+    SwellChipProps & SwellChipSolidJsProps & BaseProps<SwellChip> & BaseEvents
+  >;
+
+  /**
+   * A disclosure: content that stays hidden until the shopper presses its trigger, such as "Add apartment, suite, etc." and the field it reveals.
+   * The trigger opens it and leaves; the focus moves to the first control of the content.
+   * With `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.
+   * The 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.
+   * Closed 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `open`/`undefined`: Shows the content and hides the trigger. Set on connect, the content shows at once.
+   * - `toggle`/`undefined`: Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`.
+   * - `open`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `(default)`: The content.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `content`: The box that expands to show the content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `closing`: The content collapses; the trigger is back, out of the flow and invisible until it ends.
+   */
+  "swell-disclosure": Partial<
+    SwellDisclosureProps &
+      SwellDisclosureSolidJsProps &
+      BaseProps<SwellDisclosure> &
+      BaseEvents
+  >;
+
+  /**
+   * A divider: a line across its width, or two lines with a label between them, such as "or pay another way".
+   * Without a label it is a separator for screen readers; with one, they read the label and skip the lines.
+   * The host sets the space around it.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(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.
+   */
+  "swell-divider": Partial<
+    SwellDividerProps &
+      SwellDividerSolidJsProps &
+      BaseProps<SwellDivider> &
+      BaseEvents
+  >;
+
+  /**
+   * A link. With `href`, its anchor lives in the shadow root and takes the focus for the element.
+   *
+   * Without `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.
+   * Its own `aria-label`, `aria-expanded` and `aria-controls` name and describe that button, so it can open a popover or a disclosure.
+   * `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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `href`/`undefined`: 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.
+   * - `target`/`undefined`: Where to open the link.
+   * - `rel`/`undefined`: How the target relates to the page.
+   * - `variant`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `size`/`undefined`: 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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The text of the link.
+   * - `start`: An icon before the text, 2px larger than it.
+   * - `end`: An icon after the text, 2px larger than it.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `focus(options?: FocusOptions) => void`: Focuses the anchor with `href`, and the element itself without it.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `link`: The anchor, or the content of the button without `href`.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The link is plain.
+   * - `start-content`: The link has content in its `start` slot.
+   * - `end-content`: The link has content in its `end` slot.
+   */
+  "swell-link": Partial<
+    SwellLinkProps & SwellLinkSolidJsProps & BaseProps<SwellLink> & BaseEvents
+  >;
+
+  /**
+   * A text field: a native input with its label, hint and error, rendered into light DOM.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `type`/`undefined`: The kind of value; `text` by default.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native input.
+   * - `inputmode`/`undefined`: The virtual keyboard to show.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `pattern`/`undefined`: The pattern the value matches.
+   * - `min`/`undefined`: The smallest allowed value.
+   * - `max`/`undefined`: The largest allowed value.
+   * - `step`/`undefined`: The step between allowed values.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native input.
+   * - `change`: The user commits a new value; it bubbles from the native input.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `start`: Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `frame`: The box that draws the field around the native input, its start and its end.
+   * - `start`: The box of the start content.
+   * - `end`: The box of the end content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-input": Partial<
+    SwellInputProps &
+      SwellInputSolidJsProps &
+      BaseProps<SwellInput> &
+      BaseEvents
+  >;
+
+  /**
+   * 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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The suggestions, `<swell-lookup-option>` elements.
+   */
+  "swell-lookup-list": Partial<
+    SwellLookupListProps &
+      SwellLookupListSolidJsProps &
+      BaseProps<SwellLookupList> &
+      BaseEvents
+  >;
+
+  /**
+   * One suggestion of a lookup. It lives only as a child of `<swell-lookup-list>`.
+   * Choosing 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value of the suggestion, such as the id of a place; the label by default.
+   * - `hint`/`undefined`: A second line under the label.
+   * - `disabled`/`undefined`: Disables the suggestion.
+   * - `hidden`/`undefined`: undefined
+   * - `selected`: Whether the option is chosen; the select sets it. (property only) (readonly)
+   * - `label`: The text of the option's label: its text and its elements outside a named slot, without the comments a framework leaves. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the suggestion; the field writes its text into the input when it is chosen.
+   * - `start`: Content before the label, such as an icon.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `focused`: The field's keyboard points at the suggestion.
+   * - `disabled`: The suggestion is disabled.
+   * - `first`: The option is the first one on show; it draws no divider above it.
+   */
+  "swell-lookup-option": Partial<
+    SwellLookupOptionProps &
+      SwellLookupOptionSolidJsProps &
+      BaseProps<SwellLookupOption> &
+      BaseEvents
+  >;
+
+  /**
+   * A text field with suggestions: a combobox in ARIA terms. The host loads the suggestions, such as addresses,
+   * and puts them into a `<swell-lookup-list>` child as `<swell-lookup-option>` elements; the field shows them under itself.
+   * It is a `<swell-input>` in everything else: its native input stays in light DOM, so autofill works as in any field.
+   *
+   * The 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.
+   * Choosing a suggestion clicks it. After the click, unless a handler prevented its default, the field writes the suggestion's label
+   * into the input and fires `input`, with `inputType` `insertReplacementText`, and `change`; the list stays closed until the user types again.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `type`/`undefined`: The kind of value; `text` by default.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native input.
+   * - `inputmode`/`undefined`: The virtual keyboard to show.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `pattern`/`undefined`: The pattern the value matches.
+   * - `min`/`undefined`: The smallest allowed value.
+   * - `max`/`undefined`: The largest allowed value.
+   * - `step`/`undefined`: The step between allowed values.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native input.
+   * - `change`: The user commits a new value; it bubbles from the native input.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(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.
+   * - `hint`: Help content under the field in place of the `hint` text, as on an input.
+   * - `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.
+   * - `start`: Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `list`: The popup that holds the list and the action.
+   * - `frame`: The box that draws the field around the native input, its start and its end.
+   * - `start`: The box of the start content.
+   * - `end`: The box of the end content.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-lookup": Partial<
+    SwellLookupProps &
+      SwellLookupSolidJsProps &
+      BaseProps<SwellLookup> &
+      BaseEvents
+  >;
+
+  /**
+   * A popover: a small dialog that floats at the host's trigger, such as the language and currency picker of a checkout.
+   * The 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;
+   * a press outside it and the focus leaving it close it too. A choice inside keeps it open.
+   * The 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.
+   * Its content sets its width, at least the trigger's and at most the window's less 16px.
+   * Name it with `aria-label`, such as `Language and currency`.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `open`/`undefined`: 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.
+   * - `aria-label`/`undefined`: undefined
+   * - `open`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   * - `(default)`: The content of the panel.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `panel`: The floating panel.
+   */
+  "swell-popover": Partial<
+    SwellPopoverProps &
+      SwellPopoverSolidJsProps &
+      BaseProps<SwellPopover> &
+      BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It 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`.
+   * Name it with `aria-label`, such as `Quantity, House Blend`, or with `aria-labelledby`. It holds the count and takes part in its form.
+   * While 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: 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.
+   * - `min`/`undefined`: The least count, a whole number; 1 by default.
+   * - `max`/`undefined`: The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`.
+   * - `step`/`undefined`: How much each step changes the count, a whole number above 0; 1 by default.
+   * - `disabled`/`undefined`: Removes the quantity from the tab order and ignores steps.
+   * - `busy`/`undefined`: 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.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `size`/`undefined`: How large the quantity is: it shares a height with buttons and fields of its size; `medium` by default. A cart line takes `xsmall`.
+   * - `value`: The count now. (property only)
+   * - `name`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `busy`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user changed the count.
+   * - `change`: The user changed the count, after `input`.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback(disabled: boolean) => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   */
+  "swell-quantity": Partial<
+    SwellQuantityProps &
+      SwellQuantitySolidJsProps &
+      BaseProps<SwellQuantity> &
+      BaseEvents
+  >;
+
+  /**
+   * One option of a radio group. It lives only as a direct child of `<swell-radio>`, which holds the choice.
+   * In a segmented group and as a button an option shows its `start` and its label; its hint, `end` and `details` are not drawn.
+   * An option with the `hidden` attribute is left out of its group.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value the group takes when the option is chosen; `on` by default.
+   * - `hint`/`undefined`: Help text under the label.
+   * - `disabled`/`undefined`: Disables the option.
+   * - `hidden`/`undefined`: undefined
+   * - `checked`: Whether the option is chosen; the group sets it. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the option.
+   * - `start`: Content before the label, such as an icon or a logo; decoration, left out of the option's name.
+   * - `end`: Content at the end of the row, such as a price or logos.
+   * - `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.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The group draws its options plain: the circle and the label.
+   * - `outline`: The group draws each option in a frame.
+   * - `segmented`: The group draws its options as segments of one track.
+   * - `button`: The group draws each option as a button.
+   * - `start`: The circle sits at the start of the row.
+   * - `end`: The circle sits at the end of the row.
+   * - `checked`: The option is chosen.
+   * - `disabled`: The option or its group is disabled.
+   * - `invalid`: The group is invalid.
+   * - `start-content`: The option has content in its `start` slot.
+   * - `details`: The option has content in its `details` slot.
+   * - `focused`: The option's radio has the keyboard focus.
+   */
+  "swell-radio-option": Partial<
+    SwellRadioOptionProps &
+      SwellRadioOptionSolidJsProps &
+      BaseProps<SwellRadioOption> &
+      BaseEvents
+  >;
+
+  /**
+   * A radio group: a question with one answer, chosen from its `<swell-radio-option>` children.
+   * It holds the choice and takes part in its form.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The question. Without it, the group takes its name from its own `aria-label`.
+   * - `hint`/`undefined`: Help text under the options.
+   * - `error`/`undefined`: The error shown while the group is invalid.
+   * - `invalid`/`undefined`: Marks the group invalid and shows the error.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `value`/`undefined`: The value of the option chosen by default.
+   * - `required`/`undefined`: The form can't be sent until an option is chosen.
+   * - `disabled`/`undefined`: Disables every option.
+   * - `aria-label`/`undefined`: undefined
+   * - `indicator-position`/`undefined`: Where the circle sits in the row of each option; the `radio.indicator.position` setting gives the default. A segmented group draws no circle.
+   * - `size`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `value`: The value of the chosen option. (property only)
+   * - `name`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   * - `validity`: undefined (property only) (readonly)
+   * - `validationMessage`: undefined (property only) (readonly)
+   * - `willValidate`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user chose another option.
+   * - `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`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The options, `<swell-radio-option>` elements.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => boolean`: undefined
+   * - `reportValidity() => boolean`: undefined
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback() => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   * - `focus(options?: FocusOptions) => void`: Focuses the group's Tab stop, as a Tab into the group does.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `plain`: The options are drawn plain.
+   * - `outline`: Each option is drawn in a frame.
+   * - `segmented`: The options share a track.
+   * - `button`: Each option is drawn as a button.
+   */
+  "swell-radio": Partial<
+    SwellRadioProps &
+      SwellRadioSolidJsProps &
+      BaseProps<SwellRadio> &
+      BaseEvents
+  >;
+
+  /**
+   * One option of a select. It lives only as a direct child of `<swell-select>`, which holds the choice.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value the select takes when the option is chosen; the option's label by default.
+   * - `hint`/`undefined`: A second line under the label.
+   * - `disabled`/`undefined`: Disables the option.
+   * - `hidden`/`undefined`: undefined
+   * - `selected`: Whether the option is chosen; the select sets it. (property only) (readonly)
+   * - `label`: The text of the option's label: its text and its elements outside a named slot, without the comments a framework leaves. (property only) (readonly)
+   * - `value`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The label of the option.
+   * - `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.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: The option is chosen.
+   * - `disabled`: The option is disabled.
+   * - `first`: The option is the first one on show; it draws no divider above it.
+   */
+  "swell-select-option": Partial<
+    SwellSelectOptionProps &
+      SwellSelectOptionSolidJsProps &
+      BaseProps<SwellSelectOption> &
+      BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It holds the choice and takes part in its form.
+   * Typing 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field. Without it, the select takes its name from its own `aria-label`.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the select's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the select is invalid.
+   * - `invalid`/`undefined`: Marks the select invalid and shows the error.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `value`/`undefined`: The value of the option chosen by default.
+   * - `placeholder`/`undefined`: Text shown while nothing is chosen.
+   * - `required`/`undefined`: The form can't be sent until an option is chosen.
+   * - `disabled`/`undefined`: Disables the select.
+   * - `autocomplete`/`undefined`: 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`.
+   * - `aria-label`/`undefined`: undefined
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `value`: The value of the chosen option. (property only)
+   * - `name`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `form`: undefined (property only) (readonly)
+   * - `validity`: undefined (property only) (readonly)
+   * - `validationMessage`: undefined (property only) (readonly)
+   * - `willValidate`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The user chose another option.
+   * - `change`: The user chose another option, after `input`.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The options, `<swell-select-option>` elements; a hidden one stays out of the list and the choice.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => boolean`: undefined
+   * - `reportValidity() => boolean`: undefined
+   * - `focus(options?: FocusOptions) => void`: undefined
+   * - `formResetCallback() => void`: undefined
+   * - `formDisabledCallback() => void`: undefined
+   * - `formStateRestoreCallback(state: unknown) => void`: undefined
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   * - `empty`: Nothing is chosen.
+   * - `open`: The list is open.
+   */
+  "swell-select": Partial<
+    SwellSelectProps &
+      SwellSelectSolidJsProps &
+      BaseProps<SwellSelect> &
+      BaseEvents
+  >;
+
+  /**
+   * A skeleton: a shimmering bar that stands in for content while it loads, such as a delivery option's name and price.
+   * The host sets its width through `style` and marks the region it fills with `aria-busy="true"`; the skeleton itself is hidden from screen readers.
+   * Screen 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>`.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `size`/`undefined`: 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.
+   * - `appearance`/`undefined`: `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The bars of a card.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `card`: The skeleton is the frame of an option card.
+   */
+  "swell-skeleton": Partial<
+    SwellSkeletonProps &
+      SwellSkeletonSolidJsProps &
+      BaseProps<SwellSkeleton> &
+      BaseEvents
+  >;
+
+  /**
+   * A status message: an error, a success or a warning.
+   * Screen readers announce it when it is added after the page has loaded and when its text or type changes:
+   * each message goes into a fresh visually hidden region, an alert for danger and a status otherwise.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `type`/`undefined`: What the message means: its color, icon and how it is announced.
+   * - `size`/`undefined`: How large the message is: its text, padding and icon follow the text of the size; `medium` by default.
+   * - `appearance`/`undefined`: How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The message.
+   * - `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.
+   * - `end`: An action after the message, such as a `<swell-button size="xsmall">`; it is left out of the announcement.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `message`: The message box.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `filled`: The message has its background, border and icon.
+   * - `outline`: The message has its border and icon.
+   * - `plain`: The message has its icon only and the font of a field error.
+   * - `quiet`: The message is a note in the quiet palette, without a border or the type's icon.
+   * - `end-content`: The message has content in its `end` slot: its items are centered.
+   * - `typed`: The message has a known type and isn't quiet: it takes the colors of its type.
+   */
+  "swell-status": Partial<
+    SwellStatusProps &
+      SwellStatusSolidJsProps &
+      BaseProps<SwellStatus> &
+      BaseEvents
+  >;
+
+  /**
+   * A tab of a `<swell-tabs>` group: its label and its content, shown while it is chosen.
+   * In 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.
+   * A 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.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The group's value while the tab is chosen; the label by default.
+   * - `label`/`undefined`: The text of the tab or of the step's heading.
+   * - `done`/`undefined`: Marks a step as done: its number becomes a check, and the line to the next step fills.
+   * - `disabled`/`undefined`: The tab can't be chosen, such as a step that isn't open yet.
+   * - `hidden`/`undefined`: undefined
+   * - `value`: undefined (property only)
+   * - `label`: undefined (property only)
+   * - `done`: undefined (property only)
+   * - `disabled`: undefined (property only)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The content, shown while the tab is chosen.
+   * - `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.
+   * - `end`: Vertical steps: content beside the heading, such as a link that opens a done step or a note.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `selected`: The tab is chosen.
+   * - `vertical`: The tab is a step of vertical steps.
+   * - `last`: The tab is the last of its group, so a vertical step draws no line to a next one.
+   */
+  "swell-tab": Partial<
+    SwellTabProps & SwellTabSolidJsProps & BaseProps<SwellTab> & BaseEvents
+  >;
+
+  /**
+   * Tabs: a set of `<swell-tab>` children, one of them chosen, with its content shown.
+   * The 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.
+   * Vertical steps draw no tab list: each step is a heading with a button that opens it, and Tab moves between the buttons.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `value`/`undefined`: The value of the chosen tab; the first tab that isn't disabled by default.
+   * - `aria-label`/`undefined`: undefined
+   * - `orientation`/`undefined`: 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.
+   * - `level`/`undefined`: The heading level of vertical steps, 1 to 6; 2 by default.
+   * - `done-label`/`undefined`: 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.
+   * - `appearance`/`undefined`: 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.
+   * - `size`/`undefined`: How large the tabs are: they take the height and the text of a control of the size; `medium` by default.
+   * - `value`: The value of the chosen tab. (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `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.
+   * - `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.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The tabs, `<swell-tab>` elements.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `underline`: A line marks the chosen tab.
+   * - `segmented`: The tabs share a track.
+   * - `steps`: The tabs are numbered steps.
+   * - `vertical`: The steps stand one under another.
+   */
+  "swell-tabs": Partial<
+    SwellTabsProps & SwellTabsSolidJsProps & BaseProps<SwellTabs> & BaseEvents
+  >;
+
+  /**
+   * Text: a title, a heading, a subheading, strong text, body text, a caption, a footnote or an eyebrow.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `level`/`undefined`: 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.
+   * - `variant`/`undefined`: 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.
+   * - `type`/`undefined`: What the text is; body text by default. An eyebrow is uppercase.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: The text.
+   */
+  "swell-text": Partial<
+    SwellTextProps & SwellTextSolidJsProps & BaseProps<SwellText> & BaseEvents
+  >;
+
+  /**
+   * A text field for several lines: a native textarea with its label, hint and error, rendered into light DOM.
+   * Enter adds a line; the field grows only when the user drags its corner.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`/`undefined`: The label of the field.
+   * - `optional`/`undefined`: A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+   * - `hint`/`undefined`: Help text under the field.
+   * - `error`/`undefined`: The error shown while the field is invalid.
+   * - `invalid`/`undefined`: Marks the field invalid and shows the error.
+   * - `value`/`undefined`: The default value.
+   * - `appearance`/`undefined`: How the field is drawn; the configured setting by default.
+   * - `size`/`undefined`: How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+   * - `disabled`/`undefined`: Disables the field.
+   * - `readonly`/`undefined`: Makes the field read-only.
+   * - `required`/`undefined`: Makes the field required.
+   * - `name`/`undefined`: The name sent with the form.
+   * - `placeholder`/`undefined`: Text shown while the field is empty.
+   * - `autocomplete`/`undefined`: The autofill hint of the native textarea.
+   * - `minlength`/`undefined`: The shortest allowed value.
+   * - `maxlength`/`undefined`: The longest allowed value.
+   * - `rows`/`undefined`: The visible lines; 2 by default.
+   * - `value`: The current value of the field. (property only)
+   * - `disabled`: undefined (property only)
+   * - `required`: undefined (property only)
+   * - `readOnly`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `name`: undefined (property only)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `input`: The value changes as the user types; it bubbles from the native textarea.
+   * - `change`: The user commits a new value; it bubbles from the native textarea.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `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.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributesOf(passed: string[], own: string[] = []) => string[]`: Every attribute a text field observes, for the subclass's `observedAttributes`.
+   * - `focus(options?: FocusOptions) => void`: undefined
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `frame`: The box that draws the field around the native textarea.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `outline`: The field has a border on all sides.
+   * - `filled`: The field has a fill and a bottom border.
+   * - `underline`: The field has a bottom border.
+   * - `above`: The label sits above the field.
+   * - `floating`: The label floats inside the field.
+   */
+  "swell-textarea": Partial<
+    SwellTextareaProps &
+      SwellTextareaSolidJsProps &
+      BaseProps<SwellTextarea> &
+      BaseEvents
+  >;
+
+  /**
+   * 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.
+   * It 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.
+   * `aria-hidden="true"` and `role="img"` count as the kit's; any other value is the host's and stays.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `aria-label`/`undefined`: undefined
+   * - `variant`/`undefined`: 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.
+   * - `size`/`undefined`: How large the box is: the height of a control of the size; `medium` by default.
+   * - `shape`/`undefined`: Rounds the box fully, as for an avatar.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: An `<img>`, which covers the box, an svg icon, or initials.
+   * - `badge`: A `<swell-badge>` over the top end corner, such as the quantity of a cart line.
+   */
+  "swell-thumbnail": Partial<
+    SwellThumbnailProps &
+      SwellThumbnailSolidJsProps &
+      BaseProps<SwellThumbnail> &
+      BaseEvents
+  >;
+
+  /**
+   * An area of the page with token values of its own, such as an order summary in the colors of the brand.
+   * The 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.
+   * The element keeps the layout of its content: it renders nothing of its own.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `config`/`undefined`: The id of the area's configuration. An id without a configuration yet applies once the host registers one.
+   */
+  "swell-ui": Partial<
+    SwellUiProps & SwellUiSolidJsProps & BaseProps<SwellUi> & BaseEvents
+  >;
+};
+
+export type CustomCssProperties = {};
+