component: Checkbox

src/lib/components/accordion/AccordionHeader.svelte

@@ -52,6 +52,7 @@
 
   $: headerCtx.update(($ctx) => ({
     ...$ctx,
+    ...$itemCtx,
   }));
 </script>
 

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>
 

src/lib/components/accordion/AccordionRoot.svelte

@@ -63,7 +63,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    disabled,
+    rootDisabled: disabled,
   }));
 </script>
 

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>
 

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>>();

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}"

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

src/lib/components/alert-dialog/AlertDialogPortal.svelte

@@ -51,6 +51,7 @@
 
   $: portalCtx.update(($ctx) => ({
     ...$ctx,
+    ...$rootCtx,
   }));
 </script>
 

src/lib/components/alert-dialog/AlertDialogRoot.svelte

@@ -89,8 +89,8 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    breakpoint,
-    variant,
+    rootBreakpoint: breakpoint,
+    rootVariant: variant,
   }));
 </script>
 

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}"

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>>();

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 />

src/lib/components/alert/AlertRoot.svelte

@@ -63,7 +63,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    variant,
+    rootVariant: variant,
   }));
 </script>
 

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 />

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>>();

src/lib/components/breadcrumb/BreadcrumbItem.svelte

@@ -62,6 +62,7 @@
 
   itemCtx.update(($ctx) => ({
     ...$ctx,
+    ...$listCtx,
   }));
 </script>
 

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}"

src/lib/components/breadcrumb/BreadcrumbRoot.svelte

@@ -81,7 +81,7 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    breakpoint,
+    rootBreakpoint: breakpoint,
   }));
 </script>
 

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>>();

src/lib/components/button/ButtonRoot.svelte

@@ -93,8 +93,8 @@
 
   $: rootCtx.update(($ctx) => ({
     ...$ctx,
-    size,
-    variant,
+    rootSize: size,
+    rootVariant: variant,
   }));
 </script>
 

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>>();

src/lib/components/calendar/CalendarCell.svelte

@@ -59,6 +59,7 @@
 
   $: cellCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridRowCtx,
   }));
 </script>
 

src/lib/components/calendar/CalendarGrid.svelte

@@ -51,6 +51,7 @@
 
   $: gridCtx.update(($ctx) => ({
     ...$ctx,
+    ...$monthsCtx,
   }));
 </script>
 

src/lib/components/calendar/CalendarGridBody.svelte

@@ -51,6 +51,7 @@
 
   $: gridBodyCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridCtx,
   }));
 </script>
 

src/lib/components/calendar/CalendarGridHead.svelte

@@ -51,6 +51,7 @@
 
   $: gridHeadCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridCtx,
   }));
 </script>
 

src/lib/components/calendar/CalendarGridRow.svelte

@@ -54,6 +54,8 @@
 
   $: gridRowCtx.update(($ctx) => ({
     ...$ctx,
+    ...$gridHeadCtx,
+    ...$gridBodyCtx,
   }));
 </script>