@widgetic/design-system 0.5.22 → 0.5.23

package/dist/components/shell/WidgetRow.svelte.d.ts

@@ -0,0 +1,78 @@
+export declare const widgetRowVariants: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        selected?: boolean | (string | number | symbol)[] | undefined;
+        loading?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}, {
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, undefined, "group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden", import("tailwind-variants/dist/config.js").TVConfig<{
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}, {
+    selected: {
+        true: string;
+        false: string;
+    };
+    loading: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type WidgetRowVisualState = 'default' | 'hover' | 'focus' | 'selected' | 'loading';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    meta?: string;
+    showBadge?: boolean;
+    badgeLabel?: string;
+    selected?: boolean;
+    loading?: boolean;
+    visualState?: WidgetRowVisualState;
+    /** Touch / mobile: keep row actions visible without hover. */
+    actionsAlwaysVisible?: boolean;
+    thumbnail?: Snippet;
+    actions?: Snippet;
+};
+declare const WidgetRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type WidgetRow = ReturnType<typeof WidgetRow>;
+export default WidgetRow;

package/dist/components/shell/error-state-messages.d.ts

@@ -0,0 +1,7 @@
+export interface ErrorStateMessages {
+    title: string;
+    description: string;
+    retryLabel: string;
+    supportLabel: string;
+}
+export declare const defaultErrorStateMessages: ErrorStateMessages;

package/dist/components/shell/error-state-messages.js

@@ -0,0 +1,9 @@
+// The words of the Figma Error State: the title says what failed in a few words, the description gives the likely cause
+// and what to try. "Something went wrong" stays only for a failure whose cause is not known, and a page gives that as
+// its own `messages`.
+export const defaultErrorStateMessages = {
+    title: 'We could not load your widgets',
+    description: 'Check your connection and try again.',
+    retryLabel: 'Try again',
+    supportLabel: 'Contact support'
+};

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

@@ -0,0 +1,22 @@
+export { default as NavRow, navRowVariants } from './NavRow.svelte';
+export { default as NavSectionLabel } from './NavSectionLabel.svelte';
+export { default as ProfileRow, profileRowVariants } from './ProfileRow.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarNavItem } from './Sidebar.svelte';
+export { default as WidgetRow, widgetRowVariants } from './WidgetRow.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as TopBar } from './TopBar.svelte';
+export { default as NavDrawer } from './NavDrawer.svelte';
+export { default as AppShell } from './AppShell.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { defaultErrorStateMessages, type ErrorStateMessages } from './error-state-messages.js';
+export { default as NotificationRow, type NotificationRowProps } from './NotificationRow.svelte';
+export { default as SettingsNav, type SettingsNavProps } from './SettingsNav.svelte';
+export { default as SettingsDialog, type SettingsDialogProps } from './SettingsDialog.svelte';
+export { default as Stat, type StatProps, statVariants } from './Stat.svelte';
+export { default as Banner, type BannerProps, type BannerTone, bannerVariants } from './Banner.svelte';
+export { default as Link, type LinkProps, type LinkSize, linkVariants } from './Link.svelte';
+export { type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive } from './settings-nav-types.js';
+export { externalLinkAttributes } from './link-external.js';
+export { statHintClass, type StatTone } from './stat-tone.js';
+export { type SettingsDialogMessages, defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/index.js

@@ -0,0 +1,25 @@
+// Shell components (app shell, navigation, status, settings) built from the Figma design system.
+// Each component is exported here by the agent that owns src/lib/components/shell.
+// [S1 exports]
+export { default as NavRow, navRowVariants } from './NavRow.svelte';
+export { default as NavSectionLabel } from './NavSectionLabel.svelte';
+export { default as ProfileRow, profileRowVariants } from './ProfileRow.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as WidgetRow, widgetRowVariants } from './WidgetRow.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as TopBar } from './TopBar.svelte';
+export { default as NavDrawer } from './NavDrawer.svelte';
+export { default as AppShell } from './AppShell.svelte';
+export { default as ErrorState } from './ErrorState.svelte';
+export { defaultErrorStateMessages } from './error-state-messages.js';
+// [S2 exports]
+export { default as NotificationRow } from './NotificationRow.svelte';
+export { default as SettingsNav } from './SettingsNav.svelte';
+export { default as SettingsDialog } from './SettingsDialog.svelte';
+export { default as Stat, statVariants } from './Stat.svelte';
+export { default as Banner, bannerVariants } from './Banner.svelte';
+export { default as Link, linkVariants } from './Link.svelte';
+export { settingsNavItemIsActive } from './settings-nav-types.js';
+export { externalLinkAttributes } from './link-external.js';
+export { statHintClass } from './stat-tone.js';
+export { defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/link-external.d.ts

@@ -0,0 +1,2 @@
+/** rel/target for links that open in a new tab. */
+export declare function externalLinkAttributes(): Pick<HTMLAnchorElement, 'rel' | 'target'>;

package/dist/components/shell/link-external.js

@@ -0,0 +1,7 @@
+/** rel/target for links that open in a new tab. */
+export function externalLinkAttributes() {
+    return {
+        rel: 'noopener noreferrer',
+        target: '_blank'
+    };
+}

package/dist/components/shell/messages.d.ts

@@ -0,0 +1,7 @@
+/** Footer links in SettingsDialog (Figma Settings Dialog 107:618). */
+export interface SettingsDialogMessages {
+    privacyPolicy: string;
+    termsOfService: string;
+    cookieSettings: string;
+}
+export declare const defaultSettingsDialogMessages: SettingsDialogMessages;

package/dist/components/shell/messages.js

@@ -0,0 +1,5 @@
+export const defaultSettingsDialogMessages = {
+    privacyPolicy: 'Privacy policy',
+    termsOfService: 'Terms of service',
+    cookieSettings: 'Cookie settings'
+};

package/dist/components/shell/settings-nav-types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export type SettingsNavItem = {
+    id: string;
+    label: string;
+    icon?: Snippet;
+};
+export type SettingsNavGroup = {
+    id: string;
+    label: string;
+    items: SettingsNavItem[];
+};
+export declare function settingsNavItemIsActive(activeId: string, itemId: string): boolean;

package/dist/components/shell/settings-nav-types.js

@@ -0,0 +1,3 @@
+export function settingsNavItemIsActive(activeId, itemId) {
+    return activeId === itemId;
+}

package/dist/components/shell/shell-utils.d.ts

@@ -0,0 +1,7 @@
+/** Drawer motion from Figma Responsive / appShell ledger (ms). */
+export declare function navDrawerTransitionMs(open: boolean): number;
+export declare function navDrawerTransitionEasing(open: boolean): 'var(--ease-drawer)' | 'var(--ease-out)';
+export declare function navDrawerEffectiveTransitionMs(open: boolean, reducedMotion: boolean): number;
+export declare function getFocusableElements(root: HTMLElement): HTMLElement[];
+/** Returns the next element to focus when Tab / Shift+Tab is pressed inside `root`. */
+export declare function navDrawerTabTarget(root: HTMLElement, active: HTMLElement, shiftKey: boolean): HTMLElement | null;

package/dist/components/shell/shell-utils.js

@@ -0,0 +1,27 @@
+/** Drawer motion from Figma Responsive / appShell ledger (ms). */
+export function navDrawerTransitionMs(open) {
+    return open ? 320 : 220;
+}
+export function navDrawerTransitionEasing(open) {
+    return open ? 'var(--ease-drawer)' : 'var(--ease-out)';
+}
+export function navDrawerEffectiveTransitionMs(open, reducedMotion) {
+    return reducedMotion ? 0 : navDrawerTransitionMs(open);
+}
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+export function getFocusableElements(root) {
+    return [...root.querySelectorAll(FOCUSABLE)].filter((el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true');
+}
+/** Returns the next element to focus when Tab / Shift+Tab is pressed inside `root`. */
+export function navDrawerTabTarget(root, active, shiftKey) {
+    const focusables = getFocusableElements(root);
+    if (focusables.length === 0)
+        return null;
+    const index = focusables.indexOf(active);
+    if (index === -1)
+        return focusables[0] ?? null;
+    if (shiftKey) {
+        return index === 0 ? focusables[focusables.length - 1] : focusables[index - 1];
+    }
+    return index === focusables.length - 1 ? focusables[0] : focusables[index + 1];
+}

package/dist/components/shell/stat-tone.d.ts

@@ -0,0 +1,3 @@
+export type StatTone = 'default' | 'positive' | 'negative';
+/** Hint line colour for Stat tones (Figma Stat 327:243). */
+export declare function statHintClass(tone: StatTone): string;

package/dist/components/shell/stat-tone.js

@@ -0,0 +1,11 @@
+/** Hint line colour for Stat tones (Figma Stat 327:243). */
+export function statHintClass(tone) {
+    switch (tone) {
+        case 'positive':
+            return 'text-brand-foreground';
+        case 'negative':
+            return 'text-destructive';
+        default:
+            return 'text-muted-foreground';
+    }
+}

package/dist/components/toast/ToasterModal.svelte

@@ -1,180 +1,114 @@
 <script lang="ts" module>
-// Import Toast Component from UI Folder
-import { toast, Toaster } from '../ui/sonner';
-
-// Import Icons from Icons Folder
-import Exclamation from '../../icons/Exclamation.svelte';
-import Checked from '../../icons/Checked.svelte';
-
-// Where the toasters are drawn (the page's document, or a shadow root): see ./toasterRoots.ts
-import { toastLookupRoots } from './toasterRoots';
-
-// Import Toast Types directly from the svelte-sonner module
-// import type { ToastTypes } from 'svelte-sonner';
-// Define the ToastTypes type
-type ToastTypes = 'success' | 'error' | 'warning' | 'info' | 'loading';
-
-/* COMPONENT PROPS */
-let className = '';
-export { className as class };
-export let style: string = '';
-// Default Duration
-export let defaultDuration: number = 3000;
-// root element reference
-export let element: HTMLElement | null = null;
-
-
-/* STATE VARIABLES */
-let toastMainClass = 'toast-modal';
-// Track toast visibility to prevent multiple toasts
-let isToastVisible = false;
-
-/**
- * Shows a toast notification with consistent styling and positioning
- * @param type Type of toast message (success, error, warning)
- * @param title Main message text
- * @param options Additional options including description
- */
-export function showToast(type: string = 'success', title: string, options: any = null) {
-  
-
-  // Prevent multiple toasts from appearing simultaneously
-  // if (isToastVisible) return;
-  
-  // Set the toast visibility to true
-  isToastVisible = true;
-
-  // If options is null, set it to an empty object
-  if (options === null) {
-    options = {};
-  }
-
-  // Get the duration from the options or use the default duration
-  const duration = options?.duration || defaultDuration;
-
-  // set close icon - not working !!!
-  options.closeIcon = Exclamation;
-
-  // Get the title color from the options or use the default color
-  const titleColor = type === 'success' ? '--grey7' : type === 'error' ? '--error' : '--dark';
-
-  // set icon depending on the type of toast
-  if(type === 'error') options.icon = Exclamation;
-  if(type === 'success') options.icon = Checked;
-
-  // set icon background fill color
-  if(type === 'success') options.iconBgFillColor = '--icon-success';
-  if(type === 'error')   options.iconBgFillColor = '--icon-error';
-  if(type === 'warning') options.iconBgFillColor = '--sunny-yellow';
-  // console.log('showToast:', type, title, titleColor, duration);
-
-  // set style of the data-icon element
-  setTimeout(() => {
-    // The elements are looked for in the root the toaster is drawn in: `document.querySelector` does not look inside
-    // a shadow root, so for a toaster in a module's shadow root the icon and the title kept the library's colours.
-    for (const lookupRoot of toastLookupRoots(document)) {
-      // set the close button color
-      let closeButtonElement = lookupRoot.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
-      // if(closeButtonElement) closeButtonElement.style.backgroundColor = 'hsl(var(' + options.closeBgFillColor + '))';
-
-      // set icon background fill color
-      let iconElement = lookupRoot.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
-      if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
-
-      // set the title color
-      let titleElement = lookupRoot.querySelector('.' + toastMainClass + '-title') as HTMLElement; //console.log('titleElement:', titleElement);
-      if(titleElement) titleElement.style.color = 'hsl(var(' + titleColor + '))';
-    }
-  }, 20);
-  
-  // Call toast with custom styling
-  return toast[type as ToastTypes](title, {
-    ...options,
-    duration,
-    unstyled: true,
-    onAutoClose: () => {
-      isToastVisible = false;
-    },
-    onDismiss: () => {
-      isToastVisible = false;
-    }
-  });
-} 
-
+	import { toast, Toaster } from '../ui/sonner';
+	import IconAlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconExclamationCircle from '@tabler/icons-svelte/icons/exclamation-circle';
+	import IconInfoCircle from '@tabler/icons-svelte/icons/info-circle';
+	import { toastLookupRoots } from './toasterRoots';
+
+	type ToastTypes = 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+	// Icon of each tone: the same glyphs as the Tone variants of the Toast in Figma (135:87).
+	// `info` is the Default tone of Figma. `loading` keeps the spinner of the library.
+	const toneIcons: Partial<Record<ToastTypes, typeof IconInfoCircle>> = {
+		info: IconInfoCircle,
+		success: IconCircleCheck,
+		warning: IconExclamationCircle,
+		error: IconAlertTriangle
+	};
+
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	export let defaultDuration: number = 3000;
+	export let element: HTMLElement | null = null;
+
+	let toastMainClass = 'toast-modal';
+	let isToastVisible = false;
+
+	export function showToast(
+		type: string = 'success',
+		title: string,
+		options: Record<string, unknown> | null = null
+	) {
+		isToastVisible = true;
+
+		if (options === null) {
+			options = {};
+		}
+
+		const duration = (options?.duration as number | undefined) || defaultDuration;
+
+		// Every tone has its own icon, the same one as in Figma, so a caller does not swap it.
+		const toneIcon = toneIcons[type as ToastTypes];
+		if (toneIcon) options.icon = toneIcon;
+
+		// A type the library does not know is shown as info instead of throwing, and says so once.
+		let toastKey: ToastTypes = type as ToastTypes;
+		if (typeof toast[toastKey] !== 'function') {
+			console.warn(`[showToast] Unknown toast type "${type}", showing it as info.`);
+			toastKey = 'info';
+		}
+
+		return toast[toastKey](title, {
+			...options,
+			duration,
+			unstyled: true,
+			onAutoClose: () => {
+				isToastVisible = false;
+			},
+			onDismiss: () => {
+				isToastVisible = false;
+			}
+		});
+	}
 </script>
 
 <script lang="ts">
-import { onMount } from 'svelte';
-import { registerToasterRoot } from './toasterRoots';
-import { useTextDirection } from '../textDirection.js';
+	import { onMount } from 'svelte';
+	import { registerToasterRoot } from './toasterRoots';
+	import { useTextDirection } from '../textDirection.js';
 
-/**
- * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
- * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
- * left out, the English ones of the library are used.
- */
-export let containerAriaLabel: string | undefined = undefined;
-export let closeButtonAriaLabel: string | undefined = undefined;
+	export let containerAriaLabel: string | undefined = undefined;
+	export let closeButtonAriaLabel: string | undefined = undefined;
 
-// An element with no size that is only here to ask which root (the page's document, or a shadow root) this toaster is
-// drawn in, so that `showToast` looks for the toast's icon and title there.
-let rootMarker: HTMLElement;
-onMount(() => registerToasterRoot(rootMarker.getRootNode() as Document | ShadowRoot));
+	let rootMarker: HTMLElement;
+	onMount(() => registerToasterRoot(rootMarker.getRootNode() as Document | ShadowRoot));
 
-// The toaster reads the direction of the PAGE's <html> unless it is told, and a module on a left to right page that
-// speaks Arabic (or the other way around) must follow its own screen. The toasts sit in the corner at the end of the
-// line: the right in a left to right screen, the left in a right to left one.
-const textDirection = useTextDirection();
+	const textDirection = useTextDirection();
 </script>
 
-<!-- HTML Template -->
 <span hidden bind:this={rootMarker}></span>
 <Toaster
-  theme="light"
-  dir={$textDirection}
-  position={$textDirection === 'rtl' ? 'bottom-left' : 'bottom-right'}
-  {containerAriaLabel}
-  {closeButtonAriaLabel}
-  richColors
-  closeButton
-  toastOptions={{
-    style: "box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); !important;",
-    classes: {
-      toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
-                              "!min-w-[334px] !max-w-[450px] " +
-                              "!fixed !top-auto !bottom-[20px] !end-[20px] " + 
-                              "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
-                              // Icon Styling
-                              "*:data-icon:!w-[24px] *:data-icon:!h-[24px] *:data-icon:!m-0 " + 
-                              "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
-                              // Content Styling
-                              "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
-      // Title Styling
-      title: toastMainClass + "-title body-medium",
-      // Description Styling
-      description: toastMainClass + "-description caption !text-[hsl(var(--grey5))]",
-      // Action Button Styling
-      actionButton: "",
-      // Cancel Button Styling
-      cancelButton: "",
-      // Close Button Styling
-      closeButton: toastMainClass + '-close-button !w-[16px] !h-[16px] !absolute !top-[-4px] !start-[-4px] z-10 ' + 
-                                    '!flex !items-center !justify-center ' +
-                                    '!bg-[hsl(var(--grey7))] !border !border-[hsl(var(--grey5))] !rounded-full !text-white ' +
-                                    '[&_svg]:!text-white [&_svg]:!fill-white [&_svg]:!stroke-white'
-    }
-  }}
-  expand={false}
-  visibleToasts={1}
-  offset="1rem"
+	theme="light"
+	dir={$textDirection}
+	position={$textDirection === 'rtl' ? 'bottom-left' : 'bottom-right'}
+	{containerAriaLabel}
+	{closeButtonAriaLabel}
+	closeButton
+	toastOptions={{
+		classes: {
+			toast:
+				toastMainClass +
+				' !fixed !bottom-5 !end-5 !flex !min-w-[20rem] !max-w-[22.25rem] !items-start !gap-3 !rounded-xl !border !border-border !bg-popover !p-4 !text-popover-foreground !shadow-none [&>[data-icon]]:!mt-0.5 [&>[data-icon]]:!size-4 [&>[data-icon]_svg]:!size-4 [&>[data-icon]_svg]:!stroke-[1.333]',
+			title: toastMainClass + '-title text-body-medium text-foreground',
+			description: toastMainClass + '-description text-body text-muted-foreground',
+			actionButton:
+				'!h-8 !rounded-lg !border !border-input !bg-background !px-2 !text-label !text-foreground hover:!bg-accent',
+			cancelButton: '',
+			closeButton:
+				toastMainClass +
+				'-close-button !absolute !-start-2 !-top-2 !flex !size-5 !items-center !justify-center !rounded-full !border !border-border !bg-foreground !text-primary-foreground [&_svg]:!size-3 [&_svg]:!stroke-[1.333]',
+			// The icon takes the colour of its tone, the Icon modes of Figma: Muted for info (Default), Brand, Warning and Destructive.
+			info: '[&>[data-icon]]:!text-muted-foreground',
+			success: '[&>[data-icon]]:!text-brand',
+			warning: '[&>[data-icon]]:!text-warning',
+			error: '[&>[data-icon]]:!text-destructive'
+		}
+	}}
+	expand={false}
+	visibleToasts={1}
+	offset="1rem"
+	class={className}
+	{style}
 />
-
-<style>
-  /* svelte-sonner close SVG ignores button `color` / Tailwind text-white. */
-  :global(.toast-modal-close-button svg),
-  :global(.toast-modal-close-button path) {
-    color: #ffffff !important;
-    fill: #ffffff !important;
-    stroke: #ffffff !important;
-  }
-</style>

package/dist/components/toast/ToasterModal.svelte.d.ts

@@ -3,13 +3,7 @@ export { className as class };
 export declare let style: string;
 export declare let defaultDuration: number;
 export declare let element: HTMLElement | null;
-/**
- * Shows a toast notification with consistent styling and positioning
- * @param type Type of toast message (success, error, warning)
- * @param title Main message text
- * @param options Additional options including description
- */
-export declare function showToast(type: string | undefined, title: string, options?: any): string | number;
+export declare function showToast(type: string | undefined, title: string, options?: Record<string, unknown> | null): string | number;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -24,11 +18,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ToasterModal: $$__sveltets_2_IsomorphicComponent<{
-    /**
-     * The words a screen reader hears: the region that holds the toasts ("Notifications", read with the key that moves
-     * focus to it) and the button that closes one ("Close toast"). A page in another language gives its own words;
-     * left out, the English ones of the library are used.
-     */ containerAriaLabel?: string | undefined;
+    containerAriaLabel?: string | undefined;
     closeButtonAriaLabel?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/ui/accordion/accordion-content.svelte

@@ -13,12 +13,13 @@
 <AccordionPrimitive.Content
 	bind:ref
 	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		"text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all",
 		className
 	)}
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<!-- Figma "Accordion Item" body: 4 on top, 16 on the sides and below. -->
+	<div class="px-4 pt-1 pb-4">
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion-item.svelte

@@ -9,4 +9,13 @@
 	}: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<!-- Figma "Accordion Item": a card (popover fill, 1px inside stroke, radius xl) that clips its trigger and body.
+	The stroke is an inset ring, not a border, so it takes no room: the trigger and the rows keep the full 402px of the Figma frame. -->
+<AccordionPrimitive.Item
+	bind:ref
+	class={cn(
+		"bg-popover text-popover-foreground ring-border overflow-hidden rounded-xl ring-1 ring-inset",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -18,12 +18,13 @@
 	<AccordionPrimitive.Trigger
 		bind:ref
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			// Figma "Accordion Trigger": 48 high, 16 on the sides, 8 between the title and the chevron; hover = accent fill, focus = 2px ring inside.
+			"text-body-medium text-foreground focus-visible:ring-ring flex h-12 flex-1 items-center justify-between gap-2 px-4 text-start transition-colors duration-fast outline-none hover:bg-accent focus-visible:rounded-xl focus-visible:ring-2 focus-visible:ring-inset [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<IconChevronDown class="size-4 shrink-0 stroke-[1.333] transition-transform duration-base" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

package/dist/components/ui/alert/alert-description.svelte

@@ -8,6 +8,10 @@
 	export { className as class };
 </script>
 
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+<div
+	data-slot="alert-description"
+	class={cn("text-body text-muted-foreground [&_p]:leading-relaxed", className)}
+	{...$$restProps}
+>
 	<slot />
 </div>