fluentui-svelte 0.1.0

package/dist/components/calendar-view/docs/llms.md

@@ -0,0 +1,121 @@
+# Calendar View
+
+An inline calendar for browsing days, months, and years and selecting one date, several
+dates, or a range.
+
+## Usage
+
+```svelte
+<script>
+	import { CalendarView } from 'fluentui-svelte';
+
+	let value = $state(null);
+</script>
+
+<CalendarView bind:value onChange={(e, selection) => console.log(selection)} />
+```
+
+## Examples
+
+### Multiple Selection
+
+Set `selectionMode` to `multiple` to allow selecting more than one date. `value` then
+holds an array.
+
+```svelte
+<CalendarView selectionMode="multiple" />
+```
+
+### Range Selection
+
+Set `selectionMode` to `range` to pick a start and an end. The range has its own binding
+rather than sharing `value`, and `end` stays `null` between the two clicks so you can
+tell a half-built range from a range of a single day.
+
+```svelte
+<script>
+	let range = $state({ start: null, end: null });
+</script>
+
+<CalendarView selectionMode="range" bind:range />
+```
+
+A range spans blacked-out dates by default, since a blackout usually marks a day that
+cannot be _picked_ rather than one that breaks the period. Set `blackoutBreaksRange`
+for the range to stop at the first blackout.
+
+```svelte
+<CalendarView selectionMode="range" bind:range {blackoutDates} blackoutBreaksRange />
+```
+
+### Week Start
+
+Use the `weekStart` prop to change the first day of the week (0 = Sunday, 1 = Monday).
+
+```svelte
+<CalendarView weekStart={0} />
+```
+
+## Keyboard
+
+The grid is driven by [Tabspot](https://github.com/JLAcostaEC/tabspot): the calendar
+registers its table as a grid mover and only adds the paging on top of it.
+
+| Key                        | Action                                                      |
+| -------------------------- | ----------------------------------------------------------- |
+| `ArrowLeft` / `ArrowRight` | Previous / next cell, continuing into the neighbouring row. |
+| `ArrowUp` / `ArrowDown`    | Same column, one row up / down.                             |
+| `Home` / `End`             | First / last cell of the current row.                       |
+| `Ctrl` + `ArrowUp`         | Zoom out: days to months, months to years.                  |
+| `Ctrl` + `ArrowDown`       | Zoom in: years to months.                                   |
+| `Delete` / `Backspace`     | Clear the range. Range selection only.                      |
+
+Moving past the edge of the visible month, year or decade turns the page and keeps
+focus on the date you moved to. Dates outside `minDate`/`maxDate` cannot be focused,
+and `blackoutDates` are stepped over.
+
+Focus follows the grid. Opening the calendar as a popup (`floating`) puts focus on the
+selected date, on today, or on the first date of the page, in that order; an inline
+calendar never takes focus on its own. Changing the view from a cell — `Ctrl` + arrow,
+or picking a month or year — carries focus to the matching cell of the new view, while
+changing it from the header button leaves focus on the button.
+
+## CalendarView Props
+
+| Name                  | Type                                                  | Default                      | Description                                                                    |
+| --------------------- | ----------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ |
+| `ref`                 | bindable `HTMLDivElement`                             |                              | The DOM reference of the calendar element.                                     |
+| `value`               | bindable `Date \| Date[] \| null`                     | `null`                       | The selected date, or an array of dates in `multiple` mode. Unused by `range`. |
+| `selectionMode`       | `'single' \| 'multiple' \| 'range'`                   | `'single'`                   | How many dates the grid hands out, and in what shape.                          |
+| `range`               | bindable `{ start: Date \| null; end: Date \| null }` | `{ start: null, end: null }` | The picked range. `end` is `null` until the range is closed.                   |
+| `blackoutBreaksRange` | `boolean`                                             | `false`                      | Stop a range from spanning a blacked-out date.                                 |
+| `blackoutDates`       | `Date[]`                                              |                              | Dates that are rendered but cannot be selected.                                |
+| `headers`             | `boolean`                                             |                              | Labels the first cell of a month or a year with its name.                      |
+| `minDate`             | `Date`                                                |                              | The earliest selectable date.                                                  |
+| `maxDate`             | `Date`                                                |                              | The latest selectable date.                                                    |
+| `view`                | `'days' \| 'months' \| 'years'`                       | `'days'`                     | The calendar page the view opens on.                                           |
+| `locale`              | `string`                                              | `'en-US'`                    | The locale used to format weekday and month names.                             |
+| `weekStart`           | `number`                                              | `1`                          | The first day of the week, where 0 is Sunday.                                  |
+| `floating`            | `CalendarViewFloating`                                |                              | Renders the calendar as a popup anchored to a reference element.               |
+| `onChange`            | `(event, value) => void`                              |                              | Called whenever the selection changes. Not called in `range` mode.             |
+| `onRangeChange`       | `(event, range) => void`                              |                              | Fired on every step of a range, including the one that leaves `end` null.      |
+| `onViewChange`        | `(event, view) => void`                               |                              | Called whenever the active calendar page changes.                              |
+
+All `div` HTML attributes are forwarded to the root element.
+
+## CalendarViewItem Props
+
+| Name               | Type                            | Default | Description                                                                       |
+| ------------------ | ------------------------------- | ------- | --------------------------------------------------------------------------------- |
+| `selected`         | `boolean`                       |         | Renders the cell as the selected one.                                             |
+| `disabled`         | `boolean`                       |         | Disables the user interaction.                                                    |
+| `current`          | `boolean`                       |         | Marks the cell as the current date.                                               |
+| `outOfRange`       | `boolean`                       |         | Renders the cell as belonging to a neighbouring page.                             |
+| `blackout`         | `boolean`                       |         | Renders the cell as blacked out, so it reads as unavailable rather than disabled. |
+| `rangePosition`    | `'start' \| 'between' \| 'end'` |         | Set on the days a range covers, which paints the band behind them.                |
+| `header`           | `string`                        |         | A small label rendered above the cell content.                                    |
+| `variant`          | `'day' \| 'monthYear'`          | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle otherwise.    |
+| `children`         | `Snippet`                       |         | The content of the cell.                                                          |
+| `buttonAttributes` | `HTMLButtonAttributes`          |         | The attributes to spread on the inner button element.                             |
+
+All `div` HTML attributes are forwarded to the cell element.

package/dist/components/calendar-view/index.d.ts

@@ -0,0 +1 @@
+export { default as CalendarView } from './calendar-view.svelte';

package/dist/components/calendar-view/index.js

@@ -0,0 +1 @@
+export { default as CalendarView } from './calendar-view.svelte';

package/dist/components/calendar-view/types.d.ts

@@ -0,0 +1,174 @@
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { Snippet } from 'svelte';
+import type { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+export type View = 'days' | 'months' | 'years';
+export type AnimationDirection = 'up' | 'down' | 'neutral';
+export type CalendarSelectionMode = 'single' | 'multiple' | 'range';
+export type DateTimeWeekdayFormat = 'long' | 'short' | 'narrow';
+export type DateTimeMonthFormat = 'long' | 'short' | 'narrow' | 'numeric' | '2-digit';
+export type DateComparisonPrecision = 'time' | 'day' | 'month' | 'year' | 'decade';
+export interface WeekdayLocaleOptions {
+    locale?: string;
+    format?: DateTimeWeekdayFormat;
+    offset?: number;
+}
+export interface MonthLocaleOptions {
+    locale?: string;
+    format?: DateTimeMonthFormat;
+}
+/**
+ * A range of days.
+ *
+ * `end` stays `null` while the range is half-built
+ */
+export interface CalendarDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/** Where a day sits in the painted range: its two ends, or somewhere in between. */
+export type RangePosition = 'start' | 'between' | 'end';
+/** Anchors the calendar to a reference element and positions it with floating-ui. */
+export interface CalendarViewFloating {
+    /** The ref element to which the calendar is anchored */
+    ref?: HTMLElement | VirtualElement | null;
+    /** The floating UI configuration object of the calendar */
+    positionConfig?: Partial<ComputePositionConfig>;
+}
+/** Shape of one rendered calendar page, as seen by keyboard navigation. */
+export interface CalendarGrid {
+    /** Cells per row. */
+    columns: number;
+    /** Cells rendered per page. */
+    size: number;
+    /** Precision at which a date still belongs to the rendered page. */
+    precision: DateComparisonPrecision;
+    /** `date` moved by `amount` cells along the row axis. */
+    shift: (date: Date, amount: number) => Date;
+}
+export interface CalendarNavigationOptions {
+    grid: CalendarGrid;
+    /** The element rendering the live page. */
+    body: () => HTMLElement | null;
+    /** The page currently rendered. */
+    page: () => Date;
+    /** Whether a date is out of the `minDate`/`maxDate` range. */
+    disabled: (date: Date) => boolean;
+    /** Whether a date is rendered but not selectable. */
+    blackout: (date: Date) => boolean;
+    updatePage: (amount: number, direction: AnimationDirection) => void;
+}
+/** @propsmith CalendarViewProps */
+export type CalendarViewProps = {
+    /** The DOM reference of the calendar element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.
+     * @default null
+     * @bindable
+     */
+    value?: Date | Date[] | null;
+    /** How many dates the grid hands out, and in what shape.
+     * @default 'single'
+     */
+    selectionMode?: CalendarSelectionMode;
+    /** The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed.
+     * @default { start: null, end: null }
+     * @bindable
+     */
+    range?: CalendarDateRange;
+    /** Stop a range from spanning a blacked-out date.
+     * @default false
+     */
+    blackoutBreaksRange?: boolean;
+    /** Dates that are rendered but cannot be selected. */
+    blackoutDates?: Date[];
+    /** Labels the first cell of a month or a year with its name. */
+    headers?: boolean;
+    /** The earliest selectable date. */
+    minDate?: Date;
+    /** The latest selectable date. */
+    maxDate?: Date;
+    /** The calendar page the view opens on.
+     * @default 'days'
+     */
+    view?: View;
+    /** The locale used to format weekday and month names.
+     * @default 'en-US'
+     */
+    locale?: string;
+    /** The first day of the week, where 0 is Sunday.
+     * @default 1
+     */
+    weekStart?: number;
+    /** Renders the calendar as a popup anchored to a reference element instead of inline.
+     * @type CalendarViewFloating
+     */
+    floating?: CalendarViewFloating;
+    /** Called whenever the selection changes. Not called in `'range'` mode. */
+    onChange?: (event: Event, value: Date | Date[] | null) => void;
+    /** Fired on every step of a range, including the one that leaves `end` null. */
+    onRangeChange?: (event: Event, range: CalendarDateRange) => void;
+    /** Called whenever the active calendar page changes. */
+    onViewChange?: (event: Event, view: View) => void;
+} & HTMLAttributes<HTMLDivElement>;
+export type CalendarViewContext = FSContext<{
+    locale: string;
+    weekStart: number;
+    minDate?: Date;
+    maxDate?: Date;
+    headers?: boolean;
+    blackoutDates?: Date[];
+    selectionMode: CalendarSelectionMode;
+    blackoutBreaksRange?: boolean;
+}, CalendarViewState, {
+    onChange: (e: Event, value: Date) => void;
+    onViewChange: (e: Event, newView: View) => void;
+}, {
+    /** `focusDate` carries focus into the new view; omit it to leave focus where it is. */
+    updateView: (e: Event, newView: View, focusDate?: Date) => void;
+    updatePage: (amount?: number, directionOverride?: AnimationDirection) => void;
+    selectDay: (e: Event, day: Date) => void;
+    selectMonth: (e: Event, month: Date) => void;
+    selectYear: (e: Event, year: Date) => void;
+    /** Empties whatever the current `selectionMode` holds. */
+    clearSelection: (e: Event) => void;
+}>;
+export type CalendarViewState = {
+    value: Date | Date[] | null;
+    range: CalendarDateRange;
+    view: View;
+    page: Date;
+    viewAnimationDirection: AnimationDirection;
+    pageAnimationDirection: AnimationDirection;
+};
+/** @propsmith CalendarViewItemProps */
+export type CalendarViewItemProps = {
+    /** Renders the cell as the selected one. */
+    selected?: boolean;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** Marks the cell as the current date. */
+    current?: boolean;
+    /** Renders the cell as belonging to a neighbouring page. */
+    outOfRange?: boolean;
+    /** Renders the cell as blacked out, so it reads as unavailable rather than disabled. */
+    blackout?: boolean;
+    /** Set on the days a range covers, which paints the band behind them. */
+    rangePosition?: RangePosition;
+    /** A small label rendered above the cell content. */
+    header?: string;
+    /** Which shape the cell takes: a circle for a day, a rounded rectangle for a month or a year.
+     * @default 'day'
+     */
+    variant?: 'day' | 'monthYear';
+    /** The content of the cell.
+     * @type Snippet
+     */
+    children?: Snippet;
+    /** The attributes to spread on the inner button element.
+     * @type HTMLButtonAttributes
+     */
+    buttonAttributes?: HTMLButtonAttributes;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/calendar-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/checkbox/checkbox.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" generics="T extends 'div' | 'label' = 'label'">
+	import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
+	import SubtractFilled from 'fluentui-icons-svelte/SubtractFilled.svelte';
+	import { PREFIX } from '../../internal/constants.js';
+	import type { CheckboxProps } from './types.js';
+	import type { PolymorphicProps } from '../../types/index.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'checkbox';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		wrapperRef = $bindable(),
+		checked = $bindable(),
+		indeterminate = $bindable(),
+		id = ID,
+		name = id,
+		'aria-hidden': ariaHidden,
+		disabled,
+		wrapperAs = 'label' as T,
+		wrapperAttributes,
+		children,
+		...attributes
+	}: CheckboxProps<T> = $props();
+</script>
+
+<!-- 
+	@component
+  The Fluent UI Checkbox is a customizable input element that allows users to select one or more options from a set.
+  It is designed to be consistent with the Fluent Design System.
+
+	If a `name` attribute isn't passed, `id` attribute will be used instead. If `name` & `id` aren't passed, the component will generate one and apply it to both.
+
+  - Usage:
+  ```tsx
+  <script>
+    import { Checkbox } from 'fluentui-svelte';
+  </script>
+
+  <Checkbox label="Checkbox label" />
+  ```
+ -->
+
+<svelte:element
+	this={wrapperAs}
+	bind:this={wrapperRef}
+	{...wrapperAttributes as PolymorphicProps<T>}
+	class={['fs-checkbox', wrapperAttributes?.class, wrapperAs === 'label' && 'label-wrapper']}
+>
+	<input
+		{id}
+		{name}
+		{disabled}
+		type="checkbox"
+		aria-hidden={ariaHidden}
+		bind:checked
+		bind:this={ref}
+		{indeterminate}
+		{...attributes}
+	/>
+	<div style="pointer-events: none;" aria-hidden="true">
+		<SubtractFilled class="indeterminate" />
+		<CheckmarkFilled class="checked" />
+	</div>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-checkbox {
+		display: inline-flex;
+		align-items: center;
+		border-radius: 0.25rem;
+		outline: none;
+		cursor: pointer;
+		position: relative;
+		gap: 0.75rem;
+		&:has(input:focus-visible) {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.125rem;
+			&.label-wrapper {
+				border-radius: 0.063rem;
+				outline-offset: 0.313rem;
+			}
+		}
+		&:hover div {
+			background-color: var(--fs-control-alt-fill-tertiary);
+		}
+		&:has(input:active) div {
+			background-color: var(--fs-control-alt-fill-quaternary);
+			border-color: var(--fs-control-strong-disabled);
+		}
+		& input {
+			position: absolute;
+			inset: 0;
+			border: unset;
+			outline: 0 !important;
+			opacity: 0;
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			&:indeterminate + div :global(svg.indeterminate),
+			&:checked + div :global(svg.checked) {
+				clip-path: ellipse(60px 60px at 0% 50%);
+				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) clip-path;
+			}
+			&:is(:checked, :indeterminate) {
+				& + div {
+					background-color: var(--fs-accent-fill-default);
+					border-color: var(--fs-accent-fill-default);
+					& :global(svg.indeterminate),
+					& :global(svg.checked) {
+						height: auto;
+						& :global(path) {
+							fill: var(--fs-text-on-accent-primary);
+						}
+					}
+				}
+				&:hover {
+					& + div {
+						background-color: var(--fs-accent-fill-secondary);
+						border-color: var(--fs-accent-fill-secondary);
+					}
+					&:active + div {
+						background-color: var(--fs-accent-fill-tertiary);
+						border-color: var(--fs-accent-fill-tertiary);
+					}
+				}
+			}
+			&:checked + div :global(svg.checked) {
+				width: 1rem;
+			}
+			&:indeterminate + div :global(svg.indeterminate) {
+				width: 0.8rem;
+			}
+		}
+		& div {
+			position: relative;
+			width: 1.25rem;
+			height: 1.25rem;
+			border: 1px solid var(--fs-control-strong-stroke-default);
+			border-radius: var(--fs-control-border-radius);
+			background-color: var(--fs-control-alt-fill-secondary);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			& :global(svg) {
+				width: 0;
+				fill: var(--fs-text-on-accent-primary);
+				transform-origin: 80% 20%;
+				clip-path: ellipse(0 0 at 0% 90%);
+			}
+		}
+		&:has(input:disabled) {
+			pointer-events: none;
+			color: var(--fs-text-disabled);
+			& input + div {
+				background-color: var(--fs-control-alt-fill-disabled);
+				border-color: var(--fs-control-strong-stroke-disabled);
+			}
+			& input:checked + div,
+			& input:indeterminate + div {
+				background-color: var(--fs-accent-fill-disabled);
+				border-color: var(--fs-control-fill-transparent);
+			}
+			& :global(svg path) {
+				fill: var(--fs-text-on-accent-disabled);
+			}
+		}
+	}
+</style>

package/dist/components/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { CheckboxProps } from './types.ts';
+declare function $$render<T extends 'div' | 'label' = 'label'>(): {
+    props: CheckboxProps<T>;
+    exports: {};
+    bindings: "ref" | "checked" | "indeterminate" | "wrapperRef";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends 'div' | 'label' = 'label'> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "checked" | "indeterminate" | "wrapperRef";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 'div' | 'label' = 'label'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends 'div' | 'label' = 'label'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * The Fluent UI Checkbox is a customizable input element that allows users to select one or more options from a set.
+ *  It is designed to be consistent with the Fluent Design System.
+ *
+ * If a `name` attribute isn't passed, `id` attribute will be used instead. If `name` & `id` aren't passed, the component will generate one and apply it to both.
+ *
+ *  - Usage:
+ *  ```tsx
+ *  <script>
+ *    import { Checkbox } from 'fluentui-svelte';
+ *  </script>
+ *
+ *  <Checkbox label="Checkbox label" />
+ *  ```
+ */
+declare const Checkbox: $$IsomorphicComponent;
+type Checkbox<T extends 'div' | 'label' = 'label'> = InstanceType<typeof Checkbox<T>>;
+export default Checkbox;

package/dist/components/checkbox/docs/llms.md

@@ -0,0 +1,78 @@
+# Checkbox
+
+Represents a control that a user can select (check) or clear (uncheck). A CheckBox can also report its value as indeterminate.
+
+## Usage
+
+```svelte
+<script>
+	import { Checkbox } from 'fluentui-svelte';
+</script>
+
+<Checkbox wrapperAs="label">Default</Checkbox>
+```
+
+## Component API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props in the Checkbox Props table below.
+
+## Examples
+
+### Label
+
+To display a visible label, set `wrapperAs="label"` and pass the label text as children. The wrapper then renders as a `<label>` element that wraps the input.
+
+```svelte
+<Checkbox />
+<Checkbox wrapperAs="label">FluentUI Checkbox</Checkbox>
+<Checkbox wrapperAs="label">Another Checkbox</Checkbox>
+```
+
+### Checked
+
+The `checked` prop determines whether the checkbox is checked or not. It accepts a boolean value.
+
+```svelte
+<Checkbox wrapperAs="label">Unchecked</Checkbox>
+<Checkbox wrapperAs="label" checked>Checked</Checkbox>
+```
+
+### Indeterminate
+
+The `indeterminate` prop sets the checkbox to an indeterminate state, which is useful for representing a mixed selection.
+
+```svelte
+<Checkbox wrapperAs="label" indeterminate>Indeterminate</Checkbox>
+```
+
+### Disabled
+
+The `disabled` prop disables the checkbox, preventing user interaction. It accepts a boolean value.
+
+```svelte
+<Checkbox wrapperAs="label" disabled>Disabled</Checkbox>
+<Checkbox wrapperAs="label" checked disabled>Checked & Disabled</Checkbox>
+```
+
+### Value
+
+The `value` prop sets the value of the checkbox input. It is useful when the checkbox is part of a form submission.
+
+```svelte
+<Checkbox wrapperAs="label" value="checkbox-value">Checkbox with Value</Checkbox>
+```
+
+## Checkbox Props
+
+| Name                | Type                                          | Description                                                                                    |
+| ------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `wrapperAs`         | `'div' \| 'label'`                            | The element the wrapper renders as. Set to `label` to show a visible label. Defaults to `div`. |
+| `children`          | `Snippet`                                     | Label content rendered next to the input. Only allowed when `wrapperAs="label"`.               |
+| `checked`           | `boolean`                                     | Determines if the checkbox is checked.                                                         |
+| `indeterminate`     | `boolean`                                     | Sets the checkbox to an indeterminate state.                                                   |
+| `disabled`          | `boolean`                                     | Disables the checkbox, preventing user interaction.                                            |
+| `value`             | `string`                                      | The value of the checkbox input, useful for form submissions.                                  |
+| `wrapperAttributes` | `object`                                      | Additional attributes for the wrapper element.                                                 |
+| `ref`               | bindable `HTMLInputElement`                   | The DOM reference of the checkbox input element.                                               |
+| `wrapperRef`        | bindable `HTMLDivElement \| HTMLLabelElement` | The DOM reference of the checkbox wrapper element.                                             |
+| Input Attributes    |                                               | Additional attributes for the checkbox input element.                                          |

package/dist/components/checkbox/types.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { PolymorphicProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+/** @propsmith CheckboxProps */
+export type CheckboxProps<T extends 'div' | 'label' = 'div'> = {
+    /** The DOM reference of the checkbox element.
+     * @bindable
+     */
+    ref?: HTMLInputElement;
+    /** The DOM element used to wrap the checkbox. `label` associates the children with the
+     * input; switch to `div` when the field is wrapped in a `<Label>` of its own.
+     * @default 'label'
+     * @type 'div' | 'label'
+     * @default 'div'
+     */
+    wrapperAs?: T;
+    /** The DOM reference of the checkbox wrapper element.
+     * @type HTMLDivElement | HTMLLabelElement
+     * @bindable
+     */
+    wrapperRef?: WrapperRef[T];
+    /** The attributes to spread on the wrapper element.
+     * @type PolymorphicProps
+     */
+    wrapperAttributes?: PolymorphicProps<T>;
+    /** Renders the checkbox in its mixed state, neither checked nor unchecked.
+     * @bindable
+     */
+    indeterminate?: boolean;
+    /** The name submitted with the form. Falls back to the id of the checkbox.
+     * @default id
+     */
+    name?: string | null;
+    /** The value of the group of checkboxes this input belongs to. */
+    group?: string | null;
+    /** Whether the checkbox is checked.
+     * @bindable
+     */
+    checked?: boolean;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The content of the label. Only rendered when wrapperAs is set to label.
+     * @type Snippet
+     */
+    children?: T extends 'label' ? Snippet : never;
+} & Omit<HTMLInputAttributes, 'on:' | 'children'>;
+export type WrapperRef = {
+    label: HTMLLabelElement;
+    div: HTMLDivElement;
+};

package/dist/components/checkbox/types.js

@@ -0,0 +1 @@
+export {};