diff --git a/.changeset/khaki-owls-camp.md b/.changeset/khaki-owls-camp.md
new file mode 100644
index 0000000..c96b4f1
--- /dev/null
+++ b/.changeset/khaki-owls-camp.md
@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': minor
+---
+
+Added tooltip and separator components
diff --git a/package.json b/package.json
index 890f84a..14a5163 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,10 @@
       "types": "./dist/components/select/index.d.ts",
       "svelte": "./dist/components/select/index.js"
     },
+    "./components/separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "svelte": "./dist/components/separator/index.js"
+    },
     "./components/switch": {
       "types": "./dist/components/switch/index.d.ts",
       "svelte": "./dist/components/switch/index.js"
@@ -90,6 +94,10 @@
       "types": "./dist/components/textarea/index.d.ts",
       "svelte": "./dist/components/textarea/index.js"
     },
+    "./components/tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "svelte": "./dist/components/tooltip/index.js"
+    },
     "./package.json": "./package.json",
     "./transition/flyAndScale": {
       "types": "./dist/transition/flyAndScale.d.ts",
@@ -113,11 +121,17 @@
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
+  "homepage": "https://github.com/jeannemas/svelte-ui",
   "license": "MIT",
   "name": "@jeanne-mas/svelte-ui",
   "peerDependencies": {
     "svelte": "^4.0.0"
   },
+  "repository": {
+    "directory": "https://github.com/jeannemas/svelte-ui",
+    "type": "git",
+    "url": "https://github.com/jeannemas/svelte-ui.git"
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
diff --git a/src/lib/components/input/Input.svelte b/src/lib/components/input/Input.svelte
index 7b7b72e..50192f3 100644
--- a/src/lib/components/input/Input.svelte
+++ b/src/lib/components/input/Input.svelte
@@ -13,7 +13,7 @@
          */
         value?: number;
         /**
-         * The type of the input.
+         * The variant of the input.
          */
         variant: 'number';
       }
@@ -23,7 +23,7 @@
          */
         value?: string;
         /**
-         * The type of the input.
+         * The variant of the input.
          */
         variant: 'text';
       };
diff --git a/src/lib/components/separator/Separator.svelte b/src/lib/components/separator/Separator.svelte
new file mode 100644
index 0000000..df1e832
--- /dev/null
+++ b/src/lib/components/separator/Separator.svelte
@@ -0,0 +1,47 @@
+<script context="module" lang="ts">
+  import { Separator as SeparatorPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<SeparatorPrimitive.Props, keyof Attributes>;
+  export type Slots = ComponentSlots<SeparatorPrimitive.Root>;
+
+  export const defaultOrientation = 'horizontal' as const;
+  export const orientations = ['horizontal', 'vertical'] as const satisfies Props['orientation'][];
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let decorative: Props['decorative'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let orientation: Props['orientation'] = defaultOrientation;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<SeparatorPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{cn(
+    'shrink-0 bg-border',
+    orientation === 'horizontal' ? 'my-4 h-[1px] w-full' : 'mx-4 h-full w-[1px]',
+    attributes.class,
+  )}"
+  decorative="{decorative}"
+  el="{el}"
+  orientation="{orientation}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</SeparatorPrimitive.Root>
diff --git a/src/lib/components/separator/index.ts b/src/lib/components/separator/index.ts
new file mode 100644
index 0000000..11fadf0
--- /dev/null
+++ b/src/lib/components/separator/index.ts
@@ -0,0 +1,9 @@
+export {
+  default,
+  defaultOrientation,
+  orientations,
+  type Attributes,
+  type Events,
+  type Props,
+  type Slots,
+} from './Separator.svelte';
diff --git a/src/lib/components/tooltip/Content.svelte b/src/lib/components/tooltip/Content.svelte
new file mode 100644
index 0000000..f91a71a
--- /dev/null
+++ b/src/lib/components/tooltip/Content.svelte
@@ -0,0 +1,97 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import { flyAndScale } from '$lib/transition/flyAndScale.js';
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentSlots, Transition } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['div'];
+  export type Events = Record<never, never>;
+  export type Props<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = Omit<
+    TooltipPrimitive.ContentProps<TTransition, TTransitionIn, TTransitionOut>,
+    keyof Attributes
+  >;
+  export type Slots<
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition,
+  > = ComponentSlots<TooltipPrimitive.Content<TTransition, TTransitionIn, TTransitionOut>>;
+</script>
+
+<script
+  generics="
+    TTransition extends Transition = Transition,
+    TTransitionIn extends Transition = Transition,
+    TTransitionOut extends Transition = Transition
+  "
+  lang="ts"
+>
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & TypedProps;
+  type $$Slots = TypedSlots;
+  type TypedProps = Props<TTransition, TTransitionIn, TTransitionOut>;
+  type TypedSlots = Slots<TTransition, TTransitionIn, TTransitionOut>;
+
+  export let align: TypedProps['align'] = undefined;
+  export let alignOffset: TypedProps['alignOffset'] = undefined;
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let avoidCollisions: TypedProps['avoidCollisions'] = undefined;
+  export let collisionBoundary: TypedProps['collisionBoundary'] = undefined;
+  export let collisionPadding: TypedProps['collisionPadding'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let fitViewport: TypedProps['fitViewport'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = undefined;
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = undefined;
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let overlap: TypedProps['overlap'] = undefined;
+  export let sameWidth: TypedProps['sameWidth'] = undefined;
+  export let side: TypedProps['side'] = undefined;
+  export let sideOffset: TypedProps['sideOffset'] = 4;
+  export let strategy: TypedProps['strategy'] = undefined;
+  export let transition: TypedProps['transition'] = flyAndScale as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = {
+    y: 8,
+    duration: 150,
+  };
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Content
+  {...attributes}
+  align="{align}"
+  alignOffset="{alignOffset}"
+  asChild="{asChild}"
+  avoidCollisions="{avoidCollisions}"
+  class="{cn(
+    'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+    attributes.class,
+  )}"
+  collisionBoundary="{collisionBoundary}"
+  collisionPadding="{collisionPadding}"
+  el="{el}"
+  fitViewport="{fitViewport}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  overlap="{overlap}"
+  sameWidth="{sameWidth}"
+  side="{side}"
+  sideOffset="{sideOffset}"
+  strategy="{strategy}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</TooltipPrimitive.Content>
diff --git a/src/lib/components/tooltip/Root.svelte b/src/lib/components/tooltip/Root.svelte
new file mode 100644
index 0000000..ff2e6fc
--- /dev/null
+++ b/src/lib/components/tooltip/Root.svelte
@@ -0,0 +1,44 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = Record<never, never>;
+  export type Events = Pick<TooltipPrimitive.Props, 'onOpenChange'>;
+  export type Props = Omit<TooltipPrimitive.Props, keyof Events>;
+  export type Slots = ComponentSlots<TooltipPrimitive.Root>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let closeDelay: Props['closeDelay'] = 0;
+  export let closeOnEscape: Props['closeOnEscape'] = undefined;
+  export let closeOnPointerDown: Props['closeOnPointerDown'] = undefined;
+  export let disableHoverableContent: Props['disableHoverableContent'] = undefined;
+  export let group: Props['group'] = undefined;
+  export let open: Props['open'] = undefined;
+  export let openDelay: Props['openDelay'] = 0;
+  export let portal: Props['portal'] = undefined;
+
+  // $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Root
+  closeDelay="{closeDelay}"
+  closeOnEscape="{closeOnEscape}"
+  closeOnPointerDown="{closeOnPointerDown}"
+  disableHoverableContent="{disableHoverableContent}"
+  group="{group}"
+  openDelay="{openDelay}"
+  portal="{portal}"
+  bind:open="{open}"
+  let:ids
+>
+  <slot ids="{ids}" />
+</TooltipPrimitive.Root>
diff --git a/src/lib/components/tooltip/Trigger.svelte b/src/lib/components/tooltip/Trigger.svelte
new file mode 100644
index 0000000..08a616e
--- /dev/null
+++ b/src/lib/components/tooltip/Trigger.svelte
@@ -0,0 +1,29 @@
+<script context="module" lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+
+  import type { ComponentSlots } from '$lib/utils/types.js';
+
+  export type Attributes = SvelteHTMLElements['button'];
+  export type Events = Record<never, never>;
+  export type Props = Omit<TooltipPrimitive.TriggerProps, keyof Attributes>;
+  export type Slots = ComponentSlots<TooltipPrimitive.Trigger>;
+</script>
+
+<script lang="ts">
+  type $$Events = Record<never, never>;
+  type $$Props = Attributes & Events & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<TooltipPrimitive.Trigger {...attributes} asChild="{asChild}" el="{el}" let:builder>
+  <slot builder="{builder}" />
+</TooltipPrimitive.Trigger>
diff --git a/src/lib/components/tooltip/index.ts b/src/lib/components/tooltip/index.ts
new file mode 100644
index 0000000..16cde2b
--- /dev/null
+++ b/src/lib/components/tooltip/index.ts
@@ -0,0 +1,21 @@
+export {
+  default as Content,
+  type Attributes as ContentAttributes,
+  type Events as ContentEvents,
+  type Props as ContentProps,
+  type Slots as ContentSlots,
+} from './Content.svelte';
+export {
+  default as Root,
+  type Attributes as RootAttributes,
+  type Events as RootEvents,
+  type Props as RootProps,
+  type Slots as RootSlots,
+} from './Root.svelte';
+export {
+  default as Trigger,
+  type Attributes as TriggerAttributes,
+  type Events as TriggerEvents,
+  type Props as TriggerProps,
+  type Slots as TriggerSlots,
+} from './Trigger.svelte';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index acc9fd7..5c58813 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,13 +11,7 @@
 
 <script lang="ts">
   const title = derived(page, ($page) => {
-    const { id } = $page.route;
-
-    if (!id) {
-      return 'Home';
-    }
-
-    const str = id.replaceAll(/[^\w]/g, ' ').split(' ').filter(Boolean).join(' ');
+    const str = $page.route.id!.replaceAll(/[^\w]/g, ' ').split(' ').filter(Boolean).join(' ');
 
     return str.charAt(0).toUpperCase() + str.slice(1);
   });
diff --git a/src/routes/button/+page.svelte b/src/routes/button/+page.svelte
index 3bd9bbe..32ecf4d 100644
--- a/src/routes/button/+page.svelte
+++ b/src/routes/button/+page.svelte
@@ -11,6 +11,7 @@
   } from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -34,11 +35,11 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}">
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Disabled</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.disabled}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
     </Form.Control>
 
     <Form.Description>Whether the button is disabled.</Form.Description>
@@ -46,7 +47,7 @@
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="size" superForm="{superForm}">
+  <Form.Field name="size" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Size</Form.Label>
 
@@ -66,7 +67,7 @@
             }
           : undefined}"
       >
-        <Select.Input {...attrs} />
+        <Select.Input {...attrs} {...constraints} />
 
         <Select.Trigger>
           <Select.Value />
@@ -87,7 +88,7 @@
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="variant" superForm="{superForm}">
+  <Form.Field name="variant" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Variant</Form.Label>
 
@@ -107,7 +108,7 @@
             }
           : undefined}"
       >
-        <Select.Input {...attrs} />
+        <Select.Input {...attrs} {...constraints} />
 
         <Select.Trigger>
           <Select.Value />
@@ -129,6 +130,12 @@
   </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
-<Button {...$superFormData}>Lorem ipsum</Button>
+<Button
+  disabled="{$superFormData.disabled}"
+  size="{$superFormData.size}"
+  variant="{$superFormData.variant}"
+>
+  Lorem ipsum
+</Button>
diff --git a/src/routes/calendar/+page.svelte b/src/routes/calendar/+page.svelte
index e820588..2413da5 100644
--- a/src/routes/calendar/+page.svelte
+++ b/src/routes/calendar/+page.svelte
@@ -5,13 +5,19 @@
 
   import * as Calendar from '$lib/components/calendar/index.js';
   import * as Form from '$lib/components/form/index.js';
+  import Input from '$lib/components/input/index.js';
   import * as Select from '$lib/components/select/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
     z.object({
       disabled: z.boolean().default(false).optional(),
-      weekdayFormat: z.enum(['long', 'narrow', 'short']).default('narrow').optional(),
+      fixedWeeks: z.boolean().default(false).optional(),
+      numberOfMonths: z.number().int().min(1).default(1).optional(),
+      pagedNavigation: z.boolean().default(false).optional(),
+      preventDeselect: z.boolean().default(false).optional(),
+      readonly: z.boolean().default(false).optional(),
       weekStartsOn: z
         .union([
           z.literal(0),
@@ -24,6 +30,7 @@
         ])
         .default(0)
         .optional(),
+      weekdayFormat: z.enum(['long', 'narrow', 'short']).default('narrow').optional(),
     }),
   );
 </script>
@@ -40,19 +47,113 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}">
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Disabled</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.disabled}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether the calendar is disabled. When true, the user will not be able to focus or select
+      dates.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="fixedWeeks" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Fixed weeks</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.fixedWeeks}" />
+    </Form.Control>
+
+    <Form.Description>
+      Display 6 weeks per month, regardless the month's number of weeks. This is useful for
+      displaying a consistent calendar, where the size of the calendar doesn't change month to
+      month.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="numberOfMonths" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Number of months</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        variant="number"
+        bind:value="{$superFormData.numberOfMonths}"
+      />
     </Form.Control>
 
-    <Form.Description>Whether the calendar is disabled.</Form.Description>
+    <Form.Description>
+      Determines the number of months to display on the calendar simultaneously.
+    </Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="weekStartsOn" superForm="{superForm}">
+  <Form.Field name="pagedNavigation" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Paged navigation</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.pagedNavigation}" />
+    </Form.Control>
+
+    <Form.Description>
+      <p>Applicable only when numberOfMonths is greater than 1.</p>
+
+      <p>
+        Controls whether to use paged navigation for the next and previous buttons in the date
+        picker. With paged navigation set to true, clicking the next/prev buttons changes all months
+        in view. When set to false, it shifts the view by a single month.
+      </p>
+
+      <p>
+        For example, with pagedNavigation set to true and 2 months displayed (January and February),
+        clicking the next button changes the view to March and April. If pagedNavigation is false,
+        the view shifts to February and March.
+      </p>
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="preventDeselect" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Prevent deselect</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventDeselect}" />
+    </Form.Control>
+
+    <Form.Description>
+      Prevent deselecting the selected date(s), which would set the value to undefined. You can use
+      this to ensure a date is always selected in certain situations.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="readonly" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Readonly</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.readonly}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether the calendar is readonly. When true, the user will be able to focus and navigate the
+      calendar, but will not be able to select dates.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="weekStartsOn" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Week starts on</Form.Label>
 
@@ -72,7 +173,7 @@
             }
           : undefined}"
       >
-        <Select.Input {...attrs} />
+        <Select.Input {...attrs} {...constraints} />
 
         <Select.Trigger>
           <Select.Value />
@@ -88,12 +189,15 @@
       </Select.Root>
     </Form.Control>
 
-    <Form.Description>The index of the first day of the week.</Form.Description>
+    <Form.Description>
+      The day of the week to start the calendar on, which must be a number between 0 and 6, where 0
+      is Sunday and 6 is Saturday.
+    </Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="weekdayFormat" superForm="{superForm}">
+  <Form.Field name="weekdayFormat" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Weekday format</Form.Label>
 
@@ -113,7 +217,7 @@
             }
           : undefined}"
       >
-        <Select.Input {...attrs} />
+        <Select.Input {...attrs} {...constraints} />
 
         <Select.Trigger>
           <Select.Value />
@@ -129,12 +233,33 @@
       </Select.Root>
     </Form.Control>
 
-    <Form.Description>The format of the weekdays.</Form.Description>
+    <Form.Description>
+      How the string representation of the weekdays provided via the weekdays state store should be
+      formatted.
+
+      <ul class="list-inside list-disc">
+        <li>"long": "Sunday", "Monday", "Tuesday", etc.</li>
+
+        <li>"short": "Sun", "Mon", "Tue", etc.</li>
+
+        <li>"narrow": "S", "M", "T", etc.</li>
+      </ul>
+    </Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
-<Calendar.Root {...$superFormData} class="inline-block rounded-md border border-border" />
+<Calendar.Root
+  class="inline-block rounded-md border border-border"
+  disabled="{$superFormData.disabled}"
+  fixedWeeks="{$superFormData.fixedWeeks}"
+  numberOfMonths="{$superFormData.numberOfMonths}"
+  pagedNavigation="{$superFormData.pagedNavigation}"
+  preventDeselect="{$superFormData.preventDeselect}"
+  readonly="{$superFormData.readonly}"
+  weekStartsOn="{$superFormData.weekStartsOn}"
+  weekdayFormat="{$superFormData.weekdayFormat}"
+/>
diff --git a/src/routes/collapsible/+page.svelte b/src/routes/collapsible/+page.svelte
index 4f2a896..b9f9c45 100644
--- a/src/routes/collapsible/+page.svelte
+++ b/src/routes/collapsible/+page.svelte
@@ -1,19 +1,67 @@
 <script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
   import Button from '$lib/components/button/index.js';
   import * as Collapsible from '$lib/components/collapsible/index.js';
+  import * as Form from '$lib/components/form/index.js';
+  import Separator from '$lib/components/separator/index.js';
+  import Switch from '$lib/components/switch/index.js';
+
+  const adapter = zod(
+    z.object({
+      disabled: z.boolean().default(false).optional(),
+      open: z.boolean().default(false).optional(),
+    }),
+  );
 </script>
 
 <script lang="ts">
-  let open = false;
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<Collapsible.Root bind:open="{open}">
+<Form.Root superForm="{superForm}">
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Disabled</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether the collapsible is disabled which prevents it from being opened.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="open" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Open</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+    </Form.Control>
+
+    <Form.Description>The open state of the collapsible.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<Collapsible.Root disabled="{$superFormData.disabled}" bind:open="{$superFormData.open}">
   <Collapsible.Trigger asChild let:builder>
     <Button builders="{[builder]}">
-      {builder['data-state']}
+      State: {builder['data-state']}
     </Button>
   </Collapsible.Trigger>
 
diff --git a/src/routes/container/+page.svelte b/src/routes/container/+page.svelte
index c6f8f46..fd9f707 100644
--- a/src/routes/container/+page.svelte
+++ b/src/routes/container/+page.svelte
@@ -5,6 +5,7 @@
 
   import Container from '$lib/components/container/index.js';
   import * as Form from '$lib/components/form/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -27,32 +28,32 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="xAxis" superForm="{superForm}">
+  <Form.Field name="xAxis" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>X axis</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.xAxis}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.xAxis}" />
     </Form.Control>
 
-    <Form.Description>Whether the x-axis is enabled.</Form.Description>
+    <Form.Description>Whether to add horizontal padding.</Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="yAxis" superForm="{superForm}">
+  <Form.Field name="yAxis" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Y axis</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.yAxis}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.yAxis}" />
     </Form.Control>
 
-    <Form.Description>Whether the y-axis is enabled.</Form.Description>
+    <Form.Description>Whether to add vertical padding.</Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
 <p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Non beatae, cupiditate unde cumque facere
@@ -60,7 +61,11 @@
   Aliquid autem dolorem magni.
 </p>
 
-<Container {...$superFormData} class="bg-slate-300 transition-all duration-75">
+<Container
+  class="bg-slate-300 transition-all duration-75"
+  xAxis="{$superFormData.xAxis}"
+  yAxis="{$superFormData.yAxis}"
+>
   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam sapiente nisi omnis temporibus
   veritatis nihil eligendi impedit similique quo, neque sequi voluptate, ipsum optio odit repellat
   ipsam quidem delectus libero.
diff --git a/src/routes/form/+page.svelte b/src/routes/form/+page.svelte
index f799f10..e87a317 100644
--- a/src/routes/form/+page.svelte
+++ b/src/routes/form/+page.svelte
@@ -5,8 +5,15 @@
 
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
+  import Separator from '$lib/components/separator/index.js';
+  import Switch from '$lib/components/switch/index.js';
 
-  const adapter = zod(
+  const adapter1 = zod(
+    z.object({
+      debug: z.boolean().default(false).optional(),
+    }),
+  );
+  const adapter2 = zod(
     z.object({
       username: z.string().min(2).max(50),
     }),
@@ -14,22 +21,45 @@
 </script>
 
 <script lang="ts">
-  const superForm = createSuperForm(defaults(adapter), {
+  const superForm1 = createSuperForm(defaults(adapter1), {
+    SPA: true,
+    validators: adapter1,
+  });
+  const { form: superFormData1 } = superForm1;
+  const superForm2 = createSuperForm(defaults(adapter2), {
     SPA: true,
-    validators: adapter,
+    validators: adapter2,
   });
-  const { form: superFormData } = superForm;
+  const { form: superFormData2 } = superForm2;
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="username" superForm="{superForm}">
+<Form.Root superForm="{superForm1}">
+  <Form.Field name="debug" superForm="{superForm1}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Debug</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData1.debug}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether to display the form state in a debug panel underneath the form.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<Form.Root debug="{$superFormData1.debug}" superForm="{superForm2}">
+  <Form.Field name="username" superForm="{superForm2}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Placeholder</Form.Label>
 
-      <Input {...attrs} variant="text" bind:value="{$superFormData.username}" />
+      <Input {...attrs} {...constraints} variant="text" bind:value="{$superFormData2.username}" />
     </Form.Control>
 
     <Form.Description>This is your public display name.</Form.Description>
diff --git a/src/routes/input/+page.svelte b/src/routes/input/+page.svelte
index 75672eb..74f0751 100644
--- a/src/routes/input/+page.svelte
+++ b/src/routes/input/+page.svelte
@@ -6,6 +6,7 @@
   import * as Form from '$lib/components/form/index.js';
   import Input, { variants } from '$lib/components/input/index.js';
   import * as Select from '$lib/components/select/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -29,11 +30,11 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}">
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Disabled</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.disabled}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
     </Form.Control>
 
     <Form.Description>Whether the input is disabled.</Form.Description>
@@ -41,11 +42,11 @@
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="placeholder" superForm="{superForm}">
+  <Form.Field name="placeholder" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Placeholder</Form.Label>
 
-      <Input {...attrs} variant="text" bind:value="{$superFormData.placeholder}" />
+      <Input {...attrs} {...constraints} variant="text" bind:value="{$superFormData.placeholder}" />
     </Form.Control>
 
     <Form.Description>The input placeholder.</Form.Description>
@@ -53,7 +54,7 @@
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="variant" superForm="{superForm}">
+  <Form.Field name="variant" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Variant</Form.Label>
 
@@ -73,7 +74,7 @@
             }
           : undefined}"
       >
-        <Select.Input {...attrs} />
+        <Select.Input {...attrs} {...constraints} />
 
         <Select.Trigger>
           <Select.Value />
@@ -95,6 +96,10 @@
   </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
-<Input {...$superFormData} />
+<Input
+  disabled="{$superFormData.disabled}"
+  placeholder="{$superFormData.placeholder}"
+  variant="{$superFormData.variant}"
+/>
diff --git a/src/routes/label/+page.svelte b/src/routes/label/+page.svelte
index 58db907..5216647 100644
--- a/src/routes/label/+page.svelte
+++ b/src/routes/label/+page.svelte
@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
   import Label from '$lib/components/label/index.js';
+  import Separator from '$lib/components/separator/index.js';
 </script>
 
 <script lang="ts">
@@ -8,6 +9,8 @@
 <!-- <style lang="postcss">
 </style> -->
 
+<Separator />
+
 <div class="flex items-center space-x-2">
   <!-- <Checkbox id="terms" /> -->
 
diff --git a/src/routes/popover/+page.svelte b/src/routes/popover/+page.svelte
index a28e15c..07b019c 100644
--- a/src/routes/popover/+page.svelte
+++ b/src/routes/popover/+page.svelte
@@ -1,17 +1,118 @@
 <script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
   import Button from '$lib/components/button/index.js';
+  import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import Label from '$lib/components/label/index.js';
   import * as Popover from '$lib/components/popover/index.js';
+  import Separator from '$lib/components/separator/index.js';
+  import Switch from '$lib/components/switch/index.js';
+
+  const adapter = zod(
+    z.object({
+      closeOnEscape: z.boolean().default(true).optional(),
+      closeOnOutsideClick: z.boolean().default(true).optional(),
+      disableFocusTrap: z.boolean().default(false).optional(),
+      open: z.boolean().default(false).optional(),
+      preventScroll: z.boolean().default(false).optional(),
+    }),
+  );
 </script>
 
 <script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<Popover.Root portal="{null}">
+<Form.Root superForm="{superForm}">
+  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on escape</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to close the popover when the escape key is pressed.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on outside click</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to close the popover when the escape key is pressed.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="disableFocusTrap" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Disable focus trap</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableFocusTrap}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to disable the focus trap when the popover is open.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="open" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Open</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+    </Form.Control>
+
+    <Form.Description>The open state of the popover.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Prevent scroll</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to prevent scrolling when the popover is open.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<Popover.Root
+  closeOnEscape="{$superFormData.closeOnEscape}"
+  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
+  disableFocusTrap="{$superFormData.disableFocusTrap}"
+  portal="{null}"
+  preventScroll="{$superFormData.preventScroll}"
+  bind:open="{$superFormData.open}"
+>
   <Popover.Trigger asChild let:builder>
     <Button builders="{[builder]}" variant="outline">Open</Button>
   </Popover.Trigger>
diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
index f0a8ab8..6e27270 100644
--- a/src/routes/select/+page.svelte
+++ b/src/routes/select/+page.svelte
@@ -1,61 +1,151 @@
 <script context="module" lang="ts">
-  import { derived } from 'svelte/store';
+  import type { Selected } from 'bits-ui';
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
 
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
+  import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
+  import Separator from '$lib/components/separator/index.js';
+  import Switch from '$lib/components/switch/index.js';
 
-  const fruitKey = 'fruit';
-  const fruitKeys = ['apple', 'banana', 'blueberry', 'grapes', 'pineapple'];
+  const adapter = zod(
+    z.object({
+      closeOnEscape: z.boolean().default(true).optional(),
+      closeOnOutsideClick: z.boolean().default(true).optional(),
+      disabled: z.boolean().default(false).optional(),
+      loop: z.boolean().default(false).optional(),
+      open: z.boolean().default(false).optional(),
+      preventScroll: z.boolean().default(false).optional(),
+    }),
+  );
+  const fruits = ['apple', 'banana', 'blueberry', 'grapes', 'pineapple'];
 </script>
 
 <script lang="ts">
-  const fruit = derived(page, ($page) => {
-    const fruit = $page.url.searchParams.get(fruitKey);
-
-    return fruit && fruitKeys.includes(fruit) ? fruit : 'apple';
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
   });
+  const { form: superFormData } = superForm;
+
+  let selectedFruit: Selected<string> | undefined = undefined;
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<hr class="my-4 border-y border-border" />
+<Form.Root superForm="{superForm}">
+  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on escape</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to close the listbox menu when the user presses the escape key.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on outside click</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to close the listbox menu when the user clicks outside of the listbox.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Disabled</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+    </Form.Control>
+
+    <Form.Description>Whether the select is disabled.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="loop" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Loop</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not the listbox should loop through the list when the end or beginning is reached.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="open" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Open</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+    </Form.Control>
+
+    <Form.Description>The open state of the select menu.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Prevent scroll</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+    </Form.Control>
+
+    <Form.Description>
+      Whether or not to prevent scrolling the page when the listbox menu is open.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
 
 <Select.Root
-  items="{fruitKeys.map((fruitKey) => ({
-    label: fruitKey,
-    value: fruitKey,
+  closeOnEscape="{$superFormData.closeOnEscape}"
+  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
+  disabled="{$superFormData.disabled}"
+  items="{fruits.map((fruit) => ({
+    label: fruit,
+    value: fruit,
   }))}"
+  loop="{$superFormData.loop}"
   onSelectedChange="{(selected) => {
-    const url = new URL($page.url);
-
-    if (selected) {
-      url.searchParams.set(fruitKey, selected.value);
-    } else {
-      url.searchParams.delete(fruitKey);
-    }
-
-    goto(url);
+    selectedFruit = selected;
   }}"
   portal="{null}"
-  selected="{$fruit !== undefined
-    ? {
-        label: $fruit,
-        value: $fruit,
-      }
-    : undefined}"
+  preventScroll="{$superFormData.preventScroll}"
+  selected="{selectedFruit}"
+  bind:open="{$superFormData.open}"
 >
-  <Select.Input id="{fruitKey}" name="{fruitKey}" />
+  <Select.Input id="fruit" name="fruit" />
 
   <Select.Trigger>
     <Select.Value placeholder="Select a fruit" />
   </Select.Trigger>
 
   <Select.Content>
-    {#each fruitKeys as fruitKey, index (index)}
-      <Select.Item value="{fruitKey}">
-        {fruitKey}
+    {#each fruits as fruit, index (index)}
+      <Select.Item value="{fruit}">
+        {fruit}
       </Select.Item>
     {/each}
   </Select.Content>
diff --git a/src/routes/separator/+page.svelte b/src/routes/separator/+page.svelte
new file mode 100644
index 0000000..185fd1d
--- /dev/null
+++ b/src/routes/separator/+page.svelte
@@ -0,0 +1,87 @@
+<script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
+  import * as Form from '$lib/components/form/index.js';
+  import * as Select from '$lib/components/select/index.js';
+  import Separator, { defaultOrientation, orientations } from '$lib/components/separator/index.js';
+
+  const adapter = zod(
+    z.object({
+      orientation: z.enum(orientations).default(defaultOrientation).optional(),
+    }),
+  );
+</script>
+
+<script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Form.Root superForm="{superForm}">
+  <Form.Field name="orientation" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Orientation</Form.Label>
+
+      <Select.Root
+        items="{orientations.map((orientation) => ({
+          label: orientation,
+          value: orientation,
+        }))}"
+        onSelectedChange="{(selected) => {
+          $superFormData.orientation = selected?.value;
+        }}"
+        portal="{null}"
+        selected="{$superFormData.orientation !== undefined
+          ? {
+              label: $superFormData.orientation,
+              value: $superFormData.orientation,
+            }
+          : undefined}"
+      >
+        <Select.Input {...attrs} {...constraints} />
+
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+
+        <Select.Content>
+          {#each orientations as orientation, index (index)}
+            <Select.Item value="{orientation}">
+              {orientation}
+            </Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+    </Form.Control>
+
+    <Form.Description>The orientation of the separator.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<div
+  class="flex h-5 items-center text-sm"
+  class:flex-col="{$superFormData.orientation === 'horizontal'}"
+  class:flex-row="{$superFormData.orientation === 'vertical'}"
+>
+  <div>Foo</div>
+
+  <Separator orientation="{$superFormData.orientation}" />
+
+  <div>Bar</div>
+
+  <Separator orientation="{$superFormData.orientation}" />
+
+  <div>Baz</div>
+</div>
diff --git a/src/routes/switch/+page.svelte b/src/routes/switch/+page.svelte
index 21b8fee..c371d54 100644
--- a/src/routes/switch/+page.svelte
+++ b/src/routes/switch/+page.svelte
@@ -4,10 +4,12 @@
   import z from 'zod';
 
   import * as Form from '$lib/components/form/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
     z.object({
+      checked: z.boolean().default(false).optional(),
       disabled: z.boolean().default(false).optional(),
     }),
   );
@@ -25,19 +27,33 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}">
+  <Form.Field name="checked" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Checked</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.checked}" />
+    </Form.Control>
+
+    <Form.Description>The checked state of the switch.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Disabled</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.disabled}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
     </Form.Control>
 
-    <Form.Description>Whether the switch is disabled.</Form.Description>
+    <Form.Description>
+      When <code>true</code>, prevents the user from interacting with the switch.
+    </Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
-<Switch {...$superFormData} />
+<Switch disabled="{$superFormData.disabled}" bind:checked="{$superFormData.checked}" />
diff --git a/src/routes/textarea/+page.svelte b/src/routes/textarea/+page.svelte
index 868e919..d93fa3a 100644
--- a/src/routes/textarea/+page.svelte
+++ b/src/routes/textarea/+page.svelte
@@ -4,6 +4,7 @@
   import z from 'zod';
 
   import * as Form from '$lib/components/form/index.js';
+  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
   import Textarea from '$lib/components/textarea/index.js';
 
@@ -11,6 +12,7 @@
     z.object({
       disabled: z.boolean().default(false).optional(),
       placeholder: z.string().default('').optional(),
+      readonly: z.boolean().default(false).optional(),
     }),
   );
 </script>
@@ -27,11 +29,11 @@
 </style> -->
 
 <Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}">
+  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Disabled</Form.Label>
 
-      <Switch {...attrs} bind:checked="{$superFormData.disabled}" />
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
     </Form.Control>
 
     <Form.Description>Whether the textarea is disabled.</Form.Description>
@@ -39,19 +41,35 @@
     <Form.FieldErrors />
   </Form.Field>
 
-  <Form.Field name="placeholder" superForm="{superForm}">
+  <Form.Field name="placeholder" superForm="{superForm}" let:constraints>
     <Form.Control let:attrs>
       <Form.Label>Placeholder</Form.Label>
 
-      <Textarea {...attrs} bind:value="{$superFormData.placeholder}" />
+      <Textarea {...attrs} {...constraints} bind:value="{$superFormData.placeholder}" />
     </Form.Control>
 
     <Form.Description>The textarea placeholder.</Form.Description>
 
     <Form.FieldErrors />
   </Form.Field>
+
+  <Form.Field name="readonly" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Readonly</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.readonly}" />
+    </Form.Control>
+
+    <Form.Description>Whether the textarea is read-only.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
 </Form.Root>
 
-<hr class="my-4 border-y border-border" />
+<Separator />
 
-<Textarea {...$superFormData} />
+<Textarea
+  disabled="{$superFormData.disabled}"
+  placeholder="{$superFormData.placeholder}"
+  readonly="{$superFormData.readonly}"
+/>
diff --git a/src/routes/tooltip/+page.svelte b/src/routes/tooltip/+page.svelte
new file mode 100644
index 0000000..9ead19e
--- /dev/null
+++ b/src/routes/tooltip/+page.svelte
@@ -0,0 +1,141 @@
+<script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
+  import Button from '$lib/components/button/index.js';
+  import * as Form from '$lib/components/form/index.js';
+  import Input from '$lib/components/input/index.js';
+  import Separator from '$lib/components/separator/index.js';
+  import Switch from '$lib/components/switch/index.js';
+  import * as Tooltip from '$lib/components/tooltip/index.js';
+
+  const adapter = zod(
+    z.object({
+      closeDelay: z.number().min(0).default(0).optional(),
+      closeOnEscape: z.boolean().default(false).optional(),
+      closeOnPointerDown: z.boolean().default(false).optional(),
+      disableHoverableContent: z.boolean().default(false).optional(),
+      open: z.boolean().default(false).optional(),
+      openDelay: z.number().min(0).default(0).optional(),
+    }),
+  );
+</script>
+
+<script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Form.Root superForm="{superForm}">
+  <Form.Field name="closeDelay" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close delay</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="decimal"
+        step="{0.05}"
+        variant="number"
+        bind:value="{$superFormData.closeDelay}"
+      />
+    </Form.Control>
+
+    <Form.Description>The tooltip close delay (in ms).</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on escape</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+    </Form.Control>
+
+    <Form.Description>Whether to close the tooltip on escape.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="closeOnPointerDown" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Close on pointer down</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnPointerDown}" />
+    </Form.Control>
+
+    <Form.Description>Whether to close the tooltip on pointer down.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="disableHoverableContent" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Disable hoverable content</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableHoverableContent}" />
+    </Form.Control>
+
+    <Form.Description>Whether to disbale the hoverable content.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="open" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Open</Form.Label>
+
+      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+    </Form.Control>
+
+    <Form.Description>Whether to open the tooltip.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="openDelay" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Open delay</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="decimal"
+        step="{0.05}"
+        variant="number"
+        bind:value="{$superFormData.openDelay}"
+      />
+    </Form.Control>
+
+    <Form.Description>The tooltip open delay (in ms).</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<Tooltip.Root
+  closeDelay="{$superFormData.closeDelay}"
+  closeOnEscape="{$superFormData.closeOnEscape}"
+  closeOnPointerDown="{$superFormData.closeOnPointerDown}"
+  disableHoverableContent="{$superFormData.disableHoverableContent}"
+  openDelay="{$superFormData.openDelay}"
+  bind:open="{$superFormData.open}"
+>
+  <Tooltip.Trigger asChild let:builder>
+    <Button builders="{[builder]}" variant="outline">Hover</Button>
+  </Tooltip.Trigger>
+
+  <Tooltip.Content>
+    <p>Add to library</p>
+  </Tooltip.Content>
+</Tooltip.Root>