@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/input/Input.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { control, type ControlSize } from '../../internal/control.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { getFieldContext } from '../field/context.js';
+
+	export type InputSize = ControlSize;
+
+	export type InputProps = Omit<HTMLInputAttributes, 'size'> & {
+		size?: InputSize;
+		/** Marks the input as invalid. Inherited from a surrounding Field with an `error`. */
+		invalid?: boolean;
+		sx?: Sx;
+		ref?: HTMLInputElement | null;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(),
+		size = 'md',
+		invalid,
+		disabled,
+		required,
+		id,
+		'aria-describedby': describedBy,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: InputProps = $props();
+
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid ?? field?.invalid ?? false);
+</script>
+
+<input
+	bind:this={ref}
+	bind:value
+	id={id ?? field?.id}
+	disabled={disabled ?? field?.disabled}
+	required={required ?? field?.required}
+	aria-invalid={isInvalid ? true : undefined}
+	aria-describedby={describedBy ?? field?.describedBy}
+	{...rest}
+	{...attrs([control.base, control[size], isInvalid && control.invalid, sx], className)}
+/>

package/dist/components/input/Input.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type ControlSize } from '../../internal/control.js';
+import { type Sx } from '../../internal/sx.js';
+export type InputSize = ControlSize;
+export type InputProps = Omit<HTMLInputAttributes, 'size'> & {
+    size?: InputSize;
+    /** Marks the input as invalid. Inherited from a surrounding Field with an `error`. */
+    invalid?: boolean;
+    sx?: Sx;
+    ref?: HTMLInputElement | null;
+};
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "ref">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/kbd/Kbd.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { shared } from '../../internal/shared.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, font, radius } from '../../tokens.stylex.js';
+
+	export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		sx?: Sx;
+		/** The key, such as `⌘` or `K`. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		base: {
+			display: 'inline-grid',
+			placeItems: 'center',
+			boxSizing: 'border-box',
+			minWidth: '1.25rem',
+			minHeight: '1.25rem',
+			paddingInline: '0.3125rem',
+			borderRadius: radius.xs,
+			backgroundColor: colors.surfaceRaised,
+			boxShadow: `inset 0 0 0 1px ${colors.line}, inset 0 1px 0 ${colors.highlight}`,
+			color: colors.textMuted,
+			fontFamily: font.mono,
+			fontSize: font.sizeXs,
+			fontWeight: font.weightMedium,
+			lineHeight: 1,
+			verticalAlign: 'middle'
+		}
+	});
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: KbdProps = $props();
+</script>
+
+<kbd {...rest} {...attrs([styles.base, shared.edged, sx], className)}>{@render children?.()}</kbd>

package/dist/components/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    sx?: Sx;
+    /** The key, such as `⌘` or `K`. */
+    children?: Snippet;
+};
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/link/Link.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors, motion } from '../../tokens.stylex.js';
+
+	export type LinkProps = Omit<HTMLAnchorAttributes, 'children'> & {
+		href: string;
+		/** `accent` stands out in running text. `inherit` takes the surrounding text colour. */
+		tone?: 'accent' | 'inherit';
+		/** Opens in a new tab, with `rel="noopener noreferrer"`. */
+		external?: boolean;
+		sx?: Sx;
+		ref?: HTMLAnchorElement | null;
+		children?: Snippet;
+	};
+
+	// StyleX needs this in the same file to evaluate it at build time
+	const HOVER = '@media (hover: hover) and (pointer: fine)';
+
+	const styles = stylex.create({
+		base: {
+			borderRadius: '0.1875rem',
+			fontWeight: 'inherit',
+			textDecorationLine: 'underline',
+			textDecorationThickness: 'from-font',
+			textUnderlineOffset: '0.2em',
+			textDecorationColor: {
+				default: 'color-mix(in oklch, currentColor 35%, transparent)',
+				':hover': { default: null, [HOVER]: 'currentColor' }
+			},
+			outlineWidth: '2px',
+			outlineStyle: { default: 'none', ':focus-visible': 'solid' },
+			outlineColor: colors.focusRing,
+			outlineOffset: '2px',
+			transitionProperty: 'text-decoration-color',
+			transitionDuration: motion.base,
+			transitionTimingFunction: 'ease'
+		},
+		accent: { color: colors.ithil },
+		inherit: { color: 'inherit' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		href,
+		tone = 'accent',
+		external = false,
+		sx,
+		class: className,
+		ref = $bindable(null),
+		children,
+		...rest
+	}: LinkProps = $props();
+</script>
+
+<a
+	bind:this={ref}
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+	{...rest}
+	{...attrs([styles.base, styles[tone], sx], className)}
+>
+	{@render children?.()}
+</a>

package/dist/components/link/Link.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type LinkProps = Omit<HTMLAnchorAttributes, 'children'> & {
+    href: string;
+    /** `accent` stands out in running text. `inherit` takes the surrounding text colour. */
+    tone?: 'accent' | 'inherit';
+    /** Opens in a new tab, with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    sx?: Sx;
+    ref?: HTMLAnchorElement | null;
+    children?: Snippet;
+};
+declare const Link: import("svelte").Component<LinkProps, {}, "ref">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/menu/ContextMenuContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import { ContextMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type ContextMenuContentProps = Omit<ContextMenu.ContentProps, 'children' | 'child'> & {
+		sx?: Sx;
+		/** Menu.Item, Menu.Group and the other parts of Menu. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		collisionPadding = 8,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: ContextMenuContentProps = $props();
+</script>
+
+<ContextMenu.Portal>
+	<ContextMenu.Content
+		{collisionPadding}
+		data-slot="context-menu-content"
+		{...rest}
+		{...attrs([layer.surface, sx], className)}
+	>
+		{@render children?.()}
+	</ContextMenu.Content>
+</ContextMenu.Portal>

package/dist/components/menu/ContextMenuContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import { ContextMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type ContextMenuContentProps = Omit<ContextMenu.ContentProps, 'children' | 'child'> & {
+    sx?: Sx;
+    /** Menu.Item, Menu.Group and the other parts of Menu. */
+    children?: Snippet;
+};
+declare const ContextMenuContent: import("svelte").Component<ContextMenuContentProps, {}, "">;
+type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
+export default ContextMenuContent;

package/dist/components/menu/ContextMenuTrigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { ContextMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type ContextMenuTriggerProps = Omit<ContextMenu.TriggerProps, 'children'> & {
+		sx?: Sx;
+		/** The region a right-click opens the menu over. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, onkeydown, ...rest }: ContextMenuTriggerProps = $props();
+
+	// bits-ui opens a context menu only on the `contextmenu` event. Shift+F10 and
+	// the Menu key send one on Windows and Linux, but a Mac has neither, so the
+	// event is sent here, at the focused element, from the keyboard.
+	function openFromKeyboard(event: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+		onkeydown?.(event);
+		if (event.defaultPrevented) return;
+		if (!(event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey))) return;
+		event.preventDefault();
+		const target = (document.activeElement as HTMLElement | null) ?? event.currentTarget;
+		const box = target.getBoundingClientRect();
+		target.dispatchEvent(
+			new MouseEvent('contextmenu', {
+				bubbles: true,
+				cancelable: true,
+				clientX: box.left + Math.min(16, box.width / 2),
+				clientY: box.top + box.height / 2
+			})
+		);
+	}
+</script>
+
+<ContextMenu.Trigger
+	data-slot="context-menu-trigger"
+	{...rest}
+	{...attrs([sx], className)}
+	onkeydown={openFromKeyboard}
+>
+	{@render children?.()}
+</ContextMenu.Trigger>

package/dist/components/menu/ContextMenuTrigger.svelte.d.ts

@@ -0,0 +1,11 @@
+import { ContextMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type ContextMenuTriggerProps = Omit<ContextMenu.TriggerProps, 'children'> & {
+    sx?: Sx;
+    /** The region a right-click opens the menu over. */
+    children?: Snippet;
+};
+declare const ContextMenuTrigger: import("svelte").Component<ContextMenuTriggerProps, {}, "">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

package/dist/components/menu/MenuCheckboxItem.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuCheckboxItemProps = Omit<DropdownMenu.CheckboxItemProps, 'children' | 'child'> & {
+		shortcut?: string;
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		checked = $bindable(false),
+		shortcut,
+		closeOnSelect = false,
+		sx,
+		class: className,
+		children: label,
+		...rest
+	}: MenuCheckboxItemProps = $props();
+</script>
+
+<!-- Stays open by default, so several can be set in one visit -->
+<DropdownMenu.CheckboxItem
+	bind:checked
+	{closeOnSelect}
+	data-slot="menu-checkbox-item"
+	{...rest}
+	{...attrs([layer.item, sx], className)}
+>
+	{#snippet children({ checked })}
+		<span {...stylex.attrs(layer.icon)}>
+			{#if checked}<Glyph name="check" stroke={1.75} />{/if}
+		</span>
+		<span {...stylex.attrs(layer.label)}>{@render label?.()}</span>
+		{#if shortcut}<span {...stylex.attrs(layer.trailing)}>{shortcut}</span>{/if}
+	{/snippet}
+</DropdownMenu.CheckboxItem>

package/dist/components/menu/MenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,11 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuCheckboxItemProps = Omit<DropdownMenu.CheckboxItemProps, 'children' | 'child'> & {
+    shortcut?: string;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

package/dist/components/menu/MenuContent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuContentProps = Omit<DropdownMenu.ContentProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		sideOffset = 6,
+		collisionPadding = 8,
+		align = 'start',
+		sx,
+		class: className,
+		children,
+		...rest
+	}: MenuContentProps = $props();
+</script>
+
+<DropdownMenu.Portal>
+	<DropdownMenu.Content
+		{sideOffset}
+		{collisionPadding}
+		{align}
+		data-slot="menu-content"
+		{...rest}
+		{...attrs([layer.surface, sx], className)}
+	>
+		{@render children?.()}
+	</DropdownMenu.Content>
+</DropdownMenu.Portal>

package/dist/components/menu/MenuContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuContentProps = Omit<DropdownMenu.ContentProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuContent: import("svelte").Component<MenuContentProps, {}, "">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/menu/MenuItem.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuItemProps = Omit<DropdownMenu.ItemProps, 'children' | 'child'> & {
+		/** `danger` for an action that destroys or cannot be undone. */
+		tone?: 'default' | 'danger';
+		/** The keys that do the same, shown at the end, such as "⌘D". */
+		shortcut?: string;
+		/** A 16px icon before the label. */
+		icon?: Snippet;
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		tone = 'default',
+		shortcut,
+		icon,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: MenuItemProps = $props();
+</script>
+
+<!-- Works in a Menu and in a ContextMenu alike: bits-ui shares its items -->
+<DropdownMenu.Item
+	data-slot="menu-item"
+	{...rest}
+	{...attrs([layer.item, tone === 'danger' && layer.danger, sx], className)}
+>
+	{#if icon}<span {...stylex.attrs(layer.icon)}>{@render icon()}</span>{/if}
+	<span {...stylex.attrs(layer.label)}>{@render children?.()}</span>
+	{#if shortcut}<span {...stylex.attrs(layer.trailing)}>{shortcut}</span>{/if}
+</DropdownMenu.Item>

package/dist/components/menu/MenuItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuItemProps = Omit<DropdownMenu.ItemProps, 'children' | 'child'> & {
+    /** `danger` for an action that destroys or cannot be undone. */
+    tone?: 'default' | 'danger';
+    /** The keys that do the same, shown at the end, such as "⌘D". */
+    shortcut?: string;
+    /** A 16px icon before the label. */
+    icon?: Snippet;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/menu/MenuLabel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuLabelProps = Omit<DropdownMenu.GroupHeadingProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: MenuLabelProps = $props();
+</script>
+
+<!-- Names the Menu.Group it is placed in -->
+<DropdownMenu.GroupHeading
+	data-slot="menu-label"
+	{...rest}
+	{...attrs([layer.heading, sx], className)}
+>
+	{@render children?.()}
+</DropdownMenu.GroupHeading>

package/dist/components/menu/MenuLabel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuLabelProps = Omit<DropdownMenu.GroupHeadingProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuLabel: import("svelte").Component<MenuLabelProps, {}, "">;
+type MenuLabel = ReturnType<typeof MenuLabel>;
+export default MenuLabel;

package/dist/components/menu/MenuRadioItem.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { colors } from '../../tokens.stylex.js';
+
+	export type MenuRadioItemProps = Omit<DropdownMenu.RadioItemProps, 'children' | 'child'> & {
+		/** A line under the label, such as what the choice means. */
+		description?: string;
+		sx?: Sx;
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		dot: {
+			width: '0.375rem',
+			height: '0.375rem',
+			borderRadius: '9999px',
+			backgroundColor: colors.ithil
+		},
+		text: { display: 'flex', flexDirection: 'column', gap: '0.125rem', minWidth: 0, flexGrow: 1 },
+		description: { color: colors.textMuted, fontSize: '0.75rem' }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		closeOnSelect = false,
+		description,
+		sx,
+		class: className,
+		children: label,
+		...rest
+	}: MenuRadioItemProps = $props();
+</script>
+
+<DropdownMenu.RadioItem
+	{closeOnSelect}
+	data-slot="menu-radio-item"
+	{...rest}
+	{...attrs([layer.item, sx], className)}
+>
+	{#snippet children({ checked })}
+		<span {...stylex.attrs(layer.icon)}>
+			{#if checked}<span {...stylex.attrs(styles.dot)}></span>{/if}
+		</span>
+		<span {...stylex.attrs(styles.text)}>
+			<span {...stylex.attrs(layer.label)}>{@render label?.()}</span>
+			{#if description}<span {...stylex.attrs(styles.description)}>{description}</span>{/if}
+		</span>
+	{/snippet}
+</DropdownMenu.RadioItem>

package/dist/components/menu/MenuRadioItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuRadioItemProps = Omit<DropdownMenu.RadioItemProps, 'children' | 'child'> & {
+    /** A line under the label, such as what the choice means. */
+    description?: string;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/components/menu/MenuSeparator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuSeparatorProps = Omit<DropdownMenu.SeparatorProps, 'children' | 'child'> & {
+		sx?: Sx;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, ...rest }: MenuSeparatorProps = $props();
+</script>
+
+<DropdownMenu.Separator
+	data-slot="menu-separator"
+	{...rest}
+	{...attrs([layer.separator, sx], className)}
+/>

package/dist/components/menu/MenuSeparator.svelte.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu } from 'bits-ui';
+import { type Sx } from '../../internal/sx.js';
+export type MenuSeparatorProps = Omit<DropdownMenu.SeparatorProps, 'children' | 'child'> & {
+    sx?: Sx;
+};
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/components/menu/MenuSubContent.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import { DropdownMenu } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+
+	export type MenuSubContentProps = Omit<DropdownMenu.SubContentProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		sideOffset = 2,
+		collisionPadding = 8,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: MenuSubContentProps = $props();
+</script>
+
+<DropdownMenu.Portal>
+	<DropdownMenu.SubContent
+		{sideOffset}
+		{collisionPadding}
+		data-slot="menu-sub-content"
+		{...rest}
+		{...attrs([layer.surface, sx], className)}
+	>
+		{@render children?.()}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Portal>

package/dist/components/menu/MenuSubContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import { DropdownMenu } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type MenuSubContentProps = Omit<DropdownMenu.SubContentProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const MenuSubContent: import("svelte").Component<MenuSubContentProps, {}, "">;
+type MenuSubContent = ReturnType<typeof MenuSubContent>;
+export default MenuSubContent;