zabi-components 8.1.0 → 9.0.0

package/dist/atoms/Toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { Snippet } from "svelte";
     import type { HTMLButtonAttributes } from "svelte/elements";
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
@@ -20,6 +21,20 @@
         disabled?: boolean;
         loading?: boolean;
         label?: string;
+        /**
+         * Drawn inside the one label, between the switch 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 switch with `aria-describedby`.
+         * It is inside the label, so a tap on it toggles; it does not join
+         * the name. It needs a `label`.
+         */
+        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`. With
          * neither this, `aria-labelledby` nor `label`, it is called "Toggle".
@@ -40,6 +55,9 @@
         disabled = false,
         loading = false,
         label = "",
+        leading,
+        description = "",
+        "aria-describedby": describedBy,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         onclick,
@@ -61,6 +79,8 @@
     const fallbackId = generateId("toggle");
     const toggleId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
+    const showDescription = $derived(!!description && !!label);
+    const descriptionId = $derived(`${toggleId}-description`);
 
     function handleClick(event: MouseEvent) {
         if (isDisabled) return;
@@ -72,13 +92,19 @@
 
     const toggleButtonClasses = $derived(() => {
         const base =
-            `focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:outline-none ${TOUCH_HIT_AREA}`;
+            `toggle-switch focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-(--duration-moderate) ease-standard focus:outline-none focus-visible:outline-none ${TOUCH_HIT_AREA}`;
+        // Forced colours drop the fills and the ring, so `app.css` draws the track
+        // there as a 1px edge with the thumb in a system colour (`.toggle-switch`).
         // A disabled switch has no hover or pressed fill: `:active` still matches a disabled button.
+        // The off track is a light tint whose 1px edge carries the 3:1; the
+        // edge is left off when on, where the primary fill is the boundary.
+        // The on fill wears the control veil, as a primary Button does, but
+        // not when disabled (a flat, dimmed switch).
         const colorClass = checked
-            ? "bg-action-primary hover:bg-action-primary-hover active:bg-action-primary-active"
+            ? `${isDisabled ? "" : "bg-control-gradient "}bg-action-primary hover:bg-action-primary-hover active:bg-action-primary-active`
             : isDisabled
-              ? "bg-control-track"
-              : "bg-control-track hover:bg-control-track-hover active:bg-control-track-active";
+              ? "bg-(--color-toggle-track) ring-toggle-track"
+              : "bg-toggle-track ring-toggle-track";
         const stateClass = isDisabled
             ? "opacity-50 cursor-not-allowed"
             : "cursor-pointer";
@@ -87,8 +113,8 @@
 
     const toggleThumbClasses = $derived(() => {
         const base =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow-sm transition-transform duration-200 ease-in-out flex items-center justify-center";
-        const positionClasses = checked ? "translate-x-4" : "translate-x-0";
+            "toggle-switch-thumb pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full shadow-sm transition-transform duration-(--duration-moderate) ease-spring flex items-center justify-center";
+        const positionClasses = checked ? "bg-toggle-thumb-checked translate-x-4" : "bg-toggle-thumb translate-x-0";
         return `${base} ${positionClasses}`;
     });
 </script>
@@ -96,7 +122,14 @@
 <!-- On a coarse pointer the row is 44px tall, so the switch's hit area (44px, around a
      24px switch) has room of its own: stacked 8px apart, the layer of one switch lay
      over the visible edge of the one above it and took its taps. -->
-<div class={cn("flex items-center gap-3 pointer-coarse:min-h-11", className)}>
+<div
+    class={cn(
+        "flex gap-3 pointer-coarse:min-h-11",
+        // With a description the row is two lines: the switch sits at the top.
+        showDescription ? "items-start pointer-coarse:py-3" : "items-center",
+        className,
+    )}
+>
     <button
         type="button"
         role="switch"
@@ -104,6 +137,7 @@
         aria-checked={checked}
         aria-label={ariaLabel ?? (label || ariaLabelledby ? undefined : "Toggle")}
         aria-labelledby={ariaLabelledby}
+        aria-describedby={[describedBy, showDescription ? descriptionId : ""].filter(Boolean).join(" ") || undefined}
         aria-busy={loading ? "true" : undefined}
         disabled={isDisabled}
         onclick={handleClick}
@@ -124,14 +158,31 @@
         <input type="hidden" {name} {value} />
     {/if}
 
-    {#if label}
+    {#if label || leading}
         <label
             for={toggleId}
-            class="text-sm font-medium text-label {isDisabled
+            class="text-sm font-medium text-label {leading
+                ? 'inline-flex items-center gap-3 '
+                : ''}{showDescription ? 'mt-0.5 ' : ''}{isDisabled
                 ? 'cursor-not-allowed opacity-50'
                 : 'cursor-pointer'}"
         >
-            {label}
+            {#if leading}
+                <span class="inline-flex shrink-0 items-center">
+                    {@render leading()}
+                </span>
+            {/if}
+            {#if showDescription}
+                <span class="flex flex-col gap-1">
+                    <span>{label}</span>
+                    <!-- aria-hidden keeps it out of the name; aria-describedby still reads it. -->
+                    <span id={descriptionId} class="font-normal text-description" aria-hidden="true">
+                        {description}
+                    </span>
+                </span>
+            {:else}
+                {label}
+            {/if}
         </label>
     {/if}
 </div>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 /** Other attributes (`data-*`, `aria-*`, ...) land on the switch, which is a `<button>`. */
 type Props = Omit<HTMLButtonAttributes, "class" | "id" | "name" | "value" | "disabled" | "type" | "role" | "onclick" | "onchange" | "children"> & {
@@ -12,6 +13,20 @@ type Props = Omit<HTMLButtonAttributes, "class" | "id" | "name" | "value" | "dis
     disabled?: boolean;
     loading?: boolean;
     label?: string;
+    /**
+     * Drawn inside the one label, between the switch 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 switch with `aria-describedby`.
+     * It is inside the label, so a tap on it toggles; it does not join
+     * the name. It needs a `label`.
+     */
+    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`. With
      * neither this, `aria-labelledby` nor `label`, it is called "Toggle".

package/dist/atoms/Tooltip.svelte

@@ -43,6 +43,13 @@
          * 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;
     };
@@ -67,6 +74,7 @@
         block = false,
         fixed = false,
         touchDuration = 0,
+        tone = "material",
         class: className = "",
         children,
         ...restProps
@@ -596,9 +604,13 @@
         <div
             bind:this={bubbleElement}
             id={tooltipId}
-            class="tooltip pointer-events-none invisible absolute z-tooltip whitespace-normal wrap-break-word rounded-control bg-tooltip-bg px-3 py-2 text-sm leading-5 text-tooltip-fg opacity-0 transition-[opacity,visibility,transform] duration-200 ease-in-out"
+            class={cn(
+                "tooltip pointer-events-none invisible absolute z-tooltip whitespace-normal wrap-break-word rounded-control px-3 py-2 text-sm leading-5 opacity-0 transition-[opacity,visibility,transform] duration-(--duration-moderate) ease-standard",
+                tone === "inverted" ? "bg-tooltip-bg text-tooltip-fg" : "material-thick text-body",
+            )}
             role="tooltip"
             aria-hidden={!isVisible}
+            data-tone={tone}
             data-visible={isVisible}
             data-parked={parked}
             data-placement={side}
@@ -747,6 +759,13 @@
         left: auto;
     }
 
+    /* The arrow is a second shape on a translucent fill: its blur edge would
+       show a seam where it meets the bubble, and HIG tooltips have none. Only
+       the inverted bubble, which is opaque, keeps it. */
+    .tooltip[data-tone="material"]::before {
+        display: none;
+    }
+
     .tooltip::before {
         content: "";
         position: absolute;

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

@@ -31,6 +31,13 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
      * 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/index.d.ts

@@ -1,13 +1,23 @@
 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';
@@ -22,10 +32,21 @@ 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';

package/dist/atoms/index.js

@@ -1,13 +1,21 @@
 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';
@@ -21,6 +29,15 @@ 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';

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

@@ -22,13 +22,22 @@ export declare const RADIO_GROUP_OPTION_LABEL_ROW: string;
  * 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 = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-base-400 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 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. */
@@ -45,12 +54,14 @@ export declare const RADIO_GROUP_CONTROL_SHELL: string;
  * 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.
+ * 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 -start-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:-top-3.5 pointer-coarse:-start-3.5 pointer-coarse:size-11";
+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-action-primary-text 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

@@ -22,19 +22,28 @@ export const RADIO_GROUP_OPTION_LABEL_ROW = `flex items-start gap-2 p-2 pointer-
  * 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 = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-base-400 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 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();
+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
@@ -47,9 +56,11 @@ export const RADIO_GROUP_CONTROL_SHELL = `${SELECTION_CONTROL_SHELL_STATE} mt-0.
  * 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.
+ * 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 -start-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:-top-3.5 pointer-coarse:-start-3.5 pointer-coarse:size-11";
+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";
@@ -58,4 +69,4 @@ export function selectionControlRingOverlayClasses(shape) {
 /** Radio row: circle overlay + `pointer-events-none` so clicks hit the input. */
 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-action-primary-text 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,13 +1,23 @@
 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';
@@ -22,10 +32,21 @@ 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';

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":"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"}
+{"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

@@ -22,13 +22,22 @@ export declare const RADIO_GROUP_OPTION_LABEL_ROW: string;
  * 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 = "group/control relative inline-flex items-center justify-center w-5 h-5 transition-all duration-200 border-2 not-has-[:disabled]:group-active:scale-95 border-base-400 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 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. */
@@ -45,13 +54,15 @@ export declare const RADIO_GROUP_CONTROL_SHELL: string;
  * 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.
+ * 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 -start-0.5 m-0 size-5 cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed pointer-coarse:-top-3.5 pointer-coarse:-start-3.5 pointer-coarse:size-11";
+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-action-primary-text 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;;;;;;GAMG;AACH,eAAO,MAAM,gCAAgC,QACqE,CAAC;AAEnH,eAAO,MAAM,2BAA2B,QAAgE,CAAC;AAEzG,sGAAsG;AACtG,eAAO,MAAM,4BAA4B,QACuG,CAAC;AAEjJ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,6BAA6B,koBACylB,CAAC;AAEpoB,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;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,uBAAuB,0LACuJ,CAAC;AAE5L,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,iIAC4F,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"}

package/dist/components/index.d.ts

@@ -1,13 +1,23 @@
 export { default as Toggle } from './atoms/Toggle.svelte';
 export { default as Badge } from './atoms/Badge.svelte';
+export { default as Stat } from './atoms/Stat.svelte';
+export { default as SpeechBubble } from './atoms/SpeechBubble.svelte';
+export { default as Sparkline } from './atoms/Sparkline.svelte';
+export { default as Chip } from './atoms/Chip.svelte';
 export { default as Button } from './atoms/Button.svelte';
 export { default as IconButton } from './atoms/IconButton.svelte';
+export { default as Block } from './atoms/Block.svelte';
 export { default as Card } from './atoms/Card.svelte';
 export { default as CardHeader } from './atoms/CardHeader.svelte';
 export { default as CardContent } from './atoms/CardContent.svelte';
 export { default as CardFooter } from './atoms/CardFooter.svelte';
 export { default as Input } from './atoms/Input.svelte';
+export { default as CodeField } from './atoms/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 './atoms/Textarea.svelte';
+export type { TextareaCount } from './util/field.js';
+export { default as PickerField } from './atoms/PickerField.svelte';
 export { default as Select } from './atoms/Select.svelte';
 export { default as Slider } from './atoms/Slider.svelte';
 export { default as ColorPicker } from './atoms/ColorPicker.svelte';
@@ -25,6 +35,9 @@ export { default as Toast } from './atoms/Toast.svelte';
 export { default as Tooltip } from './atoms/Tooltip.svelte';
 export { default as Progress } from './atoms/Progress.svelte';
 export { default as Skeleton } from './atoms/Skeleton.svelte';
+export { default as SkeletonGroup } from './atoms/SkeletonGroup.svelte';
+export { DEFAULT_SKELETON_STRINGS } from './util/skeleton.js';
+export type { SkeletonStrings } from './util/skeleton.js';
 export { default as Checkbox } from './atoms/Checkbox.svelte';
 export { default as Radio } from './atoms/Radio.svelte';
 export { default as CodeBlock } from './atoms/CodeBlock.svelte';
@@ -33,6 +46,7 @@ export { default as OptimizedImage } from './atoms/OptimizedImage.svelte';
 export { default as ActionPanel } from './atoms/ActionPanel.svelte';
 export { default as Spinner } from './atoms/Spinner.svelte';
 export { default as Rating } from './atoms/Rating.svelte';
+export type { ProgressStrings } from './util/progress.js';
 export type { RatingStrings } from './util/rating.js';
 export { default as FloatingActionButton } from './atoms/FloatingActionButton.svelte';
 export { default as DateField } from './atoms/DateField.svelte';
@@ -55,6 +69,7 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as RadioGroup } from './molecules/RadioGroup.svelte';
+export { default as ChipGroup } from './molecules/ChipGroup.svelte';
 export { default as SegmentedControl } from './molecules/SegmentedControl.svelte';
 export type { SegmentedControlIcon, SegmentedControlOption, } from './util/segmented-control.js';
 export { default as NavigationMenu } from './molecules/NavigationMenu.svelte';
@@ -94,20 +109,25 @@ export { default as Calendar } from './molecules/Calendar.svelte';
 export type { CalendarEvent, CalendarStrings, CalendarTone, } from './util/calendar.js';
 export { default as PhotoGrid } from './molecules/PhotoGrid.svelte';
 export { default as PhotoViewer } from './molecules/PhotoViewer.svelte';
-export type { Photo, PhotoGridSelectDetail, PhotoGridStrings, PhotoKey, PhotoViewerAction, PhotoViewerCloseReason, PhotoViewerStrings, } from './util/photo.js';
+export type { Photo, PhotoGridSelectDetail, PhotoGridStrings, PhotoKey, PhotoStatus, PhotoViewerAction, PhotoViewerCloseReason, PhotoViewerStrings, } from './util/photo.js';
 export { default as Avatar } from './atoms/Avatar.svelte';
 export { default as AvatarGroup } from './molecules/AvatarGroup.svelte';
 export { DEFAULT_AVATAR_GROUP_STRINGS } from './util/avatar.js';
 export type { AvatarGroupStrings, AvatarPerson, AvatarSize } from './util/avatar.js';
+export { default as LineChart } from './molecules/LineChart.svelte';
+export { default as BarChart } from './molecules/BarChart.svelte';
+export { default as PieChart } from './molecules/PieChart.svelte';
+export type { ChartColor, ChartColorName, ChartDatum, ChartFormat, ChartSeries, } from './util/chart.js';
 export { default as Stepper } from './molecules/Stepper.svelte';
 export type { StepperItem, StepperLayout, StepperStep, StepperStepState, StepperStrings, } from './util/stepper.js';
 export { toastStore, pushToast, dismissToast, focusToasts, type ToastItem, type ToastAction, type ToastLevel, } from './molecules/toast-store.js';
 export { DEFAULT_TOASTER_STRINGS, TOAST_DURATIONS } from './util/toaster.js';
-export type { ToasterStrings, ToastPauseChange, ToastDuration } from './util/toaster.js';
+export type { ToasterStrings, ToasterMode, ToastPauseChange, ToastDuration } from './util/toaster.js';
 export { DEFAULT_SELECT_STRINGS } from './util/select.js';
 export type { SelectStrings, SelectPresentation } from './util/select.js';
 export { DEFAULT_TOP_NAVBAR_STRINGS } from './util/top-navbar.js';
-export type { TopNavbarStrings } from './util/top-navbar.js';
+export type { TopNavbarStrings, TopNavbarPlace } from './util/top-navbar.js';
+export { getTopNavbarPlace } from './util/top-navbar.js';
 export { DEFAULT_SIDEBAR_ACCOUNT_PANEL_STRINGS, DEFAULT_SIDEBAR_BRAND_HEADER_STRINGS, DEFAULT_SIDEBAR_FOOTER_STRINGS, DEFAULT_SIDEBAR_NAVIGATION_STRINGS, } from './util/sidebar.js';
 export type { SidebarAccountPanelStrings, SidebarBrandHeaderStrings, SidebarFooterStrings, SidebarNavigationStrings, } from './util/sidebar.js';
 export { DEFAULT_COLOR_PICKER_STRINGS, DEFAULT_COMPONENT_DEMO_STRINGS, DEFAULT_CONTACT_FORM_STRINGS, DEFAULT_PROPS_TABLE_STRINGS, } from './util/ready-made-strings.js';
@@ -118,6 +138,10 @@ export { default as SidebarShell } from './organisms/SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './organisms/SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export { default as AppShell } from './organisms/AppShell.svelte';
+export { default as AppShellHeaderPart } from './organisms/AppShellHeaderPart.svelte';
+export { default as AppNavigation } from './organisms/AppNavigation.svelte';
+export { APP_SHELL_RAIL_MIN_WIDTH, APP_SHELL_SIDEBAR_MIN_WIDTH, } from './util/app-shell.js';
+export type { AppShellNavigationContext, AppShellNavigationMode, AppShellNavigationPlacement, } from './util/app-shell.js';
 import { generateId } from './util/ssr-safe.js';
 export { generateId };
 /**