### Install Diaper Svelte Bottom Sheet Component

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet demonstrates how to install the Diaper library using npm. It's a prerequisite for using any of the Diaper components in your Svelte 5 project.

```Shell
npm install @devantic/diaper
```

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

### Import Bottomsheet Component in Svelte

Source: https://github.com/devantic/diaper/blob/main/README.md

These snippets show how to import the main Bottomsheet component from the Diaper library. You can choose between a default import or a named import depending on your preference and project setup.

```TypeScript
import Bottomsheet from '@devantic/diaper'
```

```TypeScript
import { Bottomsheet } from '@devantic/diaper'
```

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

### Detect iOS Safari and Load PWA Compat Library

Source: https://github.com/devantic/diaper/blob/main/src/app.html

This JavaScript snippet detects if the current browser is iOS Safari and if the application is not running in standalone PWA mode. If both conditions are met, it dynamically imports the `pwacompat` library from unpkg.com to improve PWA behavior and features on iOS devices.

```JavaScript
// detect iOS Safari
if ('standalone' in navigator && !navigator.standalone) {
  import('https://unpkg.com/pwacompat')
}
```

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

### BottomsheetProps API Reference

Source: https://github.com/devantic/diaper/blob/main/README.md

Detailed API reference for `BottomsheetProps`, explaining each property's purpose, type, and behavior for customizing the Bottomsheet component.

```APIDOC
{
  "BottomsheetProps": {
    "open": {
      "type": "boolean",
      "optional": true,
      "bindable": true,
      "description": "A boolean value controlling the open/closed state of the bottom sheet. Can be controlled via `bind:open` or programmatically using `showModal()`, `show()`, and `close()` methods."
    },
    "height": {
      "type": "string",
      "optional": true,
      "description": "A string specifying the height of the dialog. Defaults to maxHeight (93% of view height). Accepts any valid CSS unit (e.g., '75%', '75vh', '400px'). A value of 'auto' auto-sizes the sheet to fit content."
    },
    "maxHeight": {
      "type": "string",
      "optional": true,
      "description": "Overrides the maxHeight of the sheet, defaulting to 93% of the view height. Accepts any valid CSS unit. Not recommended to change unless a full-screen sheet is desired."
    },
    "snapPoints": {
      "type": "number[] | 'auto'",
      "optional": true,
      "description": "An array of numbers between 0 and 1 or the string 'auto'. Values are relative to the sheet's height (e.g., 0.25 is 1/4 from the top). 'auto' calculates snap points dynamically, especially with dynamic sheet content."
    },
    "initialIndex": {
      "type": "number",
      "optional": true,
      "description": "An integer specifying the snap point at which the sheet will open. Indexing starts at 1. If omitted, the sheet opens full height. Values outside the range may result in full height or no opening."
    },
    "canDragSheet": {
      "type": "boolean",
      "optional": true,
      "description": "A boolean specifying if the sheet can be dragged on the content. Defaults to true. The header is always draggable."
    },
    "headerOverlaysContent": {
      "type": "boolean",
      "optional": true,
      "description": "If true, for scrollable sheets, content scrolls behind the header, making the scrollable region full height. A background blur is applied to the header. Defaults to false."
    },
    "stickyHeader": {
      "type": "boolean",
      "optional": true,
      "description": "If true, the header will stick to the bottom of the page. Defaults to false."
    },
    "openSticky": {
      "type": "boolean",
      "optional": true,
      "description": "When true and `stickyHeader` is true, the sheet opens with the header in the sticky position. Defaults to false."
    },
    "toggleOnHeaderTap": {
      "type": "boolean",
      "optional": true,
      "description": "Enables tap on header to minimize/maximize the sheet when `stickyHeader` is true. If `stickyHeader` is false, a header tap closes the sheet. Maximized state is full height or initial snapPoint. Defaults to false."
    },
    "closeOnBackdropTap": {
      "type": "boolean",
      "optional": true,
      "description": "Boolean. Defaults to true."
    },
    "flat": {
      "type": "boolean",
      "optional": true,
      "description": "Boolean. Prevents scaling of the background. Defaults to false."
    },
    "nonmodal": {
      "type": "boolean | number",
      "optional": true,
      "description": "For non-full-height sheets, allows background interaction. If a snappoint index (e.g., `nonmodal={1}`) is specified, the sheet becomes nonmodal at that snappoint. Can be used to create a \"detent\" that sticks to the bottom of the screen. Defaults to false (modal)."
    },
    "onclose": {
      "type": "() => void",
      "optional": true,
      "description": "A function to run when the sheet has completely closed, after the close transition."
    },
    "onsnap": {
      "type": "(progress: number) => void",
      "optional": true,
      "description": "A function to run when the snappoint changes. Runs before the transition to the new snappoint, passing the snappoint value (e.g., 0.25) as a parameter."
    },
    "class": {
      "type": "string",
      "optional": true,
      "description": "CSS class to apply to the component."
    },
    "style": {
      "type": "string",
      "optional": true,
      "description": "Inline CSS style to apply to the component."
    }
  }
}
```

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

### Svelte Bottomsheet: Programmatic Control API Reference

Source: https://github.com/devantic/diaper/blob/main/README.md

This section details the instance methods available for programmatic control of the Svelte Bottomsheet component. Use the `bind:this` directive to access these methods, enabling actions like showing, closing, or snapping the sheet to a specific position.

```APIDOC
Methods:
- showModal(): Displays the bottom sheet as a modal.
- show(): Displays the bottom sheet.
- close(): Hides the bottom sheet.
- snapTo(index: number): Snaps the bottom sheet to a predefined snap point at the given index.
```

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

### Snippet Content Props API Reference

Source: https://github.com/devantic/diaper/blob/main/README.md

API reference for content-related properties (`children`, `header`, `snapPoint1Content`, `snapPoint2Content`) used within the Bottomsheet component, defining how various content sections are rendered.

```APIDOC
{
  "SnippetContentProps": {
    "children": {
      "type": "Snippet",
      "required": true,
      "description": "The main content for the bottom sheet. Required unless a blank sheet is desired."
    },
    "header": {
      "type": "Snippet",
      "optional": true,
      "description": "The header content for the bottom sheet."
    },
    "snapPoint1Content": {
      "type": "Snippet",
      "optional": true,
      "description": "If specified, the content of the sheet will change to this content when dragged to the first snappoint."
    },
    "snapPoint2Content": {
      "type": "Snippet",
      "optional": true,
      "description": "If specified, the content of the sheet will change to this content when dragged to the second snappoint."
    }
  }
}
```

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

### LongsheetProps API Reference

Source: https://github.com/devantic/diaper/blob/main/README.md

Detailed API reference for `LongsheetProps`, explaining each property's purpose, type, and behavior for customizing the Longsheet component.

```APIDOC
{
  "LongsheetProps": {
    "open": {
      "type": "boolean",
      "optional": true,
      "description": "A boolean value controlling the open/closed state of the long sheet."
    },
    "children": {
      "type": "Snippet",
      "optional": true,
      "description": "The main content for the long sheet."
    },
    "class": {
      "type": "string",
      "optional": true,
      "description": "CSS class to apply to the component."
    },
    "style": {
      "type": "string",
      "optional": true,
      "description": "Inline CSS style to apply to the component."
    }
  }
}
```

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

### Import Fullsheet Component in Svelte

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet shows how to import the Fullsheet component, another convenience wrapper for Bottomsheet. It's designed for sheets that cover the entire screen, simplifying full-screen overlay implementations.

```TypeScript
import { Fullsheet } from '@devantic/diaper'
```

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

### Svelte Bottomsheet: Apply Scoped Svelte CSS

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet illustrates how to style the Svelte Bottomsheet component using Svelte's scoped CSS, leveraging the `:global()` modifier. This approach ensures styles are encapsulated within the component's scope while targeting the sheet's class.

```svelte
<div class="container">
	<Bottomsheet bind:open class="sheet">...</Bottomsheet>
</div>

<style>
	.container :global(.sheet) {
		padding: 1rem;
		padding-top: 0;
		background-color: red;
	}
</style>
```

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

### Svelte Bottomsheet: Apply External CSS Stylesheet

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet demonstrates how to style the Svelte Bottomsheet component by importing an external CSS stylesheet. This method promotes better organization and reusability of styles across your Svelte application.

```svelte
<script>
	import './sheet.css'
</script>

<div class="container">
	<Bottomsheet bind:open class="sheet">...</Bottomsheet>
</div>
```

```css
.sheet {
	padding: 1rem;
	padding-top: 0;
	background-color: red;
}
```

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

### TypeScript Type Definitions for Bottomsheet and Longsheet Props

Source: https://github.com/devantic/diaper/blob/main/README.md

Defines the interfaces for `BottomsheetProps` and `LongsheetProps`, specifying the available properties and their types for configuring the respective components.

```TypeScript
export type BottomsheetProps = {
	open?: boolean
	height?: string
	maxHeight?: string
	snapPoints?: number[] | 'auto'
	initialIndex?: number
	canDragSheet?: boolean
	headerOverlaysContent?: boolean
	stickyHeader?: boolean
	openSticky?: boolean
	toggleOnHeaderTap?: boolean
	closeOnBackdropTap?: boolean
	flat?: boolean
	nonmodal?: boolean | number
	onclose?: () => void
	onsnap?: (progress: number) => void
	header?: Snippet
	children?: Snippet
	snapPoint1Content?: Snippet
	snapPoint2Content?: Snippet
	class?: string
	style?: string
}

export type LongsheetProps = {
	open?: boolean
	children?: Snippet
	class?: string
	style?: string
}
```

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

### Svelte Bottomsheet: Apply Inline CSS Styling

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet shows how to apply inline CSS styles to the Svelte Bottomsheet component using the `style` prop. This method allows for direct style declarations on the component instance.

```svelte
<Bottomsheet bind:open style="padding: 1rem; padding-top: 0; background-color: red;">...</Bottomsheet>
```

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

### Import Longsheet Component in Svelte

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet demonstrates how to import the Longsheet component, specifically designed for content that requires scrolling the entire sheet within the viewport. It simplifies handling long content in a bottom sheet.

```TypeScript
import { Longsheet } from '@devantic/diaper'
```

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

### Import Detachedsheet Component in Svelte

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet demonstrates how to import the Detachedsheet component, a convenience wrapper around Bottomsheet with specific styling. Use it for sheets with small margins and more rounded corners.

```TypeScript
import { Detachedsheet } from '@devantic/diaper'
```

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

### Svelte Bottomsheet: Apply Tailwind CSS Styling

Source: https://github.com/devantic/diaper/blob/main/README.md

This snippet demonstrates how to apply Tailwind CSS classes directly to the Svelte Bottomsheet component. It's crucial to use the `!` important modifier to ensure styles override the component's default styling.

```svelte
<Bottomsheet bind:open class="p-4! pt-0! bg-red-500!">...</Bottomsheet>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.