### Checkbox Group Setup in Svelte

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/checkbox.md

Provides an example of creating a checkbox group using `Checkbox.Group` and `Checkbox.Root` components. It includes basic setup with script and template.

```svelte
<script lang="ts">
  import { Checkbox } from "bits-ui";
</script>

<Checkbox.Group name="notifications">
  <Checkbox.GroupLabel>Notifications</Checkbox.GroupLabel>
  <Checkbox.Root value="marketing" />
  <Checkbox.Root value="promotions" />
  <Checkbox.Root value="news" />
</Checkbox.Group>
```

--------------------------------

### Usage Example

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/type-helpers/with-element-ref.md

An example demonstrating how to use the `WithElementRef` type helper in a Svelte component.

```APIDOC
## Usage Example

### Description
This example shows how to integrate the `WithElementRef` type helper into a custom Svelte component to manage the `ref` prop.

### Component: CustomButton.svelte

```svelte
<script lang="ts">
  import type { WithElementRef } from "bits-ui";

  type Props = WithElementRef<
    {
      yourPropA: string;
      yourPropB: number;
    },
    HTMLButtonElement
  >;

  let { yourPropA, yourPropB, ref = $bindable(null) }: Props = $props();
</script>

<button bind:this={ref}>
  <!-- Component content -->
</button>
```

### Explanation
- The `Props` type is defined by extending `WithElementRef` with specific component props (`yourPropA`, `yourPropB`) and the desired HTML element type (`HTMLButtonElement`).
- The `ref` prop is then destructured from `Props` and initialized using `$bindable(null)`.
- The `bind:this={ref}` directive on the `<button>` element assigns the button's DOM element to the `ref` variable.
```

--------------------------------

### Svelte Integration Example

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/command.md

Demonstrates how to bind the Command component instance and programmatically update selection using the updateSelectedToIndex method.

```svelte
<script lang="ts">
  import { Command } from "bits-ui";

  let command: typeof Command.Root;

  function jumpToLastItem() {
    if (!command) return;
    const items = command.getValidItems();
    if (!items.length) return;
    command.updateSelectedToIndex(items.length - 1);
  }
</script>

<svelte:window
  onkeydown={(e) => {
    if (e.key === "o") {
      jumpToLastItem();
    }
  }}
/>
<Command.Root bind:this={command}>
  <!-- Command content -->
</Command.Root>
```

--------------------------------

### Basic Alert Dialog Implementation

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/alert-dialog.md

A fundamental example showing the structure of an Alert Dialog using the Root, Trigger, Portal, Overlay, and Content sub-components.

```svelte
<script lang="ts">
  import { AlertDialog } from "bits-ui";
</script>

<AlertDialog.Root>
  <AlertDialog.Trigger>Open Dialog</AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay />
    <AlertDialog.Content>
      <AlertDialog.Title>Confirm Action</AlertDialog.Title>
      <AlertDialog.Description>Are you sure?</AlertDialog.Description>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Confirm</AlertDialog.Action>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>
```

--------------------------------

### Basic BitsConfig Setup

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/utilities/bits-config.md

Demonstrates how to use BitsConfig at the top level to set default portal targets and locales for all child components. This avoids repetitive prop passing.

```svelte
<script lang="ts">
  import { BitsConfig, Dialog, DateField } from "bits-ui";
</script>

<!-- All components inside will use these defaults -->
<BitsConfig defaultPortalTo="#modal-root" defaultLocale="es">
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Portal>
      <!-- This will portal to #modal-root by default -->
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog content here</Dialog.Description>
        <!-- DateField will use the default locale -->
        <DateField.Root>
          <!-- ... -->
        </DateField.Root>
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
</BitsConfig>
```

--------------------------------

### Meter Component - Usage Example

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/meter.md

Shows how to use the custom `MyMeter` component in a page.

```APIDOC
## Meter Component - Usage Example

### Description
This snippet demonstrates how to integrate and use the custom `MyMeter` component within a Svelte page, passing necessary props for value, labels, and maximum.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **value** (number) - Required - The current value to display.
- **max** (number) - Required - The maximum possible value.
- **label** (string) - Required - The main label for the meter.
- **valueLabel** (string) - Required - The text indicating the current value out of the maximum.

### Request Example
```svelte title="+page.svelte"
<script lang="ts">
  import MyMeter from "$lib/components/MyMeter.svelte";

  let value = $state(3000);
  const max = 4000;
</script>

<MyMeter label="Tokens used" valueLabel="{value} / {max}" {value} {max} />
```

### Response
N/A (Component Usage)
```

--------------------------------

### Changelog Entry Format Example

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/policies/changelog-conventions.md

Demonstrates the standard format for a changelog entry, including type, scope, and a concise description of the change. This format is used for patch releases.

```markdown
## 1.3.10

### Patch Changes

- fix(Select.Trigger): improve accessibility for screen readers and keyboard navigation
```

```markdown
## 1.3.7

### Patch Changes

- chore(Menubar.Content): simplify internal implementation for maintainability
- fix(Menubar): prevent multiple submenus from opening simultaneously when too close
```

```markdown
## 1.3.6

### Patch Changes

- fix(Calendar): prevent outside days from being focusable when `disableOutsideDays` is `true`
- fix(Range Calendar): prevent outside days from being focusable when `disableOutsideDays` is `true`
- fix(Calendar): ensure default placeholder isn't a disabled date for keyboard navigation
```

--------------------------------

### Using Reusable Dropdown Menu

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/dropdown-menu.md

Example of how to use the custom `MyDropdownMenu` component, passing in a button text and a list of items to populate the dropdown.

```svelte
<script lang="ts">
  import MyDropdownMenu from "./MyDropdownMenu.svelte";
</script>

<MyDropdownMenu
  buttonText="Select a manager"
  items={["Michael Scott", "Dwight Schrute", "Jim Halpert"]
}/>
```

--------------------------------

### Configure Dialog Focus and Scroll Behavior

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/dialog.md

Examples for disabling focus traps, customizing initial focus on open, and managing scroll behavior.

```svelte
<!-- Disable focus trap -->
<Dialog.Content trapFocus={false}>
  <!-- ... -->
</Dialog.Content>

<!-- Custom initial focus -->
<Dialog.Content
  onOpenAutoFocus={(e) => {
    e.preventDefault();
    nameInput?.focus();
  }}
>
  <input type="text" bind:this={nameInput} />
</Dialog.Content>

<!-- Custom scroll behavior -->
<Dialog.Content preventScroll={false}>
  <!-- ... -->
</Dialog.Content>
```

--------------------------------

### Building a Reusable Dialog Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/dialog.md

Example of creating a reusable Dialog component with customizable slots for title, description, and content.

```APIDOC
## Building a Reusable Dialog Component

### Description
This example demonstrates how to create a versatile, reusable Dialog component using Bits UI building blocks. This implementation showcases the flexibility of the component API by combining props and snippets.

### Code
```svelte
<script lang="ts">
  import type { Snippet } from "svelte";
  import { Dialog, type WithoutChild } from "bits-ui";

  type Props = Dialog.RootProps & {
    buttonText: string;
    title: Snippet;
    description: Snippet;
    contentProps?: WithoutChild<Dialog.ContentProps>;
    // ...other component props if you wish to pass them
  };

  let { 
    open = $bindable(false),
    children,
    buttonText,
    contentProps,
    title,
    description,
    ...restProps
  }: Props = $props();
</script>

<Dialog.Root bind:open {...restProps}>
  <Dialog.Trigger>
    {buttonText}
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content {...contentProps}>
      <Dialog.Title>
        {@render title()}
      </Dialog.Title>
      <Dialog.Description>
        {@render description()}
      </Dialog.Description>
      {@render children?.()}
      <Dialog.Close>Close Dialog</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```
```

--------------------------------

### Install Bits UI Package

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/getting-started.md

Installs the bits-ui package using npm. This is the first step to integrating Bits UI into your Svelte project.

```bash
npm install bits-ui
```

--------------------------------

### Basic Avatar Setup in Svelte

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/avatar.md

Demonstrates the fundamental usage of the Avatar component by composing its Root, Image, and Fallback primitives. It shows how to provide an image source and alt text, along with fallback content.

```svelte
<script lang="ts">
  import { Avatar } from "bits-ui";
</script>

<Avatar.Root>
  <Avatar.Image
    src="https://github.com/huntabyte.png"
    alt="Huntabyte's avatar"
  />
  <Avatar.Fallback>HB</Avatar.Fallback>
</Avatar.Root>
```

--------------------------------

### Run Svelte Development Server

Source: https://github.com/huntabyte/bits-ui/blob/main/tests/README.md

Commands to start the development server for a Svelte project. Allows for live reloading and testing during development. The -- --open flag automatically opens the app in a new browser tab.

```bash
npm run dev
npm run dev -- --open
```

--------------------------------

### Use Custom Tooltip Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/tooltip.md

Example of how to use the custom MyTooltip component in your application. This demonstrates passing a trigger snippet and content.

```svelte
<script lang="ts">
  import MyTooltip from "$lib/components/MyTooltip.svelte";
  import BoldIcon from "..some-icon-library"; // not real
</script>

<MyTooltip triggerProps={{ onclick: () => alert("changed to bold!") }}>
  {#snippet trigger()}
    <BoldIcon />
  {/snippet}
  Change font to bold
</MyTooltip>
```

--------------------------------

### Manage Value State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/time-range-field.md

Examples of managing the value state for the time range, demonstrating both automatic synchronization and manual control via function bindings.

```svelte
<!-- Two-Way Binding -->
<script lang="ts">
  import { TimeRangeField, type TimeRange } from "bits-ui";
  import { Time } from "@internationalized/date";
  let myValue = $state<TimeRange>({
    start: new Time(12, 30),
    end: new Time(12, 30),
  });
</script>

<TimeRangeField.Root bind:value={myValue}>
  <!-- ... -->
</TimeRangeField.Root>

<!-- Fully Controlled -->
<script lang="ts">
  import { TimeRangeField, type TimeRange } from "bits-ui";

  let myValue = $state<TimeRange | undefined>({
    start: undefined,
    end: undefined,
  });

  function getValue() {
    return myValue;
  }

  function setValue(newValue: TimeRange | undefined) {
    myValue = newValue;
  }
</script>

<DateRangeField.Root bind:value={getValue, setValue}>
  <!-- ... -->
</DateRangeField.Root>
```

--------------------------------

### Accordion Usage Examples

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/accordion.md

Demonstrates practical implementations of the Accordion component for UI patterns like horizontal cards and multi-step forms.

```APIDOC
## Accordion Implementation Examples

### Horizontal Cards
Use the Accordion component to create a horizontal card layout with collapsible sections.

### Checkout Steps
Use the Accordion component to create a multi-step checkout process where only one section is expanded at a time.

### Usage Example
```svelte
<Accordion.Root>
  <Accordion.Item value="A">
    <Accordion.Header>
      <Accordion.Trigger>Step 1</Accordion.Trigger>
    </Accordion.Header>
    <MyAccordionContent>
      Content for step 1
    </MyAccordionContent>
  </Accordion.Item>
</Accordion.Root>
```
```

--------------------------------

### Managing Menubar State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/menubar.md

Examples of managing the active menu state using simple two-way binding with bind:value or a fully controlled approach using function bindings.

```svelte
<script lang="ts">
  import { Menubar } from "bits-ui";
  let activeValue = $state("");
</script>

<Menubar.Root bind:value={activeValue}>
  <Menubar.Menu value="menu-1">
    <!-- ... -->
  </Menubar.Menu>
</Menubar.Root>

<script context="module">
  // Controlled approach
  function getValue() { return activeValue; }
  function setValue(newValue: string) { activeValue = newValue; }
</script>

<Menubar.Root bind:value={getValue, setValue}>
  <Menubar.Menu value="menu-1" />
</Menubar.Root>
```

--------------------------------

### Create a Reusable MySelect Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/select.md

Wrap the primitive Select components to create a more convenient API for your application's use cases. This example shows how to create a reusable `MySelect` component that accepts a list of options.

```svelte
<script lang="ts">
  import { Select, type WithoutChildren } from "bits-ui";

  type Props = WithoutChildren<Select.RootProps> & {
    placeholder?: string;
    items: { value: string; label: string; disabled?: boolean }[];
    contentProps?: WithoutChildren<Select.ContentProps>;
    // any other specific component props if needed
  };

  let { 
    value = $bindable(), 
    items,
    contentProps,
    placeholder,
    ...restProps
  }: Props = $props();
</script>

<!--
TypeScript Discriminated Unions + destructing (required for "bindable") do not
get along, so we shut typescript up by casting `value` to `never`, however,
from the perspective of the consumer of this component, it will be typed appropriately.
-->
<Select.Root bind:value={value as never} {...restProps}>
  <Select.Trigger>
    <Select.Value {placeholder} />
  </Select.Trigger>
  <Select.Portal>
    <Select.Content {...contentProps}>
      <Select.ScrollUpButton>up</Select.ScrollUpButton>
      <Select.Viewport>
        {#each items as { value, label, disabled } (value)}
          <Select.Item {value} {label} {disabled}>
            {#snippet children({ selected })}
              {selected ? "✅" : ""}
              {label}
            {/snippet}
          </Select.Item>
        {/each}
      </Select.Viewport>
      <Select.ScrollDownButton>down</Select.ScrollDownButton>
    </Select.Content>
  </Select.Portal>
</Select.Root>
```

--------------------------------

### Create Reusable Context Menu Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/context-menu.md

Example of creating a reusable Context Menu component that accepts custom props for trigger and items. This component wraps the bits-ui Context Menu for easier integration.

```svelte
<script lang="ts">
  import type { Snippet } from "svelte";
  import { ContextMenu, type WithoutChild } from "bits-ui";
  type Props = ContextMenu.Props & {
    trigger: Snippet;
    items: string[];
    contentProps?: WithoutChild<ContextMenu.Content.Props>;
    // other component props if needed
  };
  let { 
    open = $bindable(false),
    children,
    trigger,
    items,
    contentProps,
    ...restProps
  }: Props = $props();
</script>

<ContextMenu.Root bind:open {...restProps}>
  <ContextMenu.Trigger>
    {@render trigger()}
  </ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content {...contentProps}>
      <ContextMenu.Group>
        <ContextMenu.GroupHeading>Select an Office</ContextMenu.GroupHeading>
        {#each items as item}
          <ContextMenu.Item textValue={item}>
            {item}
          </ContextMenu.Item>
        {/each}
      </ContextMenu.Group>
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>
```

--------------------------------

### Use Custom Accordion Content Component (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/accordion.md

This example shows how to integrate the custom MyAccordionContent component within the Accordion.Root structure. It demonstrates nesting the custom content component inside an Accordion.Item, allowing for custom transition durations.

```svelte
<Accordion.Root>
  <Accordion.Item value="A">
    <Accordion.Header>
      <Accordion.Trigger>A</Accordion.Trigger>
    </Accordion.Header>
    <MyAccordionContent duration={300}>
      <!-- ... --> 
    </MyAccordionContent>
  </Accordion.Item>
</Accordion.Root>
```

--------------------------------

### TimeField Fully Controlled Value Binding

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/time-field.md

Demonstrates managing the TimeField's value state externally using Svelte's Function Binding for complete control. This allows custom logic for getting and setting the value. It requires `TimeField` and `TimeValue` from 'bits-ui'. Note: The example uses `DateField.Root` which might be a typo and should likely be `TimeField.Root`.

```svelte
<script lang="ts">
  import { TimeField, type TimeValue } from "bits-ui";
  let myValue = $state<TimeValue>();

  function getValue() {
    return myValue;
  }

  function setValue(newValue: TimeValue | undefined) {
    myValue = newValue;
  }
</script>

<DateField.Root bind:value={getValue, setValue}> 
  <!-- ... -->
</DateField.Root>
```

--------------------------------

### Creating a Reusable Transition-Enabled Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/transitions.md

Shows how to wrap Bits UI components in a custom component to encapsulate the forceMount and transition logic for cleaner usage across an application.

```svelte
<script lang="ts">
  import type { Snippet } from "svelte";
  import { fly } from "svelte/transition";
  import { Dialog, type WithoutChildrenOrChild } from "bits-ui";

  let {
    ref = $bindable(null),
    children,
    ...restProps
  }: WithoutChildrenOrChild<Dialog.ContentProps> & {
    children?: Snippet;
  } = $props();
</script>

<Dialog.Content bind:ref {...restProps} forceMount={true}>
  {#snippet child({ props, open })}
    {#if open}
      <div {...props} transition:fly>
        {@render children?.()}
      </div>
    {/if}
  {/snippet}
</Dialog.Content>
```

--------------------------------

### Usage Example of Reusable Accordion in Svelte

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/accordion.md

An example of how to use the reusable `MyAccordion` component in a Svelte page. It demonstrates passing an array of items to the `MyAccordion` component to render multiple collapsible sections.

```svelte
<script lang="ts">
  import MyAccordion from "$lib/components/MyAccordion.svelte";
  const items = [
    { title: "Item 1", content: "Content 1" },
    { title: "Item 2", content: "Content 2" },
  ];
</script>

<MyAccordion type="single" {items} />
```

--------------------------------

### Basic Toggle Implementation

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/toggle.md

Demonstrates the simplest way to import and render the Toggle component using the Root element.

```svelte
<script lang="ts">
  import { Toggle } from "bits-ui";
</script>

<Toggle.Root />
```

--------------------------------

### Install @internationalized/date Package

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/dates.md

Installs the @internationalized/date package, which is essential for handling dates and times in Bits UI. This package provides a unified API for date and time manipulation across different locales and time zones.

```bash
npm install @internationalized/date
```

--------------------------------

### Configure Calendar Week Start Day

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/calendar.md

Sets the first day of the week for the calendar. The `weekStartsOn` prop accepts a number from 0 (Sunday) to 6 (Saturday) to enforce a consistent start day across different locales.

```svelte
<Calendar.Root weekStartsOn={1}>
  <!-- ...-->
</Calendar.Root>
```

--------------------------------

### Implement Basic Calendar Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/calendar.md

Demonstrates the standard implementation of the Calendar component using the Root, Header, and Grid sub-components to display months and days.

```svelte
<script lang="ts">
  import { Calendar } from "bits-ui";
</script>

<Calendar.Root>
  {#snippet children({ months, weekdays })}
    <Calendar.Header>
      <Calendar.PrevButton />
      <Calendar.Heading />
      <Calendar.NextButton />
    </Calendar.Header>

    {#each months as month}
      <Calendar.Grid>
        <Calendar.GridHead>
          <Calendar.GridRow>
            {#each weekdays as day}
              <Calendar.HeadCell>
                {day}
              </Calendar.HeadCell>
            {/each}
          </Calendar.GridRow>
        </Calendar.GridHead>
        <Calendar.GridBody>
          {#each month.weeks as weekDates}
            <Calendar.GridRow>
              {#each weekDates as date}
                <Calendar.Cell {date} month={month.value}>
                  <Calendar.Day />
                </Calendar.Cell>
              {/each}
            </Calendar.GridRow>
          {/each}
        </Calendar.GridBody>
      </Calendar.Grid>
    {/each}
  {/snippet}
</Calendar.Root>
```

--------------------------------

### Managing Slider State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/slider.md

Examples of two-way binding and fully controlled state management for the Slider component.

```svelte
// Two-Way Binding
<Slider.Root bind:value={myValue} type="single" />

// Fully Controlled
<Slider.Root type="single" bind:value={getValue, setValue} />
```

--------------------------------

### Managing Collapsible State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/collapsible.md

Examples of managing the open state via two-way binding or fully controlled function bindings.

```svelte
<script lang="ts">
  import { Collapsible } from "bits-ui";
  let isOpen = $state(false);
</script>

<button onclick={() => (isOpen = true)}>Open Collapsible</button>

<Collapsible.Root bind:open={isOpen}>
  <!-- ... -->
</Collapsible.Root>
```

```svelte
<script lang="ts">
  import { Collapsible } from "bits-ui";
  let myOpen = $state(false);

  function getOpen() {
    return myOpen;
  }

  function setOpen(newOpen: boolean) {
    myOpen = newOpen;
  }
</script>

<Collapsible.Root bind:open={getOpen, setOpen}>
  <!-- ... -->
</Collapsible.Root>
```

--------------------------------

### Apply Svelte Transitions to Menubar

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/menubar.md

Demonstrates using the forceMount prop and the child snippet to apply Svelte transitions like fly to Menubar content.

```svelte
<script lang="ts">
  import { Menubar } from "bits-ui";
  import { fly } from "svelte/transition";
</script>

<Menubar.Content forceMount>
  {#snippet child({ wrapperProps, props, open })}
    {#if open}
      <div {...wrapperProps}>
        <div {...props} transition:fly>
          <Menubar.Item>Item 1</Menubar.Item>
          <Menubar.Item>Item 2</Menubar.Item>
        </div>
      </div>
    {/if}
  {/snippet}
</Menubar.Content>
```

--------------------------------

### TimeRange Type Definition

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/src/lib/content/api-reference/extended-types/shared/time-range-prop.md

Defines the structure for a time range object containing optional start and end time values.

```APIDOC
## Type Definition: TimeRange

### Description
The `TimeRange` type represents a temporal range consisting of an optional start time and an optional end time, utilizing the `TimeValue` type from the Bits UI package.

### Structure
- **start** (TimeValue | undefined) - The beginning of the time range.
- **end** (TimeValue | undefined) - The conclusion of the time range.

### Usage Example
```typescript
import type { TimeRange } from "bits-ui";

const myRange: TimeRange = {
  start: new Time(9, 0),
  end: new Time(17, 0)
};
```
```

--------------------------------

### Using Custom Switch Component (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/switch.md

Illustrates how to integrate and use the custom 'MySwitch' component within an application. It demonstrates binding the 'checked' state to a local variable and setting a descriptive label.

```svelte
<script lang="ts">
  import MySwitch from "$lib/components/MySwitch.svelte";

  let notifications = $state(true);
</script>

<MySwitch bind:checked={notifications} labelText="Enable notifications" />
```

--------------------------------

### Manage Rating State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/rating-group.md

Provides examples for managing component state using two-way binding or fully controlled function bindings.

```svelte
<!-- Two-Way Binding -->
<script lang="ts">
  import { RatingGroup } from "bits-ui";
  let myRating = $state(3);
</script>

<button onclick={() => (myRating = 5)}> Give 5 stars </button>

<RatingGroup.Root bind:value={myRating} max={5}>
  {#snippet children({ items })}
    {#each items as item (item.index)}
      <RatingGroup.Item index={item.index}>
        {#if item.state === "active"}⭐{:else}☆{/if}
      </RatingGroup.Item>
    {/each}
  {/snippet}
</RatingGroup.Root>
```

```svelte
<!-- Fully Controlled -->
<script lang="ts">
  import { RatingGroup } from "bits-ui";
  let myRating = $state(0);

  function getValue() { return myRating; }
  function setValue(newValue: number) {
    if (newValue >= 0 && newValue <= 5) { myRating = newValue; }
  }
</script>

<RatingGroup.Root bind:value={getValue, setValue} max={5}>
  {#snippet children({ items })}
    {#each items as item (item.index)}
      <RatingGroup.Item index={item.index}>
        {#if item.state === "active"}⭐{:else}☆{/if}
      </RatingGroup.Item>
    {/each}
  {/snippet}
</RatingGroup.Root>
```

--------------------------------

### Creating a Reusable Progress Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/progress.md

An example of wrapping the Progress primitive to create a custom, reusable component with labels and accessibility attributes.

```svelte
<script lang="ts">
  import { Progress, useId } from "bits-ui";
  import type { ComponentProps } from "svelte";

  let {
    max = 100,
    value = 0,
    min = 0,
    label,
    valueLabel,
  }: ComponentProps<typeof Progress.Root> & {
    label: string;
    valueLabel: string;
  } = $props();

  const labelId = useId();
</script>

<div>
  <span id={labelId}> {label} </span>
  <span>{valueLabel}</span>
</div>
<Progress.Root
  aria-labelledby={labelId}
  aria-valuetext={valueLabel}
  {value}
  {min}
  {max}
/>
```

--------------------------------

### Implement Basic Date Picker Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/date-picker.md

Demonstrates the standard composition of a Date Picker using Bits UI sub-components. It includes the input field, calendar grid, and navigation controls.

```svelte
<script lang="ts">
  import { DatePicker } from "bits-ui";
</script>

<DatePicker.Root>
  <DatePicker.Label />
  <DatePicker.Input>
    {#snippet children({ segments })}
      {#each segments as { part, value }}
        <DatePicker.Segment {part}>
          {value}
        </DatePicker.Segment>
      {/each}
      <DatePicker.Trigger />
    {/snippet}
  </DatePicker.Input>
  <DatePicker.Content>
    <DatePicker.Calendar>
      {#snippet children({ months, weekdays })}
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Heading />
          <DatePicker.NextButton />
        </DatePicker.Header>
        {#each months as month}
          <DatePicker.Grid>
            <DatePicker.GridHead>
              <DatePicker.GridRow>
                {#each weekdays as day}
                  <DatePicker.HeadCell>
                    {day}
                  </DatePicker.HeadCell>
                {/each}
              </DatePicker.GridRow>
            </DatePicker.GridHead>
            <DatePicker.GridBody>
              {#each month.weeks as weekDates}
                <DatePicker.GridRow>
                  {#each weekDates as date}
                    <DatePicker.Cell {date} month={month.value}>
                      <DatePicker.Day />
                    </DatePicker.Cell>
                  {/each}
                </DatePicker.GridRow>
              {/each}
            </DatePicker.GridBody>
          </DatePicker.Grid>
        {/each}
      {/snippet}
    </DatePicker.Calendar>
  </DatePicker.Content>
</DatePicker.Root>
```

--------------------------------

### Toolbar Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/toolbar.md

Demonstrates the basic HTML structure for implementing the Toolbar component using bits-ui.

```APIDOC
## Toolbar Structure

### Description
This section shows the fundamental HTML structure for the Toolbar component.

### Method
N/A (Component Structure)

### Endpoint
N/A (Component Structure)

### Parameters
N/A (Component Structure)

### Request Example
```svelte
<script lang="ts">
  import { Toolbar } from "bits-ui";
</script>

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.GroupItem />
  </Toolbar.Group>
  <Toolbar.Link />
  <Toolbar.Button />
</Toolbar.Root>
```

### Response
N/A (Component Structure)

### Response Example
N/A (Component Structure)
```

--------------------------------

### Use Custom Context Menu with Inline Snippet

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/context-menu.md

Example of using the reusable CustomContextMenu component with the trigger snippet defined inline.

```svelte
<script lang="ts">
  import CustomContextMenu from "./CustomContextMenu.svelte";
</script>

<CustomContextMenu
  items={[
    "Dunder Mifflin",
    "Vance Refrigeration",
    "Michael Scott Paper Company",
  ]}>
  {#snippet triggerArea()}
    <div
      class="grid size-20 place-items-center rounded-lg border border-dashed p-4"
    >
      Right-click me
    </div>
  {/snippet}
</CustomContextMenu>
```

--------------------------------

### Applying Svelte Transitions with forceMount

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/transitions.md

Demonstrates how to use the forceMount prop and the child snippet to conditionally render a Dialog component and apply a Svelte fly transition.

```svelte
<script lang="ts">
  import { Dialog } from "bits-ui";
  import { fly } from "svelte/transition";
</script>

<Dialog.Root>
  <Dialog.Content forceMount>
    {#snippet child({ props, open })}
      {#if open}
        <div {...props} transition:fly>
          <!-- ... -->
        </div>
      {/if}
    {/snippet}
  </Dialog.Content>
</Dialog.Root>
```

--------------------------------

### Basic PIN Input Structure (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/pin-input.md

Demonstrates the fundamental structure of the PIN Input component using Svelte. It sets up the root element and iterates through cells to render individual input fields.

```svelte
<script lang="ts">
  import { PinInput } from "bits-ui";
</script>

<PinInput.Root maxlength={6}>
  {#snippet children({ cells })} 
    {#each cells as cell}
      <PinInput.Cell {cell} />
    {/each}
  {/snippet}
</PinInput.Root>
```

--------------------------------

### Manage Placeholder State

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/time-range-field.md

Examples of managing the placeholder state using standard two-way binding or a fully controlled approach with function bindings.

```svelte
<!-- Two-Way Binding -->
<script lang="ts">
  import { TimeRangeField } from "bits-ui";
  import { Time } from "@internationalized/date";
  let myPlaceholder = $state(new Time(12, 30));
</script>

<TimeRangeField.Root bind:placeholder={myPlaceholder}>
  <!-- ... -->
</TimeRangeField.Root>

<!-- Fully Controlled -->
<script lang="ts">
  import { TimeRangeField, type TimeValue } from "bits-ui";
  import { Time } from "@internationalized/date";
  let myPlaceholder = $state(new Time(12, 30));

  function getPlaceholder() {
    return myPlaceholder;
  }

  function setPlaceholder(newPlaceholder: TimeValue) {
    myPlaceholder = newPlaceholder;
  }
</script>

<TimeRangeField.Root bind:placeholder={getPlaceholder, setPlaceholder}>
  <!-- ... -->
</TimeRangeField.Root>
```

--------------------------------

### Basic Toolbar Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/toolbar.md

Demonstrates the fundamental composition of a Toolbar using the Root, Group, GroupItem, Link, and Button sub-components.

```svelte
<script lang="ts">
  import { Toolbar } from "bits-ui";
</script>

<Toolbar.Root>
  <Toolbar.Group>
    <Toolbar.GroupItem />
  </Toolbar.Group>
  <Toolbar.Link />
  <Toolbar.Button />
</Toolbar.Root>
```

--------------------------------

### Meter Component - Basic Usage

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/meter.md

Demonstrates the basic structure of using the Meter component.

```APIDOC
## Meter Component - Basic Usage

### Description
This snippet shows the fundamental way to include and use the Meter component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```svelte
<script lang="ts">
  import { Meter } from "bits-ui";
</script>

<Meter.Root />
```

### Response
N/A (Component Usage)
```

--------------------------------

### Custom Accordion Content Component

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/accordion.md

A guide on how to create a reusable Accordion Content component that encapsulates Svelte transition logic for better maintainability.

```APIDOC
## Custom Accordion Content Component

### Description
Encapsulates the Accordion.Content primitive with custom transition logic using Svelte's `fade` transition.

### Parameters
#### Props
- **duration** (number) - Optional - The duration of the fade transition in milliseconds.
- **ref** (HTMLElement) - Optional - Bindable reference to the underlying element.

### Implementation Example
```svelte
<script lang="ts">
  import { Accordion, type WithoutChildrenOrChild } from "bits-ui";
  import { fade } from "svelte/transition";

  let { duration = 200, children, ...restProps } = $props();
</script>

<Accordion.Content forceMount {...restProps}>
  {#snippet child({ props, open })}
    {#if open}
      <div {...props} transition:fade={{ duration }}>
        {@render children?.()}
      </div>
    {/if}
  {/snippet}
</Accordion.Content>
```
```

--------------------------------

### Create Svelte Project

Source: https://github.com/huntabyte/bits-ui/blob/main/tests/README.md

Commands to create a new Svelte project either in the current directory or a specified directory. This is the initial step for any Svelte application.

```bash
npm create svelte@latest
npm create svelte@latest my-app
```

--------------------------------

### Configure TimeField Placeholder

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/time-field.md

Examples of setting the initial placeholder time for the TimeField component using standard Time objects or ZonedDateTime for timezone support.

```svelte
<script lang="ts">
  import MyTimeField from "$lib/components/MyTimeField.svelte";
  import { Time, now } from "@internationalized/date";
</script>

<!-- Basic Time -->
<MyTimeField placeholder={new Time(12, 30)} />

<!-- Time with Timezone -->
<MyTimeField placeholder={now("America/New_York")} />
```

--------------------------------

### Basic Dialog Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/dialog.md

Demonstrates the fundamental composition of the Dialog component using its sub-components like Root, Trigger, Portal, Overlay, and Content.

```svelte
<script lang="ts">
  import { Dialog } from "bits-ui";
</script>

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

--------------------------------

### Configure Accordion Selection Modes

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/accordion.md

Examples of setting the Accordion type to either single or multiple selection modes to control user interaction behavior.

```svelte
<MyAccordion
  type="single"
  items={[
    { title: "Title A", content: "Content A" },
    { title: "Title B", content: "Content B" },
    { title: "Title C", content: "Content C" },
  ]}
/>

<MyAccordion
  type="multiple"
  items={[
    { title: "Title A", content: "Content A" },
    { title: "Title B", content: "Content B" },
    { title: "Title C", content: "Content C" },
  ]}
/>
```

--------------------------------

### Use Custom Context Menu with Separate Snippet

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/context-menu.md

Example of using the reusable CustomContextMenu component with the trigger snippet defined separately and passed as a prop.

```svelte
<script lang="ts">
  import CustomContextMenu from "./CustomContextMenu.svelte";
</script>

{#snippet triggerArea()}
  <div
    class="grid size-20 place-items-center rounded-lg border border-dashed p-4"
  >
    Right-click me
  </div>
{/snippet}

<CustomContextMenu
  items={[
    "Dunder Mifflin",
    "Vance Refrigeration",
    "Michael Scott Paper Company",
  ]}
  {triggerArea}
/>
```

--------------------------------

### Use Svelte Transitions with Tooltip Content

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/tooltip.md

Use the `forceMount` prop on `Tooltip.Content` to enable Svelte Transitions or other animation libraries. This requires manually managing the open state within a child snippet.

```svelte
<script lang="ts">
  import { Tooltip } from "bits-ui";
  import { fly, fade } from "svelte/transition";
</script>

<Tooltip.Root>
  <!-- ... other tooltip components -->
  <Tooltip.Content forceMount>
    {#snippet child({ wrapperProps, props, open })}
      {#if open}
        <div {...wrapperProps}>
          <div {...props} transition:fly>
            <!-- ... -->
          </div>
        </div>
      {/if}
    {/snippet}
  </Tooltip.Content>
</Tooltip.Root>
```

--------------------------------

### Use Command LinkItem for Navigation

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/command.md

Explains how to use Command.LinkItem to render an anchor tag, providing standard link behavior like prefetching.

```svelte
<Command.LinkItem href="/some/path">
  <!-- ... -->
</Command.LinkItem>
```

--------------------------------

### Creating Reusable Menubar Components

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/menubar.md

Shows how to wrap Menubar parts into a custom component to simplify implementation when using the Menubar in multiple locations.

```svelte
<script lang="ts">
  import { Menubar, type WithoutChildrenOrChild } from "bits-ui";

  type Props = WithoutChildrenOrChild<Menubar.MenuProps> & {
    triggerText: string;
    items: { label: string; value: string; onSelect?: () => void }[];
    contentProps?: WithoutChildrenOrChild<Menubar.ContentProps>;
  };

  let { triggerText, items, contentProps, ...restProps }: Props = $props();
</script>

<Menubar.Menu {...restProps}>
  <Menubar.Trigger>
    {triggerText}
  </Menubar.Trigger>
  <Menubar.Content {...contentProps}>
    <Menubar.Group aria-label={triggerText}>
      {#each items as item}
        <Menubar.Item textValue={item.label} onSelect={item.onSelect}>
          {item.label}
        </Menubar.Item>
      {/each}
    </Menubar.Group>
  </Menubar.Content>
</Menubar.Menu>
```

--------------------------------

### Customizing Accessibility with aria-valuetext

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/rating-group.md

Provides an example of how to use the `aria-valuetext` prop to supply custom descriptive text for rating values, enhancing screen reader announcements.

```APIDOC
## Customizing Accessibility

You can enhance the accessibility experience with custom `aria-valuetext`:

```svelte
<RatingGroup.Root
	"aria-valuetext"={(value, max) => {
		if (value === 0) return "No rating selected";
		return `${value} out of ${max} stars. ${value >= 4 ? "Excellent" : value >= 3 ? "Good" : "Fair"} rating.`;
	}}
>
	<!-- ... -->
</RatingGroup.Root>
```
```

--------------------------------

### Configure Scroll Area Behavior and Delay

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/scroll-area.md

Examples showing how to toggle scrollbar visibility types and customize the hide delay using the custom component wrapper.

```svelte
<!-- Hover type -->
<MyScrollArea type="hover" />

<!-- Scroll type -->
<MyScrollArea type="scroll" />

<!-- Auto type -->
<MyScrollArea type="auto" />

<!-- Always visible -->
<MyScrollArea type="always" orientation="both" />

<!-- Customize hide delay -->
<MyScrollArea scrollHideDelay={10} />
```

--------------------------------

### Basic Aspect Ratio Implementation (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/aspect-ratio.md

Demonstrates the fundamental usage of the AspectRatio.Root component from bits-ui in a Svelte application. This snippet shows how to import and render the root component.

```svelte
<script lang="ts">
  import { AspectRatio } from "bits-ui";
</script>

<AspectRatio.Root />
```

--------------------------------

### Define TimeRange Type

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/src/lib/content/api-reference/extended-types/shared/time-range-prop.md

Defines a TypeScript type for representing a range of time. It relies on the TimeValue type from bits-ui and allows both start and end properties to be undefined.

```typescript
import type { TimeValue } from "bits-ui";

type TimeRange = {
	start: TimeValue | undefined;
	end: TimeValue | undefined;
};
```

--------------------------------

### Apply Svelte Transitions to Link Preview

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/link-preview.md

Use the forceMount prop and child snippet to enable Svelte transitions for the Link Preview content.

```svelte
<LinkPreview.Content forceMount>
  {#snippet child({ wrapperProps, props, open })}
    {#if open}
      <div {...wrapperProps}>
        <div {...props} transition:fly>
          <!-- Animated content -->
        </div>
      </div>
    {/if}
  {/snippet}
</LinkPreview.Content>
```

--------------------------------

### Control Tooltip Active Trigger Programmatically

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/tooltip.md

In controlled mode, bind both `open` and `triggerId` to manage tooltip visibility programmatically. This is useful for guided onboarding flows.

```svelte
<script lang="ts">
  import { Tooltip } from "bits-ui";
  const setupTether = Tooltip.createTether<{ title: string; description: string; }>();
  let open = $state(false);
  let triggerId = $state<string | null>(null);
</script>

<button
  onclick={() => {
    triggerId = "setup-members";
    open = true;
  }}>
  Show members tip
</button>

<Tooltip.Root tether={setupTether} bind:open bind:triggerId>
  <!-- ... -->
</Tooltip.Root>
```

--------------------------------

### Using MyAspectRatio Component (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/aspect-ratio.md

Shows how to integrate the custom 'MyAspectRatio' reusable component within a Svelte page. It demonstrates passing the 'src', 'alt', and 'ratio' props to render an image with a specific aspect ratio.

```svelte
<script lang="ts">
  import MyAspectRatio from "$lib/components/MyAspectRatio.svelte";
</script>

<MyAspectRatio
  src="https://example.com/image.jpg"
  alt="an abstract painting"
  ratio={4 / 3}
/>
```

--------------------------------

### Configure AlertDialog Focus Management

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/alert-dialog.md

Provides examples for disabling focus traps, overriding auto-focus on open, and overriding auto-focus on close to improve accessibility and user flow.

```svelte
<AlertDialog.Content trapFocus={false}>
  <!-- ... -->
</AlertDialog.Content>

<AlertDialog.Content
  onOpenAutoFocus={(e) => {
    e.preventDefault();
    nameInput?.focus();
  }}
>
  <input type="text" bind:this={nameInput} />
</AlertDialog.Content>

<AlertDialog.Content
  onCloseAutoFocus={(e) => {
    e.preventDefault();
    nameInput?.focus();
  }}
>
  <!-- ... -->
</AlertDialog.Content>
```

--------------------------------

### Implement Basic Link Preview Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/link-preview.md

The fundamental structure of the Link Preview component using Root, Trigger, and Content sub-components.

```svelte
<script lang="ts">
  import { LinkPreview } from "bits-ui";
</script>

<LinkPreview.Root>
  <LinkPreview.Trigger />
  <LinkPreview.Content />
</LinkPreview.Root>
```

--------------------------------

### Use Svelte Transitions with ContextMenu.Content

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/context-menu.md

Force mount ContextMenu.Content using the 'forceMount' prop and the 'child' snippet to integrate Svelte Transitions or other animation libraries. This requires manual handling of the content's visibility and wrapper props.

```svelte
<script lang="ts">
  import { ContextMenu } from "bits-ui";
  import { fly } from "svelte/transition";
</script>

<ContextMenu.Content forceMount>
  {#snippet child({ wrapperProps, props, open })}
    {#if open}
      <div {...wrapperProps}>
        <div {...props} transition:fly>
          <ContextMenu.Item>Item 1</ContextMenu.Item>
          <ContextMenu.Item>Item 2</ContextMenu.Item>
        </div>
      </div>
    {/if}
  {/snippet}
</ContextMenu.Content>
```

--------------------------------

### Implement Time Range Field Structure

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/time-range-field.md

Basic implementation of the TimeRangeField component using Svelte. It demonstrates how to structure the root, label, and input segments for both start and end times.

```svelte
<script lang="ts">
  import { TimeRangeField } from "bits-ui";
</script>

<TimeRangeField.Root>
  <TimeRangeField.Label>Working Hours</TimeRangeField.Label>
  {#each ["start", "end"] as const as type}
    <TimeRangeField.Input {type}>
      {#snippet children({ segments })}
        {#each segments as { part, value }}
          <TimeRangeField.Segment {part}>
            {value}
          </TimeRangeField.Segment>
        {/each}
      {/snippet}
    </TimeRangeField.Input>
  {/each}
</TimeRangeField.Root>
```

--------------------------------

### Theme-specific Portal Targets

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/utilities/bits-config.md

Demonstrates configuring different portal targets for distinct UI regions like headers, sidebars, and main content areas using separate BitsConfig instances.

```svelte
<script lang="ts">
  import { BitsConfig } from "bits-ui";
  import { MyHeader, MySidebar, MyContent } from "$lib/components";
</script>

<div id="header-portals"></div>
<div id="sidebar-portals"></div>
<div id="main-portals"></div>

<header>
  <BitsConfig defaultPortalTo="#header-portals">
    <MyHeader />
  </BitsConfig>
</header>

<aside>
  <BitsConfig defaultPortalTo="#sidebar-portals">
    <MySidebar />
  </BitsConfig>
</aside>

<main>
  <BitsConfig defaultPortalTo="#main-portals">
    <MyContent />
  </BitsConfig>
</main>
```

--------------------------------

### Custom Anchor for Select Content

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/select.md

Anchor the Select.Content to a different element by providing a selector string or an HTMLElement to the `customAnchor` prop. This example demonstrates binding the `customAnchor` prop to a div element.

```svelte
<script lang="ts">
  import { Select } from "bits-ui";

  let customAnchor = $state<HTMLElement>(null!);
</script>

<div bind:this={customAnchor}></div>

<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content {customAnchor}>
    <!-- ... -->
  </Select.Content>
</Select.Root>
```

--------------------------------

### Using Custom Checkbox Component (Svelte)

Source: https://github.com/huntabyte/bits-ui/blob/main/docs/content/components/checkbox.md

Shows a practical example of how to import and use the custom `MyCheckbox` component within a Svelte page, passing necessary props like `labelText`.

```svelte
<script lang="ts">
  import MyCheckbox from "$lib/components/MyCheckbox.svelte";
</script>

<MyCheckbox labelText="Enable notifications" />
```