### Install and Run Commands

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/get-started.md

Commands used to initialize dependencies and start the development server within the monorepo.

```bash
pnpm i
```

```bash
pnpm dev
```

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

### Install Skeleton Packages

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/sveltekit.md

Install the core and Svelte component packages for Skeleton.

```bash
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
```

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

### Install Skeleton React Package

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Install the Skeleton UI package for React projects.

```bash
@skeletonlabs/skeleton-react
```

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

### Install Melt UI

Source: https://www.skeleton.dev/docs/svelte/integrations/melt-ui.md

Install the Melt UI package using your preferred package manager.

```bash
npm install melt
```

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

### Start the development server

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/nextjs.md

Launch the local development environment.

```bash
npm run dev
```

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

### Install Floating UI

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/floating-ui-attachments.md

Install the standard Floating UI DOM package via npm.

```bash
npm install @floating-ui/dom
```

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

### Install Tailwind Forms plugin

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/forms.md

Command to install the required dependency for form styling.

```sh
npm install -D @tailwindcss/forms
```

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

### Install Bits UI and Date Dependencies

Source: https://www.skeleton.dev/docs/svelte/integrations/bits-ui.md

Install the required Bits UI package and the internationalized date library for handling date formatting.

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

```bash
npm i -D @internationalized/date
```

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

### Create a Basic Tooltip

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/floating-ui-attachments.md

Usage example for a tooltip, demonstrating configuration adjustments for interaction and placement.

```svelte
TooltipRaw
```

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

### Install Skeleton Svelte Package

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Install the Skeleton UI package for Svelte projects.

```bash
@skeletonlabs/skeleton-svelte
```

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

### Install Astro React Integration

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Use this command to add React support to your Astro project. Ensure you have npx installed.

```bash
npx astro add react
```

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

### Basic Button Examples

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/buttons.md

Demonstrates creating icon-only, standard, and button-with-icon elements using Astro components. Requires 'lucide-react' for icons.

```astro
---import { ArrowRightIcon } from 'lucide-react';---

<div class="flex items-center gap-4">
	<!-- A simple icon button -->
	<button type="button" class="btn-icon preset-filled" title="Go" aria-label="Go"><ArrowRightIcon size={18} /></button>
	<!-- A standard button -->
	<button type="button" class="btn preset-filled">Button</button>
	<!-- A button + icon -->
	<button type="button" class="btn preset-filled">
		<span>Button</span>
		<ArrowRightIcon size={18} />
	</button>
</div>
```

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

### Install Skeleton Core

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Add the Skeleton core package as a development dependency.

```bash
npm i -D @skeletonlabs/skeleton
```

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

### Applying Color Pairings

Source: https://www.skeleton.dev/docs/svelte/design/colors.md

Examples of using the condensed syntax for color pairings.

```html
<div class="bg-surface-200-800">...</div>
<div class="border border-secondary-400-600">...</div>
<svg class="fill-secondary-50-950">...</svg>
```

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

### Install Astro Svelte Integration

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Use this command to add Svelte support to your Astro project. Ensure you have npx installed.

```bash
npx astro add svelte
```

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

### Install Skeleton dependencies

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/nextjs.md

Add the core and React component packages to your project as dev dependencies.

```bash
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-react
```

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

### Complete Calendar Example with Styles and Configuration

Source: https://www.skeleton.dev/docs/svelte/integrations/bits-ui.md

A full implementation of the Calendar component demonstrating various styling options and basic configuration, including date unavailability and fixed weeks.

```svelte
<script lang="ts">
	import { getLocalTimeZone, today } from '@internationalized/date';
	import { Calendar } from 'bits-ui';

	const isDateUnavailable: Calendar.RootProps['isDateUnavailable'] = (date) => {
		return date.day === 17 || date.day === 18;
	};

	let value = $state(today(getLocalTimeZone()));
</script>

<Calendar.Root
	class="card inline-block border border-surface-200-800 bg-surface-50-950 shadow-xl mt-6 p-4"
	{isDateUnavailable}
	weekdayFormat="short"
	fixedWeeks={true}
	type="single"
	bind:value
>
	{#snippet children({ months, weekdays })}
		<Calendar.Header class="flex items-center justify-between">
			<Calendar.PrevButton class="btn-icon preset-filled-primary-500" title="Previous month" aria-label="Previous month">
				<span>&larr;</span>
			</Calendar.PrevButton>
			<Calendar.Heading class="text-lg font-bold" />
			<Calendar.NextButton class="btn-icon preset-filled-primary-500" title="Next month" aria-label="Next month">
				<span>&rarr;</span>
			</Calendar.NextButton>
		</Calendar.Header>
		<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
			{#each months as month, i (i)}
				<Calendar.Grid class="w-full border-collapse select-none space-y-1">
					<Calendar.GridHead>
						<Calendar.GridRow class="mb-1 flex w-full justify-between">
							{#each weekdays as day}
								<Calendar.HeadCell class="text-surface-600-400 font-normal! w-10 rounded-md text-xs">
									<div>{day.slice(0, 2)}</div>
								</Calendar.HeadCell>
							{/each}
						</Calendar.GridRow>
					</Calendar.GridHead>
					<Calendar.GridBody>
						{#each month.weeks as weekDates}
							<Calendar.GridRow class="flex w-full">
								{#each weekDates as date}
									<Calendar.Cell {date} month={month.value} class="p-0! relative size-10 text-center text-sm">
										<Calendar.Day
											class="rounded hover:border-surface-200-800 data-selected:bg-foreground data-disabled:text-surface-600-400 data-selected:preset-filled data-unavailable:text-surface-600-400 data-disabled:pointer-events-none data-outside-month:pointer-events-none data-selected:font-medium data-unavailable:line-through group relative inline-flex size-10 items-center justify-center whitespace-nowrap border border-transparent bg-transparent p-0 text-sm font-normal"
										>
											<div
												class="bg-foreground group-data-selected:bg-surface-50-950 group-data-today:block absolute top-[5px] hidden size-1 rounded-full"
											></div>
											{date.day}
										</Calendar.Day>
									</Calendar.Cell>
								{/each}
							</Calendar.GridRow>
						{/each}
					</Calendar.GridBody>
				</Calendar.Grid>
			{/each}
		</div>
	{/snippet}
</Calendar.Root>
```

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

### Outlined Preset Configuration

Source: https://www.skeleton.dev/docs/svelte/design/presets.md

Syntax and implementation examples for the outlined preset, designed for minimal interfaces.

```txt
preset-outlined
preset-outlined-{color}-{shade}-{shade}
```

```astro
<div class="grid w-full grid-cols-2 gap-2 lg:grid-cols-3">
	{/* Neutral */}
	<button type="button" class="btn preset-outlined">(neutral)</button>
	{/* Colors */}
	<button type="button" class="btn preset-outlined-primary-950-50">950-50</button>
	<button type="button" class="btn preset-outlined-primary-900-100">900-100</button>
	<button type="button" class="btn preset-outlined-primary-800-200">800-200</button>
	<button type="button" class="btn preset-outlined-primary-700-300">700-300</button>
	<button type="button" class="btn preset-outlined-primary-600-400">600-400</button>
	<button type="button" class="btn preset-outlined-primary-500">500</button>
	<button type="button" class="btn preset-outlined-primary-400-600">400-600</button>
	<button type="button" class="btn preset-outlined-primary-300-700">300-700</button>
	<button type="button" class="btn preset-outlined-primary-200-800">200-800</button>
	<button type="button" class="btn preset-outlined-primary-100-900">100-900</button>
	<button type="button" class="btn preset-outlined-primary-50-950">50-950</button>
</div>
```

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

### Color Scheme Examples

Source: https://www.skeleton.dev/docs/svelte/guides/mode.md

Demonstrates using Skeleton's color scheme feature with Tailwind. The first example uses a default color pairing that adapts to dark mode. The subsequent examples explicitly set the scheme to light or dark using `scheme-light` and `scheme-dark` classes.

```html
<div class="bg-primary-50-950">Light or Dark</div>

<div class="scheme-light">
	<div class="bg-primary-50-950">Always Light Scheme</div>
</div>

<div class="scheme-dark">
	<div class="bg-primary-50-950">Always Dark Scheme</div>
</div>
```

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

### Create a Basic Popover

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/floating-ui-attachments.md

Usage example for a standard popover using the custom Popover attachment class.

```svelte
PopoverRaw
```

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

### Install Radix Toggle Group

Source: https://www.skeleton.dev/docs/svelte/integrations/radix-ui.md

Install the specific Radix UI package required for the Toggle Group component.

```bash
npm install @radix-ui/react-toggle-group
```

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

### Basic Slider Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/slider.md

A fundamental example of the Slider component with a single thumb and default markers.

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]}>
	<Slider.Label>Label</Slider.Label>
	<Slider.Control>
		<Slider.Track>
			<Slider.Range />
		</Slider.Track>
		<Slider.Thumb index={0}>
			<Slider.HiddenInput />
		</Slider.Thumb>
	</Slider.Control>
	<Slider.MarkerGroup>
		<Slider.Marker value={25} />
		<Slider.Marker value={50} />
		<Slider.Marker value={75} />
	</Slider.MarkerGroup>
</Slider>
```

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

### Basic Breadcrumbs Example

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/breadcrumbs.md

Displays a simple breadcrumb navigation structure using HTML and Svelte.

```svelte
<ol class="flex items-center gap-4">
	<li><a class="opacity-60 hover:underline" href="#">Blog</a></li>
	<li class="opacity-50" aria-hidden>&rsaquo;</li>
	<li><a class="opacity-60 hover:underline" href="#">Category</a></li>
	<li class="opacity-50" aria-hidden>&rsaquo;</li>
	<li>Article</li>
</ol>

```

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

### Tonal Preset Configuration

Source: https://www.skeleton.dev/docs/svelte/design/presets.md

Syntax and implementation examples for the tonal preset, suitable for alerts and auxiliary actions.

```txt
preset-tonal
preset-tonal-{color}
```

```astro
<div class="w-full grid grid-cols-2 lg:grid-cols-4 gap-2">
	{/* Neutral */}
	<button type="button" class="btn preset-tonal">(neutral)</button>
	{/* Colors */}
	<button type="button" class="btn preset-tonal-primary">primary</button>
	<button type="button" class="btn preset-tonal-secondary">secondary</button>
	<button type="button" class="btn preset-tonal-tertiary">tertiary</button>
	<button type="button" class="btn preset-tonal-success">success</button>
	<button type="button" class="btn preset-tonal-warning">warning</button>
	<button type="button" class="btn preset-tonal-error">error</button>
	<button type="button" class="btn preset-tonal-surface">surface</button>
</div>
```

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

### Install Shiki via NPM

Source: https://www.skeleton.dev/docs/svelte/integrations/code-block.md

Use this command to add the Shiki package to your project dependencies.

```bash
npm install -D shiki
```

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

### Toast Placement Configuration

Source: https://www.skeleton.dev/docs/svelte/framework-components/toast.md

Configure the global screen position of toasts by setting the `placement` value in your `createToaster` instance. Example shown is 'bottom-end'.

```svelte
<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster({
		placement: 'bottom-end',
	});
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		oaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>
```

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

### Basic Toast Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/toast.md

Implement a single Toast.Group instance in your root scope. This example shows how to trigger an info toast with a title and description.

```svelte
<script lang="ts">
	import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';

	const toaster = createToaster();
</script>

<button
	class="btn preset-filled"
	onclick={() =>
		oaster.info({
			title: 'Title',
			description: 'This is a description.',
		})}
>
	Toast
</button>

<Toast.Group {toaster}>
	{#snippet children(toast)}
		<Toast {toast}>
			<Toast.Message>
				<Toast.Title>{toast.title}</Toast.Title>
				<Toast.Description>{toast.description}</Toast.Description>
			</Toast.Message>
			<Toast.CloseTrigger />
		</Toast>
	{/snippet}
</Toast.Group>
```

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

### Configure Server-Side Pagination

Source: https://www.skeleton.dev/docs/svelte/framework-components/pagination.md

Examples for handling server-side pagination responses and binding them to the component.

```typescript
const res = {
	"results": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```

```html
<Pagination
	page={res.pagination.page}
	count={res.pagination.count}
	pageSize={res.pagination.limit}
>
	<!-- ... -->
</Pagination>
```

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

### Filled Preset Configuration

Source: https://www.skeleton.dev/docs/svelte/design/presets.md

Syntax and implementation examples for the filled preset, which automatically handles contrast colors.

```txt
preset-filled
preset-filled-{color}-{lightModeShade}-{darkModeShade}
```

```astro
<div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-2">
	{/* Neutral */}
	<button type="button" class="btn preset-filled">(neutral)</button>
	{/* Colors */}
	<button type="button" class="btn preset-filled-primary-950-50">950-50</button>
	<button type="button" class="btn preset-filled-primary-900-100">900-100</button>
	<button type="button" class="btn preset-filled-primary-800-200">800-200</button>
	<button type="button" class="btn preset-filled-primary-700-300">700-300</button>
	<button type="button" class="btn preset-filled-primary-600-400">600-400</button>
	<button type="button" class="btn preset-filled-primary-500">500</button>
	<button type="button" class="btn preset-filled-primary-400-600">400-600</button>
	<button type="button" class="btn preset-filled-primary-300-700">300-700</button>
	<button type="button" class="btn preset-filled-primary-200-800">200-800</button>
	<button type="button" class="btn preset-filled-primary-100-900">100-900</button>
	<button type="button" class="btn preset-filled-primary-50-950">50-950</button>
</div>
```

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

### Basic Tooltip with Top Positioning

Source: https://www.skeleton.dev/docs/svelte/framework-components/tooltip.md

A basic tooltip example with the content positioned at the top. Ensure the necessary components are imported from '@skeletonlabs/skeleton-svelte'.

```svelte
<script lang="ts">
	import { Portal, Tooltip } from '@skeletonlabs/skeleton-svelte';
</script>

<Tooltip positioning={{ placement: 'top' }}>
	<Tooltip.Trigger>Hover</Tooltip.Trigger>
	<Portal>
		<Tooltip.Positioner>
			<Tooltip.Content class="card p-2 preset-filled-surface-950-50">
				<span>Hello Skeleton</span>
				<Tooltip.Arrow class="[--arrow-size:--spacing(2)] [--arrow-background:var(--color-surface-950-50)]">
					<Tooltip.ArrowTip />
				</Tooltip.Arrow>
			</Tooltip.Content>
		</Tooltip.Positioner>
	</Portal>
</Tooltip>

```

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

### Applying Color Utilities

Source: https://www.skeleton.dev/docs/svelte/design/colors.md

Examples of applying color utilities to HTML elements and SVG icons.

```html
<div class="bg-primary-500">...</div>
<div class="border border-secondary-600">...</div>
<svg class="fill-surface-950">...</svg>
```

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

### Switch with List Layout

Source: https://www.skeleton.dev/docs/svelte/framework-components/switch.md

Create a list of switches where each item has a label. This example iterates through labels and includes a horizontal rule between items, except for the last one. Requires importing the Switch component.

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid gap-2 w-full">
	{#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
		<Switch class="flex justify-between p-2">
			<Switch.Label>{label}</Switch.Label>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.HiddenInput />
		</Switch>
		{#if i < 2}
			<hr class="hr" />
		{/if}
	{/each}
</div>

```

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

### Floating Panel with Size Constraints

Source: https://www.skeleton.dev/docs/svelte/framework-components/floating-panel.md

This example shows how to apply size constraints to a Floating Panel using the `minSize` and `maxSize` props. The panel will be restricted to the specified dimensions when resized.

```svelte
<script>
	import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel maxSize={{ width: 900, height: 600 }} minSize={{ width: 300, height: 200 }}>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon className="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.</p>
					<p>Try resizing from the bottom-right corner - the panel will respect these boundaries.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

```

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

### Defining Default Theme Stylesheet

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/dynamic-theming.md

Setup for a fallback theme using CSS imports and data-theme attribute selectors.

```css
@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import './default.css';
```

```css
[data-theme='default'] {/* ... */}
```

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

### Generate Changeset

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/get-started.md

Example of a changeset file used for versioning and changelog generation. Ensure the package name and version bump type are correct.

```markdown
---
'@skeletonlabs/skeleton-svelte': minor
---

feat: Added `Avatar` component.

```

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

### Create Vite + Svelte Project

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-svelte.md

Use npm to create a new Vite project with Svelte and TypeScript. Navigate into the project directory and install dependencies.

```bash
npm create vite@latest
	- Set your project named as desired
	- Set Svelte as the framework
	- Set Typescript as the variant
cd {yourProjectName}
npm install
```

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

### Svelte Component Part File Example

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/components.md

Defines the root component part for a Svelte component, including its props interface and script setup.

```svelte
<script lang="ts" module>
	export interface AvatarRootProps {
		// ...
	}
</script>

<script lang="ts">
	const props: AvatarRootProps = $props();

	// ...
</script>

<!-- ... --->
```

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

### Create a SvelteKit Project

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/sveltekit.md

Initialize a new SvelteKit project using the Svelte CLI.

```bash
npx sv create --types ts my-skeleton-app
cd my-skeleton-app
```

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

### Create an Astro Project

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Initialize a new Astro project with Tailwind CSS support.

```bash
npm create astro@latest --add tailwind my-skeleton-app
cd my-skeleton-app
```

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

### Create Starter Layout

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/astro.md

Define a basic Astro component layout using global styles and Skeleton classes.

```astro
---
import '../styles/global.css';

const framework = 'Astro';
---

<main class="p-10 space-y-4">
	<h1 class="h1">Hello {framework}</h1>
	<p>This page is working.</p>
	<button type="button" class="btn preset-filled-primary-500">Example Button</button>
</main>
```

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

### Install Custom Fonts

Source: https://www.skeleton.dev/docs/svelte/design/themes.md

Install a font package via npm using Fontsource.

```bash
npm install @fontsource/open-sans
```

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

### Basic Floating Panel Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/floating-panel.md

This snippet demonstrates the basic setup for a Floating Panel. It includes imports for necessary icons and components, and structures the panel with a trigger, portal, positioner, content, header, body, and resize trigger.

```svelte
<script>
	import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon className="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>
						This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing from
					the bottom-right corner.
					</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

```

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

### Implement Skeleton Presets

Source: https://www.skeleton.dev/docs/svelte/design/presets.md

Demonstrates the basic usage of filled, tonal, and outlined presets within an Astro component.

```astro
---
const diagramCircle = 'preset-tonal w-8 aspect-square flex justify-center items-center rounded-full';
---

<div class="grid grid-cols-3 gap-10">
	<!-- Preset: Filled -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-filled-primary-500">Filled</button>
		<div class={diagramCircle}>1</div>
	</div>
	<!-- Preset: Tonal -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-tonal-primary">Tonal</button>
		<div class={diagramCircle}>2</div>
	</div>
	<!-- Preset: Outlined -->
	<div class="flex flex-col items-center gap-4">
		<button type="button" class="btn preset-outlined-primary-500">Outlined</button>
		<div class={diagramCircle}>3</div>
	</div>
</div>
```

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

### Selector Strategy HTML Example

Source: https://www.skeleton.dev/docs/svelte/guides/mode.md

Example of an HTML element with the `.dark` class applied to the `<html>` tag to enable dark mode.

```html
<html class="dark">
	<!-- ... -->
</html>
```

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

### Implement various input types

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/forms.md

Demonstration of common HTML input types styled with Skeleton classes.

```astro
<form class="mx-auto w-full max-w-md space-y-4">
	<!-- text -->
	<label class="label">
		<span class="label-text">Input</span>
		<input class="input" type="text" placeholder="Input" />
	</label>
	<!-- password -->
	<label class="label">
		<span class="label-text">Input: password</span>
		<input class="input" type="password" placeholder="Input" />
	</label>
	<!-- email -->
	<label class="label">
		<span class="label-text">Input: email</span>
		<input class="input" type="email" placeholder="Input" />
	</label>
	<!-- url -->
	<label class="label">
		<span class="label-text">Input: url</span>
		<input class="input" type="url" placeholder="Input" />
	</label>
	<!-- tel -->
	<label class="label">
		<span class="label-text">Input: tel</span>
		<input class="input" type="tel" placeholder="Input" />
	</label>
	<!-- search -->
	<label class="label">
		<span class="label-text">Input: search</span>
		<input class="input" type="search" placeholder="Input" />
	</label>
	<!-- number -->
	<label class="label">
		<span class="label-text">Input: number</span>
		<input class="input" type="number" placeholder="Input" />
	</label>
</form>
```

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

### Basic Steps Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/steps.md

Implement a multi-step process using the Steps component. Ensure the `Steps` component is imported from '@skeletonlabs/skeleton-svelte'.

```svelte
<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];
</script>

<Steps count={steps.length} class="w-full">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	{#each steps as item, index}
		<Steps.Content {index}>
			{item.content}
		</Steps.Content>
	{/each}
	<Steps.Content index={steps.length}>All done!</Steps.Content>
	<div class="flex justify-between items-center gap-2">
		<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
		<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
	</div>
</Steps>
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-svelte.md

Install Tailwind CSS and its Vite plugin. Implement the plugin in your vite.config.ts file, ensuring it comes before the Svelte plugin.

```bash
npm install tailwindcss @tailwindcss/vite
```

```typescript
import { defineConfig } from "vite";
import svelte from "@vitejs/plugin-svelte";
import tailwindcss from "@tailwindcss/vite"; // [!code ++]

export default defineConfig({
	plugins: [
		tailwindcss(), // [!code ++]
		svelte() // <-- Must come after Tailwind
	],
});
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/vite-react.md

Install Tailwind CSS and its Vite plugin. Ensure the Tailwind plugin is added to your vite.config.ts file and comes before the React plugin.

```bash
npm install tailwindcss @tailwindcss/vite
```

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite"; // [!code ++]

export default defineConfig({
	plugins: [
		tailwindcss(), // [!code ++]
		react() // <-- Must come after Tailwind
	],
});
```

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

### Data Attribute Strategy HTML Example

Source: https://www.skeleton.dev/docs/svelte/guides/mode.md

Example of an HTML element with the `data-mode="dark"` attribute applied to the `<html>` tag to enable dark mode.

```html
<html data-mode="dark">
	<!-- ... -->
</html>
```

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

### Scaffold a Next.js project

Source: https://www.skeleton.dev/docs/svelte/get-started/installation/nextjs.md

Initialize a new Next.js application using the official CLI.

```bash
npm create next-app@latest my-skeleton-app
cd my-skeleton-app
```

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

### Trigger Message Addition

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/chat.md

Example of binding the addMessage function to a button click event.

```svelte
<button ... onclick={addMessage}>Send</button>
```

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

### Basic Menu Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/menu.md

Standard dropdown menu using a trigger and portal-based positioning.

```svelte
<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger class="btn preset-filled">Open Menu</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu.Item value="new">
					<Menu.ItemText>New File</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="open">
					<Menu.ItemText>Open File</Menu.ItemText>
				</Menu.Item>
				<Menu.Separator />
				<Menu.Item value="save">
					<Menu.ItemText>Save</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="export">
					<Menu.ItemText>Export</Menu.ItemText>
				</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>
```

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

### Branch Naming Conventions

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/get-started.md

Examples of semantic branch names using the required kebab-case format.

```text
docs/get-started-typo
bugfix/accordion-render-issue
```

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

### Run Automated Migration

Source: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v2.md

Execute these commands sequentially to migrate your project to Skeleton v3 and v4 respectively.

```bash
npx skeleton@latest migrate skeleton-3
```

```bash
npx skeleton@latest migrate skeleton-4
```

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

### Run Development Server Commands

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/components.md

Use these commands to run the development server for different projects within Skeleton.

```bash
pnpm doc dev
```

```bash
pnpm themes dev
```

```bash
pnpm react dev
```

```bash
pnpm svelte dev
```

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

### Configure Deep Linking

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/table-of-contents.md

Examples of how to define an element ID and link to it using an anchor tag.

```html
<h2 class="#some-example-slug">
	Some Example Heading
	<h2></h2>
</h2>
```

```html
<a href="#real-world-example" class="anchor">Some Example Heading</a>
```

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

### Basic Chip Styles

Source: https://www.skeleton.dev/docs/svelte/tailwind-components/chips.md

Demonstrates different chip variations: icon-only, text-only, and text with an icon. Ensure 'lucide-react' is imported for icon usage.

```astro
---import { CheckIcon } from 'lucide-react';---

<div class="flex items-center gap-4">
	<!-- A simple icon chip -->
	<button type="button" class="chip-icon preset-filled">
		<CheckIcon size={16} />
	</button>
	<!-- A standard chip -->
	<button type="button" class="chip preset-filled">Chip</button>
	<!-- A chip + icon -->
	<button type="button" class="chip preset-filled">
		<span>Chip</span>
		<CheckIcon size={16} />
	</button>
</div>
```

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

### Implement CodeBlock Component Usage

Source: https://www.skeleton.dev/docs/svelte/integrations/code-block.md

Example of how to utilize the custom CodeBlock component within a Svelte page.

```svelte
<script lang="ts">
	import CodeBlock from './code-block.svelte';
</script>

<div class="p-10 space-y-4">
	<CodeBlock code="npx sv create my-skeleton-app" lang="bash" />
	<CodeBlock code="<div class=&quot;bg-green-500&quot;" lang="html" />
	<CodeBlock code=".foobar &#123; background: green; &#125;" lang="css" />
	<CodeBlock code="const foot = 'bar';" lang="js" />
</div>
```

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

### Import Lightswitch Component in App

Source: https://www.skeleton.dev/docs/svelte/guides/cookbook/light-switch.md

Integrate the created Lightswitch component into your main application file.

```svelte
<script lang="ts">
	import Lightswitch from './path/to/Lightswitch.svelte';
</script>

<Lightswitch />
```

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

### Run automated migration CLI

Source: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v3.md

Execute the automated migration command to handle initial package and stylesheet updates. Manual steps are still required afterward.

```bash
npx skeleton@latest migrate skeleton-4
```

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

### Zag Avatar Component HTML Structure

Source: https://www.skeleton.dev/docs/svelte/resources/contribute/components.md

Example of the DOM structure for the Zag Avatar component, illustrating its core elements.

```html
<div>
	<img />
	<span>...</span>
</div>
```

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

### Basic Dialog Implementation

Source: https://www.skeleton.dev/docs/svelte/framework-components/dialog.md

Use this snippet to create a standard modal dialog. It requires importing Dialog, Portal, and XIcon components. The animation class is optional and can be defined inline.

```svelte
<script lang="ts">
	import { XIcon } from '@lucide/svelte';
	import { Dialog, Portal } from '@skeletonlabs/skeleton-svelte';

	// The following animation is optional.
	// This may also be included inline.
	const animation =
		'transition transition-discrete opacity-0 translate-y-[100px] starting:data-[state=open]:opacity-0 starting:data-[state=open]:translate-y-[100px] data-[state=open]:opacity-100 data-[state=open]:translate-y-0';
</script>

<Dialog>
	<Dialog.Trigger class="btn preset-filled">Trigger</Dialog.Trigger>
	<Portal>
		<Dialog.Backdrop class="fixed inset-0 z-50 bg-surface-50-950/50" />
		<Dialog.Positioner class="fixed inset-0 z-50 flex justify-center items-center p-4">
			<Dialog.Content class="card bg-surface-100-900 w-full max-w-xl p-4 space-y-4 shadow-xl {animation}">
				<header class="flex justify-between items-center">
					<Dialog.Title class="text-lg font-bold">Hello Skeleton</Dialog.Title>
					<Dialog.CloseTrigger class="btn-icon hover:preset-tonal">
						<XIcon class="size-4" />
					</Dialog.CloseTrigger>
				</header>
				<Dialog.Description>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</Dialog.Description>
				<footer class="flex justify-end gap-2">
					<Dialog.CloseTrigger class="btn preset-tonal">Cancel</Dialog.CloseTrigger>
					<button type="button" class="btn preset-filled">Save</button>
				</footer>
			</Dialog.Content>
		</Dialog.Positioner>
	</Portal>
</Dialog>
```

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

### Basic Carousel Example

Source: https://www.skeleton.dev/docs/svelte/framework-components/carousel.md

A standard carousel implementation with navigation controls and indicators. Ensure slides are properly defined and passed to the component.

```svelte
<script lang="ts">
	import { Carousel } from '@skeletonlabs/skeleton-svelte';

	const slides = [
		{ title: 'Slide 1' },
		{ title: 'Slide 2' },
		{ title: 'Slide 3' },
		{ title: 'Slide 4' },
		{ title: 'Slide 5' },
		{ title: 'Slide 6' },
		{ title: 'Slide 7' },
		{ title: 'Slide 8' },
		{ title: 'Slide 9' },
		{ title: 'Slide 10' },
	];
</script>

<Carousel slideCount={slides.length} slidesPerPage={3} spacing="16px" loop>
	<Carousel.Control class="flex justify-between mb-4">
		<Carousel.PrevTrigger class="btn preset-filled">
			<span>&larr;</span>
			<span>Back</span>
		</Carousel.PrevTrigger>
		<Carousel.AutoplayTrigger class="btn preset-tonal">Toggle Autoplay</Carousel.AutoplayTrigger>
		<Carousel.NextTrigger class="btn preset-filled">
			<span>Next</span>
			<span>&rarr;</span>
		</Carousel.NextTrigger>
	</Carousel.Control>
	<Carousel.ItemGroup>
		{#each slides as slide, i}
			<Carousel.Item index={i} class="card bg-surface-100-900 h-50 p-4 flex justify-center items-center">
				{slide.title}
			</Carousel.Item>
		{/each}
	</Carousel.ItemGroup>
	<Carousel.IndicatorGroup>
		<Carousel.Context>
			{#snippet children(carousel)}
				{#each carousel().pageSnapPoints as _, index}
					<Carousel.Indicator {index} />
				{/each}
			{/snippet}
		</Carousel.Context>
	</Carousel.IndicatorGroup>
</Carousel>
```

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

### Slider with Multiple Thumbs

Source: https://www.skeleton.dev/docs/svelte/framework-components/slider.md

Enables selection of a range by providing an array with two values to `defaultValue`, creating start and end thumbs.

```svelte
<script lang="ts">
	import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[25, 75]}>
	<Slider.Control>
		<Slider.Track>
			<Slider.Range />
		</Slider.Track>
		<Slider.Thumb index={0}>
			<Slider.HiddenInput />
		</Slider.Thumb>
		<Slider.Thumb index={1}>
			<Slider.HiddenInput />
		</Slider.Thumb>
	</Slider.Control>
</Slider>
```

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

### Basic App Bar Usage

Source: https://www.skeleton.dev/docs/svelte/framework-components/app-bar.md

A standard App Bar with lead, headline, and trail elements. Imports necessary icons and the AppBar component.

```svelte
<script lang="ts">
	import { CalendarIcon, CircleUserIcon, MenuIcon, SearchIcon } from '@lucide/svelte';
	import { AppBar } from '@skeletonlabs/skeleton-svelte';
</script>

<AppBar>
	<AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
		<AppBar.Lead>
			<button type="button" class="btn-icon btn-icon-lg hover:preset-tonal"><MenuIcon /></button>
		</AppBar.Lead>
		<AppBar.Headline>
			<p class="text-2xl">Skeleton</p>
		</AppBar.Headline>
		<AppBar.Trail>
			<button type="button" class="btn-icon hover:preset-tonal"><SearchIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CalendarIcon class="size-6" /></button>
			<button type="button" class="btn-icon hover:preset-tonal"><CircleUserIcon class="size-6" /></button>
		</AppBar.Trail>
	</AppBar.Toolbar>
</AppBar>
```

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

### Use Native Progress Element

Source: https://www.skeleton.dev/docs/svelte/framework-components/progress-linear.md

Demonstrates styling the standard HTML progress element.

```html
<progress class="progress" value="50" max="100"></progress>
```