zabi-components 8.0.0 → 9.0.0

package/dist/index.d.ts

@@ -1,19 +1,32 @@
 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';
 export { default as List } from './atoms/List.svelte';
 export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
+export { DEFAULT_THEME_STORAGE_KEY, THEME_MODES, getStoredThemeMode, getThemeMode, isThemeDark, isThemeMode, setThemeMode, storeThemeMode, themeInitScript, } from './util/theme-mode.js';
+export type { SetThemeModeOptions, ThemeMode, ThemeToggleLabels } from './util/theme-mode.js';
 export { default as Divider } from './atoms/Divider.svelte';
 export { default as Container } from './atoms/Container.svelte';
 export { default as Text } from './atoms/Text.svelte';
@@ -22,26 +35,43 @@ 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';
 export { default as FeatureCard } from './atoms/FeatureCard.svelte';
 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';
+export { default as TimeField } from './atoms/TimeField.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
 export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
 export { default as ContactForm } from './molecules/ContactForm.svelte';
 export { default as Dropdown } from './molecules/Dropdown.svelte';
+export { default as DropdownItem } from './molecules/DropdownItem.svelte';
+export type { DropdownItemIcon, DropdownItemTone, DropdownOption, } from './util/dropdown.js';
 export { default as Form } from './molecules/Form.svelte';
 export { default as FormField } from './molecules/FormField.svelte';
 export { default as Header } from './molecules/Header.svelte';
 export { default as EmptyState } from './molecules/EmptyState.svelte';
 export { default as Toaster } from './molecules/Toaster.svelte';
 export { default as ImageUpload } from './molecules/ImageUpload.svelte';
+export { default as MediaGrid } from './molecules/MediaGrid.svelte';
+export type { MediaGridItemType, MediaGridKey, MediaGridSelectDetail, MediaGridStrings, } from './util/media-grid.js';
 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';
 export { default as NavigationMenuList } from './molecules/NavigationMenuList.svelte';
 export { default as NavigationMenuItem } from './molecules/NavigationMenuItem.svelte';
@@ -53,14 +83,72 @@ export { default as Section } from './molecules/Section.svelte';
 export { default as SidebarBrandHeader } from './molecules/SidebarBrandHeader.svelte';
 export { default as SidebarFooter } from './molecules/SidebarFooter.svelte';
 export { default as SidebarNavSection } from './molecules/SidebarNavSection.svelte';
-export { toastStore, pushToast, dismissToast, type ToastItem, type ToastLevel, } from './molecules/toast-store.js';
+export { default as SortableList } from './molecules/SortableList.svelte';
+export type { SortableListAnnouncement, SortableListReorderDetail, SortableListRow, SortableListStrings, } from './util/sortable-list.js';
+export { default as Collapsible } from './molecules/Collapsible.svelte';
+export { default as SwipeableListItem } from './molecules/SwipeableListItem.svelte';
+export { DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS } from './util/swipeable-list-item.js';
+export type { SwipeableListItemAction, SwipeableListItemStrings } from './util/swipeable-list-item.js';
+export { default as PullToRefresh } from './molecules/PullToRefresh.svelte';
+export { DEFAULT_PULL_TO_REFRESH_STRINGS } from './util/pull-to-refresh.js';
+export type { PullToRefreshStrings } from './util/pull-to-refresh.js';
+export { default as CollapsibleGroup } from './molecules/CollapsibleGroup.svelte';
+export type { CollapsibleHeadingLevel, CollapsibleTriggerProps, CollapsibleTriggerState, } from './util/collapsible.js';
+export { default as ConfirmDialog } from './molecules/ConfirmDialog.svelte';
+export type { ConfirmDialogCancelReason, ConfirmDialogResult, ConfirmDialogVariant, } from './util/confirm-dialog.js';
+export { default as Drawer } from './molecules/Drawer.svelte';
+export type { DrawerCloseReason, DrawerSide, DrawerSize, } from './util/drawer.js';
+export { default as UnsavedChangesBar } from './molecules/UnsavedChangesBar.svelte';
+export { default as AppBar } from './molecules/AppBar.svelte';
+export { default as BottomTabBar } from './molecules/BottomTabBar.svelte';
+export type { BottomTabBarIcon, BottomTabBarItem, } from './util/bottom-tab-bar.js';
+export { default as BottomSheet } from './molecules/BottomSheet.svelte';
+export type { BottomSheetCloseReason, BottomSheetSnap, } from './util/bottom-sheet.js';
+export { default as StickyActionBar } from './molecules/StickyActionBar.svelte';
+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, 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, 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, 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';
+export type { ColorPickerStrings, ComponentDemoStrings, ContactFormStrings, PropsTableStrings, } from './util/ready-made-strings.js';
 export { default as TopNavbar } from './organisms/TopNavbar.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
 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 };
+/**
+ * Dates and times for reading, in the page's language: what a DateField or a
+ * TimeField holds (`2026-10-06`, `19:00`) as "6 okt. 2026" and "19:00".
+ */
+export { formatDate, formatTime } from './util/date.js';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, unknown>;
@@ -70,4 +158,18 @@ export declare const isBrowser: () => boolean;
 export declare const safeWindow: () => Window | undefined;
 export declare const safeDocument: () => Document | undefined;
 export declare const safeLocalStorage: () => Storage | undefined;
-export { Sun, Moon, Monitor, Grip, GripVertical, ChevronUp, ChevronDown, ChevronRight, Zap, Briefcase, Clipboard, Settings, } from '@lucide/svelte';
+export { default as Sun } from '@lucide/svelte/icons/sun';
+export { default as Moon } from '@lucide/svelte/icons/moon';
+export { default as Monitor } from '@lucide/svelte/icons/monitor';
+export { default as Grip } from '@lucide/svelte/icons/grip';
+export { default as GripVertical } from '@lucide/svelte/icons/grip-vertical';
+export { default as ChevronUp } from '@lucide/svelte/icons/chevron-up';
+export { default as ChevronDown } from '@lucide/svelte/icons/chevron-down';
+export { default as ChevronRight } from '@lucide/svelte/icons/chevron-right';
+export { default as Zap } from '@lucide/svelte/icons/zap';
+export { default as Briefcase } from '@lucide/svelte/icons/briefcase';
+export { default as Clipboard } from '@lucide/svelte/icons/clipboard';
+export { default as Settings } from '@lucide/svelte/icons/settings';
+export { default as ZabiStringsProvider } from './atoms/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/index.js

@@ -1,19 +1,29 @@
 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';
 export { default as List } from './atoms/List.svelte';
 export { default as ListItem } from './atoms/ListItem.svelte';
 export { default as Heading } from './atoms/Heading.svelte';
 export { default as ThemeToggle } from './atoms/ThemeToggle.svelte';
+export { DEFAULT_THEME_STORAGE_KEY, THEME_MODES, getStoredThemeMode, getThemeMode, isThemeDark, isThemeMode, setThemeMode, storeThemeMode, themeInitScript, } from './util/theme-mode.js';
 export { default as Divider } from './atoms/Divider.svelte';
 export { default as Container } from './atoms/Container.svelte';
 export { default as Text } from './atoms/Text.svelte';
@@ -22,26 +32,37 @@ 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';
 export { default as FeatureCard } from './atoms/FeatureCard.svelte';
 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 { default as FloatingActionButton } from './atoms/FloatingActionButton.svelte';
+export { default as DateField } from './atoms/DateField.svelte';
+export { default as TimeField } from './atoms/TimeField.svelte';
 export { default as Alert } from './molecules/Alert.svelte';
 export { default as ComponentDemo } from './molecules/ComponentDemo.svelte';
 export { default as ContactForm } from './molecules/ContactForm.svelte';
 export { default as Dropdown } from './molecules/Dropdown.svelte';
+export { default as DropdownItem } from './molecules/DropdownItem.svelte';
 export { default as Form } from './molecules/Form.svelte';
 export { default as FormField } from './molecules/FormField.svelte';
 export { default as Header } from './molecules/Header.svelte';
 export { default as EmptyState } from './molecules/EmptyState.svelte';
 export { default as Toaster } from './molecules/Toaster.svelte';
 export { default as ImageUpload } from './molecules/ImageUpload.svelte';
+export { default as MediaGrid } from './molecules/MediaGrid.svelte';
 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';
 export { default as NavigationMenuItem } from './molecules/NavigationMenuItem.svelte';
@@ -53,14 +74,53 @@ export { default as Section } from './molecules/Section.svelte';
 export { default as SidebarBrandHeader } from './molecules/SidebarBrandHeader.svelte';
 export { default as SidebarFooter } from './molecules/SidebarFooter.svelte';
 export { default as SidebarNavSection } from './molecules/SidebarNavSection.svelte';
-export { toastStore, pushToast, dismissToast, } from './molecules/toast-store.js';
+export { default as SortableList } from './molecules/SortableList.svelte';
+export { default as Collapsible } from './molecules/Collapsible.svelte';
+export { default as SwipeableListItem } from './molecules/SwipeableListItem.svelte';
+export { DEFAULT_SWIPEABLE_LIST_ITEM_STRINGS } from './util/swipeable-list-item.js';
+export { default as PullToRefresh } from './molecules/PullToRefresh.svelte';
+export { DEFAULT_PULL_TO_REFRESH_STRINGS } from './util/pull-to-refresh.js';
+export { default as CollapsibleGroup } from './molecules/CollapsibleGroup.svelte';
+export { default as ConfirmDialog } from './molecules/ConfirmDialog.svelte';
+export { default as Drawer } from './molecules/Drawer.svelte';
+export { default as UnsavedChangesBar } from './molecules/UnsavedChangesBar.svelte';
+export { default as AppBar } from './molecules/AppBar.svelte';
+export { default as BottomTabBar } from './molecules/BottomTabBar.svelte';
+export { default as BottomSheet } from './molecules/BottomSheet.svelte';
+export { default as StickyActionBar } from './molecules/StickyActionBar.svelte';
+export { default as Calendar } from './molecules/Calendar.svelte';
+export { default as PhotoGrid } from './molecules/PhotoGrid.svelte';
+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';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
 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 };
+/**
+ * Dates and times for reading, in the page's language: what a DateField or a
+ * TimeField holds (`2026-10-06`, `19:00`) as "6 okt. 2026" and "19:00".
+ */
+export { formatDate, formatTime } from './util/date.js';
 export const createId = (prefix = 'id') => generateId(prefix);
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
 export const getFormData = (form) => {
@@ -86,4 +146,17 @@ export const safeDocument = () => {
 export const safeLocalStorage = () => {
     return typeof window !== 'undefined' ? localStorage : undefined;
 };
-export { Sun, Moon, Monitor, Grip, GripVertical, ChevronUp, ChevronDown, ChevronRight, Zap, Briefcase, Clipboard, Settings, } from '@lucide/svelte';
+export { default as Sun } from '@lucide/svelte/icons/sun';
+export { default as Moon } from '@lucide/svelte/icons/moon';
+export { default as Monitor } from '@lucide/svelte/icons/monitor';
+export { default as Grip } from '@lucide/svelte/icons/grip';
+export { default as GripVertical } from '@lucide/svelte/icons/grip-vertical';
+export { default as ChevronUp } from '@lucide/svelte/icons/chevron-up';
+export { default as ChevronDown } from '@lucide/svelte/icons/chevron-down';
+export { default as ChevronRight } from '@lucide/svelte/icons/chevron-right';
+export { default as Zap } from '@lucide/svelte/icons/zap';
+export { default as Briefcase } from '@lucide/svelte/icons/briefcase';
+export { default as Clipboard } from '@lucide/svelte/icons/clipboard';
+export { default as Settings } from '@lucide/svelte/icons/settings';
+export { default as ZabiStringsProvider } from './atoms/ZabiStringsProvider.svelte';
+export { DEFAULT_ZABI_COMMON_STRINGS, getZabiStrings } from './util/zabi-strings.js';

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

@@ -1,18 +1,37 @@
 <script lang="ts">
-    import { Check, TriangleAlert, X, Info, Zap } from "@lucide/svelte";
+    import { DEFAULT_ALERT_TEXTS, zabiStringsFor } from "../util/zabi-strings.js";
+    import Check from "@lucide/svelte/icons/check";
+    import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
+    import X from "@lucide/svelte/icons/x";
+    import Info from "@lucide/svelte/icons/info";
+    import Zap from "@lucide/svelte/icons/zap";
     import type { ExtendedSemanticVariant } from "../types/variants.js";
     import { cn } from "../util/cn.js";
-    type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
+    import { TOUCH_HIT_AREA } from "../util/touch-target.js";
+    /** 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;
+        /** Accessible name of the dismiss button a `closable` alert has. */
+        closeLabel?: string;
         /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
         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;
@@ -24,8 +43,10 @@
         title = "",
         message = "",
         closable = false,
-        open = $bindable(true),
+        closeLabel: closeLabelGiven,
+        open = $bindable<Exclude<Props["open"], undefined>>(),
         inline = false,
+        bordered = true,
         class: classProp = "",
         className = "",
         onclick,
@@ -33,6 +54,21 @@
         ...restProps
     }: Props & { children?: any } = $props();
 
+    /** Each text: the prop, else the app-wide word from a `ZabiStringsProvider` above this one, else English. */
+    const provided = zabiStringsFor("alert");
+    const closeLabel = $derived(closeLabelGiven ?? provided()?.closeLabel ?? DEFAULT_ALERT_TEXTS.closeLabel);
+
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (open === undefined) open = true;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
     function handleDismiss(event: MouseEvent) {
         open = false;
         if (onclick) {
@@ -58,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,
@@ -96,17 +139,21 @@
     {...restProps}
 >
     {#if closable}
+        <!-- At the end edge (`end-2`), so it is on the left in a right-to-left
+        layout, and the text keeps clear of it on that side (`pe-8`).
+        Nested corners: 0.5rem (`end-2 top-2`) and the 1px border inside
+        the alert's corner, so the radius is the alert's less that gap. -->
         <button
             onclick={handleDismiss}
-            class="absolute right-2 top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-control text-description transition-colors duration-150 hover:bg-surface-hover hover:text-body motion-reduce:transition-none focus-ring--muted"
-            aria-label="Dismiss alert"
+            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"
         >
             <X size={16} aria-hidden="true" />
         </button>
     {/if}
 
-    <div class="flex items-start gap-3 {closable ? 'pr-8' : ''}">
+    <div class="flex items-start gap-3 {closable ? 'pe-8' : ''}">
         <div class="shrink-0 mt-0.5">
             {@render icon()}
         </div>

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

@@ -1,13 +1,26 @@
 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;
+    /** Accessible name of the dismiss button a `closable` alert has. */
+    closeLabel?: string;
     /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
     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;