diff --git a/src/lib/components/accordion/AccordionHeader.svelte b/src/lib/components/accordion/AccordionHeader.svelte
index 67221f3..3625525 100644
--- a/src/lib/components/accordion/AccordionHeader.svelte
+++ b/src/lib/components/accordion/AccordionHeader.svelte
@@ -52,6 +52,7 @@
 
   $: headerCtx.update(($ctx) => ({
     ...$ctx,
+    ...$itemCtx,
   }));
 </script>
 
diff --git a/src/lib/components/accordion/AccordionItem.svelte b/src/lib/components/accordion/AccordionItem.svelte
index 8ef4f51..5886689 100644
--- a/src/lib/components/accordion/AccordionItem.svelte
+++ b/src/lib/components/accordion/AccordionItem.svelte
@@ -61,11 +61,11 @@
 
   $: itemCtx.update(($ctx) => ({
     ...$ctx,
-    disabled,
+    ...$rootCtx,
+    itemDisabled: disabled,
   }));
 
-  $: ({ disabled: itemDisabled } = $itemCtx!);
-  $: ({ disabled: rootDisabled } = $rootCtx!);
+  $: ({ itemDisabled, rootDisabled } = $itemCtx);
   $: isDisabled = rootDisabled || itemDisabled;
 </script>
 
diff --git a/src/lib/components/accordion/AccordionRoot.svelte b/src/lib/components/accordion/AccordionRoot.svelte
index a8a5126..3e60dbc 100644
--- a/src/lib/components/accordion/AccordionRoot.svelte
+++ b/src/lib/components/accordion/AccordionRoot.svelte
@@ -63,7 +63,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    disabled,
+    rootDisabled: disabled,
   }));
 </script>
 
diff --git a/src/lib/components/accordion/AccordionTrigger.svelte b/src/lib/components/accordion/AccordionTrigger.svelte
index a1fe0e0..a0de69d 100644
--- a/src/lib/components/accordion/AccordionTrigger.svelte
+++ b/src/lib/components/accordion/AccordionTrigger.svelte
@@ -7,7 +7,7 @@
   import { cn } from '$lib/utils/cn.js';
   import type { ComponentInfo } from '$lib/utils/types.js';
 
-  import { headerContext, itemContext, rootContext } from './context.js';
+  import { headerContext } from './context.js';
 
   type Primitive = ComponentInfo<AccordionPrimitive.Trigger>;
 
@@ -66,15 +66,12 @@
   $: attributes = $$restProps as Attributes;
 
   const headerCtx = headerContext.get();
-  const itemCtx = itemContext.get();
-  const rootCtx = rootContext.get();
 
   if (!headerCtx) {
     throw new Error('Accordion.Trigger must be used within an Accordion.Header component.');
   }
 
-  $: ({ disabled: itemDisabled } = $itemCtx!);
-  $: ({ disabled: rootDisabled } = $rootCtx!);
+  $: ({ itemDisabled, rootDisabled } = $headerCtx!);
   $: isDisabled = (rootDisabled || itemDisabled) ?? false;
 </script>
 
diff --git a/src/lib/components/accordion/context.ts b/src/lib/components/accordion/context.ts
index fd6a9e7..293b22b 100644
--- a/src/lib/components/accordion/context.ts
+++ b/src/lib/components/accordion/context.ts
@@ -4,6 +4,19 @@ import { Context } from '$lib/utils/context.js';
 
 import type { HeaderProps, ItemProps, RootProps } from './index.js';
 
-export const headerContext = new Context<Writable<Pick<HeaderProps, never>>>();
-export const itemContext = new Context<Writable<Pick<ItemProps, 'disabled'>>>();
-export const rootContext = new Context<Writable<Pick<RootProps<boolean>, 'disabled'>>>();
+type HeaderContext = ItemContext & {
+  [K in keyof Pick<HeaderProps, never> as `header${Capitalize<K>}`]: HeaderProps[K];
+};
+type ItemContext = RootContext & {
+  [K in keyof Pick<ItemProps, 'disabled'> as `item${Capitalize<K>}`]: ItemProps[K];
+};
+type RootContext = {
+  [K in keyof Pick<
+    RootProps<boolean>,
+    'disabled'
+  > as `root${Capitalize<K>}`]: RootProps<boolean>[K];
+};
+
+export const headerContext = new Context<Writable<HeaderContext>>();
+export const itemContext = new Context<Writable<ItemContext>>();
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/alert-dialog/AlertDialogContent.svelte b/src/lib/components/alert-dialog/AlertDialogContent.svelte
index eb09b23..4df2e52 100644
--- a/src/lib/components/alert-dialog/AlertDialogContent.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogContent.svelte
@@ -7,7 +7,7 @@
   import { flyAndScale } from '$lib/transition/flyAndScale.js';
   import type { ComponentInfo, Transition } from '$lib/utils/types.js';
 
-  import { contentContext, portalContext, rootContext } from './context.js';
+  import { contentContext, portalContext } from './context.js';
 
   type Primitive<
     TContentTransition extends Transition = Transition,
@@ -98,13 +98,12 @@
 
   const contentCtx = contentContext.set(writable());
 
-  contentCtx.update(($ctx) => ({
+  $: contentCtx.update(($ctx) => ({
     ...$ctx,
+    ...$portalCtx,
   }));
 
-  const rootCtx = rootContext.get();
-
-  $: ({ breakpoint, variant } = $rootCtx!);
+  $: ({ rootBreakpoint, rootVariant } = $contentCtx);
 </script>
 
 <!-- <style lang="postcss">
@@ -152,9 +151,9 @@ Accepts the attributes of a `div` element.
   {...attributes}
   asChild="{asChild}"
   class="{contentStyles({
-    breakpoint,
+    breakpoint: rootBreakpoint,
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
   el="{el}"
   inTransition="{inTransition}"
diff --git a/src/lib/components/alert-dialog/AlertDialogDescription.svelte b/src/lib/components/alert-dialog/AlertDialogDescription.svelte
index e6e62d9..ab24480 100644
--- a/src/lib/components/alert-dialog/AlertDialogDescription.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogDescription.svelte
@@ -5,7 +5,7 @@
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
-  import { contentContext, rootContext } from './context.js';
+  import { contentContext } from './context.js';
 
   type Primitive = ComponentInfo<AlertDialogPrimitive.Description>;
 
@@ -52,9 +52,7 @@
     throw new Error('AlertDialog.Title must be used within an AlertDialog.Content component.');
   }
 
-  const rootCtx = rootContext.get();
-
-  $: ({ variant } = $rootCtx!);
+  $: ({ rootVariant } = $contentCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -91,7 +89,7 @@ None.
   asChild="{asChild}"
   class="{descriptionStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
   el="{el}"
   let:builder
diff --git a/src/lib/components/alert-dialog/AlertDialogPortal.svelte b/src/lib/components/alert-dialog/AlertDialogPortal.svelte
index e18e9fe..861dd62 100644
--- a/src/lib/components/alert-dialog/AlertDialogPortal.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogPortal.svelte
@@ -51,6 +51,7 @@
 
   $: portalCtx.update(($ctx) => ({
     ...$ctx,
+    ...$rootCtx,
   }));
 </script>
 
diff --git a/src/lib/components/alert-dialog/AlertDialogRoot.svelte b/src/lib/components/alert-dialog/AlertDialogRoot.svelte
index b003f4d..630c180 100644
--- a/src/lib/components/alert-dialog/AlertDialogRoot.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogRoot.svelte
@@ -89,8 +89,8 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    breakpoint,
-    variant,
+    rootBreakpoint: breakpoint,
+    rootVariant: variant,
   }));
 </script>
 
diff --git a/src/lib/components/alert-dialog/AlertDialogTitle.svelte b/src/lib/components/alert-dialog/AlertDialogTitle.svelte
index 2e499c5..e6c306a 100644
--- a/src/lib/components/alert-dialog/AlertDialogTitle.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogTitle.svelte
@@ -5,7 +5,7 @@
 
   import type { ComponentInfo, HeadingLevel } from '$lib/utils/types.js';
 
-  import { contentContext, rootContext } from './context.js';
+  import { contentContext } from './context.js';
 
   type Primitive = ComponentInfo<AlertDialogPrimitive.Title>;
 
@@ -59,9 +59,7 @@
     throw new Error('AlertDialog.Title must be used within an AlertDialog.Content component.');
   }
 
-  const rootCtx = rootContext.get();
-
-  $: ({ variant } = $rootCtx!);
+  $: ({ rootVariant } = $contentCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -99,7 +97,7 @@ None.
   asChild="{asChild}"
   class="{titleStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
   el="{el}"
   level="{level}"
diff --git a/src/lib/components/alert-dialog/context.ts b/src/lib/components/alert-dialog/context.ts
index cc99811..f096a5e 100644
--- a/src/lib/components/alert-dialog/context.ts
+++ b/src/lib/components/alert-dialog/context.ts
@@ -4,6 +4,16 @@ import { Context } from '$lib/utils/context.js';
 
 import type { ContentProps, PortalProps, RootProps } from './index.js';
 
-export const contentContext = new Context<Writable<Pick<ContentProps, never>>>();
-export const portalContext = new Context<Writable<Pick<PortalProps, never>>>();
-export const rootContext = new Context<Writable<Pick<RootProps, 'breakpoint' | 'variant'>>>();
+type ContentContext = PortalContext & {
+  [K in keyof Pick<ContentProps, never> as `content${Capitalize<K>}`]: ContentProps[K];
+};
+type PortalContext = RootContext & {
+  [K in keyof Pick<PortalProps, never> as `portal${Capitalize<K>}`]: PortalProps[K];
+};
+type RootContext = {
+  [K in keyof Pick<RootProps, 'breakpoint' | 'variant'> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const contentContext = new Context<Writable<ContentContext>>();
+export const portalContext = new Context<Writable<PortalContext>>();
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/alert/AlertDescription.svelte b/src/lib/components/alert/AlertDescription.svelte
index 5c1092d..dd8fae0 100644
--- a/src/lib/components/alert/AlertDescription.svelte
+++ b/src/lib/components/alert/AlertDescription.svelte
@@ -48,7 +48,7 @@
     throw new Error('Alert.Description must be used within an Alert.Root component.');
   }
 
-  $: ({ variant } = $rootCtx!);
+  $: ({ rootVariant } = $rootCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -82,7 +82,7 @@ None.
   {...attributes}
   class="{descriptionStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/alert/AlertRoot.svelte b/src/lib/components/alert/AlertRoot.svelte
index 087fff2..ef15b21 100644
--- a/src/lib/components/alert/AlertRoot.svelte
+++ b/src/lib/components/alert/AlertRoot.svelte
@@ -63,7 +63,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    variant,
+    rootVariant: variant,
   }));
 </script>
 
diff --git a/src/lib/components/alert/AlertTitle.svelte b/src/lib/components/alert/AlertTitle.svelte
index 65fb48a..bd5f2e3 100644
--- a/src/lib/components/alert/AlertTitle.svelte
+++ b/src/lib/components/alert/AlertTitle.svelte
@@ -56,7 +56,7 @@
     throw new Error('Alert.Title must be used within an Alert.Root component.');
   }
 
-  $: ({ variant } = $rootCtx!);
+  $: ({ rootVariant } = $rootCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -91,7 +91,7 @@ None.
   {...attributes}
   class="{titleStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/alert/context.ts b/src/lib/components/alert/context.ts
index 8af0a58..53b4a83 100644
--- a/src/lib/components/alert/context.ts
+++ b/src/lib/components/alert/context.ts
@@ -4,4 +4,8 @@ import { Context } from '$lib/utils/context.js';
 
 import type { RootProps } from './index.js';
 
-export const rootContext = new Context<Writable<Pick<RootProps, 'variant'>>>();
+type RootContext = {
+  [K in keyof Pick<RootProps, 'variant'> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/breadcrumb/BreadcrumbItem.svelte b/src/lib/components/breadcrumb/BreadcrumbItem.svelte
index 15a933e..2a8b1ce 100644
--- a/src/lib/components/breadcrumb/BreadcrumbItem.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbItem.svelte
@@ -62,6 +62,7 @@
 
   itemCtx.update(($ctx) => ({
     ...$ctx,
+    ...$listCtx,
   }));
 </script>
 
diff --git a/src/lib/components/breadcrumb/BreadcrumbList.svelte b/src/lib/components/breadcrumb/BreadcrumbList.svelte
index 0d2da8d..eaa65d8 100644
--- a/src/lib/components/breadcrumb/BreadcrumbList.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbList.svelte
@@ -67,13 +67,14 @@
     throw new Error('Breadcrumb.List must be used within a Breadcrumb.Root component.');
   }
 
-  $: ({ breakpoint } = $rootCtx!);
-
   const listCtx = listContext.set(writable());
 
   $: listCtx.update(($ctx) => ({
     ...$ctx,
+    ...$rootCtx,
   }));
+
+  $: ({ rootBreakpoint } = $listCtx);
 </script>
 
 <!-- <style lang="postcss">
@@ -112,7 +113,7 @@ None.
     {...attributes}
     {...builder}
     class="{listStyles({
-      breakpoint,
+      breakpoint: rootBreakpoint,
       class: attributes.class,
     })}"
     bind:this="{el}"
diff --git a/src/lib/components/breadcrumb/BreadcrumbRoot.svelte b/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
index 1633e5a..4ed68be 100644
--- a/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
@@ -81,7 +81,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    breakpoint,
+    rootBreakpoint: breakpoint,
   }));
 </script>
 
diff --git a/src/lib/components/breadcrumb/context.ts b/src/lib/components/breadcrumb/context.ts
index 2834caf..700ccf1 100644
--- a/src/lib/components/breadcrumb/context.ts
+++ b/src/lib/components/breadcrumb/context.ts
@@ -4,6 +4,16 @@ import { Context } from '$lib/utils/context.js';
 
 import type { ItemProps, ListProps, RootProps } from './index.js';
 
-export const itemContext = new Context<Writable<Pick<ItemProps, never>>>();
-export const listContext = new Context<Writable<Pick<ListProps, never>>>();
-export const rootContext = new Context<Writable<Pick<RootProps, 'breakpoint'>>>();
+type ItemContext = ListContext & {
+  [K in keyof Pick<ItemProps, never> as `item${Capitalize<K>}`]: ItemProps[K];
+};
+type ListContext = RootContext & {
+  [K in keyof Pick<ListProps, never> as `list${Capitalize<K>}`]: ListProps[K];
+};
+type RootContext = {
+  [K in keyof Pick<RootProps, 'breakpoint'> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const itemContext = new Context<Writable<ItemContext>>();
+export const listContext = new Context<Writable<ListContext>>();
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/button/ButtonRoot.svelte b/src/lib/components/button/ButtonRoot.svelte
index 22b9c94..1af3217 100644
--- a/src/lib/components/button/ButtonRoot.svelte
+++ b/src/lib/components/button/ButtonRoot.svelte
@@ -93,8 +93,8 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    size,
-    variant,
+    rootSize: size,
+    rootVariant: variant,
   }));
 </script>
 
diff --git a/src/lib/components/button/context.ts b/src/lib/components/button/context.ts
index 7680a7f..cc035ce 100644
--- a/src/lib/components/button/context.ts
+++ b/src/lib/components/button/context.ts
@@ -4,4 +4,8 @@ import { Context } from '$lib/utils/context.js';
 
 import type { RootProps } from './index.js';
 
-export const rootContext = new Context<Writable<Pick<RootProps, 'size' | 'variant'>>>();
+type RootContext = {
+  [K in keyof Pick<RootProps, 'size' | 'variant'> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/calendar/CalendarCell.svelte b/src/lib/components/calendar/CalendarCell.svelte
index 819d402..be3a3fc 100644
--- a/src/lib/components/calendar/CalendarCell.svelte
+++ b/src/lib/components/calendar/CalendarCell.svelte
@@ -59,6 +59,7 @@
 
   $: cellCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridRowCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarGrid.svelte b/src/lib/components/calendar/CalendarGrid.svelte
index 05402a4..968d3cb 100644
--- a/src/lib/components/calendar/CalendarGrid.svelte
+++ b/src/lib/components/calendar/CalendarGrid.svelte
@@ -51,6 +51,7 @@
 
   $: gridCtx.update(($ctx) => ({
     ...$ctx,
+    ...$monthsCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarGridBody.svelte b/src/lib/components/calendar/CalendarGridBody.svelte
index 219d0e6..fbee1a6 100644
--- a/src/lib/components/calendar/CalendarGridBody.svelte
+++ b/src/lib/components/calendar/CalendarGridBody.svelte
@@ -51,6 +51,7 @@
 
   $: gridBodyCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarGridHead.svelte b/src/lib/components/calendar/CalendarGridHead.svelte
index fd61394..06d4493 100644
--- a/src/lib/components/calendar/CalendarGridHead.svelte
+++ b/src/lib/components/calendar/CalendarGridHead.svelte
@@ -51,6 +51,7 @@
 
   $: gridHeadCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarGridRow.svelte b/src/lib/components/calendar/CalendarGridRow.svelte
index 30ddf29..ef06e6c 100644
--- a/src/lib/components/calendar/CalendarGridRow.svelte
+++ b/src/lib/components/calendar/CalendarGridRow.svelte
@@ -54,6 +54,8 @@
 
   $: gridRowCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridHeadCtx,
+    ...$gridBodyCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarHeader.svelte b/src/lib/components/calendar/CalendarHeader.svelte
index 9445187..beffa4c 100644
--- a/src/lib/components/calendar/CalendarHeader.svelte
+++ b/src/lib/components/calendar/CalendarHeader.svelte
@@ -51,6 +51,7 @@
 
   headerCtx.update(($ctx) => ({
     ...$ctx,
+    ...$rootCtx,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/CalendarMonths.svelte b/src/lib/components/calendar/CalendarMonths.svelte
index 69ae3b0..74460c1 100644
--- a/src/lib/components/calendar/CalendarMonths.svelte
+++ b/src/lib/components/calendar/CalendarMonths.svelte
@@ -50,13 +50,13 @@
     throw new Error('Calendar.Months must be used within a Calendar.Root component.');
   }
 
-  $: ({ breakpoint } = $rootCtx!);
-
   const monthsCtx = monthsContext.set(writable());
 
   $: monthsCtx.update(($ctx) => ({
     ...$ctx,
+    ...$rootCtx,
   }));
+  $: ({ rootBreakpoint } = $monthsCtx);
 </script>
 
 <!-- <style lang="postcss">
@@ -89,7 +89,7 @@ None.
 <div
   {...attributes}
   class="{monthsStyles({
-    breakpoint,
+    breakpoint: rootBreakpoint,
     class: attributes.class,
   })}"
 >
diff --git a/src/lib/components/calendar/CalendarRoot.svelte b/src/lib/components/calendar/CalendarRoot.svelte
index 9e85b8b..a348378 100644
--- a/src/lib/components/calendar/CalendarRoot.svelte
+++ b/src/lib/components/calendar/CalendarRoot.svelte
@@ -94,7 +94,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    breakpoint,
+    rootBreakpoint: breakpoint,
   }));
 </script>
 
diff --git a/src/lib/components/calendar/context.ts b/src/lib/components/calendar/context.ts
index 65cf4f7..2f48d58 100644
--- a/src/lib/components/calendar/context.ts
+++ b/src/lib/components/calendar/context.ts
@@ -13,11 +13,36 @@ import type {
   RootProps,
 } from './index.js';
 
-export const cellContext = new Context<Writable<Pick<CellProps, never>>>();
-export const gridBodyContext = new Context<Writable<Pick<GridBodyProps, never>>>();
-export const gridHeadContext = new Context<Writable<Pick<GridHeadProps, never>>>();
-export const gridContext = new Context<Writable<Pick<GridProps, never>>>();
-export const gridRowContext = new Context<Writable<Pick<GridRowProps, never>>>();
-export const headerContext = new Context<Writable<Pick<HeaderProps, never>>>();
-export const monthsContext = new Context<Writable<Pick<MonthsProps, never>>>();
-export const rootContext = new Context<Writable<Pick<RootProps, 'breakpoint'>>>();
+type CellContext = GridRowContext & {
+  [K in keyof Pick<CellProps, never> as `cell${Capitalize<K>}`]: CellProps[K];
+};
+type GridBodyContext = GridContext & {
+  [K in keyof Pick<GridBodyProps, never> as `gridBody${Capitalize<K>}`]: GridBodyProps[K];
+};
+type GridHeadContext = GridContext & {
+  [K in keyof Pick<GridHeadProps, never> as `gridHead${Capitalize<K>}`]: GridHeadProps[K];
+};
+type GridContext = MonthsContext & {
+  [K in keyof Pick<GridProps, never> as `grid${Capitalize<K>}`]: GridProps[K];
+};
+type GridRowContext = (GridHeadContext | GridBodyContext) & {
+  [K in keyof Pick<GridRowProps, never> as `gridRow${Capitalize<K>}`]: GridRowProps[K];
+};
+type HeaderContext = RootContext & {
+  [K in keyof Pick<HeaderProps, never> as `header${Capitalize<K>}`]: HeaderProps[K];
+};
+type MonthsContext = RootContext & {
+  [K in keyof Pick<MonthsProps, never> as `months${Capitalize<K>}`]: MonthsProps[K];
+};
+type RootContext = {
+  [K in keyof Pick<RootProps, 'breakpoint'> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const cellContext = new Context<Writable<CellContext>>();
+export const gridBodyContext = new Context<Writable<GridBodyContext>>();
+export const gridHeadContext = new Context<Writable<GridHeadContext>>();
+export const gridContext = new Context<Writable<GridContext>>();
+export const gridRowContext = new Context<Writable<GridRowContext>>();
+export const headerContext = new Context<Writable<HeaderContext>>();
+export const monthsContext = new Context<Writable<MonthsContext>>();
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/card/CardDescription.svelte b/src/lib/components/card/CardDescription.svelte
index f06727f..6294080 100644
--- a/src/lib/components/card/CardDescription.svelte
+++ b/src/lib/components/card/CardDescription.svelte
@@ -48,7 +48,7 @@
     throw new Error('Card.Description must be used within a Card.Header component.');
   }
 
-  $: ({ variant } = $headerCtx!);
+  $: ({ rootVariant } = $headerCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -82,7 +82,7 @@ None.
   {...attributes}
   class="{descriptionStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/card/CardRoot.svelte b/src/lib/components/card/CardRoot.svelte
index bfcb0ae..17d5d0e 100644
--- a/src/lib/components/card/CardRoot.svelte
+++ b/src/lib/components/card/CardRoot.svelte
@@ -63,7 +63,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    variant,
+    rootVariant: variant,
   }));
 </script>
 
diff --git a/src/lib/components/card/CardTitle.svelte b/src/lib/components/card/CardTitle.svelte
index e3aa19c..81af725 100644
--- a/src/lib/components/card/CardTitle.svelte
+++ b/src/lib/components/card/CardTitle.svelte
@@ -56,7 +56,7 @@
     throw new Error('Card.Title must be used within a Card.Header component.');
   }
 
-  $: ({ variant } = $headerCtx!);
+  $: ({ rootVariant } = $headerCtx!);
 </script>
 
 <!-- <style lang="postcss">
@@ -91,7 +91,7 @@ None.
   {...attributes}
   class="{titleStyles({
     class: attributes.class,
-    variant,
+    variant: rootVariant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/card/context.ts b/src/lib/components/card/context.ts
index 14c1ad5..2e2ff77 100644
--- a/src/lib/components/card/context.ts
+++ b/src/lib/components/card/context.ts
@@ -4,8 +4,12 @@ import { Context } from '$lib/utils/context.js';
 
 import type { HeaderProps, RootProps } from './index.js';
 
-type HeaderContext = RootContext & Pick<HeaderProps, never>;
-type RootContext = Pick<RootProps, 'variant'>;
+type HeaderContext = RootContext & {
+  [K in keyof Pick<HeaderProps, never> as `header${Capitalize<K>}`]: HeaderProps[K];
+};
+type RootContext = {
+  [K in keyof Pick<RootProps, 'variant'> as `root${Capitalize<K>}`]: RootProps[K];
+};
 
 export const headerContext = new Context<Writable<HeaderContext>>();
 export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/checkbox/CheckboxHiddenInput.svelte b/src/lib/components/checkbox/CheckboxHiddenInput.svelte
index edcaca8..07040e0 100644
--- a/src/lib/components/checkbox/CheckboxHiddenInput.svelte
+++ b/src/lib/components/checkbox/CheckboxHiddenInput.svelte
@@ -5,6 +5,8 @@
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { rootContext } from './context.js';
+
   type Primitive = ComponentInfo<CheckboxPrimitive.Input>;
 
   /**
@@ -36,11 +38,41 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.get();
+
+  if (!rootCtx) {
+    throw new Error('Checkbox.HiddenInput must be used within a Checkbox.Root component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The hidden input of the checkbox component.
+
+Must be used within a `Checkbox.Root` component.
+
+### Attributes
+
+Accepts the attributes of a `input` element.
+
+### Events
+
+None.
+
+### Props
+
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+None.
+-->
+
 <CheckboxPrimitive.Input
   {...attributes}
   class="{hiddenInputStyles({
diff --git a/src/lib/components/checkbox/CheckboxIndicator.svelte b/src/lib/components/checkbox/CheckboxIndicator.svelte
index 38ee196..17034fa 100644
--- a/src/lib/components/checkbox/CheckboxIndicator.svelte
+++ b/src/lib/components/checkbox/CheckboxIndicator.svelte
@@ -7,6 +7,8 @@
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
+  import { rootContext } from './context.js';
+
   type Primitive = ComponentInfo<CheckboxPrimitive.Indicator>;
 
   /**
@@ -39,11 +41,45 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.get();
+
+  if (!rootCtx) {
+    throw new Error('Checkbox.Indicator must be used within a Checkbox.Root component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The indicator of the checkbox component.
+
+Must be used within a `Checkbox.Root` component.
+
+### Attributes
+
+Accepts the attributes of a `div` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `attrs` - The attributes of the indicator.
+  - `isChecked` - Whether the checkbox is checked.
+  - `isIndeterminate` - Whether the checkbox is in an indeterminate state.
+-->
+
 <CheckboxPrimitive.Indicator
   {...attributes}
   asChild="{asChild}"
diff --git a/src/lib/components/checkbox/CheckboxRoot.svelte b/src/lib/components/checkbox/CheckboxRoot.svelte
index b37d8de..25d9751 100644
--- a/src/lib/components/checkbox/CheckboxRoot.svelte
+++ b/src/lib/components/checkbox/CheckboxRoot.svelte
@@ -1,14 +1,14 @@
 <script context="module" lang="ts">
   import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-  import CheckIcon from 'lucide-svelte/icons/check';
-  import MinusIcon from 'lucide-svelte/icons/minus';
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { ComponentInfo } from '$lib/utils/types.js';
 
   import CheckboxHiddenInput from './CheckboxHiddenInput.svelte';
   import CheckboxIndicator from './CheckboxIndicator.svelte';
+  import { rootContext } from './context.js';
 
   type Primitive = ComponentInfo<CheckboxPrimitive.Root>;
 
@@ -35,7 +35,9 @@
       'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
       'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
     ],
-    defaultVariants: {},
+    defaultVariants: {
+      disabled: false,
+    },
     variants: {
       disabled: {
         true: ['cursor-not-allowed opacity-50'],
@@ -51,7 +53,7 @@
 
   export let asChild: Props['asChild'] = undefined;
   export let checked: Props['checked'] = undefined;
-  export let disabled: Props['disabled'] = undefined;
+  export let disabled: Props['disabled'] = rootStyles.defaultVariants.disabled;
   export let el: Props['el'] = undefined;
   export let name: Props['name'] = undefined;
   export let onCheckedChange: Props['onCheckedChange'] = undefined;
@@ -59,11 +61,58 @@
   export let value: Props['value'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.set(writable());
+
+  $: rootCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The root of the checkbox component.
+
+### Attributes
+
+Accepts the attributes of a `button` element.
+
+### Events
+
+- `click`
+- `keydown`
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `checked` - The state of the checkbox. You can bind this to a boolean value to programmatically control the checked state.
+- `disabled` - Whether the checkbox is disabled.
+- `el` - Bind to the underlying DOM element of the component.
+- `name` - The name of the checkbox.
+- `onCheckedChange` - A callback function that is called when the checked state changes.
+- `required` - Whether the checkbox is required.
+- `value` - The value of the checkbox.
+
+### Slots
+
+- `default` - The default slot.
+  - `builder` - The builder object, provided when `asChild=true`.
+
+### Components hierarchy
+
+```html
+<Checkbox.Root>
+  <Checkbox.HiddenInput />
+
+  <Checkbox.Indicator />
+</Checkbox.Root>
+```
+-->
+
 <CheckboxPrimitive.Root
   {...attributes}
   asChild="{asChild}"
@@ -82,14 +131,8 @@
   on:keydown
 >
   <slot builder="{builder}">
-    <CheckboxHiddenInput name="{name}" />
-
-    <CheckboxIndicator let:isChecked let:isIndeterminate>
-      {#if isChecked}
-        <CheckIcon class="size-4" />
-      {:else if isIndeterminate}
-        <MinusIcon class="size-4" />
-      {/if}
-    </CheckboxIndicator>
+    <CheckboxHiddenInput />
+
+    <CheckboxIndicator />
   </slot>
 </CheckboxPrimitive.Root>
diff --git a/src/lib/components/checkbox/context.ts b/src/lib/components/checkbox/context.ts
new file mode 100644
index 0000000..8e0f705
--- /dev/null
+++ b/src/lib/components/checkbox/context.ts
@@ -0,0 +1,11 @@
+import type { Writable } from 'svelte/store';
+
+import { Context } from '$lib/utils/context.js';
+
+import type { RootProps } from './index.js';
+
+type RootContext = {
+  [K in keyof Pick<RootProps, never> as `root${Capitalize<K>}`]: RootProps[K];
+};
+
+export const rootContext = new Context<Writable<RootContext>>();