# Sheet Modal panel that slides in from the left or right edge, with focus trap, inert background, nested-overlay coordination, and a footer on the outer frame. - Package: `@mielui/svelte` - Component version: `1.1.1` - Depends on Mielui components: _internal/utils, button, _internal/overlay, typography - Shared utilities: components/_internal/button-attributes, components/_internal/overlay-close, components/_internal/surface, hugeicons-icon, utils.cn, utils.createContext, transition ## Install ~~~~sh pnpm dlx @mielui/svelte add sheet ~~~~ ## API This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported. ### Close | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | disabled | boolean \| undefined | - | No | No | Prevents activation. A disabled link loses its destination and is skipped by Tab. | | variant | ButtonVariant \| undefined | - | No | No | Visual style. Choose it for what the action means, not for decoration. | | size | "sm" \| "md" \| "lg" \| "icon" \| undefined | - | No | No | Control height. `icon` is a square button for a single icon. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | | element | HTMLButtonElement \| HTMLAnchorElement \| undefined | - | No | Yes | Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site: | | unstyled | boolean \| undefined | - | No | No | Skip the variant/size base classes and render with `class` alone. | | status | ButtonStatus \| undefined | - | No | No | Controlled visual state. Loading remains focusable and refuses activation. | | loading | boolean \| undefined | - | No | No | Convenience alias for `status="loading"`. | | labels | ButtonLabels \| undefined | - | No | No | Overrides the built-in text and accessible names. Every key is optional and English is the fallback. | | onclick | ((event: MouseEvent) => void) \| undefined | - | No | No | Called when the button is activated. Loading and disabled buttons do not call it. | | onkeydown | ((event: KeyboardEvent) => void) \| undefined | - | No | No | Called on key down, before the button handles the key itself. | | href | string \| undefined | - | No | No | Renders a link to this address instead of a button. | Also accepts the native HTML attributes and events listed in the rendered API reference. ### Content | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | surface | "solid" \| "glass" \| undefined | - | No | No | Surface treatment. Omit it to inherit `--mielui-surface` from the theme. | | allowClickOutside | boolean \| undefined | true | No | No | Closes when the pointer is pressed outside it. Set false to keep it open until it is dismissed another way. | | side | "left" \| "right" \| undefined | 'right' | No | No | Viewport edge the sheet slides in from. | | class | string \| undefined | - | No | No | Classes added to the element. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | ### Description | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | class | string \| undefined | - | No | No | Classes added to the element. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | ### Footer | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | class | string \| undefined | - | No | No | Classes added to the element. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | ### Header | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | class | string \| undefined | - | No | No | Classes added to the element. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | | showClose | boolean \| undefined | true | No | No | Shows the close button in the corner. Defaults to true. | ### Root | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | labels | SheetLabels \| undefined | - | No | No | Overrides the built-in text and accessible names. Every key is optional and English is the fallback. | | open | boolean \| undefined | false | No | Yes | Whether it is open. Bind it to control the state from outside. | | onOpenChange | ((open: boolean) => void) \| undefined | - | No | No | Called with the new state whenever it opens or closes. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | ### Title | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | class | string \| undefined | - | No | No | Classes added to the element. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | ### Trigger | Prop | Type | Default | Required | Bindable | Description | | --- | --- | --- | --- | --- | --- | | disabled | boolean \| undefined | - | No | No | Prevents activation. A disabled link loses its destination and is skipped by Tab. | | variant | ButtonVariant \| undefined | - | No | No | Visual style. Choose it for what the action means, not for decoration. | | size | "sm" \| "md" \| "lg" \| "icon" \| undefined | - | No | No | Control height. `icon` is a square button for a single icon. | | children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. | | element | HTMLButtonElement \| HTMLAnchorElement \| undefined | - | No | Yes | Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site: | | unstyled | boolean \| undefined | - | No | No | Skip the variant/size base classes and render with `class` alone. | | status | ButtonStatus \| undefined | - | No | No | Controlled visual state. Loading remains focusable and refuses activation. | | loading | boolean \| undefined | - | No | No | Convenience alias for `status="loading"`. | | labels | ButtonLabels \| undefined | - | No | No | Overrides the built-in text and accessible names. Every key is optional and English is the fallback. | | onclick | ((event: MouseEvent) => void) \| undefined | - | No | No | Called when the button is activated. Loading and disabled buttons do not call it. | | onkeydown | ((event: KeyboardEvent) => void) \| undefined | - | No | No | Called on key down, before the button handles the key itself. | | href | string \| undefined | - | No | No | Renders a link to this address instead of a button. | Also accepts the native HTML attributes and events listed in the rendered API reference. ### Public types ~~~~ts import type { DefaultProps } from '@mielui/svelte/utils'; import type { Snippet } from 'svelte'; import type { ButtonProps } from '../button'; import Root from './sheet.svelte'; import Close from './sheet-close.svelte'; import Content from './sheet-content.svelte'; import Description from './sheet-description.svelte'; import Footer from './sheet-footer.svelte'; import Header from './sheet-header.svelte'; import Title from './sheet-title.svelte'; import Trigger from './sheet-trigger.svelte'; export type SheetLabels = { /** Accessible name of the close button in the header. */ close?: string; }; export type SheetProps = { /** * Overrides the built-in text and accessible names. Every key is optional and English is the * fallback. */ labels?: SheetLabels; /** Whether it is open. Bind it to control the state from outside. */ open?: boolean; /** Called with the new state whenever it opens or closes. */ onOpenChange?: (open: boolean) => void; /** Content rendered inside. */ children?: Snippet; }; export type SheetTriggerProps = ButtonProps; export type SheetTitleProps = DefaultProps; export type SheetHeaderProps = DefaultProps & { /** Shows the close button in the corner. Defaults to true. */ showClose?: boolean; }; export type SheetFooterProps = DefaultProps; export type SheetDescriptionProps = DefaultProps; export type SheetContentProps = { /** Surface treatment. Omit it to inherit `--mielui-surface` from the theme. */ surface?: 'solid' | 'glass'; /** * Closes when the pointer is pressed outside it. Set false to keep it open until it is * dismissed another way. */ allowClickOutside?: boolean; /** Viewport edge the sheet slides in from. */ side?: 'left' | 'right'; } & DefaultProps; export type SheetCloseProps = ButtonProps; export type SheetState = { open: boolean; triggerRef?: HTMLElement | null; }; export { Close, Content, Description, Footer, Header, Root, Title, Trigger }; ~~~~ ## Examples ### Glass ~~~~svelte Display settings Display The page stays visible through the panel.
Done ~~~~ ### Issue Form ~~~~svelte
New issue
New issue
Create a new issue in Engineering.