zabi-components 8.1.0 → 9.0.0

package/dist/atoms/Rating.svelte

@@ -4,7 +4,7 @@
     import Star from "@lucide/svelte/icons/star";
     import X from "@lucide/svelte/icons/x";
     import type { HTMLAttributes } from "svelte/elements";
-    import type { SizeVariant } from "../types/variants.js";
+    import { isDevBuild } from "../util/app-shell.js";
     import { cn } from "../util/cn.js";
     import { resetValueOf, groupBinding } from "../util/hydration.js";
     import { isRtl, radioKeyIndex } from "../util/radio-keys.js";
@@ -18,6 +18,9 @@
     } from "../util/rating.js";
     import { generateId } from "../util/ssr-safe.js";
 
+    /** Sizes of a rating. `xl` and `display` are for a large input or a compact score. */
+    type RatingSize = "sm" | "md" | "lg" | "xl" | "display";
+
     /** Other attributes (`data-*`, `id`, ...) land on the host element. */
     type Props = Omit<
         HTMLAttributes<HTMLDivElement>,
@@ -37,8 +40,12 @@
         "aria-label"?: string;
         /** Id of the element that names the rating, when there is no `label`. */
         "aria-labelledby"?: string;
-        /** Size of a star. An interactive star is a 44px target at every size. */
-        size?: SizeVariant;
+        /**
+         * Size of a star. An interactive star is a 44px target at every size.
+         * `xl` is 40px stars. `display` is a display-size score with `compact`
+         * (a 40px star and a 48px number); as a row of stars it is `xl`.
+         */
+        size?: RatingSize;
         /**
          * Colour of a filled star: the primary action colour, or the app's
          * accent (`--color-accent`). An app can also set the colours itself:
@@ -62,6 +69,22 @@
          * around it: it submits nothing and a form reset leaves it alone.
          */
         name?: string;
+        /**
+         * A score for a list, not a control: one filled star and the number
+         * ("4,0"), from the real `value` and `max`, with one accessible name
+         * ("4 of 5 stars"). Implies `readonly`: `clearable`, `name` and
+         * `onchange` are ignored, and `showValue` too (the number is the point).
+         */
+        compact?: boolean;
+        /**
+         * What an empty star looks like: a hollow `outline` (default), or a
+         * `soft` fill (no outline) in `--zabi-rating-off-fill`, falling back to
+         * `--color-control-track`. The soft fill is below 3:1 against the page
+         * by default, so it suits a rating that also has a visible label and
+         * value. `--zabi-rating-off-fill` sets the colour; it is declared
+         * nowhere, like `--zabi-rating-on`. In forced colours it is an outline.
+         */
+        empty?: "outline" | "soft";
         /** Shows the number beside the stars. On by default when `readonly`. */
         showValue?: boolean;
         /** Turns the value into text for a locale ("3,5"). At most one decimal by default. */
@@ -86,6 +109,8 @@
         clearable = false,
         disabled = false,
         name = "",
+        compact = false,
+        empty = "outline",
         showValue,
         formatValue,
         strings,
@@ -104,6 +129,13 @@
     applyDefaults();
     $effect.pre(applyDefaults);
 
+    $effect(() => {
+        if (!isDevBuild() || !compact || !(clearable || name)) return;
+        console.warn(
+            "[zabi-components] Rating: `compact` is a read-only score; `clearable` and `name` are ignored.",
+        );
+    });
+
     const baseId = generateId("rating");
     const labelId = `${baseId}-label`;
     const valueId = `${baseId}-value`;
@@ -127,6 +159,9 @@
     const shown = $derived(clampRating(value, count));
     const valueShown = $derived(showValue ?? readonly);
     const labelVisible = $derived(!!label && !hideLabel);
+    /** A row of stars has no `display` size: it is `xl`. */
+    const starSize = $derived(size === "display" ? "xl" : size);
+    const softEmpty = $derived(empty === "soft" ? "soft" : undefined);
 
     function format(current: number): string {
         return formatValue ? formatValue(current) : defaultRatingFormat(current);
@@ -214,13 +249,48 @@
     </span>
 {/snippet}
 
-{#if readonly}
+{#if compact}
+    <!-- A score: one star and the number, one image with one name as `readonly`. -->
+    <div
+        class={cn("rating inline-flex items-center", className)}
+        data-size={size}
+        data-tone={tone}
+        data-empty={softEmpty}
+        data-compact
+        data-readonly
+        role="img"
+        aria-label={ariaLabelledby
+            ? undefined
+            : [label || ariaLabel, valueLabel].filter(Boolean).join(", ")}
+        aria-labelledby={ariaLabelledby ? `${ariaLabelledby} ${valueId}` : undefined}
+        {...restProps}
+    >
+        {#if labelVisible}
+            <span class="me-2 text-sm font-medium text-label">{label}</span>
+        {/if}
+        {@render glyph(shown === null ? 0 : 1)}
+        <span
+            class={cn(
+                "rating-compact-value font-semibold tabular-nums",
+                size === "display" && "font-display font-bold",
+                shown === null ? "text-description" : "text-headline",
+            )}
+            data-rating-value
+        >
+            {shown === null ? text.noRating : valueText}
+        </span>
+        {#if ariaLabelledby}
+            <span id={valueId} class="sr-only">{valueLabel}</span>
+        {/if}
+    </div>
+{:else if readonly}
     <!-- One image with one name. Its children, the visible label and number
     included, are presentational, so nothing is read twice. -->
     <div
         class={cn("rating", className)}
-        data-size={size}
+        data-size={starSize}
         data-tone={tone}
+        data-empty={softEmpty}
         data-readonly
         role="img"
         aria-label={ariaLabelledby
@@ -249,8 +319,9 @@
 {:else}
     <div
         class={cn("rating", disabled && "opacity-50", className)}
-        data-size={size}
+        data-size={starSize}
         data-tone={tone}
+        data-empty={softEmpty}
         {...restProps}
     >
         {#if labelVisible}
@@ -371,6 +442,49 @@
         --zabi-rating-target: max(48px, var(--zabi-rating-star) + 8px);
     }
 
+    .rating[data-size="xl"] {
+        --zabi-rating-star: 2.5rem;
+        --zabi-rating-target: max(48px, var(--zabi-rating-star) + 8px);
+    }
+
+    /* A compact score: the star and the number share one size per step. */
+    .rating[data-compact] {
+        --zabi-rating-text: 1.5rem;
+        gap: 4px;
+    }
+
+    .rating[data-compact][data-size="sm"] {
+        --zabi-rating-star: 14px;
+        --zabi-rating-text: 14px;
+    }
+
+    .rating[data-compact][data-size="md"] {
+        --zabi-rating-star: 16px;
+        --zabi-rating-text: 16px;
+    }
+
+    .rating[data-compact][data-size="lg"] {
+        --zabi-rating-star: 20px;
+        --zabi-rating-text: 20px;
+    }
+
+    .rating[data-compact][data-size="xl"] {
+        --zabi-rating-star: 28px;
+        --zabi-rating-text: 30px;
+        gap: 6px;
+    }
+
+    .rating[data-compact][data-size="display"] {
+        --zabi-rating-star: 40px;
+        --zabi-rating-text: 48px;
+        gap: 6px;
+    }
+
+    .rating-compact-value {
+        font-size: var(--zabi-rating-text);
+        line-height: 1;
+    }
+
     .rating-stars {
         display: inline-flex;
         flex-wrap: wrap;
@@ -424,6 +538,12 @@
         color: var(--zabi-rating-off, var(--_rating-off));
     }
 
+    /* A soft empty star is a filled shape with no outline. */
+    .rating[data-empty="soft"] .rating-glyph :global(.rating-glyph-empty) {
+        fill: var(--zabi-rating-off-fill, var(--color-control-track));
+        stroke: none;
+    }
+
     /* Anchored at the start, so the filled part is on the right in a right-to-left layout. */
     .rating-glyph-fill {
         position: absolute;
@@ -484,6 +604,12 @@
         .rating-glyph :global(.rating-glyph-empty) {
             color: CanvasText;
         }
+
+        /* A soft star is hollow here, so it still differs from a filled one. */
+        .rating[data-empty="soft"] .rating-glyph :global(.rating-glyph-empty) {
+            fill: none;
+            stroke: CanvasText;
+        }
     }
 
     @media (prefers-reduced-motion: reduce) {

package/dist/atoms/Rating.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { SizeVariant } from "../types/variants.js";
 import { type RatingStrings } from "../util/rating.js";
+/** Sizes of a rating. `xl` and `display` are for a large input or a compact score. */
+type RatingSize = "sm" | "md" | "lg" | "xl" | "display";
 /** Other attributes (`data-*`, `id`, ...) land on the host element. */
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange" | "aria-label" | "aria-labelledby"> & {
     /** Extra classes for the host element. */
@@ -17,8 +18,12 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange" | "aria-l
     "aria-label"?: string;
     /** Id of the element that names the rating, when there is no `label`. */
     "aria-labelledby"?: string;
-    /** Size of a star. An interactive star is a 44px target at every size. */
-    size?: SizeVariant;
+    /**
+     * Size of a star. An interactive star is a 44px target at every size.
+     * `xl` is 40px stars. `display` is a display-size score with `compact`
+     * (a 40px star and a 48px number); as a row of stars it is `xl`.
+     */
+    size?: RatingSize;
     /**
      * Colour of a filled star: the primary action colour, or the app's
      * accent (`--color-accent`). An app can also set the colours itself:
@@ -42,6 +47,22 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange" | "aria-l
      * around it: it submits nothing and a form reset leaves it alone.
      */
     name?: string;
+    /**
+     * A score for a list, not a control: one filled star and the number
+     * ("4,0"), from the real `value` and `max`, with one accessible name
+     * ("4 of 5 stars"). Implies `readonly`: `clearable`, `name` and
+     * `onchange` are ignored, and `showValue` too (the number is the point).
+     */
+    compact?: boolean;
+    /**
+     * What an empty star looks like: a hollow `outline` (default), or a
+     * `soft` fill (no outline) in `--zabi-rating-off-fill`, falling back to
+     * `--color-control-track`. The soft fill is below 3:1 against the page
+     * by default, so it suits a rating that also has a visible label and
+     * value. `--zabi-rating-off-fill` sets the colour; it is declared
+     * nowhere, like `--zabi-rating-on`. In forced colours it is an outline.
+     */
+    empty?: "outline" | "soft";
     /** Shows the number beside the stars. On by default when `readonly`. */
     showValue?: boolean;
     /** Turns the value into text for a locale ("3,5"). At most one decimal by default. */

package/dist/atoms/Select.svelte

@@ -17,6 +17,7 @@
     import { generateId } from "../util/ssr-safe.js";
     import { isInsideToastRegion } from "../util/focus-utils.js";
     import { cn } from "../util/cn.js";
+    import { FIELD_CONTROL_SURFACE, fieldControlEdge, fieldControlSize } from "../util/field-control.js";
     import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
     import FieldMessages from "./FieldMessages.svelte";
 
@@ -54,6 +55,12 @@
             value: string | number;
             label: string;
             disabled?: boolean;
+            /**
+             * The language of the label, as a BCP 47 tag (`"en"`), when it is
+             * not the page's (WCAG 3.1.2). Set on the option's row, on the
+             * trigger's text while it is chosen, and on the native `<option>`.
+             */
+            lang?: string;
         }>;
         searchable?: boolean;
         /**
@@ -76,6 +83,12 @@
          * no search field, and none of the loading or empty states.
          */
         presentation?: SelectPresentation;
+        /**
+         * In a sheet, a short list (up to six options) without a search field
+         * gets a sheet as tall as the list, not half the screen. `false`
+         * keeps the half-height sheet.
+         */
+        sheetFit?: boolean;
         noResultsText?: string;
         isLoading?: boolean;
         loadingText?: string;
@@ -118,6 +131,7 @@
         maxMenuHeight = "60dvh",
         menuWidth = "100%",
         presentation = "auto",
+        sheetFit = true,
         noResultsText,
         isLoading = false,
         loadingText,
@@ -185,32 +199,12 @@
     let selectContainer: HTMLDivElement;
     let searchQuery = $state("");
 
-    // Same fixed height scale as Button, IconButton and Input (32 / 40 / 48),
-    // and the same 16px text below `sm`, so a Select beside an Input matches it.
-    const sizeClass = $derived(() => {
-        // A minimum height, so a label that wraps makes the trigger taller
-        // instead of being cut. One line is exactly 32, 40 or 48px: the
-        // padding leaves room for the line and the border inside it, and is
-        // a step smaller below `sm`, where the text is 16px on a 24px line. `native` is the same box for the native
-        // select, which is always one line.
-        if (size === "sm") return { box: "min-h-8 px-3 py-1 max-sm:py-0 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", native: "h-8 ps-3 pe-9 pointer-coarse:h-11", chevron: "end-3" };
-        if (size === "lg") return { box: "min-h-12 px-4 py-2", text: "text-base", native: "h-12 ps-4 pe-10", chevron: "end-4" };
-        return { box: "min-h-10 px-3 py-2 max-sm:py-1 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", native: "h-10 ps-3 pe-9 pointer-coarse:h-11", chevron: "end-3" };
-    });
+    const sizeClass = $derived(() => fieldControlSize(size));
 
-    const variantClass = $derived(() => {
-        return status.variant === "success"
-            ? "border-success focus-visible:border-success"
-            : status.variant === "warning"
-              ? "border-warning focus-visible:border-warning"
-              : status.variant === "error"
-                ? "border-error focus-visible:border-error"
-                : "border-input-border enabled:hover:border-input-border-hover";
-    });
+    const variantClass = $derived(() => fieldControlEdge(status.variant));
 
     /** What the trigger and the visible native select share: the field's surface, edge and states. */
-    const fieldSurface =
-        "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-150 hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text";
+    const fieldSurface = FIELD_CONTROL_SURFACE;
 
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
@@ -501,6 +495,7 @@
             <option
                 value={String(option.value)}
                 disabled={option.disabled}
+                lang={option.lang}
                 selected={isSameValue(value, option.value)}
             >
                 {option.label}
@@ -536,6 +531,7 @@
         sheetExpandLabel={text.expandLabel}
         sheetCollapseLabel={text.collapseLabel}
         sheetSnap={searchable && options.length > 6 ? "full" : "half"}
+        sheetFit={sheetFit && !searchable && options.length <= 6}
     >
         {#snippet trigger(aria)}
             <!-- A select-only combobox, as the ARIA practices describe it:
@@ -568,6 +564,7 @@
                 control to read the rest. The chevron stays in the middle of
                 the box, however many lines there are. -->
                 <span
+                    lang={isLoading || isEmpty() ? undefined : selectedOption?.lang}
                     class="min-w-0 flex-1 text-start [overflow-wrap:anywhere] {disabled
                         ? ''
                         : isLoading
@@ -586,7 +583,7 @@
                 </span>
                 <ChevronDown
                     size={20}
-                    class="shrink-0 text-description transition-transform duration-200 motion-reduce:transition-none {isOpen
+                    class="shrink-0 text-description transition-transform duration-(--duration-moderate) motion-reduce:transition-none {isOpen
                         ? 'rotate-180'
                         : ''}"
                 />
@@ -614,7 +611,7 @@
         {#snippet children()}
             <!-- `px-1` twice: the inner one is room for an option's focus
             ring inside the scrolling box, and together with the panel's
-            border they put the options 9px from its corner. -->
+            1px rim they put the options 9px from its corner. -->
             <div class="px-1 pb-2 pt-1" style:width={menuWidth} data-menu-width>
                 <div
                     class="overflow-y-auto px-1"
@@ -638,7 +635,7 @@
                                     type="button"
                                     role="option"
                                     aria-selected={isSameValue(value, option.value)}
-                                    class="focus-ring flex w-full items-center justify-start gap-2 rounded-control border-2 px-3 py-2 pointer-coarse:py-3 text-start text-sm font-medium transition-colors focus:outline-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 {isSameValue(
+                                    class="focus-ring flex w-full items-center justify-start gap-2 rounded-control border-2 px-3 py-2 pointer-coarse:py-3 text-start text-sm font-medium transition-colors focus:outline-none cursor-pointer aria-disabled:cursor-not-allowed aria-disabled:opacity-50 {isSameValue(
                                         value,
                                         option.value,
                                     )
@@ -647,6 +644,7 @@
                                           ? 'border-transparent bg-transparent text-body'
                                           : 'border-transparent bg-transparent text-body hover:bg-surface-overlay-hover active:bg-surface-active'}"
                                     aria-disabled={option.disabled ? "true" : undefined}
+                                    lang={option.lang}
                                     {...buttonRestProps}
                                     onclick={() =>
                                         handleOptionClick(option.value)}

package/dist/atoms/Select.svelte.d.ts

@@ -23,6 +23,12 @@ type Props = Omit<HTMLButtonAttributes, "class" | "value" | "name" | "disabled"
         value: string | number;
         label: string;
         disabled?: boolean;
+        /**
+         * The language of the label, as a BCP 47 tag (`"en"`), when it is
+         * not the page's (WCAG 3.1.2). Set on the option's row, on the
+         * trigger's text while it is chosen, and on the native `<option>`.
+         */
+        lang?: string;
     }>;
     searchable?: boolean;
     /**
@@ -45,6 +51,12 @@ type Props = Omit<HTMLButtonAttributes, "class" | "value" | "name" | "disabled"
      * no search field, and none of the loading or empty states.
      */
     presentation?: SelectPresentation;
+    /**
+     * In a sheet, a short list (up to six options) without a search field
+     * gets a sheet as tall as the list, not half the screen. `false`
+     * keeps the half-height sheet.
+     */
+    sheetFit?: boolean;
     noResultsText?: string;
     isLoading?: boolean;
     loadingText?: string;

package/dist/atoms/SelectionControl.svelte

@@ -4,6 +4,9 @@
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
     import { groupBinding } from "../util/hydration.js";
+    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import type { SemanticVariant } from "../types/variants.js";
+    import FieldMessages from "./FieldMessages.svelte";
     import {
         SELECTION_CONTROL_INPUT,
         SELECTION_CONTROL_LABEL_ROW,
@@ -39,6 +42,30 @@
         onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
         mark?: Snippet<[SelectionControlMarkProps]>;
+        /**
+         * Drawn inside the one label, between the control and the label text,
+         * as decoration for the name `label` already gives. A leading image
+         * should have an empty alt: the label names the row.
+         */
+        leading?: Snippet;
+        /**
+         * A line under the label, tied to the input with `aria-describedby`.
+         * It is not part of the name: the label names the control.
+         */
+        description?: string;
+        /**
+         * Where the control sits in the row. `end` puts it after the leading,
+         * the label and the description, at the far edge; the row is still
+         * one label and fills the width it is given.
+         */
+        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. It marks the input invalid and is announced; it wins over `variant` and `message`. */
+        error?: string;
     };
 
     let {
@@ -56,6 +83,13 @@
         onChange,
         onchange,
         mark,
+        leading,
+        description,
+        controlPosition = "start",
+        variant = "default",
+        message = "",
+        hint = "",
+        error = "",
         ...restProps
     }: Props = $props();
 
@@ -75,9 +109,34 @@
     const controlId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
-    const labelWrapperClasses = SELECTION_CONTROL_LABEL_ROW;
+    const descriptionId = $derived(`${controlId}-description`);
+    const status = $derived(fieldMessageState({ variant, message, hint, error }));
+    const hasFieldText = $derived(status.showMessage || status.showHint);
+    // The caller's ids, then the description, the hint and the message.
+    const describedBy = $derived(
+        fieldDescribedBy(
+            controlId,
+            status,
+            [restProps["aria-describedby"], description ? descriptionId : undefined]
+                .filter(Boolean)
+                .join(" "),
+        ),
+    );
+    // `aria-invalid` is not supported by the radio role: a radio's error is said by its description.
+    const invalid = $derived(status.variant === "error" ? "true" : undefined);
+
+    // With a description the row is two lines: the box sits at the top, as in RadioGroup.
+    // At the end the control is moved by `order`, so the markup and what a
+    // screen reader meets first are the same in both positions.
+    const controlAtEnd = $derived(controlPosition === "end");
+    const labelWrapperClasses = $derived(
+        cn(SELECTION_CONTROL_LABEL_ROW, description && "items-start", controlAtEnd && "min-w-0 flex-1"),
+    );
 
-    const controlContainerClasses = $derived(selectionControlShellClasses(shape));
+    const controlContainerClasses = $derived(
+        cn(selectionControlShellClasses(shape), description && "mt-0.5", controlAtEnd && "order-last"),
+    );
+    const labelTextClasses = $derived(controlAtEnd ? "min-w-0 flex-1" : "");
 
     const controlRingClasses = $derived(selectionControlRingOverlayClasses(shape));
 
@@ -132,7 +191,7 @@
     }
 </script>
 
-<div class={cn("flex items-center gap-2", className)}>
+{#snippet row()}
     <label for={controlId} class={labelWrapperClasses}>
         <span class={controlContainerClasses}>
             <!-- One branch per type: a binding needs a type it can read. -->
@@ -149,6 +208,8 @@
                     aria-busy={loading ? "true" : undefined}
                     onchange={handleChange}
                     {...restProps}
+                    aria-describedby={describedBy}
+                    aria-invalid={invalid ?? restProps["aria-invalid"]}
                 />
             {:else}
                 <input
@@ -163,6 +224,7 @@
                     aria-busy={loading ? "true" : undefined}
                     onchange={handleChange}
                     {...restProps}
+                    aria-describedby={describedBy}
                 />
             {/if}
             <span class={controlRingClasses}></span>
@@ -170,10 +232,41 @@
                 {@render mark({ checked: !!checked, loading, disabled: isDisabled })}
             {/if}
         </span>
-        {#if label}
-            <span class="text-sm font-medium text-label">
+        {#if leading}
+            <span class="inline-flex shrink-0 items-center">
+                {@render leading()}
+            </span>
+        {/if}
+        {#if description}
+            <span class={cn("flex flex-col gap-1", labelTextClasses)}>
+                <span class="text-sm font-medium text-label">
+                    {label}
+                </span>
+                <!-- aria-hidden keeps it out of the name; aria-describedby still reads it. -->
+                <span id={descriptionId} class="text-sm text-description" aria-hidden="true">
+                    {description}
+                </span>
+            </span>
+        {:else if label}
+            <span class={cn("text-sm font-medium text-label", labelTextClasses)}>
                 {label}
             </span>
         {/if}
     </label>
-</div>
+{/snippet}
+
+{#if hasFieldText}
+    <div class={cn("flex flex-col", className)}>
+        <div class="flex items-center gap-2">
+            {@render row()}
+        </div>
+        <!-- Under the label text: the box is 20px and the gap 8px. With the box at the end, from the row's edge. -->
+        <div class={controlAtEnd ? "" : "ps-7"}>
+            <FieldMessages fieldId={controlId} {status} {hint} gap="mt-1" />
+        </div>
+    </div>
+{:else}
+    <div class={cn("flex items-center gap-2", className)}>
+        {@render row()}
+    </div>
+{/if}

package/dist/atoms/SelectionControl.svelte.d.ts

@@ -1,5 +1,6 @@
 import { type Snippet } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
+import type { SemanticVariant } from "../types/variants.js";
 import { type SelectionControlShape } from "./selection-control.styles";
 type SelectionControlType = "checkbox" | "radio";
 export type SelectionControlMarkProps = {
@@ -23,6 +24,30 @@ type Props = Omit<HTMLInputAttributes, "class" | "id" | "name" | "value" | "disa
     onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
     mark?: Snippet<[SelectionControlMarkProps]>;
+    /**
+     * Drawn inside the one label, between the control and the label text,
+     * as decoration for the name `label` already gives. A leading image
+     * should have an empty alt: the label names the row.
+     */
+    leading?: Snippet;
+    /**
+     * A line under the label, tied to the input with `aria-describedby`.
+     * It is not part of the name: the label names the control.
+     */
+    description?: string;
+    /**
+     * Where the control sits in the row. `end` puts it after the leading,
+     * the label and the description, at the far edge; the row is still
+     * one label and fills the width it is given.
+     */
+    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. It marks the input invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
 };
 declare const SelectionControl: import("svelte").Component<Props, {}, "checked">;
 type SelectionControl = ReturnType<typeof SelectionControl>;