sheer-ui 0.0.0

package/src/lib/components/scroll-area/types.ts

@@ -0,0 +1,67 @@
+import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+import type { Direction, Orientation, WithChild, Without } from "../../internal/index.js";
+
+export type ScrollAreaType = "hover" | "scroll" | "auto" | "always";
+
+export type ScrollAreaRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The type of scroll area to render.
+	 *
+	 * @defaultValue "hover"
+	 */
+	type?: ScrollAreaType;
+
+	/**
+	 * The reading direction of the application.
+	 */
+	dir?: Direction;
+
+	/**
+	 * The amount of time in milliseconds to delay before hiding the scrollbars
+	 * after leaving the scroll area or stopping scrolling.
+	 *
+	 * @defaultValue 600
+	 */
+	scrollHideDelay?: number;
+}>;
+
+export type ScrollAreaRootProps = ScrollAreaRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ScrollAreaRootPropsWithoutHTML>;
+
+export type ScrollAreaViewportPropsWithoutHTML = Omit<WithChild, "child">;
+
+export type ScrollAreaViewportProps = ScrollAreaViewportPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ScrollAreaViewportPropsWithoutHTML>;
+
+export type ScrollAreaScrollbarPropsWithoutHTML = WithChild<{
+	orientation: Orientation;
+
+	/**
+	 * Whether to forcefully mount the component. Useful when working with
+	 * external animation/transition libraries.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type ScrollAreaScrollbarProps = ScrollAreaScrollbarPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ScrollAreaScrollbarPropsWithoutHTML>;
+
+export type ScrollAreaThumbPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether to forcefully mount the component. Useful when working with
+	 * external animation/transition libraries.
+	 */
+	forceMount?: boolean;
+}>;
+
+export type ScrollAreaThumbProps = ScrollAreaThumbPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ScrollAreaThumbPropsWithoutHTML>;
+
+export type ScrollAreaCornerPropsWithoutHTML = WithChild;
+
+export type ScrollAreaCornerProps = ScrollAreaCornerPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, ScrollAreaCornerPropsWithoutHTML>;
+
+export type _ScrollbarStubProps = Omit<ScrollAreaScrollbarProps, "orientation" | "ref" | "id"> & {
+	id: string;
+};

package/src/lib/components/select/index.ts

@@ -0,0 +1,5 @@
+import Root from './select.svelte';
+import Option from './select-option.svelte';
+import OptGroup from './select-opt-group.svelte';
+
+export { Root, Option, OptGroup, Root as Select, Option as SelectOption, OptGroup as SelectOptGroup };

package/src/lib/components/select/select-opt-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLOptgroupAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup bind:this={ref} data-slot="select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>

package/src/lib/components/select/select-option.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLOptionAttributes } from 'svelte/elements';
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option bind:this={ref} data-slot="select-option" class={join('select-option', className)} {...restProps}>
+	<span class="select-checkmark">
+		<CheckIcon class="size-4" />
+	</span>
+	{@render children?.()}
+</option>

package/src/lib/components/select/select.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { ClassValue, HTMLSelectAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+
+	type SelectChangeEvent = Event & {
+		currentTarget: EventTarget & HTMLSelectElement;
+	};
+
+	let {
+		ref = $bindable<HTMLSelectElement | null>(null),
+		value = $bindable(''),
+		class: className,
+		triggerClass,
+		widthClass = 'w-fit',
+		children,
+		placeholder,
+		icon,
+		side = 'bottom',
+		align = 'start',
+		maxHeight,
+		onchange,
+		...restProps
+	}: WithElementRef<HTMLSelectAttributes, HTMLSelectElement> & {
+		/** Text shown in the trigger when no option is selected. */
+		placeholder?: string;
+		/** Classes applied to the inner trigger `<button>` (layout/alignment). */
+		triggerClass?: ClassValue;
+		/** Classes applied to the root select width. Defaults to `w-fit`. */
+		widthClass?: ClassValue;
+		/** Leading content rendered inside the trigger, before the selected value. */
+		icon?: Snippet;
+		/** Side the dropdown opens toward. */
+		side?: 'top' | 'bottom';
+		/** Horizontal alignment of the dropdown relative to the trigger. */
+		align?: 'start' | 'center' | 'end';
+		/** Caps the dropdown height (any CSS length, e.g. `'12.5rem'`); enables scrolling. */
+		maxHeight?: string;
+	} = $props();
+
+	let selectedLabel = $state('');
+
+	function syncSelectedLabel(select: HTMLSelectElement) {
+		const option = select.selectedOptions[0];
+
+		if (!option || option.disabled) {
+			selectedLabel = '';
+			return;
+		}
+
+		selectedLabel = (option.label || option.textContent || option.value).trim();
+	}
+
+	function handleChange(event: SelectChangeEvent) {
+		const select = event.currentTarget;
+
+		syncSelectedLabel(select);
+
+		onchange?.(event);
+	}
+
+	$effect(() => {
+		const select = ref;
+		value;
+
+		if (!select) return;
+
+		queueMicrotask(() => syncSelectedLabel(select));
+	});
+</script>
+
+<select
+	bind:this={ref}
+	bind:value
+	data-slot="select"
+	data-side={side}
+	data-align={align}
+	style={maxHeight ? `--select-content-max-height: ${maxHeight}` : undefined}
+	class={join(
+		'select',
+		'flex items-center justify-between gap-2',
+		widthClass,
+		'h-9 rounded-md border bg-transparent',
+		'text-sm whitespace-nowrap shadow-xs',
+		'outline-none select-none',
+		'transition-[color,box-shadow]',
+		'dark:bg-border/30 dark:hover:bg-input/50',
+		'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
+		'disabled:cursor-not-allowed disabled:opacity-50',
+		className,
+	)}
+	onchange={handleChange}
+	{...restProps}>
+	<button type="button" class={join('flex min-w-0 w-full items-center justify-between gap-2 px-3 py-2', triggerClass)}>
+		<span class="flex min-w-0 items-center gap-2">
+			{@render icon?.()}
+
+			{#if selectedLabel}
+				<span class="min-w-0 truncate">{selectedLabel}</span>
+			{:else if placeholder}
+				<span class="select-placeholder min-w-0 truncate text-muted-foreground">{placeholder}</span>
+			{/if}
+		</span>
+
+		<ChevronDown class="size-4 shrink-0 text-muted-foreground opacity-50 pointer-events-none" />
+	</button>
+
+	{#if placeholder}
+		<!-- Baseline placeholder: engines without base-select ignore the trigger <button> above, so the
+		     placeholder must exist as a real (hidden, disabled) option to show in the native widget.
+		     Kept after the button — base-select only treats the FIRST child button as the trigger. -->
+		<option value="" disabled hidden>{placeholder}</option>
+	{/if}
+	{@render children?.()}
+</select>
+
+<style>
+	/* Opt-in */
+	:global(.select),
+	:global(.select::picker(select)) {
+		appearance: base-select;
+	}
+
+	/* Hide the default picker icon */
+	:global(.select::picker-icon) {
+		display: none;
+	}
+
+	/* Without customizable-select support (Firefox, Safari < 27) the classic native widget renders: the
+	   trigger <button> is ignored entirely, so the select itself needs the trigger's inset. The arrow
+	   and the popup stay the OS-native ones. */
+	@supports not (appearance: base-select) {
+		:global(.select) {
+			padding-inline: 0.75rem 0.5rem;
+		}
+
+		/* The selected placeholder option shows in the closed widget; tint it like a placeholder. */
+		:global(.select:has(option:disabled:checked)) {
+			color: var(--muted-foreground);
+		}
+	}
+
+	/* Hide the native checkmark completely */
+	:global(.select option::checkmark) {
+		display: none;
+	}
+
+	/* Rotate chevron when open - ONLY the trigger button's own (direct child) svg,
+	   so a leading `icon` svg inside the span is left untouched. */
+	:global(.select:open > button > svg) {
+		transform: rotate(180deg);
+	}
+
+	:global(.select > button > svg) {
+		transition: transform 0.2s ease;
+	}
+
+	/* Picker positioning & styling */
+	:global(.select::picker(select)) {
+		inset: unset;
+		top: anchor(bottom);
+		left: anchor(left);
+		min-width: max(anchor-size(width), 8rem);
+		max-height: var(--select-content-max-height, none);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		margin-top: 0.25rem;
+		position-try-fallbacks: flip-block, flip-inline;
+
+		border: 1px solid var(--border);
+		border-radius: calc(var(--radius) - 2px);
+		background: var(--popover);
+		color: var(--popover-foreground);
+		padding: 0.25rem;
+		box-shadow:
+			0 4px 6px -1px rgb(0 0 0 / 0.1),
+			0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+		opacity: 0;
+		transform: translateY(-0.5rem);
+
+		transition:
+			opacity 0.15s ease,
+			transform 0.15s ease,
+			display 0.15s allow-discrete,
+			overlay 0.15s allow-discrete;
+	}
+
+	/* Open above the trigger */
+	:global(.select[data-side='top']::picker(select)) {
+		top: auto;
+		bottom: anchor(top);
+		margin-top: 0;
+		margin-bottom: 0.25rem;
+		transform: translateY(0.5rem);
+	}
+
+	/* Horizontal alignment */
+	:global(.select[data-align='end']::picker(select)) {
+		left: auto;
+		right: anchor(right);
+	}
+
+	:global(.select[data-align='center']::picker(select)) {
+		left: auto;
+		right: auto;
+		justify-self: anchor-center;
+	}
+
+	:global(.select:open::picker(select)) {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	@starting-style {
+		:global(.select:open::picker(select)) {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+
+		:global(.select[data-side='top']:open::picker(select)) {
+			transform: translateY(0.5rem);
+		}
+	}
+
+	/* Options base styles */
+	:global(.select option) {
+		position: relative;
+		display: flex;
+		width: 100%;
+		align-items: center;
+		gap: 0.5rem;
+		padding-block: 0.375rem;
+		padding-inline-start: 0.5rem;
+		padding-inline-end: 2rem;
+		border-radius: calc(var(--radius) - 4px);
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		cursor: default;
+		outline: none;
+		user-select: none;
+		background: transparent;
+		color: inherit;
+	}
+
+	/* Default: checked option is highlighted */
+	:global(.select option:checked) {
+		background: var(--accent);
+		color: var(--accent-foreground);
+	}
+
+	/* When hovering ANY option, remove highlight from checked (unless it's the one being hovered) */
+	:global(.select:has(option:hover) option:checked:not(:hover)) {
+		background: transparent;
+		color: inherit;
+	}
+
+	/* Hovered option is always highlighted */
+	:global(.select option:hover) {
+		background: var(--accent);
+		color: var(--accent-foreground);
+	}
+
+	/* Custom checkmark - hidden by default */
+	:global(.select-checkmark) {
+		position: absolute;
+		inset-inline-end: 0.5rem;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	/* Show checkmark only when option is checked */
+	:global(.select option:checked .select-checkmark) {
+		display: flex;
+	}
+</style>

package/src/lib/components/separator/components/separator.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { SeparatorRootState } from '../separator.svelte.js';
+	import type { SeparatorRootProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		child,
+		children,
+		decorative = false,
+		orientation = 'horizontal',
+		...restProps
+	}: SeparatorRootProps = $props();
+
+	const rootState = SeparatorRootState.create({
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		id: boxWith(() => id),
+		decorative: boxWith(() => decorative),
+		orientation: boxWith(() => orientation),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'separator',
+				class:
+					'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:h-full data-vertical:w-px',
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/separator/index.ts

@@ -0,0 +1,3 @@
+export { default as Root, default as Separator } from './components/separator.svelte';
+
+export type { SeparatorRootProps as RootProps } from './types.js';

package/src/lib/components/separator/separator.svelte.ts

@@ -0,0 +1,43 @@
+import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToStrTrueOrUndef } from '../../internal/attrs.js';
+import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { Orientation } from '../../internal/index.js';
+
+const separatorAttrs = createBitsAttrs({
+	component: 'separator',
+	parts: ['root'],
+});
+
+interface SeparatorRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			orientation: Orientation;
+			decorative: boolean;
+		}> {}
+
+export class SeparatorRootState {
+	static create(opts: SeparatorRootStateOpts) {
+		return new SeparatorRootState(opts);
+	}
+	readonly opts: SeparatorRootStateOpts;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: SeparatorRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: this.opts.decorative.current ? 'none' : 'separator',
+				'aria-orientation': this.opts.orientation.current,
+				'aria-hidden': boolToStrTrueOrUndef(this.opts.decorative.current),
+				'data-orientation': this.opts.orientation.current,
+				[separatorAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}

package/src/lib/components/separator/types.ts

@@ -0,0 +1,22 @@
+import type { WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../internal/index.js";
+import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+
+export type SeparatorRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The orientation of the separator.
+	 *
+	 * @defaultValue "horizontal"
+	 */
+	orientation?: Orientation;
+
+	/**
+	 * Whether the separator is decorative and should be hidden from assistive technologies.
+	 *
+	 * @defaultValue false
+	 */
+	decorative?: boolean;
+}>;
+
+export type SeparatorRootProps = SeparatorRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SeparatorRootPropsWithoutHTML>;

package/src/lib/components/sheet/components/sheet-close.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import DialogClose from '../../dialog/components/dialog-close.svelte';
+	import type { DialogCloseProps } from '../../dialog/types.js';
+
+	let { ref = $bindable(null), ...restProps }: DialogCloseProps = $props();
+</script>
+
+<DialogClose bind:ref data-slot="sheet-close" {...restProps} />

package/src/lib/components/sheet/components/sheet-content.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+	import { join } from 'overrule';
+	import { sheetVariants, type Side } from '../variants.js';
+	export { sheetVariants, type Side };
+</script>
+
+<script lang="ts">
+	import ModalSurface from '../../dialog/components/modal-surface.svelte';
+	import type { DialogContentProps, DialogPortalProps } from '../../dialog/types.js';
+	import type { WithoutChildrenOrChild } from '../../../internal/utils.js';
+	import SheetClose from './sheet-close.svelte';
+	import XIcon from '@lucide/svelte/icons/x';
+
+	/**
+	 * Side panel adapter over the shared native modal surface (modal-surface.svelte),
+	 * which owns the skeleton: parity props, content state, controller, scroll lock, and
+	 * the `<dialog>` render. This file owns only Sheet's visual policy.
+	 *
+	 * The slide + per-side positioning come from `sheetVariants({ side })`; `data-state`
+	 * (from DialogContentState.props) drives its `data-[state=closed]:translate-…-full` exit.
+	 */
+	let {
+		children,
+		ref = $bindable(null),
+		side = 'right',
+		class: className,
+		...restProps
+	}: DialogContentProps & {
+		side?: Side;
+		portalProps?: WithoutChildrenOrChild<DialogPortalProps>;
+	} = $props();
+</script>
+
+<ModalSurface bind:ref data-slot="sheet-content" data-side={side} class={join('sheet-dialog', sheetVariants({ side }), className)} {...restProps}>
+	{@render children?.()}
+	<SheetClose
+		class="ring-offset-background focus-visible:ring-ring absolute inset-e-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none">
+		<XIcon class="size-4" />
+		<span class="sr-only">Close</span>
+	</SheetClose>
+</ModalSurface>
+
+<style>
+	/* Neutralise the UA modal-dialog box defaults (`inset:0`, `margin:auto`, the `max-width/height`
+	   caps) so the side variant's `inset-… h-full w-3/4 sm:max-w-sm` utilities own positioning + size.
+	   Kept in @layer base on purpose: it beats the UA origin but still LOSES to the variant's Tailwind
+	   utilities. An UNLAYERED reset would clobber the variant's inset/size — and because the variant
+	   sets only 3 of the 4 insets, the UA's 4th (`left:0` for a right sheet) would otherwise leak
+	   through and left-anchor the panel at full width. */
+	@layer base {
+		:global(.sheet-dialog) {
+			inset: auto;
+			margin: 0;
+			max-width: none;
+			max-height: none;
+			padding: 0;
+		}
+	}
+
+	/* The slide is a keyframe animation, not an @starting-style / display / overlay transition:
+	   WebKit doesn't start those on top-layer changes (bug 275184; `overlay` is Chromium-only), so
+	   transitions snapped both directions on iOS. Keyframes start reliably whenever the element is
+	   newly rendered. Entry plays on [data-state=open]; exit plays REVERSED on [data-state=closed]
+	   while the dialog is still open — the controller defers close() until animations settle —
+	   with `forwards` holding the off-screen end state until the real close hides it. The
+	   closed-state display reset and the ::backdrop fade live in ui.css under
+	   `[data-modal-surface]`; the fade duration matches the 300ms slide via the custom property. */
+	/* Distinct in/out names on purpose: with a single name, the state flip only UPDATES the
+	   already-finished entry animation (animation-name unchanged → no restart per spec), so the
+	   exit would never play and the deferred close would fire instantly. */
+	@keyframes sheet-slide-in {
+		from {
+			translate: var(--sheet-from);
+		}
+	}
+	@keyframes sheet-slide-out {
+		to {
+			translate: var(--sheet-from);
+		}
+	}
+	:global(.sheet-dialog) {
+		--modal-backdrop-duration: 300ms;
+	}
+	:global(.sheet-dialog[open][data-state='open']) {
+		animation: sheet-slide-in 500ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	:global(.sheet-dialog[open][data-state='closed']) {
+		animation: sheet-slide-out 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+	}
+	:global(.sheet-dialog[data-side='top']) {
+		--sheet-from: 0 -100%;
+	}
+	:global(.sheet-dialog[data-side='bottom']) {
+		--sheet-from: 0 100%;
+	}
+	:global(.sheet-dialog[data-side='left']) {
+		--sheet-from: -100% 0;
+	}
+	:global(.sheet-dialog[data-side='right']) {
+		--sheet-from: 100% 0;
+	}
+	:global([dir='rtl'] .sheet-dialog[data-side='left']) {
+		--sheet-from: 100% 0;
+	}
+	:global([dir='rtl'] .sheet-dialog[data-side='right']) {
+		--sheet-from: -100% 0;
+	}
+</style>

package/src/lib/components/sheet/components/sheet-description.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import DialogDescription from '../../dialog/components/dialog-description.svelte';
+	import type { DialogDescriptionProps } from '../../dialog/types.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: DialogDescriptionProps = $props();
+</script>
+
+<DialogDescription bind:ref data-slot="sheet-description" class={join('text-muted-foreground text-sm', className)} {...restProps} />

package/src/lib/components/sheet/components/sheet-footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="sheet-footer" class={join('mt-auto flex flex-col gap-2 p-4', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sheet/components/sheet-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="sheet-header" class={join('flex flex-col gap-1.5 p-4', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/sheet/components/sheet-overlay.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import DialogOverlay from '../../dialog/components/dialog-overlay.svelte';
+	import type { DialogOverlayProps } from '../../dialog/types.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: DialogOverlayProps = $props();
+</script>
+
+<DialogOverlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={join('overlay-surface fixed inset-0 z-50 bg-black/50', className)}
+	{...restProps} />

package/src/lib/components/sheet/components/sheet-title.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import DialogTitle from '../../dialog/components/dialog-title.svelte';
+	import type { DialogTitleProps } from '../../dialog/types.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: DialogTitleProps = $props();
+</script>
+
+<DialogTitle bind:ref data-slot="sheet-title" class={join('text-foreground font-semibold', className)} {...restProps} />