@urbicon-ui/blocks 6.1.4

package/dist/mint/svelte.js

@@ -0,0 +1,37 @@
+import { onDestroy, onMount } from 'svelte';
+import { mintRegistry } from './registry';
+/**
+ * Svelte 5 action for mints
+ */
+export function mint(node, params) {
+    let cleanup;
+    const apply = (p) => {
+        // Clean up previous mints
+        cleanup?.();
+        // Apply new mints
+        cleanup = mintRegistry.apply(node, p);
+    };
+    apply(params);
+    return {
+        update(newParams) {
+            apply(newParams);
+        },
+        destroy() {
+            cleanup?.();
+        }
+    };
+}
+/**
+ * Svelte 5 composable for mints
+ */
+export function useMint(element, mints) {
+    let cleanup;
+    onMount(() => {
+        if (!element)
+            return;
+        cleanup = mintRegistry.apply(element, mints);
+    });
+    onDestroy(() => {
+        cleanup?.();
+    });
+}

package/dist/mint/types.d.ts

@@ -0,0 +1,42 @@
+export interface MintConfig {
+    trigger?: 'hover' | 'click' | 'focus' | 'load';
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    disabled?: boolean;
+}
+export interface Mint<TConfig extends MintConfig = MintConfig> {
+    /** Called once after element is in the DOM */
+    init(el: HTMLElement, config?: TConfig): void;
+    /** Optional cleanup */
+    destroy?(el: HTMLElement): void;
+    /** Optional config updates */
+    update?(el: HTMLElement, config: TConfig): void;
+}
+export type MintFactory<TConfig extends MintConfig = MintConfig> = (config?: TConfig) => Mint<TConfig>;
+export interface MintInstance {
+    mint: Mint;
+    destroy: () => void;
+}
+export interface MicroInteractionConfig extends MintConfig {
+    intensity?: number;
+    transformOrigin?: string;
+}
+export interface RippleConfig extends MintConfig {
+    color?: string;
+    opacity?: number;
+    size?: number;
+}
+export interface CompositeConfig extends MintConfig {
+    mints: Array<string | {
+        name: string;
+        config?: MintConfig;
+    }>;
+}
+export type MintProp = string | {
+    name: string;
+    config?: MintConfig & Record<string, unknown>;
+} | Array<string> | Array<string | {
+    name: string;
+    config?: MintConfig & Record<string, unknown>;
+}>;

package/dist/mint/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/Accordion/Accordion.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { accordionVariants } from './accordion.variants';
+  import { setAccordionContext } from './accordion.context';
+  import type { AccordionProps, AccordionContext } from './index';
+
+  let {
+    type = 'single',
+    variant = 'default',
+    size = 'md',
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    disabled = false,
+    collapsible = true,
+    children,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: AccordionProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Accordion?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Accordion', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(unstyled ? { base: () => '' } : accordionVariants({ variant, size }));
+
+  function normalise(v: string | string[] | undefined): string[] {
+    if (v === undefined) return [];
+    return Array.isArray(v) ? v : [v];
+  }
+
+  let internalValue = $state<string[]>(normalise(defaultValue));
+
+  const openItems = $derived(value !== undefined ? normalise(value) : internalValue);
+
+  function update(next: string[]) {
+    if (value !== undefined) {
+      value = type === 'single' ? (next[0] ?? '') : next;
+    } else {
+      internalValue = next;
+    }
+    onValueChange?.(type === 'single' ? (next[0] ?? '') : next);
+  }
+
+  const ctx: AccordionContext = {
+    toggle(itemValue: string) {
+      if (disabled) return;
+
+      const isOpen = openItems.includes(itemValue);
+
+      if (isOpen) {
+        if (!collapsible && openItems.length <= 1) return;
+        update(openItems.filter((v) => v !== itemValue));
+      } else if (type === 'single') {
+        update([itemValue]);
+      } else {
+        update([...openItems, itemValue]);
+      }
+    },
+    isOpen(itemValue: string) {
+      return openItems.includes(itemValue);
+    },
+    get variant() {
+      return variant;
+    },
+    get size() {
+      return size;
+    },
+    get disabled() {
+      return disabled;
+    }
+  };
+
+  setAccordionContext(ctx);
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  data-orientation="vertical"
+  {...restProps}
+>
+  {@render children()}
+</div>

package/dist/primitives/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionProps } from './index';
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { accordionVariants } from './accordion.variants';
+  import { getAccordionContext } from './accordion.context';
+  import { resolveIcon } from '../../icons';
+  import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
+  import { Collapsible } from '../Collapsible';
+  import type { AccordionItemProps } from './index';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+
+  let {
+    value,
+    title = '',
+    trigger: customTrigger,
+    children,
+    disabled: itemDisabled = false,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: AccordionItemProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.AccordionItem?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'AccordionItem', preset),
+      slotClassesProp
+    )
+  );
+
+  const ctx = getAccordionContext();
+  const open = $derived(ctx.isOpen(value));
+  const isDisabled = $derived(itemDisabled || ctx.disabled);
+
+  const styles = $derived(
+    unstyled
+      ? {
+          item: () => '',
+          trigger: () => '',
+          chevron: () => '',
+          content: () => '',
+          contentInner: () => ''
+        }
+      : accordionVariants({ variant: ctx.variant, size: ctx.size })
+  );
+
+  function slot(key: keyof typeof styles, extra?: string) {
+    const overrides = [slotClasses?.[key], extra].filter(Boolean).join(' ');
+    if (unstyled) return overrides;
+    return styles[key]({ class: overrides });
+  }
+</script>
+
+<Collapsible
+  {open}
+  onOpenChange={() => ctx.toggle(value)}
+  disabled={isDisabled}
+  name={`accordion-${value}`}
+  unstyled
+  class={slot('item', className)}
+  slotClasses={{
+    content: slot('content'),
+    contentInner: slot('contentInner')
+  }}
+  {...restProps}
+>
+  {#snippet trigger({ open: isOpen, toggle, triggerId, contentId })}
+    <button
+      id={triggerId}
+      type="button"
+      class={slot('trigger')}
+      aria-expanded={isOpen}
+      aria-controls={contentId}
+      disabled={isDisabled}
+      onclick={toggle}
+    >
+      {#if customTrigger}
+        {@render customTrigger({ open: isOpen })}
+      {:else}
+        <span>{title}</span>
+      {/if}
+
+      <ChevronDownIcon class={slot('chevron', isOpen ? 'rotate-180' : '')} />
+    </button>
+  {/snippet}
+  {@render children()}
+</Collapsible>

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionItemProps } from './index';
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/primitives/Accordion/accordion.context.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionContext } from './index';
+declare const getAccordionContext: () => AccordionContext, setAccordionContext: (context: AccordionContext) => AccordionContext;
+export { getAccordionContext, setAccordionContext };

package/dist/primitives/Accordion/accordion.context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'svelte';
+const [getAccordionContext, setAccordionContext] = createContext();
+export { getAccordionContext, setAccordionContext };

package/dist/primitives/Accordion/accordion.variants.d.ts

@@ -0,0 +1,76 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const accordionVariants: (props?: import("../../utils/variants").TVProps<{
+    variant: {
+        default: {};
+        separated: {
+            base: string;
+            item: string;
+        };
+        ghost: {
+            base: string;
+            item: string;
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+        md: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+        lg: {
+            trigger: string;
+            contentInner: string;
+            chevron: string;
+        };
+    };
+}> | undefined) => {
+    base: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    item: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    trigger: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    chevron: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    content: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    contentInner: (props?: ({
+        variant?: "default" | "ghost" | "separated" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type AccordionVariants = VariantProps<typeof accordionVariants>;

package/dist/primitives/Accordion/accordion.variants.js

@@ -0,0 +1,64 @@
+import { tv } from '../../utils/variants';
+export const accordionVariants = tv({
+    slots: {
+        // divide-border-hairline instead of subtle — a quieter divider.
+        base: 'w-full divide-y divide-border-hairline',
+        item: 'w-full',
+        trigger: [
+            'flex w-full items-center justify-between py-4 text-left font-medium cursor-pointer',
+            'text-text-primary',
+            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)]',
+            'hover:text-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:rounded-sm',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        chevron: [
+            'shrink-0 text-text-tertiary',
+            'transition-transform duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+        ],
+        content: [
+            'overflow-hidden',
+            'transition-[grid-template-rows] duration-[var(--blocks-duration-normal)] ease-[var(--blocks-ease-smooth)]'
+        ],
+        contentInner: 'pb-4 text-text-secondary'
+    },
+    // Variant contract (see docs/MIGRATION-v5.md §2):
+    //   default   → hairlines between items (divide-y)
+    //   separated → items as standalone blocks with spacing, no borders
+    //   ghost     → no separators, hover-tint per item
+    variants: {
+        variant: {
+            default: {},
+            separated: {
+                base: 'divide-y-0 space-y-2',
+                item: 'rounded-contain bg-surface-quiet px-4'
+            },
+            ghost: {
+                base: 'divide-y-0',
+                item: 'rounded-contain',
+                trigger: 'px-4 hover:bg-surface-hover rounded-contain'
+            }
+        },
+        size: {
+            sm: {
+                trigger: 'py-2.5 text-sm',
+                contentInner: 'pb-2.5 text-sm',
+                chevron: 'w-4 h-4'
+            },
+            md: {
+                trigger: 'py-4 text-base',
+                contentInner: 'pb-4 text-sm',
+                chevron: 'w-5 h-5'
+            },
+            lg: {
+                trigger: 'py-5 text-lg',
+                contentInner: 'pb-5 text-base',
+                chevron: 'w-5 h-5'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});

package/dist/primitives/Accordion/index.d.ts

@@ -0,0 +1,122 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { AccordionVariants } from './accordion.variants';
+/** Context for Accordion ↔ AccordionItem communication */
+export interface AccordionContext {
+    toggle: (value: string) => void;
+    isOpen: (value: string) => boolean;
+    variant: AccordionVariants['variant'];
+    size: AccordionVariants['size'];
+    disabled: boolean;
+}
+/**
+ * Props interface for Accordion component
+ *
+ * @description Collapsible content sections with expand/collapse animation.
+ * Supports single or multiple open items, keyboard navigation, and ARIA accordion pattern.
+ *
+ * @tag layout
+ * @related Collapsible
+ * @related Card
+ *
+ * @example
+ * ```svelte
+ * <Accordion>
+ *   <AccordionItem value="faq-1" title="What is Urbicon UI?">
+ *     A Svelte 5 component library with built-in i18n and design tokens.
+ *   </AccordionItem>
+ *   <AccordionItem value="faq-2" title="How does dark mode work?">
+ *     Semantic tokens automatically handle light/dark via prefers-color-scheme.
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Accordion type="multiple" variant="separated" bind:value={openItems}>
+ *   <AccordionItem value="section-1" title="Section 1">Content</AccordionItem>
+ *   <AccordionItem value="section-2" title="Section 2">Content</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Allow single or multiple items open at once @default 'single' */
+    type?: 'single' | 'multiple';
+    /** Visual style @default 'default' */
+    variant?: 'default' | 'separated' | 'ghost';
+    /** Size @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Controlled open item(s) – string for single, string[] for multiple */
+    value?: string | string[];
+    /** Default open item(s) */
+    defaultValue?: string | string[];
+    /** Callback when open items change */
+    onValueChange?: (value: string | string[]) => void;
+    /** Disable all items @default false */
+    disabled?: boolean;
+    /** Whether items can be fully collapsed @default true */
+    collapsible?: boolean;
+    /** Accordion items */
+    children: Snippet;
+    /** Custom CSS class */
+    class?: string;
+    /** Remove default styles */
+    unstyled?: boolean;
+    /** Per-slot class overrides */
+    slotClasses?: Partial<Record<'base' | 'item' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Accordion: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+/**
+ * Props interface for AccordionItem component
+ *
+ * @description Single collapsible section within an Accordion.
+ *
+ * @description Single expandable section inside an Accordion.
+ * Provides the trigger label and the expanded content.
+ *
+ * @tag layout
+ * @related Accordion
+ *
+ * @example
+ * ```svelte
+ * <AccordionItem value="item-1" title="Click to expand">
+ *   Expanded content here.
+ * </AccordionItem>
+ * ```
+ */
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** Unique identifier for this item */
+    value: string;
+    /** Trigger label text (required unless a custom trigger snippet is provided) */
+    title?: string;
+    /** Custom trigger snippet (replaces default title) */
+    trigger?: Snippet<[{
+        open: boolean;
+    }]>;
+    /** Expanded content */
+    children: Snippet;
+    /** Disable this item @default false */
+    disabled?: boolean;
+    /** Custom CSS class */
+    class?: string;
+    /** Remove default styles */
+    unstyled?: boolean;
+    /** Per-slot class overrides */
+    slotClasses?: Partial<Record<'item' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ AccordionItem: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { type AccordionVariants, accordionVariants } from './accordion.variants';

package/dist/primitives/Accordion/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { accordionVariants } from './accordion.variants';

package/dist/primitives/Alert/Alert.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { alertVariants } from './alert.variants';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { resolveIcon } from '../../icons';
+  import CloseIconDefault from '../../icons/CloseIcon.svelte';
+  import type { AlertProps } from './index';
+
+  const bt = useBlocksI18n();
+
+  const CloseIcon = resolveIcon('close', CloseIconDefault);
+
+  let {
+    intent = 'primary',
+    variant = 'soft',
+    size = 'md',
+    title,
+    children,
+    icon,
+    actions,
+    dismissible = false,
+    onDismiss,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: AlertProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Alert?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Alert', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(
+    unstyled
+      ? {
+          base: () => '',
+          icon: () => '',
+          content: () => '',
+          title: () => '',
+          description: () => '',
+          actions: () => '',
+          dismissButton: () => ''
+        }
+      : alertVariants({ intent, variant, size })
+  );
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  role="alert"
+  {...restProps}
+>
+  {#if icon}
+    <div class={unstyled ? (slotClasses?.icon ?? '') : styles.icon({ class: slotClasses?.icon })}>
+      {@render icon()}
+    </div>
+  {/if}
+
+  <div
+    class={unstyled
+      ? (slotClasses?.content ?? '')
+      : styles.content({ class: slotClasses?.content })}
+  >
+    {#if title}
+      <div
+        class={unstyled ? (slotClasses?.title ?? '') : styles.title({ class: slotClasses?.title })}
+      >
+        {title}
+      </div>
+    {/if}
+    {#if children}
+      <div
+        class={unstyled
+          ? (slotClasses?.description ?? '')
+          : styles.description({ class: slotClasses?.description })}
+      >
+        {@render children()}
+      </div>
+    {/if}
+    {#if actions}
+      <div
+        class={unstyled
+          ? (slotClasses?.actions ?? '')
+          : styles.actions({ class: slotClasses?.actions })}
+      >
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+
+  {#if dismissible}
+    <button
+      type="button"
+      class={unstyled
+        ? (slotClasses?.dismissButton ?? '')
+        : styles.dismissButton({ class: slotClasses?.dismissButton })}
+      onclick={onDismiss}
+      aria-label={bt('accessibility.dismiss')}
+    >
+      <CloseIcon class="h-4 w-4" />
+    </button>
+  {/if}
+</div>