zabi-components 8.1.0 → 9.0.0

package/dist/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 };
 /**

package/dist/index.js

@@ -1,13 +1,21 @@
 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 { default as Textarea } from './atoms/Textarea.svelte';
+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';
@@ -24,6 +32,8 @@ 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 { default as Checkbox } from './atoms/Checkbox.svelte';
 export { default as Radio } from './atoms/Radio.svelte';
 export { default as CodeBlock } from './atoms/CodeBlock.svelte';
@@ -51,6 +61,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 { default as NavigationMenu } from './molecules/NavigationMenu.svelte';
 export { default as NavigationMenuList } from './molecules/NavigationMenuList.svelte';
@@ -83,11 +94,15 @@ export { default as PhotoViewer } from './molecules/PhotoViewer.svelte';
 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 { default as LineChart } from './molecules/LineChart.svelte';
+export { default as BarChart } from './molecules/BarChart.svelte';
+export { default as PieChart } from './molecules/PieChart.svelte';
 export { default as Stepper } from './molecules/Stepper.svelte';
 export { toastStore, pushToast, dismissToast, focusToasts, } from './molecules/toast-store.js';
 export { DEFAULT_TOASTER_STRINGS, TOAST_DURATIONS } from './util/toaster.js';
 export { DEFAULT_SELECT_STRINGS } from './util/select.js';
 export { DEFAULT_TOP_NAVBAR_STRINGS } 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 { DEFAULT_COLOR_PICKER_STRINGS, DEFAULT_COMPONENT_DEMO_STRINGS, DEFAULT_CONTACT_FORM_STRINGS, DEFAULT_PROPS_TABLE_STRINGS, } from './util/ready-made-strings.js';
 export { default as TopNavbar } from './organisms/TopNavbar.svelte';
@@ -96,6 +111,9 @@ 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';
 import { generateId } from './util/ssr-safe.js';
 export { generateId };
 /**

package/dist/map.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `zabi-components/map`: the map, apart from everything else.
+ *
+ * `MapView` needs `maplibre-gl` (the app's own dependency) and loads it when
+ * it is mounted. It is in no other entry of the package, so importing a
+ * component from `zabi-components` brings none of the map, script or CSS.
+ */
+export { default as MapView } from './molecules/MapView.svelte';
+export { MAP_FIT_MAX_ZOOM, MAP_MARKER_TAP, MAP_VIEW_STRINGS, clusterMarkers, mapViewSupported, } from './util/map-view.js';
+export type { MapInset, MapLngLat, MapMarker, MapPixel, MapPoint, MapPointKey, MapViewPosition, MapViewStatus, MapViewStrings, } from './util/map-view.js';

package/dist/map.js

@@ -0,0 +1,9 @@
+/**
+ * `zabi-components/map`: the map, apart from everything else.
+ *
+ * `MapView` needs `maplibre-gl` (the app's own dependency) and loads it when
+ * it is mounted. It is in no other entry of the package, so importing a
+ * component from `zabi-components` brings none of the map, script or CSS.
+ */
+export { default as MapView } from './molecules/MapView.svelte';
+export { MAP_FIT_MAX_ZOOM, MAP_MARKER_TAP, MAP_VIEW_STRINGS, clusterMarkers, mapViewSupported, } from './util/map-view.js';

package/dist/molecules/Alert.svelte

@@ -8,10 +8,12 @@
     import type { ExtendedSemanticVariant } from "../types/variants.js";
     import { cn } from "../util/cn.js";
     import { TOUCH_HIT_AREA } from "../util/touch-target.js";
-    type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
+    /** The shared variants plus the theme's brand tint, which only an alert has. */
+    type AlertVariant = ExtendedSemanticVariant | "brand";
+    type AlertVisualVariant = Exclude<AlertVariant, "default">;
 
     interface Props {
-        variant?: ExtendedSemanticVariant;
+        variant?: AlertVariant;
         title?: string;
         message?: string;
         closable?: boolean;
@@ -21,6 +23,15 @@
         open?: boolean;
         /** Shrink to content instead of filling the container. */
         inline?: boolean;
+        /**
+         * Draws the tinted edge. `false` makes it transparent and keeps the
+         * 1px, so the box is the same size either way. The width itself
+         * follows `--zabi-alert-border-width`, which is read through a
+         * fallback and declared nowhere: an app (or any ancestor) sets it to
+         * `0px` once and every alert under it has no edge, with no prop on
+         * each. Default `true`, the edge an alert always had.
+         */
+        bordered?: boolean;
         class?: string;
         /** @deprecated use `class` — kept so 7.x call sites keep working. */
         className?: string;
@@ -35,6 +46,7 @@
         closeLabel: closeLabelGiven,
         open = $bindable<Exclude<Props["open"], undefined>>(),
         inline = false,
+        bordered = true,
         class: classProp = "",
         className = "",
         onclick,
@@ -82,35 +94,42 @@
         neutral: "bg-neutral-subtle border-neutral-border text-neutral-text",
         energetic:
             "bg-energetic-subtle border-energetic-border text-energetic-text",
+        // The primary brand tint. The accent is the link role, guarded on
+        // this fill (as Badge's brand label is); read from the token, not
+        // `text-link`, which darkens on hover and an alert is not a link.
+        brand: "bg-action-primary-subtle border-action-primary-border text-(color:--color-link)",
     });
 
     let alertRole = $derived(
-        variant === "success" || variant === "info" ? "status" : "alert",
+        variant === "success" || variant === "info" || variant === "brand"
+            ? "status"
+            : "alert",
     );
 </script>
 
 {#snippet icon()}
     {#if visualVariant === "info"}
-        <Info size={20} aria-hidden="true" />
+        <Info size={20} strokeWidth={2.5} aria-hidden="true" />
     {:else if visualVariant === "success"}
-        <Check size={20} aria-hidden="true" />
+        <Check size={20} strokeWidth={2.5} aria-hidden="true" />
     {:else if visualVariant === "warning"}
-        <TriangleAlert size={20} aria-hidden="true" />
+        <TriangleAlert size={20} strokeWidth={2.5} aria-hidden="true" />
     {:else if visualVariant === "error"}
-        <X size={20} aria-hidden="true" />
-    {:else if visualVariant === "neutral"}
-        <Info size={20} aria-hidden="true" />
+        <X size={20} strokeWidth={2.5} aria-hidden="true" />
+    {:else if visualVariant === "neutral" || visualVariant === "brand"}
+        <Info size={20} strokeWidth={2.5} aria-hidden="true" />
     {:else}
-        <Zap size={20} aria-hidden="true" />
+        <Zap size={20} strokeWidth={2.5} aria-hidden="true" />
     {/if}
 {/snippet}
 
 {#if open}
 <div
     class={cn(
-        'relative rounded-container p-4 border',
+        'relative rounded-container p-4 border-[length:var(--zabi-alert-border-width,1px)]',
         inline ? 'inline-block' : 'block w-full',
         alertClasses[visualVariant],
+        !bordered && 'border-transparent',
         'transition-colors duration-150 motion-reduce:transition-none',
         classProp,
         className,
@@ -126,7 +145,7 @@
         the alert's corner, so the radius is the alert's less that gap. -->
         <button
             onclick={handleDismiss}
-            class="absolute end-2 top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-[calc(var(--radius-container)-0.5rem-1px)] text-description transition-colors duration-150 hover:bg-surface-hover hover:text-body active:bg-surface-active motion-reduce:transition-none focus-ring focus-ring--muted {TOUCH_HIT_AREA}"
+            class="absolute end-2 top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-[calc(var(--radius-container)-0.5rem-var(--zabi-alert-border-width,1px))] text-description transition-colors duration-150 hover:bg-surface-hover hover:text-body active:bg-surface-active motion-reduce:transition-none focus-ring focus-ring--muted {TOUCH_HIT_AREA}"
             aria-label={closeLabel}
             type="button"
         >

package/dist/molecules/Alert.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { ExtendedSemanticVariant } from "../types/variants.js";
+/** The shared variants plus the theme's brand tint, which only an alert has. */
+type AlertVariant = ExtendedSemanticVariant | "brand";
 interface Props {
-    variant?: ExtendedSemanticVariant;
+    variant?: AlertVariant;
     title?: string;
     message?: string;
     closable?: boolean;
@@ -10,6 +12,15 @@ interface Props {
     open?: boolean;
     /** Shrink to content instead of filling the container. */
     inline?: boolean;
+    /**
+     * Draws the tinted edge. `false` makes it transparent and keeps the
+     * 1px, so the box is the same size either way. The width itself
+     * follows `--zabi-alert-border-width`, which is read through a
+     * fallback and declared nowhere: an app (or any ancestor) sets it to
+     * `0px` once and every alert under it has no edge, with no prop on
+     * each. Default `true`, the edge an alert always had.
+     */
+    bordered?: boolean;
     class?: string;
     /** @deprecated use `class` — kept so 7.x call sites keep working. */
     className?: string;