entasis 0.4.1 → 0.5.0

package/dist/components/Chart/chart.theme.d.ts

@@ -48,7 +48,7 @@ export declare const setChartTheme: (theme: InferComponentTheme<{
     legendSwatch: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     tooltip: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useChartTheme: (theme?: InferComponentTheme<{
+export declare const useChartTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     plot: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
@@ -70,27 +70,5 @@ export declare const useChartTheme: (theme?: InferComponentTheme<{
     legendItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     legendSwatch: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     tooltip: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    plot: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    legend: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        placement: {
-            top: string;
-            bottom: string;
-        };
-        align: {
-            left: string;
-            center: string;
-            right: string;
-        };
-        orientation: {
-            horizontal: string;
-            vertical: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    legendItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    legendSwatch: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    tooltip: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;
 export declare const useChartMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;

package/dist/components/Chip/chip.theme.d.ts

@@ -111,7 +111,7 @@ export declare const setChipTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useChipTheme: (theme?: InferComponentTheme<{
+export declare const useChipTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         isLink: {
             true: string;
@@ -165,58 +165,4 @@ export declare const useChipTheme: (theme?: InferComponentTheme<{
             small: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        isLink: {
-            true: string;
-            false: null;
-        };
-        isEmpty: {
-            true: string;
-            false: null;
-        };
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-        variant: {
-            solid: string;
-            outline: string;
-            soft: string;
-        };
-        selected: {
-            true: string;
-            false: null;
-        };
-        position: {
-            'top-right': string;
-            'top-left': string;
-            'bottom-right': string;
-            'bottom-left': string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            normal: string;
-            large: string;
-            small: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    suffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            normal: string;
-            large: string;
-            small: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/Code/code.theme.d.ts

@@ -17,18 +17,11 @@ export declare const setCodeTheme: (theme: InferComponentTheme<{
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     floatingCopy: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useCodeTheme: (theme?: InferComponentTheme<{
+export declare const useCodeTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     title: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     container: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     floatingCopy: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    title: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    container: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    floatingCopy: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/components/Collapsible/collapsible.theme.d.ts

@@ -96,7 +96,7 @@ export declare const setCollapsibleTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useCollapsibleTheme: (theme?: InferComponentTheme<{
+export declare const useCollapsibleTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<{
         readonly variant: {
             readonly default: {};
@@ -138,49 +138,7 @@ export declare const useCollapsibleTheme: (theme?: InferComponentTheme<{
             large: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    motion: import("../../utils/motion/index.js").MotionResolver<{
-        readonly variant: {
-            readonly default: {};
-            readonly peek: {
-                readonly duration: "slow";
-                readonly easing: "enter";
-            };
-        };
-    }>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        disabled: {
-            true: string;
-            false: null;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    icon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;
 export declare const useCollapsibleMotion: () => import("../../utils/motion/index.js").ComponentMotion<{
     readonly variant: {
         readonly default: {};

package/dist/components/Command/command.theme.d.ts

@@ -205,7 +205,7 @@ export declare const setCommandTheme: (theme: InferComponentTheme<{
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useCommandTheme: (theme?: InferComponentTheme<{
+export declare const useCommandTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -306,105 +306,4 @@ export declare const useCommandTheme: (theme?: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputWrapper: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputGroup: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    inputIcon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    input: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    empty: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    group: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    groupHeading: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    separator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        highlighted: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    shortcut: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        highlighted: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/components/Confirmation/confirmation.theme.d.ts

@@ -19,7 +19,7 @@ export declare const setConfirmationTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useConfirmationTheme: (theme?: InferComponentTheme<{
+export declare const useConfirmationTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         layout: {
@@ -27,12 +27,4 @@ export declare const useConfirmationTheme: (theme?: InferComponentTheme<{
             inline: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        layout: {
-            stacked: string;
-            inline: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/ContextMenu/contextMenu.theme.d.ts

@@ -19,7 +19,7 @@ export declare const setContextMenuTheme: (theme: InferComponentTheme<{
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useContextMenuTheme: (theme?: InferComponentTheme<{
+export declare const useContextMenuTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         disabled: {
             true: string;
@@ -27,12 +27,4 @@ export declare const useContextMenuTheme: (theme?: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        disabled: {
-            true: string;
-            false: null;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    panel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/components/DataTable/dataTable.theme.d.ts

@@ -319,7 +319,7 @@ export declare const setDataTableTheme: (theme: InferComponentTheme<{
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useDataTableTheme: (theme?: InferComponentTheme<{
+export declare const useDataTableTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         fill: {
             true: string;
@@ -477,163 +477,5 @@ export declare const useDataTableTheme: (theme?: InferComponentTheme<{
     skeletonBar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        fill: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    toolbar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    toolbarGroup: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    search: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    viewport: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        fill: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    savingIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    scrollArea: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    virtualTable: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    caption: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerRow: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerCell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-        align: {
-            start: string;
-            center: string;
-            end: string;
-        };
-        pinned: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    headerContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerButton: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerActions: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    headerMenuPanel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        sheet: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    headerMenuButton: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        active: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    dragHandle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    dragThumb: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    resizeHandle: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    body: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    row: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-        grouped: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    cell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-        align: {
-            start: string;
-            center: string;
-            end: string;
-        };
-        pinned: {
-            true: string;
-            false: string;
-        };
-        focused: {
-            true: string;
-            false: string;
-        };
-        editing: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    cellContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    selectionCell: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    selectionCheckboxRoot: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    selectionCheckboxContainer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    selectionCheckboxControl: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    selectionCheckboxIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    actionsCell: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    detailRow: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    detailCell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    spacer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    expander: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    groupValue: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    groupCount: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    pinnedBoundary: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        side: {
-            left: string;
-            right: string;
-            none: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    editor: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    editorField: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    editorInput: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    editorInputContainer: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        density: {
-            compact: string;
-            normal: string;
-            comfortable: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    editorSwitchContainer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    editorFieldLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    editorError: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterPanel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        separated: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    filterHeader: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterLabel: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterFields: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterCheckboxGroup: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterCheckboxContainer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterCheckboxItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    filterCheckboxIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    stateRow: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    stateCell: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    stateContent: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    skeletonList: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    skeletonBar: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    summary: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;
 export type DataTableClasses = ReturnType<typeof useDataTableTheme>;

package/dist/components/Dialog/Dialog.svelte

@@ -8,6 +8,7 @@
 	import Button from '../Button/Button.svelte';
 	import { fso } from '../../transitions/transition.js';
 	import { portal } from '../../attachments/portal.js';
+	import { drawerInsetValue } from '../Theme/theme.designTokens.js';
 
 	let {
 		id: customId,
@@ -28,6 +29,7 @@
 		swipeToDismiss,
 		swipeFrom,
 		thumb = true,
+		inset,
 		class: className,
 		header,
 		footer,
@@ -132,6 +134,7 @@
 		data-type={dialog.type}
 		data-size={size}
 		style:z-index={dialog.zIndex}
+		style:--drawer-inset={inset === undefined ? undefined : drawerInsetValue(inset)}
 	>
 		<div class={classes.align({ type: dialog.computedType, scroll: dialog.computedScroll })}>
 			<div
@@ -220,3 +223,16 @@
 		</Button>
 	{/if}
 {/if}
+
+<style>
+	/*
+	 * A drawer's edge corners round only while it stands off the screen edge: 9999× the inset
+	 * is 0 at `drawerInset: 'none'` and larger than any radius otherwise, so `min()` picks square
+	 * or the panel's radius with no variant. Declared here, on the panel, so a scoped <Theme>
+	 * that changes `--drawer-inset` is seen (a declaration on `html` would resolve the variable
+	 * there instead).
+	 */
+	[data-type^='drawer'] {
+		--drawer-edge-radius: min(var(--radius-xl), calc(var(--drawer-inset) * 9999));
+	}
+</style>

package/dist/components/Dialog/dialog.mcp.d.ts

@@ -1 +1 @@
-export declare const dialogDescription = "\n# Dialog Component\n\nThe Dialog component (also known as Modal) displays content in a layer above the page, blocking interaction with the rest of the application until dismissed.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\t\n</script>\n// By default Dialog comes with a button that trigger them, no need to define a callback and a $state\n<Dialog title=\"Dialog Title\">\n\tDialog content goes here\n</Dialog>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls dialog visibility\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **id**: string - Unique identifier for the dialog\n- **type**: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'alert' | 'modal' (default: 'modal')\n  - fullScreen: Full screen dialog overlay\n  - drawerRight: Drawer sliding in from the right\n  - drawerLeft: Drawer sliding in from the left\n  - drawerBottom: Drawer sliding in from the bottom\n  - drawerTop: Drawer sliding in from the top\n  - alert: Alert-style dialog\n  - modal: Standard modal dialog\n  - Supports responsive values: pass a `Partial<Record<Breakpoint, DialogType>>` record such as `{ xs: 'drawerBottom', md: 'modal' }` to vary the type per breakpoint (breakpoint is one of 'xs' | 'sm' | 'md' | 'lg' | 'xl', tracked live from the viewport; the nearest defined key at or below the active one wins)\n- **responsive**: boolean (default: true) - When the resolved type is `modal`, collapse it into a `drawerBottom` bottom sheet on mobile (viewport < 768px). The sheet inherits swipe-to-dismiss and the drag thumb. Set false to keep a centered modal on every screen size\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact dialog size\n  - normal: Standard dialog size\n  - large: Larger dialog size\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: DialogState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: DialogState) => void - Called after the close transition finishes\n\n### Slot Props\n- **title**: string | Snippet<[DialogState]> - Dialog title\n- **description**: string | Snippet<[DialogState]> - Dialog description\n- **children**: Snippet<[DialogState]> - Main dialog content\n- **header**: Snippet - Custom header content\n- **footer**: Snippet - Custom footer content\n- **trigger**: Snippet | (ButtonProps & { content?: string }) - Custom trigger button\n- **closeButton**: Snippet - Custom close button\n\n### Behavior Props\n- **closeOnEscape**: boolean (default: true) - Close when Escape key is pressed\n- **closeOnClickOutside**: boolean (default: true) - Close when clicking outside dialog\n- **closable**: boolean (default: true) - Whether dialog can be closed\n- **swipeToDismiss**: boolean (default: true for drawer types) - Drag the drawer toward its edge to dismiss. Direction-aware (drawerRight drags right, drawerBottom drags down, etc.) and never hijacks inner scrolling; opt elements out with `data-no-swipe`\n- **thumb**: boolean (default: true) - Drag thumb bar shown on swipe-dismissable drawers (inner edge, orientation follows the drawer side, oversized hitbox); set false to hide. Themeable via the `thumb` theme part\n- **swipeFrom**: 'panel' | 'handle' (default: 'panel') - Where a swipe can start: anywhere on the panel, or only the drag handles (thumb and header)\n\n### Visual Props\n- **transition**: TransitionConfig - Custom transition animation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<DialogOverlay>\n\t<DialogContent>\n\t\t<DialogHeader>\n\t\t\t<Title />\n\t\t\t<Description />\n\t\t\t<CloseButton />\n\t\t</DialogHeader>\n\t\t<DialogBody>\n\t\t\t<Children />\n\t\t</DialogBody>\n\t\t<DialogFooter />\n\t</DialogContent>\n</DialogOverlay>\n```\n\n## Examples\n\n### More Examples\n\n### A with a custom trigger \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\">\n\t<p>This is a basic dialog.</p>\n\t\n\t{#snippet trigger(dialog)}\n\t\t<Button onclick={() => dialog.open()}>Open</Button>\n\t{/snippet}\n</Dialog>\n```\n\n### A with a custom as button props \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\"\ntrigger={{\ncontent:\"Click me\",\ncolor:\"secondary\",\nsize:\"small\"\n}}\n>\n\t<p>This is a basic dialog.</p>\t\n</Dialog>\n```\n\n### With Description\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n</script>\n\n<Dialog \t\n\ttitle=\"Confirm Action\"\n\tdescription=\"Are you sure you want to continue?\"\n>\n\t<p>This action cannot be undone.</p>\n</Dialog>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n\t\n\tfunction handleConfirm() {\n\t\tconsole.log('Confirmed!');\n\t\topen = false;\n\t}\n</script>\n\n<Dialog bind:open title=\"Confirm\">\n\tAre you sure?\n\t\n\t{#snippet footer()}\n\t\t<div class=\"flex gap-2 justify-end\">\n\t\t\t<Button variant=\"ghost\" onclick={() => open = false}>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t\t<Button color=\"danger\" onclick={handleConfirm}>\n\t\t\t\tConfirm\n\t\t\t</Button>\n\t\t</div>\n\t{/snippet}\n</Dialog>\n```\n\n### Drawer Types\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\t\n</script>\n\n<!-- Right drawer -->\n<Dialog type=\"drawerRight\" title=\"Side Drawer\">\n\tThis slides in from the right\n</Dialog>\n\n<!-- Left drawer -->\n<Dialog type=\"drawerLeft\" title=\"Left Drawer\">\n\tThis slides in from the left\n</Dialog>\n\n<!-- Bottom drawer -->\n<Dialog type=\"drawerBottom\" title=\"Bottom Drawer\">\n\tThis slides in from the bottom\n</Dialog>\n\n<!-- Full screen -->\n<Dialog type=\"fullScreen\" title=\"Full Screen\">\n\tFull screen dialog content\n</Dialog>\n```\n\n### Custom Header\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Dialog bind:open>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t{@render warningIcon()}\n\t\t\t<h2>Warning</h2>\n\t\t</div>\n\t{/snippet}\n\t\n\tThis is important!\n</Dialog>\n```\n\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n<Dialog \n\tbind:open\n\ttitle=\"Lifecycle\"\n\tonAfterOpen={(payload) => console.log('Dialog opened', payload)}\n\tonAfterClose={(payload) => console.log('Dialog closed', payload)}\n>\n\tWatch the console\n</Dialog>\n```\n\n## State Management\n\nThe Dialog component uses a `DialogState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Dialog identifier\n- **type**: DialogType - Current dialog type\n- **size**: Size - Current dialog size\n- **open()**: () => void - Method to open the dialog\n- **close()**: () => void - Method to close the dialog\n\n## Accessibility\n\n- Initial focus goes to an `[autofocus]` / `[data-autofocus]` element inside the dialog, else the first tabbable control (the close button is skipped), else the panel itself\n- Tab and Shift+Tab are contained inside the dialog, and the rest of the page is `inert` while a modal is open\n- Focus is restored to the opener after the close transition finishes, just before `onAfterClose`\n- `aria-labelledby` links the `title` and `aria-describedby` links the `description`\n- Escape closes only the topmost open layer and an outside press dismisses the layers above the one pressed; both honour `closeOnEscape` / `closable` / `closeOnClickOutside` through the shared layer stack\n- Body scroll is locked when dialog is open\n\n## Notes\n\n- Multiple dialogs can be stacked\n- Last opened dialog receives focus\n- Background overlay prevents interaction with page\n- Scroll locking prevents background scroll\n- Transitions are customizable\n\n## Theme Customization\n\nThe Dialog component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `type` (drawers fly from their edge). Takes\n  `in` / `out` FSO params plus a `duration` / `easing` motion token; the `transition` prop wins\n  over it\n- **root**: Dialog overlay/backdrop styles\n- **content**: Dialog content container styles\n- **thumb**: Drag thumb bar styles (type variant controls per-side placement)\n- **header**: Dialog header section styles\n- **footer**: Dialog footer section styles\n- **closeButton**: Close button styles\n- **title**: Dialog title text styles\n- **description**: Dialog description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { DialogThemeProps } from 'entasis/dialog';\n\n// Example theme customization\nconst customTheme: DialogThemeProps = {\n  root: {\n    base: 'z-[+50] fixed inset-0 flex',\n    scroll: {\n      inner: 'overflow-hidden',\n      outer: 'overflow-auto'\n    }\n  },\n  align: {\n    type: {\n      fullScreen: 'justify-center items-center',\n      drawerRight: 'justify-end',\n      drawerLeft: 'justify-start',\n      drawerBottom: 'justify-center items-end',\n      drawerTop: 'justify-center items-start',\n      modal: 'justify-center',\n      alert: 'justify-center'\n    }\n  },\n  content: {\n    size: {\n      small: 'max-w-md w-full',\n      normal: 'max-w-xl w-full',\n      large: 'max-w-3xl w-full'\n    },\n    type: {\n      fullScreen: 'h-full w-full max-w-full',\n      drawerRight: 'rounded-l-none h-full',\n      modal: ''\n    }\n  },\n  header: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  title: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  description: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for dialog overlay/backdrop\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size constraints\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Dialog type/layout\n\n**content**:\n- base: Base classes for dialog content container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content max-width\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Content styling based on type\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**closeButton**:\n- base: Base classes for close button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Dialog \n  title=\"Custom Dialog\"\n  theme={{\n    content: {\n      base: 'rounded-2xl raised-5',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    header: {\n      base: 'border-b-2 border-primary'\n    }\n  }}\n>\n  Custom styled dialog content\n</Dialog>\n```\n\n**Drawer Type Customization**:\n```svelte\n<Dialog \n  type=\"drawerRight\"\n  theme={{\n    align: {\n      type: {\n        drawerRight: 'justify-end'\n      }\n    },\n    backdrop: {\n      base: 'bg-black/50'\n    },\n    content: {\n      type: {\n        drawerRight: 'rounded-l-xl raised-5'\n      }\n    }\n  }}\n>\n  Custom drawer styling\n</Dialog>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setDialogTheme } from './index.ts';\n  \n  setDialogTheme({\n    root: {\n      base: 'backdrop-blur-sm'\n    },\n    content: {\n      base: 'lift-5 border-2',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    title: {\n      base: 'text-2xl font-bold'\n    }\n  });\n</script>\n```\n";
+export declare const dialogDescription = "\n# Dialog Component\n\nThe Dialog component (also known as Modal) displays content in a layer above the page, blocking interaction with the rest of the application until dismissed.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\t\n</script>\n// By default Dialog comes with a button that trigger them, no need to define a callback and a $state\n<Dialog title=\"Dialog Title\">\n\tDialog content goes here\n</Dialog>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls dialog visibility\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **id**: string - Unique identifier for the dialog\n- **type**: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'alert' | 'modal' (default: 'modal')\n  - fullScreen: Full screen dialog overlay\n  - drawerRight: Drawer sliding in from the right\n  - drawerLeft: Drawer sliding in from the left\n  - drawerBottom: Drawer sliding in from the bottom\n  - drawerTop: Drawer sliding in from the top\n  - alert: Alert-style dialog\n  - modal: Standard modal dialog\n  - Supports responsive values: pass a `Partial<Record<Breakpoint, DialogType>>` record such as `{ xs: 'drawerBottom', md: 'modal' }` to vary the type per breakpoint (breakpoint is one of 'xs' | 'sm' | 'md' | 'lg' | 'xl', tracked live from the viewport; the nearest defined key at or below the active one wins)\n- **responsive**: boolean (default: true) - When the resolved type is `modal`, collapse it into a `drawerBottom` bottom sheet on mobile (viewport < 768px). The sheet inherits swipe-to-dismiss and the drag thumb. Set false to keep a centered modal on every screen size\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact dialog size\n  - normal: Standard dialog size\n  - large: Larger dialog size\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: DialogState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: DialogState) => void - Called after the close transition finishes\n\n### Slot Props\n- **title**: string | Snippet<[DialogState]> - Dialog title\n- **description**: string | Snippet<[DialogState]> - Dialog description\n- **children**: Snippet<[DialogState]> - Main dialog content\n- **header**: Snippet - Custom header content\n- **footer**: Snippet - Custom footer content\n- **trigger**: Snippet | (ButtonProps & { content?: string }) - Custom trigger button\n- **closeButton**: Snippet - Custom close button\n\n### Behavior Props\n- **closeOnEscape**: boolean (default: true) - Close when Escape key is pressed\n- **closeOnClickOutside**: boolean (default: true) - Close when clicking outside dialog\n- **closable**: boolean (default: true) - Whether dialog can be closed\n- **swipeToDismiss**: boolean (default: true for drawer types) - Drag the drawer toward its edge to dismiss. Direction-aware (drawerRight drags right, drawerBottom drags down, etc.) and never hijacks inner scrolling; opt elements out with `data-no-swipe`\n- **thumb**: boolean (default: true) - Drag thumb bar shown on swipe-dismissable drawers (inner edge, orientation follows the drawer side, oversized hitbox); set false to hide. Themeable via the `thumb` theme part\n- **inset**: a spacing step or `'none'` \u2014 how far a drawer stands off the screen edge for this dialog. Defaults to the theme's `designTokens.drawerInset` (`'layout-md'`). At `'none'` the drawer is edge to edge, its edge corners square off and only the corners facing the page stay rounded\n- **swipeFrom**: 'panel' | 'handle' (default: 'panel') - Where a swipe can start: anywhere on the panel, or only the drag handles (thumb and header)\n\n### Visual Props\n- **transition**: TransitionConfig - Custom transition animation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<DialogOverlay>\n\t<DialogContent>\n\t\t<DialogHeader>\n\t\t\t<Title />\n\t\t\t<Description />\n\t\t\t<CloseButton />\n\t\t</DialogHeader>\n\t\t<DialogBody>\n\t\t\t<Children />\n\t\t</DialogBody>\n\t\t<DialogFooter />\n\t</DialogContent>\n</DialogOverlay>\n```\n\n## Examples\n\n### More Examples\n\n### A with a custom trigger \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\">\n\t<p>This is a basic dialog.</p>\n\t\n\t{#snippet trigger(dialog)}\n\t\t<Button onclick={() => dialog.open()}>Open</Button>\n\t{/snippet}\n</Dialog>\n```\n\n### A with a custom as button props \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\"\ntrigger={{\ncontent:\"Click me\",\ncolor:\"secondary\",\nsize:\"small\"\n}}\n>\n\t<p>This is a basic dialog.</p>\t\n</Dialog>\n```\n\n### With Description\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n</script>\n\n<Dialog \t\n\ttitle=\"Confirm Action\"\n\tdescription=\"Are you sure you want to continue?\"\n>\n\t<p>This action cannot be undone.</p>\n</Dialog>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n\t\n\tfunction handleConfirm() {\n\t\tconsole.log('Confirmed!');\n\t\topen = false;\n\t}\n</script>\n\n<Dialog bind:open title=\"Confirm\">\n\tAre you sure?\n\t\n\t{#snippet footer()}\n\t\t<div class=\"flex gap-2 justify-end\">\n\t\t\t<Button variant=\"ghost\" onclick={() => open = false}>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t\t<Button color=\"danger\" onclick={handleConfirm}>\n\t\t\t\tConfirm\n\t\t\t</Button>\n\t\t</div>\n\t{/snippet}\n</Dialog>\n```\n\n### Drawer Types\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\t\n</script>\n\n<!-- Right drawer -->\n<Dialog type=\"drawerRight\" title=\"Side Drawer\">\n\tThis slides in from the right\n</Dialog>\n\n<!-- Left drawer -->\n<Dialog type=\"drawerLeft\" title=\"Left Drawer\">\n\tThis slides in from the left\n</Dialog>\n\n<!-- Bottom drawer -->\n<Dialog type=\"drawerBottom\" title=\"Bottom Drawer\">\n\tThis slides in from the bottom\n</Dialog>\n\n<!-- Full screen -->\n<Dialog type=\"fullScreen\" title=\"Full Screen\">\n\tFull screen dialog content\n</Dialog>\n```\n\n### Custom Header\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Dialog bind:open>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t{@render warningIcon()}\n\t\t\t<h2>Warning</h2>\n\t\t</div>\n\t{/snippet}\n\t\n\tThis is important!\n</Dialog>\n```\n\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n<Dialog \n\tbind:open\n\ttitle=\"Lifecycle\"\n\tonAfterOpen={(payload) => console.log('Dialog opened', payload)}\n\tonAfterClose={(payload) => console.log('Dialog closed', payload)}\n>\n\tWatch the console\n</Dialog>\n```\n\n## State Management\n\nThe Dialog component uses a `DialogState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Dialog identifier\n- **type**: DialogType - Current dialog type\n- **size**: Size - Current dialog size\n- **open()**: () => void - Method to open the dialog\n- **close()**: () => void - Method to close the dialog\n\n## Accessibility\n\n- Initial focus goes to an `[autofocus]` / `[data-autofocus]` element inside the dialog, else the first tabbable control (the close button is skipped), else the panel itself\n- Tab and Shift+Tab are contained inside the dialog, and the rest of the page is `inert` while a modal is open\n- Focus is restored to the opener after the close transition finishes, just before `onAfterClose`\n- `aria-labelledby` links the `title` and `aria-describedby` links the `description`\n- Escape closes only the topmost open layer and an outside press dismisses the layers above the one pressed; both honour `closeOnEscape` / `closable` / `closeOnClickOutside` through the shared layer stack\n- Body scroll is locked when dialog is open\n\n## Notes\n\n- Multiple dialogs can be stacked\n- Last opened dialog receives focus\n- Background overlay prevents interaction with page\n- Scroll locking prevents background scroll\n- Transitions are customizable\n\n## Theme Customization\n\nThe Dialog component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `type` (drawers fly from their edge). Takes\n  `in` / `out` FSO params plus a `duration` / `easing` motion token; the `transition` prop wins\n  over it\n- **root**: Dialog overlay/backdrop styles\n- **content**: Dialog content container styles\n- **thumb**: Drag thumb bar styles (type variant controls per-side placement)\n- **header**: Dialog header section styles\n- **footer**: Dialog footer section styles\n- **closeButton**: Close button styles\n- **title**: Dialog title text styles\n- **description**: Dialog description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { DialogThemeProps } from 'entasis/dialog';\n\n// Example theme customization\nconst customTheme: DialogThemeProps = {\n  root: {\n    base: 'z-[+50] fixed inset-0 flex',\n    scroll: {\n      inner: 'overflow-hidden',\n      outer: 'overflow-auto'\n    }\n  },\n  align: {\n    type: {\n      fullScreen: 'justify-center items-center',\n      drawerRight: 'justify-end',\n      drawerLeft: 'justify-start',\n      drawerBottom: 'justify-center items-end',\n      drawerTop: 'justify-center items-start',\n      modal: 'justify-center',\n      alert: 'justify-center'\n    }\n  },\n  content: {\n    size: {\n      small: 'max-w-md w-full',\n      normal: 'max-w-xl w-full',\n      large: 'max-w-3xl w-full'\n    },\n    type: {\n      fullScreen: 'h-full w-full max-w-full',\n      drawerRight: 'rounded-r-[var(--drawer-edge-radius)] h-full',\n      modal: ''\n    }\n  },\n  header: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  title: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  description: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for dialog overlay/backdrop\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size constraints\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Dialog type/layout\n\n**content**:\n- base: Base classes for dialog content container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content max-width\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Content styling based on type\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**closeButton**:\n- base: Base classes for close button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Dialog \n  title=\"Custom Dialog\"\n  theme={{\n    content: {\n      base: 'rounded-2xl raised-5',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    header: {\n      base: 'border-b-2 border-primary'\n    }\n  }}\n>\n  Custom styled dialog content\n</Dialog>\n```\n\n**Drawer Type Customization**:\n```svelte\n<Dialog \n  type=\"drawerRight\"\n  theme={{\n    align: {\n      type: {\n        drawerRight: 'justify-end'\n      }\n    },\n    backdrop: {\n      base: 'bg-black/50'\n    },\n    content: {\n      type: {\n        drawerRight: 'rounded-l-xl raised-5'\n      }\n    }\n  }}\n>\n  Custom drawer styling\n</Dialog>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setDialogTheme } from './index.ts';\n  \n  setDialogTheme({\n    root: {\n      base: 'backdrop-blur-sm'\n    },\n    content: {\n      base: 'lift-5 border-2',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    title: {\n      base: 'text-2xl font-bold'\n    }\n  });\n</script>\n```\n";