entasis 0.9.2 → 0.10.0

package/dist/components/DataTable/dataTable.model.svelte.js

@@ -422,11 +422,12 @@ export class DataTableModel {
             });
         }
         if (this.props.rowActions) {
+            const width = this.props.rowActionsWidth ?? 36;
             definitions.push({
                 id: DATA_TABLE_ACTIONS_COLUMN,
-                size: 36,
-                minSize: 36,
-                maxSize: 36,
+                size: width,
+                minSize: width,
+                maxSize: width,
                 enableHiding: false,
                 enablePinning: false,
                 enableResizing: false,

package/dist/components/DataTable/dataTable.props.d.ts

@@ -131,6 +131,10 @@ export type DataTableRowPayload<TData> = {
     toggleSelected: () => void;
     toggleExpanded: () => void;
 };
+export type DataTableRowActivation<TData> = DataTableRowPayload<TData> & {
+    /** The click or Enter key press that activated the row, for modifier keys. */
+    event: MouseEvent | KeyboardEvent;
+};
 export type DataTableCellPayload<TData, TValue = unknown> = DataTableRowPayload<TData> & {
     columnId: string;
     value: TValue;
@@ -275,6 +279,19 @@ type DataTableBaseProps<TData> = {
     bulkActions?: Slot<DataTableToolbarPayload<TData>>;
     /** Actions rendered for an individual row. */
     rowActions?: Slot<DataTableRowPayload<TData>>;
+    /**
+     * Width of the row actions column, in pixels. The default fits one icon button; widen it for
+     * text buttons or several actions.
+     * @default 36
+     */
+    rowActionsWidth?: number;
+    /**
+     * Called when a row is activated: clicked anywhere that is not a control inside it, or, in
+     * `grid` mode, given Enter on a cell with no editor or control. Rows show a pointer while
+     * it is set. In `table` mode rows are not focusable, so keep a link or row action for
+     * keyboard users.
+     */
+    onRowActivate?: (payload: DataTableRowActivation<TData>) => void;
     /** Additional content displayed below an expanded row. */
     expandedContent?: Slot<DataTableRowPayload<TData>>;
     /** Display the loading state while rows are being fetched. */

package/dist/components/DataTable/dataTable.theme.d.ts

@@ -73,6 +73,10 @@ export declare const dataTableTheme: {
             true: string;
             false: string;
         };
+        activatable: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {
@@ -234,6 +238,10 @@ export declare const setDataTableTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
+        activatable: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {
@@ -393,6 +401,10 @@ export declare const useDataTableTheme: import("../../utils/cva/theme.js").UseCo
             true: string;
             false: string;
         };
+        activatable: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         density: {

package/dist/components/DataTable/dataTable.theme.js

@@ -113,9 +113,10 @@ const row = cva({
     base: 'state-layer grid min-w-full border-b border-neutral-muted transition-colors last:border-b-0 data-[selected=true]:bg-selected-muted data-[selected=true]:text-selected-muted-readable',
     variants: {
         density: { compact: 'min-h-row-sm', normal: 'min-h-row-md', comfortable: 'min-h-row-lg' },
-        grouped: { true: 'bg-surface-raised font-medium', false: '' }
+        grouped: { true: 'bg-surface-raised font-medium', false: '' },
+        activatable: { true: 'cursor-pointer', false: '' }
     },
-    defaultVariants: { density: 'normal', grouped: false }
+    defaultVariants: { density: 'normal', grouped: false, activatable: false }
 });
 const cell = cva({
     base: 'relative flex min-w-0 items-center overflow-hidden border-neutral-muted outline-none',

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

@@ -1,6 +1,6 @@
 export { default as DataTable } from './DataTable.svelte';
 export { createDataTableColumnHelper } from './dataTable.column-helper.js';
 export { createDataTableState } from './dataTable.model.svelte.js';
-export type { DataTableAggregation, DataTableAlignment, DataTableApi, DataTableBooleanFilter, DataTableBuiltInEditor, DataTableCellCommit, DataTableCellPayload, DataTableCellRenderPayload, DataTableColumn, DataTableColumnFilter, DataTableCustomEditor, DataTableCustomFilter, DataTableDateEditor, DataTableDateFilter, DataTableEditor, DataTableEditorPayload, DataTableFilter, DataTableFilterPayload, DataTableHeaderPayload, DataTableHeaderRenderPayload, DataTableInteractionMode, DataTableNumberEditor, DataTableNumberFilter, DataTableOption, DataTablePaginationConfig, DataTablePaginationState, DataTablePinning, DataTableProcessingMode, DataTableProps, DataTableRowPayload, DataTableSearchConfig, DataTableSelectionMode, DataTableSelectEditor, DataTableSelectFilter, DataTableSorting, DataTableState, DataTableSwitchEditor, DataTableTextEditor, DataTableTextFilter, DataTableToolbarPayload } from './dataTable.props.js';
+export type { DataTableAggregation, DataTableAlignment, DataTableApi, DataTableBooleanFilter, DataTableBuiltInEditor, DataTableCellCommit, DataTableCellPayload, DataTableCellRenderPayload, DataTableColumn, DataTableColumnFilter, DataTableCustomEditor, DataTableCustomFilter, DataTableDateEditor, DataTableDateFilter, DataTableEditor, DataTableEditorPayload, DataTableFilter, DataTableFilterPayload, DataTableHeaderPayload, DataTableHeaderRenderPayload, DataTableInteractionMode, DataTableNumberEditor, DataTableNumberFilter, DataTableOption, DataTablePaginationConfig, DataTablePaginationState, DataTablePinning, DataTableProcessingMode, DataTableProps, DataTableRowActivation, DataTableRowPayload, DataTableSearchConfig, DataTableSelectionMode, DataTableSelectEditor, DataTableSelectFilter, DataTableSorting, DataTableState, DataTableSwitchEditor, DataTableTextEditor, DataTableTextFilter, DataTableToolbarPayload } from './dataTable.props.js';
 export { dataTableTheme, setDataTableTheme, useDataTableTheme, type DataTableClasses, type DataTableTheme, type DataTableThemeProps } from './dataTable.theme.js';
 export { dataTableDescription } from './dataTable.mcp.js';

package/dist/components/Dialog/Dialog.svelte

@@ -104,7 +104,12 @@
 </script>
 
 {#snippet CLOSE_BUTTON()}
-	<Slot class={classes.closeButton({ size: dialog.computedSize })} render={closeButton}>
+	{#if closeButton}
+		<!-- The part positions a custom close button through this wrapper. -->
+		<Slot class={classes.closeButton({ size: dialog.computedSize })} render={closeButton} />
+	{:else}
+		<!-- The default button carries the part itself. Wrapped in the same classes, the empty
+		     wrapper drew a dot at the corner when hovered (padding, rounded, state layer). -->
 		<Button
 			squared
 			class={classes.closeButton({ size: dialog.computedSize })}
@@ -115,7 +120,7 @@
 		>
 			{@render xIcon({ size: 20 })}
 		</Button>
-	</Slot>
+	{/if}
 {/snippet}
 
 {#if dialog.isOpen}
@@ -212,15 +217,15 @@
 	{#if typeof trigger === 'function'}
 		{@render trigger?.(dialog)}
 	{:else}
+		{@const { content, children, onclick, ...buttonProps } = trigger}
 		<Button
-			{...trigger}
+			{...buttonProps}
 			onclick={(event) => {
-				trigger.onclick?.(event);
+				onclick?.(event);
 				dialog.open();
 			}}
-		>
-			{trigger.content}
-		</Button>
+			children={children ?? content}
+		/>
 	{/if}
 {/if}
 

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

@@ -10,8 +10,9 @@ interface DialogOptions extends MakeRequired<Pick<DialogProps, 'id' | 'type' | '
 }
 declare const DialogState_base: new (props: DialogOptions) => {} & DialogOptions;
 export declare class DialogState extends DialogState_base {
+    #private;
     parent: DialogState | null;
-    children: DialogState[];
+    get children(): readonly DialogState[];
     hasTransitioned: boolean;
     theme: import("../Theme/theme.state.svelte.js").ThemeState;
     layer: import("../../utils/layers.svelte.js").LayerHandle;

package/dist/components/Dialog/dialog.state.svelte.js

@@ -1,4 +1,5 @@
 import { createBindableStateClass } from '../../utils/state.svelte.js';
+import { Registry } from '../../utils/registry.svelte.js';
 import { createPointerDrag } from '../../utils/pointerDrag.js';
 // import { useTheme } from '../../utils/theme.svelte.js';
 import { getContext, onMount, setContext, untrack } from 'svelte';
@@ -8,7 +9,11 @@ import { useDialogMotion } from './dialog.theme.js';
 export { DIALOG_Z_BASE, DIALOG_Z_STEP } from '../Theme/theme.layers.js';
 export class DialogState extends createBindableStateClass() {
     parent = getContext('dialog');
-    children = $state([]);
+    // Nested dialogs join while they mount and leave when torn down; see `Registry`.
+    #children = new Registry();
+    get children() {
+        return this.#children.items;
+    }
     hasTransitioned = $state(false);
     theme = useTheme();
     // Registered in the shared layer stack, which owns Escape / outside-press dismissal,
@@ -68,12 +73,7 @@ export class DialogState extends createBindableStateClass() {
         isActive: () => this.isTop,
         inertSiblings: () => true
     });
-    addChild = (child) => () => {
-        this.children.push(child);
-        return () => {
-            this.children = this.children.filter((d) => d.id !== child.id);
-        };
-    };
+    addChild = (child) => () => this.#children.add(child);
     constructor(options) {
         super(options);
         setContext('dialog', this);

package/dist/components/Dialog/dialog.theme.js

@@ -39,7 +39,7 @@ export const defaultDialogAlign = cva({
     }
 });
 export const defaultDialogBackdrop = cva({
-    base: 'fixed inset-0 bg-neutral/40 backdrop-blur-xs'
+    base: 'fixed inset-0 bg-black/40 backdrop-blur-xs dark:bg-black/60'
 });
 export const defaultDialogContent = cva({
     base: 'z-10 relative px-xl py-md raised-xl h-fit bg-surface-floating text-neutral rounded-xl flex flex-col z-50 will-change-transform transition-transform duration-normal ease-standard',

package/dist/components/FloatingWindow/floatingWindow.theme.js

@@ -145,7 +145,7 @@ const defaultFloatingWindowDockActions = cva({
 // The page dim behind a window opened with `backdrop`: the same wash as Dialog's backdrop, so a
 // modal window and a modal dialog dim the page alike.
 const defaultFloatingWindowBackdrop = cva({
-    base: 'fixed inset-0 bg-neutral/40 backdrop-blur-xs'
+    base: 'fixed inset-0 bg-black/40 backdrop-blur-xs dark:bg-black/60'
 });
 export const defaultFloatingWindowMotion = motion({
     base: {

package/dist/components/Form/Select/Select.svelte

@@ -231,7 +231,9 @@
 				aria-activedescendant={select.isOpen ? select.nav.activeDescendant : undefined}
 				aria-required={required || undefined}
 				aria-label={triggerAttrs?.['aria-label'] ??
-					(label ? undefined : (placeholder ?? t.selectOption))}
+					(label || triggerAttrs?.['aria-labelledby']
+						? undefined
+						: (placeholder ?? t.selectOption))}
 				data-placeholder={select.selectedOption ? undefined : ''}
 				disabled={field.disabled}
 				class={classes.input({ size, disabled: field.disabled })}

package/dist/components/PageShell/pageShell.state.svelte.d.ts

@@ -3,8 +3,8 @@ type PageShellStateOptions = Readonly<PageShellConfig> & {
     readonly isContentScrolled?: boolean;
 };
 export declare class PageShellState {
+    #private;
     private options;
-    private overrides;
     readonly api: PageShellApi;
     constructor(options: PageShellStateOptions);
     get current(): PageShellConfig;

package/dist/components/PageShell/pageShell.state.svelte.js

@@ -1,8 +1,10 @@
 import { getContext, onDestroy, setContext } from 'svelte';
+import { Registry } from '../../utils/registry.svelte.js';
 const PAGE_SHELL_CONTEXT = Symbol('page-shell');
 export class PageShellState {
     options;
-    overrides = $state([]);
+    // Pages join on mount and leave on navigation; see `Registry`.
+    #overrides = new Registry();
     api;
     constructor(options) {
         this.options = options;
@@ -94,7 +96,7 @@ export class PageShellState {
             contentWidth: this.options.contentWidth,
             actionOverflow: this.options.actionOverflow,
             mobileActionCount: this.options.mobileActionCount
-        }, ...this.overrides);
+        }, ...this.#overrides.items);
     }
     get hasHeader() {
         const current = this.current;
@@ -110,16 +112,7 @@ export class PageShellState {
         const current = this.current;
         return Boolean(current.footer || current.footerActions);
     }
-    set = (config) => {
-        this.overrides = [...this.overrides, config];
-        let isActive = true;
-        return () => {
-            if (!isActive)
-                return;
-            isActive = false;
-            this.overrides = this.overrides.filter((override) => override !== config);
-        };
-    };
+    set = (config) => this.#overrides.add(config);
     setEyebrow = (eyebrow) => this.set({ eyebrow });
     setBreadcrumbs = (breadcrumbs) => this.set({ breadcrumbs });
     setBack = (back) => this.set({ back });
@@ -130,7 +123,7 @@ export class PageShellState {
     setFooter = (footer) => this.set({ footer });
     setFooterActions = (footerActions) => this.set({ footerActions });
     reset = () => {
-        this.overrides = [];
+        this.#overrides.clear();
     };
 }
 export function usePageShell() {

package/dist/components/Popover/Popover.svelte

@@ -168,17 +168,17 @@
 	{#if typeof trigger === 'function'}
 		{@render trigger?.(popover)}
 	{:else if typeof trigger !== 'boolean'}
+		{@const { content, children, onclick, ...buttonProps } = trigger}
 		<Button
-			{...trigger}
+			{...buttonProps}
 			{...popover.triggerProps}
 			onclick={(event) => {
-				trigger.onclick?.(event);
+				onclick?.(event);
 				if (openOnClick) popover.toggle();
 			}}
+			children={children ?? content}
 			{@attach popover.reference}
-		>
-			{trigger.content}
-		</Button>
+		/>
 	{/if}
 {/if}
 

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

@@ -1,4 +1,4 @@
 export { default as Popover } from './Popover.svelte';
 export type { PopoverProps } from './popover.props.js';
 export { popoverTheme, setPopoverTheme, usePopoverTheme, type PopoverTheme, type PopoverThemeProps } from './popover.theme.js';
-export { usePopoverContext } from './popover.state.svelte.js';
+export { usePopoverContext, type PopoverState } from './popover.state.svelte.js';

package/dist/components/Popover/popover.mcp.d.ts

@@ -1 +1 @@
-export declare const popoverDescription = "\n# Popover Component\n\nThe Popover component displays floating content positioned relative to a trigger element. It's ideal for tooltips, dropdown menus, and contextual information.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\t\t\n</script>\n// By default Popover comes with a button that triggers them, no need to define a callback and a $state\n<Popover trigger={{ content: \"Toggle Popover\" }}>\n\tPopover content here\n</Popover>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls popover visibility (optional when using trigger prop)\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **ref**: HTMLElement | null - Reference element to position popover against (optional when using trigger prop)\n- **id**: string - Unique identifier\n\n### Layout Props\n- **position**: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' (default: 'bottom')\n  - Determines where popover appears relative to trigger\n- **offset**: number - Distance in pixels from the reference element\n- **fitTrigger**: boolean (default: false) - Whether popover should match the width of the trigger element\n- **positionPanel**: ({ panel, reference }) => { x: number; y: number; minWidth?: number } | null - Place the panel yourself instead of floating-ui: return its viewport coordinates (the panel is `position: fixed`) and optionally a `minWidth` in px that replaces `fitTrigger`'s, or `null` to fall back to `position`. Called when the panel mounts and whenever floating-ui would reposition it. Select uses it to open over its trigger\n- **mobileSheet**: boolean (default: false) - On mobile viewports (<768px), render as a bottom sheet instead of an anchored floating panel\n- **inline**: boolean (default: false) - Render the panel in normal document flow where the component sits instead of portaling to the viewport-fixed layer: no floating-ui positioning, no scroll lock, no outside-press dismissal (Escape still closes it). Same panel classes and motion, and the trigger still toggles it. Wins over `mobileSheet`\n- **mobileSheetSizeTransition**: boolean (default: true) - Whether mobile-sheet panels animate intrinsic size changes\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: PopoverState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: PopoverState) => void - Called after the close transition finishes\n\n### Slot Props\n- **children**: Snippet<[PopoverState]> - Popover content\n- **trigger**: Snippet<[PopoverState]> | (ButtonProps & { content?: string }) | false - Trigger element\n  - Pass a snippet function for custom trigger: `{#snippet trigger(popover)}...</snippet>`\n  - Pass button props object for default button: `trigger={{ content: \"Click Me\", color: \"primary\" }}`\n  - Pass `false` to disable trigger (use with external ref)\n\n### Interaction Props\n- **openOnHover**: boolean (default: false) - Open on mouse hover\n- **openOnClick**: boolean (default: true) - Open on click\n- **delay**: number (default: 100) - Delay in ms before opening on hover\n- **closeOnEscape**: boolean (default: true) - Close on Escape. Only the topmost open layer closes, so Escape inside a nested popover leaves its parent open\n- **closeOnClickOutside**: boolean (default: true) - Close on an outside press. A press dismisses this popover and every layer stacked above it, but never the layer that was pressed\n- **closeOnMouseLeave**: boolean (default: false) - Close when the pointer leaves the hover safe area. The safe area is the trigger, the panel, and a prediction cone toward the panel, so a diagonal move to the panel keeps it open.\n- **debugSafeArea**: boolean (default: false) - Show hover safe-area overlays. Trigger/panel rectangles render in blue; the prediction cone toward the panel renders in orange.\n\n### Focus & ARIA Props\n- **focusOnOpen**: 'first' | 'container' | false (default: false) - Where focus goes when the panel opens: `'first'` moves it to an `[autofocus]` / `[data-autofocus]` target or the first tabbable control, `'container'` focuses the panel itself, `false` keeps it on the trigger. Focus always returns to the trigger when the popover closes (Escape or outside press)\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true (default: 'dialog') - Value of `aria-haspopup` on the trigger, describing what the panel contains. `aria-expanded` and `aria-controls` are managed automatically alongside it, for the built-in Button trigger and for a snippet trigger using `{@attach popover.reference}`\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover focusOnOpen=\"first\" haspopup=\"listbox\" trigger={{ content: 'Pick one' }}>\n\t<ul role=\"listbox\"><li role=\"option\" tabindex=\"0\">First</li></ul>\n</Popover>\n```\n\n### Visual Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact popover size\n  - normal: Standard popover size\n  - large: Larger popover size\n- **transition**: TransitionConfig - Custom transition animation\n- **directedTransition**: boolean (default: true) - Transition direction follows position\n\n### Behavior Props\n- **lockScroll**: boolean (default: true) - Lock body scroll when open\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<PopoverTrigger>\n\t<Trigger />\n</PopoverTrigger>\n\n<PopoverContent>\n\t<Children />\n</PopoverContent>\n```\n\n## Examples\n\n### More Examples\n\n### With a custom trigger snippet\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<!-- {@attach popover.reference} anchors the panel to the element and keeps\n     aria-haspopup / aria-expanded / aria-controls in sync on it -->\n<Popover>\n\t{#snippet trigger(popover)}\n\t\t<Button onclick={() => popover.toggle()} {@attach popover.reference}>Open</Button>\n\t{/snippet}\n\t\n\t<p>This is a popover!</p>\n</Popover>\n```\n\n### With button props\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{\n\t\tcontent: \"Click Me\",\n\t\tcolor: \"secondary\",\n\t\tsize: \"small\"\n\t}}\n>\n\t<p>This is a popover!</p>\n</Popover>\n```\n\n### Different Positions\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Top -->\n<Popover position=\"top\" trigger={{ content: \"Top\" }}>\n\tTop popover\n</Popover>\n\n<!-- Bottom -->\n<Popover position=\"bottom\" trigger={{ content: \"Bottom\" }}>\n\tBottom popover\n</Popover>\n\n<!-- Left -->\n<Popover position=\"left\" trigger={{ content: \"Left\" }}>\n\tLeft popover\n</Popover>\n\n<!-- Right -->\n<Popover position=\"right\" trigger={{ content: \"Right\" }}>\n\tRight popover\n</Popover>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<Popover position=\"bottom-start\" trigger={{ content: \"Menu\" }}>\n\t<div class=\"flex flex-col gap-1\">\n\t\t<Button variant=\"ghost\" fullWidth>Profile</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Settings</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Logout</Button>\n\t</div>\n</Popover>\n```\n\n### Open on Hover\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\topenOnClick={false}\n\tdelay={200}\n>\n\tHover content\n</Popover>\n```\n\n### With Custom Offset\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tposition=\"bottom\"\n\toffset={20}\n>\n\t20px away from trigger\n</Popover>\n```\n\n### Fit Trigger Width\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Click Me\" }}\n\tfitTrigger\n>\n\tPopover matches trigger width\n</Popover>\n```\n\n### Inline (static, in flow)\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Open in place, no portal: useful for docs, visual tests, or an always-visible panel -->\n<Popover inline open trigger={false}>\n\t<p>Rendered where the component sits.</p>\n</Popover>\n\n<!-- The trigger still toggles an inline panel -->\n<Popover inline trigger={{ content: 'Toggle' }}>\n\t<p>Expands below the trigger, in the flow.</p>\n</Popover>\n```\n\n### Mobile Bottom Sheet\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover\n\ttrigger={{ content: \"Open filters\" }}\n\tposition=\"bottom\"\n\tmobileSheet\n>\n\tFilters content\n</Popover>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Small -->\n<Popover size=\"small\" trigger={{ content: \"Small\" }}>\n\tSmall popover\n</Popover>\n\n<!-- Large -->\n<Popover size=\"large\" trigger={{ content: \"Large\" }}>\n\tLarge popover with more content\n</Popover>\n```\n\n### Close on Mouse Leave\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\tcloseOnMouseLeave\n>\n\tCloses when you move outside the rectangle tolerance\n</Popover>\n```\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tonAfterOpen={(payload) => console.log('Popover opened', payload)}\n\tonAfterClose={(payload) => console.log('Popover closed', payload)}\n>\n\tWatch the console\n</Popover>\n```\n\n### User Card Popover with External Ref\n\n```svelte\n<script lang=\"ts\">\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n\timport { Avatar } from 'entasis/avatar';\n\n\tlet avatarRef = $state<HTMLElement | null>(null);\n\tlet open = $state(false);\n\tconst user = { name: 'John Doe', email: 'john@example.com' };\n</script>\n\n<button type=\"button\" bind:this={avatarRef} onclick={() => (open = !open)}>\n\t<Avatar name={user.name} />\n</button>\n\n<Popover bind:open ref={avatarRef} position=\"bottom\">\n\t<div class=\"p-4\">\n\t\t<h3>{user.name}</h3>\n\t\t<p>{user.email}</p>\n\t\t<Button fullWidth>View Profile</Button>\n\t</div>\n</Popover>\n```\n\n## State Management\n\nThe Popover component uses a `PopoverState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Popover identifier\n- **size**: Size - Current popover size\n- **position**: Placement - Current popover position\n- **offset**: number - Current offset value\n- **open()**: () => void - Method to open the popover\n- **close()**: () => void - Method to close the popover\n- **toggle()**: () => void - Method to toggle the popover\n- **reference**: attachment for a custom trigger element (`{@attach popover.reference}`); anchors the panel to it and keeps its `aria-haspopup`, `aria-expanded`, and `aria-controls` in sync\n\n## Accessibility\n\n- The trigger carries `aria-haspopup` (from `haspopup`), `aria-expanded`, and `aria-controls` \u2014 automatically for the built-in Button and for a snippet trigger using `{@attach popover.reference}`\n- `focusOnOpen` decides where focus lands on open; focus returns to the trigger on close, whether by Escape or an outside press\n- Non-modal: Tab is not contained and the page is not made inert (use Dialog for that)\n- Escape closes only the topmost open layer; an outside press dismisses every layer stacked above the one pressed. Popovers, menus, and dialogs share one layer stack\n- Keyboard navigation support\n\n## Notes\n\n- Popover is positioned using floating-ui, except with `inline`, where the document lays the panel out\n- Automatically adjusts position to stay in viewport\n- Multiple popovers can be stacked\n- Scroll locking prevents background scroll (when enabled)\n- Transitions animate based on position direction\n\n## Theme Customization\n\nThe Popover component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `mode` (a floating panel scales, the mobile\n  sheet slides up). Takes `in` / `out` FSO params plus a `duration` / `easing` motion token;\n  the `transition` prop wins over it\n- **popover**: Main popover container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { PopoverThemeProps } from 'entasis/popover';\n\n// Example theme customization\nconst customTheme: PopoverThemeProps = {\n  popover: {\n    base: 'z-[+50] fixed bg-surface-floating text-neutral w-fit rounded-xl raised isolate h-fit',\n    size: {\n      small: 'max-w-3xs w-full p-2',\n      normal: 'max-w-xs w-full p-3',\n      large: 'max-w-sm w-full p-4'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**popover**:\n- base: Base classes applied to all popovers\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls max-width, width, and padding\n  - mode: 'floating' | 'inline' | 'mobileSheet' - Set from `inline` / `mobileSheet`; `root` positions the wrapper (fixed, in flow, or full-screen sheet)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Popover \n  trigger={{ content: \"Click Me\" }}\n  theme={{\n    popover: {\n      base: 'rounded-xl lift-5 border-2 border-primary',\n      size: {\n        normal: 'max-w-md p-4'\n      }\n    }\n  }}\n>\n  Custom styled popover content\n</Popover>\n```\n\n**Size Customization**:\n```svelte\n<Popover \n  size=\"large\"\n  trigger={{ content: \"Large Popover\" }}\n  theme={{\n    popover: {\n      size: {\n        large: 'max-w-lg p-6'\n      }\n    }\n  }}\n>\n  Large popover with more padding\n</Popover>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPopoverTheme } from './index.ts';\n  \n  setPopoverTheme({\n    popover: {\n      base: 'rounded-lg lift-5 backdrop-blur-sm bg-white/95',\n      size: {\n        normal: 'max-w-sm p-4'\n      }\n    }\n  });\n</script>\n```\n";
+export declare const popoverDescription = "\n# Popover Component\n\nThe Popover component displays floating content positioned relative to a trigger element. It's ideal for tooltips, dropdown menus, and contextual information.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\t\t\n</script>\n// By default Popover comes with a button that triggers them, no need to define a callback and a $state\n<Popover trigger={{ content: \"Toggle Popover\" }}>\n\tPopover content here\n</Popover>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls popover visibility (optional when using trigger prop)\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **ref**: HTMLElement | null - Reference element to position popover against (optional when using trigger prop)\n- **id**: string - Unique identifier\n\n### Layout Props\n- **position**: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' (default: 'bottom')\n  - Determines where popover appears relative to trigger\n- **offset**: number - Distance in pixels from the reference element\n- **fitTrigger**: boolean (default: false) - Whether popover should match the width of the trigger element\n- **positionPanel**: ({ panel, reference }) => { x: number; y: number; minWidth?: number } | null - Place the panel yourself instead of floating-ui: return its viewport coordinates (the panel is `position: fixed`) and optionally a `minWidth` in px that replaces `fitTrigger`'s, or `null` to fall back to `position`. Called when the panel mounts and whenever floating-ui would reposition it. Select uses it to open over its trigger\n- **mobileSheet**: boolean (default: false) - On mobile viewports (<768px), render as a bottom sheet instead of an anchored floating panel\n- **inline**: boolean (default: false) - Render the panel in normal document flow where the component sits instead of portaling to the viewport-fixed layer: no floating-ui positioning, no scroll lock, no outside-press dismissal (Escape still closes it). Same panel classes and motion, and the trigger still toggles it. Wins over `mobileSheet`\n- **mobileSheetSizeTransition**: boolean (default: true) - Whether mobile-sheet panels animate intrinsic size changes\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: PopoverState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: PopoverState) => void - Called after the close transition finishes\n\n### Slot Props\n- **children**: Snippet<[PopoverState]> - Popover content\n- **trigger**: Snippet<[PopoverState]> | (ButtonProps & { content?: string }) | false - Trigger element\n  - Pass a snippet function for custom trigger: `{#snippet trigger(popover)}...</snippet>`. Put\n    `{@attach popover.trigger}` on any element (a card, an avatar, a Button) and it opens the\n    panel on click and from the keyboard, with the ARIA state kept in sync. Type the parameter\n    with `PopoverState` from `entasis/popover`.\n  - Pass button props object for default button: `trigger={{ content: \"Click Me\", color: \"primary\" }}`.\n    `children` (a string or a snippet) replaces `content` for a richer body; `prefix` and\n    `suffix` work as on Button.\n  - Pass `false` to disable trigger (use with external ref)\n\n### Interaction Props\n- **openOnHover**: boolean (default: false) - Open on mouse hover\n- **openOnClick**: boolean (default: true) - Open on click\n- **delay**: number (default: 100) - Delay in ms before opening on hover\n- **closeOnEscape**: boolean (default: true) - Close on Escape. Only the topmost open layer closes, so Escape inside a nested popover leaves its parent open\n- **closeOnClickOutside**: boolean (default: true) - Close on an outside press. A press dismisses this popover and every layer stacked above it, but never the layer that was pressed\n- **closeOnMouseLeave**: boolean (default: false) - Close when the pointer leaves the hover safe area. The safe area is the trigger, the panel, and a prediction cone toward the panel, so a diagonal move to the panel keeps it open.\n- **debugSafeArea**: boolean (default: false) - Show hover safe-area overlays. Trigger/panel rectangles render in blue; the prediction cone toward the panel renders in orange.\n\n### Focus & ARIA Props\n- **focusOnOpen**: 'first' | 'container' | false (default: false) - Where focus goes when the panel opens: `'first'` moves it to an `[autofocus]` / `[data-autofocus]` target or the first tabbable control, `'container'` focuses the panel itself, `false` keeps it on the trigger. Focus always returns to the trigger when the popover closes (Escape or outside press)\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true (default: 'dialog') - Value of `aria-haspopup` on the trigger, describing what the panel contains. `aria-expanded` and `aria-controls` are managed automatically alongside it, for the built-in Button trigger and for a snippet trigger using `{@attach popover.reference}`\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover focusOnOpen=\"first\" haspopup=\"listbox\" trigger={{ content: 'Pick one' }}>\n\t<ul role=\"listbox\"><li role=\"option\" tabindex=\"0\">First</li></ul>\n</Popover>\n```\n\n### Visual Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact popover size\n  - normal: Standard popover size\n  - large: Larger popover size\n- **transition**: TransitionConfig - Custom transition animation\n- **directedTransition**: boolean (default: true) - Transition direction follows position\n\n### Behavior Props\n- **lockScroll**: boolean (default: true) - Lock body scroll when open\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<PopoverTrigger>\n\t<Trigger />\n</PopoverTrigger>\n\n<PopoverContent>\n\t<Children />\n</PopoverContent>\n```\n\n## Examples\n\n### More Examples\n\n### With a custom trigger snippet\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<!-- {@attach popover.trigger} anchors the panel to the element, toggles it on click and keeps\n     aria-haspopup / aria-expanded / aria-controls in sync on it -->\n<Popover>\n\t{#snippet trigger(popover)}\n\t\t<Button {@attach popover.trigger}>Open</Button>\n\t{/snippet}\n\t\n\t<p>This is a popover!</p>\n</Popover>\n```\n\nAny element works. One that is not a control gets `role=\"button\"`, `tabindex=\"0\"` and Enter/Space\nactivation:\n\n```svelte\n<script lang=\"ts\">\n\timport { Popover, type PopoverState } from 'entasis/popover';\n\timport { Avatar } from 'entasis/avatar';\n</script>\n\n<Popover>\n\t{#snippet trigger(popover: PopoverState)}\n\t\t<div class=\"flex items-center gap-sm\" {@attach popover.trigger}>\n\t\t\t<Avatar name=\"Ada Lovelace\" />\n\t\t\t<span>Ada Lovelace</span>\n\t\t</div>\n\t{/snippet}\n\n\t<p>Profile details</p>\n</Popover>\n```\n\n### With button props\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{\n\t\tcontent: \"Click Me\",\n\t\tcolor: \"secondary\",\n\t\tsize: \"small\"\n\t}}\n>\n\t<p>This is a popover!</p>\n</Popover>\n```\n\n### Different Positions\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Top -->\n<Popover position=\"top\" trigger={{ content: \"Top\" }}>\n\tTop popover\n</Popover>\n\n<!-- Bottom -->\n<Popover position=\"bottom\" trigger={{ content: \"Bottom\" }}>\n\tBottom popover\n</Popover>\n\n<!-- Left -->\n<Popover position=\"left\" trigger={{ content: \"Left\" }}>\n\tLeft popover\n</Popover>\n\n<!-- Right -->\n<Popover position=\"right\" trigger={{ content: \"Right\" }}>\n\tRight popover\n</Popover>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n</script>\n\n<Popover position=\"bottom-start\" trigger={{ content: \"Menu\" }}>\n\t<div class=\"flex flex-col gap-1\">\n\t\t<Button variant=\"ghost\" fullWidth>Profile</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Settings</Button>\n\t\t<Button variant=\"ghost\" fullWidth>Logout</Button>\n\t</div>\n</Popover>\n```\n\n### Open on Hover\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\topenOnClick={false}\n\tdelay={200}\n>\n\tHover content\n</Popover>\n```\n\n### With Custom Offset\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tposition=\"bottom\"\n\toffset={20}\n>\n\t20px away from trigger\n</Popover>\n```\n\n### Fit Trigger Width\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Click Me\" }}\n\tfitTrigger\n>\n\tPopover matches trigger width\n</Popover>\n```\n\n### Inline (static, in flow)\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Open in place, no portal: useful for docs, visual tests, or an always-visible panel -->\n<Popover inline open trigger={false}>\n\t<p>Rendered where the component sits.</p>\n</Popover>\n\n<!-- The trigger still toggles an inline panel -->\n<Popover inline trigger={{ content: 'Toggle' }}>\n\t<p>Expands below the trigger, in the flow.</p>\n</Popover>\n```\n\n### Mobile Bottom Sheet\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover\n\ttrigger={{ content: \"Open filters\" }}\n\tposition=\"bottom\"\n\tmobileSheet\n>\n\tFilters content\n</Popover>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<!-- Small -->\n<Popover size=\"small\" trigger={{ content: \"Small\" }}>\n\tSmall popover\n</Popover>\n\n<!-- Large -->\n<Popover size=\"large\" trigger={{ content: \"Large\" }}>\n\tLarge popover with more content\n</Popover>\n```\n\n### Close on Mouse Leave\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Hover Me\" }}\n\topenOnHover\n\tcloseOnMouseLeave\n>\n\tCloses when you move outside the rectangle tolerance\n</Popover>\n```\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Popover } from 'entasis/popover';\n</script>\n\n<Popover \n\ttrigger={{ content: \"Trigger\" }}\n\tonAfterOpen={(payload) => console.log('Popover opened', payload)}\n\tonAfterClose={(payload) => console.log('Popover closed', payload)}\n>\n\tWatch the console\n</Popover>\n```\n\n### User Card Popover with External Ref\n\n```svelte\n<script lang=\"ts\">\n\timport { Popover } from 'entasis/popover';\n\timport { Button } from 'entasis/button';\n\timport { Avatar } from 'entasis/avatar';\n\n\tlet avatarRef = $state<HTMLElement | null>(null);\n\tlet open = $state(false);\n\tconst user = { name: 'John Doe', email: 'john@example.com' };\n</script>\n\n<button type=\"button\" bind:this={avatarRef} onclick={() => (open = !open)}>\n\t<Avatar name={user.name} />\n</button>\n\n<Popover bind:open ref={avatarRef} position=\"bottom\">\n\t<div class=\"p-4\">\n\t\t<h3>{user.name}</h3>\n\t\t<p>{user.email}</p>\n\t\t<Button fullWidth>View Profile</Button>\n\t</div>\n</Popover>\n```\n\n## State Management\n\nThe Popover component uses a `PopoverState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Popover identifier\n- **size**: Size - Current popover size\n- **position**: Placement - Current popover position\n- **offset**: number - Current offset value\n- **open()**: () => void - Method to open the popover\n- **close()**: () => void - Method to close the popover\n- **toggle()**: () => void - Method to toggle the popover\n- **trigger**: attachment that makes any element the trigger (`{@attach popover.trigger}`): `reference` plus a click toggle (when `openOnClick`), and on a non-control `role=\"button\"`, `tabindex=\"0\"` and Enter/Space activation. The element's own handler wins: when it calls `open`, `close`, `toggle` or `setOpen` during the click, the default toggle stands down, so a kept `onclick={popover.toggle}` does not toggle twice\n- **reference**: attachment for a custom trigger element (`{@attach popover.reference}`); anchors the panel to it and keeps its `aria-haspopup`, `aria-expanded`, and `aria-controls` in sync, leaving clicks and keyboard to the element\n\n## Accessibility\n\n- The trigger carries `aria-haspopup` (from `haspopup`), `aria-expanded`, and `aria-controls` \u2014 automatically for the built-in Button and for a snippet trigger using `{@attach popover.trigger}` or `{@attach popover.reference}`\n- `focusOnOpen` decides where focus lands on open; focus returns to the trigger on close, whether by Escape or an outside press\n- Non-modal: Tab is not contained and the page is not made inert (use Dialog for that)\n- Escape closes only the topmost open layer; an outside press dismisses every layer stacked above the one pressed. Popovers, menus, and dialogs share one layer stack\n- Keyboard navigation support\n\n## Notes\n\n- Popover is positioned using floating-ui, except with `inline`, where the document lays the panel out\n- Automatically adjusts position to stay in viewport\n- Multiple popovers can be stacked\n- Scroll locking prevents background scroll (when enabled)\n- Transitions animate based on position direction\n\n## Theme Customization\n\nThe Popover component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `mode` (a floating panel scales, the mobile\n  sheet slides up). Takes `in` / `out` FSO params plus a `duration` / `easing` motion token;\n  the `transition` prop wins over it\n- **popover**: Main popover container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { PopoverThemeProps } from 'entasis/popover';\n\n// Example theme customization\nconst customTheme: PopoverThemeProps = {\n  popover: {\n    base: 'z-[+50] fixed bg-surface-floating text-neutral w-fit rounded-xl raised isolate h-fit',\n    size: {\n      small: 'max-w-3xs w-full p-2',\n      normal: 'max-w-xs w-full p-3',\n      large: 'max-w-sm w-full p-4'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**popover**:\n- base: Base classes applied to all popovers\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls max-width, width, and padding\n  - mode: 'floating' | 'inline' | 'mobileSheet' - Set from `inline` / `mobileSheet`; `root` positions the wrapper (fixed, in flow, or full-screen sheet)\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Popover \n  trigger={{ content: \"Click Me\" }}\n  theme={{\n    popover: {\n      base: 'rounded-xl lift-5 border-2 border-primary',\n      size: {\n        normal: 'max-w-md p-4'\n      }\n    }\n  }}\n>\n  Custom styled popover content\n</Popover>\n```\n\n**Size Customization**:\n```svelte\n<Popover \n  size=\"large\"\n  trigger={{ content: \"Large Popover\" }}\n  theme={{\n    popover: {\n      size: {\n        large: 'max-w-lg p-6'\n      }\n    }\n  }}\n>\n  Large popover with more padding\n</Popover>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setPopoverTheme } from './index.ts';\n  \n  setPopoverTheme({\n    popover: {\n      base: 'rounded-lg lift-5 backdrop-blur-sm bg-white/95',\n      size: {\n        normal: 'max-w-sm p-4'\n      }\n    }\n  });\n</script>\n```\n";

package/dist/components/Popover/popover.mcp.js

@@ -42,8 +42,13 @@ The Popover component displays floating content positioned relative to a trigger
 ### Slot Props
 - **children**: Snippet<[PopoverState]> - Popover content
 - **trigger**: Snippet<[PopoverState]> | (ButtonProps & { content?: string }) | false - Trigger element
-  - Pass a snippet function for custom trigger: \`{#snippet trigger(popover)}...</snippet>\`
-  - Pass button props object for default button: \`trigger={{ content: "Click Me", color: "primary" }}\`
+  - Pass a snippet function for custom trigger: \`{#snippet trigger(popover)}...</snippet>\`. Put
+    \`{@attach popover.trigger}\` on any element (a card, an avatar, a Button) and it opens the
+    panel on click and from the keyboard, with the ARIA state kept in sync. Type the parameter
+    with \`PopoverState\` from \`entasis/popover\`.
+  - Pass button props object for default button: \`trigger={{ content: "Click Me", color: "primary" }}\`.
+    \`children\` (a string or a snippet) replaces \`content\` for a richer body; \`prefix\` and
+    \`suffix\` work as on Button.
   - Pass \`false\` to disable trigger (use with external ref)
 
 ### Interaction Props
@@ -107,17 +112,38 @@ The Popover component displays floating content positioned relative to a trigger
 	import { Button } from '../Button/index.ts';
 </script>
 
-<!-- {@attach popover.reference} anchors the panel to the element and keeps
+<!-- {@attach popover.trigger} anchors the panel to the element, toggles it on click and keeps
      aria-haspopup / aria-expanded / aria-controls in sync on it -->
 <Popover>
 	{#snippet trigger(popover)}
-		<Button onclick={() => popover.toggle()} {@attach popover.reference}>Open</Button>
+		<Button {@attach popover.trigger}>Open</Button>
 	{/snippet}
 	
 	<p>This is a popover!</p>
 </Popover>
 \`\`\`
 
+Any element works. One that is not a control gets \`role="button"\`, \`tabindex="0"\` and Enter/Space
+activation:
+
+\`\`\`svelte
+<script lang="ts">
+	import { Popover, type PopoverState } from './index.ts';
+	import { Avatar } from '../Avatar/index.ts';
+</script>
+
+<Popover>
+	{#snippet trigger(popover: PopoverState)}
+		<div class="flex items-center gap-sm" {@attach popover.trigger}>
+			<Avatar name="Ada Lovelace" />
+			<span>Ada Lovelace</span>
+		</div>
+	{/snippet}
+
+	<p>Profile details</p>
+</Popover>
+\`\`\`
+
 ### With button props
 \`\`\`svelte
 <script>
@@ -349,11 +375,12 @@ The Popover component uses a \`PopoverState\` instance that is passed to all slo
 - **open()**: () => void - Method to open the popover
 - **close()**: () => void - Method to close the popover
 - **toggle()**: () => void - Method to toggle the popover
-- **reference**: attachment for a custom trigger element (\`{@attach popover.reference}\`); anchors the panel to it and keeps its \`aria-haspopup\`, \`aria-expanded\`, and \`aria-controls\` in sync
+- **trigger**: attachment that makes any element the trigger (\`{@attach popover.trigger}\`): \`reference\` plus a click toggle (when \`openOnClick\`), and on a non-control \`role="button"\`, \`tabindex="0"\` and Enter/Space activation. The element's own handler wins: when it calls \`open\`, \`close\`, \`toggle\` or \`setOpen\` during the click, the default toggle stands down, so a kept \`onclick={popover.toggle}\` does not toggle twice
+- **reference**: attachment for a custom trigger element (\`{@attach popover.reference}\`); anchors the panel to it and keeps its \`aria-haspopup\`, \`aria-expanded\`, and \`aria-controls\` in sync, leaving clicks and keyboard to the element
 
 ## Accessibility
 
-- The trigger carries \`aria-haspopup\` (from \`haspopup\`), \`aria-expanded\`, and \`aria-controls\` — automatically for the built-in Button and for a snippet trigger using \`{@attach popover.reference}\`
+- The trigger carries \`aria-haspopup\` (from \`haspopup\`), \`aria-expanded\`, and \`aria-controls\` — automatically for the built-in Button and for a snippet trigger using \`{@attach popover.trigger}\` or \`{@attach popover.reference}\`
 - \`focusOnOpen\` decides where focus lands on open; focus returns to the trigger on close, whether by Escape or an outside press
 - Non-modal: Tab is not contained and the page is not made inert (use Dialog for that)
 - Escape closes only the topmost open layer; an outside press dismisses every layer stacked above the one pressed. Popovers, menus, and dialogs share one layer stack

package/dist/components/Popover/popover.state.svelte.d.ts

@@ -11,13 +11,14 @@ interface PopoverOptions extends MakeRequired<Pick<PopoverProps, 'id' | 'size' |
 }
 declare const PopoverOptionsBase: new () => PopoverOptions;
 export declare class PopoverState extends PopoverOptionsBase {
+    #private;
     triggerReference: HTMLElement | null;
     referenceElement: HTMLElement | VirtualElement | null;
     dialogElement: HTMLElement | null;
     transformOrigin: string;
     triggerWidth: number | null;
     parent: PopoverState | null;
-    children: PopoverState[];
+    get children(): readonly PopoverState[];
     hasChildOpen: boolean;
     hasTransitioned: boolean;
     theme: import("../Theme/theme.state.svelte.js").ThemeState;
@@ -64,6 +65,13 @@ export declare class PopoverState extends PopoverOptionsBase {
     dialog: (node: HTMLDialogElement) => () => void;
     panel: (node: HTMLElement) => () => void;
     reference: (node: HTMLElement) => () => void;
+    /**
+     * Makes any element a complete trigger: it anchors the panel (as \`reference\` does), toggles
+     * it on click when \`openOnClick\` allows, and keeps \`aria-expanded\` and friends in sync.
+     * An element that is not already a control also gets \`role="button"\`, \`tabindex="0"\` and
+     * Enter/Space activation, so a card or an avatar opens the panel from the keyboard too.
+     */
+    trigger: (node: HTMLElement) => () => void;
 }
 export declare const usePopoverContext: () => PopoverState | null;
 export {};

package/dist/components/Popover/popover.state.svelte.js

@@ -1,4 +1,5 @@
 import { bind } from '../../utils/state.svelte.js';
+import { Registry } from '../../utils/registry.svelte.js';
 import { getContext, hasContext, onMount, setContext, untrack } from 'svelte';
 import { useTheme } from '../Theme/theme.state.svelte.js';
 import { computePosition, autoUpdate, hide, offset, shift, flip } from '@floating-ui/dom';
@@ -14,6 +15,10 @@ const PopoverOptionsBase = class {
 };
 // The one place the trigger's semantic state becomes ARIA, for triggers the library cannot
 // pass props to (a snippet trigger carrying `{@attach popover.reference}`).
+/** Elements that may carry popup ARIA state. */
+const POPUP_CONTROL = 'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="treeitem"], [role="gridcell"], [role="switch"], [role="checkbox"]';
+/** Elements the browser already focuses and activates from the keyboard. */
+const NATIVE_CONTROL = 'button, a[href], input, select, textarea, summary';
 const TRIGGER_ARIA = {
     haspopup: 'aria-haspopup',
     expanded: 'aria-expanded',
@@ -29,7 +34,11 @@ export class PopoverState extends PopoverOptionsBase {
     // Trigger-matched width (fitTrigger), applied to the panel.
     triggerWidth = $state(null);
     parent = getContext('popover');
-    children = $state([]);
+    // Nested popovers join while they mount and leave when torn down; see `Registry`.
+    #children = new Registry();
+    get children() {
+        return this.#children.items;
+    }
     hasChildOpen = $derived(this.children.some((d) => d.isOpen));
     hasTransitioned = $state(false);
     theme = useTheme();
@@ -84,12 +93,7 @@ export class PopoverState extends PopoverOptionsBase {
         },
         delay: this.delay
     });
-    addChild = (child) => () => {
-        this.children.push(child);
-        return () => {
-            this.children = this.children.filter((d) => d.id !== child.id);
-        };
-    };
+    addChild = (child) => () => this.#children.add(child);
     constructor(options) {
         super();
         bind(this, options);
@@ -109,7 +113,10 @@ export class PopoverState extends PopoverOptionsBase {
     close = () => {
         this.setOpen(false);
     };
+    /** Calls to `setOpen`, direct or through `open`, `close` and `toggle`, unchanged state included. */
+    #openRequests = 0;
     setOpen = (nextOpen) => {
+        this.#openRequests += 1;
         if (this.isOpen === nextOpen)
             return;
         this.isOpen = nextOpen;
@@ -236,7 +243,7 @@ export class PopoverState extends PopoverOptionsBase {
         // Keep the trigger's ARIA in sync whichever way it was rendered (snippet or Button).
         // Only real controls carry aria-haspopup/aria-expanded; a wrapper div or a
         // presentational span used as the anchor must not (axe: aria-allowed-attr).
-        const canCarryPopupState = node.matches('button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="treeitem"], [role="gridcell"], [role="switch"], [role="checkbox"]');
+        const canCarryPopupState = node.matches(POPUP_CONTROL);
         $effect(() => {
             if (!canCarryPopupState)
                 return;
@@ -261,6 +268,52 @@ export class PopoverState extends PopoverOptionsBase {
             };
         });
     };
+    /**
+     * Makes any element a complete trigger: it anchors the panel (as \`reference\` does), toggles
+     * it on click when \`openOnClick\` allows, and keeps \`aria-expanded\` and friends in sync.
+     * An element that is not already a control also gets \`role="button"\`, \`tabindex="0"\` and
+     * Enter/Space activation, so a card or an avatar opens the panel from the keyboard too.
+     */
+    trigger = (node) => {
+        const nativeControl = node.matches(NATIVE_CONTROL);
+        if (!node.matches(POPUP_CONTROL) && !node.hasAttribute('role')) {
+            node.setAttribute('role', 'button');
+        }
+        if (!nativeControl && !node.hasAttribute('tabindex'))
+            node.tabIndex = 0;
+        // The element's own handler wins. One that still opens, closes or toggles the popover
+        // (`onclick={popover.toggle}` kept from before this attachment existed) has acted by the
+        // time the event finishes dispatching, so the default toggle waits until then and runs only
+        // if nothing asked for an open state meanwhile; toggling regardless would undo that call.
+        let pending;
+        const activate = () => {
+            if (!this.openOnClick)
+                return;
+            const requests = this.#openRequests;
+            clearTimeout(pending);
+            pending = setTimeout(() => {
+                if (this.#openRequests === requests)
+                    this.toggle();
+            });
+        };
+        const onKeydown = (event) => {
+            if (nativeControl || event.target !== node)
+                return;
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            activate();
+        };
+        node.addEventListener('click', activate);
+        node.addEventListener('keydown', onKeydown);
+        const offReference = this.reference(node);
+        return () => {
+            clearTimeout(pending);
+            node.removeEventListener('click', activate);
+            node.removeEventListener('keydown', onKeydown);
+            offReference?.();
+        };
+    };
 }
 // Use interface merging to add the properties
 export const usePopoverContext = () => {

package/dist/components/Popover/popover.theme.js

@@ -12,7 +12,7 @@ const defaultPopoverContainer = cva({
             // `inline` keeps the panel in normal flow where the component sits: no portal, no
             // fixed positioning, no floating-ui placement.
             inline: 'static h-fit w-fit',
-            mobileSheet: 'inset-0 flex h-dvh w-dvw max-w-none items-end justify-center overflow-hidden bg-neutral/40 backdrop-blur-xs'
+            mobileSheet: 'inset-0 flex h-dvh w-dvw max-w-none items-end justify-center overflow-hidden bg-black/40 backdrop-blur-xs dark:bg-black/60'
         }
     },
     defaultVariants: {