@swell/swell-ui 0.1.0 → 0.1.1

package/dist/types/components/core/quantity/quantity.d.ts

@@ -0,0 +1,47 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-quantity
+ * @attr {number} value - 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 {number} min - The least count, a whole number; 1 by default.
+ * @attr {number} max - The greatest count, a whole number; no limit by default. A `max` below `min` counts as `min`.
+ * @attr {number} step - How much each step changes the count, a whole number above 0; 1 by default.
+ * @attr {string} name - The name sent with the form.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - 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 {boolean} disabled - Removes the quantity from the tab order and ignores steps.
+ * @attr {boolean} busy - 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.
+ * @fires input - The user changed the count.
+ * @fires change - The user changed the count, after `input`.
+ */
+export declare class SwellQuantity extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    /** The count now. */
+    get value(): number;
+    set value(value: number);
+    get name(): string;
+    set name(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get busy(): boolean;
+    set busy(value: boolean);
+    get form(): HTMLFormElement | null;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: unknown): void;
+    protected update(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-quantity": SwellQuantity;
+    }
+}

package/dist/types/components/core/radio/radio-option.d.ts

@@ -0,0 +1,82 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/** What the group tells each of its options. */
+interface OptionState {
+    checked: boolean;
+    /** The option is the group's Tab stop. */
+    tabbable: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    /** The option's place in its group, from 1. */
+    position: number;
+    size: number;
+}
+/** What an option asks of its group. */
+interface GroupLink {
+    /** The user chose the option. */
+    choose(option: SwellRadioOption): void;
+    /** The options or their values changed. */
+    refresh(): void;
+}
+/** A radio group and its options. */
+export declare const radioGroup: {
+    link(group: Element, link: GroupLink): void;
+    groupOf(child: Element): Element | undefined;
+    linkOf(child: Element): GroupLink | undefined;
+    receive(fn: (child: SwellRadioOption, state: OptionState) => void): void;
+    sync(child: SwellRadioOption, state: OptionState): void;
+};
+/**
+ * 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.
+ *
+ * @tag swell-radio-option
+ * @slot - The label of the option.
+ * @slot start - Content before the label, such as an icon or a logo; decoration, left out of the option's name.
+ * @slot end - Content at the end of the row, such as a price or logos.
+ * @slot 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.
+ * @attr {string} value - The value the group takes when the option is chosen; `on` by default.
+ * @attr {string} hint - Help text under the label.
+ * @attr {boolean} disabled - Disables the option.
+ * @cssstate plain - The group draws its options plain: the circle and the label.
+ * @cssstate outline - The group draws each option in a frame.
+ * @cssstate segmented - The group draws its options as segments of one track.
+ * @cssstate button - The group draws each option as a button.
+ * @cssstate start - The circle sits at the start of the row.
+ * @cssstate end - The circle sits at the end of the row.
+ * @cssstate checked - The option is chosen.
+ * @cssstate disabled - The option or its group is disabled.
+ * @cssstate invalid - The group is invalid.
+ * @cssstate start-content - The option has content in its `start` slot.
+ * @cssstate details - The option has content in its `details` slot.
+ * @cssstate focused - The option's radio has the keyboard focus.
+ */
+export declare class SwellRadioOption extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    static shadowOptions: ShadowRootInit;
+    static observedAttributes: string[];
+    constructor();
+    /** Whether the option is chosen; the group sets it. */
+    get checked(): boolean;
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected appearanceSource(): Element;
+    /** The circle's position: the group's `indicator-position`, else the setting. */
+    protected extraStates(): string[];
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-radio-option": SwellRadioOption;
+    }
+}
+export {};

package/dist/types/components/core/radio/radio.d.ts

@@ -0,0 +1,65 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-radio
+ * @slot - The options, `<swell-radio-option>` elements.
+ * @attr {string} label - The question. Without it, the group takes its name from its own `aria-label`.
+ * @attr {string} hint - Help text under the options.
+ * @attr {string} error - The error shown while the group is invalid.
+ * @attr {boolean} invalid - Marks the group invalid and shows the error.
+ * @attr {string} name - The name sent with the form.
+ * @attr {string} value - The value of the option chosen by default.
+ * @attr {boolean} required - The form can't be sent until an option is chosen.
+ * @attr {boolean} disabled - Disables every option.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - 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 {"start" | "end"} indicator-position - 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 {"plain" | "outline" | "segmented" | "button"} appearance - 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.
+ * @fires input - The user chose another option.
+ * @fires 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`.
+ * @cssstate plain - The options are drawn plain.
+ * @cssstate outline - Each option is drawn in a frame.
+ * @cssstate segmented - The options share a track.
+ * @cssstate button - Each option is drawn as a button.
+ */
+export declare class SwellRadio extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    /** The value of the chosen option. */
+    get value(): string;
+    set value(value: string);
+    get name(): string;
+    set name(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    protected update(): void;
+    /** Focuses the group's Tab stop, as a Tab into the group does. */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-radio": SwellRadio;
+    }
+}

package/dist/types/components/core/select/select-option.d.ts

@@ -0,0 +1,69 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/** What the select tells each of its options. */
+interface OptionState {
+    selected: boolean;
+    disabled: boolean;
+    /** The option is the first one on show, which draws no divider above it. */
+    first: boolean;
+}
+/** What an option asks of its select. */
+interface SelectLink {
+    /** The user chose the option. */
+    choose(option: SwellOptionElement): void;
+    /** `option` joined or left the select, or its value or state changed. */
+    refresh(option: SwellOptionElement): void;
+}
+/** A select, or a lookup's list, and its options. */
+export declare const optionList: {
+    link(group: Element, link: SelectLink): void;
+    groupOf(child: Element): Element | undefined;
+    linkOf(child: Element): SelectLink | undefined;
+    receive(fn: (child: SwellOptionElement, state: OptionState) => void): void;
+    sync(child: SwellOptionElement, state: OptionState): void;
+};
+/**
+ * An option of a list: its label, a `start` before it and a hint under it, with the look of the list's rows.
+ * The element that holds the options links itself with `optionList.link` and applies their state with `optionList.sync`; one that shows their labels also watches their content, as a select does.
+ *
+ * @slot - The label of the option.
+ * @slot 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.
+ * @attr {string} hint - A second line under the label.
+ * @attr {boolean} disabled - Disables the option.
+ * @cssstate disabled - The option is disabled.
+ * @cssstate first - The option is the first one on show; it draws no divider above it.
+ */
+export declare abstract class SwellOptionElement extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    /** Whether the option takes the focus itself; a lookup's options leave it in the field. */
+    static focusable: boolean;
+    constructor();
+    /** Whether the option is chosen; the select sets it. */
+    get selected(): boolean;
+    /** The text of the option's label: its text and its elements outside a named slot, without the comments a framework leaves. */
+    get label(): string;
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected update(name: string): void;
+}
+/**
+ * One option of a select. It lives only as a direct child of `<swell-select>`, which holds the choice.
+ *
+ * @tag swell-select-option
+ * @attr {string} value - The value the select takes when the option is chosen; the option's label by default.
+ * @cssstate selected - The option is chosen.
+ */
+export declare class SwellSelectOption extends SwellOptionElement {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-select-option": SwellSelectOption;
+    }
+}
+export {};

package/dist/types/components/core/select/select.d.ts

@@ -0,0 +1,70 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-select
+ * @slot - The options, `<swell-select-option>` elements; a hidden one stays out of the list and the choice.
+ * @attr {string} label - The label of the field. Without it, the select takes its name from its own `aria-label`.
+ * @attr {string} optional - A marker after the label, such as `(optional)`, in the host's language; it joins the select's name.
+ * @attr {string} hint - Help text under the field.
+ * @attr {string} error - The error shown while the select is invalid.
+ * @attr {boolean} invalid - Marks the select invalid and shows the error.
+ * @attr {string} name - The name sent with the form.
+ * @attr {string} value - The value of the option chosen by default.
+ * @attr {string} placeholder - Text shown while nothing is chosen.
+ * @attr {boolean} required - The form can't be sent until an option is chosen.
+ * @attr {boolean} disabled - Disables the select.
+ * @attr {string} autocomplete - 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 {"outline" | "filled" | "underline"} appearance - How the field is drawn; the configured setting by default.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+ * @fires input - The user chose another option.
+ * @fires change - The user chose another option, after `input`.
+ * @cssstate outline - The field has a border on all sides.
+ * @cssstate filled - The field has a fill and a bottom border.
+ * @cssstate underline - The field has a bottom border.
+ * @cssstate above - The label sits above the field.
+ * @cssstate floating - The label floats inside the field.
+ * @cssstate empty - Nothing is chosen.
+ * @cssstate open - The list is open.
+ */
+export declare class SwellSelect extends SwellShadowElement {
+    #private;
+    static appearance: string;
+    static styles: string;
+    static template: string;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    /** The value of the chosen option. */
+    get value(): string;
+    set value(value: string);
+    get name(): string;
+    set name(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    focus(options?: FocusOptions): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    protected update(): void;
+    protected extraStates(): string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-select": SwellSelect;
+    }
+}

package/dist/types/components/core/skeleton/skeleton.d.ts

@@ -0,0 +1,23 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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>`.
+ *
+ * @tag swell-skeleton
+ * @slot - The bars of a card.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - 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 {"card"} appearance - `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.
+ * @cssstate card - The skeleton is the frame of an option card.
+ */
+export declare class SwellSkeleton extends SwellShadowElement {
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-skeleton": SwellSkeleton;
+    }
+}

package/dist/types/components/core/status/status.d.ts

@@ -0,0 +1,38 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-status
+ * @slot - The message.
+ * @slot 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.
+ * @slot end - An action after the message, such as a `<swell-button size="xsmall">`; it is left out of the announcement.
+ * @attr {"danger" | "success" | "warning"} type - What the message means: its color, icon and how it is announced.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the message is: its text, padding and icon follow the text of the size; `medium` by default.
+ * @attr {"filled" | "outline" | "plain" | "quiet"} appearance - How the message is drawn; the configured setting by default. `quiet`, for a note, comes from the attribute only.
+ * @csspart message - The message box.
+ * @cssstate filled - The message has its background, border and icon.
+ * @cssstate outline - The message has its border and icon.
+ * @cssstate plain - The message has its icon only and the font of a field error.
+ * @cssstate quiet - The message is a note in the quiet palette, without a border or the type's icon.
+ * @cssstate end-content - The message has content in its `end` slot: its items are centered.
+ * @cssstate typed - The message has a known type and isn't quiet: it takes the colors of its type.
+ */
+export declare class SwellStatus extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-status": SwellStatus;
+    }
+}

package/dist/types/components/core/tabs/tab.d.ts

@@ -0,0 +1,76 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/** What the group tells a tab. */
+interface TabState {
+    selected: boolean;
+    /** The tab is a step of vertical steps, which draws its own heading. */
+    vertical: boolean;
+    /** The tab's place in its group, from 1. */
+    position: number;
+    last: boolean;
+    /** The heading level of a vertical step. */
+    level: number;
+    /** The word that follows the label of a done step for screen readers. */
+    doneLabel: string;
+}
+/** What a tab asks of its group. */
+interface TabsLink {
+    /** One of the tabs changed. */
+    refresh(): void;
+    /** A step's button was pressed. */
+    choose(tab: SwellTab): void;
+}
+/** A tab group and its tabs. */
+export declare const tabGroup: {
+    link(group: Element, link: TabsLink): void;
+    groupOf(child: Element): Element | undefined;
+    linkOf(child: Element): TabsLink | undefined;
+    receive(fn: (child: SwellTab, state: TabState) => void): void;
+    sync(child: SwellTab, state: TabState): void;
+};
+export declare const CHECK = "<svg class=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
+/**
+ * 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.
+ *
+ * @tag swell-tab
+ * @slot - The content, shown while the tab is chosen.
+ * @slot 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.
+ * @slot end - Vertical steps: content beside the heading, such as a link that opens a done step or a note.
+ * @attr {string} value - The group's value while the tab is chosen; the label by default.
+ * @attr {string} label - The text of the tab or of the step's heading.
+ * @attr {boolean} done - Marks a step as done: its number becomes a check, and the line to the next step fills.
+ * @attr {boolean} disabled - The tab can't be chosen, such as a step that isn't open yet.
+ * @cssstate selected - The tab is chosen.
+ * @cssstate vertical - The tab is a step of vertical steps.
+ * @cssstate last - The tab is the last of its group, so a vertical step draws no line to a next one.
+ */
+export declare class SwellTab extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get label(): string;
+    set label(value: string);
+    get done(): boolean;
+    set done(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    protected update(): void;
+    /** The group's appearance is the tab's. */
+    protected appearanceSource(): Element;
+    protected extraStates(): string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-tab": SwellTab;
+    }
+}
+export {};

package/dist/types/components/core/tabs/tabs.d.ts

@@ -0,0 +1,46 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-tabs
+ * @slot - The tabs, `<swell-tab>` elements.
+ * @attr {string} value - The value of the chosen tab; the first tab that isn't disabled by default.
+ * @attr {"underline" | "segmented" | "steps"} appearance - 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 {"horizontal" | "vertical"} orientation - 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 {number} level - The heading level of vertical steps, 1 to 6; 2 by default.
+ * @attr {string} done-label - 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 {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the tabs are: they take the height and the text of a control of the size; `medium` by default.
+ * @fires {CustomEvent<{ value: string }>} 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.
+ * @fires 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.
+ * @cssstate underline - A line marks the chosen tab.
+ * @cssstate segmented - The tabs share a track.
+ * @cssstate steps - The tabs are numbered steps.
+ * @cssstate vertical - The steps stand one under another.
+ */
+export declare class SwellTabs extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    constructor();
+    /** The value of the chosen tab. */
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    /** The orientation decides whether the group is vertical, a state of its own and of its tabs. */
+    protected update(name: string): void;
+    /** The tabs take the group's appearance, so they follow it. */
+    protected updateStates(): void;
+    /** Vertical steps draw no tab list: each step draws its heading. */
+    protected extraStates(): string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-tabs": SwellTabs;
+    }
+}

package/dist/types/components/core/text/text.d.ts

@@ -0,0 +1,23 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * Text: a title, a heading, a subheading, strong text, body text, a caption, a footnote or an eyebrow.
+ *
+ * @tag swell-text
+ * @slot - The text.
+ * @attr {string} variant - 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 {"title" | "heading" | "subheading" | "strong" | "body" | "caption" | "footnote" | "eyebrow"} type - What the text is; body text by default. An eyebrow is uppercase.
+ * @attr {number} level - 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.
+ */
+export declare class SwellText extends SwellShadowElement {
+    #private;
+    static group: string;
+    static styles: string;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-text": SwellText;
+    }
+}

package/dist/types/components/core/textarea/textarea.d.ts

@@ -0,0 +1,45 @@
+import { SwellTextFieldElement } from "../../../runtime/text-field.js";
+/**
+ * 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.
+ *
+ * @tag swell-textarea
+ * @attr {string} label - The label of the field.
+ * @attr {string} optional - A marker after the label, such as `(optional)`, in the host's language; it joins the field's name.
+ * @attr {string} hint - Help text under the field.
+ * @slot 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.
+ * @attr {string} error - The error shown while the field is invalid.
+ * @attr {boolean} invalid - Marks the field invalid and shows the error.
+ * @attr {string} value - The default value.
+ * @attr {"outline" | "filled" | "underline"} appearance - How the field is drawn; the configured setting by default.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the field is; `medium` by default. At `xsmall` the label sits above the field.
+ * @attr {boolean} disabled - Disables the field.
+ * @attr {boolean} readonly - Makes the field read-only.
+ * @attr {boolean} required - Makes the field required.
+ * @attr {string} name - The name sent with the form.
+ * @attr {string} placeholder - Text shown while the field is empty.
+ * @attr {string} autocomplete - The autofill hint of the native textarea.
+ * @attr {number} minlength - The shortest allowed value.
+ * @attr {number} maxlength - The longest allowed value.
+ * @attr {number} rows - The visible lines; 2 by default.
+ * @csspart frame - The box that draws the field around the native textarea.
+ * @fires input - The value changes as the user types; it bubbles from the native textarea.
+ * @fires change - The user commits a new value; it bubbles from the native textarea.
+ * @cssstate outline - The field has a border on all sides.
+ * @cssstate filled - The field has a fill and a bottom border.
+ * @cssstate underline - The field has a bottom border.
+ * @cssstate above - The label sits above the field.
+ * @cssstate floating - The label floats inside the field.
+ */
+export declare class SwellTextarea extends SwellTextFieldElement {
+    static styles: string;
+    static control: "textarea";
+    static prefix: string;
+    static passed: string[];
+    static observedAttributes: string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-textarea": SwellTextarea;
+    }
+}

package/dist/types/components/core/thumbnail/thumbnail.d.ts

@@ -0,0 +1,27 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-thumbnail
+ * @slot - An `<img>`, which covers the box, an svg icon, or initials.
+ * @slot badge - A `<swell-badge>` over the top end corner, such as the quantity of a cart line.
+ * @attr {string} variant - 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 {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the box is: the height of a control of the size; `medium` by default.
+ * @attr {"circle"} shape - Rounds the box fully, as for an avatar.
+ */
+export declare class SwellThumbnail extends SwellShadowElement {
+    #private;
+    static group: string;
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-thumbnail": SwellThumbnail;
+    }
+}

package/dist/types/components/core/ui/ui.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @tag swell-ui
+ * @attr {string} config - The id of the area's configuration. An id without a configuration yet applies once the host registers one.
+ */
+export declare class SwellUi extends HTMLElement {
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-ui": SwellUi;
+    }
+}

package/dist/types/components/elements.d.ts

@@ -0,0 +1 @@
+export declare const ELEMENTS: Record<string, () => Promise<unknown>>;

package/dist/types/react/create.d.ts

@@ -0,0 +1,8 @@
+import { type ForwardRefExoticComponent, type RefAttributes } from "react";
+type Props = Record<string, unknown>;
+/**
+ * A React component for a custom element, for every React version from 16.8: it sets the element's writable `properties` on it,
+ * writes every other prop as an attribute, and listens to the element's events through the props `events` names, such as `{ onToggle: "toggle" }`.
+ */
+export declare function createComponent(tag: string, events: Record<string, string>, properties: readonly string[]): ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export {};