zabi-components 7.0.2 → 8.1.0

package/dist/index.d.ts

@@ -9,11 +9,14 @@ export { default as CardFooter } from './atoms/CardFooter.svelte';
 export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.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';
@@ -28,20 +31,32 @@ 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 { 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 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,12 +68,63 @@ 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, 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 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 { 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 { 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 declare const generateId: (prefix?: string) => string;
+export { default as AppShell } from './organisms/AppShell.svelte';
+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>;
@@ -68,4 +134,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

@@ -9,11 +9,13 @@ export { default as CardFooter } from './atoms/CardFooter.svelte';
 export { default as Input } from './atoms/Input.svelte';
 export { default as Textarea } from './atoms/Textarea.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';
@@ -28,20 +30,28 @@ 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 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,17 +63,46 @@ 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 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 { 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 const generateId = (prefix = 'id') => {
-    if (typeof window !== 'undefined') {
-        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    return `${prefix}-ssr-${Date.now()}`;
-};
+export { default as AppShell } from './organisms/AppShell.svelte';
+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) => {
@@ -89,4 +128,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/molecules/Alert.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
+    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";
+    import { TOUCH_HIT_AREA } from "../util/touch-target.js";
     type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
@@ -7,6 +15,14 @@
         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;
+        class?: string;
+        /** @deprecated use `class` — kept so 7.x call sites keep working. */
         className?: string;
         onclick?: (event: Event) => void;
     }
@@ -16,13 +32,33 @@
         title = "",
         message = "",
         closable = false,
+        closeLabel: closeLabelGiven,
+        open = $bindable<Exclude<Props["open"], undefined>>(),
+        inline = false,
+        class: classProp = "",
         className = "",
         onclick,
         children,
         ...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) {
             onclick(event);
         }
@@ -32,13 +68,20 @@
         variant === "default" ? "info" : variant,
     );
 
+    /**
+     * A tinted fill plus a tinted edge, not a bare 1px outline on a
+     * transparent ground — an outline-only alert on a light page barely
+     * registers, and the pale warning and citron borders were close to
+     * invisible. The icon carries the family colour at its `-text` step.
+     */
     let alertClasses = $derived({
-        info: "text-info border border-info",
-        success: "text-success border border-success",
-        warning: "text-warning border border-warning",
-        error: "text-error border border-error",
-        neutral: "text-neutral border border-neutral",
-        energetic: "text-energetic border border-energetic",
+        info: "bg-info-subtle border-info-border text-info-text",
+        success: "bg-success-subtle border-success-border text-success-text",
+        warning: "bg-warning-subtle border-warning-border text-warning-text",
+        error: "bg-error-subtle border-error-border text-error-text",
+        neutral: "bg-neutral-subtle border-neutral-border text-neutral-text",
+        energetic:
+            "bg-energetic-subtle border-energetic-border text-energetic-text",
     });
 
     let alertRole = $derived(
@@ -48,87 +91,50 @@
 
 {#snippet icon()}
     {#if visualVariant === "info"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else if visualVariant === "success"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Check size={20} aria-hidden="true" />
     {:else if visualVariant === "warning"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <TriangleAlert size={20} aria-hidden="true" />
     {:else if visualVariant === "error"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <X size={20} aria-hidden="true" />
     {:else if visualVariant === "neutral"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M11 3L4 14h6l-1 7 7-11h-6l1-7z" />
-        </svg>
+        <Zap size={20} aria-hidden="true" />
     {/if}
 {/snippet}
 
+{#if open}
 <div
-    class="relative rounded-md p-4 border {alertClasses[
-        visualVariant
-    ]} transition-all duration-200 motion-reduce:transition-none {className}"
+    class={cn(
+        'relative rounded-container p-4 border',
+        inline ? 'inline-block' : 'block w-full',
+        alertClasses[visualVariant],
+        'transition-colors duration-150 motion-reduce:transition-none',
+        classProp,
+        className,
+    )}
     role={alertRole}
-    aria-live={visualVariant === "success" || visualVariant === "info"
-        ? "polite"
-        : "assertive"}
     aria-atomic="true"
     {...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="group absolute right-2 top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-description transition-colors duration-200 hover:text-body motion-reduce:transition-none focus-ring"
-            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-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"
         >
-            <svg
-                class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                />
-            </svg>
+            <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>
@@ -148,3 +154,4 @@
         </div>
     </div>
 </div>
+{/if}

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

@@ -4,12 +4,20 @@ interface Props {
     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;
+    class?: string;
+    /** @deprecated use `class` — kept so 7.x call sites keep working. */
     className?: string;
     onclick?: (event: Event) => void;
 }
 type $$ComponentProps = Props & {
     children?: any;
 };
-declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;