@swell/swell-ui 0.0.0-stage → 0.1.1

package/dist/frameworks/vue.d.ts

@@ -0,0 +1,827 @@
+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";
+import type { HTMLAttributes, PublicProps, EmitFn, EmitsToProps } from "vue";
+
+/** This file was autogenerated by @wc-toolkit/vuejs-types */
+/**
+ * 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;
+};
+
+export type EventMap = {
+  [event: string]: Event;
+};
+
+// Vue's template type-checking reads props from $props and events from $emit.
+// See: https://vuejs.org/guide/extras/web-components.html#non-vue-web-components-and-typescript
+export type VueEmitsOptions<T extends EventMap> = {
+  [K in keyof T]: (event: T[K]) => void;
+};
+
+export type VueEmit<T extends EventMap> = EmitFn<VueEmitsOptions<T>>;
+
+// Helps Volar autocomplete "@event" by providing "onXxx" props.
+export type VueOnProps<T extends EventMap> = EmitsToProps<VueEmitsOptions<T>>;
+
+export type DefineCustomElement<
+  ElementType extends HTMLElement,
+  Props = {},
+  Events extends EventMap = {},
+> = new () => ElementType & {
+  /** @deprecated Do not use the $props property on a Custom Element ref; this is for template prop types only. */
+  $props: HTMLAttributes & Props & PublicProps & VueOnProps<Events>;
+
+  /** @deprecated Do not use the $emit property on a Custom Element ref; this is for template event types only. */
+  $emit: VueEmit<Events>;
+};
+
+export type SwellBadgeVueProps = {
+  /** 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;
+  /** How the badge is drawn; the configured setting by default. */
+  appearance?: "filled" | "outline";
+  /** 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";
+};
+
+export type SwellBadgeVueEvents = {};
+
+export type SwellButtonVueProps = {
+  /** Removes the button from the tab order and ignores clicks. */
+  disabled?: boolean;
+  /** Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order. */
+  loading?: boolean;
+  /** 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;
+  /** 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;
+  /** How the button is drawn; the variant's setting by default. */
+  appearance?: "filled" | "outline" | "plain";
+  /** How large the button is; `medium` by default. `xsmall` fits an action inside a status message. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  /** Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons. */
+  shape?: "pill";
+  /** Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content. */
+  href?: string;
+  /** Where to open the link. */
+  target?: string;
+  /** How the link's target relates to the page. */
+  rel?: string;
+  /** What the button does in a form; `submit` by default. */
+  type?: "submit" | "reset" | "button";
+};
+
+export type SwellButtonVueEvents = {};
+
+export type SwellCardVueProps = {
+  /** How the card is drawn: with a border, or filled with the quiet background; the configured setting by default. */
+  appearance?: "outline" | "filled";
+  /** How large the padding is: it follows the text of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+};
+
+export type SwellCardVueEvents = {};
+
+/** `SwellCheckbox` component event */
+export type SwellCheckboxElementEvent<E = Event> = TypedEvent<SwellCheckbox, E>;
+
+export type SwellCheckboxVueProps = {
+  /** The label beside the box. */
+  label?: string;
+  /** Help text under the checkbox. */
+  hint?: string;
+  /** The error shown while the checkbox is invalid. */
+  error?: string;
+  /** Marks the checkbox invalid and shows the error. */
+  invalid?: boolean;
+  /** The default state. */
+  checked?: boolean;
+  /** The value sent with the form; `on` by default. */
+  value?: string;
+  /** Disables the checkbox. */
+  disabled?: boolean;
+  /** Makes the checkbox required. */
+  required?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** 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";
+};
+
+export type SwellCheckboxVueEvents = {
+  /** The user checks or unchecks the box; it bubbles from the native input. */
+  change: SwellCheckboxElementEvent;
+};
+
+/** `SwellChip` component event */
+export type SwellChipElementEvent<E = Event> = TypedEvent<SwellChip, E>;
+
+export type SwellChipVueProps = {
+  /** Disables the remove button. */
+  disabled?: boolean;
+  /** The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one. */
+  "remove-label"?: string;
+  /** 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";
+};
+
+export type SwellChipVueEvents = {
+  /** The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none. */
+  remove: SwellChipElementEvent;
+};
+
+/** `SwellDisclosure` component event */
+export type SwellDisclosureElementEvent<E = Event> = TypedEvent<
+  SwellDisclosure,
+  E
+>;
+/** `toggle` event type */
+export type SwellDisclosureToggleElementEvent =
+  SwellDisclosureElementEvent<ToggleEvent>;
+
+export type SwellDisclosureVueProps = {
+  /** Shows the content and hides the trigger. Set on connect, the content shows at once. */
+  open?: boolean;
+  /** Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`. */
+  toggle?: boolean;
+};
+
+export type SwellDisclosureVueEvents = {
+  /** 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. */
+  toggle: SwellDisclosureToggleElementEvent;
+};
+
+export type SwellDividerVueProps = {};
+
+export type SwellDividerVueEvents = {};
+
+export type SwellLinkVueProps = {
+  /** 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;
+  /** Where to open the link. */
+  target?: string;
+  /** How the target relates to the page. */
+  rel?: string;
+  /** 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;
+  /** 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";
+  /** 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";
+};
+
+export type SwellLinkVueEvents = {};
+
+/** `SwellInput` component event */
+export type SwellInputElementEvent<E = Event> = TypedEvent<SwellInput, E>;
+
+export type SwellInputVueProps = {
+  /** The label of the field. */
+  label?: string;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string;
+  /** Help text under the field. */
+  hint?: string;
+  /** The error shown while the field is invalid. */
+  error?: string;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean;
+  /** The default value. */
+  value?: string;
+  /** The kind of value; `text` by default. */
+  type?: "text" | "email" | "tel" | "password" | "number" | "search" | "url";
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline";
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  /** Disables the field. */
+  disabled?: boolean;
+  /** Makes the field read-only. */
+  readonly?: boolean;
+  /** Makes the field required. */
+  required?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** Text shown while the field is empty. */
+  placeholder?: string;
+  /** The autofill hint of the native input. */
+  autocomplete?: string;
+  /** The virtual keyboard to show. */
+  inputmode?: string;
+  /** The shortest allowed value. */
+  minlength?: number;
+  /** The longest allowed value. */
+  maxlength?: number;
+  /** The pattern the value matches. */
+  pattern?: string;
+  /** The smallest allowed value. */
+  min?: string;
+  /** The largest allowed value. */
+  max?: string;
+  /** The step between allowed values. */
+  step?: string;
+  /**  */
+  readOnly?: boolean;
+};
+
+export type SwellInputVueEvents = {
+  /** The value changes as the user types; it bubbles from the native input. */
+  input: SwellInputElementEvent;
+  /** The user commits a new value; it bubbles from the native input. */
+  change: SwellInputElementEvent;
+};
+
+export type SwellLookupListVueProps = {};
+
+export type SwellLookupListVueEvents = {};
+
+export type SwellLookupOptionVueProps = {
+  /** The value of the suggestion, such as the id of a place; the label by default. */
+  value?: string;
+  /** A second line under the label. */
+  hint?: string;
+  /** Disables the suggestion. */
+  disabled?: boolean;
+  /**  */
+  hidden?: unknown;
+};
+
+export type SwellLookupOptionVueEvents = {};
+
+/** `SwellLookup` component event */
+export type SwellLookupElementEvent<E = Event> = TypedEvent<SwellLookup, E>;
+
+export type SwellLookupVueProps = {
+  /** The label of the field. */
+  label?: string;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string;
+  /** Help text under the field. */
+  hint?: string;
+  /** The error shown while the field is invalid. */
+  error?: string;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean;
+  /** The default value. */
+  value?: string;
+  /** The kind of value; `text` by default. */
+  type?: "text" | "email" | "tel" | "password" | "number" | "search" | "url";
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline";
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  /** Disables the field. */
+  disabled?: boolean;
+  /** Makes the field read-only. */
+  readonly?: boolean;
+  /** Makes the field required. */
+  required?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** Text shown while the field is empty. */
+  placeholder?: string;
+  /** The autofill hint of the native input. */
+  autocomplete?: string;
+  /** The virtual keyboard to show. */
+  inputmode?: string;
+  /** The shortest allowed value. */
+  minlength?: number;
+  /** The longest allowed value. */
+  maxlength?: number;
+  /** The pattern the value matches. */
+  pattern?: string;
+  /** The smallest allowed value. */
+  min?: string;
+  /** The largest allowed value. */
+  max?: string;
+  /** The step between allowed values. */
+  step?: string;
+  /**  */
+  readOnly?: boolean;
+};
+
+export type SwellLookupVueEvents = {
+  /** The value changes as the user types; it bubbles from the native input. */
+  input: SwellLookupElementEvent;
+  /** The user commits a new value; it bubbles from the native input. */
+  change: SwellLookupElementEvent;
+};
+
+/** `SwellPopover` component event */
+export type SwellPopoverElementEvent<E = Event> = TypedEvent<SwellPopover, E>;
+/** `toggle` event type */
+export type SwellPopoverToggleElementEvent =
+  SwellPopoverElementEvent<ToggleEvent>;
+
+export type SwellPopoverVueProps = {
+  /** 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;
+  /**  */
+  "aria-label"?: unknown;
+};
+
+export type SwellPopoverVueEvents = {
+  /** 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. */
+  toggle: SwellPopoverToggleElementEvent;
+};
+
+/** `SwellQuantity` component event */
+export type SwellQuantityElementEvent<E = Event> = TypedEvent<SwellQuantity, E>;
+
+export type SwellQuantityVueProps = {
+  /** 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;
+  /** The least count, a whole number; 1 by default. */
+  min?: number;
+  /** The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`. */
+  max?: number;
+  /** How much each step changes the count, a whole number above 0; 1 by default. */
+  step?: number;
+  /** Removes the quantity from the tab order and ignores steps. */
+  disabled?: boolean;
+  /** 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;
+  /** The name sent with the form. */
+  name?: string;
+  /** 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";
+};
+
+export type SwellQuantityVueEvents = {
+  /** The user changed the count. */
+  input: SwellQuantityElementEvent;
+  /** The user changed the count, after `input`. */
+  change: SwellQuantityElementEvent;
+};
+
+export type SwellRadioOptionVueProps = {
+  /** The value the group takes when the option is chosen; `on` by default. */
+  value?: string;
+  /** Help text under the label. */
+  hint?: string;
+  /** Disables the option. */
+  disabled?: boolean;
+  /**  */
+  hidden?: unknown;
+};
+
+export type SwellRadioOptionVueEvents = {};
+
+/** `SwellRadio` component event */
+export type SwellRadioElementEvent<E = Event> = TypedEvent<SwellRadio, E>;
+
+export type SwellRadioVueProps = {
+  /** The question. Without it, the group takes its name from its own `aria-label`. */
+  label?: string;
+  /** Help text under the options. */
+  hint?: string;
+  /** The error shown while the group is invalid. */
+  error?: string;
+  /** Marks the group invalid and shows the error. */
+  invalid?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** The value of the option chosen by default. */
+  value?: string;
+  /** The form can't be sent until an option is chosen. */
+  required?: boolean;
+  /** Disables every option. */
+  disabled?: boolean;
+  /**  */
+  "aria-label"?: unknown;
+  /** 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";
+  /** 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";
+  /** 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";
+};
+
+export type SwellRadioVueEvents = {
+  /** The user chose another option. */
+  input: SwellRadioElementEvent;
+  /** 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`. */
+  change: SwellRadioElementEvent;
+};
+
+export type SwellSelectOptionVueProps = {
+  /** The value the select takes when the option is chosen; the option's label by default. */
+  value?: string;
+  /** A second line under the label. */
+  hint?: string;
+  /** Disables the option. */
+  disabled?: boolean;
+  /**  */
+  hidden?: unknown;
+};
+
+export type SwellSelectOptionVueEvents = {};
+
+/** `SwellSelect` component event */
+export type SwellSelectElementEvent<E = Event> = TypedEvent<SwellSelect, E>;
+
+export type SwellSelectVueProps = {
+  /** The label of the field. Without it, the select takes its name from its own `aria-label`. */
+  label?: string;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the select's name. */
+  optional?: string;
+  /** Help text under the field. */
+  hint?: string;
+  /** The error shown while the select is invalid. */
+  error?: string;
+  /** Marks the select invalid and shows the error. */
+  invalid?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** The value of the option chosen by default. */
+  value?: string;
+  /** Text shown while nothing is chosen. */
+  placeholder?: string;
+  /** The form can't be sent until an option is chosen. */
+  required?: boolean;
+  /** Disables the select. */
+  disabled?: boolean;
+  /** 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;
+  /**  */
+  "aria-label"?: unknown;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline";
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+};
+
+export type SwellSelectVueEvents = {
+  /** The user chose another option. */
+  input: SwellSelectElementEvent;
+  /** The user chose another option, after `input`. */
+  change: SwellSelectElementEvent;
+};
+
+export type SwellSkeletonVueProps = {
+  /** 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";
+  /** `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";
+};
+
+export type SwellSkeletonVueEvents = {};
+
+export type SwellStatusVueProps = {
+  /** What the message means: its color, icon and how it is announced. */
+  type?: "danger" | "success" | "warning";
+  /** 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";
+  /** How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only. */
+  appearance?: "filled" | "outline" | "plain" | "quiet";
+};
+
+export type SwellStatusVueEvents = {};
+
+export type SwellTabVueProps = {
+  /** The group's value while the tab is chosen; the label by default. */
+  value?: string;
+  /** The text of the tab or of the step's heading. */
+  label?: string;
+  /** Marks a step as done: its number becomes a check, and the line to the next step fills. */
+  done?: boolean;
+  /** The tab can't be chosen, such as a step that isn't open yet. */
+  disabled?: boolean;
+  /**  */
+  hidden?: unknown;
+};
+
+export type SwellTabVueEvents = {};
+
+/** `SwellTabs` component event */
+export type SwellTabsElementEvent<E = Event> = TypedEvent<SwellTabs, E>;
+/** `request` event type */
+export type SwellTabsRequestElementEvent = SwellTabsElementEvent<
+  CustomEvent<{ value: string }>
+>;
+
+export type SwellTabsVueProps = {
+  /** The value of the chosen tab; the first tab that isn't disabled by default. */
+  value?: string;
+  /**  */
+  "aria-label"?: unknown;
+  /** 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";
+  /** The heading level of vertical steps, 1 to 6; 2 by default. */
+  level?: number;
+  /** 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;
+  /** 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";
+  /** 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";
+};
+
+export type SwellTabsVueEvents = {
+  /** 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. */
+  change: SwellTabsElementEvent;
+  /** 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. */
+  request: SwellTabsRequestElementEvent;
+};
+
+export type SwellTextVueProps = {
+  /** 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;
+  /** 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;
+  /** What the text is; body text by default. An eyebrow is uppercase. */
+  type?:
+    | "title"
+    | "heading"
+    | "subheading"
+    | "strong"
+    | "body"
+    | "caption"
+    | "footnote"
+    | "eyebrow";
+};
+
+export type SwellTextVueEvents = {};
+
+/** `SwellTextarea` component event */
+export type SwellTextareaElementEvent<E = Event> = TypedEvent<SwellTextarea, E>;
+
+export type SwellTextareaVueProps = {
+  /** The label of the field. */
+  label?: string;
+  /** A marker after the label, such as `(optional)`, in the host's language; it joins the field's name. */
+  optional?: string;
+  /** Help text under the field. */
+  hint?: string;
+  /** The error shown while the field is invalid. */
+  error?: string;
+  /** Marks the field invalid and shows the error. */
+  invalid?: boolean;
+  /** The default value. */
+  value?: string;
+  /** How the field is drawn; the configured setting by default. */
+  appearance?: "outline" | "filled" | "underline";
+  /** How large the field is; `medium` by default. At `xsmall` the label sits above the field. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  /** Disables the field. */
+  disabled?: boolean;
+  /** Makes the field read-only. */
+  readonly?: boolean;
+  /** Makes the field required. */
+  required?: boolean;
+  /** The name sent with the form. */
+  name?: string;
+  /** Text shown while the field is empty. */
+  placeholder?: string;
+  /** The autofill hint of the native textarea. */
+  autocomplete?: string;
+  /** The shortest allowed value. */
+  minlength?: number;
+  /** The longest allowed value. */
+  maxlength?: number;
+  /** The visible lines; 2 by default. */
+  rows?: number;
+  /**  */
+  readOnly?: boolean;
+};
+
+export type SwellTextareaVueEvents = {
+  /** The value changes as the user types; it bubbles from the native textarea. */
+  input: SwellTextareaElementEvent;
+  /** The user commits a new value; it bubbles from the native textarea. */
+  change: SwellTextareaElementEvent;
+};
+
+export type SwellThumbnailVueProps = {
+  /**  */
+  "aria-label"?: unknown;
+  /** 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;
+  /** How large the box is: the height of a control of the size; `medium` by default. */
+  size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  /** Rounds the box fully, as for an avatar. */
+  shape?: "circle";
+};
+
+export type SwellThumbnailVueEvents = {};
+
+export type SwellUiVueProps = {
+  /** The id of the area's configuration. An id without a configuration yet applies once the host registers one. */
+  config?: string;
+};
+
+export type SwellUiVueEvents = {};
+
+export type CustomCssProperties = {};
+
+// Vue SFC template type-checking (GlobalComponents) for non-Vue custom elements.
+// Note: Some tooling expects this augmentation under "@vue/runtime-core", while
+// other docs/examples use "vue". We emit both for compatibility.
+export interface WcToolkitVueGlobalComponents {
+  /** 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. */
+  "swell-badge": DefineCustomElement<
+    SwellBadge,
+    SwellBadgeVueProps,
+    SwellBadgeVueEvents
+  >;
+  /** 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. */
+  "swell-button": DefineCustomElement<
+    SwellButton,
+    SwellButtonVueProps,
+    SwellButtonVueEvents
+  >;
+  /** A card: a box that groups content, such as the details of an order or a note under a choice. */
+  "swell-card": DefineCustomElement<
+    SwellCard,
+    SwellCardVueProps,
+    SwellCardVueEvents
+  >;
+  /** A checkbox: a native checkbox with its label, hint and error, rendered into light DOM. */
+  "swell-checkbox": DefineCustomElement<
+    SwellCheckbox,
+    SwellCheckboxVueProps,
+    SwellCheckboxVueEvents
+  >;
+  /** 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. */
+  "swell-chip": DefineCustomElement<
+    SwellChip,
+    SwellChipVueProps,
+    SwellChipVueEvents
+  >;
+  /** 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. */
+  "swell-disclosure": DefineCustomElement<
+    SwellDisclosure,
+    SwellDisclosureVueProps,
+    SwellDisclosureVueEvents
+  >;
+  /** 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. */
+  "swell-divider": DefineCustomElement<
+    SwellDivider,
+    SwellDividerVueProps,
+    SwellDividerVueEvents
+  >;
+  /** 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. */
+  "swell-link": DefineCustomElement<
+    SwellLink,
+    SwellLinkVueProps,
+    SwellLinkVueEvents
+  >;
+  /** A text field: a native input with its label, hint and error, rendered into light DOM. */
+  "swell-input": DefineCustomElement<
+    SwellInput,
+    SwellInputVueProps,
+    SwellInputVueEvents
+  >;
+  /** 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. */
+  "swell-lookup-list": DefineCustomElement<
+    SwellLookupList,
+    SwellLookupListVueProps,
+    SwellLookupListVueEvents
+  >;
+  /** 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. */
+  "swell-lookup-option": DefineCustomElement<
+    SwellLookupOption,
+    SwellLookupOptionVueProps,
+    SwellLookupOptionVueEvents
+  >;
+  /** 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. */
+  "swell-lookup": DefineCustomElement<
+    SwellLookup,
+    SwellLookupVueProps,
+    SwellLookupVueEvents
+  >;
+  /** 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'. */
+  "swell-popover": DefineCustomElement<
+    SwellPopover,
+    SwellPopoverVueProps,
+    SwellPopoverVueEvents
+  >;
+  /** 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. */
+  "swell-quantity": DefineCustomElement<
+    SwellQuantity,
+    SwellQuantityVueProps,
+    SwellQuantityVueEvents
+  >;
+  /** 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. */
+  "swell-radio-option": DefineCustomElement<
+    SwellRadioOption,
+    SwellRadioOptionVueProps,
+    SwellRadioOptionVueEvents
+  >;
+  /** 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. */
+  "swell-radio": DefineCustomElement<
+    SwellRadio,
+    SwellRadioVueProps,
+    SwellRadioVueEvents
+  >;
+  /** One option of a select. It lives only as a direct child of '<swell-select>', which holds the choice. */
+  "swell-select-option": DefineCustomElement<
+    SwellSelectOption,
+    SwellSelectOptionVueProps,
+    SwellSelectOptionVueEvents
+  >;
+  /** 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. */
+  "swell-select": DefineCustomElement<
+    SwellSelect,
+    SwellSelectVueProps,
+    SwellSelectVueEvents
+  >;
+  /** 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>'. */
+  "swell-skeleton": DefineCustomElement<
+    SwellSkeleton,
+    SwellSkeletonVueProps,
+    SwellSkeletonVueEvents
+  >;
+  /** 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. */
+  "swell-status": DefineCustomElement<
+    SwellStatus,
+    SwellStatusVueProps,
+    SwellStatusVueEvents
+  >;
+  /** 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. */
+  "swell-tab": DefineCustomElement<
+    SwellTab,
+    SwellTabVueProps,
+    SwellTabVueEvents
+  >;
+  /** 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. */
+  "swell-tabs": DefineCustomElement<
+    SwellTabs,
+    SwellTabsVueProps,
+    SwellTabsVueEvents
+  >;
+  /** Text: a title, a heading, a subheading, strong text, body text, a caption, a footnote or an eyebrow. */
+  "swell-text": DefineCustomElement<
+    SwellText,
+    SwellTextVueProps,
+    SwellTextVueEvents
+  >;
+  /** 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. */
+  "swell-textarea": DefineCustomElement<
+    SwellTextarea,
+    SwellTextareaVueProps,
+    SwellTextareaVueEvents
+  >;
+  /** 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. */
+  "swell-thumbnail": DefineCustomElement<
+    SwellThumbnail,
+    SwellThumbnailVueProps,
+    SwellThumbnailVueEvents
+  >;
+  /** 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. */
+  "swell-ui": DefineCustomElement<SwellUi, SwellUiVueProps, SwellUiVueEvents>;
+}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+}
+
+declare module "@vue/runtime-dom" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+
+  // Needed for named slots on native elements when using Web Components.
+  // Vue templates otherwise reject: <span slot="icon" />
+  interface HTMLAttributes {
+    slot?: string;
+  }
+}
+
+declare module "vue" {
+  interface GlobalComponents extends WcToolkitVueGlobalComponents {}
+
+  // Some package managers (notably pnpm) may not make "@vue/runtime-dom" directly
+  // resolvable from the consuming project, so we also augment via "vue".
+  interface HTMLAttributes {
+    slot?: string;
+  }
+
+  interface CSSProperties extends CustomCssProperties {}
+}