@swell/swell-ui 0.0.0-stage → 0.1.1

package/dist/react/status.js

@@ -0,0 +1,4 @@
+import "../elements/status.js";
+import { createComponent } from "./create.js";
+
+export const SwellStatus = createComponent("swell-status", {}, []);

package/dist/react/tab.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellTab as SwellTabElement } from "../types/components/core/tabs/tab.js";
+
+export declare const SwellTab: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellTabElement>, "value" | "label" | "done" | "disabled"> &
+    Partial<Pick<SwellTabElement, "value" | "label" | "done" | "disabled">> & {
+    "hidden"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellTabElement>
+>;

package/dist/react/tab.js

@@ -0,0 +1,4 @@
+import "../elements/tab.js";
+import { createComponent } from "./create.js";
+
+export const SwellTab = createComponent("swell-tab", {}, ["value","label","done","disabled"]);

package/dist/react/tabs.d.ts

@@ -0,0 +1,17 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellTabs as SwellTabsElement } from "../types/components/core/tabs/tabs.js";
+
+export declare const SwellTabs: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellTabsElement>, "onChange" | "onRequest" | "value"> &
+    Partial<Pick<SwellTabsElement, "value">> & {
+    "aria-label"?: string;
+    "orientation"?: "horizontal" | "vertical";
+    "level"?: number;
+    "done-label"?: string;
+    "appearance"?: "underline" | "segmented" | "steps";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    onChange?: (event: Event & { currentTarget: SwellTabsElement }) => void;
+    onRequest?: (event: CustomEvent<{ value: string }> & { currentTarget: SwellTabsElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellTabsElement>
+>;

package/dist/react/tabs.js

@@ -0,0 +1,4 @@
+import "../elements/tabs.js";
+import { createComponent } from "./create.js";
+
+export const SwellTabs = createComponent("swell-tabs", {"onChange":"change","onRequest":"request"}, ["value"]);

package/dist/react/text.d.ts

@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellText as SwellTextElement } from "../types/components/core/text/text.js";
+
+export declare const SwellText: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellTextElement>, never> &
+    {
+    "level"?: number;
+    "variant"?: string;
+    "type"?: "title" | "heading" | "subheading" | "strong" | "body" | "caption" | "footnote" | "eyebrow";
+      children?: ReactNode;
+    } & RefAttributes<SwellTextElement>
+>;

package/dist/react/text.js

@@ -0,0 +1,4 @@
+import "../elements/text.js";
+import { createComponent } from "./create.js";
+
+export const SwellText = createComponent("swell-text", {}, []);

package/dist/react/textarea.d.ts

@@ -0,0 +1,23 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellTextarea as SwellTextareaElement } from "../types/components/core/textarea/textarea.js";
+
+export declare const SwellTextarea: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellTextareaElement>, "onInput" | "onChange" | "value" | "disabled" | "required" | "readOnly" | "invalid" | "name"> &
+    Partial<Pick<SwellTextareaElement, "value" | "disabled" | "required" | "readOnly" | "invalid" | "name">> & {
+    "label"?: string;
+    "optional"?: string;
+    "hint"?: string;
+    "error"?: string;
+    "appearance"?: "outline" | "filled" | "underline";
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "readonly"?: boolean;
+    "placeholder"?: string;
+    "autocomplete"?: string;
+    "minlength"?: number;
+    "maxlength"?: number;
+    "rows"?: number;
+    onInput?: (event: Event & { currentTarget: SwellTextareaElement }) => void;
+    onChange?: (event: Event & { currentTarget: SwellTextareaElement }) => void;
+      children?: ReactNode;
+    } & RefAttributes<SwellTextareaElement>
+>;

package/dist/react/textarea.js

@@ -0,0 +1,4 @@
+import "../elements/textarea.js";
+import { createComponent } from "./create.js";
+
+export const SwellTextarea = createComponent("swell-textarea", {"onInput":"input","onChange":"change"}, ["value","disabled","required","readOnly","invalid","name"]);

package/dist/react/thumbnail.d.ts

@@ -0,0 +1,13 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellThumbnail as SwellThumbnailElement } from "../types/components/core/thumbnail/thumbnail.js";
+
+export declare const SwellThumbnail: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellThumbnailElement>, never> &
+    {
+    "aria-label"?: string;
+    "variant"?: string;
+    "size"?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    "shape"?: "circle";
+      children?: ReactNode;
+    } & RefAttributes<SwellThumbnailElement>
+>;

package/dist/react/thumbnail.js

@@ -0,0 +1,4 @@
+import "../elements/thumbnail.js";
+import { createComponent } from "./create.js";
+
+export const SwellThumbnail = createComponent("swell-thumbnail", {}, []);

package/dist/react/ui.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+import type { SwellUi as SwellUiElement } from "../types/components/core/ui/ui.js";
+
+export declare const SwellUi: ForwardRefExoticComponent<
+  Omit<HTMLAttributes<SwellUiElement>, never> &
+    {
+    "config"?: string;
+      children?: ReactNode;
+    } & RefAttributes<SwellUiElement>
+>;

package/dist/react/ui.js

@@ -0,0 +1,4 @@
+import "../elements/ui.js";
+import { createComponent } from "./create.js";
+
+export const SwellUi = createComponent("swell-ui", {}, []);

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

@@ -0,0 +1,25 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-badge
+ * @slot - The label.
+ * @slot start - An icon before the label, drawn 1px larger than the text.
+ * @attr {string} variant - 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 {"filled" | "outline"} appearance - How the badge is drawn; the configured setting by default.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the badge is; `medium` by default. A small one fits a count, an extra small one a count on an icon.
+ * @cssstate filled - The badge is filled.
+ * @cssstate outline - The badge has an outline.
+ */
+export declare class SwellBadge extends SwellShadowElement {
+    static group: string;
+    static appearance: string;
+    static styles: string;
+    static template: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-badge": SwellBadge;
+    }
+}

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

@@ -0,0 +1,60 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+type ButtonType = "submit" | "reset" | "button";
+/**
+ * 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.
+ *
+ * @tag swell-button
+ * @slot - The label of the button.
+ * @slot start - An icon before the label, drawn 4px larger than the text.
+ * @slot end - An icon after the label, drawn 4px larger than the text; it moves toward the end on hover.
+ * @attr {string} variant - 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 {"filled" | "outline" | "plain"} appearance - How the button is drawn; the variant's setting by default.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the button is; `medium` by default. `xsmall` fits an action inside a status message.
+ * @attr {"pill"} shape - Rounds the corners fully, in every variant, appearance and size, whatever the corner radius of the host's buttons.
+ * @attr {string} href - Where the button leads; with it the element is a link, named by its own `aria-label`, or else by its content.
+ * @attr {string} target - Where to open the link.
+ * @attr {string} rel - How the link's target relates to the page.
+ * @attr {"submit" | "reset" | "button"} type - What the button does in a form; `submit` by default.
+ * @attr {boolean} disabled - Removes the button from the tab order and ignores clicks.
+ * @attr {boolean} loading - Shows a spinner, marks the button busy and ignores clicks; the button stays in the tab order.
+ * @attr {boolean} success - Fills the button with the success color, draws a check and makes the button inactive; it keeps its tab stop and isn't busy.
+ * @cssstate filled - The button is filled.
+ * @cssstate outline - The button has an outline.
+ * @cssstate plain - The button has neither a fill nor a border at rest; under the pointer it takes the quiet fill.
+ */
+export declare class SwellButton extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static styles: string;
+    static template: string;
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get loading(): boolean;
+    set loading(value: boolean);
+    get success(): boolean;
+    set success(value: boolean);
+    get type(): ButtonType;
+    set type(value: ButtonType);
+    /** Shakes the button, as after a failed attempt to submit; each call starts the shake again. */
+    shake(): void;
+    connectedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** Focuses the anchor with `href`, and the button itself without it. */
+    focus(options?: FocusOptions): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-button": SwellButton;
+    }
+}
+export {};

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

@@ -0,0 +1,21 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * A card: a box that groups content, such as the details of an order or a note under a choice.
+ *
+ * @tag swell-card
+ * @slot - The content.
+ * @attr {"outline" | "filled"} appearance - How the card is drawn: with a border, or filled with the quiet background; the configured setting by default.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the padding is: it follows the text of the size; `medium` by default.
+ * @cssstate outline - The card has a border.
+ * @cssstate filled - The card is filled.
+ */
+export declare class SwellCard extends SwellShadowElement {
+    static group: string;
+    static appearance: string;
+    static styles: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-card": SwellCard;
+    }
+}

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

@@ -0,0 +1,46 @@
+import { SwellFieldElement } from "../../../runtime/element.js";
+/**
+ * A checkbox: a native checkbox with its label, hint and error, rendered into light DOM.
+ *
+ * @tag swell-checkbox
+ * @attr {string} label - The label beside the box.
+ * @attr {string} hint - Help text under the checkbox.
+ * @attr {string} error - The error shown while the checkbox is invalid.
+ * @attr {boolean} invalid - Marks the checkbox invalid and shows the error.
+ * @attr {boolean} checked - The default state.
+ * @attr {string} value - The value sent with the form; `on` by default.
+ * @attr {boolean} disabled - Disables the checkbox.
+ * @attr {boolean} required - Makes the checkbox required.
+ * @attr {string} name - The name sent with the form.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - 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.
+ * @fires change - The user checks or unchecks the box; it bubbles from the native input.
+ */
+export declare class SwellCheckbox extends SwellFieldElement {
+    #private;
+    static labelPosition: boolean;
+    static styles: string;
+    static observedAttributes: string[];
+    /** Whether the box is checked now. */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /** The value sent with the form. */
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get name(): string;
+    set name(value: string);
+    focus(options?: FocusOptions): void;
+    connectedCallback(): void;
+    protected render(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-checkbox": SwellCheckbox;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-chip
+ * @slot - The value.
+ * @slot start - An icon before the value, drawn 2px larger than the text.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - How large the chip is; `medium` by default. Its remove button is as high as the chip, at least 24px.
+ * @attr {boolean} disabled - Disables the remove button.
+ * @attr {string} remove-label - The name of the remove button in the host's language, such as `Remove WELCOME10`; every chip needs one.
+ * @fires remove - The shopper pressed the remove button; it bubbles, and the chip stays in the page. A disabled chip fires none.
+ * @csspart remove - The remove button.
+ */
+export declare class SwellChip extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    /** Form-associated, as a button is, so a disabled fieldset disables it. */
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    constructor();
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    formDisabledCallback(): 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. */
+    focus(options?: FocusOptions): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-chip": SwellChip;
+    }
+}

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

@@ -0,0 +1,37 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-disclosure
+ * @slot 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.
+ * @slot - The content.
+ * @attr {boolean} open - Shows the content and hides the trigger. Set on connect, the content shows at once.
+ * @attr {boolean} toggle - Keeps the trigger while the content is open: it closes the content too and carries `aria-expanded`.
+ * @fires {ToggleEvent} 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.
+ * @csspart content - The box that expands to show the content.
+ * @cssstate closing - The content collapses; the trigger is back, out of the flow and invisible until it ends.
+ */
+export declare class SwellDisclosure extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    constructor();
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    /**
+     * Closed content is inert, so Tab skips it while it collapses; closing with the focus inside gives the focus back to the trigger first.
+     * While the content collapses, the element is in the `closing` state.
+     */
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-disclosure": SwellDisclosure;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-divider
+ * @slot - 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.
+ */
+export declare class SwellDivider extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-divider": SwellDivider;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { configure, getConfig, onChange, setTheme } from "../../runtime/index.js";
+import { version } from "../../runtime/config.js";
+/** Loads the elements of a root (a document, a shadow root or an element), and those added to it later, or the elements of a list of tags; resolves when they are defined. */
+export declare const load: (target: import("./index.js").Root | readonly string[]) => Promise<void>;
+/** Resolves when the tags, or the kit's tags undefined in the document now, are defined. */
+export declare const ready: (tags?: readonly string[]) => Promise<void>;
+export { configure, getConfig, onChange, setTheme, version };
+export type { Color, Config, Theme } from "../../runtime/index.js";
+export type { Root } from "../../runtime/loader.js";
+declare global {
+    /** The kit's functions for inline scripts and pages without a bundler. */
+    var SwellUI: {
+        configure: typeof configure;
+        setTheme: typeof setTheme;
+        getConfig: typeof getConfig;
+        onChange: typeof onChange;
+        version: string;
+        load: typeof load;
+        ready: typeof ready;
+    };
+}

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

@@ -0,0 +1,57 @@
+import { SwellTextFieldElement } from "../../../runtime/text-field.js";
+/**
+ * A text field: a native input with its label, hint and error, rendered into light DOM.
+ *
+ * @tag swell-input
+ * @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.
+ * @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 {"text" | "email" | "tel" | "password" | "number" | "search" | "url"} type - The kind of value; `text` by default.
+ * @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 input.
+ * @attr {string} inputmode - The virtual keyboard to show.
+ * @attr {number} minlength - The shortest allowed value.
+ * @attr {number} maxlength - The longest allowed value.
+ * @attr {string} pattern - The pattern the value matches.
+ * @attr {string} min - The smallest allowed value.
+ * @attr {string} max - The largest allowed value.
+ * @attr {string} step - The step between allowed values.
+ * @slot 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.
+ * @slot start - Content before the text, such as an icon; an svg is drawn 4px larger than the text, in the quiet color.
+ * @slot 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.
+ * @csspart frame - The box that draws the field around the native input, its start and its end.
+ * @csspart start - The box of the start content.
+ * @csspart end - The box of the end content.
+ * @fires input - The value changes as the user types; it bubbles from the native input.
+ * @fires change - The user commits a new value; it bubbles from the native 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.
+ */
+export declare class SwellInput extends SwellTextFieldElement {
+    static styles: string;
+    static control: "input";
+    static prefix: string;
+    static template: string;
+    static passed: string[];
+    static own: string[];
+    static observedAttributes: string[];
+    protected setUpControl(control: HTMLInputElement): void;
+    protected syncControl(name: string, control: HTMLInputElement): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-input": SwellInput;
+    }
+}

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

@@ -0,0 +1,42 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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.
+ *
+ * @tag swell-link
+ * @slot - The text of the link.
+ * @slot start - An icon before the text, 2px larger than it.
+ * @slot end - An icon after the text, 2px larger than it.
+ * @attr {string} href - 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 {string} target - Where to open the link.
+ * @attr {string} rel - How the target relates to the page.
+ * @attr {string} variant - 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 {"underline" | "plain"} appearance - 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 {"xsmall" | "small" | "medium" | "large" | "xlarge"} size - 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.
+ * @csspart link - The anchor, or the content of the button without `href`.
+ * @cssstate plain - The link is plain.
+ * @cssstate start-content - The link has content in its `start` slot.
+ * @cssstate end-content - The link has content in its `end` slot.
+ */
+export declare class SwellLink extends SwellShadowElement {
+    #private;
+    static group: string;
+    static appearance: string;
+    static appearances: string[];
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    /** Focuses the anchor with `href`, and the element itself without it. */
+    focus(options?: FocusOptions): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-link": SwellLink;
+    }
+}

package/dist/types/components/core/lookup/lookup-list.d.ts

@@ -0,0 +1,21 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * Gives an element an id of its own, unless the host gave it one.
+ * A deep clone copies the id it was given, so a copied id is replaced with a new one.
+ */
+export declare function ownId(element: Element, prefix: string): void;
+/**
+ * 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.
+ *
+ * @tag swell-lookup-list
+ * @slot - The suggestions, `<swell-lookup-option>` elements.
+ */
+export declare class SwellLookupList extends SwellShadowElement {
+    static styles: string;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-lookup-list": SwellLookupList;
+    }
+}

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

@@ -0,0 +1,27 @@
+import { SwellOptionElement } from "../select/select-option.js";
+/** Marks `option` as the one the field's keyboard points at, or clears the mark. */
+export declare function activate(option: SwellLookupOption, on: boolean): void;
+/**
+ * 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.
+ *
+ * @tag swell-lookup-option
+ * @slot - The label of the suggestion; the field writes its text into the input when it is chosen.
+ * @slot start - Content before the label, such as an icon.
+ * @attr {string} value - The value of the suggestion, such as the id of a place; the label by default.
+ * @attr {string} hint - A second line under the label.
+ * @attr {boolean} disabled - Disables the suggestion.
+ * @cssstate focused - The field's keyboard points at the suggestion.
+ * @cssstate disabled - The suggestion is disabled.
+ */
+export declare class SwellLookupOption extends SwellOptionElement {
+    #private;
+    static styles: string;
+    static focusable: boolean;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-lookup-option": SwellLookupOption;
+    }
+}

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

@@ -0,0 +1,32 @@
+import { SwellInput } from "../input/input.js";
+/**
+ * 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.
+ *
+ * @tag swell-lookup
+ * @slot - 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.
+ * @slot hint - Help content under the field in place of the `hint` text, as on an input.
+ * @slot 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.
+ * @csspart list - The popup that holds the list and the action.
+ */
+export declare class SwellLookup extends SwellInput {
+    #private;
+    static styles: string;
+    static prefix: string;
+    static template: string;
+    constructor();
+    disconnectedCallback(): void;
+    protected setUpControl(control: HTMLInputElement): void;
+    protected render(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-lookup": SwellLookup;
+    }
+}

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

@@ -0,0 +1,33 @@
+import { SwellShadowElement } from "../../../runtime/element.js";
+/**
+ * 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`.
+ *
+ * @tag swell-popover
+ * @slot 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.
+ * @slot - The content of the panel.
+ * @attr {boolean} open - 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.
+ * @fires {ToggleEvent} 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.
+ * @csspart panel - The floating panel.
+ */
+export declare class SwellPopover extends SwellShadowElement {
+    #private;
+    static styles: string;
+    static template: string;
+    static observedAttributes: string[];
+    constructor();
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected update(name: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "swell-popover": SwellPopover;
+    }
+}