zabi-components 8.0.0 → 9.0.0

package/dist/types/index.d.ts

@@ -1,22 +1,69 @@
 export * from './events.js';
 export * from './variants.js';
 export * from './page.types.js';
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLTextareaAttributes, SVGAttributes } from 'svelte/elements';
+import type { BottomTabBarItem } from '../components/util/bottom-tab-bar.js';
+import type { AppShellNavigationContext, AppShellNavigationMode } from '../components/util/app-shell.js';
+import type { CalendarEvent, CalendarStrings } from '../components/util/calendar.js';
+import type { Photo, PhotoGridSelectDetail, PhotoGridStrings, PhotoKey, PhotoViewerAction, PhotoViewerCloseReason, PhotoViewerStrings } from '../components/util/photo.js';
+import type { BottomSheetCloseReason, BottomSheetSnap } from '../components/util/bottom-sheet.js';
+import type { BadgeVariant, ButtonSize, ButtonVariant, CardVariant, OnFillTone, SurfaceTone, ExtendedSemanticVariant, SemanticVariant, SizeVariant } from './variants.js';
+import type { AvatarGroupStrings, AvatarPerson, AvatarSize } from '../components/util/avatar.js';
+import type { ChartColor, ChartDatum, ChartFormat, ChartSeries } from '../components/util/chart.js';
+import type { ProgressStrings } from '../components/util/progress.js';
+import type { SkeletonStrings } from '../components/util/skeleton.js';
+import type { CodeFieldMode, CodeFieldStrings } from '../components/util/code-field.js';
+import type { RatingStrings } from '../components/util/rating.js';
+import type { StepperItem, StepperLayout, StepperStrings } from '../components/util/stepper.js';
+import type { SegmentedControlOption } from '../components/util/segmented-control.js';
 export type ZabiComponent<T extends Record<string, any> = Record<string, any>, E extends Record<string, any> = Record<string, any>> = Component<T, E>;
-export interface ButtonProps {
-    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'ghost' | 'link' | 'neutral';
-    size?: 'sm' | 'md' | 'lg';
+export interface ButtonProps extends Omit<HTMLButtonAttributes, 'class'> {
+    /**
+     * `success`, `warning`, `info` and `neutral` are deprecated: Button never
+     * styled them, and they render as `primary`.
+     */
+    variant?: ButtonVariant | 'success' | 'warning' | 'info' | 'neutral';
+    size?: ButtonSize;
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'submit' | 'reset';
-    className?: string;
+    /**
+     * Where the link goes. Makes this an `<a>` that looks the same. While
+     * `disabled` or `loading` it has no `href` and is `aria-disabled`.
+     */
+    href?: string;
+    /** With `href`: where the link opens. */
+    target?: HTMLAnchorAttributes['target'];
+    /** With `href`: the link's relationship, such as `noopener`. */
+    rel?: HTMLAnchorAttributes['rel'];
+    /** With `href`: download the address instead of opening it. */
+    download?: HTMLAnchorAttributes['download'];
+    hreflang?: HTMLAnchorAttributes['hreflang'];
+    referrerpolicy?: HTMLAnchorAttributes['referrerpolicy'];
+    ping?: HTMLAnchorAttributes['ping'];
     text?: string;
+    /** Stretch to the width of the container. */
+    fullWidth?: boolean;
+    /** @deprecated use `fullWidth`. */
+    isFullWidth?: boolean;
+    class?: string;
+    children?: Snippet;
+    /** @deprecated never accepted by the component; use `class`. */
+    className?: string;
+    /** @deprecated never accepted by the component; render the icon in `children`. */
     iconLeft?: string | any;
+    /** @deprecated never accepted by the component; render the icon in `children`. */
     iconRight?: string | any;
+    /** @deprecated never accepted by the component; use `aria-label`. */
     ariaLabel?: string;
+    /** @deprecated never accepted by the component; use `aria-describedby`. */
     ariaDescribedBy?: string;
+    /** @deprecated never accepted by the component; use `aria-expanded`. */
     ariaExpanded?: boolean;
+    /** @deprecated never accepted by the component; use `aria-controls`. */
     ariaControls?: string;
+    /** @deprecated never accepted by the component; use `aria-pressed`. */
     ariaPressed?: boolean;
 }
 export interface ButtonEvents {
@@ -25,24 +72,106 @@ export interface ButtonEvents {
         event: MouseEvent;
     };
 }
-export interface HeadingProps {
+export interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Visual size, when it should differ from the semantic level. */
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Heading text. Ignored when `children` is provided. */
+    text?: string;
+    /** Text colour: `headline` by default; `inherit`, `on-brand` or `on-accent` on a filled block. */
+    tone?: 'headline' | OnFillTone;
+    /** `heading` (default) or `display`: the second face and larger steps. */
+    variant?: 'heading' | 'display';
+    class?: string;
+    children?: Snippet;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
-export interface CardProps {
-    variant?: 'default' | 'elevated' | 'outlined' | 'flat';
-    size?: 'sm' | 'md' | 'lg';
+export interface BlockProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** `neutral` (the card surface), `tint`, `brand` or `accent`. */
+    tone?: SurfaceTone;
+    /** A fill the app chooses, any CSS colour. Wins over `tone`; the app checks the contrast of the pair. */
+    fill?: string;
+    /** The label colour on `fill`. */
+    onFill?: string;
+    /** Inner space: `none`, `sm`, `md` (default) or `lg`. */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** The element, `div` by default. */
+    as?: 'div' | 'section' | 'header' | 'footer' | 'article' | 'aside';
+    /** A Block does not break out of a padded parent: put it outside, or pass a negative inline margin (`-mx-4`). */
+    class?: string;
+    children?: Snippet;
+}
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    variant?: CardVariant;
+    /** `neutral` (default), `tint`, `brand` or `accent`; brand and accent re-point text, links and controls inside. */
+    tone?: SurfaceTone;
+    /** A fill the app chooses, any CSS colour. Wins over `tone`; the app checks the contrast of the pair. */
+    fill?: string;
+    /** The label colour on `fill`. */
+    onFill?: string;
+    /** The card is an `<a>`. A link card must not contain other interactive elements. */
+    href?: string;
+    target?: HTMLAnchorAttributes['target'];
+    rel?: string;
+    /** The card is a `<button>` (ignored with `href`): `submit` posts the form around it. Like a link card it must not contain other interactive elements. */
+    type?: 'submit' | 'button' | 'reset';
+    /** With `type`: the name the button submits under. */
+    name?: string;
+    /** With `type`: what the button submits. */
+    value?: string;
+    /** With `type`: the id of the form it belongs to. */
+    form?: string;
+    /** With `type`: the card cannot be pressed. */
+    disabled?: boolean;
+    /** With `type`: the action is on its way (`aria-busy`, `aria-disabled`); the press is swallowed and the card stays a Tab stop. */
+    loading?: boolean;
+    size?: SizeVariant;
     fullWidth?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     onclick?: (event: MouseEvent) => void | Promise<void>;
     /** Required when card is interactive (has onclick) for accessibility */
     ariaLabel?: string;
+    children?: Snippet;
 }
-export interface InputProps {
+export interface InputProps extends Omit<HTMLInputAttributes, 'class' | 'size' | 'value' | 'type' | 'id' | 'name' | 'placeholder' | 'required' | 'disabled' | 'oninput' | 'onblur' | 'aria-label' | 'aria-describedby'> {
+    /** Omit to auto-generate. */
+    id?: string;
     type?: string;
     value?: string;
+    name?: string;
+    label?: string;
+    /** True when a FormField supplies the visible label. */
+    hideLabel?: boolean;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
+    loading?: boolean;
+    size?: SizeVariant;
+    variant?: SemanticVariant;
+    /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    'aria-describedby'?: string | null;
+    /** Drawn inside the field, before the text. */
+    leading?: Snippet;
+    /** Drawn inside the field, after the text. */
+    trailing?: Snippet;
+    /** With `type="password"`: a button that shows the password as text, and hides it again. On by default; `false` leaves it out. */
+    revealable?: boolean;
+    /** Accessible name of that button, the same in both states. */
+    revealLabel?: string;
+    oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    'aria-label'?: string;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
 export interface InputEvents {
@@ -61,9 +190,36 @@ export interface InputEvents {
         event: FocusEvent;
     };
 }
-export interface CheckboxProps {
+export interface CheckboxProps extends Omit<HTMLInputAttributes, 'class' | 'id' | 'name' | 'value' | 'disabled' | 'checked' | 'type' | 'onchange'> {
+    id?: string;
+    name?: string;
+    value?: string;
     checked?: boolean;
+    defaultChecked?: boolean;
     disabled?: boolean;
+    loading?: boolean;
+    label?: string;
+    /**
+     * Drawn inside the one label, between the box and the label text. A
+     * leading image should have an empty alt: the label names the row.
+     */
+    leading?: Snippet;
+    /** A line under the label, inside it, tied to the box with `aria-describedby`; not part of the name. */
+    description?: string;
+    /** Where the box sits in the row: `end` puts it last, at the far edge. */
+    controlPosition?: 'start' | 'end';
+    variant?: SemanticVariant;
+    /** Status text under the control. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the control, read out with it. */
+    hint?: string;
+    /** An error under the control: an alert, tied to the input; a checkbox also gets `aria-invalid`. It wins over `variant` and `message`. */
+    error?: string;
+    onchange?: (event: Event) => void;
+    /** Same as `onchange`; both are called. */
+    onChange?: (event: Event) => void;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
 export interface CheckboxEvents {
@@ -72,31 +228,147 @@ export interface CheckboxEvents {
         event: Event;
     };
 }
-export interface SelectProps {
-    options: Array<{
-        value: string;
+export interface SelectProps extends Omit<HTMLButtonAttributes, 'class' | 'value' | 'name' | 'disabled' | 'type' | 'onchange' | 'onclick' | 'aria-describedby' | 'children'> {
+    /** Id of the trigger. Omit to auto-generate. */
+    id?: string;
+    options?: Array<{
+        value: string | number;
         label: string;
+        disabled?: boolean;
+        lang?: string;
     }>;
-    value?: string;
+    value?: string | number | undefined;
     searchable?: boolean;
     searchPlaceholder?: string;
     maxMenuHeight?: string;
     menuWidth?: string;
+    /** `auto` (the default): a BottomSheet on a phone, under the field elsewhere. */
+    presentation?: "auto" | "popover" | "sheet" | "native";
+    /** In a sheet, a short list (up to six options) without a search field gets a sheet as tall as the list. Default `true`; `false` keeps the half-height sheet. */
+    sheetFit?: boolean;
+    /** The component's own texts; see `SelectStrings`. The single-text props win over it. */
+    strings?: Partial<import("../components/util/select.js").SelectStrings>;
     noResultsText?: string;
+    isLoading?: boolean;
+    loadingText?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateActionLabel?: string;
+    onEmptyStateAction?: () => void;
+    placeholder?: string;
+    label?: string;
+    /** When set, a hidden input submits the selected value with native forms. */
+    name?: string;
+    required?: boolean;
     disabled?: boolean;
+    size?: SizeVariant;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    'aria-describedby'?: string | null;
+    onchange?: (event: Event) => void;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
+export interface PickerFieldProps extends Omit<HTMLButtonAttributes, 'class' | 'value' | 'name' | 'disabled' | 'type' | 'onclick' | 'aria-describedby' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'children'> {
+    /** Id of the control. Omit to auto-generate. */
+    id?: string;
+    /** The label above the field. It is part of the control's name. */
+    label?: string;
+    /** The text of what is chosen. It is display text; `formValue` is what a form sends. */
+    value?: string;
+    /** Shown in the placeholder colour while there is no `value`. */
+    placeholder?: string;
+    /** An icon or an avatar before the text. */
+    leading?: Snippet;
+    /** Replaces the chevron at the end: a calendar or a clock, say. It is decoration, so it should be `aria-hidden`. */
+    trailing?: Snippet;
+    /** Replaces the value text, for rich content. The control is still named by `value`, so give that too. */
+    children?: Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field, announced. A button cannot take `aria-invalid`, so the error is the error edge colour and the described-by message; it wins over `variant` and `message`. */
+    error?: string;
+    /** What the control opens: `aria-haspopup`. Default `"dialog"`. Not put on a link. */
+    haspopup?: 'dialog' | 'listbox' | 'menu' | 'true';
+    /** Whether what it opens is open now: `aria-expanded`, and the chevron turns. Leave it out and neither is set. Not put on a link. */
+    expanded?: boolean;
+    /** Id of what it opens: `aria-controls`. */
+    controls?: string;
+    /** Makes the control a link to this address, which works without scripts: a page that does the picking. With scripts, `onclick` may call `preventDefault()` and open a sheet instead. */
+    href?: string;
+    /** With `href`: where the link opens. */
+    target?: HTMLAnchorAttributes['target'];
+    /** With `href`: the link's relationship, such as `noopener`. */
+    rel?: HTMLAnchorAttributes['rel'];
+    /** The name a hidden input submits `formValue` under. Without it there is no hidden input. */
+    name?: string;
+    /** What the form submits for the choice, such as an id. */
+    formValue?: string;
+    /** The inner `<button>` (or `<a>`). Bindable: the app focuses it when its sheet closes, so a keyboard user is back where they were. */
+    element?: HTMLButtonElement | HTMLAnchorElement | null;
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    'aria-describedby'?: string | null;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+}
 export interface SelectEvents {
     change: {
         value: string;
         event: Event;
     };
 }
-export interface TextareaProps {
+export interface TextareaProps extends Omit<HTMLTextareaAttributes, 'class' | 'value' | 'id' | 'name' | 'placeholder' | 'required' | 'disabled' | 'rows' | 'oninput' | 'aria-describedby'> {
+    id?: string;
     value?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
     placeholder?: string;
+    required?: boolean;
     rows?: number;
+    /** The resize grip: `auto` (default) is vertical with a mouse and none on a touch screen. */
+    resize?: 'auto' | 'none' | 'vertical';
+    /** The field grows with its content, from `rows` up to `maxRows`. */
+    autogrow?: boolean;
+    /** The tallest an `autogrow` field gets, in rows. */
+    maxRows?: number;
     disabled?: boolean;
+    loading?: boolean;
+    size?: SizeVariant;
+    variant?: SemanticVariant;
+    /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
+    /** A character count under the field. It needs `maxlength`, and is part of the field's description. */
+    count?: boolean;
+    /** The count is shown from this many characters on. `0` (default): always. */
+    countFrom?: number;
+    /** The words of the count. Default: "12 / 2000". */
+    countText?: (count: {
+        length: number;
+        max: number;
+        remaining: number;
+    }) => string;
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    'aria-describedby'?: string | null;
+    oninput?: (event: Event) => void;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
 export interface TextareaEvents {
@@ -109,38 +381,221 @@ export interface TextareaEvents {
         event: Event;
     };
 }
-export interface ModalProps {
-    open?: boolean;
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title' | 'role' | 'onclick' | 'onkeydown' | 'onclose' | 'children'> {
+    /** Open state. Bindable. */
+    isOpen?: boolean;
     title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    role?: 'dialog' | 'alertdialog';
+    showClose?: boolean;
+    closeLabel?: string;
+    /** CSS selector, inside the panel, of the control that takes focus on open. */
+    initialFocus?: string;
+    /** Render the overlay in `document.body`. */
+    portal?: boolean;
+    /** When false, Escape, a backdrop click and the close button do not close the modal. */
+    dismissible?: boolean;
+    /** Fills the screen: `true` at every width, `'mobile'` below 768px only. */
+    fullScreen?: boolean | 'mobile';
+    onclose?: (detail: {
+        reason: 'escape' | 'backdrop' | 'close-button';
+    }) => void;
+    /** @deprecated for close reporting: use `onclose`. Still called on close. */
+    onclick?: (event: Event) => void;
+    onkeydown?: (event: Event) => void;
+    'data-testid'?: string;
+    class?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    /** @deprecated never accepted by the component; use `isOpen`. */
+    open?: boolean;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
 export interface ModalEvents {
 }
 export interface AlertProps {
-    type?: 'success' | 'error' | 'warning' | 'info';
-    message: string;
+    variant?: ExtendedSemanticVariant | 'brand';
+    title?: string;
+    message?: string;
+    closable?: boolean;
+    /** Accessible name of the dismiss button a `closable` alert has. */
+    closeLabel?: string;
+    /** Visible state. Bindable. */
+    open?: boolean;
+    /** Shrink to content instead of filling the container. */
+    inline?: boolean;
+    /** Draws the tinted edge (default `true`). `false` keeps the 1px and makes it transparent; `--zabi-alert-border-width: 0px` on any ancestor removes it for every alert under it. */
+    bordered?: boolean;
+    onclick?: (event: Event) => void;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
+    children?: Snippet;
+    /** @deprecated never accepted by the component; use `variant`. */
+    type?: 'success' | 'error' | 'warning' | 'info';
 }
-export interface BadgeProps {
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+export interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** The figure, shown as given. */
+    value: string | number;
+    label?: string;
+    /** Drawn after the value, smaller, on the same baseline. */
+    unit?: string;
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center' | 'end';
+    labelPosition?: 'below' | 'above';
+    class?: string;
+    /** Replaces `value` for a figure that needs markup. */
+    children?: Snippet;
+}
+export interface SpeechBubbleProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** The caption that names the quotation; a `figcaption`. A snippet for the app's own text style. */
+    label?: string | Snippet;
+    /** Keeps the caption for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    /** The side the tail is on; follows the text direction. */
+    side?: 'end' | 'start';
+    /** `ink` (default) or `paper`; `--zabi-bubble-fill` and `--zabi-bubble-text` win over both. */
+    tone?: 'ink' | 'paper';
+    /** A drawing on the top corner of the tail's side, hidden from assistive technology. */
+    decoration?: Snippet;
+    class?: string;
+    /** The quoted text. */
+    children?: Snippet;
+}
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: BadgeVariant;
+    size?: SizeVariant;
+    emphasis?: 'subtle' | 'solid';
+    /** Draws the family's edge on a subtle badge. Default `false`. */
+    bordered?: boolean;
+    /** Label text. Ignored when `children` is provided. */
     text?: string;
+    showIcon?: boolean;
+    class?: string;
+    children?: Snippet;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
+export interface ChipProps extends Omit<HTMLButtonAttributes, 'class' | 'type' | 'value' | 'onchange' | 'children'> {
+    /** Makes the chip a link to this address, which works without scripts. */
+    href?: string;
+    target?: HTMLAnchorAttributes['target'];
+    rel?: HTMLAnchorAttributes['rel'];
+    download?: HTMLAnchorAttributes['download'];
+    hreflang?: HTMLAnchorAttributes['hreflang'];
+    /** With `href`: what `aria-current` says while `selected`. Default `"true"`. */
+    current?: 'page' | 'true' | 'step' | 'location' | 'date' | 'time';
+    /** `checkbox` or `radio`: a real input under the chip. `submit` or `button`: a button that does not toggle (`selected` is drawn and said with `aria-pressed`, the app decides it). Without it (and without `href`) the chip is a toggle button. */
+    type?: 'checkbox' | 'radio' | 'submit' | 'button';
+    name?: string;
+    value?: string;
+    /** The chip is chosen. Bindable. */
+    selected?: boolean;
+    required?: boolean;
+    form?: string;
+    /** 28, 32 or 40px tall. Default `md`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** An icon or an avatar before the label. */
+    leading?: Snippet;
+    /** A check icon before the label while selected. On for a checkbox and a toggle button, off for a link and a radio. */
+    checkmark?: boolean;
+    /** A button chip (`submit`, `button` or the toggle) while its action is on its way: `aria-busy` and `aria-disabled`, a spinner, the press swallowed, width and focus kept. Ignored by a link and by `checkbox` / `radio`. */
+    loading?: boolean;
+    /** Called with the new `selected` when a person changes it. */
+    onchange?: (selected: boolean) => void;
+    class?: string;
+    children?: Snippet;
+}
+export interface ChipGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onchange' | 'children'> {
+    class?: string;
+    /** `wrap` (default) or `row`: one line that scrolls sideways. */
+    layout?: 'wrap' | 'row';
+    /** The group's accessible name. Not shown unless `showLabel`. */
+    label?: string;
+    showLabel?: boolean;
+    /** `radio` or `checkbox`: the chips are inputs sharing this group's `name` and `value`. */
+    type?: 'radio' | 'checkbox';
+    name?: string;
+    /** Bindable: a string (or `undefined`) for `radio`, an array of strings for `checkbox`. */
+    value?: string | string[] | undefined;
+    disabled?: boolean;
+    /** With `layout="row"`: `fade` (default) or `none`. */
+    edge?: 'fade' | 'none';
+    /** With `layout="row"`: bring the chosen chip into view on load. Default `true`. */
+    scrollSelectedIntoView?: boolean;
+    onchange?: (value: string | string[] | undefined) => void;
+    children?: Snippet;
+}
 export interface ProgressProps {
     value?: number;
     max?: number;
+    /** Bar height: 4, 8, 12 and 16px. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Draws `max` separate segments (a whole number from 2 to 24), `value` of them filled; any other `max` draws the continuous bar. */
+    segmented?: boolean;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<ProgressStrings>;
+    label?: string;
+    /** Names the progressbar when there is no visible `label`. */
+    'aria-label'?: string;
+    /** Points the progressbar at another element's id for its name. */
+    'aria-labelledby'?: string;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
-export interface SkeletonProps {
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role' | 'aria-busy' | 'aria-hidden'> {
     variant?: 'text' | 'circle' | 'block';
     width?: string | number;
     height?: string | number;
     class?: string;
     'aria-label'?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<SkeletonStrings>;
+    /** No role, no label, hidden from assistive tech. */
+    decorative?: boolean;
+    /** "on-color" is for a brand, accent or fill block. */
+    tone?: 'neutral' | 'on-color';
+    /** Text variant only: this many lines (1 to 20), the last one shorter. */
+    lines?: number;
+}
+export interface SkeletonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'role' | 'aria-busy'> {
+    'aria-label'?: string;
+    strings?: Partial<SkeletonStrings>;
+    class?: string;
+    children?: Snippet;
 }
-export interface ToggleProps {
+export interface ToggleProps extends Omit<HTMLButtonAttributes, 'class' | 'id' | 'name' | 'value' | 'disabled' | 'type' | 'role' | 'onclick' | 'onchange' | 'children'> {
+    /** Omit to auto-generate. */
+    id?: string;
+    /** When set, a hidden input submits `value` with native forms while checked. */
+    name?: string;
+    value?: string;
     checked?: boolean;
     disabled?: boolean;
+    loading?: boolean;
+    label?: string;
+    /**
+     * Drawn inside the one label, between the switch and the label text. A
+     * leading image should have an empty alt: the label names the row.
+     */
+    leading?: Snippet;
+    /** A line under the label, inside it, tied to the switch with `aria-describedby`; not part of the name. */
+    description?: string;
+    /** Ids of other elements that describe the switch. The description is added after them. */
+    'aria-describedby'?: string | null;
+    /** The switch's accessible name when there is no visible `label`. */
+    'aria-label'?: string;
+    /** The id of an element of the page that names the switch. */
+    'aria-labelledby'?: string;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: (event: {
+        checked: boolean;
+    }) => void;
+    class?: string;
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
 export interface ToggleEvents {
@@ -149,23 +604,635 @@ export interface ToggleEvents {
         event: Event;
     };
 }
-export interface TooltipProps {
-    content: string;
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    content?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    disabled?: boolean;
+    /** Lay the trigger out as a full-width block. */
+    block?: boolean;
+    /** Position the bubble against the viewport, so a scrolling ancestor cannot clip it. */
+    fixed?: boolean;
+    /** Milliseconds a tooltip opened by a tap stays; `0` keeps it until it is dismissed. */
+    touchDuration?: number;
+    /** `material` (default): thick glass with body text and no arrow. `inverted`: the 8.1 dark bubble with an arrow. */
+    tone?: 'material' | 'inverted';
+    class?: string;
+    children?: Snippet;
+    /** @deprecated never accepted by the component; use `placement`. */
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /** @deprecated never accepted by the component; use `class`. */
     className?: string;
 }
+export interface BottomTabBarProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** Three to five destinations. */
+    items: BottomTabBarItem[];
+    /** The href of the active tab, or the path of the current page. Defaults to the current page. */
+    active?: string;
+    /** The tab just pressed, while its page is on its way: it takes the mark, `aria-current` stays on `active`. */
+    pending?: string;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** What a badge adds to the tab's accessible name, after the label and a comma. */
+    badgeLabel?: (count: number, item: BottomTabBarItem) => string;
+    /** Counts above this show as `99+`. */
+    badgeMax?: number;
+    /** Defaults to `fixed`, or to `static` inside an `AppShell`. */
+    position?: 'fixed' | 'static';
+    /** When the bar shows the glass and the hairline: `auto` follows the scroll position, `always`, `never`. Default `auto`. */
+    scrollEdge?: 'auto' | 'always' | 'never';
+    /** Draws the bar as a rounded glass capsule inset from the screen edges. Default false. */
+    floating?: boolean;
+    class?: string;
+}
+export interface AppBarProps extends Omit<HTMLAttributes<HTMLElement>, 'class' | 'title'> {
+    /** The name of the screen, as a heading. */
+    title?: string;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Shows the back control as a link to this address. */
+    backHref?: string;
+    /** Called when the back control is activated; on its own it makes the control a button. */
+    onback?: (event: MouseEvent) => void;
+    /** Accessible name of the back control. */
+    backLabel?: string;
+    /**
+     * Hides the bar while the page scrolls down and brings it back when it scrolls up.
+     * Keyboard focus inside the bar holds it and brings it back; focus left by a tap does not.
+     */
+    collapseOnScroll?: boolean;
+    /** How many lines the title may take before it is cut. Default 1. */
+    titleLines?: 1 | 2;
+    /** Before the title, after the back control. The bar's row is on a fixed pixel scale (`--spacing: 4px`), so the bar's own controls do not grow with the text size. Size what you place here on the same scale (Tailwind numeric classes such as `size-9`, or `calc(var(--spacing) * 9)`), not in rem, or it grows at 200% text while the bar's controls do not. */
+    leading?: Snippet;
+    /** After the title. At most two icon buttons. The bar's row is on a fixed pixel scale (`--spacing: 4px`), so the bar's own controls do not grow with the text size. Size what you place here on the same scale (Tailwind numeric classes such as `size-9`, or `calc(var(--spacing) * 9)`), not in rem, or it grows at 200% text while the bar's controls do not. */
+    actions?: Snippet;
+    /** When the bar shows the glass and the hairline: `auto` follows the scroll position, `always`, `never`. Default `auto`. */
+    scrollEdge?: 'auto' | 'always' | 'never';
+    /** Draws the title large on a second row that scrolls away; the bar then shows it small. */
+    largeTitle?: boolean;
+    /** The bar's fill: the page colour, none at rest, the brand colour with on-brand content, or none with the colours of the block it sits in (`inherit`). Default `default`. */
+    tone?: 'default' | 'transparent' | 'brand' | 'inherit';
+    /** `sticky` (default), or `static` for a bar in the flow of the page. */
+    position?: 'sticky' | 'static';
+    class?: string;
+}
+export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'style'> {
+    /** The top bar, an `AppBar`. */
+    header?: Snippet;
+    /** The scrolling content, rendered in the element `contentElement` names. */
+    children?: Snippet;
+    /** The element around the content. Use `div` for a shell inside another `<main>`. */
+    contentElement?: 'main' | 'div';
+    /** The bottom bar, a `BottomTabBar`. */
+    footer?: Snippet;
+    /** Paints the shell with the page colour and the brand wash, and lets it show through the header. */
+    canvas?: boolean;
+    /** One navigation, drawn as tabs, a rail or a sidebar; `AppNavigation` is the ready-made content. */
+    navigation?: Snippet<[AppShellNavigationContext]>;
+    /** Where the `navigation` goes. `auto` (default): tabs below 48rem, a rail from 48rem, a sidebar from 64rem. */
+    navigationPlacement?: AppShellNavigationMode;
+    /** Without a `header`, no top safe-area padding on the content: it starts at the top of the screen and handles the safe area itself. */
+    flushTop?: boolean;
+    class?: string;
+    /** Added after the two custom properties the shell sets. */
+    style?: string;
+}
+export interface AppShellHeaderPartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** The part's content: an `AppBar`, a search field, filter chips, tabs. */
+    children?: Snippet;
+    /** Stays at the top under the parts that stick above it (default), or scrolls away with the content. */
+    sticky?: boolean;
+    class?: string;
+}
+export interface AppNavigationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** The destinations, as for `BottomTabBar`. */
+    items: BottomTabBarItem[];
+    /** The href of the active destination, or the path of the current page. Defaults to the current page. */
+    active?: string;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** What a count adds to the link's accessible name, after the label and a comma. */
+    badgeLabel?: (count: number, item: BottomTabBarItem) => string;
+    /** Counts above this show as `99+`. */
+    badgeMax?: number;
+    /** Draws the tab bar form as a floating capsule of glass. */
+    floating?: boolean;
+    /** Above the list in the rail and the sidebar. */
+    header?: Snippet<[{
+        placement: 'rail' | 'sidebar';
+    }]>;
+    /** Below the list in the rail and the sidebar. */
+    footer?: Snippet<[{
+        placement: 'rail' | 'sidebar';
+    }]>;
+    class?: string;
+}
+export interface CodeFieldProps extends Omit<HTMLInputAttributes, 'class' | 'size' | 'value' | 'type' | 'id' | 'name' | 'required' | 'disabled' | 'readonly' | 'maxlength' | 'oninput' | 'onblur' | 'aria-label' | 'aria-describedby'> {
+    id?: string;
+    /** The code typed so far. Bindable. */
+    value?: string;
+    /** The name the code is posted under, with or without scripts. */
+    name?: string;
+    class?: string;
+    /** Places in the code, a whole number from 1 to 12. Default 6. */
+    length?: number;
+    /** `numeric` (default): digits only. `alphanumeric` also takes letters. */
+    mode?: CodeFieldMode;
+    /** Box size: `sm` (44px tall), `md` (default) or `lg`. */
+    size?: SizeVariant;
+    /** Draws the boxes in groups with a wider gap: a number is each group's size (`4` makes 4 and 4 of 8), a list gives each group's size. Only the drawing changes; the row wraps between groups when it cannot fit. */
+    groups?: number | number[];
+    /** Names the field. Defaults to the provider's `codeField.label`, then "Verification code". */
+    label?: string;
+    /** Keeps the label for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    variant?: SemanticVariant;
+    /** Status text under the field; shown with a `success`, `warning` or `error` variant. */
+    message?: string;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field: marks it invalid and is announced; wins over `variant` and `message`. */
+    error?: string;
+    /** Called with the code when the last place is filled. It does not submit anything. */
+    oncomplete?: (value: string) => void;
+    /** Overrides for the built-in strings: label, description. */
+    strings?: Partial<CodeFieldStrings>;
+    oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    'aria-label'?: string;
+    'aria-describedby'?: string | null;
+}
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onchange' | 'aria-label' | 'aria-labelledby'> {
+    class?: string;
+    /** Stars given, or `null` for no rating. Bindable. */
+    value?: number | null;
+    max?: number;
+    /** Names the rating. Shown above the stars unless `hideLabel`. */
+    label?: string;
+    hideLabel?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** `xl` is 40px stars; `display` is a display-size compact score (`xl` as a row of stars). */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'display';
+    /** Colour of a filled star: the primary action colour, or the app's accent. */
+    tone?: 'primary' | 'accent';
+    /** Shows a score: one image with one name, and stars can be partly filled. */
+    readonly?: boolean;
+    /** Adds a clear button; pressing the selected star again never clears. */
+    clearable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    /** A read-only score: one star and the number; implies `readonly`. */
+    compact?: boolean;
+    /** An empty star: a hollow `outline` (default) or a `soft` fill. */
+    empty?: 'outline' | 'soft';
+    /** On by default when `readonly`. */
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    strings?: Partial<RatingStrings>;
+    onchange?: (value: number | null) => void;
+}
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onchange' | 'aria-label' | 'aria-labelledby'> {
+    class?: string;
+    /** Two to four choices. */
+    options: SegmentedControlOption[];
+    /** Selected value. Bindable. */
+    value?: string | undefined;
+    /** Accessible name of the group. Not shown. */
+    label?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    size?: SizeVariant;
+    /** Equal-width segments that fill the row. */
+    fullWidth?: boolean;
+    name?: string;
+    /** Look of the selected segment: a card-coloured thumb (`neutral`, default) or the solid primary fill. */
+    tone?: 'neutral' | 'primary';
+    disabled?: boolean;
+    onchange?: (value: string) => void;
+}
+export interface FloatingActionButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** What the button does. Its accessible name, and its text when `extended`. */
+    label: string;
+    /** An icon component, as `@lucide/svelte` icons are. A plus sign by default. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    /** Shows the label as text beside the icon. */
+    extended?: boolean;
+    /** Makes it a link to this address. Without it, it is a button. */
+    href?: string;
+    /** The bottom corner it sits in. `bottom-end` follows the writing direction. */
+    position?: 'bottom-end' | 'bottom-start' | 'bottom-center';
+    class?: string;
+}
+export interface StickyActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'style'> {
+    /** Accessible name. With it the bar is a group. */
+    label?: string;
+    /** When the bar shows the glass and the hairline: `auto` follows the scroll position, `always`, `never`. Default `auto`. */
+    scrollEdge?: 'auto' | 'always' | 'never';
+    class?: string;
+    /** Added after the offset and margin the bar sets while the keyboard is up. */
+    style?: string;
+    /** The main action, and at most one or two beside it. */
+    children?: Snippet;
+}
+export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title' | 'onclose' | 'onkeydown'> {
+    isOpen?: boolean;
+    /** Heading of the sheet, and its accessible name. */
+    title: string;
+    description?: string;
+    /** The heights the sheet can rest at. */
+    snapPoints?: BottomSheetSnap[];
+    /** The snap point the sheet is at. Bindable. */
+    snap?: BottomSheetSnap;
+    /** As tall as the content, up to half the screen; one resting height, the grip only drags. */
+    fit?: boolean;
+    /** With `fit`: the tallest the sheet grows before its content scrolls. */
+    fitMax?: 'half' | 'full';
+    /** Render the overlay in `document.body`; `false` renders in place. */
+    portal?: boolean;
+    /** When false, Escape, the backdrop, the close button and a swipe down do not close it. */
+    dismissible?: boolean;
+    /** Fired when the sheet closes itself, with what the user did. */
+    onclose?: (detail: {
+        reason: BottomSheetCloseReason;
+    }) => void;
+    /** Hears every keydown in the sheet, after the sheet has handled Escape. */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
+    /** Accessible name of the grip while its button takes the sheet up a step. */
+    expandLabel?: string;
+    /** Accessible name of the grip while its button takes the sheet down a step. */
+    collapseLabel?: string;
+    /** CSS selector of the control that takes focus when the sheet opens. */
+    initialFocus?: string;
+    class?: string;
+    children?: Snippet;
+    /** Pinned to the bottom of the panel, below the scrolling content. */
+    footer?: Snippet;
+}
+export interface DateFieldProps extends Omit<HTMLInputAttributes, 'class' | 'type' | 'value' | 'size' | 'min' | 'max' | 'step' | 'required' | 'disabled' | 'readonly' | 'id' | 'name'> {
+    /** Omit to auto-generate; pair with FormField's `id` when used inside FormField. */
+    id?: string;
+    /** The date as `YYYY-MM-DD`, or `""` while empty. Supports `bind:value`. */
+    value?: string;
+    /** Name the value is submitted under in a form. */
+    name?: string;
+    label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced. */
+    error?: string;
+    /** Earliest value that can be picked, in the format of `value`. */
+    min?: string;
+    /** Latest value that can be picked, in the format of `value`. */
+    max?: string;
+    /** Steps between dates that can be picked, in days. */
+    step?: number | 'any';
+    required?: boolean;
+    disabled?: boolean;
+    /** Shows the value without letting it be changed; it is still submitted. */
+    readonly?: boolean;
+    /** Height, on the scale Input and Button use. At least 44px on a touch screen. */
+    size?: SizeVariant;
+    /** Extra classes for the `<input>`. */
+    class?: string;
+    /** Language of the field, as a BCP 47 tag or a list of them. With it the field shows the value in that language and opens the library's own picker; without it, the native input. */
+    locale?: string | string[];
+    /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. */
+    format?: Intl.DateTimeFormatOptions;
+    /** With `locale`: shown in the placeholder colour while the field is empty. */
+    placeholder?: string;
+    /** With `locale`: `library` (default) opens the library's picker in a sheet; `native` opens the platform's. */
+    picker?: 'library' | 'native';
+    /** With `locale`: the words the field says; replace any of them to translate. */
+    strings?: Partial<{
+        clear: string;
+        chooseDate: string;
+    }>;
+}
+export interface TimeFieldProps extends Omit<HTMLInputAttributes, 'class' | 'type' | 'value' | 'size' | 'min' | 'max' | 'step' | 'required' | 'disabled' | 'readonly' | 'id' | 'name'> {
+    /** Omit to auto-generate; pair with FormField's `id` when used inside FormField. */
+    id?: string;
+    /** The time as 24-hour `HH:mm`, or `""` while empty. Supports `bind:value`. */
+    value?: string;
+    /** Name the value is submitted under in a form. */
+    name?: string;
+    label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced. */
+    error?: string;
+    /** Earliest value that can be picked, in the format of `value`. */
+    min?: string;
+    /** Latest value that can be picked, in the format of `value`. */
+    max?: string;
+    /** Steps between times that can be picked, in seconds. */
+    step?: number | 'any';
+    required?: boolean;
+    disabled?: boolean;
+    /** Shows the value without letting it be changed; it is still submitted. */
+    readonly?: boolean;
+    /** Height, on the scale Input and Button use. At least 44px on a touch screen. */
+    size?: SizeVariant;
+    /** Extra classes for the `<input>`. */
+    class?: string;
+    /** Language of the field, as a BCP 47 tag or a list of them. With it the field shows the value in that language and opens the library's own picker; without it, the native input. */
+    locale?: string | string[];
+    /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. */
+    format?: Intl.DateTimeFormatOptions;
+    /** With `locale`: shown in the placeholder colour while the field is empty. */
+    placeholder?: string;
+    /** With `locale`: `library` (default) opens the library's picker in a sheet; `native` opens the platform's. */
+    picker?: 'library' | 'native';
+    /** With `locale`: the words the field says; replace any of them to translate. */
+    strings?: Partial<{
+        clear: string;
+        done: string;
+        hours: string;
+        minutes: string;
+        chosenTime: string;
+        chooseTime: string;
+    }>;
+    /** With `locale`, while the field is empty: the time the columns stand at when the sheet opens, as `HH:mm`. Not chosen; `value` stays empty. Left out: now, on the step. */
+    openAt?: string;
+}
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onselect'> {
+    /** The month shown, as `YYYY-MM`. Supports `bind:month`. */
+    month?: string;
+    /** The selected day, as `YYYY-MM-DD`, or null. Supports `bind:selected`. */
+    selected?: string | null;
+    /** What happens on which day. A day shows a dot per event, three at most. */
+    events?: CalendarEvent[];
+    /** First day of the week: 0 for Sunday to 6 for Saturday. */
+    weekStartsOn?: number;
+    /**
+     * Language of the month and day names, as a BCP 47 tag. It does not translate the
+     * words the component adds ("today", "selected", ...): pass those in `strings` too.
+     */
+    locale?: string;
+    /** Earliest day that can be selected, as `YYYY-MM-DD`. */
+    min?: string;
+    /** Latest day that can be selected, as `YYYY-MM-DD`. */
+    max?: string;
+    /** Return true for a day that cannot be selected. */
+    isDateDisabled?: (date: string) => boolean;
+    /** The words the calendar says; replace any of them to translate. */
+    strings?: Partial<CalendarStrings>;
+    /** Called with the day when the user selects another one. */
+    onselect?: (date: string) => void;
+    /** Called with the month when the user moves to another one. */
+    onmonthchange?: (month: string) => void;
+    /** Extra classes for the host element. */
+    class?: string;
+}
+export interface PhotoGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label' | 'aria-labelledby' | 'onselect'> {
+    photos: Photo[];
+    /** How many columns. Left out, it follows the width of the grid: 3, 4 from 480px, 5 from 768px. */
+    columns?: number;
+    /** Shows no more than this many photos; the last tile then says how many more there are. */
+    max?: number;
+    /** Called with the photo's place in `photos` when one is opened. */
+    onopen?: (index: number) => void;
+    /** Makes a press select: `single` for one photo, `multiple` for any number. */
+    selectable?: 'single' | 'multiple';
+    /** Key of the selected photo, or `null`. Supports `bind:selected`. */
+    selected?: PhotoKey | null;
+    /** Keys of the selected photos. Supports `bind:selectedKeys`. */
+    selectedKeys?: PhotoKey[];
+    /** Called when a photo is selected or, in `multiple`, its selection is cleared. */
+    onselect?: (detail: PhotoGridSelectDetail) => void;
+    /** Puts an "Add photo" tile first and is called when it is pressed. */
+    onadd?: () => void;
+    /** Called once when a thumbnail cannot be loaded, so the page can answer with a new address. */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /** Puts a "Try again" button on each photo whose `status` is `error` and is called when it is pressed. */
+    onretry?: (photo: Photo, index: number) => void;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<PhotoGridStrings>;
+    /** Extra classes for the host element. */
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export interface PhotoViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'onclose' | 'aria-label'> {
+    photos: Photo[];
+    /** Place in `photos` of the photo that is showing. Supports `bind:index`. */
+    index?: number;
+    isOpen?: boolean;
+    /** Things to do with the photo that is showing. */
+    actions?: PhotoViewerAction[];
+    /** Render the overlay in `document.body`; `false` renders in place. */
+    portal?: boolean;
+    /** Fired when the viewer closes itself, with what the user did. */
+    onclose?: (detail: {
+        reason: PhotoViewerCloseReason;
+    }) => void;
+    /** Called once when a full image cannot be loaded, so the page can answer with a new address. */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /** Called when "Try again" is pressed, before the image is asked for again; a returned promise is waited for. */
+    onretry?: (photo: Photo, index: number) => void | Promise<void>;
+    /** Accessible name of the dialog. */
+    label?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<PhotoViewerStrings>;
+    /** Extra classes for the dialog panel. */
+    class?: string;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    class?: string;
+    /** The steps, in order: labels, or objects with a label and a description. */
+    steps: StepperItem[];
+    /**
+     * Index of the current step, counted from 0. Bindable. A value outside
+     * the steps is shown as the nearest step; the bound value is left as given.
+     */
+    current?: number;
+    /** Size of the markers and the text. */
+    size?: SizeVariant;
+    /** `auto` is compact while the Stepper itself is narrower than 30rem. */
+    layout?: StepperLayout;
+    /** Makes the completed steps buttons that go back to that step. */
+    interactive?: boolean;
+    /** Accessible name of the navigation landmark. */
+    label?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<StepperStrings>;
+    /** Called with the index of the step a press went back to. Only with `interactive`. */
+    onstepchange?: (index: number) => void;
+}
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'role' | 'aria-label'> {
+    /** The person's name: the accessible name, and where the initials come from. */
+    name: string;
+    /** Address of the picture. Without it, or when it fails to load, the initials show. */
+    src?: string;
+    /** Diameter: 24, 32 and 48px. */
+    size?: AvatarSize;
+    /** Accessible name, when it should differ from `name`. `alt=""` makes the avatar decorative. */
+    alt?: string;
+    /** Language the initials are upper-cased in. The page's own by default. */
+    locale?: string;
+    /** The picture drawn inside the circle (an inline SVG), in place of `src` and the initials. */
+    children?: Snippet;
+    class?: string;
+}
+export interface AvatarGroupProps extends Omit<HTMLAttributes<HTMLUListElement>, 'class' | 'aria-label'> {
+    /** The people, in the order they are shown. */
+    people: AvatarPerson[];
+    /** How many are shown before the rest become "+N". */
+    max?: number;
+    /** Diameter of each avatar: 24, 32 and 48px. */
+    size?: AvatarSize;
+    /** Accessible name of the list. */
+    label?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<AvatarGroupStrings>;
+    /** The language the initials are worked out in; passed to each Avatar. */
+    locale?: string;
+    class?: string;
+}
+export interface LineChartProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** The lines: a `name` and one value per x label (`null` leaves a gap). */
+    series: ChartSeries[];
+    /** The labels along the x axis, one per point. */
+    xLabels?: string[];
+    /** The bottom of the y axis. Without it, the lowest value rounded down to a tick. */
+    yMin?: number;
+    /** The top of the y axis. Without it, the highest value rounded up to a tick. */
+    yMax?: number;
+    /** `number` (default), `percent` (72 is "72 %"), or a function. */
+    yFormat?: ChartFormat;
+    /** Height of the drawing in px. */
+    height?: number;
+    /** The caption, and what the chart is called. */
+    label: string;
+    labelHidden?: boolean;
+    /** The key under the plot. Without it, shown when there is more than one series. */
+    legend?: boolean;
+    /** A marker on every point, a different shape per series. */
+    markers?: boolean;
+    /** Shows the data table under the chart. */
+    showTable?: boolean;
+    /** The heading of the table's first column. */
+    xTitle?: string;
+    locale?: string;
+    class?: string;
+    /** Stands the chart on a panel of the thick material (frosted glass). Off by default. */
+    glass?: boolean;
+}
+export interface BarChartProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** The bars, in order. */
+    data: ChartDatum[];
+    /** The colour of the bars. Without it, the first series colour. */
+    color?: ChartColor;
+    /** The top of the value axis. */
+    yMax?: number;
+    /** `number` (default), `percent` (72 is "72 %"), or a function. */
+    yFormat?: ChartFormat;
+    /** Height of the drawing in px. */
+    height?: number;
+    /** The caption, and what the chart is called. */
+    label: string;
+    labelHidden?: boolean;
+    /** Writes each value over its bar. */
+    showValues?: boolean;
+    /** Shows the data table under the chart. */
+    showTable?: boolean;
+    categoryTitle?: string;
+    valueTitle?: string;
+    locale?: string;
+    class?: string;
+    /** Stands the chart on a panel of the thick material (frosted glass). Off by default. */
+    glass?: boolean;
+}
+export interface PieChartProps extends Omit<HTMLAttributes<HTMLElement>, 'class'> {
+    /** The slices, in order, clockwise from twelve o'clock. */
+    data: ChartDatum[];
+    /** A ring, not a full disc. */
+    donut?: boolean;
+    /** `number` (default), `percent` (72 is "72 %"), or a function. */
+    format?: ChartFormat;
+    /** The widest the drawing gets, in px. */
+    size?: number;
+    /** The caption, and what the chart is called. */
+    label: string;
+    labelHidden?: boolean;
+    /** The key beside the drawing: each slice's label, value and share. */
+    legend?: boolean;
+    /** Shows the data table under the chart. */
+    showTable?: boolean;
+    categoryTitle?: string;
+    valueTitle?: string;
+    shareTitle?: string;
+    locale?: string;
+    class?: string;
+    /** What stands in the middle of the ring (`donut`): the total, or the one share that matters. */
+    center?: Snippet;
+    /** Stands the chart on a panel of the thick material (frosted glass). Off by default. */
+    glass?: boolean;
+}
+export interface SparklineProps extends Omit<SVGAttributes<SVGSVGElement>, 'class' | 'points' | 'min' | 'max' | 'color'> {
+    /** The values, in order. `null` leaves a gap. */
+    points: Array<number | null>;
+    /** What the image is called. Without it the line is decoration. */
+    label?: string;
+    /** A theme colour by name or any CSS colour. */
+    color?: ChartColor;
+    min?: number;
+    max?: number;
+    class?: string;
+}
 export type Button = ZabiComponent<ButtonProps, ButtonEvents>;
 export type Heading = ZabiComponent<HeadingProps>;
+export type Block = ZabiComponent<BlockProps>;
 export type Card = ZabiComponent<CardProps>;
 export type Input = ZabiComponent<InputProps, InputEvents>;
 export type Checkbox = ZabiComponent<CheckboxProps, CheckboxEvents>;
 export type Select = ZabiComponent<SelectProps, SelectEvents>;
+export type PickerField = ZabiComponent<PickerFieldProps>;
 export type Textarea = ZabiComponent<TextareaProps, TextareaEvents>;
 export type Modal = ZabiComponent<ModalProps, ModalEvents>;
 export type Alert = ZabiComponent<AlertProps>;
 export type Badge = ZabiComponent<BadgeProps>;
+export type Stat = ZabiComponent<StatProps>;
+export type SpeechBubble = ZabiComponent<SpeechBubbleProps>;
+export type Chip = ZabiComponent<ChipProps>;
+export type ChipGroup = ZabiComponent<ChipGroupProps>;
 export type Progress = ZabiComponent<ProgressProps>;
 export type Skeleton = ZabiComponent<SkeletonProps>;
+export type SkeletonGroup = ZabiComponent<SkeletonGroupProps>;
 export type Toggle = ZabiComponent<ToggleProps, ToggleEvents>;
 export type Tooltip = ZabiComponent<TooltipProps>;
+export type BottomTabBar = ZabiComponent<BottomTabBarProps>;
+export type AppBar = ZabiComponent<AppBarProps>;
+export type AppShell = ZabiComponent<AppShellProps>;
+export type AppNavigation = ZabiComponent<AppNavigationProps>;
+export type Rating = ZabiComponent<RatingProps>;
+export type CodeField = ZabiComponent<CodeFieldProps>;
+export type SegmentedControl = ZabiComponent<SegmentedControlProps>;
+export type FloatingActionButton = ZabiComponent<FloatingActionButtonProps>;
+export type StickyActionBar = ZabiComponent<StickyActionBarProps>;
+export type BottomSheet = ZabiComponent<BottomSheetProps>;
+export type DateField = ZabiComponent<DateFieldProps>;
+export type TimeField = ZabiComponent<TimeFieldProps>;
+export type Calendar = ZabiComponent<CalendarProps>;
+export type PhotoGrid = ZabiComponent<PhotoGridProps>;
+export type PhotoViewer = ZabiComponent<PhotoViewerProps>;
+export type Avatar = ZabiComponent<AvatarProps>;
+export type AvatarGroup = ZabiComponent<AvatarGroupProps>;
+export type LineChart = ZabiComponent<LineChartProps>;
+export type BarChart = ZabiComponent<BarChartProps>;
+export type PieChart = ZabiComponent<PieChartProps>;
+export type Sparkline = ZabiComponent<SparklineProps>;
+export type Stepper = ZabiComponent<StepperProps>;
 //# sourceMappingURL=index.d.ts.map