zabi-components 8.0.0 → 9.0.0

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

@@ -20,6 +20,24 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
      * at the rail edge and left only the arrow showing.
      */
     fixed?: boolean;
+    /**
+     * On a touch screen a tap on the trigger opens the tooltip, and the
+     * trigger still does what it does. It stays until a second tap, a tap
+     * elsewhere, Escape, scrolling or focus leaving: the tap also puts
+     * focus on the trigger, and a tooltip that went by itself while its
+     * trigger still had focus would be gone before it was read. Give a
+     * number of milliseconds to have it close by itself after that long
+     * as well, for a button whose tooltip is in the way of what the tap
+     * did. A mouse and a keyboard are not affected.
+     */
+    touchDuration?: number;
+    /**
+     * `material` (default): the bubble is the thick glass overlay material
+     * with body text and no arrow. `inverted`: the 8.1 bubble, a dark fill
+     * with light text (`--color-tooltip-bg` / `--color-tooltip-fg`) and an
+     * arrow.
+     */
+    tone?: "material" | "inverted";
     class?: string;
     children?: Snippet;
 };

package/dist/atoms/ZabiStringsProvider.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import {
+        mergeZabiStrings,
+        outerZabiStrings,
+        provideZabiStrings,
+        type ZabiStrings,
+    } from "../util/zabi-strings.js";
+
+    /**
+     * Sets the library's own words for everything inside it: put it around
+     * the app, once, with the texts in the app's language.
+     *
+     * ```svelte
+     * <ZabiStringsProvider strings={{
+     *     common: { close: "Stäng", back: "Tillbaka" },
+     *     select: { placeholder: "Välj", searchPlaceholder: "Sök" },
+     * }}>
+     *     {@render children()}
+     * </ZabiStringsProvider>
+     * ```
+     *
+     * Each component still takes its own `strings` and single-text props,
+     * and those win. A provider inside another replaces only the words it
+     * gives. It renders nothing of its own: no element is added to the page.
+     */
+    interface Props {
+        /** One entry per component, and `common` for the words many share. See `ZabiStrings`. */
+        strings?: ZabiStrings;
+        children?: Snippet;
+    }
+
+    let { strings, children }: Props = $props();
+
+    const outer = outerZabiStrings();
+    const merged = $derived(mergeZabiStrings(outer?.current, strings));
+
+    provideZabiStrings({
+        get current() {
+            return merged;
+        },
+    });
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import { type ZabiStrings } from "../util/zabi-strings.js";
+/**
+ * Sets the library's own words for everything inside it: put it around
+ * the app, once, with the texts in the app's language.
+ *
+ * ```svelte
+ * <ZabiStringsProvider strings={{
+ *     common: { close: "Stäng", back: "Tillbaka" },
+ *     select: { placeholder: "Välj", searchPlaceholder: "Sök" },
+ * }}>
+ *     {@render children()}
+ * </ZabiStringsProvider>
+ * ```
+ *
+ * Each component still takes its own `strings` and single-text props,
+ * and those win. A provider inside another replaces only the words it
+ * gives. It renders nothing of its own: no element is added to the page.
+ */
+interface Props {
+    /** One entry per component, and `common` for the words many share. See `ZabiStrings`. */
+    strings?: ZabiStrings;
+    children?: Snippet;
+}
+declare const ZabiStringsProvider: import("svelte").Component<Props, {}, "">;
+type ZabiStringsProvider = ReturnType<typeof ZabiStringsProvider>;
+export default ZabiStringsProvider;

package/dist/atoms/index.d.ts

@@ -1,14 +1,27 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as SpeechBubble } from './SpeechBubble.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export { default as Chip } from './Chip.svelte';
 export { default as Button } from './Button.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as Block } from './Block.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
 export { default as Input } from './Input.svelte';
+export { default as CodeField } from './CodeField.svelte';
+export { DEFAULT_CODE_FIELD_STRINGS } from '../util/code-field.js';
+export type { CodeFieldMode, CodeFieldSize, CodeFieldStrings } from '../util/code-field.js';
 export { default as Textarea } from './Textarea.svelte';
+export type { TextareaCount } from '../util/field.js';
+export { default as PickerField } from './PickerField.svelte';
 export { default as Select } from './Select.svelte';
+export { DEFAULT_SELECT_STRINGS } from '../util/select.js';
+export type { SelectStrings, SelectPresentation } from '../util/select.js';
+export { default as Slider } from './Slider.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';
@@ -19,4 +32,29 @@ export { default as Divider } from './Divider.svelte';
 export { default as Container } from './Container.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Table } from './Table.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as SkeletonGroup } from './SkeletonGroup.svelte';
+export { DEFAULT_SKELETON_STRINGS } from '../util/skeleton.js';
+export type { SkeletonStrings } from '../util/skeleton.js';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as OptimizedImage } from './OptimizedImage.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
 export { default as Radio } from './Radio.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Rating } from './Rating.svelte';
+export type { ProgressStrings } from '../util/progress.js';
+export type { RatingStrings } from '../util/rating.js';
+export { default as FloatingActionButton } from './FloatingActionButton.svelte';
+export { default as DateField } from './DateField.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from '../util/avatar.js';
+export { default as TimeField } from './TimeField.svelte';
+export { DEFAULT_COLOR_PICKER_STRINGS } from '../util/ready-made-strings.js';
+export type { ColorPickerStrings } from '../util/ready-made-strings.js';
+export { default as ZabiStringsProvider } from './ZabiStringsProvider.svelte';
+export { DEFAULT_ZABI_COMMON_STRINGS, getZabiStrings } from '../util/zabi-strings.js';
+export type { ZabiStrings, ZabiCommonStrings, ZabiStringsContext, AlertTexts, CodeBlockTexts, ImageUploadTexts, ToastTexts, UnsavedChangesBarTexts } from '../util/zabi-strings.js';

package/dist/atoms/index.js

@@ -1,14 +1,24 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as SpeechBubble } from './SpeechBubble.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export { default as Chip } from './Chip.svelte';
 export { default as Button } from './Button.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as Block } from './Block.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
 export { default as Input } from './Input.svelte';
+export { default as CodeField } from './CodeField.svelte';
+export { DEFAULT_CODE_FIELD_STRINGS } from '../util/code-field.js';
 export { default as Textarea } from './Textarea.svelte';
+export { default as PickerField } from './PickerField.svelte';
 export { default as Select } from './Select.svelte';
+export { DEFAULT_SELECT_STRINGS } from '../util/select.js';
+export { default as Slider } from './Slider.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';
@@ -19,4 +29,23 @@ export { default as Divider } from './Divider.svelte';
 export { default as Container } from './Container.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Table } from './Table.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as SkeletonGroup } from './SkeletonGroup.svelte';
+export { DEFAULT_SKELETON_STRINGS } from '../util/skeleton.js';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as OptimizedImage } from './OptimizedImage.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
 export { default as Radio } from './Radio.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Rating } from './Rating.svelte';
+export { default as FloatingActionButton } from './FloatingActionButton.svelte';
+export { default as DateField } from './DateField.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as TimeField } from './TimeField.svelte';
+export { DEFAULT_COLOR_PICKER_STRINGS } from '../util/ready-made-strings.js';
+export { default as ZabiStringsProvider } from './ZabiStringsProvider.svelte';
+export { DEFAULT_ZABI_COMMON_STRINGS, getZabiStrings } from '../util/zabi-strings.js';

package/dist/atoms/selection-control.styles.d.ts

@@ -6,20 +6,62 @@
 export declare const SELECTION_CONTROL_LABEL_ROW_INTERACTION = "selection-control-label-row-interaction";
 /** With `app.css`: `:checked` ring for radio list rows. */
 export declare const SELECTION_CONTROL_OPTION_ROW = "selection-control-option-row";
-/** Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`. */
+/**
+ * Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`.
+ *
+ * On a coarse pointer the row is 44px tall and takes that room in the layout
+ * (`my-0`): with the negative margin kept, two rows 8px apart overlapped by
+ * 8px, and a tap in the overlap went to the lower one.
+ */
 export declare const SELECTION_CONTROL_LABEL_ROW_BASE: string;
 export declare const SELECTION_CONTROL_LABEL_ROW: string;
 /** Radio option row: stacked label/description; `p-2` only (no `-m-2`) so vertical gaps stay even. */
 export declare const RADIO_GROUP_OPTION_LABEL_ROW: string;
-/** Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states. */
-export declare const SELECTION_CONTROL_SHELL_STATE = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 group-active:scale-95 border-base-400 bg-transparent group-hover:border-brand-500 group-hover:bg-brand-50 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-500 has-[:checked]:group-hover:bg-brand-600 has-[:checked]:group-hover:border-brand-600 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
+/**
+ * Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states.
+ * The checked fill is the primary action fill, so a ticked box and a primary
+ * button are the same colour; it used to be a step paler (2.8:1 on the page).
+ *
+ * The unchecked edge is the only thing that says a control is here, so it is
+ * the control boundary (3:1 on every surface, both themes); it was a fixed
+ * ramp step, 2.5:1 in light and 1.9 to 2.3:1 in dark.
+ *
+ * In forced colours every fill is gone, so a ticked box would read as an
+ * unticked one. `selection-control-shell` and `selection-control-dot` are the
+ * hooks for the rules in `app.css` that draw the ticked state as a system
+ * colour pair (`Highlight` / `HighlightText`) and the disabled one in `GrayText`.
+ *
+ * The pressed dip and the hover fills are for a control that can be used.
+ * The row around a disabled input still matches `:active` and `:hover`, so
+ * without that a disabled box dipped under a finger and lit up under the
+ * mouse. The unchecked ones are limited to `not-has-[:disabled]`; the checked
+ * hover is undone by a rule with one more `has-` in it, which outweighs it.
+ */
+export declare const SELECTION_CONTROL_SHELL_STATE = "selection-control-shell group/control relative inline-flex shrink-0 items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-control-border bg-transparent not-has-[:disabled]:group-hover:border-brand-500 not-has-[:disabled]:group-hover:bg-brand-50 has-[:checked]:border-action-primary has-[:checked]:bg-action-primary has-[:checked]:group-hover:bg-action-primary-hover has-[:checked]:group-hover:border-action-primary-hover has-[:disabled]:has-[:checked]:group-hover:bg-action-primary has-[:disabled]:has-[:checked]:group-hover:border-action-primary has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
 export type SelectionControlShape = "square" | "circle";
 export declare function selectionControlShellClasses(shape: SelectionControlShape): string;
 /** Radio circle control; `mt-0.5` aligns with multi-line labels. */
 export declare const RADIO_GROUP_CONTROL_SHELL: string;
-/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). */
+/**
+ * The real input, stretched over the 20px box and transparent, so a press on
+ * the box lands on the input itself. It used to be `sr-only`: a 1px box under
+ * the ring overlay, where a click aimed at the input (a test's
+ * `getByRole("checkbox").check()`, a pointer-driven assistive tool) hit the
+ * overlay instead. Everything drawn over it lets the press through.
+ *
+ * 2px out on each side: the shell's border is outside its padding box.
+ *
+ * On a coarse pointer it is 44 by 44px, centred on the box (12px further out
+ * on each side), so the input itself is the touch target and not only the
+ * row around it. The row is 44px tall there, so the inputs of two rows never
+ * reach each other. The 44 is in px and the centring is by halves: in rem it
+ * grew with the text (88px at 200%, 34px out on each side of a 20px box, and
+ * past the screen's edge from a box at the end of a row, Z-128).
+ */
+export declare const SELECTION_CONTROL_INPUT = "absolute -top-0.5 -left-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:top-1/2 pointer-coarse:left-1/2 pointer-coarse:size-[44px] pointer-coarse:-translate-x-1/2 pointer-coarse:-translate-y-1/2";
+/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). Lets a press through to the input. */
 export declare function selectionControlRingOverlayClasses(shape: SelectionControlShape): string;
 /** Radio row: circle overlay + `pointer-events-none` so clicks hit the input. */
 export declare const RADIO_GROUP_RING_OVERLAY: string;
 /** Checked radio dot (shared with `Radio.svelte`). */
-export declare const RADIO_CHECKED_DOT_CLASSES = "absolute size-2 rounded-full bg-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";
+export declare const RADIO_CHECKED_DOT_CLASSES = "selection-control-dot absolute size-2 rounded-full bg-action-primary-text pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";

package/dist/atoms/selection-control.styles.js

@@ -6,25 +6,67 @@
 export const SELECTION_CONTROL_LABEL_ROW_INTERACTION = "selection-control-label-row-interaction";
 /** With `app.css`: `:checked` ring for radio list rows. */
 export const SELECTION_CONTROL_OPTION_ROW = "selection-control-option-row";
-/** Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`. */
-export const SELECTION_CONTROL_LABEL_ROW_BASE = `p-2 -m-2 group ${SELECTION_CONTROL_LABEL_ROW_INTERACTION}`.trim();
+/**
+ * Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`.
+ *
+ * On a coarse pointer the row is 44px tall and takes that room in the layout
+ * (`my-0`): with the negative margin kept, two rows 8px apart overlapped by
+ * 8px, and a tap in the overlap went to the lower one.
+ */
+export const SELECTION_CONTROL_LABEL_ROW_BASE = `p-2 -m-2 pointer-coarse:my-0 pointer-coarse:min-h-11 group ${SELECTION_CONTROL_LABEL_ROW_INTERACTION}`.trim();
 export const SELECTION_CONTROL_LABEL_ROW = `flex items-center gap-2 ${SELECTION_CONTROL_LABEL_ROW_BASE}`;
 /** Radio option row: stacked label/description; `p-2` only (no `-m-2`) so vertical gaps stay even. */
-export const RADIO_GROUP_OPTION_LABEL_ROW = `flex items-start gap-2 p-2 group ${SELECTION_CONTROL_LABEL_ROW_INTERACTION} ${SELECTION_CONTROL_OPTION_ROW}`.trim();
-/** Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states. */
-export const SELECTION_CONTROL_SHELL_STATE = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 group-active:scale-95 border-base-400 bg-transparent group-hover:border-brand-500 group-hover:bg-brand-50 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-500 has-[:checked]:group-hover:bg-brand-600 has-[:checked]:group-hover:border-brand-600 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
+export const RADIO_GROUP_OPTION_LABEL_ROW = `flex items-start gap-2 p-2 pointer-coarse:min-h-11 group ${SELECTION_CONTROL_LABEL_ROW_INTERACTION} ${SELECTION_CONTROL_OPTION_ROW}`.trim();
+/**
+ * Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states.
+ * The checked fill is the primary action fill, so a ticked box and a primary
+ * button are the same colour; it used to be a step paler (2.8:1 on the page).
+ *
+ * The unchecked edge is the only thing that says a control is here, so it is
+ * the control boundary (3:1 on every surface, both themes); it was a fixed
+ * ramp step, 2.5:1 in light and 1.9 to 2.3:1 in dark.
+ *
+ * In forced colours every fill is gone, so a ticked box would read as an
+ * unticked one. `selection-control-shell` and `selection-control-dot` are the
+ * hooks for the rules in `app.css` that draw the ticked state as a system
+ * colour pair (`Highlight` / `HighlightText`) and the disabled one in `GrayText`.
+ *
+ * The pressed dip and the hover fills are for a control that can be used.
+ * The row around a disabled input still matches `:active` and `:hover`, so
+ * without that a disabled box dipped under a finger and lit up under the
+ * mouse. The unchecked ones are limited to `not-has-[:disabled]`; the checked
+ * hover is undone by a rule with one more `has-` in it, which outweighs it.
+ */
+export const SELECTION_CONTROL_SHELL_STATE = "selection-control-shell group/control relative inline-flex shrink-0 items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-control-border bg-transparent not-has-[:disabled]:group-hover:border-brand-500 not-has-[:disabled]:group-hover:bg-brand-50 has-[:checked]:border-action-primary has-[:checked]:bg-action-primary has-[:checked]:group-hover:bg-action-primary-hover has-[:checked]:group-hover:border-action-primary-hover has-[:disabled]:has-[:checked]:group-hover:bg-action-primary has-[:disabled]:has-[:checked]:group-hover:border-action-primary has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
 export function selectionControlShellClasses(shape) {
     const rounding = shape === "circle" ? "rounded-full" : "rounded";
     return `${SELECTION_CONTROL_SHELL_STATE} ${rounding}`.trim();
 }
 /** Radio circle control; `mt-0.5` aligns with multi-line labels. */
-export const RADIO_GROUP_CONTROL_SHELL = `${SELECTION_CONTROL_SHELL_STATE} mt-0.5 shrink-0 rounded-full`.trim();
-/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). */
+export const RADIO_GROUP_CONTROL_SHELL = `${SELECTION_CONTROL_SHELL_STATE} mt-0.5 rounded-full`.trim();
+/**
+ * The real input, stretched over the 20px box and transparent, so a press on
+ * the box lands on the input itself. It used to be `sr-only`: a 1px box under
+ * the ring overlay, where a click aimed at the input (a test's
+ * `getByRole("checkbox").check()`, a pointer-driven assistive tool) hit the
+ * overlay instead. Everything drawn over it lets the press through.
+ *
+ * 2px out on each side: the shell's border is outside its padding box.
+ *
+ * On a coarse pointer it is 44 by 44px, centred on the box (12px further out
+ * on each side), so the input itself is the touch target and not only the
+ * row around it. The row is 44px tall there, so the inputs of two rows never
+ * reach each other. The 44 is in px and the centring is by halves: in rem it
+ * grew with the text (88px at 200%, 34px out on each side of a 20px box, and
+ * past the screen's edge from a box at the end of a row, Z-128).
+ */
+export const SELECTION_CONTROL_INPUT = "absolute -top-0.5 -left-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:top-1/2 pointer-coarse:left-1/2 pointer-coarse:size-[44px] pointer-coarse:-translate-x-1/2 pointer-coarse:-translate-y-1/2";
+/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). Lets a press through to the input. */
 export function selectionControlRingOverlayClasses(shape) {
     const rounding = shape === "circle" ? "rounded-full" : "rounded";
-    return `absolute inset-0 ${rounding}`.trim();
+    return `pointer-events-none absolute inset-0 ${rounding}`.trim();
 }
 /** Radio row: circle overlay + `pointer-events-none` so clicks hit the input. */
-export const RADIO_GROUP_RING_OVERLAY = `pointer-events-none ${selectionControlRingOverlayClasses("circle")}`;
+export const RADIO_GROUP_RING_OVERLAY = selectionControlRingOverlayClasses("circle");
 /** Checked radio dot (shared with `Radio.svelte`). */
-export const RADIO_CHECKED_DOT_CLASSES = "absolute size-2 rounded-full bg-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";
+export const RADIO_CHECKED_DOT_CLASSES = "selection-control-dot absolute size-2 rounded-full bg-action-primary-text pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";

package/dist/components/atoms/index.d.ts

@@ -1,14 +1,27 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as SpeechBubble } from './SpeechBubble.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export { default as Chip } from './Chip.svelte';
 export { default as Button } from './Button.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as Block } from './Block.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
 export { default as Input } from './Input.svelte';
+export { default as CodeField } from './CodeField.svelte';
+export { DEFAULT_CODE_FIELD_STRINGS } from '../util/code-field.js';
+export type { CodeFieldMode, CodeFieldSize, CodeFieldStrings } from '../util/code-field.js';
 export { default as Textarea } from './Textarea.svelte';
+export type { TextareaCount } from '../util/field.js';
+export { default as PickerField } from './PickerField.svelte';
 export { default as Select } from './Select.svelte';
+export { DEFAULT_SELECT_STRINGS } from '../util/select.js';
+export type { SelectStrings, SelectPresentation } from '../util/select.js';
+export { default as Slider } from './Slider.svelte';
 export { default as ColorPicker } from './ColorPicker.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';
@@ -19,5 +32,30 @@ export { default as Divider } from './Divider.svelte';
 export { default as Container } from './Container.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Table } from './Table.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as SkeletonGroup } from './SkeletonGroup.svelte';
+export { DEFAULT_SKELETON_STRINGS } from '../util/skeleton.js';
+export type { SkeletonStrings } from '../util/skeleton.js';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as OptimizedImage } from './OptimizedImage.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
 export { default as Radio } from './Radio.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Rating } from './Rating.svelte';
+export type { ProgressStrings } from '../util/progress.js';
+export type { RatingStrings } from '../util/rating.js';
+export { default as FloatingActionButton } from './FloatingActionButton.svelte';
+export { default as DateField } from './DateField.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from '../util/avatar.js';
+export { default as TimeField } from './TimeField.svelte';
+export { DEFAULT_COLOR_PICKER_STRINGS } from '../util/ready-made-strings.js';
+export type { ColorPickerStrings } from '../util/ready-made-strings.js';
+export { default as ZabiStringsProvider } from './ZabiStringsProvider.svelte';
+export { DEFAULT_ZABI_COMMON_STRINGS, getZabiStrings } from '../util/zabi-strings.js';
+export type { ZabiStrings, ZabiCommonStrings, ZabiStringsContext, AlertTexts, CodeBlockTexts, ImageUploadTexts, ToastTexts, UnsavedChangesBarTexts } from '../util/zabi-strings.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"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"}

package/dist/components/atoms/selection-control.styles.d.ts

@@ -6,21 +6,63 @@
 export declare const SELECTION_CONTROL_LABEL_ROW_INTERACTION = "selection-control-label-row-interaction";
 /** With `app.css`: `:checked` ring for radio list rows. */
 export declare const SELECTION_CONTROL_OPTION_ROW = "selection-control-option-row";
-/** Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`. */
+/**
+ * Control + label row; `p-2 -m-2` aligns hit area with text; `group` is not valid inside `@apply`.
+ *
+ * On a coarse pointer the row is 44px tall and takes that room in the layout
+ * (`my-0`): with the negative margin kept, two rows 8px apart overlapped by
+ * 8px, and a tap in the overlap went to the lower one.
+ */
 export declare const SELECTION_CONTROL_LABEL_ROW_BASE: string;
 export declare const SELECTION_CONTROL_LABEL_ROW: string;
 /** Radio option row: stacked label/description; `p-2` only (no `-m-2`) so vertical gaps stay even. */
 export declare const RADIO_GROUP_OPTION_LABEL_ROW: string;
-/** Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states. */
-export declare const SELECTION_CONTROL_SHELL_STATE = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 group-active:scale-95 border-base-400 bg-transparent group-hover:border-brand-500 group-hover:bg-brand-50 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-500 has-[:checked]:group-hover:bg-brand-600 has-[:checked]:group-hover:border-brand-600 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
+/**
+ * Control shell: border/fill/hover/checked/disabled. `group/control` drives inner mark states.
+ * The checked fill is the primary action fill, so a ticked box and a primary
+ * button are the same colour; it used to be a step paler (2.8:1 on the page).
+ *
+ * The unchecked edge is the only thing that says a control is here, so it is
+ * the control boundary (3:1 on every surface, both themes); it was a fixed
+ * ramp step, 2.5:1 in light and 1.9 to 2.3:1 in dark.
+ *
+ * In forced colours every fill is gone, so a ticked box would read as an
+ * unticked one. `selection-control-shell` and `selection-control-dot` are the
+ * hooks for the rules in `app.css` that draw the ticked state as a system
+ * colour pair (`Highlight` / `HighlightText`) and the disabled one in `GrayText`.
+ *
+ * The pressed dip and the hover fills are for a control that can be used.
+ * The row around a disabled input still matches `:active` and `:hover`, so
+ * without that a disabled box dipped under a finger and lit up under the
+ * mouse. The unchecked ones are limited to `not-has-[:disabled]`; the checked
+ * hover is undone by a rule with one more `has-` in it, which outweighs it.
+ */
+export declare const SELECTION_CONTROL_SHELL_STATE = "selection-control-shell group/control relative inline-flex shrink-0 items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-control-border bg-transparent not-has-[:disabled]:group-hover:border-brand-500 not-has-[:disabled]:group-hover:bg-brand-50 has-[:checked]:border-action-primary has-[:checked]:bg-action-primary has-[:checked]:group-hover:bg-action-primary-hover has-[:checked]:group-hover:border-action-primary-hover has-[:disabled]:has-[:checked]:group-hover:bg-action-primary has-[:disabled]:has-[:checked]:group-hover:border-action-primary has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed";
 export type SelectionControlShape = "square" | "circle";
 export declare function selectionControlShellClasses(shape: SelectionControlShape): string;
 /** Radio circle control; `mt-0.5` aligns with multi-line labels. */
 export declare const RADIO_GROUP_CONTROL_SHELL: string;
-/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). */
+/**
+ * The real input, stretched over the 20px box and transparent, so a press on
+ * the box lands on the input itself. It used to be `sr-only`: a 1px box under
+ * the ring overlay, where a click aimed at the input (a test's
+ * `getByRole("checkbox").check()`, a pointer-driven assistive tool) hit the
+ * overlay instead. Everything drawn over it lets the press through.
+ *
+ * 2px out on each side: the shell's border is outside its padding box.
+ *
+ * On a coarse pointer it is 44 by 44px, centred on the box (12px further out
+ * on each side), so the input itself is the touch target and not only the
+ * row around it. The row is 44px tall there, so the inputs of two rows never
+ * reach each other. The 44 is in px and the centring is by halves: in rem it
+ * grew with the text (88px at 200%, 34px out on each side of a 20px box, and
+ * past the screen's edge from a box at the end of a row, Z-128).
+ */
+export declare const SELECTION_CONTROL_INPUT = "absolute -top-0.5 -left-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:top-1/2 pointer-coarse:left-1/2 pointer-coarse:size-[44px] pointer-coarse:-translate-x-1/2 pointer-coarse:-translate-y-1/2";
+/** Full-bleed ring behind the mark (same geometry as SelectionControl inner ring). Lets a press through to the input. */
 export declare function selectionControlRingOverlayClasses(shape: SelectionControlShape): string;
 /** Radio row: circle overlay + `pointer-events-none` so clicks hit the input. */
 export declare const RADIO_GROUP_RING_OVERLAY: string;
 /** Checked radio dot (shared with `Radio.svelte`). */
-export declare const RADIO_CHECKED_DOT_CLASSES = "absolute size-2 rounded-full bg-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";
+export declare const RADIO_CHECKED_DOT_CLASSES = "selection-control-dot absolute size-2 rounded-full bg-action-primary-text pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100";
 //# sourceMappingURL=selection-control.styles.d.ts.map

package/dist/components/atoms/selection-control.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/selection-control.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,yEAAyE;AACzE,eAAO,MAAM,uCAAuC,4CACP,CAAC;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAE3E,uGAAuG;AACvG,eAAO,MAAM,gCAAgC,QACyB,CAAC;AAEvE,eAAO,MAAM,2BAA2B,QAAgE,CAAC;AAEzG,sGAAsG;AACtG,eAAO,MAAM,4BAA4B,QAC+E,CAAC;AAEzH,mGAAmG;AACnG,eAAO,MAAM,6BAA6B,waAC+X,CAAC;AAE1a,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAGjF;AAED,oEAAoE;AACpE,eAAO,MAAM,yBAAyB,QAAyE,CAAC;AAEhH,sFAAsF;AACtF,wBAAgB,kCAAkC,CAC9C,KAAK,EAAE,qBAAqB,GAC7B,MAAM,CAGR;AAED,iFAAiF;AACjF,eAAO,MAAM,wBAAwB,QAAwE,CAAC;AAE9G,sDAAsD;AACtD,eAAO,MAAM,yBAAyB,qHACgF,CAAC"}
+{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/selection-control.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,yEAAyE;AACzE,eAAO,MAAM,uCAAuC,4CACP,CAAC;AAE9C,2DAA2D;AAC3D,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAE3E;;;;;;GAMG;AACH,eAAO,MAAM,gCAAgC,QACqE,CAAC;AAEnH,eAAO,MAAM,2BAA2B,QAAgE,CAAC;AAEzG,sGAAsG;AACtG,eAAO,MAAM,4BAA4B,QACuG,CAAC;AAEjJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,6BAA6B,yqBACgoB,CAAC;AAE3qB,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAGjF;AAED,oEAAoE;AACpE,eAAO,MAAM,yBAAyB,QAAgE,CAAC;AAEvG;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,uBAAuB,0PACuN,CAAC;AAE5P,yHAAyH;AACzH,wBAAgB,kCAAkC,CAC9C,KAAK,EAAE,qBAAqB,GAC7B,MAAM,CAGR;AAED,iFAAiF;AACjF,eAAO,MAAM,wBAAwB,QAA+C,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,yBAAyB,uJACkH,CAAC"}