@sveltier/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" generics="T extends string | number">
+	// Sections that open and close, on the platform's <details>. See AccordionProps.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './accordion.css';
+	import type { AccordionDefaults, AccordionItem, AccordionProps } from './types.js';
+
+	let {
+		density,
+		items,
+		panel,
+		multiple = false,
+		value = $bindable(),
+		onchange,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: AccordionProps<T> = $props();
+
+	const resolve = useDefaults<AccordionDefaults>('Accordion', { density: 'default' });
+	const p = $derived(resolve({ density }));
+
+	// The sections of one accordion share a name, so the browser keeps at most one open.
+	const name = $props.id();
+
+	const CHEVRON = 'M5.6 8.6 12 15l6.4-6.4L20 10.2l-8 8-8-8z';
+
+	const list = $derived(Array.isArray(value) ? value : []);
+	const isOpen = (item: AccordionItem<T>) =>
+		multiple ? list.includes(item.value) : value === item.value;
+
+	function change(next: T | null | T[]) {
+		value = next;
+		(onchange as ((value: T | null | T[]) => void) | undefined)?.(next);
+	}
+
+	// The browser has opened or closed a section: its header, finding text in it, or `open` set
+	// from `value`, in which case the state already agrees.
+	function toggle(item: AccordionItem<T>, details: HTMLDetailsElement) {
+		if (details.open === isOpen(item)) return;
+		if (multiple) {
+			change(details.open ? [...list, item.value] : list.filter((other) => other !== item.value));
+		} else if (details.open) {
+			change(item.value);
+		} else if (!ref?.querySelector(':scope > details[open]')) {
+			// Closed because another opened: that one's own event sets the value.
+			change(null);
+		}
+	}
+</script>
+
+<div bind:this={ref} {...rest} class={['sv-accordion', sharedClasses(p, 'Accordion'), className]}>
+	{#each items as item (item.value)}
+		<details
+			class="sv-accordion__item"
+			name={multiple ? undefined : name}
+			open={isOpen(item)}
+			ontoggle={(event) => toggle(item, event.currentTarget)}
+		>
+			<!-- A disabled header takes focus and is announced, but does not toggle. -->
+			<summary
+				class="sv-accordion__header"
+				aria-disabled={item.disabled || undefined}
+				onclick={(event) => item.disabled && event.preventDefault()}
+			>
+				<span class="sv-accordion__title">{item.title}</span>
+				<svg class="sv-accordion__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+					<path d={CHEVRON} />
+				</svg>
+			</summary>
+			<div class="sv-accordion__panel">{@render panel(item)}</div>
+		</details>
+	{/each}
+</div>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AccordionProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: AccordionProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Accordion: $$IsomorphicComponent;
+type Accordion<T extends string | number> = InstanceType<typeof Accordion<T>>;
+export default Accordion;

package/dist/components/Accordion/accordion.css

@@ -0,0 +1,88 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Sections divided by hairlines, the headers as wide as the accordion. */
+	.sv-accordion {
+		border-block-start: var(--sv-hairline) solid var(--sv-color-border);
+	}
+
+	.sv-accordion__item {
+		border-block-end: var(--sv-hairline) solid var(--sv-color-border);
+	}
+
+	.sv-accordion__header {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+		min-block-size: calc(var(--sv-control-lg) * var(--sv-density));
+		padding-block: calc(var(--sv-space-8) * var(--sv-density));
+		padding-inline: var(--sv-space-8);
+		border-radius: var(--sv-radius-sm);
+		box-sizing: border-box;
+		font-weight: var(--sv-weight-medium);
+		line-height: var(--sv-leading-snug);
+		list-style: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.sv-accordion__header::-webkit-details-marker {
+		display: none;
+	}
+
+	@media (hover: hover) {
+		.sv-accordion__header:not([aria-disabled='true']):hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-accordion__header[aria-disabled='true'] {
+		color: var(--sv-color-text-muted);
+		cursor: not-allowed;
+	}
+
+	.sv-accordion__title {
+		flex: 1;
+		min-inline-size: 0;
+	}
+
+	/* The chevron turns over as the section opens. */
+	.sv-accordion__icon {
+		flex: none;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		color: var(--sv-color-text-muted);
+		transition: transform var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	.sv-accordion__item[open] > .sv-accordion__header .sv-accordion__icon {
+		transform: rotate(180deg);
+	}
+
+	.sv-accordion__panel {
+		padding-block: calc(var(--sv-space-5) * var(--sv-density))
+			calc(var(--sv-space-21) * var(--sv-density));
+		padding-inline: var(--sv-space-8);
+		color: var(--sv-color-text-muted);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/*
+	 * The content fades in as it opens and out before it closes. The height itself snaps, as
+	 * only opacity and transform are animated; where ::details-content is not supported, the
+	 * section simply opens.
+	 */
+	.sv-accordion__item::details-content {
+		opacity: 0;
+		transform: translateY(calc(var(--sv-space-5) * -1));
+		transition-property: opacity, transform, content-visibility;
+		transition-duration: var(--sv-duration-normal);
+		transition-timing-function: var(--sv-ease);
+		transition-behavior: allow-discrete;
+	}
+
+	.sv-accordion__item[open]::details-content {
+		opacity: 1;
+		transform: none;
+	}
+}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionDefaults, AccordionItem, AccordionProps } from './types.js';

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion.svelte';

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1,64 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density } from '../../core/props/types.js';
+/** The Accordion props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface AccordionDefaults {
+    /**
+     * Multiplies the padding of the headers and panels, never the text.
+     * @default 'default'
+     */
+    density: Density;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Accordion: AccordionDefaults;
+    }
+}
+/** One section: a header that opens and closes it, and the panel the `panel` snippet renders. */
+export interface AccordionItem<T extends string | number = string> {
+    /** Identifies the section in `value`. */
+    value: T;
+    /** The header's text. */
+    title: string;
+    /** Its header no longer opens or closes it; it keeps its state. */
+    disabled?: boolean;
+}
+/** One section open at a time: opening one closes the others. */
+interface Single<T> {
+    /**
+     * Lets several sections be open at once; `value` is then a list.
+     * @default false
+     */
+    multiple?: false;
+    /** The open section, or `null` when all are closed. Bindable. */
+    value?: T | null;
+    /** Called with the new value when the user opens or closes a section. */
+    onchange?: (value: T | null) => void;
+}
+/** Any number of sections open. */
+interface Multiple<T> {
+    multiple: true;
+    /** The open sections. Bindable. */
+    value?: T[];
+    /** Called with the new value when the user opens or closes a section. */
+    onchange?: (value: T[]) => void;
+}
+/**
+ * Sections that open and close under their headers, built on the platform's `<details>`: they
+ * work before scripts load, and finding text in the page opens the section it is in. One opens
+ * at a time unless `multiple` is set. `class`, `style`, `ref` and other attributes go to the
+ * root element.
+ *
+ * @example
+ * <Accordion items={[{ value: 'fees', title: 'Fees' }, { value: 'limits', title: 'Limits' }]} bind:value={open}>
+ *   {#snippet panel(item)}{answers[item.value]}{/snippet}
+ * </Accordion>
+ */
+export type AccordionProps<T extends string | number = string> = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<AccordionDefaults> & {
+    /** The sections, in order. */
+    items: readonly AccordionItem<T>[];
+    /** The content of a section, under its header. */
+    panel: Snippet<[AccordionItem<T>]>;
+} & (Single<T> | Multiple<T>)>;
+export {};

package/dist/components/Accordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dialog/Dialog.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	// A modal dialog in the middle of the screen, on the shared modal shell. See DialogProps.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import Modal from '../Modal/Modal.svelte';
+	import type { DialogDefaults, DialogProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		open = $bindable(false),
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: DialogProps = $props();
+
+	const resolve = useDefaults<DialogDefaults>('Dialog', {
+		size: 'md',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+</script>
+
+<Modal
+	{...rest}
+	component="Dialog"
+	placement="center"
+	panelClass={sharedClasses(p, 'Dialog')}
+	enter={pop}
+	class={['sv-dialog', className]}
+	bind:open
+	bind:ref
+/>

package/dist/components/Dialog/Dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps } from './types.js';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog } from './Dialog.svelte';
+export type { DialogDefaults, DialogProps } from './types.js';

package/dist/components/Dialog/index.js

@@ -0,0 +1 @@
+export { default as Dialog } from './Dialog.svelte';

package/dist/components/Dialog/types.d.ts

@@ -0,0 +1,50 @@
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density, Rounded, Size } from '../../core/props/types.js';
+import type { ModalContentProps } from '../Modal/types.js';
+/** The Dialog props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface DialogDefaults {
+    /**
+     * The width of the panel, from `xs` (21rem) to `xl` (55rem).
+     * @default 'md'
+     */
+    size: Size;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius for large surfaces.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Dialog: DialogDefaults;
+    }
+}
+/**
+ * A modal dialog: the platform's own `<dialog>`, in the top layer, with the rest of the page
+ * inert and still. Focus moves into it and returns to the control that opened it; Escape and a
+ * press on the backdrop close it unless it is `persistent`. `class`, `style`, `ref` and other
+ * attributes go to the `<dialog>`.
+ *
+ * @example
+ * <Dialog title="Delete this card?" bind:open>
+ *   {#snippet trigger(attributes)}<Button {...attributes} color="error">Delete</Button>{/snippet}
+ *   The card stops working at once. Payments already made are kept.
+ *   {#snippet actions({ close })}
+ *     <Button variant="text" onclick={close}>Keep it</Button>
+ *     <Button color="error" onclick={remove}>Delete</Button>
+ *   {/snippet}
+ * </Dialog>
+ */
+export type DialogProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, Partial<DialogDefaults> & ModalContentProps & {
+    /**
+     * The panel fills the screen, as on a phone.
+     * @default false
+     */
+    fullscreen?: boolean;
+}>;

package/dist/components/Dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	// A list of actions that opens from a control. See MenuProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { checkValue, DEV } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { ALIGNS, anchored, SIDES } from '../../primitives/anchored/anchored.js';
+	import { rovingFocus } from '../../primitives/focus/roving-focus.js';
+	import { typeahead } from '../../primitives/keyboard/typeahead.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import './menu.css';
+	import type { MenuAction, MenuDefaults, MenuProps } from './types.js';
+
+	let {
+		density,
+		items,
+		onselect,
+		trigger,
+		open = $bindable(false),
+		side = 'bottom',
+		align = 'start',
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: MenuProps = $props();
+
+	const resolve = useDefaults<MenuDefaults>('Menu', { density: 'default' });
+	const p = $derived(resolve({ density }));
+
+	if (DEV) {
+		$effect(() => checkValue('Menu', 'side', side, SIDES));
+		$effect(() => checkValue('Menu', 'align', align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// Runs of actions. A heading starts a named group, which a separator or the next heading ends.
+	interface Group {
+		heading?: string;
+		actions: MenuAction[];
+	}
+	const blocks = $derived.by(() => {
+		const list: Array<Group | 'separator'> = [];
+		let group: Group | undefined;
+		for (const item of items) {
+			if ('separator' in item) {
+				list.push('separator');
+				group = undefined;
+			} else if ('heading' in item) {
+				group = { heading: item.heading, actions: [] };
+				list.push(group);
+			} else {
+				if (!group) list.push((group = { actions: [] }));
+				group.actions.push(item);
+			}
+		}
+		return list;
+	});
+
+	// The control that opens it: the menu is placed against it, named by it, and gives focus back.
+	let anchor = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		node.id ||= `${uid}-trigger`;
+		anchor = node;
+		return () => {
+			if (anchor === node) anchor = null;
+		};
+	};
+
+	// Which item takes focus as the menu opens: the last after ArrowUp, else the first.
+	let from: 'first' | 'last' = 'first';
+	function show(start: 'first' | 'last') {
+		from = start;
+		if (open && ref) focusEnd(ref);
+		open = true;
+	}
+
+	const ANCHOR = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'menu',
+		'aria-expanded': open,
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open ? close('action') : show('first')),
+		onkeydown: (event) => {
+			if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+			event.preventDefault();
+			show(event.key === 'ArrowUp' ? 'last' : 'first');
+		},
+		[ANCHOR]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		// Escape and a choice give focus back to the control; Tab, a press or focus elsewhere
+		// have already chosen where it goes.
+		if ((reason === 'escape' || reason === 'action') && ref?.contains(document.activeElement)) {
+			anchor?.focus({ preventScroll: true });
+		}
+		open = false;
+		onclose?.(reason);
+	}
+
+	function choose(item: MenuAction) {
+		close('action');
+		onselect?.(item);
+	}
+
+	function focusEnd(menu: HTMLElement) {
+		const enabled = menu.querySelectorAll<HTMLElement>('[data-sv-item]:not(:disabled)');
+		(from === 'last' ? enabled[enabled.length - 1] : enabled[0])?.focus({ preventScroll: true });
+	}
+
+	const enter: Attachment<HTMLElement> = (menu) => {
+		menu.showPopover();
+		focusEnd(menu);
+	};
+
+	// Tab and Shift+Tab close the menu once focus has moved on: the menu turns inert as it fades,
+	// and the move must not start from there.
+	function tab(event: KeyboardEvent) {
+		if (event.key === 'Tab') setTimeout(() => close('focus'));
+	}
+
+	// The pointer and the keyboard share one highlight: the item under the pointer takes focus.
+	function follow(event: PointerEvent & { currentTarget: HTMLButtonElement }) {
+		if (document.activeElement !== event.currentTarget) {
+			event.currentTarget.focus({ preventScroll: true });
+		}
+	}
+</script>
+
+{#snippet action(item: MenuAction)}
+	<button
+		type="button"
+		role="menuitem"
+		tabindex="-1"
+		disabled={item.disabled}
+		data-sv-item
+		data-sv-label={item.label}
+		class={['sv-menu__item', item.danger && 'sv-menu__item--danger']}
+		onclick={() => choose(item)}
+		onpointermove={follow}
+	>
+		{#if item.icon}
+			<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={item.icon} /></svg>
+		{/if}
+		<span class="sv-menu__label">{item.label}</span>
+		{#if item.shortcut}<kbd class="sv-menu__shortcut">{item.shortcut}</kbd>{/if}
+	</button>
+{/snippet}
+
+{@render trigger(triggerAttributes)}
+
+{#if open}
+	<div
+		bind:this={ref}
+		aria-labelledby={anchor?.id}
+		tabindex="-1"
+		{...rest}
+		{id}
+		role="menu"
+		popover="manual"
+		class={['sv-menu', sharedClasses(p, 'Menu'), className]}
+		{@attach anchored({ anchor, side, align })}
+		{@attach dismissable({ onDismiss: close, inside: () => [anchor], focusOutside: true })}
+		{@attach rovingFocus({ orientation: 'vertical' })}
+		{@attach typeahead()}
+		{@attach enter}
+		onkeydown={tab}
+		transition:pop
+	>
+		{#each blocks as block, index (index)}
+			{#if block === 'separator'}
+				<div role="separator" class="sv-menu__separator"></div>
+			{:else}
+				<div
+					role={block.heading ? 'group' : 'none'}
+					aria-labelledby={block.heading ? `${id}-${index}` : undefined}
+				>
+					{#if block.heading}
+						<div role="presentation" id="{id}-{index}" class="sv-menu__heading">
+							{block.heading}
+						</div>
+					{/if}
+					{#each block.actions as item, i (i)}{@render action(item)}{/each}
+				</div>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/dist/components/Menu/Menu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenuProps } from './types.js';
+declare const Menu: import("svelte").Component<MenuProps, {}, "ref" | "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Menu } from './Menu.svelte';
+export type { MenuAction, MenuDefaults, MenuHeading, MenuItem, MenuProps, MenuSeparator } from './types.js';

package/dist/components/Menu/index.js

@@ -0,0 +1 @@
+export { default as Menu } from './Menu.svelte';

package/dist/components/Menu/menu.css

@@ -0,0 +1,103 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A raised surface of rows, as wide as its longest item within a short line. */
+	.sv-menu {
+		--sv-menu-pad: var(--sv-space-5);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		min-inline-size: 13rem;
+		max-inline-size: min(21rem, 100vw - 2 * var(--sv-space-8));
+		max-block-size: calc(100dvh - 2 * var(--sv-space-8));
+		padding: var(--sv-menu-pad);
+		overflow: auto;
+		overscroll-behavior: contain;
+		border: var(--sv-hairline) solid var(--sv-color-border-soft);
+		border-radius: var(--sv-radius-lg);
+		outline: none;
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+	}
+
+	/* A row a small control tall, rounded to sit inside the menu's corner. */
+	.sv-menu__item {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+		box-sizing: border-box;
+		inline-size: 100%;
+		min-block-size: calc(var(--sv-control-sm) * var(--sv-density));
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density)) var(--sv-space-8);
+		border: 0;
+		border-radius: max(0px, var(--sv-radius-lg) - var(--sv-menu-pad));
+		outline: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* The pointer focuses the item under it, so one highlight serves both. */
+	.sv-menu__item:focus {
+		background-color: color-mix(in oklch, currentColor var(--sv-state-press), transparent);
+	}
+
+	.sv-menu__item:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	.sv-menu__item--danger {
+		color: var(--sv-color-error);
+	}
+
+	.sv-menu__item svg {
+		flex: none;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	.sv-menu__label {
+		flex: 1;
+		min-inline-size: 0;
+		overflow-wrap: anywhere;
+	}
+
+	.sv-menu__shortcut {
+		margin-inline-start: auto;
+		color: var(--sv-color-text-muted);
+		font: inherit;
+		font-size: var(--sv-text-xs);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sv-menu__item--danger .sv-menu__shortcut {
+		color: inherit;
+	}
+
+	.sv-menu__separator {
+		flex: none;
+		block-size: var(--sv-hairline);
+		margin-block: var(--sv-menu-pad);
+		margin-inline: calc(-1 * var(--sv-menu-pad));
+		background-color: var(--sv-color-border-soft);
+	}
+
+	/* The theme's label voice, muted, above the items it names. */
+	.sv-menu__heading {
+		padding: var(--sv-space-8) var(--sv-space-8) var(--sv-space-3);
+		color: var(--sv-color-text-muted);
+		font-size: var(--sv-label-size);
+		font-weight: var(--sv-weight-medium);
+		letter-spacing: var(--sv-label-tracking);
+		text-transform: var(--sv-label-transform);
+	}
+}